工作中,有時候前端的很多任務作需要後端的支援,但是可能後端的介面還沒有開發完,或者有些時候在聯調階段,修復某個 bug 的時候,環境掛了。。。 那麼這個時候,我們的很多任務作無法順利的進行下去。於是萌生了搭建本地伺服器的想法。首先粗略的說一下它的好處jsonserver+gulp 實現( 缺點:大部分需求都能滿足,但是對於需要動態解析引數的介面,支援的不夠完美 )
node+express 實現 ( 可實現幾乎所有介面的情況,但是配置起來比第二種麻煩 )
官網提供詳細的文件和說明,上手比較快,但是對於保密性比較強的公司,建議捨棄這種方式。
技術選型專案目錄預覽
介紹api 為資料資料夾,配置不同的專案所需要的不同介面以及其返回值,在 index中進行繼承 然後暴露給 mock/db 下 最後暴露給 server。(這個可以自行更改,只要最後暴露出去就可以 api/project.projectone
api/index (支援 es5 和 es6共存寫法)let projectone = , , ]
},getinfo: ,
'links': [,,]
}}
}}module.exports =
複製**
mock 資料夾 集中 mock 平台,我們想要通過 mock 平台生成的介面放在這個資料夾。 mock/db.jsconst test = require('./test/test.js')
import projectone from
'./project/projectone'
module.exports =
複製**
router資料夾 大致結構和 api 資料夾相似,暴露路由(支援 es6 和 es5 的寫法共存)// var mock = require('mockjs')
import mock from
'mockjs'
var api = require('../api')
module.exports = ]
}),addcomment: mock.mock(]
}),// post/1 和post/2 返回不同的內容
'posts': [,
],'comments': ,
'profile':
}複製**
router/project/projectoneimport test from './test/test'
const projectone = require('./project/projectone')
module.exports =
複製**
gulpfile 提供監聽檔案和介面熱更新的功能module.exports =
複製**
main.js 中 提供babel 配置 es6 的寫法
server.js 中 啟動埠,配置路由和介面返回值。
執行預覽
如何執行?
localmock專案位址
git clone
cdlocalmock
npm i
npm dev | npm run start | npm run mock (都可以啟動)
npm run gulp ( 啟動並且可以熱更新 )
複製**
在查詢了關於jsonserver 的 router 配置方式以後,總感覺對於動態執行引數的介面支援的不太好,於是就有了 nodemock(什麼分頁,什麼查詢等,處理起來就是一把梭! 複製貼上 就是剛!)專案目錄
api/projectone
controller/project.jsimport mock from
'mockjs'
let projectone = ,
getshe: mock.mock(]
}),liyitong: mock.mock(]
})}export
default projectone
複製**
import mock from
'mockjs'
export
function
test(req, res) ]
})res.json()
}export
function
geturl(req, res) = req.query
res.json(`,
})}export
function
posturl(req, res) `,
age: 11,
message: req.originalurl,
})}複製**
執行預覽
這個專案,沒有預覽所有介面的功能。感興趣的讀者可以自己新增(當訪問指定鏈結時,獲取router 中的資訊 進行展示出來,解決方法不唯一,可以查文件 自己新增)。
專案啟動
專案位址
git clone
cd node-mock
npm i
npm run dev
複製**
第 06 課 搭建本地 Mock 服務
前後端分離的協作模式下,前後端之間的資料傳輸都是基於 http 介面實現。顯然前端的開發是依賴後端介面實現的。在講求快速迭代的網際網路公司這種序列的等待肯定是不會出現的。前後端約定好介面的出參和入參之後,前端資料模擬 mock 就很有必要了。前端基於介面文件自己模擬乙份假資料作為前端的資料來源。後端...
vue最新的本地mock資料服務搭建教程
在webpack.dev.conf.js下找到 const portfinder require portfinder 增加以下 const express require express 請求server const express 載入本地資料檔案 varrequire mock goods.j...
node搭建mock服務(利用express)
新建資料夾mockserve,新建server.js,2.將mock的資料 data.json 放入mockserver檔案中,3.npm init y,安裝express包 npm i express 4.在server.js中搭建服務,npm start 啟動服務 引入express const...