node.js+express+mongodb對使用者進行增删查改

一、用到的相關技術

使用 Node.js 的 express 架構搭建web服務
使用 express 中間件 body-parse 解析表單 post 請求體
使用 art-template 模闆引擎渲染頁面
使用第三方包 mongoose 來操作 MongoDB 資料庫

二、在指令行用 npm 執行相關的指令

初始化項目，在指令行執行 npm init 然後一路回車就行了（或者直接 npm init -y）生成 package.json 檔案，它相當于是你項目的說明書

npm init

安裝需要用到的各種包

# Express 架構
npm install express

# 模闆引擎(express-art-template 是模闆引擎與 express 的關聯包)
npm install art-template express-art-template

# express 中間件 body-parser
npm install body-parser

# mongoose
npm install mongoose

三、項目結構說明

node.js+express+mongodb對使用者進行增删查改

四、路由設計

請求方法	請求路徑	get 參數	post 參數
GET	/user	渲染首頁
GET	/add	渲染添加使用者頁面
POST	/add	name、age、gender、job、hobbies	處理添加使用者請求
GET	/edit	id	渲染編輯頁面
POST	/edit	id、name、age、gender、job、hobbies	處理編輯請求
GET	/delete	id	處理删除請求

五、編寫代碼

入口子產品： app.js

/**
 * app.js 服務入口子產品
 * 1. 建立服務
 * 2. 做服務相關的配置
 *    2.1 模闆引擎
 *    2.2 body-parser 解析表單 post 請求體
 *    2.3 提供相關的靜态資源服務（開放public目錄）
 * 3. 挂載路由
 * 4. 監聽端口 開啟服務
 * */

var express = require('express')
var router = require('./router.js')
var bodyParser = require('body-parser')

//建立你的伺服器應用程式
var app = express()

//指定 .html 字尾的檔案使用的解析引擎
app.engine('html',require('express-art-template'))

//開發靜态資源
app.use('/public/',express.static('./public/'))
app.use('/node_modules/',express.static('./node_modules/'))

// 配置 body-parser 中間件（插件，專門用來解析表單 POST 請求體）
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())

//把路由挂載到 app 服務中
app.use(router)


//開啟服務
app.listen(3000,function(){
    console.log('server is running ...')
})

路由子產品： router.js

/**
 *
 * router.js 路由子產品
 * 根據不同的請求方法 + 請求路徑 設定具體的請求處理函數
 *
 * */

var express = require('express')
var User = require('./user.js')

//1. 建立一個路由
var router = express.Router()

//2. 把路由都挂載到 router 路由容器中

// =============渲染使用者清單頁面=============
router.get('/users',function(req,res){
    User.find(function(err,users){
        if(err){
            return res.status(500).send('Server err')
        }
        res.render('index.html',{users:users})
    })
})

// =============渲染添加使用者資訊頁面===========
router.get('/add',function(req,res){
    res.render('add.html')
})

// ==============處理添加使用者==================
router.post('/add',function(req,res){
    //1. 擷取表單資料 req.body
    //2. 處理：将資料儲存到 db.json 檔案中用以持久化
        new User(req.body).save(function(err){
        if(err){
            return res.status(500).send('server err')
        }
        //3. 重定向到首頁
        res.redirect('/users')
    })
})

// =================渲染編輯使用者資訊頁面============
router.get('/edit',function(req,res){
    //1. 在用戶端的清單中處理連結問題（需要有 id 參數）
    //擷取要編輯的學生 通過id
    User.findById(req.query.id.replace(/"/g,''),function(err,user){
        if(err){
            return res.status(500).send('Server error')
        }
        res.render('edit.html',{
            user:user
        })
    })
})

// ==================處理編輯使用者資訊================
router.post('/edit',function(req,res){
    //1. 擷取表單資料 req.body
    //2. 通過 id 更新 User.findByIdAndUpdate()
    //3. 重定向到首頁
    User.findByIdAndUpdate(req.body.id.replace(/"/g,''),req.body,function(err){
        if(err){
            return res.status(500).send('server error')
        }
        res.redirect('/users')
    })
})

// ==================删除使用者====================
router.get('/delete',function(req,res){
    // 通過 id 查找到對應使用者進行删除 User.findByIdAndRemove()
    User.findByIdAndRemove(req.query.id.replace(/"/g,''),function(err){
        if(err){
            return res.status(500).send('server error')
        }

    })
    res.redirect('/users')

})

// 把路由導出
module.exports = router

建立資料庫 model 子產品： user.js

var mongoose = require('mongoose')

//連接配接資料庫 資料庫名(usersdb) 沒有會自動建立
mongoose.connect('mongodb://localhost/usersdb')

//定義資料庫表結構 schema
var Schema = mongoose.Schema

//設計表結構
var userSchema = new Schema({
    name:{
        type:String,
        require:true
    },
    gender:{
        type:Number,
        enum:[0,1],
        default: 0
    },
    age:{
        type:Number
    },
    job:{
        type:String
    },
    hobbies:{
        type:String
    }
})

//将文檔結構釋出為模型并導出
module.exports = mongoose.model('User',userSchema)

視圖子產品

4.1 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="/public/css/css.css">
    <link rel="stylesheet" href="/public/css/index.css">
