需求简介：
当用户进入首页，渲染home页面,该页面展示一张table表格记录数据库中的用户信息，我们可以执行CURD操作，点击增加时跳转到编辑页面，点击确定请求接口完成更新后返回首页，首页重新查询库得到最新的用户表并渲染；点击编辑跳转到编辑页面，此时需要渲染出当前用户信息到对应表格，之后对修改后的数据更新后返回首页；点击删除则删除当前用户
特别说明：
DB库是之前封装的CURD基本操作类，可参考 https://www.jianshu.com/p/acaf49f9cc7e
路由不太理解的，可参考https://www.jianshu.com/p/bff524b22a6b
模板引擎不了解的，可参考 http://aui.github.io/art-template/zh-cn/docs/
路由下的函数调用仅为书写方便，实际业务中应在回调内写逻辑
npm下载包：npm i koajs/art-template/koa-art-template/mongodb/koa-static/koa-bodyparser
开始
I-声明app.js文件作为入口文件
const MongoClient = require("mongodb").MongoClient, //引入mongodb
Router = require('koa-router'), //引入路由
ArtViews = require('koa-art-template'), //引入模板引擎
Koa = require('koa'); //引入koa
KoaStatic = require('koa-static') //引入静态资源托管
BodyParser = require('koa-bodyparser') //引入post参数获取模块
let app = new Koa() //获取koa实例
let router = new Router() //获取路由实例
let childRouter = require('./router') //引入子路由
router.use('/user',childRouter) //将路由逻辑托管到子路由处理
app.use(koaStatic('./static')) //托管静态资源
artViews(app,{
root:path.join(__dirname,'view'),
extname:'.html',
debug: process.env.NODE_ENV !== 'production'
}) //注册模板引擎
app.use(router.routes()).use(router.allowedMethods()) //注册路由
app.use(3000) //启动web服务
II-声明router.js具体处理路由逻辑
const User = require('koa-router')()
let DB = require('./curd') //获取db类
user.get('/index',ctx=>{ home() }) //监听路由
user.get('/add',ctx=>{ add() })
user.post('/doAdd',ctx=>{ doAdd() })
user.get('/edit',ctx=>{ edit() })
user.post('/doEdit',ctx=>{ doEdit() })
user.get('/remove',ctx=>{ remove() })
module.exports = User.routes()
III-声明static文件作为模板渲染文件
home.html
<a href="/user/add">增加</a>
<table>
<tr><td>编号</td><td>姓名</td><td>年纪</td><td>性别</td><td>状态</td><td>操作</td></tr>
<% for(let i=0; i<list.length ; i++){ %>
<% let item = list[i] %>
<tr>
<% for(let j in item){ %>
<td><%- item[j] %></td>
<% } %>
<td><a href="/user/edit?id=<%- item._id %>">编辑</a>|<a href="/user/remove?id=<%- item._id %>">删除</a></td>
</tr>
<% } %>
</table>
edit.html
<form action="/user/doEdit" method="post">
<input type="hidden" name="_id" id="_id" value="<%- data._id %>"> <br>
<label for="userName">用户名</label> <input type="text" name="username" id="userName" value="<%= data.username %>"> <br>
<label for="passWord">年龄</label> <input type="text" name="password" id="passWord" value="<%= data.age %>"> <br>
<label for="sex">性别</label> <input type="text" name="sex" id="sex" value="<%= data.sex %>"> <br>
<label for="status">状态</label> <input type="text" name="status" id="status" value="<%= data.status %>"> <br>
<input type="submit" value="提交">
</form>
add.html
<form action="/user/doAdd" method="post">
<label for="userName">用户名</label> <input type="text" name="username" id="userName"> <br>
<label for="passWord">年龄</label> <input type="text" name="password" id="passWord"> <br>
<label for="sex">性别</label> <input type="text" name="sex" id="sex"> <br>
<label for="status">状态</label> <input type="text" name="status" id="status"> <br>
<input type="submit" value="提交">
</form>
IIII-编写路由逻辑
1.当用户访问 '/user/index' 时匹配子路由，调用home函数，home函数返回数据库中的用户信息并以表格展示
let home = async ctx =>{
let res = DB.trigger('find',{
collection:"user",
jsons:[{}]
})
if(res.status==1){
await ctx.render('home')
}
}
2.当在home页点击增加按钮时，调用add函数，add函数将渲染add页面
let add = async ctx =>{
await ctx.render('add')
}
2.1.当用户填写完表单点击提交，调用doAdd函数，该函数将向数据库插入数据并返回首页
let doAdd = async ctx =>{
let res = await DB.trigger('insert',{
collection:"user",
jsons:[ctx.request.body]
})
if(res.status){
ctx.redirect('/')
}
}
3.当用户点击编辑按钮，调用edit函数，该函数根据接收到的唯一标识id查询数据库并渲染到edit页面中的表格
let add = async ctx =>{
let _id = DB.getObjectId(ctx.query._id)
let res =await DB.trigger('find',{
collection:'user',
jsons:[{
_id
}]
})
if(res.status){
await ctx.render('edit',{
data:res.data[0]
})
}
}
3.1.当用户编辑完成，调用doEdit函数，该函数查询到指定数据后更新并返回首页
let doEdit = async ctx =>{
let params = ctx.request.body
let _id = DB.getObjectId(params._id)
params._id = _id
let res = await DB.trigger('update',{
collection:"user",
jsons:[{_id},{
$set:params
}]
})
if(res.status){
ctx.redirect('/')
}
}
4.当点击首页中的删除，调用remove函数，则根据id删除指定数据
let remove = async ctx =>{
let _id = DB.getObjectId(ctx.query.id)
let res = await DB.trigger('remove',{
collection:'study',
jsons:[{_id}]
})
if(res.status){
ctx.redirect('/')
}
}
至此，大功告成！！！
网友评论