1.建立项目文件夹并生成项目描述文件
输入下面命令生成package.json文件
npm init -y
2.创建网站服务器实现客户端和服务器端通信
创建app.js文件
在app.js中输入以下代码完成客户端和服务器端通信
//引入http模块
const http = require('http');
//创建网站服务器
const app = http.createServer();
//当客户端访问服务器的时候
app.on('request',(req,res) => {
res.end('ok!');
});
app.listen(80);
console.log('启动成功');
3.连接数据库并根据需求设计学院信息表
(1)连接数据库需要用到第三方模块mongoose,用下面命令下载
npm install mongoose
(2)创建学生集合规则并且运用结合规则
const studentSchema = new mongoose.Schema({
name: {
type: String,
required: true,
minlength: 2,
maxlength: 10
},
age: {
type: Number,
min: 10,
max: 25
},
sex: {
type: String
},
email: String,
hobbies: [String],
collage: String,
enterDate: {
type: Date,
default: Date.now
}
});
const Student = mongoose.model('Student',studentSchema);
4.创建路由并实现页面模板呈递
(1)第三方模块router(功能:实现路由)
使用步骤:
* 获取路由对象
* 调用路由下面的方法创建路由
* 启用路由,使路由生效
//引入http模块
const http = require('http');
//引入router第三方模块
const getRouter = require('router');
//获取路由对象
const router = getRouter();
//呈递学生档案信息页面
router.get('/test',(req,res) => {
res.end('test');
});
//呈递学生档案信息列表页面
router.get('/index',(req,res) => {
res.end('index');
});
//学生信息集合
const Student = require('./module/user');
//数据库连接
require('./module/connect');
//创建网站服务器
const app = http.createServer();
//当客户端访问服务器的时候
app.on('request',(req,res) => {
router(req, res, () => {});
});
app.listen(80);
console.log('启动成功');
5.实现静态资源访问
(1)下载模板引擎art-template
npm install art-template
(2)在student目录下创建views文件夹,并且放入模板文件
(3)在student目录下创建public文件夹,并且放入静态资源
(4)在app.js中引入模板引擎和path模块并且进行模板配置
//引入模板引擎
const template = require('art-template');
//引入path模块
const path = require('path');
//配置模板根目录
template.defaults.root = path.join(__dirname,'views');
//设置模板默认后缀
template.defaults.extname = '.html';
(4)第三方模块serve-static(功能:实现静态资源访问服务)
使用步骤
* 引入serve-static模块获取创建静态资源服务功能的方法
* 调用方法创建静态资源服务并指定静态资源服务目录
* 启用静态资源服务功能
//引入serve-static模块
const serveStatic = require('serve-static');
//实现静态资源访问服务
const serve = serveStatic(path.join(__dirname,'public'));
//启用静态资源访问功能
serve(req, res, () => {});
6.实现学生信息的添加功能
(1)在模板的表单中指定请求地址和请求方式,为每一个表单项添加name属性
<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="0" name="hobbies"> 敲代码
<input type="checkbox" value="1" name="hobbies"> 打篮球
<input type="checkbox" value="1" name="hobbies"> 睡觉
</label>
<label>
所属学院:
<select class="normal" name="collage">
<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>
(2)添加实现学生信息功能路由,接收客户端传递过来的学生信息,将学生信息添加到数据库中
将页面重定向到学生信息列表页面
//实现学生信息添加功能路由
router.post('/add',(req,res) => {
//接收post请求参数
let formDate = '';
req.on('date',param => {
formDate += param;
});
req.on('end', async () => {
await Student.create(queryString.parse(formDate));
res.writeHead(301, {
Location: '/list';
});
res.end();
});
});
7.实现学生信息的展示功能
(1)从数据库中将所有的学生信息查询出来
//呈递学生档案信息列表页面
router.get('/list',async (req,res) => {
//查询学生信息
let student = await Student.find();
let html = template('list',{
student: student
});
res.end(html);
});
(2)通过模板引擎将学生信息和HTML模板进行拼接
{{each student}}
<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}}
(3)将拼接好的HTML模板响应给客户端
//查询学生信息
let student = await Student.find();
let html = template('list',{
student: student
});
res.end(html);