用戶列表案例

時間 2019-11-08
標籤用戶列表案例简体版
原文原文鏈接
首先利用數據庫命令將用戶信息的json文件導入項目文件夾下本項目時先後端不分離案例css
v>html
用戶列表案例
1. 搭建網站服務器，實現客戶端與服務器端的通訊
2. 鏈接數據庫，建立用戶集合，向集合中插入文檔
3. 當用戶訪問/list時，將全部用戶信息查詢出來
1. 實現路由功能
2. 呈現用戶列表頁面
3. 從數據庫中查詢用戶信息將用戶信息展現在列表中
4. 將用戶信息和表格HTML進行拼接並將拼接結果響應回客戶端
5. 當用戶訪問/add時，呈現表單頁面，並實現添加用戶信息功能
6. 當用戶訪問/modify時，呈現修改頁面，並實現修改用戶信息功能
修改用戶信息分爲兩大步驟
1. 增長頁面路由呈現頁面
2. 在點擊修改按鈕的時候將用戶ID傳遞到當前頁面
3. 從數據庫中查詢當前用戶信息將用戶信息展現到頁面中
實現用戶修改功能
1. 指定表單的提交地址以及請求方式
2. 接受客戶端傳遞過來的修改信息找到用戶將用戶信息更改成最新的
7. 當用戶訪問/delete時，實現用戶刪除功能
// 搭建網站服務器，實現客戶端與服務器端的通訊
// 鏈接數據庫，建立用戶集合，向集合中插入文檔
// 當用戶訪問/list時，將全部用戶信息查詢出來
//     實現路由功能
//     呈現用戶列表頁面
//     從數據庫中查詢用戶信息 將用戶信息展現在列表中
// 將用戶信息和表格HTML進行拼接並將拼接結果響應回客戶端
// 當用戶訪問/add時，呈現表單頁面，並實現添加用戶信息功能
// 當用戶訪問/modify時，呈現修改頁面，並實現修改用戶信息功能
//     修改用戶信息分爲兩大步驟
//         1.增長頁面路由 呈現頁面
//             1.在點擊修改按鈕的時候 將用戶ID傳遞到當前頁面
//             2.從數據庫中查詢當前用戶信息 將用戶信息展現到頁面中
//         2.實現用戶修改功能
//             1.指定表單的提交地址以及請求方式
//             2.接受客戶端傳遞過來的修改信息 找到用戶 將用戶信息更改成最新的
// 當用戶訪問/delete時，實現用戶刪除功能

const http = require('http');
const app = http.createServer();
const url = require('url')
const mongoose = require('mongoose')
const querystring = require('querystring')



// 建立數據庫
// 鏈接數據庫
mongoose.connect('mongodb://localhost/wrj', {
    useNewUrlParser: true
})
// 建立數據庫規則
const Rules = 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('w', Rules);



// 爲服務器對象添加請求事件
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();
            // html字符串
            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 = ['足球', '籃球', '橄欖球', '敲代碼', '抽菸', '喝酒', '燙頭', '吃飯', '睡覺', '打豆豆']
            console.log(user)
            // 呈現修改用戶表單頁面
            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') {
            // res.end(query.id)
            await User.findOneAndDelete({_id: query.id});
            res.writeHead(301, {
                Location: '/list'
            });
            res.end();
        }
    }else if (method == 'POST') {
        // 用戶添加功能
        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();
            })
        }else 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();
            })
        }
    }

});
// 監聽端口
app.listen(3000);
相關標籤/搜索