Express 的基本使用，前端進階 Node 的第一課

Node 的應用及知識點

在前端平時的工做中，對後端的瞭解比較少，可是應該都知道 Node 能夠用於寫後端，今天這篇文章來介紹一下 Node 的知名框架 Express 的基本使用，從應用起步，去學習 Node。

先來了解一下 Node 能夠作什麼，再決定需不須要學習，從兩個點出發，首先是應用場景：

• 代理服務（用於解決跨域）
• 中間層（用於數據二次處理、流量攔截）
• Webpack（用於對文件內容進行二次處理）
• 服務端渲染（這個都懂）

其次是能夠學到什麼知識：

• 對後端的基礎入門，成爲一個懂後端的前端；
• 對數據傳輸的進一步瞭解，深刻 HTTP 和 TCP；
• 一些簡易腳本的編寫，學會自動化（偷懶）；

若是對這些優勢感興趣的話，咱們的學習將從下面這個例子開始，學會基礎的 路由選擇 和 響應數據請求，而後咱們將完成一個可供交互的 接口（對，就是工做中先後端聯調的那種接口），最後咱們使用 Node 來解決經典的 跨域問題。

案例展現：路由選擇

咱們在這個案例中畫出四朵小花，而後經過不一樣的路由訪問不一樣狀態的小花。

若是你的電腦尚未安裝 Node，那麼你須要安裝一下 Node。咱們進入一個全新的目錄，使用 npm init 來初始化項目，這一步能夠一直按回車鍵結束，你也能夠本身自定義一些選項。而後咱們使用 npm install express --save 來安裝 express，依賴安裝完成後，咱們在當前文件夾新建一個 app.js，準備開始鍵入咱們的內容。

咱們在 app.js 中寫入如下代碼：

const express = require("express");

const app = express();

app.get("/", (req, res) => {
  res.end("Hello Express");
});

app.listen(8888, () => {
  console.log("server is listening in http://localhost:8888")
})

在運行代碼以前，咱們先來簡單的解析一下代碼：

• const app = express();：新建一個 express 實例，實例包含了 express 的屬性；
• app.get("/", callback)：express 的路由控制，在客戶端訪問該路由時，將會執行傳入的回調函數；
• res.end("Hello Express")：響應一個 Hello Express 字符串；
• app.listen(8888, callback)：進程運行在 8888 端口上，監聽該端口的請求；

全部細節都解析完了，接下來咱們使用 node app.js 來運行咱們的程序：

Tips: 安裝 nodemon 的話（ npm install nodemon -g)，你可使用 nodemon app.js 來運行程序， nodemon 會持續監聽文件的變更而重啓服務，更適合開發階段使用。

控制檯會輸出一條信息 server is listening in http://localhost:8888，此時咱們打開瀏覽器，輸入 http://localhost:8888，就能夠看到咱們的服務響應了一條消息：

咱們是怎麼作到的，是經過 app.get("/", callback) 執行的回調函數返回的結果，那回調函數參數中的 req 和 res 又是什麼呢？本文不做深刻講解，有興趣的童鞋能夠看看這篇 手把手教你用 Node 實現 HTTP 協議 這裏面對 req 和 res 的實現介紹的比較仔細，看完對 HTTP 協議的掌握也能更上一層樓。

即便不瞭解這些細節，咱們也能夠繼續往下講，你只須要把 res.end() 簡單理解爲一個向客戶端發送數據的 API 便可。根據這個特色，咱們就知道咱們的四朵小花要怎麼作了，咱們須要先定義四個路由，而後每一個路由執行不一樣的回調函數，返回對應的小花便可。

Tips： 點擊下載四朵小花源碼，將源碼下載後放置在文件夾的 static 目錄下便可。

在 const app = express() 下加一行代碼，將咱們的 static 目錄變成一個靜態文件目錄，這樣能夠保證咱們的 js 和 css 文件可以被正確加載，加上了 express.static 就提供了文件服務器功能，將你的 html 文件放在 static 目錄中就能夠經過路徑進行訪問了！

//...

// 使用 /static 路徑做爲咱們的靜態文件路由，static 做爲咱們的靜態文件目錄
app.use('/static', express.static('static'));

咱們接下來只須要在訪問路由時，將 html 文件做爲相應返回給客戶端便可，實際代碼以下：

const express = require("express");
const path = require("path");

const app = express();

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

app.get("/", (req, res) => {
  res.end("Hello Express");
});

// 新增了四個路由，用於訪問不一樣狀態的小花
app.get("/happy", (req, res) => {
  // res.SendFile 響應一個本地文件
  // path.join 用於拼接一個路徑
  // __dirname 是當前文件夾路徑，屬於 Node 的一個全局變量
  res.sendFile(path.join(__dirname, "./static/happy.html"))
})

