Koa2 使用swig模板引擎注意事项

koa使用swig有多种插件,目前我测试了两款:koa-swigco-views. 其中co-views是在官方的文档中看到的,koa-swig是在github中找到的。

安装方式,使用npm install name即可。

关于路由:

如果想把路由分多个文件,例如api.router.js、web.router.js,可以使用Router的参数prefix指定。例如:

1
2
3
4
5
6
7
8
9
var router = require('koa-router')({
prefix: '/api'
});
router.get('/', function *(next) {
this.body = 'this a api response!';
});
module.exports = router;

在api.js中,声明路由时,不要使用koa-generator生成的express风格的路由引用,因为路由前缀已经在路由定义中指定了,否则会404.这么写就可以了:

1
2
3
4
5
6
// routes definition
koa.use(api.routes(), api.allowedMethods());
koa.use(index.routes(), index.allowedMethods());
// mount root routes
app.use(koa.routes());

1. co-views

在根目录下新建lib/render.js文件

1
2
3
4
5
6
7
8
9
10
11
12
/**
* Module dependencies.
*/
var views = require('co-views');
// setup views mapping .html
// to the swig template engine
module.exports = views(__dirname + '/../views', {
map: { html: 'swig' }
});

在app中设置render

1
2
const render = require('./lib/render');
app.context.render = render;

在路由中使用

1
2
3
4
5
6
7
8
var router = require('koa-router')();
router.get('/', async function (ctx, next) {
cxt.body = await ctx.render('index', {
title: 'Hello'
};);
})
module.exports = router;

注意事项:

  1. co-views 2.1.0版本中,必须手动指定cxt.body= 否则页面会not found.
  2. ctx.render('page', settings),页面模型数据必须通过settings传入,不能使用ctx.state

2. koa-swig

在app中设置render

1
2
3
4
5
6
7
8
9
const path = require('path');
const render = require('koa-swig');
const co = require('co');
app.context.render = co.wrap(render({
root: path.join(__dirname, 'views'),
autoescape: true,
cache: 'memory', // disable, set to false
ext: 'html'
}));

在路由中使用

1
2
3
4
5
6
7
8
9
var router = require('koa-router')();
router.get('/', async function (ctx, next) {
ctx.state = {
title: 'Hello'
};
await ctx.render('index');
})
module.exports = router;

注意:

  1. 以为node目前不支持async,app中必须使用co.wrap包装一下render
  2. 可以使用ctx.state传递数据,可以不手动指定ctx.body