Node实践总结3——routes

routes

一个传统的网站往往会有许多路径(/,/login,/user)，不同的路径对应不同的页面，有不同的处理逻辑，涉及表单的页面往往还会同时存在get和post两种形式的请求，其往往也承担了核心的业务。

---

routes结构

GET

先摘一段我工程的代码举个例子：

router.get('/', async function (ctx, next) {
  await ctx.render('index', {
    title: 'OA',
    user: ctx.session.user
  });
});
router.get('/reg', async function (ctx, next) {
  await ctx.render('reg', {
    title: 'OA-注册'
  });
});
router.get('/login', async function (ctx, next) {
  await ctx.render('login', {
    title: 'OA-登录'
  });
});
router.get('/logout', async function (ctx, next) {
  ctx.session.user = null;
  return ctx.redirect('/');
});
router.get('/user_app', async function (ctx, next) {
  await ctx.render('user_app', {
    title: 'OA-应用角色管理'
  });
});
router.get('/user_db', async function (ctx, next) {
  await ctx.render('user_db', {
    title: 'OA-数据库角色管理'
  });
});
router.get('/waf_log', async function (ctx, next) {
  var wafLogs = await WafLogs.fetchAll();//从数据库中查询所有的日志信息
  var logs = {};
  for(var i = 0;i < wafLogs.length;i++){
    logs[i] = wafLogs.models[i].attributes;
  }

  await ctx.render('waf_log', {
    title: 'OA-waf日志',
    logs: logs
  });
});

这一部分基本都是简单的get页面的请求，koa使用ctx.render(模板名，{模板需要的变量})做页面渲染，第一个参数指定要使用哪一个模板文件作为返回的页面，第二个参数用于传入变量给jade模板使用。

GET请求时，通常需要服务器返回一个静态页面，所以逻辑都还算比较简单，只需要指定好页面模板和相应的变量即可。

上述例子中，有一个GET /waf_log的route比较特别，这一个get请求需要服务器先查询存放日志的数据库，将日志信息保存成json格式，再由render函数传给模板进行渲染，下面将这一部分前后端的关键代码放在一起对比的看一下。

//后端
router.get('/waf_log', async function (ctx, next) {
  var wafLogs = await WafLogs.fetchAll();//从数据库中查询所有的日志信息
  var logs = {};
  for(var i = 0;i < wafLogs.length;i++){
    logs[i] = wafLogs.models[i].attributes;
  }

  await ctx.render('waf_log', {
    title: 'OA-waf日志',
    logs: logs
  });
});

//前端
doctype html
html
  head
    meta(charset='utf-8')
    title= title
    link(rel='stylesheet' href='http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css')
    link(rel='stylesheet' href='/stylesheets/mycss.css')
    script(src='http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js')
    script(src='http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js')
body
    div.container
      div.row
        ul.list-inline
          li.col-lg-3.nonpadding
            p.content-title WAF日志
          li.col-lg-6.nonpadding
          li.float-right.col-lg-3.nonpadding
            div.input-group
              input#searchBox.form-control(type='text',placeholder='输入关键字，支持模糊查询',required)
              span.input-group-btn
                input.btn.btn-warning.btn-search(type='submit',value='搜索') 
      div#table.row
        table.table
          thead
            tr
              th 序号（id）
              th 时间（time）
              th 用户名（username）
              th 访问的功能（function）
              th 访问的URL（url）
              th 参数（param）
              th 操作结果（result）
          tbody
            each log in logs
              tr
              each val in log
                td #{val} 

可以看到后端传给模板两个参数{title: 'OA-waf日志',logs: logs}，
模板中title= title，说明前端页面中