ejs00

最新推荐文章于 2024-02-28 12:09:40 发布

小庄hua

最新推荐文章于 2024-02-28 12:09:40 发布

阅读量139

点赞数

分类专栏： ejs 文章标签： nodejs

本文链接：https://blog.csdn.net/qq_41370549/article/details/108015074

版权

ejs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ejs

资源文档： https://ejs.bootcss.com/

安装

利用 NPM 安装 EJS 很简单。

$ npm i ejs -S

调用

调用模板引擎ejs

app.set("view engine","ejs");

还有pug模板引擎

使用

render用于返回一个模板引擎文件

参数一：参数可以是一个绝对路径，或者是“相对路径名”–render会自动去当前目录找views文件夹

参数二：代表渲染模板的时候带过去的数据

必须是一个基础的对象，不可以是数组或者字符串等

在调用的模板引擎中会自动产生全局变量–传过去的对象的属性名

注意：views文件名不可以修改，强行修改也行，但是render返回时必须写绝对路径来找到你自己创建的文件夹

ejs最基础的东西就是写html

ejs的后缀名为ejs 比如test.ejs 文件名为test的ejs文件

ejs每一行必须有开始和结束

标签含义

<% ‘脚本’ 标签，用于流程控制，无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板（输出是转义 HTML 标签）
<%- 输出非转义的数据到模板
<%# 注释标签，不执行、不输出内容
<%% 输出字符串 ‘<%’
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除

前后端基础的数据交互

express和ejs结合使用比较方便

案例：想把后端不确定数量的数据发送到前端并在页面展示，有两种方法：

第一种，用post发送到前端，然后前端用ajax请求

01.js

const express = require("express");

let app = express();
app.listen(4567);

app.get("/",(req,res)=>{
    res.sendFile(require("path").join(__dirname,"./test.html"));
});
app.post("/",(req,res)=>{
    /*假设这里是从数据库拿到的数据*/
    let data = [
        {name: "阿飞",age: "18",sex: "男"},
        {name: "银时",age: "34",sex: "男"},
        {name: "言心",age: "20",sex: "女"},
        {name: "万章",age: "32",sex: "男"},
        {name: "心艾",age: "15",sex: "女"}
    ];
    res.send(data);
});

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    
</table>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $.ajax({
        type : "POST",
        url : "/",
        success(msg){
            let $table = $("table");
            let html = "";
            msg.forEach(item=>{
                html += `<tr>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.sex}</td>
                    </tr>`;
            });
            $table.append(html);
        }
    });
</script>
</body>
</html>

第二种，用模板引擎ejs

注意:单独使用ejs的时候需要使用ejs模块，但是如果配合着express一起来使用，就不用引入ejs

前端也可以调用ejs，不过前端的模板引擎有vue等等，一般不使用ejs

index.js

const express = require("express");
let app = express();
app.listen(7894);

/*调用模板引擎ejs*/
app.set("view engine","ejs");


app.get("/",(req,res)=>{
    /*假设这是从数据库里拿到的数据*/
    let data = [
        {name: "阿飞",age: "18",sex: "男"},
        {name: "银时",age: "34",sex: "男"},
        {name: "言心",age: "20",sex: "女"},
        {name: "万章",age: "32",sex: "男"},
        {name: "心艾",age: "15",sex: "女"}
    ];


    res.render("test" , {x:data});
});

test.ejs

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>

    <% x.forEach(item=>{ %>
        <tr>
            <td><%=item.name%></td>
            <td><%=item.age%></td>
            <td><%=item.sex%></td>
        </tr>
    <% }) %>

</table>
</body>
</html>

总结：

这两种方法数据出现的时机不同：

1.Ajax，等待他的html页面加载完成，然后调用他的script标签之后，把数据渲染在页面中，他才出现在页面中

2.ejs是在后端先通过ejs的模板引擎把完整的HTML页面完成之后然后一次性发给前端，前端只接收到一个请求，不需要通过ajax,好处在于搜索引擎优化，如果通过ajax他的数据没有出来，搜索引擎是无法获取到数据，他只会爬取你的初始页面，一个叫前端渲染，一个叫后端渲染。

小庄hua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ejs00

ejs资源文档： https://ejs.bootcss.com/安装利用 NPM 安装 EJS 很简单。$ npm i ejs -S调用调用模板引擎ejsapp.set("view engine","ejs");还有pug模板引擎使用render用于返回一个模板引擎文件参数一：参数可以是一个绝对路径，或者是“相对路径名”–render会自动去当前目录找views文件夹参数二：代表渲染模板的时候带过去的数据必须是一个基础的对象，不可以是数组或者字符串等在调用的模板引擎中会自动
复制链接

扫一扫