开发流程

仅仅一个开始搭建hello的服务是不够的，下面以一个Blog的项目为例介绍更多功能。

Blog项目需求

前台页面：首页列表、文章详情、后台登录页面 后台管理：文章编辑、文章列表

明确需求后，接下来在开始使用章节搭建的基本服务前提下，丰富更多功能。

1. 确立路由配置

2. 添加模板文件

3. 前台页面公共区域的数据

4. 后台访问权限控制

5. 其他细节补充

路由配置

可在${routerDir}下建立两个js文件，分别对应前台和后台功能：

routers/frontend.js

// frontend.js
module.exports = {
  '/, /home': {  // 首页
    api: '/api/article/list',
    view: 'home'
  },

  '/article/:id': {
    api: '/api/article/detail',
    view: 'article-detail'
  },

  '/admin-login': {
    view: 'login'
  }
}

routers/backend.js

// backend.js
module.exports = {
  '/admin/article/list': {  // 文章管理列表
    api: '/api/article/list',
    view: 'admin/list'
  },

  '/admin/edit/:articleId': {
    api: '/api/article/detail',
    view: 'admin/edit'
  }
}

添加模板文件

在${viewDir}下创建相关页面模板：

./views
├── include
│   └── layout.njk
├── admin
│   ├── edit.njk
│   └── list.njk
├── article-detail.njk
├── home.njk
└── login.njk

include/layout.njk是利用nunjucks的{% extends 'layout.njk' %}语法做的基础模板。

前后台页面公共区域的数据

比如读取网站标题等全局配置信息，在${interceptorDir}创建global.js，使用拦截器通配符用法：

interceptors/global.js

// global.js
module.exports = {
  '/(.*)': { 
    api: '/api/config/info',
    handle(data) {
      ctx.state.websiteInfo = data;
    }
  }
}

把网站信息保存到ctx.state中，在模板中可以使用 {{ websiteInfo.title }} 输出标题等信息。

后台访问权限控制

同样使用过滤器，根据后台页面都处于/admin路径前缀下的规则配置，在${interceptorDir}目录下创建admin.js：

interceptors/admin.js

// admin.js
module.exports = {
  '/admin/(.*)': { 
    api: 'post:/api/admin/info',  // 管理员信息用post请求
    body(ctx) {
      const token = ctx.cookie.get('token');
      // 读cookie中的token作为参数传递给接口
      return { token };
    }
    handle(data, ctx) {
      const admin = data.info;
      // 根据接口返回的信息判断是否已登录，未登录或不合法跳转至登录页
      if (admin.isLogin === 0) {
        return ctx.redirect('/admin-login');
      }

      ctx.state.adminInfo = admin;
    }
  }
}

其他细节补充

以上已经基本实现了一个项目需求的步骤。还有一些细节，比如各路由的handle方法应该怎么配置，文章编辑的提交也应该配置一个handle方法，文章列表的删除等等，留给使用者思考。