MongoDB增删改查操作实战案例(非模块化)
案例:用户信息增删改查
- 搭建网站服务器,实现客户端与服务器端的通信
- 连接数据库,创建用户集合,向集合中插入文档
- 当用户访问
/list
时,将所有用户信息查询出来 - 将用户信息和表格HTML进行拼接并将拼接结果响应回客户端
- 当用户访问
/add
时,呈现表单页面,并实现添加用户信息功能 - 当用户访问
/modify
时,呈现修改页面,并实现修改用户信息功能 - 当用户访问
/delete
时,实现用户删除功能
代码(Node+模板字符串+MongDB)
const http = require('http')
const mongoose = require('mongoose')
const url = require('url')
const querystring = require('querystring')
mongoose.connect('mongodb://localhost/zhangbing',{ useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log('数据库连接成功'))
.catch(() => console.log('数据库连接失败'))
const userSchema = new mongoose.Schema({
name:{
type:String,
required:true,
minlength:2,
maxlength:20
},
age:{
type:Number,
min:18,
max:80
},
password:String,
email:String,
hobbies:[String]
})
const User = mongoose.model('User',userSchema)
const app = http.createServer()
app.on('request', async (req,res) => {
const method = req.method;
const { pathname, query } = url.parse(req.url, true)
if (method == 'GET') {
if (pathname == '/list') {
let users = await User.find()
let list = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h6>
<a href="/add" class="btn btn-primary">添加用户</a>
</h6>
<table class="table table-striped table-bordered">
<tr>
<td>用户名</td>
<td>年龄</td>
<td>爱好</td>
<td>邮箱</td>
<td>操作</td>
</tr>
`;
users.forEach((item) => {
list += `
<tr>
<td>${item.name}</td>
<td>${item.age}</td>
<td>
`;
item.hobbies.forEach((item) => {
list += `<span>${item}</span>`;
})
list += `</td>
<td>${item.email}</td>
<td>
<a href="/remove?id=${item.id}" class="btn btn-danger btn-xs">删除</a>
<a href="/modify?id=${item.id}" class="btn btn-success btn-xs">修改</a>
</td>
</tr>
`;
})
list += `</table>
</div>
</body>
</html>
`;
res.end(list)
} else if (pathname == '/add') {
let add = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>添加用户</h3>
<form method='post' action="/add">
<div class="form-group">
<label>用户名</label>
<input name="name" type="text" class="form-control" placeholder="请填写用户名">
</div>
<div class="form-group">
<label>密码</label>
<input name="password" type="password" class="form-control" placeholder="请输入密码">
</div>
<div class="form-group">
<label>年龄</label>
<input name="age" type="text" class="form-control" placeholder="请填写年龄">
</div>
<div class="form-group">
<label>邮箱</label>
<input name="email"type="email" class="form-control" placeholder="请填写邮箱">
</div>
<div class="form-group">
<label>请选择爱好</label>
<div>
<label class="checkbox-inline">
<input type="checkbox" value="足球" name="hobbies"> 足球
</label>
<label class="checkbox-inline">
<input type="checkbox" value="篮球" name="hobbies"> 篮球
</label>
<label class="checkbox-inline">
<input type="checkbox" value="橄榄球" name="hobbies"> 橄榄球
</label>
<label class="checkbox-inline">
<input type="checkbox" value="敲代码" name="hobbies"> 敲代码
</label>
<label class="checkbox-inline">
<input type="checkbox" value="抽烟" name="hobbies"> 抽烟
</label>
<label class="checkbox-inline">
<input type="checkbox" value="喝酒" name="hobbies"> 喝酒
</label>
<label class="checkbox-inline">
<input type="checkbox" value="烫头" name="hobbies"> 烫头
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">添加用户</button>
</form>
</div>
</body>
</html>`;
res.end(add)
} else if (pathname == '/modify') {
let user = await User.findOne({_id:query.id})
let hobbies = ['足球','篮球','橄榄球','敲代码','抽烟','喝酒','烫头', '吃饭', '睡觉', '打豆豆']
let modify = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>修改用户</h3>
<form method='post' action="/modify?id=${user._id}">
<div class="form-group">
<label>用户名</label>
<input value="${user.name}" name="name" type="text" class="form-control" placeholder="请填写用户名">
</div>
<div class="form-group">
<label>密码</label>
<input value="${user.password}" name="password" type="password" class="form-control" placeholder="请输入密码">
</div>
<div class="form-group">
<label>年龄</label>
<input value="${user.age}" name="age" type="text" class="form-control" placeholder="请填写年龄">
</div>
<div class="form-group">
<label>邮箱</label>
<input value="${user.email}" name="email"type="email" class="form-control" placeholder="请填写邮箱">
</div>
<div class="form-group">
<label>请选择爱好</label>
<div>
`;
hobbies.forEach (item => {
let isHobby = user.hobbies.includes(item)
if (isHobby) {
modify += `
<label class="checkbox-inline">
<input type="checkbox" value="${item}" name="hobbies" checked> ${item}
</label>`
} else {
modify += `
<label class="checkbox-inline">
<input type="checkbox" value="${item}" name="hobbies"> ${item}
</label>`
}
})
modify += `</div>
</div>
<button type="submit" class="btn btn-primary">修改用户</button>
</form>
</div>
</body>
</html>
`;
res.end(modify)
} else if (pathname == '/remove') {
await User.findOneAndDelete({_id:query.id})
res.writeHead(301, {
Location:'/list'
})
res.end();
}
} else if (method == 'POST') {
if (pathname == '/add') {
let formData = '';
req.on('data', param => {
formData += param;
})
req.on('end', async () => {
let user = querystring.parse(formData)
await User.create(user)
res.writeHead(301, {
Location:'/list'
})
res.end();
})
} else if (pathname == '/modify') {
let formData = '';
req.on('data', param => {
formData += param;
})
req.on('end', async () => {
let user = querystring.parse(formData)
await User.updateOne({_id: query.id}, user);
res.writeHead(301, {
Location: '/list'
});
res.end();
})
}
}
})
app.listen(3000)