// model/index.js
// 2-(1)导入mongoose
const mongoose = require('mongoose')
// 2-(2)数据库连接 27017是mongodb数据库的默认端口
mongoose
.connect('mongodb://localhost/demo', {
useNewUrlParser: true,
useUnifiedTopology: true,
})
.then(() => console.log('数据库连接成功'))
.catch(() => console.log('数据库连接失败'))
// model/user.js
const mongoose = require('mongoose')
// 2-(3)创建用户集合规则
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],
})
// 2-(4)创建用户集合,返回集合构造函数
const User = mongoose.model('User', UserSchema)
module.exports = User;
// 1.搭建网站服务器,实现客户端与服务器的通信
// 2.连接数据库,创建用户集合,向集合中插入文档
// 3.当用户访问/list时,将所有用户信息查询出来
// 实现路由功能
// 呈现用户列表页面
// 从数据库中查询用户信息,将用户信息展示在列表中
// 4.将用户信息和表格HTML进行拼接并将拼接结果响应回客户端
// 5.当用户访问/add时,呈现表单页面,并实现添加用户信息的功能
// 6.当用户访问/modify时,呈现修改页面,并实现修改用户信息功能
// (1)增加页面路由,呈现页面
// 在点击修改按钮的时候,将用户ID传递到当前页面
// 从数据库中查询当前用户信息,将用户想信息展示到页面中
// (2)实现用户修改的功能
// 指定表单的提交地址以及请求方式
// 接受客户端传递过来的修改信息,找到用户,将用户信息更改为最新的
// 7.当用户访问/delete时,实现用户删除功能
// 1-(1)搭建网站服务器
const http = require('http')
// 5-(3)导入querystring,将字符串转换为对象形式(querystring.parse())
const querystring = require('querystring')
require('./model/index.js')
const User = require('./model/user')
// 3-(2)导入url对地址进行处理
const url = require('url')
// 1-(2)创建服务器
const app = http.createServer()
// 1-(4)为服务器对象添加请求事件
app.on('request', async (req, res) => {
// 3-(1)获取请求方式
const method = req.method
// 3-(3)获取请求地址 6-(2)设置query接受传递的参数
const {
pathname,
query
} = url.parse(req.url, true)
// 3-(4)对请求方式进行判断
if (method == 'GET') {
// 3-(5)呈现用户列表页面
if (pathname == '/list') {
// 通过异步请求拿到users的数据
let users = await User.find()
// console.log(users)
// list 里面存放的是表格的呈现形式
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 hobbies = ['eating', 'cooking', 'singing', 'dancing', 'writing', 'running']
//5-(1) 呈现添加用户页面
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>
`;
hobbies.forEach(item => {
add += `
<label class="checkbox-inline">
<input type="checkbox" value="${item}" name="hobbies"> ${item}
</label>
`
})
add += `
</div>
</div>
<button type="submit" class="btn btn-primary">添加用户</button>
</form>
</div>
</body>
</html>
`
res.end(add)
} else if (pathname == '/modify') {
// 6-(4)声明一个所有爱好都在的数组
let hobbies = ['eating', 'cooking', 'singing', 'dancing', 'writing', 'running']
// 6-(3)获取传递的id信息,find返回的是一个数组,findOne返回一个对象
let user = await User.findOne({
_id: query.id
})
console.log(user)
// 6-(1)呈现修改用户的界面
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" name="hobbies" checked> ${item}
</label>
`
} else {
modify += `
<label class="checkbox-inline">
<input type="checkbox" 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 if (method == 'POST') {
//5-(2) 用户添加功能
if (pathname == '/add') {
// 接受用户提交的信息
let formData = ''
// 接受post参数
req.on('data', (param) => {
formData += param
})
// post参数接受完毕
req.on('end', async () => {
let user = querystring.parse(formData)
// 将用户提交的信息添加到数据库中
await User.create(user)
// 添加成功,进行地址的重定向 ,301代表重定向,location代表要跳转的地址
res.writeHead(301, {
Location: '/list',
})
res.end()
})
}
// 6-(2)用户修改功能
if (pathname == '/modify') {
// 接受用户提交的信息
let formData = ''
// 接受post参数
req.on('data', (param) => {
formData += param
})
// post参数接受完毕
req.on('end', async () => {
let user = querystring.parse(formData)
// 将用户提交的信息添加到数据库中
await User.updateOne({
_id: query.id
}, user)
// 添加成功,进行地址的重定向 ,301代表重定向,location代表要跳转的地址
res.writeHead(301, {
Location: '/list',
})
res.end()
})
}
}
})
// 1-(3)监听端口
app.listen(3000)