這篇文章將為大家詳細(xì)講解有關(guān)MockApi怎么在VueCli3.0中使用,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供清河網(wǎng)站建設(shè)、清河做網(wǎng)站、清河網(wǎng)站設(shè)計(jì)、清河網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、清河企業(yè)網(wǎng)站模板建站服務(wù),十載清河做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
Mock的概念
1:Mock的描述
Mock接口其實(shí)就是模擬真實(shí)接口提供一個(gè)在開發(fā)環(huán)境的假數(shù)據(jù),甚至是真實(shí)數(shù)據(jù),在開發(fā)時(shí),經(jīng)常出現(xiàn)
接口內(nèi)容不能夠及時(shí)的跟進(jìn),導(dǎo)致開發(fā)過程中添加一些額外的工作量。接下來的例子全部圍繞著Vue為主體介紹
前后端提前確定好通信的JSON格式之后,我們在不依賴后端進(jìn)度的同時(shí),能提供一套好的開發(fā)體驗(yàn)。
2:Mock能解決的問題
減少額外工作,在沒有Mock接口的時(shí)候我們模擬數(shù)據(jù)的方式很煩躁,比如list列表,需要在data中聲明list,去調(diào)試內(nèi)容,或者引入一個(gè)mock文件,這樣做導(dǎo)致在聯(lián)調(diào)調(diào)用接口的部分代碼沒有寫,聯(lián)調(diào)成功的時(shí)候要刪除很多無用代碼 ---> 通過Mock只需在聯(lián)調(diào)的時(shí)候把Mock接口的地址換成真實(shí)地址即可
import { mockList2 } from 'mock/list.js'; export default { data () { return { mockList: [ { "name": 'tx', "age": 12 } ], mockList2 } } }
如果采用上述的方式去模擬數(shù)據(jù),缺少真正缺口所具備的狀態(tài),比如刪除接口,有成功和失敗的區(qū)分,這個(gè)模擬就很惡心了 ----> 通過Mock,可以直接通過實(shí)在的query或者其他的操作來達(dá)到同樣的目的
3:Mock的幾種方式以及對應(yīng)的優(yōu)缺點(diǎn)
Mock的方式 | 優(yōu)缺點(diǎn) |
---|---|
本地Mock接口 | 優(yōu)點(diǎn):可以更加細(xì)粒度的控制mock的內(nèi)容。缺點(diǎn):需要增加本地的代碼量,以及需要配置webapck |
Mock.js實(shí)現(xiàn)ajax攔截 | 優(yōu)點(diǎn):數(shù)據(jù)通過mock.js會更豐富。缺點(diǎn):增加一些本地配置,攔截ajax |
后端Controller的靜態(tài)JSON | 優(yōu)點(diǎn):接口聯(lián)調(diào)不需要修改任何東西。缺點(diǎn):修改Mock內(nèi)容溝通成本高,跟后端扯皮 |
利用FastMock去模擬Mock | 優(yōu)點(diǎn):可控內(nèi)容以及實(shí)現(xiàn)動態(tài)Restful api。缺點(diǎn):如果項(xiàng)目包裝axios等請求庫之后需要針對接口轉(zhuǎn)發(fā)做不同處理 |
4:本地Mock接口
該篇文章針對本地Mock接口進(jìn)行操作,其他的方式會簡要介紹并給出對應(yīng)的鏈接,如果有需要,自行去查閱。
三:本地Mock周邊知識
本地Mock的思想就是利用Node + express完成Restful Api。結(jié)合webpack配置項(xiàng)devServer同時(shí)利用Vue-cli3.0的暴露的配置利用本地express完成mock接口的添加
1、Node+Express的相關(guān)知識點(diǎn),用node+express寫過Restful Api的就應(yīng)該知道接下來Mock怎么處理了,這里我先簡要介紹一下我們需要用到的技術(shù)吧(Express的路由以及node的fs模塊)
Express路由相關(guān),具體的見文檔,這里不區(qū)分請求方法,直接app.use
const express = require('express'); const app = express(); // 這樣一個(gè)簡單的路由就完成了,請求到/ajax-get-info的請求就能拿到對應(yīng)的JSON數(shù)據(jù) app.use('/ajax-get-info', (req, res) => { res.send({ "success": true, "code": 0, "data": {} }) });
針對不同的請求生成動態(tài)的內(nèi)容,我們可以通過req.query和req.params等來生成動態(tài)內(nèi)容,在express中,我們傳入的body內(nèi)容,在req.body中并獲取不到,需要添加中間件body-parser,需要注意的是這個(gè)中間件不能在app全局路由使用,不然會影響到代碼到測服的接口,利用http-proxy-middleware轉(zhuǎn)發(fā)的接口,所以我們需要單獨(dú)的設(shè)置一個(gè)Mock路由,針對路由級別的使用中間件,代碼如下
const bodyParser = require('body-parser'); const express = require('express'); const mockRouter = express.Router(); // express middleware bodyParser for mock server // for parsing application/json mockRouter.use(bodyParser.json()); // for parsing application/x-www-form-urlencoded mockRouter.use(bodyParser.urlencoded({ extended: true })); // Api prefix named /mock app.use('/mock', mockRouter); // now you can set mock api use mockRouter mockRouter.use('/ajax-get-info', (req, res) => { // use req.body to get request body info console.log(req.body); res.send({ "success": true, "code": 0, "data": { // return dynamic JSON name: req.body.name } }) });
現(xiàn)在Mock級別的路由已經(jīng)有了,接下來我們就要準(zhǔn)備對應(yīng)的路由和響應(yīng)的callback了,添加一個(gè)mock文件夾,專門放置一些mock接口的文件,利用node的fs模塊引入所有需要mock的接口即可
const path = require('path'); const mockDir = path.resolve(__dirname, '../mock'); fs.readdirSync(mockDir).forEach(file => { const mock = require(path.resolve(mockDir, file)); // mockRouter就是上面Mock路由即可 mockRouter.use(mock.api, mock.response); });
2、Vue-cli3.x的基本知識,相對比于Vue-cli2.x的版本,把webpack的配置封裝出來,拋出一些外在接口去修改webpack配置,我們需要了解的是針對開發(fā)模式express的使用(內(nèi)部使用webpack-dev-serve),Vue-cli3.0需要的是在適當(dāng)?shù)臅r(shí)機(jī)處理開發(fā)模式的express實(shí)例,來達(dá)到Mock的目的
module.exports = { dev: { before: (app) => { // app就是底層的express實(shí)例,上面針對express實(shí)例的操作,全部換成app即可 } } }
3、至于mock的文件下面的js文件就是我們需要掛載到express的mock接口的信息,下面給出一個(gè)實(shí)例,其他仿照即可,一個(gè)js文件代表一個(gè)mock接口
// 注意,由于是針對子路由級別的,前端調(diào)用的url為/mock/get-info module.exports = { api: '/get-info', response: (req, res) => { // 由于添加了body-parser中間件,所以可以解析傳入的body,這里就可以用來動態(tài)的生成JSON const flag = req.body.flag; console.log(req.body); res.send( { success: flag, code: 0, data: [], message: '獲取信息成功', }, ); }, };
四:結(jié)合上面的幾點(diǎn)整合處理
關(guān)于MockApi怎么在VueCli3.0中使用就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
網(wǎng)站名稱:MockApi怎么在VueCli3.0中使用
網(wǎng)頁URL:http://chinadenli.net/article28/ihjhcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、網(wǎng)站設(shè)計(jì)公司、建站公司、網(wǎng)站制作、網(wǎng)站策劃、定制網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)