ejs模板引擎

最新推荐文章于 2024-08-28 09:16:43 发布

ice_bear-

最新推荐文章于 2024-08-28 09:16:43 发布

阅读量785

点赞数

分类专栏： node

本文链接：https://blog.csdn.net/qq_42701999/article/details/103607033

版权

node 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

ejs官网
“E” 代表 “effective”，即【高效】。高效的 JavaScript 模板引擎。
EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。
用于快速结束没有任何数据的响应，使用res.end()。
响应中要发送JSON响应，使用res.json()。
响应中要发送数据,使用res.send() ,但要注意header ‘content-type’参数。
如果使用res.end()返回数据非常影响性能。
JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，而JSON.parse()可以将JSON字符串转为一个对象。在使用JSON.parse()需要注意一点，由于此方法是将JSON字符串转换成对象，所以你的字符串必须符合JSON格式，即键值都必须使用双引号包裹

安装

cnpm install ejs --save-dev

使用

renderFile 通过读取文件渲染模板。
读取文件，渲染文件里面的内容，输出解析后的html字符串
语法:ejs.renderFile(filename,data,options,function(err,str){})

参数	参数说明
str	这个是用来渲染的数据展示区域
data	这个是渲染的数据,可以是对象或者数组
opstions	这是个额外的参数配置,可以省略
filename	需要读取渲染的文件路径
err	读取渲染失败的提示

render模板内容渲染比较简单，没有回调函数，直接返回html字符串
输出的是解析后的html字符串
语法:ejs.render(str,data,options)

参数	参数说明
str	这个是用来渲染的数据展示区域
data	这个是渲染的数据,可以是对象或者数组
opstions	这是个额外的参数配置,可以省略

1. 请求

var ejs = require('ejs');

2. 渲染页面

1> app.js页面

const http = require('http');
const server = require('./model/creatServer');

http.createServer(server).listen(8080, "localhost", () => {
    console.log("————加载完成————127.0.0.1:8080");
});

2> creatServer创建服务器

let url = require('url');
let data = require('./data.json')
let ejs=require('ejs')//引入ejs

module.exports = (req, res) => {
    let path = url.parse(req.url).pathname;
    if (path != "/favicon.ico") {      
        res.writeHead(200, { 'Content-Type': "text/html;charset=utf-8" });
        if (path == '/') {
            ejs.render("",{})
            //把数据渲染到指定文件中
            ejs.renderFile("view/index.ejs", {student:data},(err, str) => {
                if (err) {
                    throw err;
                }
                res.end();
            })
        }
        else if (path == '/login') {
            res.end();
        }
        else {
            //"404.html"
            res.end();
        }
    }
}

3> 在要渲染数据的页面使用相关语法

常用标签：

<% ‘脚本’ 标签，用于流程控制，无输出。>
<%= 输出数据到模板（输出是转义 HTML 标签<div>我是小花</div>）
<%- 输出非转义的数据到模板(不会解析标签，只显示了数据 我是小花)
转义表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    ejs首页 test
    <ul>
        <% for(let i=0;i<student.length;i++){      %>
        <li> <%- student[i].name %>----<%=student[i].name %>---<%=student[i].age %></li>
        <% }%>
    </ul>
</body>
</html>

3. include

通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 ‘filename’ 参数。)

例如有menu.ejs

<ul>
    <li>首页</li>
    <li>个人博客</li>
    <li>管理博客</li>
    <li>留言板</li>
    <li>点赞</li>
    <li>评论</li>
</ul>

可以直接使用include将此模板嵌入到登录界面和首页上
在其中添加代码：

    <%- include("./Component/menu.ejs")%>

4. ejs渲染的数据如何获取到js使用

data中存储的数据为

[
    {
        "name": "Mary",
        "age": "18"
    },
    {
        "name": "Liming",
        "age": "23"
    },
    {
        "name": "<span>我是小花</span>",
        "age": "18"
    }
]

定义student变量接收，渲染到首页上

let url = require('url');
let data = require('./data.json')
let ejs=require('ejs')

module.exports = (req, res) => {
    let path = url.parse(req.url).pathname;
    if (path != "/favicon.ico") {
        // console.log(pathname);        
        res.writeHead(200, { 'Content-Type': "text/html;charset=utf-8" });
        if (path == '/') {
            ejs.renderFile("view/index.ejs", {student:data},(err, str) => {
                if (err) {
                    throw err;
                }                
                res.end(str);
            });
        }
        else {
            //"404.html"
            res.end();
        }

    }
}

在首页上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    ejs首页 test
    <%- include("./Component/menu.ejs",student) %>
</body>
<script>
    var data = '<%- student %>';
    console.log(data);//如果直接使用student 输出[object Object],[object Object],[object Object]
    var data1 = '<%=     JSON.stringify(student )%>';
    console.log(data1);//引号都被解析,并且JSON.parse()会报错   [{&#34;name&#34;:&#34;Mary&#34;,&#34;age&#34;:&#34;18&#34;},{&#34;name&#34;:&#34;Liming&#34;,&#34;age&#34;:&#34;23&#34;},{&#34;name&#34;:&#34;&lt;span&gt;我是小花&lt;/span&gt;&#34;,&#34;age&#34;:&#34;18&#34;}]
    var data3 = '<%- JSON.stringify(student )%>';
    console.log(JSON.parse(data3));
</script>
</html>