<h1 id="第一部分ejs模板引擎">第一部分：ejs模板引擎
<h3 id="ejs-cli">ejs-cli
ejs预先定义好
数据---将数据注入到模板中->|编译
带有数据的html<a href="/tag/yemian/" target="_blank" class="keywords">页面</a></code></pre>
- cnpm install ejs-cli -g 全局安装
- ejs-cli-h 帮助文档
标准的json字符串外面必须是单引号
-
编译ejs模板文件命令
- 循环遍历数据显示
- 实现数据与试图分离（即html结构与数据分离）
- 例如
用jQuery或原生js将以下用户信息显到网页表格中
userList = [{"username":"Alice",classNo:"1001","age":20},
{"username":"Tom",classNo:"1002","age":22},
{"username":"Jhon","age":19},
{"username":"Mary",classNo:"1003","age":21},
{"username":"Jerry","age":18},
{"username":"Jenny",classNo:"1004","age":22}]
- 全局安装ejs-cli cnpm install ejs-cli -g
- 全局安装ejs cnpm install ejs -g
- 查看帮助命令 ejs-cli -h
生成html字符串">EJS是一个javascript模板库，用来从json数据中生成HTML字符串
文件后缀名-.ejs">(1)、 ejs模板文件后缀名 .ejs
文件命令">(2)、编译ejs模板文件命令
- 参数输入形式
- ejs-cli -f(--f) 模板文件路径 -o(--out) 输出文件路径 -O(--options) 输入模板参数
-
ejs-cli -f "index.ejs" -o "../dist" -O '{"title":"Hello wrold"}'
$ ejs-cli -f ./injector02.ejs -o ../dist -O '{"name":"Alice","age":15}'
输出变量">(3)、模板中输出变量
标签属性">4.变量定义标签属性
-
<% for(var i in users){ %>
- <%= users[i].username %>--<%= users[i].age %>
<% } %>
.ejs
<% users=["Jack","Rose","Alice","Ave"] %>
<% for(var item in users){ %>
-
<%= users[item] %>
<% } %>
服务台
$ ejs-cli -f for.ejs -o ../dist
服务台运行之后自动出现html
<li>
Jack
</li>
<li>
Rose
</li>
<li>
Alice
</li>
<li>
Ave
</li>
<% if(isLogin){ %>
<% }else{ %>
<% } %>
.ejs
<% if(isLogin){ %>
<% }else{ %>
<% } %>
- <% include 嵌套模板路径 %>
- <% include ./header %>
例
新建文件
head.ejs
<Meta charset="utf-8"/>
<%= title %>
header.ejs
footer.ejs
powered by Node.js Author:Jessco 215668636lai@gmail.com
index.ejs
<head>
<% include ./head %>
</head>
<body>
<main>
<% include ./header %>
<div>main content</div>
<% include ./footer %>
</main>
</body>
</html></code></pre>
<h3 id="为什么使用ejs">为什么使用ejs
- 在web项目中渲染页面，我们很多时候，会用json或者拼接字符串的方式，不够美观，破坏原有html结构，大量的html拼接会使代码难以阅读。
- ejs是一个简单高效的模板语言，通过数据和模板，可以生成HTML标记文本。
方法">第二部分：ejs在express中使用方法
- app.set("view engine","jade/ejs/handlebars/任选其一")
文件存放路径">2、配置ejs模板文件存放路径
- app.set("View",path)
页面后返回给浏览器">3、将ejs模板渲染成html页面后返回给浏览器
- res.render(path,data)
- path:模板文件路径 字符串
- 渲染模板时需要使用的数据，对象
- res.render("404")
- res.render("login",{title:"用户登录“})
快速生成一个基于express服务器的项目">express -generator ———用来快速生成一个基于express服务器的项目
方法">使用方法
-
cnpm install express -generator -g
- express -e projectName
-
-e 模板名称（使用的模板类型） projectName 项目
-
cd projectName
- cnpm install
-e 代表ejs模板 -pug 代表pug模板
调用中间件">3、调用中间件
app.use(session,({
secret:"aaa",resave:false,saveUninitialized:true,cookie:{
secure:false,maxAge:1000*60*60
}//cookie保存的时间值
}))
用户访问网站次数">利用session记录用户访问网站次数
if(req.session.times){
req.session.times++;
}else{
req.session.times=1;
//判断出如果用户是第一次访问，则在req.session对象上添加times属性
}//假如用户第一次访问的时候req.session.times值为undefined
后台解析cookie需要下载cookie--parser">在后台解析cookie，需要下载cookie -parser
- cnpm install cookie -parser --save
- 给信息做预处理返回
-
让res.render都有{isLogin:true,username:""}
var app=express()
app.use(function(req,res,next){
res.locals={isLogin:true,username:""}
})
用户的状态这个数据可以保存在集群数据库文件中">session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群，数据库文件中
用户信息的一种机制用来记录用户的一些信息也是实现session的一种方式单个cookie保存不能超过4k很多浏览器都限制了一个站点最多保存20个cookiesession的运行依赖于session-id而session-id是存在cookie中的">cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现session的一种方式。单个cookie保存不能超过4k，很多浏览器都限制了一个站点最多保存20个cookie，session的运行依赖于session id，而session id是存在cookie中的。
