const http = require('http');
// 连接数据库
const mongoose = require('mongoose');
const url = require('url');
const querystring = require('querystring');
// 连接数据库
mongoose.connect('mongodb://localhost/playground', { useUnifiedTopology: true, useNewUrlParser: true })
.then(() => console.log('数据库连接成功...'))
.catch(() => console.log('数据库连接失败...'))
// 创建用户集合规则
const UserSchema = new mongoose.Schema({
name: {
type: String,
required: true,
minlength: 2,
maxlenfth: 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 == '/' || pathname == '/list') {
// 查询用户信息
let users = await User.find();
// console.log(users);
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 type="email" name="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 type="email" value="${user.email}" name="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" checked="checked" value="${item}" name="hobbies"> ${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') {
// res.end(query.id);
await User.findOneAndDelete({ _id: query.id });
res.writeHead(301, {
location: '/list'
})
res.end();
} else {
res.end('not found');
}
} else if (method == 'POST') {
// 用户添加功能
if (pathname == '/add') {
// 1 接受用户提交的信息
let formData = '';
// 接收 post参数
req.on('data', param => {
formData += param;
})
// post 数据接收完毕
req.on('end', async() => {
console.log(querystring.parse(formData));
let user = querystring.parse(formData);
// 2 将用户提交的信息 添加到数据库中
await User.create(user)
// 301 代表重定向
// location 跳转地址
res.writeHead(301, {
Location: '/list'
})
// 当前请求结束
res.end();
})
} else if (pathname == '/modify') {
// 1 接受用户提交的信息
let formData = '';
// 接收 post参数
req.on('data', param => {
formData += param;
})
// post 数据接收完毕
req.on('end', async() => {
// console.log(querystring.parse(formData));
let user = querystring.parse(formData);
// 2 将用户提交的信息 添加到数据库中
await User.updateOne({ _id: query.id }, user)
// 301 代表重定向
// location 跳转地址
res.writeHead(301, { Location: '/list' });
// 当前请求结束
res.end();
})
}
}
})
// 监听端口
app.listen(3000);