5分钟上手Egg.js+nunjucks模板引擎快速开发SEO友好的官网项目

在日常的项目中，有时候还是不可避免的会维护一些jq官网项目等。面对此类需求，很多还是以前的老套路，前端写页面交给后端去套数据。很烦有木有～～而改动之后还得交给后端再次修改，时间和沟通都是个麻烦。同时开发中，写静态页面也很麻烦，不能复用，不能使用现在的工具，心累有木有～～当然了，解决办法很多

• 自己写个webpack脚本维护起来，把工程化的那一套东西搬过来。
• 使用现成的nust\next等服务端渲染框架
• 借助于node+模板引擎等
• …

而本文介绍一下node的egg.js框架配合模板引擎来快速开发项目的模式。上手简单快速，一个人搞定前后端。PS：又可以学习新知识来，我好（草）开（泥）心（马），奥利给～～～

初始化项目

# 初始化
cnpm init egg --type=simple

# 安装依赖
cnpm i

# 启动服务
npm run dev

简单看下生成的文件目录（ps：个别文件是没有的，后期自己添加的）

基本介绍

先介绍一下egg中app下的这些文件的基本作用，有个大概的概念：

• app/router.js中编写路由
• app/controller/下编写对应的控制器
• app/service/下编写service
• app/view/下编写对应的模板

路由编写

• 路由，类似前端项目中的路由。是用来定义请求的URL。
• 当用户访问该路由地址时，将映射到对应的controller进行进一步的处理。
• 由此可见，路由router就是定义和controller之间的一种映射关系。

定义路由，首先要打开app/router.js文件，在里面进行定义，例如：

'use strict';

module.exports = app => {
   
  const {
    router, controller } = app;
  // 定义首页的路由
  // 即当直接访问域名的时候，将请求映射到controller.home.home中进行进一步的处理
  router.get('/', controller.home.home);
  // 定义关于我们的路由
  router.get('/about', controller.home.about);
  // 定义新闻详情的路由
  router.get('/details/:id', controller.home.details);
};

• 此处的路由可以理解为就是我们访问的域名后面的具体的路径地址。例如xxx.com/about中的/about
• controller.xx.xx是指当我们访问了这个路由的时候，服务将当前路由映射到这个控制器中。具体的控制器作用，下面会详细介绍。

控制器Controller

• 控制器，主要的作用就是处理用户请求的参数，然后可以调用service服务得到我们需要的数据，最后返回数据或者直接渲染出一个模板。
• 而我们这里则是根据router（router参数非必须）渲染出一个页面，也就是渲染一个html页面返回，这样浏览器打开的就直接是页面了。

'use strict';

const Controller = require('egg').Controller;

class HomeController extends Controller {
   
  async home() {
   
    const {
    ctx } = this;
    await ctx.render('index.njk')
  }
}

module.exports = HomeController

// 或者你也可以简化一下写法
module.exports = class extends require('egg').Controller {
   
    // ...
}

• 通过调用ctx.render(‘index.njk’)方法，我们将渲染一个模板并返回（可以理解为返回给浏览器）
• 在渲染模板的时候我们也可以给模板传递一个数据对象，ctx.render(‘index.njk’, {})，然后模板内就可以通过模板引擎的语法渲染我们的数据了。
• 一般这个数据是通过service读取的数据库或者调用其他接口得到的数据。这个会在下面的service中讲到。

下面演示一个调用service的例子：

// app/controller/home.js

'use strict';
module.exports = class extends require('egg').Controller {
   
    async