几个koa模块的使用(koa-swig、co-view)
发布于 2 个月前 作者 hellozhangran 633 次浏览 来自 分享

第一次在cnode发文,大家周末好^^ 先贴出来 例子代码在这里

跑之前别忘了npm install


1. 起因

  1. 最近接手的koa项目,用了swig模板引擎,用了基于koa的koa-swig包,发现项目并非直接使用koa-swig,而是又用co-view包装了一层,这个co-view是怎样用的。

  2. 另,发现项目在package.json中配置了swig、koa-swig两个包,但整个项目没有发现require("swig"),怀疑swig模块是多余的。

2. koa-swig的使用

代码中demo1 是使用koa-swig模块的例子。koa-swig是一个独立的模块,在koa项目中,只需要引用这一个模块就即可使你的koa站点能够用swig解析模板。

//app.js

var koa = require('koa');
var render = require('koa-swig');
var path = require('path');
var app = koa();
var router = require('./router')();
//koa-swig 2.0以上的版本用下面的方式来配置koa-swig,这里我也很奇怪,为何不用app.use()的方式。
//总之,配置下面代码之后,在后续使用的generator函数中,调用this.render就会用koa-swig
app.context.render = render({
    root: path.join(__dirname, './views'),//设置swig解析页面文件的根路径
    autoescape: true,//如果true,就会转义html标签,eg:'<' -> '&lt;'
    cache: 'memory',//开启缓存,多次渲染模板的时候,重复操作调用缓存。
    ext: 'html',//识别html文件
});
app.use(router.routes());
app.listen(3001);

下面是router.js,对swig的使用在里面。

var router = require('koa-router')();
var Router = function(){
    //访问根路径时,会来到这个generator里面
    router.get('/',function* (next){
        yield this.render('index',{//此时的render用swig来实现
            name:'Hello koa-swig'
        });
    })
    return router;
}
module.exports = Router;

使用koa-swig解析的方式非常简单,不过关于swig详细语法需另外学习,基本语法很简单的,不赘述。

3. co-view介绍以及使用

首先,co-view是一个组织模板引擎的工具。比如,你的页面中,有的需要swig去解析,有的需要jade去解析,有的需要ejs去解析。如何去配置不同的页面文件,用不同引擎去解析呢,这就是co-view的作用。源码中demo2是例子。

安装co-view的同时,根据你的需要安装swig ejs jadeco-view内部会自动去调用他们(后面会讲)。这时候就不需要koa-swig koa-jade这些了。

上代码,app.js如下

//比较简单的,主要引入了路由,启动服务
var koa = require('koa');
var path = require('path');
var app = koa();
var router = require('./router')();

app.use(router.routes());
app.listen(3001);
console.log('start server on port : 3001 ....')

主要代码依旧在router.js 如下

var router = require('koa-router')();
var view = require('co-view');

const render = view('./views',{
    default:'swig',//如果不写,默认为jade
    map:{
        html:'swig',//指定html文件用swig解析
        ejs:'ejs',//指定ejs文件用ejs解析
        jade:'jade',//...
    }
});

var Router = function(){
    router.get('/',function* (next){
        this.body = yield render('index.html',{name:'Swig'});
    })

    router.get('/jade',function* (){
        this.body = yield render('first.jade',{name:'Jade',title:'jade demo'});
    })

    router.get('/ejs',function* (){
        this.body = yield render('second.ejs',{name:'Ejs'});
    })

    return router;
}

module.exports = Router;

当然,还有就是不同的文件代码了,包括 index.htmlfirst.jadesecond.ejs,这里就不贴出来了。

代码很简单了,不解释了。去源码中看下,不行跑一边肯定没问题了。

最后讲一下开始的疑惑,为何用了swig,也安装了swig包,可代码中一直找不到require(‘swig’)这样的代码呢

原因就在co-view中,去看下co-view的源码,其在执行render方法时,调用的另一个包co-render,再去看co-render的源码,它render的时候会带着指定的参数,调用consolidate模块,这个是很多模板引擎的‘大集合’,里面写好了对各种模板的require操作,通过你的参数,指定需要require的具体模板引擎。其中就有自己苦苦寻找的require(“swig”)。

over

回到顶部