1、EJS模板的安装和引用

在iTerm2中执行 npm  install ejs  --save

 

hello.js中引用   app.set('view engine','ejs');

 

 

 

MyApp根目录下新建一个文件夹,取名为views,用来存放ejs模板文件。

并在views中新建一个文件default.ejs,并编写如下的代码:

hello.js 文件中,设置视图模板的目录,并修改访问根目录的路由,使用render方法来显示default.ejs文件所描述的web页面

 

得到的结果如下图:

 

 

2、向ejs模板传入数据

修改hello.js中的render方法,添加将要传入的数据:

 

default.ejs模板中绑定并接受数据:

 

得到的访问结果为:

3、向模板传入数组数据,并通过javascript显示数组内容

向处理根路径的路由添加传入数组:

 

在default.ejs中使用javascript代码,将传入的数组数据遍历打印到ul元素中。注意,所有的javascript代码都要用<%  %>括起来:

 

访问后,得到的显示结果如下:

4、引入bootstrap,及使用partials视图

在views目录下新建partials/page目录,用来存放default的子视图模板文件,并在其中创建后续将会用到的4个partials视图文件:head.ejs   header.ejs   footer.ejs   jsdefault.ejs

Head.ejs存放了网页头相关的内容,其中包含对CDN上bootstrap的css的引用:

header.ejs将存放页面主体的头部:

footer.ejs将存放页面主体的页脚:

 

 

Jsdefault.ejs存放着对jquerybootstrap  js文件的引用:

 

在default.ejs的相应位置,通过include语句引用这四个partials视图:

 

修改hello.js,使其相应根路由和/about路由,并传参数到视图:

 

最终得到的访问结果为:

 

5、将变量传给所有视图的方法:使用app.locals.变量名=“

 

上图中的pagetitle可以被任意视图引用,并展现出数据

 

6、处理根路径路由才有的变量,在公共模板中的显示问题

由于users数组只有在访问根路由的时候才能初始化和获得值,因此在其他路由请求default.ejs模板的时候不能显示users数组的内容,因此需要在default.ejs中对能否取得users数组进行判断,然后再显示其内容

 

得到的访问结果如下:

 


posted on 2015-11-18 15:01  zoen  阅读(431)  评论(0编辑  收藏  举报