1.在src目录下新建一个文件夹view,新建一个ejs文件为index.ejs,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
//导入header母板部分
<%- include("view/common/header.ejs")%>
<h1>学生表</h1>
<table border="1">
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>班级</td>
<td>出生日期</td>
</tr>
</thead>
<tbody>
//渲染数据
<% stuData.forEach((item, index)=>{ %>
<tr>
<td><%= item.s_id %></td>
<td><%= item.s_name %></td>
<td><%= item.s_sex %></td>
<td><%= item.s_age %></td>
<td><%= item.s_class_id %></td>
<td>
<%= item.s_date==null?"未填写":new Date(item.s_date).toLocaleDateString() %>
</td>
</tr>
<% }) %>
</tbody>
</table>
//导入footer母板部分
<%- include("view/common/footer.ejs")%>
</body>
</html>
2.下载ejs模块:npm install ejs -s
3.配置ejs
//配置ejs视图引擎
app.set("views",__dirname+"/src/view")
// 识别以ejs结尾的引擎文件
app.set("view engine","ejs")
4.在路由中拦截index
router.get("/index",pageCtrl.index)//返回一个有数据的页面
5.在控制器中,获取数据
index(req,resp){
// 1、获取数据
stuDao.getStuDao(function (err,data) {
if(data){
console.log(data)
// 2、返回数据和页面
resp.render("index",{stuData:data});
}
})
}
6.DAO层实现数据库操作,返回学生信息
//查询所有学生信息
getStuDao(fn){
dbpool.connect("SELECT s_id,s_name,s_sex,s_age,s_class_id,s_date FROM t_student",(err,data)=> {//使用问号+数组的方式,能够防止sql注入
fn(err,data)
})
}
7.IP地址:端口号/index
直接访问index