1 未拆分路由时

  1. const AdminModel=require('./models/admin')
  2. const Koa=require('koa')
  3. const app=new Koa();
  4. const Router=require('koa-router');
  5. const router=new Router();
  6. router.get('/api',async ctx=>{
  7.     var data=await AdminModel.find({})
  8.     ctx.body=data
  9. })
  10. app.use(router.routes())
  11. app.listen(8080)

拆分路由

在根目录下新建routers文件夹，在里面建index.js文件
根目录新建views文件夹，里面新建index.html
index.html

  1. <body>
  2.      <h2>后台管理界面</h2>
  3.   </body>

//routers/index.js 使用路由，一个页面一个路由

  1. const Router=require('koa-router');
  2. const router=new Router();
  3. const AdminModel=require('../models/admin')
  4. router.get('/api',async ctx=>{
  5.     var data=await AdminModel.find({})
  6.     ctx.body=data
  7. })
  8. router.get('/admin',async ctx=>{
  9.     await ctx.render('index')
  10. })
  11. module.exports=router

index.js 配置路由

  1. const Koa=require('koa')
  2. const app=new Koa();
  3. const router=require('./routers')
  4. const render = require("koa-art-template");
  5. const path=require('path') 
  6. render(app, {
  7.     root: path.join(__dirname, 'views'),
  8.     extname: '.html', //后缀也可以写成.art
  9.     debug: process.env.NODE_ENV !== 'production'
  10. });
  11. app.use(router.routes())
  12. app.listen(8080)

将路由返回前端

index.html

  1. <h2>后台管理界面</h2>
  2.         <table class="table table-hover">
  3.             <thead>
  4.                 <tr>
  5.                     <th>编号</th>
  6.                     <th>姓名</th>
  7.                     <th>年龄</th>
  8.                     <th>操作</th>
  9.                 </tr>
  10.             </thead>
  11.             <tbody>
  12.                 {{each data}}
  13.                 <tr>
  14.                     <td>{{$index}}</td>
  15.                     <td>{{$value.name}}</td>
  16.                     <td>{{$value.age}}</td>
  17.                     <td>
  18.                        <a href="#" class="btn btn-danger">删除</a>
  19.                        <a href="#" class="btn btn-success">编辑</a>
  20.                     </td>
  21.                 </tr>
  22.                 {{/each}}
  23.             </tbody>
  24.         </table>

//routers/index.js

  1. router.get('/admin',async ctx=>{
  2.     var data=await AdminModel.find();
  3.     console.log(data)
  4.     await ctx.render('index',{data})
  5. })

删除

index.html

  1. <td>
  2.         <a href="/delete?id={{@ $value._id}}" class="btn btn-danger">删除</a>
  3.         <a href="#" class="btn btn-success">编辑</a>
  4.  </td>

//routers/index.js

  1. router.get('/delete',async ctx=>{
  2.    var {id}=ctx.query;
  3.    await AdminModel.remove({_id:id})
  4.    ctx.redirect('/admin')     //返回到admin页面
  5. })

编辑

写一个edit.html,bs3-form写一个表单

  1. <input type="text" class="form-control" id="user" value="{{data.name}}" placeholder="请输入用户名">

index.html

  1. <a href="/edit" class="btn btn-success">编辑</a>

//routers/index.js

  1. router.get('/edit',async ctx=>{
  2.     var item=ctx.query.item       //获取的是字符串
  3.     var data=JSON.parse(item)    //将字符串转换为对象
  4.     await ctx.render('edit',{data})
  5. })

解析post提交的数据

安装

  1. yarn add koa-bodyparser

导入
index.js

  1. const bodyParser=require('koa-bodyparser')
  2. //routers/index.js
  3. router.post('/doEdit',async ctx=>{
  4.    ctx.body = ctx.request.body
  5. })

edit.html

  1. name :方便后端去获取数据  /doEdit：跳转的页面 method：提交方式
  2. <form action="/doEdit" method="POST" role="form">
  3.                 <legend>编辑页面</legend>
  4.             <!-- name  方便后端去获取数据 -->
  5.                 <div class="form-group">
  6.                     <label for="">用户名:name</label>
  7.                     <input type="text" name="name" class="form-control" id="user" value="{{data.name}}" placeholder="请输入用户名">
  8.                 </div>
  9.                 <div class="form-group">
  10.                     <label for="">年龄：age</label>
  11.                     <input type="text" name="age" class="form-control" id="age" value="{{data.age}}" placeholder="请输入用户年龄">
  12.                 </div>  
  13.                 <button type="submit" class="btn btn-primary">确定</button>
  14.  </form>

修改

edit.html

  1. <form action="/doEdit" method="POST" role="form">
  2.                 <legend>编辑页面</legend>
  3.                 <input type="hidden" name="_id" value="{{data._id}}">
  4.             <!-- name  方便后端去获取数据 -->
  5.                 <div class="form-group">
  6.                     <label for="">用户名:name</label>
  7.                     <input type="text" name="name" class="form-control" id="user" value="{{data.name}}" placeholder="请输入用户名">
  8.                 </div>
  9.                 <div class="form-group">
  10.                     <label for="">年龄：age</label>
  11.                     <input type="text" name="age" class="form-control" id="age" value="{{data.age}}" placeholder="请输入用户年龄">
  12.                 </div>  
  13.                 <button type="submit" class="btn btn-primary">确定</button>
  14.  </form>

传递的id

  1. <input type="hidden" name="_id" value="{{data._id}}">

//routers/index.js

  1. router.post('/doEdit',async ctx=>{
  2.     var {_id,name,age}=ctx.request.body
  3.     age=parseInt(age)
  4.     await AdminModel.update({_id},{name,age})
  5.     ctx.redirect('/admin')
  6. })