引入http模块,连接服务器,创建服务,监听3000端口
const http=require('http');
const app=http.createServer();
app.on('request',(req,res)=>{
res.end('ok')
})
app.listen(3000);
连接数据库,引入mongoose模块
mongoose.connect('mongodb://localhost/app',{ useUnifiedTopology: true } )
.then(()=>console.log('数据库连接成功'))
.catch(()=>console.log('数据库连接失败'))
创建集合规则
const UserSchema=new mongoose.Schema({
name:{
type:String,
required:true,
minlength:2,
maxlength:20
}
从外部引入数据,将users.json文件放入同一文件夹中,powershell中使用mongoimport命令
mongoimport -d app -c users --file ./user.json
2020-12-06T20:28:35.007+0800 connected to: localhost
2020-12-06T20:28:35.078+0800 imported 6 documents
页面展示
可以把写好的静态页面用 直接展示在js文件中;res.end(list)响应
let users=await User.find()//find查询所有数据
循环users,展示其中的数据,进行字符串的拼接
完成页面的数据展示
增加用户
增加add路由,复制add.html页面进行展示。 增加用户是post方式,因为涉及到与数据库的交互。在add.html中添加用户标签中加入method="post" action="/add"(跳转路由)
if(pathname=='/add'){//添加用户
//接受用户请求的信息
let formData='';
//接受post参数,req.on 接受客户端的参数
req.on('data',param=>{
formData+=param;
})
req.on('end',async()=>{
let user=querystring.parse(formData);//parse方法,把字符串转成对象
await User.create(user);
res.writeHead(301,{
Location:'/list'
});
res.end();
直接输出formData的话,是字符串格式,引入querystring模块,parse方法可以将字符串转换成对象格式
设置301重定向,当点击后跳转到list页面。
修改用户
添加modify路由为修改信息页面;用同样的方式展示修改信息的页面,还是add的页面,知识把添加用户改为修改用户;在get请求中展示;但是要显示原有的选项,所以在每一项中添加一个value="${user.name}";通过id查询到这个人的信息,就是url中的参数(id)
//通过id查询到这个人的信息 findOne把数组变成对象
let user=await User.findOne({_id:query.id});
<label>用户名</label>
<input value="${user.name}" name="name" type="text" class="form-control" placeholder="请填写用户名">
其中的爱好是数组,所以还是采用遍历的方式,已经存在的checkbox勾选,不存在的不勾选
let hobbies=['足球','篮球','橄榄球','敲代码','抽烟','喝酒','喝酒','烫头'];
//展示爱好
hobbies.forEach(item=>{
let isHobby=user.hobbies.includes(item);
if(isHobby){
modify+=`<label class="checkbox-inline">
<input type="checkbox" value="${item}" name="hobbies" checked="checked"> ${item}
</label>`
}else{
modify+=`<label class="checkbox-inline">
<input type="checkbox" value="${item}" name="hobbies"> ${item}
</label>`
}
})
post请求中修改用户信息,同add中相同,User.create方法改为User.updataOne
删除用户
添加删除用户按键的路由
<a href="/remove?id=${item._id}" class="btn btn-danger btn-xs">删除</a>
根据id查找数据并删除,然后重定向回list页面。
else if(pathname=='/remove'){
await User.findOneAndDelete({_id:query.id});
res.writeHead(301,{
Location:'/list'
});
res.end();
}