前言前端
咱們都知道在實際的開發階段,後端接口開發是和前端開發同步進行,甚至遲於前端的進度,這就直就致使前端須要等待後端接口的時間。node
這種狀況就嚴重致使前端開發緩慢,那這時候前端的開發人員只能寫靜態模擬數據。webpack
這種狀況是按照既定的數據格式(接口文檔等),本身提供靜態的JSON數據,用相關工具作接口來獲取這些數據。該方法僅僅使用get請求。侷限性仍是很大的。git
這種狀況是用一個 web 框架,按照既定的接口和數據結構的要求(接口文檔),本身模擬後端接口的功能,讓前端項目能順利跑起來。這樣就能夠很方便的模擬前端開發的業務邏輯。github
npm install --save express
在mock文件加下新建server.jsweb
代碼以下:express
var express = require("express") var app = express(); var bodyParser = require('body-parser'); app.use(bodyParser.json()); //body-parser 解析json格式數據 app.use(bodyParser.urlencoded({ //此項必須在 bodyParser.json 下面,爲參數編碼 extended: true })); var router = express.Router(); app.get('/', function(req, res) { res.send('hello world'); }); router.use("/test",require('./test')); app.use("/api",router) app.listen(3001)
那麼怎麼啓動這個服務了?有兩種方式npm
第一種,在當前項目目錄執行json
node mock/server.js
第二種,由於咱們使用npm管理包,在package.json的scripts加入後端
"mock": "node ./mock/server.js"
只須要執行 npm run mock
啓動服務就能夠了哦~~
這就實現了一個簡單的express服務,在瀏覽器輸入http://localhost:3001 就能夠看到頁面加載出 hello world
接下來就是引入mockJs ,首先安裝mockjs
npm install --save-dev mockjs
咱們在mock的目錄下面新建test.js加入代碼,mock的語法這裏不說了。請看mock文檔的講述,有不少知識點。
var Mock = require("mockjs") var express = require("express") var router = express.Router(); router.use("/profile",function (req,res) { console.log(req.body); //調用mock方法模擬數據 var data = Mock.mock({ // 屬性 list 的值是一個數組,其中含有 1 到 10 個元素 'list|1-10': [{ // 屬性 id 是一個自增數,起始值爲 1,每次增 1 'id|+1': 1 }] } ); return res.json(data); }) module.exports = router;
在瀏覽器的輸入http://localhost:3001/api/test/profile便可看到輸出的JSON數據列表,
若是訪問的地址爲:http://localhost:3001/api/profile 則只須要把server.js中的
router.use("/test",require('./test')); 修改成:router.use("/",require('./test'));
在config/webpackDevServer.config.js中添加以下代碼:
proxy: { '/api/': { target: 'http://localhost:3001', secure: false } },
運行時首先 npm run mock ,開啓mock服務,而後運行項目npm run start,便可獲取到mock數據