Express 的介紹與安裝

原生的 http 在某些方面表現(xiàn)不足以應對我們的開發(fā)需求，所以我們就需要使用框架來加快我們的開發(fā)效率，框架的目的就是提高效率，讓我們的代碼高度統(tǒng)一。
在 node 中，有很多 Web 開發(fā)框架，比如express。

• 安裝

  
  
  Express 的安裝
• 使用

var express = require('express')
// 創(chuàng)建服務器應用，也就是原來的 http.createServer()
var app = express()
app.get('/', function (req. res){
  res.send('Hello World!')
)}

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

基本路由

路由器

• 請求方法
• 請求路徑
• 請求處理函數(shù)

get 請求：

// 當你以 GET 方法請求 / 的時候，執(zhí)行對應的處理函數(shù)
app.get('/', function (req, res) {
  res.send('Hello World!')
}

post 請求：

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

express 中的靜態(tài)服務

//  /public 資源
app.use(express.static('public'))
// 當省略第一個參數(shù)的時候，則可以通過 省略 /public 的方式來訪問
// 這種方式的好處就是可以省略 /public/

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

//  /public/xxx
app.use('/public', express.static('public'))
// 當以 /public 開頭的時候，去 ./public/ 目錄中找找對應的資源
// 這種方式更容易辨識，推薦這種方式

//  /static/xxx
app.use('/static', express.static('public'))
// 可以用 /static 訪問 /public 目錄中的資源

// 靜態(tài)函數(shù)的路徑相對于 node 啟動的路徑
// 如果從另一個目錄運行 Express 應用程序，則使用要服務的絕對路徑更安全
app.use('/static', express.static(path.join(__dirname, 'public')))

詳細規(guī)則參見 express 官網(wǎng)：http://expressjs.com/en/starter/static-files.html

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

• 安裝
  express-art-template 是專門用來把 art-template 整合到 Express 中的一個模塊，這里必須安裝 art-template 的原因是 express-art-template 依賴了 art-template。
  npm install --save art-template express-art-template

• 配置
  配置使用 art-template 模板引擎，第一個參數(shù)，表示當渲染以 .art 結(jié)尾的文件的時候，使用 art-template 模板引擎。也可以改為html, 渲染的文件要改為 html 文件。

app.engine('art', require('express-art-template'))

• 使用

app.get('/', function (req, res) {
// express 默認會去 views 目錄中找 index.html
  res.render('index.html', {
    title:'hello world'
  })
})

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

app.set('views', 目錄路徑)

express 寫留言本案例

1. 在 express 中獲取表單 GET 請求參數(shù)

Express 內(nèi)置了一個 API，可以直接通過 req.query 來獲取。

2. 在 express 中獲取表單 POST 請求體數(shù)據(jù)

在 express 中沒有內(nèi)置的獲取表單 POST 請求體的 API, 這里我們需要使用一個第三方包：body-parser。body-parser官方使用說明

• 安裝
  npm install --save body-parser
• 配置
  只要加入這個配置，則在 req 請求對象上就會多出來一個屬性：body。也就是說你可以直接通過 req.body 來獲取表單 POST 請求體數(shù)據(jù)了。

var express = require('express')
var bodyParser = require('body-parser')

var app = express()

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())

• 使用
  通過 req.body 用來獲取 POST 請求體數(shù)據(jù)。

app.use(function (req, res) {
  res.setHeader('Content-Type', 'text/plain')
  res.write('you posted:\n')
  res.end(JSON.stringify(req.body, null, 2))
})

留言本案例代碼:

var express = require('express')
var bodyParser = require('body-parser')
var app = express()

app.use('/public',express.static('public'))

app.engine('html', require('express-art-template'))

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

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

var comments = []

app.get('/', function(req, res) {
    res.render('index.html', {
        comments: comments
    })
})

app.get('/post', function(req, res) {
    res.render('post.html')
})
// GET 請求
// app.get('/comments', function(req, res) {
//  var comment = req.query
//  comment.dateTime = '2019-04-02 15:45:00'
//  comments.unshift(comment)
//  res.redirect('/')
// })
// POST 請求
app.post('/post', function(req, res) {
    console.log(req.body)
    var comment = req.body
    comment.dateTime = '2019-04-02 15:45:00'
    comments.unshift(comment)
    res.redirect('/')
})

app.listen(3000, function () {
    console.log('running...')
})