一、傳統 web 開發方式
這種方式開發和配置起來稍微有點複雜，這裏先來講一下從零開始配置的方式：
1、從零開始配置
// 引入 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 開發，就感覺開發起來很費勁，因爲你得使用一套模板引擎才能讓你的工作看起來輕鬆些。這種開發方式隨着時間的推移我覺得會被慢慢地淘汰掉的。
二、前後端分離的開發方式
在研究完 express 的傳統開發方式後，就把它給拋棄了，咱們還是得回到前後端分離的開發方式中來。
各開發方式還是有點不一樣，
1、完全分離
即：純前端 + 純後端
express 作爲後端服務，提供 api 接口。前端負責 html 頁面的開發，調接口。
所以就會有兩個服務：前端服務和後端服務。
這是目前最主流的開發方式，就不過多介紹了。
2、非完全分離
即：前端依賴後端服務
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 的方式有所認識和有所選擇了呢？如果我文章中還有描述不清楚的地方還請指出，我會繼續優化，先謝過了。