app.get("/crazy", (req, res) => {
  res.sendFile(path.join(__dirname, "./static/crazy.html"))
})

app.get("/sexy", (req, res) => {
  res.sendFile(path.join(__dirname, "./static/sexy.html"))
})

app.get("/cool", (req, res) => {
  res.sendFile(path.join(__dirname, "./static/cool.html"))
})

app.listen(8888, () => {
  console.log("server is listening in http://localhost:8888")
})

重啓一下服務，打開瀏覽器，分別輸入如下四個地址，就能夠看到不一樣狀態的四朵小花了，趕忙試試吧！

• http://localhost:8888/happy
• http://localhost:8888/crazy
• http://localhost:8888/sexy
• http://localhost:8888/cool

案例展現：API 接口

接下來咱們來實現一個 API 接口，它能夠分頁查詢查詢數據，還能夠根據篩選條件返回對應的查詢結果，就是咱們平時和後端聯調的那種「接口」，咱們將在表現上保持一致。

首先咱們使用 npm install axios -s 安裝 axios 用於請求第三方連接，第三方數據將成爲咱們的數據來源。安裝完成後，咱們引入 axios，而且添加一個路由，用於返回接口數據，咱們這麼定義它：

// 新增路由 /product/list
app.get("/product/list", (req, res) => {
  // 使用 axios 獲取 http://dev-api.jt-gmall.com/mall 的數據
  axios.post("http://dev-api.jt-gmall.com/mall", {
    query: `
    { counterGoodsList (page: 1, pageSize: 10) 
      { 
        total 
        page 
        pageSize 
        items {
          _id
          name
          price
        }
      } 
    }`
  }).then(({ data }) => {
    // 等待請求結果的返回
    // 設置響應頭
    res.setHeader("Content-Type", "application/json")

    // 響應一個 JSON 字符串，將獲取到的數據進行 JSON 序列化
    res.end(JSON.stringify(data));
  });
});

咱們使用 Postman 來調試咱們新寫的這個接口看看可不可行，實際結果以下：

很好，咱們已經成功了一半，接下來咱們須要對入參進行篩選，咱們在這裏就實現最簡單的一個分頁功能，咱們但願經過 url query 參數來進行分頁查詢，咱們須要先處理客戶端傳入的 page 相關參數，而後再將這些參數進行對應的處理後告知數據源（第三方或數據庫），最後將響應的數據返回便可，那麼改動後的代碼以下：

app.get("/product/list", (req, res) => {
  const page = req.query.page || 1;
  const pageSize = req.query.pageSize || 10;
  axios.post("http://dev-api.jt-gmall.com/mall", {
    query: `
    { counterGoodsList (page: ${page}, pageSize: ${pageSize}) 
      { 
        total 
        page 
        pageSize 
        items {
          _id
          name
          price
        }
      } 
    }`
  }).then(({ data }) => {
    res.setHeader("Content-Type", "application/json")
    res.end(JSON.stringify(data))
  });
});

而後咱們就能夠經過自定義參數來請求，咱們請求第二頁的數據，而且將每頁數量設置爲 20，響應結果以下：

成功啦！這就是 Node 的中間層功能，而咱們只須要加一行代碼，就能夠解決跨域問題。

案例展現：解決跨域問題

若是你嘗試在 Web 網頁中使用 Ajax 訪問 http://dev-api.jt-gmall.com/mall，那麼你確定會遇到跨域問題，由於這個域名並不容許你使用瀏覽器直接訪問，可是從上一個案例中，咱們能夠經過訪問 http://localhost:8888/product/list 來取得一樣的數據。

跨域是瀏覽器的一個安全策略，而 Node 在訪問其餘連接時是一個非瀏覽器客戶端，並不會遇到跨域的問題。那咱們能夠在瀏覽器使用 Ajax 訪問 http://localhost:8888/product/list 嗎？嘗試事後，你會發現依然會遭遇跨域問題。

其實咱們深究跨域問題的話，跨域就是瀏覽器實現的一個安全策略，它要求服務器響應頭必須包含幾個 CORS 相關的響應頭，來確保請求是被容許的。根據這個原理，咱們只須要在每一個響應的頭部加上這些 CORS 相關信息便可。有個插件能夠幫咱們作這些事情，那就是 cors，咱們運行 npm install cors --save 來安裝它。

咱們加入兩行代碼就能夠解決客戶端的跨域問題了，代碼以下：

const cors = require("cors");

app.use(cors());

結語

咱們使用了三個簡單的案例介紹了 Express 的基本使用，算是一個入門吧。若是但願深刻學習的話，最好是參照 Express 和 Node 的官方文檔，跟着案例一行一行敲下來最好。

若是有什麼問題的話，歡迎留言喲！

會跳舞的小花 源碼地址

原文地址，歡迎收藏