基于node.js的学生档案管理，综合http请求响应、数据库、模板引擎、静态资源访问

目标：模板引擎应用，强化node.js项目制作流程。
知识点：http请求响应、mongodb数据库、template模板引擎、serve-static静态资源访问。
有疑问的可以针对需求访问下列学习链接
http请求响应学习链接：请求响应原理及HTTP协议学习笔记
mongodb数据库学习链接：MongoDB数据库概述、环境搭建及增删改查操作学习笔记
template模板引擎学习链接nodejs中模板引擎artTemplate学习笔记

界面：
添加学生信息界面：

学生信息列表界面：

流程及思路：

1. 建立项目文件夹并生成项目描述文件
2. 创建网站服务器实现客户端和服务器端通信
3. 连接数据库并根据需求设计学员信息表
4. 创建路由并实现页面模板呈递
5. 实现静态资源访问
6. 实现学生信息添加功能
7. 实现学生信息展示功能

第一步：建立项目文件夹并生成项目描述文件
新建student目录，在student目录下新建一个app.js文件，运行PowerShell切换到student目录下执行npm init -y命令生成package.json文件。

npm init -y

第二步：创建网站服务器实现客户端和服务器端通信
在app.js文件下编辑如下代码

//创建网站服务器模块
const http = require('http');
//创建服务器对象
const app = http.createServer();
//当客户端响应
app.on('request',(req,res) => {
    res.end('ok');
});
app.listen(80);
console.log('服务器创建成功');

第三步：连接数据库并根据需求设计学员信息表
在student目录下新建model目录，并在model目录下新建connect.js文件（实现链接数据库）和user.js（创建集合规则和集合构造函数）文件。

在Power Shell窗口中执行命令下载mongoose模块

npm install mongoose

connect.js代码如下

//mongodb数据库模块
const mongoose = require('mongoose');
//链接数据库 connect
mongoose.connect('mongodb://localhost/playground',{ useNewUrlParser: true, useUnifiedTopology: true })
        .then(success => console.log('数据库链接成功'))
        .catch(error => console.log('数据库链接失败'));

user.js文件代码如下

//mongodb数据库模块
const mongoose = require('mongoose');
//创建集合规则
const studentSchema = new mongoose.Schema({
    name: {
        type:String,
        require:true,
        minlength:2,
        maxlength:15      
    },
    age:{
        type:Number,
        min:18,
        max:25
    },
    sex:{
        type:String
    },
    email:String,
    hobbies:[String],
    colleage:String,
    enterDate:{
        type:Date,
        default:Date.now
    }
    
});
//创建集合
const Student = mongoose.model('Student',studentSchema);
//导出Student构造函数
module.exports.Student = Student;

修改app.js文件，添加如下代码：

//引入数据库链接文件
require('./model/connect');
//引入创建集合对象模块
const user = require('./model/user');
const Student = user.Student;

第四步： 创建路由并实现页面模板呈递

在student目录下新建views目录，把index.html和list.html文件后缀改为.art并将文件放置views目录下。

index.art关键代码修改如下

<form action="/add" method='post'>
		<fieldset>
			<legend>学生档案</legend>
			<label>
				姓名: <input class="normal" type="text" autofocus placeholder="请输入姓名" name="name">
			</label>
			<label>
				年龄: <input class="normal"  type="text" placeholder="请输入年龄" name="age">
			</label>
			<label>
				性别: 
				<input type="radio" value="0" name="sex"> 男
				<input type="radio" value="1" name="sex"> 女
			</label>
			<label>
				邮箱地址: <input class="normal" type="text" placeholder="请输入邮箱地址" name="email">
			</label>
			<label>
				爱好: 
				<input type="checkbox" value="敲代码" name="hobbies"> 敲代码
				<input type="checkbox" value="打篮球" name="hobbies"> 打篮球
				<input type="checkbox" value="睡觉" name="hobbies">睡觉 
			</label>
			<label>
				所属学院: 
				<select class="normal" name="colleage">
					<option value="前端与移动开发">前端与移动开发</option>
					<option value="PHP">PHP</option>
					<option value="JAVA">JAVA</option>
					<option value="Android">Android</option>
					<option value="IOS">IOS</option>
					<option value="UI设计">UI设计</option>
					<option value="C++">C++</option>
				</select>
			</label>
			<label>
				入学日期: <input type="date" class="normal" name="enterDate">
			</label>
			<label class="btn">
				<input type="submit" value="提交" class="normal">
			</label>
		</fieldset>
	</form>

在Power Shell窗口中执行命令下载模板引擎模块以及路由模块

npm install art-template
npm install router

在app.js文件下修改并添加如下代码

//引入router模块,获取路由对象
const getRouter = require('router');
//引入模板引擎对象
const template = require('art-template');
//模板引擎根目录
template.defaults.root = path.join(__dirname,'views');
//响应路由
const router = getRouter();

//呈递学生信息档案页面
router.get('/add',(req,res) => {
    let html = template('index.art', {});   
    res.end(html);
});
//呈递学生信息列表页面
router.get('/list',async (req,res) => {  
    let html = template('list.art', {});   
    res.end(html);
});
//当客户端响应
app.on('request',(req,res) => {
    //启用资源服务
    router(req,res, () => {});
});

第五步：实现静态资源访问

在Power Shell窗口中执行命令下载静态资源模块

npm install serve-static

在student目录下新建public目录，将css目录移至public目录下

在app.js文件下修改并添加如下代码

//引入静态资源访问模块
const serverStatic = require('serve-static');
//实现静态资源访问服务
const server = serverStatic(path.join(__dirname,'public'));
//当客户端响应
app.on('request',(req,res) => {
    //启用资源服务
    router(req,res, () => {});
    //启用静态资源访问服务
    server(req,res, () => {})
});

第六步：实现学生信息添加功能

在app.js文件下添加如下代码

//引入queryString 模块
const queryString = require('querystring');
//实现学生信息添加功能
router.post('/add',(req,res) => {
    //声明变量接收post请求参数
    let formData = '';
    req.on('data', param => formData += param);
    req.on('end', async () => {
        // console.log(queryString.parse(formData));
        await Student.create(queryString.parse(formData));
        //重定向
        res.writeHead(301,{
            Location:'/list'
        });
        res.end('1');
    })
});

第七步：实现学生信息展示功能

在Power Shell窗口中执行命令下载时间源模块

npm install dateformat

在app.js文件下修改如下代码

//引入时间模块
const dateformat = require('dateformat');
//导入方法
template.defaults.imports.dateformat = dateformat;
//呈递学生信息列表页面
router.get('/list',async (req,res) => {
    //查询所有学生信息
    let students = await Student.find();

    let html = template('list.art', {
        students:students
    });   
    res.end(html);
});

修改list.art关键代码如下：

	<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.colleage}}</th>
			<th>{{ dateformat($value.enterDate,'yyyy-mm-dd')}}</th>
		</tr>
		{{/each}}
	</table>

学生档案管理功能就实现啦。

最后还可以完善一下目录结构，可以将app.js文件下的router代码存放至新建文件index.js文件下，并在student目录下新建router目录，将该文件存放至router目录下，代码稍作修改即可。