使用模板引擎
- 1.下载安装
npm i ejs --save
- 2.配置模板引擎
app.set("view engine" , "ejs");
- 3.配置模板的存放目录
app.set("views","./views") //./views为文件夹所在位置
- 4.在views目录下创建模板文件
xxx.ejs
- 5 .使用模板,通过response来渲染模板
response.render(‘模板名称’, 数据对象)
player.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
table{border-collapse:collapse;width:50%;margin:0 auto}
td{padding:15px;border:1px solid #ddd}
</style>
<body>
<table id="table" border="1" width="100%">
<tr>
<td>ID</td>
<td>姓名</td>
</tr>
<% for(let i=0;i<player.length;i++){ %>
<tr>
<td><%= player[i].id %></td>
<td><%= player[i].name %></td>
</tr>
<% } %>
</table>
</div>
</body>
</html>
js文件(和views文件夹同级)
//选手数据
const player = [
{ id: 1, name: 'xiaoming' },
{ id: 2, name: 'xiaohua' },
{ id: 3, name: 'xiaotian' },
{ id: 4, name: 'xiaohei' },
];
const express=require('express');
const app = express();
// 1) 配置模板引擎
app.set("view engine" , "ejs");//固定写法
// 2) 配置模板的存放目录
app.set("views","./views")//前者固定,后者文件夹所在位置
app.get('/player', (request, response) => {
//3)使用 render 方法进行相应
response.render('player', {player});//前者指views文件夹下的player.ejs文件,后者数据对象
});
app.listen(80, () => {
console.log('ok');
});