node--处理一个增加上传操作和渲染页数条

Posted 2021-03-13 跌倒的小黄瓜

一段学习的结束

我也不知道我这是在写些什么，只是觉得学完了一些东西，就是想把它记录
一下，这样我就可以知道我是学过这一块的，要多激励自己，^^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 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 %}