Skip to content

Latest commit

 

History

History
166 lines (128 loc) · 3.41 KB

learn koa2--controller & template.md

File metadata and controls

166 lines (128 loc) · 3.41 KB
Raw

Table of Contents generated with DocToc

learn koa2--controller & template

controller

在关于路由的那一篇里，将路由的处理放在了app/routes/下的各个文件里，并在app/routes/index.js中引用全部进行处理。

但即便是这样，现有的方式也是不妥的。它把路由URL的判断和对应的处理混杂在了一起。因此，我们应该把路由的处理提取出来，作为额外的controller层：

// app/controllers/home.js
const home = (ctx, next) => {
  ctx.body = 'this is home page';
};

const about = (ctx, next) => {
  ctx.body = 'this is about page';
};

export default {
  home,
  about
};
// app/routes/home.js
import koaRouter from 'koa-router';
import home from '../controllers/home';

const router = koaRouter({
  prefix: '/'
});
router.get('/', home.home);
router.get('/about', home.about);

module.exports = router;

That's All. Done.

template

寻找了很多模板，最终决定使用nunjucks来做Koa2的模板：

  1. mozilla出品，品质和维护起来有保障
  2. 语法和文档都挺清晰
  3. 类似于原生html，学习成本低

为什么不用pug？

  • 从事前端工作的我表示不是很喜欢pug的语法
$ npm install nunjucks --save
# 为了能够让koa渲染
$ npm install koa-views --save

为模板准备的目录结构：

- app
    + controllers
    + routes
    - templates
        - home
            index.html
            about.html
        - layouts
            base.html
    app.js

随便写下模板文件：

<!-- templates/layouts/base.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
  </head>
  <body>
    {% block body %}
    {% endblock %}
  </body>
</html>
<!-- templates/home/index.html -->
{% extends "layouts/base.html" %}

{% block body %}
  <h1>{{ content }}</h1>
{% endblock %}
<!-- templates/home/about.html -->
{% extends "layouts/base.html" %}

{% block body %}
  <h1>{{ content }}</h1>
{% endblock %}

在app/app.js中为使用nunjucks进行配置：

import Koa from 'koa';
import nunjucks from 'nunjucks';
import views from 'koa-views';
import router from './routes/index';

const app = new Koa();

// 配置nunjucks模板文件所在的路径，否则模板继承时无法使用相对路径
nunjucks.configure(__dirname + '/templates', { autoescape: true });

app.use(views(__dirname + '/templates', {
  map: {
    html: 'nunjucks'
  }
}));

app.use(router.routes(), router.allowedMethods());
app.listen(7000);
export default app;

最后，修改controller，来返回我们的模板：

const home = async (ctx, next) => {
  await ctx.render('home/index', {
    title: 'home page',
    content: 'this is home page'
  });
};

const about = async (ctx, next) => {
  await ctx.render('home/about', {
    title: 'about page',
    content: 'this is about page'
  });
};

export default {
  home,
  about
};

That's All. Done.