我也不知道我这是在写些什么，只是觉得学完了一些东西，就是想把它记录
一下，这样我就可以知道我是学过这一块的，要多激励自己，_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/editrouter.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 class="container-fluid"> <div class="body advert"> <!-- 面包屑 --> <ol class="breadcrumb"> <li><a href="javascript:;">广告管理</a></li> <li class="active">添加广告</li> </ol> <div class="advert-add"> <form action="/advert/add" method="post" class="form-horizontal" enctype="multipart/form-data"> <div class="form-group"> <label for="" class="col-md-3 control-label">标题</label> <div class="col-md-5"> <input type="text" required class="form-control input-sm" name="title" placeholder="填写广告标题"> </div> </div> <div class="form-group"> <label for="" class="col-md-3 control-label">图片</label> <div class="col-md-5"> <input type="file" required id="file" class="form-control input-sm" name="image" placeholder="填写广告图片"> </div> </div> <div class="form-group"> <label for="" class="col-md-3 control-label">链接</label> <div class="col-md-5"> <input type="text" required class="form-control input-sm" name="link" placeholder="填写广告链接"> </div> </div> <div class="form-group"> <label for="" class="col-md-3 control-label">开始时间</label> <div class="col-md-5"> <input type="text" required class="form-control input-sm" name="start_time" placeholder="填写开始时间"> </div> </div> <div class="form-group"> <label for="" class="col-md-3 control-label">结束时间</label> <div class="col-md-5"> <input type="text" required class="form-control input-sm" name="end_time" placeholder="填写结束时间"> </div> </div> <div class="form-group"> <div class="col-md-8"> <input type="submit" class="btn btn-success btn-sm pull-right" value="保存"> </div> </div> </form> </div> </div></div>{% endblock %}{% block script %}<script>// XMLHTTPRequest 1// XMLHTTPRequest 2$('form').on('submit', function (e) { // var formData = 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 = '/advert' } } }) return false})</script>{% endblock %}{% extends "layout.html" %} {% block body %}<div class="container-fluid"> <div class="body advert"> <!-- 面包屑 --> <ol class="breadcrumb"> <li><a href="javascript:;">广告管理</a></li> <li class="active">广告列表</li> </ol> <div class="page-title"> <a href="/advert/add" class="btn btn-success btn-sm pull-right">添加广告</a> </div> <div class="panel panel-default"> <div class="panel-body"> <form action="" class="form-inline"> <select name="" class="form-control input-sm"> <option value="">按年龄</option> </select> <select name="" class="form-control input-sm"> <option value="">按性别</option> </select> <select name="" class="form-control input-sm"> <option value="">按地区</option> </select> <select name="" class="form-control input-sm"> <option value="">按日期</option> </select> <button class="btn btn-success btn-sm">筛选</button> </form> </div> <table class="table table-bordered"> <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="/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:;" class="btn btn-info btn-xs">编辑</a> <a href="javascript:;" class="btn btn-danger btn-xs">删除</a> </td> </tr> {% endfor %} </tbody> </table> </div> <!-- 分页 --> <ul class="pagination pull-right"> <li><a href="/advert?page={{ page - 1 }}">上一页</a></li> {% for i in range(0, totalPage) -%} {% if (i + 1) === page %} <li class="active"><a href="/advert?page={{ i + 1 }}">{{ i + 1 }}</a></li> {% else %} <li><a href="/advert?page={{ i + 1 }}">{{ i + 1 }}</a></li> {% endif %} {%- endfor %} <li><a href="/advert?page={{ page + 1 }}">下一页</a></li> </ul> </div></div>{% endblock %} {% block script %} {% endblock %}联系客服
