@Wangww0925 2019-08-07T02:35:54.000000Z 字数 3440 阅读 303

ejs 后台模板引擎

模板引擎

ejs 后台模板引擎

ejs模板引擎为后台程序模板，相对应的前台程序模板有三大框架vue、reactNavite、angular

ejs模板引擎是npm的第三方模块

后台模板，著名的有两个【ejs 和 jade(书写困难，严格的缩进) 】

模板引擎的原理：使用正则表达式，将模板中的指定内容进行正则匹配替换为其他内容，实现数据绑定，最终形成一个完整的html字符串

后台模板引擎的缺点

前后台没有完全分离 (前台处理页面，后台处理数据)

实现数据动态的改变非常困难，例如下拉刷新加载更多

重要的事说三遍：以下结合NodeJs使用。以下结合NodeJs使用。以下结合NodeJs使用。

使用

1、安装 ejs
安装命令 npm install ejs

如果报错：

npm ERR! cb() never called!
npm ERR! This is an error with npm itself. Please report this error at:
npm ERR!     <https://npm.community>
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Dooban000\AppData\Roaming\npm-cache\_logs\2019-01-28T06_12_11_409Z-debug.log

则使用 cnpm install ejs

2、创建 node执行文件 test.js

var ejs = require("ejs");  // 引入模板ejs模块
var string = "我喜欢吃<%=name %>";   // 创建ejs模板
// 数据
var directory = {
    name: 'apple'
}
// 数据替换： ejs.render(模板，替换数据，配置选项)
var html = ejs.render(string,directory) 
console.log(html);

3、执行命令 node test.js

4、效果图
image_1d29ik7nk1t2440mc571n4s1hmn9.png-68.6kB

赋值：

<a href="<%=属性名%>">

逻辑判断：

<%if(i>2){%>
    <li><%=arr[i].name%>&emsp;<%=arr[i].des%></li>
<%}%>

循环：

<% for(var i = 0; i<arr.length; i++){ %>
    <li><%=arr[i].name %></li>
<%}%>

例子
node 执行的文件

var ejs = require("ejs");  // 引入模板ejs模块
// 创建ejs模板
var string = "<ul> \
                <% for(var i=0; i<arr.length;i++){ %> \
                    <li><%=arr[i] %></li> \
                <% } %> \
             </ul>";
// 数据
var directory = {
    arr:["html","css","javscript","jquery"]
};
// 数据替换： ejs.render(模板，替换数据，配置选项)
var html = ejs.render(string,directory);
console.log(html);

效果图
image_1d29ivr5i13bi1tp3c3114tb129nm.png-83.2kB

引入外部ejs模板

demo下载 -1.5kB

npm install
node demo.js

例子
外部ejs模板 template/index.ejs

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <h1>EJS 模板</h1>
        <hr>
        <h3>我叫<%= name %>, 今年<%= age %>岁了</h3>
        <ul>
            <% for(var i=0; i<arr.length;i++){ %>
                <% if(i>2){ %>
                    <li><%= arr[i].name %>  <%= arr[i].des %></li>  
                <% }else{ %>
                    <li><%= arr[i].name %></li>
                <% } %>
            <%}%>
        </ul>
    </body>
</html>

node执行文件

var fs = require("fs");
var ejs = require("ejs");
var http = require("http");
http.createServer((req,res)=>{
    fs.readFile("./template/index.ejs",(err,data)=>{
        var string = data.toString();
        var directory = {
            name:"www",
            age: 18,
            arr:[
                    {"name":"html",des:"nice"},
                    {"name":"css",des:"good"},
                    {"name":"javascript",des:"great"},
                    {"name":"jquery",des:"beautiful"},
                    {"name":"nodejs",des:"prefect"}
                ]
        };
        var html = ejs.render(string,directory);
        res.writeHead(200,{"Content-Type":"text/html;charset=utf-8"});
        res.end(html);
    })
}).listen(8081);

效果图：
image_1d29jjbbb9e21dlc1llo2tv109413.png-26.3kB

引入外部ejs模板、数据

demo下载 2.2kB

npm install
node demo.js

例子
外部ejs模板 book.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>BOOK书籍相关信息</h1>
    <table border="1px" cellspacing="2px">
        <tr>
            <th>title</th>
            <th>price</th>
            <th>author</th>
        </tr>
        <% for(var value of books){ %>
            <tr>
                <td><%= value.title %></td>
                <td><%= value.price %></td>
                <td><%= value.author %></td>
            </tr>
         <% } %>
    </table>
</body>
</html>

node执行文件

var http = require("http");
var fs = require("fs");
var ejs = require("ejs");
var url = require("url");
http.createServer((req,res)=>{
    var pathname = url.parse(req.url).pathname;
    console.log(pathname)
    if(pathname == "/favicon.ico"){
        return;
    }
    if(pathname == "/"){
        fs.readFile("./book.html",(err,data)=>{
            if(err){
                console.log(err)
            }
            if(!err){
                var string = data.toString(); // 创建ejs模板
                fs.readFile("./books.json",(err,data)=>{
                    var obj = JSON.parse(data);
                    if(obj.code == 0){
                        // 数据
                        var directory = {
                            books: obj.data
                        };
                        // 数据替换
                        var html = ejs.render(string, directory);
                        res.writeHead(200,{"Content-Type":"text/html;charset=utf-8"});
                        res.end(html)
                    }else{
                        res.writeHead(200,{"Content-Type":"text/html;charset=utf-8"});
                        res.end("<h1>请求错误</h1>")
                    }
                })
            }
        })
    }
    if(pathname != "/"){
        res.writeHead(404,{"Content-Type":"text/html;charset=utf-8"});
        res.end("<h1>404</h1>")
    }
}).listen(8081);

效果图：
image_1d29l36ubcf01o7k1d7tto6g6d1s.png-37.8kB

作者 wendy
2019 年 1月 21日