koa框架-实战（三）
2020-10-12 本文已影响0人
Kiki_Q
一、框架搭建
image.png
image.png
2.地址
相对地址：相对根目录 ‘/admin’
or
绝对地址：
image.png
image.png
3.兼容ie8
image.png
4.公共模块提取（模板的分离）
{{include '重新引入'}}
二、权限
1.登录
表单提交后；md5加密；去数据库匹配；session存储登录信息；
2.生成验证码
插件可自己选择；
验证码存储在session，如果验证码不对，不用和服务器交互；
image.png
3.表单验证
验证码可设置不区分大小写
4.meta url跳转
image.png
image.png
三、退出登录
1.导航显示用户信息
配置全局信息；
image.png
2.退出登录
image.png
3.左侧点击到的分类选中功能
url数组分割
image.png
image.png
四、art-template自定义日期管道
1.显示用户最后登录时间
在用户登录成功的时候，更新用户登录时间；
image.png
2.格式化日期插件（npm i silly-datetime --save）
image.png
3.封装Ajax改变状态的公用方法
image.png
image.png
---3.nodejs后台更新数据
image.png
五、分类列表数据库设计以及多级分类列表渲染
1.表的设计
image.png
2.多级分类
image.png
image.png
在后端做处理性能高一些
image.png
3.分类列表数据增加修改删除
image.png
4.删除后返回上一页
image.png
六、实现列表分页
1.原理
image.png
2.数据库分页方法封装
image.png
image.png
image.png
image.png
image.png
image.png
3.分页插件的使用
jqPaginator：插件文档：http://jqpaginator.keenwon.com/
image.png
4.总页数：封装count方法
image.png
image.png
image.png
image.png
七、上传文件模块koa-multer
1.介绍
image.png
2.安装
image.png
3.引入配置koa-multer模块
image.png
4.使用koa-multer
image.png
5.注意:Form表单加上enctype="multipart/form-data"
八、百度富文本编辑器ueditor的配置使用
1.安装
image.png
image.png
image.png
2.配置
image.png
image.png
九、内容管理增加内容以及关联分类
1.
image.png
2.
image.png
3.表单文本去空格（trim）
image.png
//此配置会引发安全带问题
image.png
5.记录上一页
image.png
十、koa-static配置的安全性问题以及ajax排序ajax改变状态
十一、实现后台按照日期排序
1.
image.png
十二、项目实战轮播图的增加修改删除
1.
image.png
2.
image.png
image.png
3.上传模块的封装
image.png
