express 開發 web 的方式分享

1、傳統 web 開發方式

這種方式開發和配置起來稍微有點複雜，這裏先來說一下從零開始配置的方式：

一、從零開始配置

// 引入 express
const express = require('express');
const app = express();
// 定義一個路由
app.get('/', (req, res) => {
  // 爲/路由發送一個響應消息
  res.send('Hello World!');
})
// 開啓 http 服務，監聽 8080
app.listen(8080);

這是官方的標準示例，從零起步看起來很是簡單，但也是最無用的，由於你沒法用這些代碼作什麼事情。咱們還差一個東西，就是 HTML。這個怎麼來呢，有兩種方法。

第一種：

res.send('<h1>我是 h1 標籤</h1>');

由於 html 也是字符串，因此咱們能夠在響應消息中寫 html，這樣也能開發出一個網站來。但咱們不會這麼作，由於太不方便開發了，因此咱們有了第二種方法：使用模板引擎。

模板引擎是一種把你寫的相似於 html 的代碼轉換成標準 html 代碼的工具。

模板引擎有不少種類，目的同樣，寫法不同，惟一不變的就是：每一個做者都認爲本身開發的模板引擎是最好的。做爲吃瓜羣衆，我不懂，也不敢問。

你也不用處處找了，這個連接是 14 個 js 模板引擎的介紹：
js 模板引擎介紹

要使用模板引擎也很簡單，有兩種方法，一種是使用 ExpressJs 官方提供的一個框架生成工具：express-generator。

安裝express-generator

$ yarn global add express-generator
// 或
$ npm i -g express-generator

使用

# 使用默認模板
$ express my-app
# 經過幫助命令查看支持哪些模板
$ express -h
# 使用 pug 模板
$ express -v pug my-app

執行完畢後，一個包含模板引擎配置的框架就生成好了。

另外一種就是express-generator工具沒有集成進去的模板引擎，得看着手冊本身配。
好比我想要使用 React 模板，只能看着文檔本身配了。

先後端分離開發習慣的改變

若是你作了很長時間的先後端分離開發，那麼退回到原始的 web 開發可能會有點不適應，舉個例子：

// pug 模板語法
button(class='div-class', onclick='play()') 按鈕

若是你但願 onclick 裏面的 play 函數要能執行的話，必須在 public 目錄下有一個能在瀏覽器下運行的 js 文件，而後再引入進來：

script(src='/javascripts/index.js')

由於模板引擎只是幫你把模板轉換爲 html 字符串，發送給了瀏覽器。

傳統開發方式的總結

自從接觸了先後端分離的開發方式，再來看這種傳統的 web 開發，就感受開發起來很費勁，由於你得使用一套模板引擎才能讓你的工做看起來輕鬆些。這種開發方式隨着時間的推移我以爲會被慢慢地淘汰掉的。

2、先後端分離的開發方式

在研究完 express 的傳統開發方式後，就把它給拋棄了，我們仍是得回到先後端分離的開發方式中來。

各開發方式仍是有點不同，

一、徹底分離

即：純前端 + 純後端

express 做爲後端服務，提供 api 接口。前端負責 html 頁面的開發，調接口。

因此就會有兩個服務：前端服務和後端服務。
這是目前最主流的開發方式，就不過多介紹了。

二、非徹底分離

即：前端依賴後端服務

express 做爲後端服務的同時也做爲靜態服務負責渲染前端頁面。

這種方式我以爲比較有意思。

前端頁面開發完後，打包生成前端資源（html,js,css等），放到後端 express 的靜態目錄下，假設是 public 目錄：

public/
  js/
  css/
  index.html
app.js

在 app.js 中：

const express = require('express');
const app = express();
// 使用 express.static 中間件來處理靜態資源
app.use(express.static(path.join(__dirname, 'public')));
app.listen(8080);

這樣就能夠了，若是你前端頁面是採用 React，Vue 或 Angular 等開發的，那麼你都無需設置任何路由。這種方式有點像 nginx 靜態服務。

若是須要 api，那麼就須要設置路由了。假設咱們把/api/開頭的路徑都當作是接口服務：

// 使用專門的 api 路由來處理 api 請求
app.use('/api/', require('./routes/api.js'));

api.js 文件：

var express = require('express');
var router = express.Router();

// /api/user-list 接口
router.post('/user-list', function(req, res, next) {
  // 接口邏輯
  res.send('user');
});

module.exports = router;

啓動前端服務時，就能夠請求你自定義的接口了，這是一個典型的前端依賴後端服務的開發方式。

接下來咱們擴展一下思路

在開發前端頁面的時候，通常會開啓一個前端開發服務，好比使用 webpack-dev-server。那麼在開啓這個服務的時候，我還想使用一些 mock 庫來模擬接口來生成一些模擬數據要怎麼辦呢？

是有辦法的。

由於 webpack-dev-server 也使用 express，因此就可使用中間件來作這件事啦，仍是有兩種方式，第一種比較簡單，適合接口很少的狀況：

// 使用 app.post
devServer: {
  before: function(app, server) {
    // 對 /api/mock 的請求返回自定義數據
    app.post('/api/mock', function(req, res) {
      res.json({ custom: 'response' });
    });
  }
}

第二種呢稍微高級點，適合接口比較多的狀況：

const mockMiddleware = require('./mock-middleware');

// 使用 app.use
devServer: {
  before: function(app, server) {
    // 攔截全部 /api 開頭的請求，轉發到 mockMiddleware 中進一步處理
    app.use('/api', mockMiddleware);
  }
}

// mock-middleware.js
const express = require('express');
const router = express.Router();

// 響應 /api/mock 請求
router.post('/mock', function(req, res, next) {
  res.json({
    data: {
      name: 123,
      sex: 1,
    }
  })
})

module.exports = router;

這樣開啓前端服務的同時，你也能夠請求 mock 數據了。

我們還能夠再作的更高大上一點，好比咱們只須要寫 mock 配置，其他的事情則由別的工具來作：

// mock 配置文件
module.exports = {
  'POST /api/user-list': [
    {
      name: '張三',
      age: 13,
    },
    {
      name: '李四',
      age: 12,
    }
  ],
  'POST /api/user/123': {
    // ...
  }
}

咱們只須要在一個專門用來存放 mock 的地方配置好 mock 數據，其它工具對這種數據先預解析一遍，最後會生成 app.post 之類的配置，目前網上就有這種工具，好比：功能強大的UmiJS

看完以上介紹，你是否已經對 express 開發 web 的方式有所認識和有所選擇了呢？若是我文章中還有描述不清楚的地方還請指出，我會繼續優化，先謝過了。