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

一段学习的结束

我也不知道我这是在写些什么，只是觉得学完了一些东西，就是想把它记录

一下，这样我就可以知道我是学过这一块的，要多激励自己，^_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 %}