前端
list.ejs
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>学生列表</title>
<link href="/stylesheets/bootstrap.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- 美化 -->
<!-- 注意bootstrap.css的版本和导航要一致。 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">学生管理系统</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggle-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">学生列表 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">添加学生</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"></a>
<a class="dropdown-item" href="#"></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"></a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-labelledby="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
结果: <%= message %>
<h3>学生列表</h3>
<table class="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
<th>操作</th>
</tr>
<% students %>
<% students.forEach(function(stu,i){ %>
<tr>
<!-- stu {id:'',name:'小明'} obj -->
<td><%= stu.stuNo %></td>
<td><%= stu.name %></td>
<td><%= stu.age %></td>
<td><%= stu.gender %></td>
<!-- 虽然可以if判断把性别代码装换成字符串,但ejs的语法随着逻辑复杂会变得复杂容易写错,应该在后端
<% if(stu.gender==1){ %><td>男</td><% }else{ %><td>女</td><% } %>
-->
<td><%= stu.phone %></td>
<td>
<a href="/students/update/<%= stu._id %>">
<button class="btn btn-warning">更新</button></a>
<!-- <a href="/students/delete?id=<%= stu._id %>">删除</a> -->
<a href="/students/delete/<%= stu._id %>">
<button class="btn btn-danger">
<img src="/images/icon/delete3.png" alt="">
<span class="glyphicon glyphicon-trash"></span>
删除
</button>
</a>
</td>
</tr>
<% }) %>
</table>
</body>
</html>
后端
students.js
/**
* 学生管理模块
*/
var debug = require('debug')('10studentsmanage:routes');
var express = require('express');
var mongoUtil = require('../common/mongoUtil');
var crud = mongoUtil.crud;
var router = express.Router();
/**
* 查询学生列表
* 匹配http://students/
*/
router.get('/',function(req,res){
res.redirect('/students/list');
})
/**
* 查询学生列表(简易版)
*/
router.get('/list',function(req,res,next){
var context = { }
// 查询数据库
crud(function(db){
db.collection('students').find({}).toArray(function(err,docs){
if (err) {
context.message = '数据库报错,请联系管理员';
throw err;
} else {
debug('docs',docs); // [{id:5d,no:'001',name:'小明'},{},{}]
// 处理下数据,代码转字符串、时间格式化、拼url
docs.forEach(function(stu,i){
if (docs[i].gender == '1'){
docs[i].gender = '男';
}else if (docs[i].gender == '2'){
docs[i].gender = '女';
}else {
docs[i].gender == '未选择';
}
// docs[i].gender = docs[i].gender == '1'?'男':'女';
})
// 上下文对象:context,连接上文代码(后端代码)和下文代码(前端代码)的变量
// res.render('students/list.ejs',{message:'', students:docs});
// var context = {
// message:'查询成功',
// students:docs
// }
context.message = '查询成功';
context.students = docs;
debug('context',context);
res.render('students/list.ejs',context)
}
})
})
})
module.exports = router;