目标:模板引擎应用,强化node.js项目制作流程。
知识点:http请求响应、mongodb数据库、template模板引擎、serve-static静态资源访问。
有疑问的可以针对需求访问下列学习链接
http请求响应学习链接:请求响应原理及HTTP协议学习笔记
mongodb数据库学习链接:MongoDB数据库概述、环境搭建及增删改查操作学习笔记
template模板引擎学习链接nodejs中模板引擎artTemplate学习笔记
界面:
添加学生信息界面:
学生信息列表界面:
流程及思路:
- 建立项目文件夹并生成项目描述文件
- 创建网站服务器实现客户端和服务器端通信
- 连接数据库并根据需求设计学员信息表
- 创建路由并实现页面模板呈递
- 实现静态资源访问
- 实现学生信息添加功能
- 实现学生信息展示功能
第一步:建立项目文件夹并生成项目描述文件
新建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目录下,代码稍作修改即可。