weroll

View Router

• 定义路由
• 视图模板引擎
• 传递数据到页面
• 自定义模板引擎过滤器

定义路由

如果要使用页面和页面路由，请使用WebApp来创建http服务，APIServer不提供页面渲染的功能。
页面路由代码需要定义在server/router目录或其子目录中，weroll启动时会自动解析并注册到Express中。一个典型的路由文件如下：

//./server/router/index.js

function renderIndexPage(req, res, output, user)
    //在页面中使用  可显示hello字符串
    output({ msg:"hello!" });
}

function renderProfilePage(req, res, output, user) {
    output({ nickname:user.nickname, head:user.head });
}

exports.getRouterMap = function() {
    return [
        /*
            url           浏览器url中域名之后的地址
            view          对应要渲染的html页面，如index就表示 %项目目录%/client/views/index.html这个页面
            handle        http GET方式对应的处理方法
            postHandle    http POST方式对应的处理方法
            needLogin     是否需要登录才能访问 true/false
            loginPage     如果没有访问权限，可以指定一个跳转页面，默认是login页面和view一样，
                          页面定义在 %项目目录%/client/views目录或子目录中
       */
        { url: "/", view: "index", handle: renderIndexPage, needLogin:false },
        { url: "/index", view: "index", handle: renderIndexPage, needLogin:false },
        { url: "/profile", view: "profile", handle: renderProfilePage, needLogin:true, loginPage:"signin" }
    ];
}

视图模板引擎

weroll默认使用 nunjucks 作为模板引擎，请参考nunjucks官方文档。你也可以使用其他的模板引擎如jade, ejs, swig等，示例代码如下：

//这是main.js中的代码片段

//var Setting = global.SETTING;

Setting.viewEngine = {
    //webApp: an instance of Express
    init: function(webApp, viewPath, useCache) {
        var engine = {};
        //务必要实现这个方法
        engine.$setFilter = function(key, func) {
            //do nothing
        };
        webApp.set('view engine', 'ejs');
        console.log("use view engine: ejs");
        return engine;
    }
};
//create and start a web application
var webApp = require("weroll/web/WebApp").start(Setting);

传递数据到页面

在路由的处理方法中，使用output即可输出数据。

//./server/router/index.js

function renderIndexPage(req, res, output, user)
    //在页面中使用  可显示hello字符串
    output({ msg:"hello!" });
}

<!-- ./client/views/index.html -->

<div>{{data.msg}}</div> <!-- display "hello!" -->

在页面中对象即是output传递出去的对象，weroll还封装了一些常用的数据传递到页面中。如URL的querystring数据：

<!-- ./client/views/index.html -->

<!-- URL: http://localhost:3000/some_page?page=2&size=10 -->

<div>page: {{query.page}}</div> <!-- display "2" -->
<div>size: {{query.size}}</div> <!-- display "10" -->

获取服务器当前的时间戳：

<!-- ./client/views/index.html -->

<div>Server Time: {{now}}</div>

获取./server/config/%ENV%/setting.js 里的一些配置数据，如：

<!-- ./client/views/index.html -->

<div>Site Domain: {{setting.SITE}}</div>   <!-- 网站域名 -->
<div>Resource CDN: {{setting.RES_CDN_DOMAIN}}</div>   <!-- 静态资源CDN域名 -->
<div>Site Domain: {{setting.API_GATEWAY}}</div>   <!-- API Gateway的URL地址 -->

你也可以自定义或者扩展setting里的数据：

//./main.js

require("weroll/web/WebApp").start(Setting, function(webApp) {
    webApp.COMMON_RESPONSE_DATA.defaultStyle = "blue";
});

<!-- ./client/views/index.html -->

<link type="text/css" rel="stylesheet"
      href="{{setting.RES_CDN_DOMAIN}}/css/{{setting.defaultStyle}}.css" ></link>

自定义模板引擎过滤器

通过 ViewEngineFilter.addFilter() 可以添加自定义过滤器，这里以nunjucks为例：

//./server/router/index.js

var ViewEngineFilter = require("weroll/utils/ViewEngineFilter");

//第一个参数是过滤器的名字，第二个参数是function
ViewEngineFilter.addFilter("json", json);

//在页面中正确渲染json数据
function json(val, express) {
    return this.env.getFilter("safe")(JSON.stringify(val));
}

//the render function of page

function renderSomePage(req, res, params) {
    output({ list:[ "Jay", "Tracy" ] });
}

<!-- ./client/views/some_page.html -->

<script>
var list = {{data.list|json}};
console.log(list[0]); //echo Jay
</script>