Ch 3 - 3 应用模板引擎ejs

模板引擎具体定义不再赘述

1. 添加依赖 npm install ejs --save


2. 调整 index.js 主程序


Ch 3 - 3 应用模板引擎ejs_第1张图片
index.js 主程序


3. 调整routes下users.js路由代码


Ch 3 - 3 应用模板引擎ejs_第2张图片
users.js路由代码

第一个箭头,view文件路径,末尾不带文件类型

第二个建构,传入view文件对象


4. 在project下添加views文件,新建users.ejs的view文件


Ch 3 - 3 应用模板引擎ejs_第3张图片
users.ejs

语法与freemarker类似,<%%>中可以调用javascript代码和引用传入view的对象值,也支持include指令引入头文件,或者尾文件,实现代码的服用

<% code %>:运行 JavaScript 代码,不输出

<%= code %>:显示转义后的 HTML内容

<%- code %>:显示原始 HTML 内容

注意:<%= code %> 和 <%- code %> 都可以是 JavaScript 表达式生成的字符串,当变量 code 为普通字符串时,两者没有区别。当 code 比如为

hello 这种字符串时,<%= code %> 会原样输出 hello,而 <%- code %> 则会显示 H1 大的 hello 字符串。


5. view中include运用

<%- include('header') %>

<%= name.toUpperCase() %>

hello, <%= name %>

<%- include('footer') %>

注意:要用 <%- include('header') %> 而不是 <%= include('header') %>

你可能感兴趣的:(Ch 3 - 3 应用模板引擎ejs)