EJS的基础使用
使用之前先看看之前的用法
生成相应的包结构
npm i express
app.js
const express = require('express')
const app = express()
const port = 3001
app.get("/list",(req,res)=>{
//分页效果
let {page} = req.query;
let arr = ["华为Mate40Pro","华为Mate40RS","华为P40","华为P40 pro","华为 nova9","华为 畅享20e","华为 nova9 pro","华为 nova7",];
let str = "";
for (var i = (page-1)*4; i < page*4; i++) {
str += `${arr[i]} `
}
res.send(`
Document
${str}
`)
})
app.get('/', (req, res) => res.send('Hello World!'))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
上述代码虽然也可以实现分页的效果 但是总不能每次都吧html代码写在请求里 太过于繁琐
引入EJS
ejs的基础使用
1.下载express
npm i express
2.下载 ejs
npm i ejs / yarn add ejs
3.在views文件夹中新建一个ejs后缀的文件，在该文件里写正常的HTML代码。
4.在app.js中设置默认模板引擎 app.set(“view engine”,“ejs”);
5.渲染ejs文件给浏览器。 res.render(path，data) path:响应的文件的路径，在views文件下，可以忽略ejs后缀。 data：ejs文件中要使用到的数据。
ejs语法：
插值语法：
<%= 变量 %> 将变量的值显示在页面上。
**循环：** 换行时重新加上 <%%>
<% for(let i = 0;i
<% } %>
流程控制：
if
if else
if elseif else
简单搭建一个复用模块
建一个views文件
下面有
- footer.ejs
- header.ejs
- index.ejs
- login.ejs
文件
footer.ejs
这是尾部
header.ejs
这是头部
index.js
Document
<%- include("header")%>
<%= name %>
<% for (let i = (page-1)*4;i < page*4;i++) {%>
- <%= arr[i] %>
<%} %>
当前页码为：<%= page %>
<% if(page == 1){ %>
当前是首页
<% }else if(page == 2){ %>
当前是尾页
<% }else{ %>
当前页码有问题
<% } %>
<%- include("footer")%>
login.ejs
Document
<%- include("header") %>
欢迎来到登录页
<%- include("footer") %>
建一个入口函数app.js
const express = require('express')
const app = express()
const port = 3000
//设置默认使用的模板引擎
app.set("view engine","ejs");
app.get("/list",(req,res)=>{
//分页效果
let {page} = req.query;
let arr = ["华为Mate40Pro","华为Mate40RS","华为P40","华为P40 pro","华为 nova9","华为 畅享20e","华为 nova9 pro","华为 nova7",]
res.render("index",{name:"lisi",arr,page});
})
app.get("/login",(req,res)=>{
res.render("login");
})
app.get('/', (req, res) => res.send('Hello World!'))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
运行app.js
在浏览器中输入相应的路由