</head>
<body>
    <header>
        <div class="left"> 使用者管理系統</div>
        <div class="right"> 歡迎登陸 admin | 退出</div>
    </header>
    <div class="slide">
        <ul>
            <li>使用者資訊</li>
        </ul>
    </div>
    <div class="add">
        <a href="/add">添加使用者</a>
    </div>
    <div class="content">
        <table cellspacing="0">
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年齡</td>
                    <td>愛好</td>
                    <td>職位</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
            {{ each users }}
                <tr>
                    <td>{{ $value.name }}</td>
                    {{if $value.gender==0 }}
                    <td>男</td>
                    {{ else }}
                    <td>女</td>
                    {{ /if }}
                    <td>{{ $value.age }}</td>
                    <td>{{ $value.hobbies }}</td>
                    <td>{{ $value.job }}</td>
                    <td>
                        <!-- 注意這裡 id={{  }} 的=(這個等号)前後不能打空格 不能打成 id = {{  }}
                            因為打了空格就相當于加了字元串空格，擷取的id會有誤 -->
                        <a href="/edit?id={{ $value._id }}">編輯</a>
                        <a href="/delete?id={{ $value._id }}">删除</a>
                    </td>
                </tr>
            {{ /each }}
            </tbody>
        </table>
    </div>
</body>
</html>

4.2 add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="/public/css/css.css">
    <link rel="stylesheet" href="/public/css/form.css">
</head>
<body>
<header>
    <div class="left"> 使用者管理系統</div>
    <div class="right"> 歡迎登陸 admin | 退出</div>
</header>
    <div class="slide">
        <ul>
            <li>使用者資訊</li>
        </ul>
    </div>
    <div class="content">
        <div class="box">
            <div class="top">添加資訊</div>
        <form action="/add" method="post">
            <table>
                <tr>
                    <td>姓名：</td>
                    <td><input type="text" name="name" class="text" placeholder="請輸入使用者名"></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        男：<input type="radio" name="gender" value="0">
                        女：<input type="radio" name="gender" value="1">
                    </td>
                </tr>
                <tr>
                    <td>年齡：</td>
                    <td><input type="number" name="age" class="text"></td>
                </tr>
                <tr>
                    <td>愛好：</td>
                    <td><input type="text" name="hobbies" class="text"></td>
                </tr>
                <tr>
                    <td>職位：</td>
                    <td><input type="text" name="job" class="text"></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="送出" class="button">
                        <input type="reset" value="重置" class="button">
                    </td>
                </tr>
            </table>
        </form>
        </div>
    </div>
</body>
</html>

4.3 edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="/public/css/css.css">
    <link rel="stylesheet" href="/public/css/form.css">
</head>
<body>
<header>
    <div class="left"> 使用者管理系統</div>
    <div class="right"> 歡迎登陸 admin | 退出</div>
</header>
<div class="slide">
    <ul>
        <li>使用者資訊</li>
    </ul>
</div>
<div class="content">
    <div class="box">
        <div class="top">添加資訊</div>
        <form action="/edit" method="post">
            <!--
            用來放一些不希望被使用者看見，但是需要被送出到服務端的資料
           -->
            <input type="hidden" name="id" value="{{ user.id }}">
            <table>
                <tr>
                    <td>姓名：</td>
                    <td><input type="text" class="text" name="name" value="{{ user.name }}"></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        {{ if user.gender == 0 }}
                        男：<input type="radio" name="gender" value="0" checked>
                        女：<input type="radio" name="gender" value="1">
                        {{ else }}
                        男：<input type="radio" name="gender" value="0" >
                        女：<input type="radio" name="gender" value="1" checked>
                        {{ /if }}
                    </td>
                </tr>
                <tr>
                    <td>年齡：</td>
                    <td><input type="number" class="text" name="age" value="{{ user.age }}"></td>
                </tr>
                <tr>
                    <td>愛好：</td>
                    <td><input type="text" class="text" name="hobbies" value="{{ user.hobbies }}"></td>
                </tr>
                <tr>
                    <td>職位：</td>
                    <td><input type="text" class="text" name="job" value="{{ user.job }}"></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="送出" class="button">
                        <input type="reset" value="重置" class="button">
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
</html>

六、測試

連接配接資料庫
```
mongod
           
```
開啟服務
```
nodemon app.js
           
```
運作結果

node.js+express+mongodb對使用者進行增删查改

個人做的小案例

項目下載下傳位址：https://github.com/zyxWebGitHub/Node.git

node.js+express+mongodb對使用者進行增删查改

node.js+express+mongodb對使用者進行增删查改

一、用到的相關技術

二、在指令行用 npm 執行相關的指令

三、項目結構說明

四、路由設計

五、編寫代碼

六、測試

繼續閱讀

SWFObject2

口語2

李開複給中國學生的第六封信：選擇的智慧

Outlook Express 錯誤代碼表

vue中父元件調用子元件的方法

Node.js介紹一、Node.js簡介二、Node.js的結構分層三、支撐Node.js運作的基礎建構包括的部分四、Node.js的特點

Vue - vue create、vue ui、vue init三種方式建立Vue項目

Vue - 安裝Node.js（配置環境變量、配置NPM下載下傳存放目錄、NPM設定鏡像倉庫）

HP Proliant 系列伺服器使用 SmartStart CD光牒配置陣列卡過程

nodejs 實戰項目學習資料庫通路結果為undefined express ejs

美國商業服務外包方興未艾（華盛頓郵報）

npm start 啟動和webstorm中的綠色箭頭啟動node服務導緻的差異

Jeecg-Boot 2.4.0版部署後無法加載驗證碼問題Provisional headers are shown Failed to load response data

企業最佳Node.js 應用案例分享

express 搭建背景建構工程目錄結構