Nodejs之路（三）—— Nodejs之Express框架

Express

原生的 http 在某些方面表現不足以應對我們的開發需求，所以我們需要使用框架來加快我們的開發效率。框架的目的就是提高效率，讓我們的代碼更高度統一

在Node 中，有很多 Web 開發框架，我們這里以學習express為主

參考網址：http://expressjs.com/

1.起步

1.1 安裝：

npm install --save express

1.2 hello world

var express = require('express')
var app = express()

app.get('/',function(req,res){
    //推薦使用express的方法
    res.send("hello world")
})

app.listen(3000,function(){
    console.log("express app is running ...")
})

1.3 基本路由

路由器

• 請求方法

• 請求路徑

• 請求處理函數

get:

//當以 GET 方法請求 / 的時候，執行對應的處理函數
app.get('/',function(req,res){
    res.send('hello world!')
})

post:

//當以 POST 方法請求 / 的時候，執行對應的處理函數
app.post('/',function(req,res){
    res.send('Get a POST request')
})

1.4 靜態服務

// /public資源
app.use(express.static('public'))
// /files資源
app.use(express.static('files'))
// /public/xxx
app.use('/public',express.static('public'))
// /static/xxx
app.use('/static',express.static('public'))

app.use('/static',express.static(path.join(__dirname,'public')))

2.在Express中配置使用art-template模板引擎

• art-template-GitHub倉庫

• art-template 官方文檔

安裝：

npm install --save art-template
npm install --save express-art-template

配置：

//默認art
app.engine('art', require('express-art-template'))
//修改后html
app.engine('html', require('express-art-template'))

使用：

//使用修改后html的配置
app.get('/',function(req,res){
    //express 默認會去項目中的 views 目錄中找 index.html
    res.render('index.html',{
        title:'hello world'
    })
})

注意：如果希望修改默認的views視圖渲染存儲目錄，可以：

//第一個參數 views 千萬不要寫錯
app.set('views',目錄路徑)

3.在Express中獲取表單GET請求參數

Express內置了一個API，可以直接通過req.query來獲取

req.query

注：在瀏覽器輸入的地址，默認都是get請求

4.在Express中獲取表單POST請求體數據

在Express中沒有內置獲取表單POST請求體的API，這里我們需要使用一個第三方包：body-parser

安裝：

npm install --save body-parser

配置：

var express = require('express')
//0.引包
var bodyParser = require('body-parser')

var app = express()

//1.配置 body-parser
//只要加入這個配置，則在 req 請求對象上會多出來一個屬性：body
//也就是說可以直接通過 req.body 來獲取表單 POST 請求體數據了
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

使用：

app.use(function (req, res) {
  res.setHeader('Content-Type', 'text/plain')
  res.write('you posted:\n')
    
   //可以通過 req.body 來獲取表單 POST 請求體數據  
  res.end(JSON.stringify(req.body, null, 2))
})

注意：req.body 返回的對象屬性值都是字符串

5.使用nodemon工具自動重啟服務

我們這里可以使用一個第三方命名工具：nodemon來幫助我們解決頻繁修改代碼重啟服務器問題

nodemon是一個基於Node.js開發的一個第三方命令行工具，我們使用的時候需要獨立安裝：

#在任意目錄執行該命令都可以
#也就是說，所有需要 --global 來安裝的包都可以在任意目錄執行
npm install --global nodemon

安裝完畢之后，使用：

#之前使用 node
node app.js

#現在使用 nodemon
nodemon app.js

只要是通過nodemon app.js啟動的服務，則它會監視你的文件變化，當文件發生變化的時候，它會自動幫你重啟服務器

6.Express - crud(路由)

6.1 模塊化思想

模塊如何划分：

• 模塊職責要單一

• Vue

• angular

• React

• 也非常有利於學習前端三大框架

6.2 起步

• 初始化

• 模板處理

6.3 路由設計

6.4 提取路由模塊

router.js:

/*
 router.js 路由模塊
    職責：
        處理路由
        根據不同的請求方法+請求路徑設置具體的請求處理函數
*/
// 模塊職責要單一，不要亂寫
// 划分模塊的目的就是增強項目代碼的可維護性，提升開發效率

var express = require('express')
//1.創建一個路由容器
var router = express.Router()
//2.把路由都掛載到 router 路由容器中
router.get('/students', function(req,res){

})
router.get('/students/new',function(req,res){
    res.render('new.html')
})
router.post('/students/new',function(req,res){
    
})
router.get('/students/edit',function(req,res){

})
router.post('/students/edit',function(req,res){

})
router.get('/students/delete',function(req,res){

})
//3.把 router 導出
module.exports = router

app.js:

var router = require("./router")

//掛載路由
app.use(router)

6.5 設計操作數據的API模塊

/*
student.js
數據操作文件模塊
職責：操作文件中的數據，只處理數據，不關心業務
*/

/*
    獲取所有學生列表
    return 數組
*/
exports.find = function(){

}

/*
    添加保存學生

*/
exports.save = function(){

}

/*
    更新學生
*/
exports.update = function(){

}

/*
    刪除學生
*/
exports.delete = function(){

}

6.6 案例——學生管理系統——編寫步驟

• 處理模板

• 配置開放靜態資源

• 配置模板引擎

• 簡單路由： /students 渲染靜態頁出來

• 路由設計

• 提取路由模塊

• 由於接下來一些新的業務操作都需要處理文件數據，所以我們需要封裝 student.js

• 先寫好 student.js 文件結構

  • 查詢所有學生列表的 API find

  • findById

  • save

  • updateById

  • deleteById

• 實現具體功能

  • 通過路由收到請求

  • 接收請求中的數據（get、post）

    • req.query

    • req.body

  • 使用數據操縱 API 處理數據

  • 根據操作結果給客戶端發送響應

• 業務功能順序

  • 列表

  • 添加

  • 編輯

  • 刪除

• ES6的兩個重要API：find、findIndex