一步步学习使用node和express开发web应用（三）——使用EJS模板

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存放着对jquery和bootstrap  js文件的引用：

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

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

最终得到的访问结果为：

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

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

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

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

得到的访问结果如下：