学生档案管理案例
1.案例要求
目标：模板引擎应用，强化node.js项目制作流程。
知识点：http请求响应、数据库、模板引擎、静态资源访问。
2.制作流程
1.建立项目文件夹并生成项目描述文件
2.创建网站服务器实现客户端和服务器端通信
3.连接数据库并根据需求设计学员信息表
4.创建路由并实现页面模板呈递
5.实现静态资源访问
6.实现学生信息添加功能
7.实现学生信息展示功能
3.第三方模块router
功能：实现路由
使用步骤：
1.获取路由对象
2.调用路由对象提供的方法创建路由
3.启用路由，使路由生效
const getRouter = require('router')
const router = getRouter();
router.get('/add', (req, res) => {
res.end('Hello World!')
})
app.on('request', (req, res) => {
router(req, res,() => { })
})
4.第三方模块 serve-static
功能：实现静态资源访问服务
步骤：
1.引入serve-static模块获取创建静态资源服务功能的方法
2.调用方法创建静态资源服务并指定静态资源服务目录
3.启用静态资源服务功能
const serveStatic = require('serve-static')
const serve = serveStatic('public')
app.on('request', () => {
serve(req, res,() => { })
})
5.添加学生信息
1.在模板的表单中指定请求地址与请求方式
2.为每一个表单项添加name属性
3.添加实现学生信息功能路由
4.接收客户端传递过来的学生信息
5.将学生信息添加到数据库中
6.将页面重定向到学生信息列表页面
6.学生信息列表页
1.从数据库中将所有的学生信息查询出来
2.通过模板引擎将学生信息和HTML模板进行拼接
3.将拼接好的HTML模板响应给客户端
代码：
1.创建服务器及引入模块
// 引入http系统模块
const http = require('http');
// 导入数据库
require('./model/connect');
// 引入模板引擎
const template = require('art-template');
// 引入path模块
const path = require('path');
// 引入静态资源访问模块 返回值为方法
const serveStatic = require('serve-static');
// 引入处理日期的第三方模块
const dateformat = require('dateformat');
// 引入路由
const router = require('./route/index');
// 实现静态资源访问服务 参数为路径 返回值为方法
const serve = serveStatic(path.join(__dirname, 'public'));
// 配置模板的跟目录
template.defaults.root = path.join(__dirname, 'views');
//导入模板变量，处理日期格式
template.defaults.imports.dateformat = dateformat;
// 配置模板默认后缀
template.defaults.extname = '.art';
// 创建网站服务器
const app = http.createServer();
// 请求响应事件
app.on('request', (req, res) => {
// res.end('ok');
// router和serve 里面的第三个参数，回调函数必写
router(req, res, () => { });
serve(req, res, () => { });
});
// 监听端口
app.listen(80);
console.log('服务器启动成功');2.连接数据库
// 引入数据库模块
const mongoose = require('mongoose');
// 连接数据库
mongoose.connect('mongodb://localhost/playground',
{ useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log('数据库连接成功'))
.catch((error) => console.log(error, '数据库连接失败'));3.创建数据库集合
const mongoose = require('mongoose');
// 创建学生集合规则
const studentsSchema = new mongoose.Schema({
name: {
type: String,
// required: true, 即name必写
required: true,
minlength: 2,
maxlength: 10
},
age: {
type: Number,
min: 16,
max: 25
},
sex: String,
email: String,
hobbies: [String],
collage: String,
enterDate: {
type: Date,
default: Date.now
}
});
// 使用规则创建学生信息集合
const Student = mongoose.model('Student', studentsSchema);
// 导出学生集合
module.exports = Student;4.实现路由功能
// 引入路由模块 返回值为方法
const getRouter = require('router');
// 获取路由对象
const router = getRouter();
// 引入模板引擎
const template = require('art-template');
// 导入学生信息集合
const Student = require('../model/user');
// 导入系统模块querystring 用于将HTTP参数转换为对象格式
const querystring = require('querystring');
// 呈递学生档案信息页面
router.get('/add', (req, res) => {
// 参数1：模板路径，绝对路径 参数2：在模板中显示的数据 对象类型
let html = template('index', {});
res.end(html);
});
// 呈递学生档案信息列表页面
router.get('/list', async (req, res) => {
// 查询学生信息
const students = await Student.find();
console.log(students);
let html = template('list', {
students: students
});
res.end(html);
});
// 实现学生信息添加功能
router.post('/add', (req, res) => {
// 接收post请求参数
// 有参数传进来的时候就调用data事件
// 因为post参数是一步一步接收的，所以要声明一个变量接收
let formData = '';
req.on('data', param => {
formData += param;
});
// querystring.parse()方法，能把字符串转换成对象模式
req.on('end', async () => {
// 将用户提交的信息添加到数据库中
await Student.create(querystring.parse(formData));
// 重定向 实现页面跳转 重定向的状态码是301
res.writeHead(301, {
Location: '/list'
});
res.end();
});
});
module.exports = router;5.列表页信息处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学员信息</title>
<link rel="stylesheet" href="./css/list.css">
</head>
<body>
<table>
<caption>学员信息</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>邮箱地址</th>
<th>爱好</th>
<th>所属学院</th>
<th>入学时间</th>
</tr>
{{each students}}
<tr>
<th>{{$value.name}}</th>
<th>{{$value.age}}</th>
<th>{{$value.sex == '0' ? '男' : '女'}}</th>
<th>{{$value.email}}</th>
<th>
<!-- 爱好是数组形式，要循环 -->
{{each $value.hobbies}}
<span>{{$value}}</span>
{{/each}}
</th>
<th>{{$value.collage}}</th>
<!-- 第一个参数是处理的时间，第二个参数是时间格式 -->
<th>{{dateformat($value.enterDate,'yyyy-mm-dd')}}</th>
</tr>
{{/each}}
</table>
</body>
</html>举报
腾讯云开发者
