什么是ejs模板引擎

“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。 ejs将页面在后端渲染完成后再返回给前端。

如何使用ejs

首先需要安装ejs

npm i ejs

然后在项目内引入

const ejs = require("ejs");
const app = require('express');
//设置视图引擎
app.set('view engine','ejs');

app.set(‘view engine’,‘ejs’);这行代码必须要写。

文档结构

使用ejs后会自动寻找views文件夹下的ejs文件

使用ejs则views文件夹必须存在，

示例

我们通过一个例子来对ejs模板引擎有一个更深刻的理解

因数计算程序

我们的目标是写出一个因数计算程序，可以计算一个数的因数，并将其输出在页面中。

创建文件

文件目录如图所示

静态页面创建

<!--HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <h2>这个程序可以查询数字的所有因数</h2>
    <input id="text" type="text">
    <button id="onclick">点击查询</button>

    <script>
        let btn = document.getElementById('onclick');
        let text = document.getElementById('text');
        btn.onclick = function () {
            window.location.href = `/${text.value}`;
        }
    </script>
</body>
</html>

/*css*/
body {
    background-color: skyblue;
}

html页面中需要注意的一个点是页面数值传递那里。我们要将输入的值作为地址来判断，所以需要进行一波转义。利用波浪号的点包含${text.value}即可将数据传入，而不会被解析为一个字符串。

服务搭建

在app.js中首先引入项目需要的包和模块，并进行初始搭建。

const express = require('express');
const ejs = require('ejs');
const app = express();
//设置模板引擎
app.set('view engine','ejs');

//利用express将整个目录自动配置路由。
app.use(express.static('public));
app.listen(3000);

功能的原理是，将输入的值作为地址进行页面跳转，后台获取到地址后将地址作为数据进行求因数计算。所以首先我们要获取到地址。

app.get('/:number',function (req,res) {
   let {number} = req.params;
});

动态获取到地址栏的数据后利用解构赋值得到静态页面中提交的数据。至此我们就可以开始计算。因数计算程序很简单，直接来看代码

let arr = [];
   for (let i =0;i<number;i++){
       if (number % i === 0){
           arr.push(i)
       }
   }

创建一个数组并将符合条件的数压入数组中。得到数据后，我们要做的就是将数据输入到页面中。ejs的功能可以让我们将不同的数据输入到同一个页面中。我们可以使用

 res.render('demo',{
       arr:arr
   })

来完成对demo.ejs文件的数据注入。

ejs文件

写入ejs文件内容

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul>
        <% for (let i =0;i<arr.length;i++){ %>
        <li>
            <%= arr[i] %>
        </li>
        <%}%>
    </ul>
</body>
</html>

ejs的强大之处就在于可以直接在html里写入js代码，只需要将所有js代码逐行包含在<%%>内即可（包括各种符号等。比如 } ）。对于需要将页面输入数据的代码部分，需要用<%= %>包裹

到此为止一个初版功能和展示就已经实现了。查询不同的数据都会跳转到这个页面中，并将数据以列表形式展示出来。

请求方式

除了form表单可以发送post请求以外，通过js页面跳转，通过a标签，一个图片，的请求都是get请求。

来源：CSDN

作者：0 error（s）0 warning（s）

链接：https://blog.csdn.net/weixin_44845533/article/details/104587620

标签

ejs

html代码