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.循环
<ul>
<% for(var i in users){ %>
<li><%= users[i].username %>--<%= users[i].age %></li>
<% } %>
</ul>
.ejs
<!-- 定义一组数组 -->
<% users=["Jack","Rose","Alice","Ave"] %>
<ul>
<% for(var item in users){ %>
<li>
<%= users[item] %>
</li>
<% } %>
</ul>
服务台
$ ejs-cli -f for.ejs -o ../dist
服务台运行之后自动出现html
<!-- 定义一组数组 -->
<ul>
<li>
Jack
</li>
<li>
Rose
</li>
<li>
Alice
</li>
<li>
Ave
</li>
</ul>
6.if语句
<% if(isLogin){ %>
<p><a href="#">Jerry</a> | <a href="#">退出</a></p>
<% }else{ %>
<p><a href="#">登录</a> | <a href="#">注册</a></p>
<% } %>
.ejs
<!-- 将所有条件判断代码放<% %>里面即可 -->
<% if(isLogin){ %>
<div class="user">
<a href="">Jack</a>
<a href="">退出</a>
</div>
<% }else{ %>
<div class="login">
<a href="">登录</a>
<a href="">注册</a>
</div>
<% } %>
7.模板嵌套
- <% include 嵌套模板路径 %>
- <% include ./header %>
例
新建文件
head.ejs
<meta charset="utf-8"/>
<title><%= title %></title>
<link rel="styleSheet" type="text/css" href="/css/index.css" />
header.ejs
<nav>
<li>item-one</li>
<li>item-two</li>
<li>itm-three</li>
</nav>
footer.ejs
<p>powered by Node.js Author:Jessco 215668636lai@gmail.com</p>
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<% include ./head %>
</head>
<body>
<main>
<% include ./header %>
<div>main content</div>
<% include ./footer %>
</main>
</body>
</html>
为什么使用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: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
- cnpm install cookie -parser --save
为ejs设置公共变量
-
给信息做预处理返回
-
让res.render都有
var app=express() app.use(function(req,res,next){ res.locals={isLogin:true,username:""} })
