第三方插件-EJS

最新推荐文章于 2024-07-22 20:58:11 发布

该睡觉觉了

最新推荐文章于 2024-07-22 20:58:11 发布

阅读量610

点赞数 1

文章标签： ejs 第三方插件

本文链接：https://blog.csdn.net/zhangyiyang111/article/details/115033433

版权

ejs

1.概念

EJS 是一套简单的模板语言，在NodeJS后端利用ejs模板引擎, 生成 HTML 页面

2.优点

纯 JavaScript

快速开发

执行迅速

语法简单: 可以直接在HTML中书写JS代码

同时支持前后端环境

相比pug, 更贴近于我们现使用的HTML标签语法

3.使用

安装ejs模块, npm install ejs

配置模板引擎类型： app.set(‘view engine’, ‘ejs’)

配置模板引擎的路径： app.set(“views”, “./template”);

如果说在模板引擎中输出标识符 <%=标识符%>

对象不能直接进行输出会出现【object object】

那么我们使用对象必须进行迭代也就是遍历我们在模板引擎的<%%> 里面完全可以使用JS代码

如果说不涉及输出只是读取JS代码不能家等号因为等号是输出的意思 <%%>

再如果说我们传递到后台中的数据是一个html标签那么需要使用<%-标识符%>

4.作用

模板引擎可以让(网站)程序实现界面与数据分离,业务代码与逻辑代码的分离,这就大大提升了开发效率

良好的设计也使得代码重用变得更加容易

我们司空见惯的模板安装卸载等概念,基本上都和模板引擎有着千丝万缕的联系

模板引擎不只是可以让你实现代码分离,也可以实现数据分离(动态数据与静态数据),还可以实现代码单元共享

甚至是多语言、动态页面与静态页面自动均衡(SDE)等等与用户界面可能没有关系的功能

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

let app = express();

// 配置模板引擎类型
app.set('view engine','ejs');
// 配置模板引擎的路径
app.set('views','./template/');

// 配置好模板引擎就可以使用了
app.get('/index',(request,response)=>{
    let num = 999999999999999;
    let str = '你好  Eric';
    let obj = {name:'Eric',age:18,sex:'男'};
    let arr = [1,3,5,7,9];
    let data = [
        {name:'貂蝉',age:17,sex:'女'},
        {name:'大乔',age:18,sex:'女'},
        {name:'西施',age:16,sex:'女'},
        {name:'王昭君',age:14,sex:'女'},
        {name:'杨玉环',age:13,sex:'女'},
        {name:'褒姒',age:16,sex:'女'},
    ];
    let html = "<h1>多多益善</h1>";
    response.render('index',{num,str,obj,arr,data,html});
});

app.listen(3000,'127.0.0.1',()=>{
    console.log('服务器正在运行......');
})

模板引擎文件

<!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>ejs模板引擎</title>
</head>
<body>
    <!-- <div><%=num%></div> -->
    <!-- <div><%=str%></div> -->
    <!-- <div><%=arr%></div> -->
    <!-- <div><%=obj%></div> -->
    <!-- <div><%=data%></div> -->
    <!-- <div><%=html%></div> -->
    <!-- <% for (let i in obj) { %>
        <p style="background:#CCC"><%=obj[i]%></p>
    <% } %> -->
    <table width="60%" align="center" border="1" cellspacing='0'>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <% data.forEach(element=>{ %>
            <tr align="center">
                <td><%=element.name%></td>
                <td><%=element.age%></td>
                <td><%=element.sex%></td>
            </tr>
        <% }) %>
    </table>
    <div><%-html%></div>
</body>
</html>

3.使用

使用bodyparser的时候我们接收post参数参数存储在request对象中的body属性中

和路由参数存储在params属性中的效果是一样的如果说body属性中有数据那么他就是一个对象

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path')
let app = express();

// 配置bodyparser  使用app中的use方法
// 配置表单数据  内置一个参数  参数是一个对象
// 如果说extended的值为false  那么可以接受 字符串和数组  如果说为true  那么可以接受任意数据类型
app.use(bodyParser.urlencoded({extended : true}));
// 配置JSON
app.use(bodyParser.json());

// 配置模板引擎类型
app.set('view engine','ejs');
// 配置模板引擎的路径
app.set('views',path.resolve(__dirname,'./template/'));

// 配置好模板引擎就可以使用了
app.post('/index',(request,response)=>{
    console.log(request.body);
});

app.listen(3000,'127.0.0.1',()=>{
    console.log('服务器正在运行......');
})