一段學習的結束
我也不知道我這是在寫些什么，只是覺得學完了一些東西，就是想把它記錄
一下，這樣我就可以知道我是學過這一塊的，要多激勵自己，_O(∩_∩)O哈哈~
以下內容并不完全與標題匹配，不過以下內容綜合了前面幾篇的應用，并增加了
部分東西
js帶碼要和html代碼一起看
import express from 'express'
import Advert from '../models/advert'
import formidable from 'formidable'
import config from '../config'
import { basename } from 'path'
// 創建一個路由容器，將所有的路由中間件掛載給路由容器
const router = express.Router()
router.get('/advert', (req, res, next) => {
const page = Number.parseInt(req.query.page, 10)
const pageSize = 5
Advert
.find()
.skip((page - 1) * pageSize)
.limit(pageSize)
.exec((err, adverts) => {
if (err) {
return next(err)
}
Advert.count((err, count) => {
if (err) {
return next(err)
}
const totalPage = Math.ceil(count / pageSize) // 總頁碼 = 總記錄數 / 每頁顯示大小
res.render('advert_list.html', {
adverts,
totalPage,
page
})
})
})
})
router.get('/advert/add', (req, res, next) => {
res.render('advert_add.html')
})
/**
* POST /advert/add
* body: { title, image, link, start_time, end_time }
*/
router.post('/advert/add', (req, res, next) => {
const form = new formidable.IncomingForm()
form.uploadDir = config.uploadDir // 配置 formidable 檔案上傳接收路徑
form.keepExtensions = true // 配置保持檔案原始的擴展名
form.parse(req, (err, fields, files) => {
if (err) {
return next(err)
}
const body = fields // 普通表單欄位
body.image = basename(files.image.path) // 這里決議提取上傳的檔案名，保存到資料庫
const advert = new Advert({
title: body.title,
image: body.image,
link: body.link,
start_time: body.start_time,
end_time: body.end_time,
})
advert.save((err, result) => {
if (err) {
return next(err)
}
res.json({
err_code: 0
})
})
})
})
router.get('/advert/list', (req, res, next) => {
Advert.find((err, docs) => {
if (err) {
return next(err)
}
res.json({
err_code: 0,
result: docs
})
})
})
// /advert/one/:advertId 是一個模糊匹配路徑
// 可以匹配 /advert/one/* 的路徑形式
// 例如：/advert/one/1 /advert/one/2 /advert/one/a /advert/one/abc 等路徑
// 但是 /advert/one 或者 /advert/one/a/b 是不行的
// 至于 advertId 是自己起的一個名字，可以在處理函式中通過 req.params 來進行獲取
router.get('/advert/one/:advertId', (req, res, next) => {
Advert.findById(req.params.advertId, (err, result) => {
if (err) {
return next(err)
}
res.json({
err_code: 0,
result: result
})
})
})
// /advert/edit
router.post('/advert/edit', (req, res, next) => {
Advert.findById(req.body.id, (err, advert) => {
if (err) {
return next(err)
}
const body = req.body
advert.title = body.title
advert.image = body.image
advert.link = body.link
advert.start_time = body.start_time
advert.end_time = body.end_time
advert.last_modified = Date.now()
// 這里的 save 因為內部有一個 _id 所以這里是不會新增資料的，而是更新已有的資料
advert.save((err, result) => {
if (err) {
return next(err)
}
res.json({
err_code: 0
})
})
})
})
router.get('/advert/remove/:advertId', (req, res, next) => {
Advert.remove({ _id: req.params.advertId }, err => {
if (err) {
return next(err)
}
res.json({
err_code: 0
})
})
})
export default router
{% extends "layout.html" %} {% block body %}
<div >
<div >
<!-- 面包屑 -->
<ol >
<li><a href="javascript:;">廣告管理</a></li>
<li >添加廣告</li>
</ol>
<div >
<form action="/advert/add" method="post" enctype="multipart/form-data">
<div >
<label for="" >標題</label>
<div >
<input type="text" required name="title" placeholder="填寫廣告標題">
</div>
</div>
<div >
<label for="" >圖片</label>
<div >
<input type="file" required id="file" name="image" placeholder="填寫廣告圖片">
</div>
</div>
<div >
<label for="" >鏈接</label>
<div >
<input type="text" required name="link" placeholder="填寫廣告鏈接">
</div>
</div>
<div >
<label for="" >開始時間</label>
<div >
<input type="text" required name="start_time" placeholder="填寫開始時間">
</div>
</div>
<div >
<label for="" >結束時間</label>
<div >
<input type="text" required name="end_time" placeholder="填寫結束時間">
</div>
</div>
<div >
<div >
<input type="submit" value="https://www.cnblogs.com/ygjzs/p/保存">
</div>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% block script %}
<script>
// XMLHTTPRequest 1
// XMLHTTPRequest 2
$('form').on('submit', function (e) {
// var formData = https://www.cnblogs.com/ygjzs/p/new FormData()
// formData.append('name', 'Jack')
// formData.append('age', '18')
// formData.append('file', document.getElementById('file').files[0])
// var xhr = new XMLHttpRequest()
// xhr.open('post', '/advert/add')
// xhr.send(formData)
// return false
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: new FormData($(this)[0]),
// 當你的 data 選項被提交為一個 FormData 物件的時候，一定要將 processData 配置為 false
// 否則 jQuery 的異步提交不生效
processData: false, // tell jQuery not to process the data
// 當提交一個 FormData 物件的時候，記得要將 contentType 設定為 false
// 否則 jQuery 會默認把 Content-Type 設定為 application/x-www-form-urlencoded; charset=UTF-8
contentType: false, // tell jQuery not to set contentType
success: function (data) {
if (data.err_code === 0) {
window.location.href = 'https://www.cnblogs.com/advert'
}
}
})
return false
})
</script>
{% endblock %}
{% extends "layout.html" %}
{% block body %}
<div >
<div >
<!-- 面包屑 -->
<ol >
<li><a href="javascript:;">廣告管理</a></li>
<li >廣告串列</li>
</ol>
<div >
<a href="https://www.cnblogs.com/advert/add" >添加廣告</a>
</div>
<div >
<div >
<form action="" >
<select name="" >
<option value="">按年齡</option>
</select>
<select name="" >
<option value="">按性別</option>
</select>
<select name="" >
<option value="">按地區</option>
</select>
<select name="" >
<option value="">按日期</option>
</select>
<button >篩選</button>
</form>
</div>
<table >
<thead>
<tr>
<td>序號</td>
<th>標題</th>
<th>圖片</th>
<th>鏈接</th>
<th>開始時間</th>
<th>結束時間</th>
<th>點擊次數</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for item in adverts %}
<tr>
<td>0</td>
<td>{{ item.title }}</td>
<td>
<img src="https://www.cnblogs.com/public/uploads/{{ item.image }}" style="width: 100px;" alt="">
</td>
<td>{{ item.link }}</td>
<td>{{ item.start_time }}</td>
<td>{{ item.end_time }}</td>
<td>1</td>
<td>
<a href="javascript:;" >編輯</a>
<a href="javascript:;" >洗掉</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- 分頁 -->
<ul >
<li><a href="https://www.cnblogs.com/advert?page={{ page - 1 }}">上一頁</a></li>
{% for i in range(0, totalPage) -%}
{% if (i + 1) === page %}
<li ><a href="https://www.cnblogs.com/advert?page={{ i + 1 }}">{{ i + 1 }}</a></li>
{% else %}
<li><a href="https://www.cnblogs.com/advert?page={{ i + 1 }}">{{ i + 1 }}</a></li>
{% endif %}
{%- endfor %}
<li><a href="https://www.cnblogs.com/advert?page={{ page + 1 }}">下一頁</a></li>
</ul>
</div>
</div>
{% endblock %} {% block script %} {% endblock %}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/153411.html
標籤：JavaScript
上一篇：復習promise---node