express快速入門——實現一個服務器

express是基於Node.js平臺的，web開發框架。他對Node.js搭建服務器的經常使用操做封裝了一套簡易的API，使咱們能夠快速的搭建出一個服務器。同時express引入了中間件的概念，可讓咱們更好的組織代碼。

推薦閱讀路線

• Node.js基礎知識——經常使用API：有耐心的話最好先過一遍基礎知識，以爲基礎知識太枯燥能夠從Node.js快速入門看起，遇到不會的API再回來查看基礎知識。
• Node.js快速入門——實現一個服務器：Node.js手把手入門教程。
• express快速入門——實現一個服務器：Node.js的一個框架，能夠加快咱們的開發速度。

前言

express實現一臺服務器至少須要實現如下功能：

• 響應靜態資源請求
• 根據不一樣的請求url返回不一樣的內容
• 得到前端發送的get請求的參數
• 得到前端發送的post請求的參數

準備工做

建立一個static文件夾用來存放靜態資源，server.js用於寫服務器代碼。

// express是一個第三方包，須要先下載再引用
在終端中輸入npm i express --save進行安裝
複製代碼

沒有報錯則安裝成功。

1 建立一個服務器

// 使用express建立一個服務器十分簡單
// 引入express
const express = require('express')

const app = express()
// 第一個參數表示路由爲/home時執行第二個參數的方法(如localhost:3000/home則執行，localhost:3000/index則不執行)
app.use('/home', (req, res) => {
  res.send('home')
})
// 第一個參數直接傳入一個函數時，表示任何路由均可以執行該函數
app.use((req, res) => {
  res.send('any')
})
// 監聽3000端口並在運行成功後向控制檯輸入服務器啓動成功！
app.listen(3000, () => {
  console.log('服務器啓動成功！')
})
複製代碼

// 在終端經過 node + 文件名運行js/ts文件
複製代碼

在瀏覽器中訪問localhost:3000/home便可看到返回的home，訪問其餘路徑時，返回的都是any。

2 中間件

express中的中間件其實就是一個函數，它是響應客戶端請求過程當中的一個環節。中間件有三個參數，第一個參數是req(request)請求對象，第二個參數是res(response)響應對象，第三個參數是next函數，調用時會跳轉到下一個中間件。

下面咱們定義三個中間件，第一個中間件記錄用戶訪問服務器的時間，第二個中間件記錄用戶訪問的url，第三個中間件調用send方法向客戶端發回響應信息。

const app = express()

app.use('/home', (req, res, next) => {
  console.log(`在控制檯中記錄用戶訪問服務器的時間：${new Date()}`)
  next()
})
app.use('/home', (req, res, next) => {
  console.log(`在控制檯中記錄用戶訪問的url：${req.baseUrl}`)
  next()
})
app.use('/home', (req, res) => {
  res.send('home')
})

app.listen(3000, () => {
  console.log('服務器啓動成功！')
})
複製代碼

在瀏覽器中訪問localhost:3000/home，而後查看終端

上面的代碼能夠表示爲：

3 實現完整的服務器功能

一個完整的服務器須要實現前言中提到的全部功能，接下來咱們來一一實現。

3.1 響應靜態資源請求

// express提供了一個內置的中間件爲咱們處理靜態資源的請求
// 接收一個字符串參數，表示做爲靜態資源的目錄，static目錄中的全部靜態資源均可以被訪問了
const static = express.static('static')
app.use(static)
複製代碼

// 若是不想暴露文件的存儲位置，也能夠增長一個參數指定虛擬路徑，此時訪問資源須要攜帶/a/b/c前綴
const static = express.static('static')
app.use('/a/b/c',static)
複製代碼

直接訪問靜態資源的時候再也不能拿到靜態資源了。

路由須要加上/a/b/c的前綴才能正確拿到文件

3.2 根據不一樣的請求url返回不一樣的內容

根據不一樣的請求url放回不一樣的內容主要依靠app.use()方法的第一個參數，第一個參數與路由匹配時則指定第二個參數傳入的函中間件數。

// 請求url爲localhost:3000/login或localhost:3000/login?xxx的時候都會使第二個參數傳入的中間件執行
app.use('/login', (req, res) => {
  res.send('login')
})
複製代碼

3.3 得到前端發送的get請求的參數

首先咱們在index.html中建立一個表單，用於提交登錄信息，信息提交到/login，方式爲GET

<form action='/login' method='GET'>
    <label>
        用戶名：
        <input type='text' name='username' placeholder='請輸入用戶名'/>
    </label>
    <br>
    <label>
        密碼：
        <input type="password" name='password' placeholder='請輸入密碼' />
    </label>
    <br>
    <input type='submit' value='提交'>
</form>
複製代碼

而後對匹配/login的規則進行修改

app.get()方法只匹配請求方式爲GET的請求，而app.use()方法則匹配任意請求方式的請求，除此以外還有app.post()方法只匹配請求方式爲POST的請求，app.put()方法只匹配請求方式爲put0的請求，app.delete()方法只匹配請求方式爲DELETE的請求。

app.get('/login', (req, res) => {
  // req.query中存放get請求的參數
  console.log(req.query)
   // 僞裝讀取了數據庫，用戶名爲admin，密碼爲123則登錄成功
  if(req.query.username === 'admin' && req.query.password === '123') {
    res.send('登陸成功！')
  } else {
    res.send('您的帳號或密碼有誤，請重試')
  }
})
複製代碼

在瀏覽器中打開index.html並輸入帳號與密碼

3.4 得到前端發送的post請求的參數

將index.html中的表格提交方式改成POST請求

<form action='/login' method='POST'>
複製代碼

接下來解析POST請求參數須要用到body-parser中間件

// 引入body-parser模塊
const bodyParser = require('body-parser')
// 構造bodyParser中間件
const urlencodedParser = bodyParser.urlencoded({
  extended: false
})
// 使用中間件
app.use(urlencodedParser)
複製代碼

而後繼續對匹配/login的規則進行修改

app.post('/login', (req, res) => {
  // req.body中存放post請求的參數
  console.log(req.body)
   // 僞裝讀取了數據庫，用戶名爲admin，密碼爲123則登錄成功
  if(req.body.username === 'admin' && req.body.password === '123') {
    res.send('登陸成功！')
  } else {
    res.send('您的帳號或密碼有誤，請重試')
  }
})
複製代碼

再次在index.html中登陸

此時的參數存放在http的請求體中

4 交流

若是這篇文章幫到你了，以爲不錯的話來點個Star吧。 github.com/lizijie123