文章管理接口

设计数据表

添加文章接口

编写接口，使用postman模拟提交formdata类型的数据

在article.js 中，加入 /add 路由
postman模拟提交formdata类型的数据

multer处理文件上传

下载安装multer
加载模块 const multer = require('multer')
配置上传文件的存放目录 const upload = multer({ dest: '路径' })

路由（接口）使用

router.post('/add', upload.single('接口文档规定的图片名字'), async (req, res) => {req.body  获取文本类型的数据req.file  获取文件的信息
});

实现发布文章

前面已经可以通过req.body 和 req.file 获取到客户端提交的数据了
自己组装数据表所需的字段
通过db，执行insert语句，完成添加

router.post('/add', upload.single('cover_img'), async (req, res) => {// 如何接收POST请求体。必须使用第三方模块multer来处理POST请求体// console.log(req.body); // 获取文本类型的数据/**   {title: '哈哈哈',content: '哈哈哈哈哈哈哈哈',cate_id: '3',state: '已发布'}* */// console.log(req.file); // 获取文件的信息/***  {fieldname: 'cover_img',originalname: '1.jpg',encoding: '7bit',mimetype: 'image/jpeg',destination: '/Users/tangfengpo/Study/bj97+sh60/Node-09/big-event-server/uploads',filename: '0c86456393a6bd78cb860968a53a089d', // 文件名path: '/Users/tangfengpo/Study/bj97+sh60/Node-09/big-event-server/uploads/0c86456393a6bd78cb860968a53a089d',size: 35774}*/// 组装数据let obj = req.body;obj.cover_img = req.file.filename;obj.pub_date = '2020-03-11 23:15:25';obj.author_id = req.user.id; // 要求登录之后，必须在token中保存用户的id// 添加入库let r = await db('insert into article set ?', obj);if (r && r.affectedRows > 0) {res.json({status: 0,message: '添加文章成功'});} else {res.json({status: 1,message: '添加文章失败'});}
});

moment处理添加时间

把上述添加代码中，时间的处理，修改如下

// obj.pub_date = '2020-03-11 23:15:25';
// obj.pub_date = moment('任何类型的时间/不填表示处理当前时间').format('处理成你想要的格式');
obj.pub_date = moment().format('YYYY-MM-DD hh:mm:ss');

MySQL中的连接查询

-- MySQL中的连接查询
-- 能够连接查询的两张或多张表，必须有关系才行-- 语法
select 字段 from 表1 join 表2 on 两表的关系 [where ... order by .... limit ...]
select 字段 from 表1 join 表2 on 两表的关系 join 表3 on 表的关系 .... [where ... order by .... limit ...]-- select * from article join category on article.cate_id=category.Id
-- 给表名定义别名，简化SQL
-- select * from article a join category c on a.cate_id=c.Id
-- 指定字段查询
-- select a.Id, a.title, a.pub_date, a.state, c.name cate_name from article a
--  join category c
--  on a.cate_id=c.Id-- 加入user表，实现每个用户只能查看自己的文章
select a.Id, a.title, a.pub_date, a.state, c.name cate_name from article ajoin category c on a.cate_id=c.Idjoin user u on u.id=a.author_idwhere u.id = 14

获取文章列表接口

判断必须有必要的参数

