在前端開發中，如果後端介面還沒有提供，前端拿不到資料，可能就沒法繼續寫一些互動行為的**。這一問題可通過json-server來很好地解決。本文主要講如何將json-server和webpack進行整合，基於vue-webpack-boilerplate。
json-server官方位址
1.可全域性安裝json-server，也可針對專案安裝。這裡是全域性安裝json-server。
npm install json-server -g
2.安裝完成後，可以在任一目錄下建立乙個 ***.json 檔案。這裡是在src的同級目錄新建資料夾mock，在該資料夾內新增檔案db.json，檔案內容格式如下：
,
],blogs: [
, ]}
config/index.js檔案內增加proxytable（即圖中紅線框出來的部分）。圖中將所有以/api開頭的請求委託給http://localhost:3000，即請求/api/activitys/1相當於是請求http://localhost:3000/activitys/1。該引數配置詳解見這裡
4.在package.json的scripts內新增兩行命令。
"mock": "json-server mock/db.json "
"mockdev": "npm run mock | npm run dev"
npm run mock開啟json-server服務。成功開啟見下圖：
也可使用npm run mockdev直接執行mock和dev命令。
5.在其他頁面可通過/api/***/獲取資料。
若是要模擬的介面非常多，都往db.json裡面新增的話，會導致這個檔案變得非常龐大，難以維護。而且其他前端人員也會修改到這個檔案，每次合併**都要考慮衝突問題。
每個人各自建立自己模組的資料檔案，最終通過**將多個資料檔案合併為乙個檔案。
1.在mock/下新建server.js，該檔案用於將各資料檔案內的資料合併後統一輸出。內容如下：
const fs = require('fs')
const path = require('path')
const mock_dir = path.resolve(__dirname, 'test')
const walk = dir => else if (path.extname(file) === '.js')
})return results
}const files = walk(mock_dir)
let db = {}
files.foreach(function (file) )
module.exports = function ()
mock/下新增test資料夾，各前端人員可自行在test/下新增資料檔案(xx.js)和資料夾。資料檔案格式如下:
module.exports = ,
],works: [,]
}
--m mock/post-to-get.js表示新增執行中介軟體。
"mock": "json-server mock/server.js --m mock/post-to-get.js",module.exports = (req, res, next) =>用json server模擬後端資料
npm install g json serverjson server v在根目錄下新建mock資料夾，在mock資料夾裡新建data.json 我的json資料如下圖所示 在scripts中新增mock配置，並修改start的配置，讓專案和json server同時啟動 注意 mock的路徑不能...
json server使用簡介
json server是一款基於node.js的伺服器，為前端開發人員可以提供乙個高 的restful後台服務 資料原型 最讓人歡欣的是，整個服務的搭建過程不需要編寫任何 最快只需要1分鐘。本文以json server為主線，講解一下json server的搭建過程。該伺服器是基於node.js的，...
json server 模擬後端介面請求
cnpm install d json server 0.16.2 2 使用 1 建立.json檔案新增屬性 localhost 3000 鍵名 localhost 3000 鍵名 id值返回對應的字段 comments profile 增加資料 使用post方式,localhost 3000 鍵名...