本篇文章為大家展示了使用mock.js怎么模擬前后臺(tái)交互,內(nèi)容簡明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),柳河企業(yè)網(wǎng)站建設(shè),柳河品牌網(wǎng)站建設(shè),網(wǎng)站定制,柳河網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,柳河網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶成長自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
1、首先安裝
# 在項(xiàng)目中安裝 npm install mockjs
2、在項(xiàng)目中使用
在項(xiàng)目中src文件夾下 新建mock文件夾 新建mock.js 和index.js文件 這里面用來生成基礎(chǔ)的接口
項(xiàng)目結(jié)構(gòu)截圖:
數(shù)據(jù)
mock.js 文件
//-----------------mock.js------------------- // 引入mockjs import Mock from 'mockjs' // 創(chuàng)建模擬數(shù)據(jù) 具體的數(shù)據(jù)生成方法 請(qǐng)查看文檔http://mockjs.com/examples.html function creatPostMock () { const list = [] const mockdata = { id: '@increment', // 數(shù)據(jù)定義 @increment 'object|1': { '310000': '上海市', '320000': '江蘇省', '330000': '浙江省', '340000': '安徽省' }, name: '@pick(["a", "e", "i", "o", "u"])', m1: '@integer(60, 100)', m2: '@integer(60, 100)', m3: '@integer(60, 100)', m4: '@integer(60, 100)', m5: '@integer(60, 100)', m6: '@integer(60, 100)', m7: '@integer(60, 100)', m8: '@integer(60, 100)', m9: '@integer(60, 100)' } for (var i = 0; i < 10; i++) { const a = Mock.mock(mockdata) list.push(a) } const data = { data: {}, size: 1, pagesize: 10 } data.data = list return data } // 創(chuàng)建模擬數(shù)據(jù) function creatGetMock () { const getMock = Mock.mock({ 'list|1-10': [{ 'id|+1': 1 }] }) return getMock } // 將模擬好的數(shù)據(jù)輸出出去; export {creatPostMock, creatGetMock}
index.js 文件
// ------------index.js--------------- // 引入mockjs import Mock from 'mockjs' // 引入生成的模擬數(shù)據(jù) import {creatPostMock, creatGetMock} from './mock' // 設(shè)置請(qǐng)求延時(shí)時(shí)間 Mock.setup({ // timeout: 2000 方式一 直接設(shè)置值 timeout: '2000 - 5000' // 方式二 設(shè)置區(qū)間 注意這個(gè)是一個(gè)字符串形式 }) // 設(shè)置攔截的接口 格式請(qǐng)看文檔 https://github.com/nuysoft/Mock/wiki/Mock.mock() // 注意: 這里攔截的地址 最好使用正則匹配 如果直接使用字符串接口 就有可能攔截不到帶參數(shù)的請(qǐng)求 報(bào)錯(cuò)404 Mock.mock(/\/api\/mock(|\?\S*)$/, 'post', creatPostMock) // Mock.mock('/api/mock', 'get', creatGetMock) // 方式一 Mock.mock(/\/api\/mock(|\?\S*)$/, 'get', creatGetMock) // 方式二
然后在main.js 文件里面引入我們寫好的mock/index.js文件 用于攔截請(qǐng)求
//------------------main.js------------------- // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import axios from 'axios' // 引入axios import('./mock/index') // 引入設(shè)置好基礎(chǔ)的mock, 用于攔截請(qǐng)求 // 設(shè)置為 false 以阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。 Vue.config.productionTip = false // 在vue項(xiàng)目中 axios中無法直接使用vue.use() 所以將axios直接添加到Vue的原型上 Vue.prototype.axios = axios /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
接下來我們就可以定義api了 在api文件下 新建一個(gè)自定義接口文件 如questMock.js 里面是我們需要請(qǐng)求數(shù)據(jù)的模擬接口;
//-------------questMock.js---------------- // 引入axios import axios from 'axios' // 使用 this.axios = axios // 封裝的post function postMockList (data) { return this.axios.post('/api/mock', { data }) } // 封裝的get function getMockList (data) { return this.axios.get('/api/mock', { data }) } // 輸出 export { postMockList, getMockList }
最后在組件中使用
// ----------------------HelloWorld--------------------- <template> <div class="hello"> <div class="mask" :class="{boxNone:isMask }"></div> <div> <p>這是獲取mock 數(shù)據(jù)</p> <button @click="getMockData">get模擬數(shù)據(jù)</button> <button @click="postMockData">post模擬數(shù)據(jù)</button> </div> </div> </template> <script> import { postMockList, getMockList } from '../api/questMock.js' export default { name: 'HelloWorld', data () { return { msg: '模擬前后臺(tái)交互', getMock: getMockList, postMock: postMockList, isMask: true } }, methods: { getMockData () { this.isMask = false this.getMock({ params: { name: '隔壁老王' } }).then(res => { this.isMask = true console.log('GET模擬數(shù)據(jù)', res) }).catch(e => { console.log('錯(cuò)誤', e) }) }, postMockData () { this.isMask = false this.postMock({ name: 'xiaoming', age: '5' }).then(res => { this.isMask = true console.log('POST模擬數(shù)據(jù)', res) }).catch(e => { console.log('錯(cuò)誤', e) }) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h2, h3 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: green; opacity: 0.5; } .mask.boxNone { display: none; } </style>
遇到的問題
1、在設(shè)置模擬接口時(shí) 使用get請(qǐng)求 發(fā)現(xiàn)報(bào)錯(cuò)404 后來查資料發(fā)現(xiàn)是因?yàn)橹苯邮褂米址涌跁?huì)導(dǎo)致mockjs 攔截不到地址 解決辦法就是使用 正則去匹配請(qǐng)求接口
2、如何設(shè)置請(qǐng)求延時(shí) 由于mockjs 是在本地模擬數(shù)據(jù)所以并未發(fā)起真正的請(qǐng)求,無法看到請(qǐng)求的加載效果,解決辦法就是使用Mock.setup({timeout: 加載時(shí)間}) 來設(shè)置每次的模擬請(qǐng)求時(shí)間
也可參考以下:
服務(wù)器端數(shù)據(jù)模擬,支持請(qǐng)求轉(zhuǎn)發(fā)、返回JSON靜態(tài)數(shù)據(jù)、返回JS可變數(shù)據(jù) .
上述內(nèi)容就是使用mock.js怎么模擬前后臺(tái)交互,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前文章:使用mock.js怎么模擬前后臺(tái)交互
URL地址:http://muchs.cn/article18/ghegdp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、企業(yè)網(wǎng)站制作、虛擬主機(jī)、建站公司、定制網(wǎng)站、網(wǎng)站收錄
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)