// 获取文章列表数据
router.get('/list', async (req, res) => {// 接收所有的请求参数// let pagenum = req.query.pagenum;// let pagesize = req.query.pagesize;// let cate_id = req.query.cate_id;// let state = req.query.state;// 使用解构的方式，获取请求参数let {pagenum, pagesize, cate_id, state} = req.query;// 判断必填参数是否存在if (!pagesize || !pagenum) {return res.json({status: 1,message: '缺少必要参数'});}});

多表连查，查询结果

// 下面查询数据，把结果响应给客户端// 下面是SQL比较长，可以先在 Navicat中查询，没问题，复制过来let sql = `select a.Id, a.title, a.pub_date, a.state, c.name cate_name from article ajoin category c on a.cate_id=c.Idjoin user u on u.id=a.author_idwhere u.id = ?`;let r = await db(sql, req.user.id);if (r) {res.json({status: 0,message: '获取数据列表成功',data: r});} else {res.json({status: 1,message: '查询失败'});}

此时，可以使用postman来测试了

如果你看到结果了，说明没有问题。

相同条件查询总记录数

必须和查询数据的条件一致

// 查询总记录数
let r2 = await db('select count(*) as total from article where author_id=?', req.user.id);
if (r && r2) {res.json({status: 0,message: '获取数据列表成功',data: r,total: r2[0].total});
} else {res.json({status: 1,message: '查询失败'});
}

加入limit，完成分页查询

pagenum 表示当前的页码，比如 1、2、3…
pagesize 表示每页显示多少条，由你自己来定（老师使用的是2）
根据上述两个参数，可以完成SQL语句中limit的部分

limit ${(pagenum-1) * pagesize} , ${pagesize}

使用postman的账号和使用页码登录的账号最好统一。否则使用postman添加的文章页面中可能看不见。

加入where条件，完成筛选查询

对于获取文章接口来说，请求参数 cate_id 和 state，用于完成筛选。

如果服务器端，接收到了 cate_id 和 state，我们只需要加where条件即可。

// 获取文章列表数据
router.get('/list', async (req, res) => {// 接收所有的请求参数// let pagenum = req.query.pagenum;// let pagesize = req.query.pagesize;// let cate_id = req.query.cate_id;// let state = req.query.state;// 使用解构的方式，获取请求参数let {pagenum, pagesize, cate_id, state} = req.query;// 判断必填参数是否存在if (!pagesize || !pagenum) {return res.json({status: 1,message: '缺少必要参数'});}// 生成where条件，完成筛选工作let w = '';if (cate_id) {w += ' and cate_id=' + cate_id; // 注意前面有空格}if (state) {w += ` and state = '${state}'`; // 注意前面有空格}// 下面查询数据，把结果响应给客户端// 下面是SQL比较长，可以先在 Navicat中查询，没问题，复制过来let sql = `select a.Id, a.title, a.pub_date, a.state, c.name cate_name from article ajoin category c on a.cate_id=c.Idjoin user u on u.id=a.author_idwhere u.id = ? ${w}limit ${(pagenum-1)*pagesize}, ${pagesize}`;let r = await db(sql, req.user.id);// 查询总记录数let r2 = await db('select count(*) as total from article where author_id=?' + w, req.user.id);if (r && r2) {res.json({status: 0,message: '获取数据列表成功',data: r,total: r2[0].total});} else {res.json({status: 1,message: '查询失败'});}
});

根据Id删除文章接口

// 根据Id完成删除文章接口
router.get('/delete/:id', async (req, res) => {let id = req.params.id;let r = await db('delete from article where Id=?', id);if (r && r.affectedRows>0) {res.json({status: 0,message: '删除文章成功'});} else {res.json({status: 1,message: '删除文章失败'});}
});

根据Id获取文章详情接口

// 根据Id获取文章详情接口
router.get('/:id', async (req, res) => {let id = req.params.id;let r = await db('select * from article where Id=?', id);// console.log(r);if (r && r.length > 0) {res.json({status: 0,message: '获取文章详情成功',data: r[0]});} else {res.json({status: 1,message: '获取文章详情失败'});}
});

根据 Id 更新文章信息接口

修改文章的时候，可以不选择修改图片，这是比较合理的

// 根据Id更新文章
router.post('/edit', upload.single('cover_img'), async (req, res) => {// req.body;// req.file;// console.log(req.file); // 如果没有选择图片，req.file === undefinedlet obj = req.body; // 这样的话，obj中有 Id、title、cate_id、content、state// 判断，修改的时候，客户端是否重新选择了图片(选择了图片，req.file是对象；没有选择图片，req.file是undefined)if (req.file) {obj.cover_img = req.file.filename;}// obj.pub_date = moment().format('YYYY-MM-DD HH:mm:ss');let r = await db('update article set ? where Id=?', [obj, req.body.Id]);if (r && r.affectedRows>0) {res.json({status: 0,message: '更新文章成功'})} else {res.json({status: 1,message: '更新文章失败'});}
});

前端

回顾文章列表分页实现

完成文章列表搜索功能

先显示分类

// 获取分类，渲染到下拉菜单位置
$.ajax({url: '/my/article/cates',success: function (res) {let str = template('tpl-category', res);$('#category').html(str);form.render('select'); // ---------------  一定要更新渲染 --- }
});

模板代码：

<!-- 分类的模板 -->
<script type="text/html" id="tpl-category"><option value="">所有分类</option>{{each data val}}<option value="{{val.Id}}">{{val.name}}</option>{{/each}}
</script>

完成筛选

思路：

监听搜索区的表单，如果提交表单
判断并设置请求参数
- 如果选择了某个分类，设置请求参数 data.cate_id = cate_id
- 如果是所有分类，则删除这个请求参数 delete data.cate_id
- 文章状态一样的操作
修改页码为1，因为搜索完毕，应该先看到第1页的数据
调用 renderArticle() 重新获取数据并渲染到页面中即可。

// --------------  实现筛选功能 ---------------
// 筛选之后，一定要重置 pagenum = 1;
// 自己设置表单的id
$('#search_form').on('submit', function (e) {e.preventDefault();let cate_id = $('#category').val();let state = $('select[name="state"]').val();if (cate_id) {data.cate_id = cate_id;} else {delete data.cate_id;}if (state) {data.state = state;} else {delete data.state;}// 修改页码为1data.pagenum = 1;// 更新渲染renderArticle();
})

回顾文章添加实现

自己随便写个表单
使用formdata收集数据
提交给接口，就可以完成添加

后续，为了有更好的效果：

获取分类
使用富文本编辑器 tinymce
使用图片剪裁插件

完成文章编辑

复制 publish.html 为edit.html (编辑页面)

文章列表页面，给 ”编辑“ 挂超链接，链接到 edit.html ，并且传递 id参数

// 点击了编辑，应该跳转到 edit.html
$('body').on('click', '.edit', function () {let id = $(this).attr('data-id');location.href = "/article/edit.html?id=" + id;
})

复制publish.js 为edit.js ，修改edit.html页面，引入edit.js

获取地址栏的id，根据id查询一篇文章详情，然后完成表单数据渲染

// ------------------ 新加入的代码 ----------------// 获取地址栏的id，根据id获取一篇文章详情。快速为表单赋值let id = new URLSearchParams(location.search).get('id');$.ajax({url: '/my/article/' + id,success: function (res) {console.log(res);if (res.status === 0) {form.val('editForm', res.data); // 标题、内容// 销毁剪裁区，更换图片，重新创建剪裁区$image.cropper('destroy').attr('src', 'http://localhost:3007/' + res.data.cover_img).cropper(options);// 这里完成了文章获取，下面开始查询分类// 获取所有的分类，渲染到下拉列表中$.ajax({url: '/my/article/cates',success: function (r) {if (r.status === 0) {// 使用模板引擎，渲染数据到页面中// 把当前分类的id，分配到模板r.cate_id = res.data.cate_id;let str = template('cate', r);$('select').html(str);// 执行更新渲染方法form.render('select');}}});}}});

模板加入判断，控制哪个分类是默认勾选

<script type="text/html" id="cate">{{each data val}}<option value="{{val.Id}}" {{if val.Id == cate_id}}selected{{/if}}>{{val.name}}</option>{{/each}}
</script>

图片剪裁默认铺满整个区域

let options = {// 宽高比aspectRatio: 400 / 280,autoCropArea: 1, // 让剪裁框铺满整个剪裁区// 设置预览区的选择器preview: '.img-preview'};

修改添加文章的接口为更新文章的接口即可，其他都不需要修改。

Node — 第九天（大事件项目接口实现三）相关推荐

Node — 第七天（大事件项目接口实现一）
关于JS错误处理 node中和mysql中的错误处理 node和MySQL提供的方法,已经对错误信息进行了封装,只需要使用 err.message 即可获取到错误信息. 比如: const fs = ...
Ajax — 大事件项目（第三天）
大事件-03 用户信息表单验证 html中,直接使用layui提供的内置验证规则 email <input type="text" name="email&quo ...
Node — 第八天（大事件项目接口实现二）
如何处理MySQL的错误 MySQL的错误信息,可以通过err来获取.这是没有问题的. 但是,我们加入了Promise,Promise中的错误,在外部是获取不到的,只能使用Promise相关方法来获取 ...
45 大事件项目 =＞ [01] 后台管理项目ajax练习
目标利用Git管理大事件项目代码安装并且使用 Live Server插件学会查阅layui文档绘制出登录注册页面结构添加表单元素自定义验证规则查阅接口文档完成登录注册功能知道iframe ...
黑马-大事件项目（总结+BUG修复）
前言最近把Nodejs和Ajax学习了一下,找到一个很不错的练手项目:黑马刘龙彬老师主讲的大事件项目,整体看完,给刘老师点个赞,讲的非常细致,开发流程清晰,涉及的知识点也很精准.另外黑马还为这个项目 ...
Ajax — 大事件项目（第二天）
大事件-02 fix一个bug 原因: 开始做注册的时候,页面中只有一个 name=password的input,所以 $('input[name="password"]') 可以 ...
超详细讲解大事件项目api接口
文章目录 1. 初始化 1.1新建项目 1.2 配置 cors 跨域 1.3 配置解析表单数据的中间件 1.4 初始化路由相关的文件夹 1.5 初始化用户路由模块 1.6 抽离用户路由模块中的处理函数 ...
Ajax — 大事件项目（第四天）
分类管理添加分类初步使用弹出层给 "添加分类" 绑定一个单击事件单击事件中,使用 layer.open() 实现一个弹出层 type: 1, 弹层的类型是页面层 title ...
Ajax — 大事件项目（第一天）
应用的前端技术 Ajax (重要) - jQuery方式接口请求 Layui 框架使用 HTML + CSS + JS 项目说明和演示线上 DEMO 项目地址:http://www.liulongb ...

Node — 第九天（大事件项目接口实现三）

文章管理接口

设计数据表

添加文章接口

编写接口，使用postman模拟提交formdata类型的数据

multer处理文件上传

实现发布文章

moment处理添加时间

MySQL中的连接查询

获取文章列表接口

判断必须有必要的参数

多表连查，查询结果

相同条件查询总记录数

加入limit，完成分页查询

加入where条件，完成筛选查询

根据Id删除文章接口

根据Id获取文章详情接口

根据 Id 更新文章信息接口

前端

回顾文章列表分页实现

完成文章列表搜索功能

先显示分类

完成筛选

回顾文章添加实现

完成文章编辑

Node — 第九天（大事件项目接口实现三）相关推荐

最新文章

热门文章

Node — 第九天 （大事件项目接口实现三）

文章管理接口

设计数据表

添加文章接口

编写接口，使用postman模拟提交formdata类型的数据

multer处理文件上传

实现发布文章

moment处理添加时间

MySQL中的连接查询

获取文章列表接口

判断必须有必要的参数

多表连查，查询结果

相同条件查询总记录数

加入limit，完成分页查询

加入where条件，完成筛选查询

根据Id删除文章接口

根据Id获取文章详情接口

根据 Id 更新文章信息接口

前端

回顾文章列表分页实现

完成文章列表搜索功能

先显示分类

完成筛选

回顾文章添加实现

完成文章编辑

Node — 第九天 （大事件项目接口实现三）相关推荐

最新文章

热门文章

Node — 第九天（大事件项目接口实现三）

Node — 第九天（大事件项目接口实现三）相关推荐