zoukankan      html  css  js  c++  java
  • 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都有{isLogin:true,username:""}

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

    session是在服务端保存的一个数据结构,用来跟踪用户的状态,这个数据可以保存在集群,数据库文件中

    cookie是客户端保存用户信息的一种机制,用来记录用户的一些信息,也是实现session的一种方式。单个cookie保存不能超过4k,很多浏览器都限制了一个站点最多保存20个cookie,session的运行依赖于session id,而session id是存在cookie中的。

  • 相关阅读:
    POJ 2502 Subway(最短路径)
    HDU 1430 魔板
    HDU 1043 POJ 1077 八数码问题
    POJ 2576 Tug of War 随机算法(非正规解法)
    什么是COM
    6.0的版本的 tc,不支持大漠对象做数组吗?
    Q键连发。按住Q键则连发。松开则停止1。
    Q键连发。按住Q键 则连发。松开则停止2。
    特殊符号。
    僵尸_另类的生命体。
  • 原文地址:https://www.cnblogs.com/DCL1314/p/7732696.html
Copyright © 2011-2022 走看看