MongoDB增刪改查操作

1oneLee發表於2020-10-22
MongoDB

MongoDB增刪改查操作實戰案例（非模組化）

案例：使用者資訊增刪改查

  1. 搭建網站伺服器，實現客戶端與伺服器端的通訊
  2. 連線資料庫，建立使用者集合，向集合中插入文件
  3. 當使用者訪問/list時，將所有使用者資訊查詢出來
  4. 將使用者資訊和表格HTML進行拼接並將拼接結果響應回客戶端
  5. 當使用者訪問/add時，呈現表單頁面，並實現新增使用者資訊功能
  6. 當使用者訪問/modify時，呈現修改頁面，並實現修改使用者資訊功能
  7. 當使用者訪問/delete時，實現使用者刪除功能

程式碼（Node+模板字串+MongDB）

// 1. 搭建網站伺服器，實現客戶端與伺服器端的通訊
// 2. 連線資料庫，建立使用者集合，向集合中插入文件
// 3. 當使用者訪問`/list`時，將所有使用者資訊查詢出來
    //  實現路由功能
    // 呈現使用者資訊頁面
    // 從資料庫中查詢使用者資訊，將使用者資訊展示在列表中
// 4. 將使用者資訊和表格HTML進行拼接並將拼接結果響應回客戶端
// 5. 當使用者訪問`/add`時，呈現表單頁面，並實現新增使用者資訊功能
// 6. 當使用者訪問`/modify`時，呈現修改頁面，並實現修改使用者資訊功能
    // 1. 增加頁面路由 呈現頁面
        // (1) 在點選修改按鈕的時候，將使用者 id  傳遞到當前頁面
        // (2) 在資料庫中查詢當前使用者資訊，將使用者資訊展示到頁面中
    // 2. 實現使用者修改功能
        // （1）指定表單的提交地址以及請求方式
        //  (2) 接受客戶端傳遞過來的修改資訊 找到使用者 將使用者資訊更改為最新的
// 7. 當使用者訪問`/delete`時，實現使用者刪除功能

const http = require('http')
const mongoose = require('mongoose')
const url = require('url')
const querystring = require('querystring')

// 資料庫連線 27017是mongodb資料庫的預設埠
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() // 陣列
            // 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>
            `;
            // 對資料進行迴圈操作 item 是每一個物件
            users.forEach((item) => {
                list += `
                    <tr>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>
                `;
                // hobbies 是一個陣列 可以遍歷
					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') {
            // 根據待修改的使用者的 id 去資料庫中查詢使用者資訊
            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 () => {
                // console.log(formData) // name=123&password=123456&age=20&email=123%40123.com&hobbies=%E8%B6%B3%E7%90%83&hobbies=%E7%AF%AE%E7%90%83
                // console.log(querystring.parse(formData)) // [Object: null prototype] {
                                                                //   name: '123',
                                                                //   password: '123456',
                                                                //   age: '20',
                                                                //   email: '123@123.com',
                                                                //   hobbies: [ '足球', '籃球' ]
                                                                // }
                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)

相關文章