2021-10-28 EJS

最新推荐文章于 2022-03-13 21:59:52 发布

kesin_lee

最新推荐文章于 2022-03-13 21:59:52 发布

阅读量127

点赞数

分类专栏：学前端文章标签：前端

本文链接：https://blog.csdn.net/kesin_lee/article/details/121006270

版权

学前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

EJS是一个高效的 JavaScript 模板引擎。

模板引擎是为了使用户界面与业务数据(内容)分离而产生的。

简单来说，使用EJS模板引擎就能动态渲染数据

// 1. 安装ejs
yarn add ejs
// 2. 引入 ejs
const ejs=require('ejs');

// 3. 调用方法 (替换成对象中对应属性的值)
// let str='<h1><%= msg %></h1>'
let str= fs.readFileSync('./山村咏怀.html')
let data={
	msg:'一去二三里，烟村四五家',
	title:'山村咏怀'
}
let result=ejs.render(str,data)
console.log(result);

<!DOCTYPE HTML>
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= msg %></h1>
</body>

运行js文件得到的结果是：

<!DOCTYPE HTML>
<head>
    <meta charset="UTF-8">
    <title>山村咏怀</title>
</head>
<body>
    <h1>一去二三里，烟村四五家。</h1>
</body>

数据遍历

// 1. 安装ejs
yarn add ejs
// 2. 引入 ejs
const ejs=require('ejs');

const fs=require('fs);
// 3. 调用方法 (替换成对象中对应属性的值)
//html的内容写在 歌曲列表.html 文件中，而不是用<% %>插入
let str= fs.readFileSync('./歌曲列表.html').toString();
let data={
	songs:[
		'好春光',
        '笨小孩',
        '再借五百年',
        '暗里着迷',
        '雪千寻'
]}
let result=ejs.render(str,data)
console.log(result);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歌曲列表</title>
</head>
<body>
    <ul>
        <% for(let i=0;i<songs.length;i++){ %>
        <li><%= songs[i] %></li>
        <% }%>
    </ul>
</body>
</html>

数据判断

// 1. 安装ejs
yarn add ejs
// 2. 引入 ejs
const ejs=require('ejs');

const fs=require('fs);
// 3. 调用方法 (替换成对象中对应属性的值)
let str=`
<h1>是vip则没广告，不是vip则有广告</h1>
<% if(!vip) { %>
<p><%= ad %></p>
<% } %>
`
let data={
	vip:0;
	ad:'扭一扭，舔一舔，泡一泡。狗狗不能吃巧克力'
]}
let result=ejs.render(str,data)
console.log(result);

ejs的使用

下载安装ejs
yarn add ejs
配置模板引擎固定写法 ejs可根据实际引擎更换 app可根据命名更换
app.set(‘view engine’,‘ejs’)
配置模板的存放目录固定写法 app可根据命名更换
app.set('views,‘目录文件夹’)
在目录下创建模板文件 (文件的后缀是.ejs)
使用模板，通过response来渲染
response.render(‘模板名称’,数据对象)

例如

// 选手数据
const player = [
    {id: 1, name: '易烊千玺'},
    {id: 2, name: '胡歌'},
    {id: 3, name: '杨洋'},
    {id: 4, name: '曾舜晞'}
];

const express = require('express');
const {request, response} = require("express");

const app = express();
//1. 设置 express 使用的模板引擎 ejs
app.set('view engine','ejs');
//设置 ejs 使用的模板的存放位置   模板指的就是 HTML 代码存放的文件

app.set('views','./template') // 在当前文件夹的template文件夹的player.ejs文件内

app.get('/player', (request, response) => {
    response.render('player', {player: player})
})

app.listen(80, () => {
    console.log('服务已经启动 端口80正在监听... ... ');
});

kesin_lee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-10-28 EJS

EJS是一个高效的 JavaScript 模板引擎。模板引擎是为了使用户界面与业务数据(内容)分离而产生的。简单来说，使用EJS模板引擎就能动态渲染数据// 1. 安装ejsyarn add ejs// 2. 引入 ejsconst ejs=require('ejs');// 3. 调用方法 (替换成对象中对应属性的值)// let str='<h1><%= msg %></h1>'let str= fs.readFileSync('./山村咏怀.
复制链接

扫一扫