ejs模板引擎

最新推荐文章于 2024-05-17 13:52:13 发布

沁沁酱

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量1.7k

点赞数 3

文章标签： javascript elementui vue.js

本文链接：https://blog.csdn.net/weixin_58678797/article/details/121912642

版权

1 ejs简介

使用ejs模板引擎可以让界面与数据分离(比如：有1000条新闻在展示时界面（风格）都是一致的，这时我们可以只发一个界面文件(模板文件)，而要展示的新闻内容则为动态的)，可以提高开发效率及降低后期维护成本。

2 使用步骤

1.下载ejs

在项目根目录安装ejs：

npm i ejs

2.在项目中设置ejs模板引擎

//设置ejs:
app.set('view engine', 'ejs'); //设置模板引擎为ejs
app.set('views', [`${path.join(__dirname,'moban')}`, `${path.join(__dirname,'views')}`]); //设置模板文件的存放位置
app.engine('html', require('ejs').__express); //将html文件作为ejs模板文件来解析

3.在项目根目录下创建views文件夹

4.在views文件夹下创建模板文件

注意：ejs模板文件默认是以 .ejs为后缀名

3 ejs语法

1. 渲染模板文件语法

res.render('模板名称' [, data ])

参数说明：

参数1为模板名称不需要添加后缀，会自动寻找对应名称的.ejs文件

参数2为可选参数，向模板中传递的数据，必须是一个对象

2. 模板语法

2.1 数据渲染

<%=变量名 %>

2.2 分支

<% if( 条件 ){%>
  

<% }else{ %>
     

<% } %>

2.3 循环

<% for(let i=0;i<数组.length;i++){ %>

    循环项           

<% }%>

2.4 包含文件

说明：包含文件也是.ejs文件，无需携带后缀名

<%- include('公共文件路径')  %>

使用ejs模板引擎的代码实例：

const express = require('express');
const path = require('path');

const app = express();

app.listen(3000, () => {
    console.log('3000端口');
});

//设置ejs:
app.set('view engine', 'ejs'); //设置模板引擎为ejs
app.set('views', [`${path.join(__dirname,'moban')}`, `${path.join(__dirname,'views')}`]); //设置模板文件的存放位置
app.engine('html', require('ejs').__express); //将html文件作为ejs模板文件来解析



//新闻详情页面：
app.get('/newsdetail', (req, res) => {
    let stuObj = [{ "names": "李四", "age": 20, "email": "lisi@qq.com" }, { "names": "张三", "age": 21, "email": "zs@qq.com" }, { "names": "小明", "age": 17, "email": "ming@163.com" }];
    let title = '中公教育软件培训举行2021新生军训结训典礼';
    let content = '中公教育携手腾讯教育，深化产学合作加快“双元”育人中公教育携手腾讯教育，深化产学合作加快“双元”育人中公教育携手腾讯教育，深化产学合作加快“双元”育人中公教育携手腾讯教育，深化产学合作加快“双元”育人中公教育携手腾讯教育，深化产学合作加快“双元”育人中公教育携手腾讯教育，深化产学合作加快“双元”育人中公教育携手腾讯教育，深化产学合作加快“双元”育人';

    res.render('newsdetail.html', { title, content, stuObj }); //渲染模板文件
    // res.render('demo'); //渲染模板文件
});

newsdetail.html模板文件代码如下：

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

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

<body>
    <%- include('header.html') %>
    <p>
        <h2>标题：
            <%=title  %>
        </h2>
    </p>
    <div>内容：
        <%=content %>
    </div>
    <div>
        <table width="70%" border="1" cellspacing="0">
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>邮箱</td>
            </tr>
            <% for(let i=0;i<stuObj.length;i++){ %>
                <tr>
                    <td>
                        <%=i+1 %>
                    </td>
                    <td>
                        <%=stuObj[i].names %>
                    </td>
                    <td>
                        <%=stuObj[i].age %>
                            <% if(stuObj[i].age >= 18){ %>
                                成年人
                                <% }else{ %>
                                    未成年
                                    <% } %>
                    </td>
                    <td>
                        <%=stuObj[i].email %>
                    </td>
                </tr>
                <% } %>
        </table>
    </div>
</body>

</html>

沁沁酱

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
ejs模板引擎

1 ejs简介使用ejs模板引擎可以让界面与数据分离(比如：有1000条新闻在展示时界面（风格）都是一致的，这时我们可以只发一个界面文件(模板文件)，而要展示的新闻内容则为动态的)，可以提高开发效率及降低后期维护成本。2 使用步骤1.下载ejs在项目根目录安装ejs：npm i ejs2.在项目中设置ejs模板引擎//设置ejs:app.set('view engine', 'ejs'); //设置模板引擎为ejsapp.set('views', [`${path.
复制链接

扫一扫