前端学习（1348）:用户的增删改查操作5修改
生活随笔
收集整理的這篇文章主要介紹了
前端学习（1348）:用户的增删改查操作5修改
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
//創建http連接
const http = require('http');
//創建服務器
const app = http.createServer();
//第三方模塊導入
const mongoose = require('mongoose');
//獲取連接
const url = require('url');
//
const querystring = require('querystring');
//數據庫連接地址
mongoose.connect('mongodb://localhost/playground', { useNewUrlParser: 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);
//添加屬性事件
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();console.log(users);let list = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></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="">刪除</a>|<a href="/modify?id=${item._id}">修改</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"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></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="text" class="form-control" placeholder="請輸入年齡"></div><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><button type="submit">添加用戶</button></div></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"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></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="text" class="form-control" placeholder="請輸入年齡"></div><div></html>`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 += ` <button type="submit">修改用戶</button></div></form></div>
</body>`res.end(modify);}} 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();})}}url.parse(req.url);/* res.end('ok'); */
})
app.listen(3000);
運行結果
總結
以上是生活随笔為你收集整理的前端学习（1348）:用户的增删改查操作5修改的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS实现导航栏半透明背景效果
- 下一篇： 前端学习（1344）:用户的增删改查操作