ejs模板引擎

时间 2019-11-10

标签 ejs 模板引擎繁體版

原文原文链接

第一部分：ejs模板引擎

ejs-cli

ejs预先定义好
            数据---将数据注入到模板中->|编译
                                          
                           带有数据的html页面

cnpm install ejs-cli -g 全局安装
ejs-cli-h 帮助文档
标准的json字符串外面必须是单引号javascript
编译ejs模板文件命令css

一、什么是模板引擎，为何要用模板引擎
循环遍历数据显示
实现数据与试图分离（即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}]html

二、准备

全局安装ejs-cli cnpm install ejs-cli -g
全局安装ejs cnpm install ejs -g
查看帮助命令 ejs-cli -h

三、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"}'java

$ ejs-cli -f ./injector02.ejs -o ../dist -O '{"name":"Alice","age":15}'

(3)、模板中输出变量

声明变量<% title="EJS Template engine" %>
输出变量
<%= username %> 特殊字符将进行转义
web
<%- myHtml %> 变量直接输出，不作转义处理
数据库

4.变量定义标签属性

<h1 style="<%= style %>"></h1>express

5.循环

<ul>
      <% for(var i in users){ %>
      <li><%= users[i].username %>--<%= users[i].age %></li>
  <% } %>
  </ul>

.ejsnpm

<!-- 定义一组数组 -->
    <% users=["Jack","Rose","Alice","Ave"] %>
    <ul>
        <% for(var item in users){ %>
        <li>
        <%= users[item] %>
        </li>
        <% } %>
    </ul>

服务台json

$ 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中使用方法

一、为express服务器，设置模板引擎类型

app.set("view engine","jade/ejs/handlebars/任选其一")

二、配置ejs模板文件存放路径

app.set("View",path)

三、将ejs模板渲染成html页面后返回给浏览器

res.render(path,data)
path:模板文件路径字符串
渲染模板时须要使用的数据，对象
res.render("404")
res.render("login",{title:"用户登陆“})

express -generator ———用来快速生成一个基于express服务器的项目

使用方法

一、全局安装

cnpm install express -generator -g

二、使用
express -e projectName
-e 模板名称（使用的模板类型） projectName 项目

三、进入到该项目
cd projectName

四、安装项目依赖包
cnpm install
-e 表明ejs模板 -pug 表明pug模板

express中使用express -session中间件的步骤

一、安装express -session模块

二、引入var session =require("express -session")

三、调用中间件

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都有{isLogin:true,username:""}

var app=express()
  app.use(function(req,res,next){
      res.locals={isLogin:true,username:""}
  })