ejs模板引擎
第一部分：ejs模板引擎
ejs-cli
ejs预先定义好
数据---将数据注入到模板中->|编译
带有数据的html页面
-
cnpm install ejs-cli -g 全局安装
-
ejs-cli-h 帮助文档
-
标准的json字符串外面必须是单引号
-
编译ejs模板文件命令
1、什么是模板引擎，为什么要用模板引擎
- 循环遍历数据显示
- 实现数据与试图分离（即html结构与数据分离）
- 例如
- 用jQuery或原生js将以下用户信息显到网页表格中
userList = [{"username":"Alice",classNo:"1001","age":20},
{"username":"Tom",classNo:"1002","age":22},
{"username":"Jhon",classNo:"1001","age":19},
{"username":"Mary",classNo:"1003","age":21},
{"username":"Jerry",classNo:"1002","age":18},
{"username":"Jenny",classNo:"1004","age":22}]
2、准备
- 全局安装ejs-cli cnpm install ejs-cli -g
- 全局安装ejs cnpm install ejs -g
- 查看帮助命令 ejs-cli -h
3、ejs模板语法
EJS是一个javascript模板库，用来从json数据中生成HTML字符串
- 功能：缓存功能，能够缓存好的HTML模板；
- <% code %>用来执行javascript代码
(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)、模板中输出变量
-
声明变量<% title="EJS Template engine" %>
-
输出变量
-
<%= username %> 特殊字符将进行转义
![]()
-
<%- myHtml %> 变量直接输出，不做转义处理
![]()
4.变量定义标签属性
<h1 style="<%= style %>"></h1>
5.循环
- <%= users[i].username %>--<%= users[i].age %>
<% for(var i in users){ %>
<% } %>
.ejs
<% users=["Jack","Rose","Alice","Ave"] %>
<%= users[item] %>
<% for(var item in users){ %>
<% } %>
服务台
$ ejs-cli -f for.ejs -o ../dist
服务台运行之后自动出现html
Jack
Rose
Alice
Ave
6.if语句
<% if(isLogin){ %>
<% }else{ %>
<% } %>
.ejs
<% if(isLogin){ %>
<% }else{ %>
<% } %>
7.模板嵌套
- <% include 嵌套模板路径 %>
- <% include ./header %>
例
新建文件
head.ejs
header.ejs
footer.ejs
powered by Node.js Author:Jessco 215668636lai@gmail.com
index.ejs
<% include ./head %>
<% include ./header %>
<% include ./footer %>
为什么使用ejs
- 在web项目中渲染页面，我们很多时候，会用json或者拼接字符串的方式，不够美观，破坏原有html结构，大量的html拼接会使代码难以阅读。
- ejs是一个简单高效的模板语言，通过数据和模板，可以生成HTML标记文本。
第二部分：ejs在express中使用方法
1、为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 -generator ———用来快速生成一个基于express服务器的项目
使用方法
1、全局安装
- cnpm install express -generator -g
2、使用
- express -e projectName
- -e 模板名称（使用的模板类型） projectName 项目
3、进入到该项目
- cd projectName
4、安装项目依赖包
- cnpm install
- -e 代表ejs模板 -pug 代表pug模板
express中使用express -session中间件的步骤
1、安装express -session模块
2、引入var session =require("express -session")
3、调用中间件
app.use(session,({
secret:"aaa",
resave:false,
saveUninitialized:true,
cookie:{
secure:false,maxAge:10006060
}//cookie保存的时间值
}))
利用session记录用户访问网站次数
if(req.session.times){
req.session.times++;
}else{
req.session.times=1;
//判断出如果用户是第一次访问，则在req.session对象上添加times属性
}//假如用户第一次访问的时候req.session.times值为undefined
在后台解析cookie，需要下载cookie -parser
- cnpm install cookie -parser --save
为ejs设置公共变量
-
给信息做预处理返回
-
让res.render都有
var app=express()
app.use(function(req,res,next){
res.locals={isLogin:true,username:""}
})
浙公网安备 33010602011771号