針對前後端徹底分離的情況，要讓前端能在不依賴後端環境的情況下進行開發，我們需要搭建一套可供前端開發者使用的API環境，這樣一套環境不需要完整的後端流程，只需要實現以下兩點即可：
請求路由對映
資料介面代理真實的後端環境
下面介紹的方式是基於使用webpack作為構建工具為前提，當然你也可以根據這個思路去搭建不一樣的mock server
相關檔案：
├── mock mock檔案目錄
├── list.js 列表API
├── script 構建指令碼目錄
├── webpack.dev.js webpack配置
├── utils.js 構建相關工具方法
├── src
├── ...
在上面的檔案結構中，主要講一下下面檔案內容：
script/webpack.dev.js webpack配置
script/utils.js 工具方法
mock/*.js 模擬的後端介面的檔案
定義mock server的API
/* mock/list.js */
module.exports = function(app) {
/* 這裡的 app 是 express 建立的一個應用 */
// get
app.get("/list", function(req, res) {
res.json([1, 2, 3, 4]);
});
// post
app.post("/create", function(req, res) {
res.json({ id: 12 })
// put
app.put("/create/:id", function(req, res) {
// /create/:id => req.params => { id }
res.json("更新成功");
// ...
}
獲取所有定義好API的檔案
/* script/utils.js */
const fs = require("fs");
const path = require("path");
/* 讀取mock下的所有js檔案 */
function findSync(startPath) {
let result = [];
let files = fs.readdirSync(startPath);
files.forEach(val => {
let file = path.join(startPath, val);
let stats = fs.statSync(file);
if(stats.isDirectory()) {
result.push(...findSync(file));
} else if(stats.isFile()) {
result.push(file);
return result;
/* 透過require獲取js檔案中匯出的函式，執行並傳遞app引數 */
const mockServer = (mockFolder, app) => {
findSync(mockFolder).forEach(dir => require(dir)(app));
console.log("Mock: service started successfully ✔");
module.exports = {
mockServer
};
配置webpack的引數，啟動構建工具時一併啟動mock server
/* webpack.dev.js */
/* 主要配置 devServer 引數 */
/* - devServer.before */
/* - devServer.proxy */
const webpack = require("webpack");
const { mockServer } = require("./utils");
module.exports = ({ mode, mock }) => {
mode,
devServer: {
// 配置mock環境
before: app => {
if (mock) {
mockServer(path.resolve(__dirname, "../mock"), app)
},
// 配置聯調環
proxy: mock ? {} : {
"/": "localhost:port"
entry: {
output: {
plugins: [
],
...
然後我們稍微調整下package.json檔案，以達到命令列的方式啟動mock環境
"scripts": {
"mock": "webpack-dev-server --config ./script/webpack.dev.js --env.mock --env.mode development",
"start": "webpack-dev-server --config ./script/webpack.dev.js --env.mode development",
這樣一套mock server的搭建本質上是藉助nodejs來搭建一套流程完整的後端環境，即使我們在無網路的情況下一樣可以進行任務開發，不用受限於網路環境和前後端任務不同步的情況，當然還有一個我認為最大的好處就是我們業務程式碼不會摻雜著各種mock判斷相關的程式碼，聯調發布的時候才來修改成真實環境的程式碼，大概如下：
export function getList() {
// mock
// return Promise.resolve([...])
// 獲取真實資料
return http.get("/list");
針對前後端徹底分離的情況，要讓前端能在不依賴後端環境的情況下進行開發，我們需要搭建一套可供前端開發者使用的API環境，這樣一套環境不需要完整的後端流程，只需要實現以下兩點即可：
請求路由對映
資料介面代理真實的後端環境
下面介紹的方式是基於使用webpack作為構建工具為前提，當然你也可以根據這個思路去搭建不一樣的mock server
相關檔案：
├── mock mock檔案目錄
├── list.js 列表API
├── script 構建指令碼目錄
├── webpack.dev.js webpack配置
├── utils.js 構建相關工具方法
├── src
├── ...
在上面的檔案結構中，主要講一下下面檔案內容：
script/webpack.dev.js webpack配置
script/utils.js 工具方法
mock/*.js 模擬的後端介面的檔案
定義mock server的API
/* mock/list.js */
module.exports = function(app) {
/* 這裡的 app 是 express 建立的一個應用 */
// get
app.get("/list", function(req, res) {
res.json([1, 2, 3, 4]);
});
// post
app.post("/create", function(req, res) {
res.json({ id: 12 })
});
// put
app.put("/create/:id", function(req, res) {
// /create/:id => req.params => { id }
res.json("更新成功");
});
// ...
}
獲取所有定義好API的檔案
/* script/utils.js */
const fs = require("fs");
const path = require("path");
/* 讀取mock下的所有js檔案 */
function findSync(startPath) {
let result = [];
let files = fs.readdirSync(startPath);
files.forEach(val => {
let file = path.join(startPath, val);
let stats = fs.statSync(file);
if(stats.isDirectory()) {
result.push(...findSync(file));
} else if(stats.isFile()) {
result.push(file);
}
});
return result;
}
/* 透過require獲取js檔案中匯出的函式，執行並傳遞app引數 */
const mockServer = (mockFolder, app) => {
findSync(mockFolder).forEach(dir => require(dir)(app));
console.log("Mock: service started successfully ✔");
}
module.exports = {
mockServer
};
配置webpack的引數，啟動構建工具時一併啟動mock server
/* webpack.dev.js */
/* 主要配置 devServer 引數 */
/* - devServer.before */
/* - devServer.proxy */
const path = require("path");
const webpack = require("webpack");
const { mockServer } = require("./utils");
module.exports = ({ mode, mock }) => {
mode,
devServer: {
// 配置mock環境
before: app => {
if (mock) {
mockServer(path.resolve(__dirname, "../mock"), app)
}
},
// 配置聯調環
proxy: mock ? {} : {
"/": "localhost:port"
}
},
entry: {
},
output: {
},
plugins: [
],
...
};
然後我們稍微調整下package.json檔案，以達到命令列的方式啟動mock環境
"scripts": {
"mock": "webpack-dev-server --config ./script/webpack.dev.js --env.mock --env.mode development",
"start": "webpack-dev-server --config ./script/webpack.dev.js --env.mode development",
}
這樣一套mock server的搭建本質上是藉助nodejs來搭建一套流程完整的後端環境，即使我們在無網路的情況下一樣可以進行任務開發，不用受限於網路環境和前後端任務不同步的情況，當然還有一個我認為最大的好處就是我們業務程式碼不會摻雜著各種mock判斷相關的程式碼，聯調發布的時候才來修改成真實環境的程式碼，大概如下：
export function getList() {
// mock
// return Promise.resolve([...])
// 獲取真實資料
return http.get("/list");
}