使用背景: vue项目 axios 使用详情: 1、首先安装
1 2 # 在项目中安装 npm install mockjs
2、在项目中使用 在项目中src文件夹下 新建mock文件夹 新建mock.js 和index.js文件 这里面用来生成基础的接口 项目结构截图: 数据
mock.js 文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 import Mock from 'mockjs' function creatPostMock ( ) { const list = [] const mockdata = { id: '@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 } function creatGetMock ( ) { const getMock = Mock.mock({ 'list|1-10' : [{ 'id|+1' : 1 }] }) return getMock } export {creatPostMock, creatGetMock}
index.js 文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 import Mock from 'mockjs' import {creatPostMock, creatGetMock} from './mock' Mock.setup({ timeout: '2000 - 5000' }) Mock.mock(/\/api\/mock(|\?\S*)$/ , 'post' , creatPostMock) Mock.mock(/\/api\/mock(|\?\S*)$/ , 'get' , creatGetMock)
然后在main.js 文件里面引入我们写好的mock/index.js文件 用于拦截请求
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import Vue from 'vue' import App from './App' import router from './router' import axios from 'axios' import ('./mock/index' ) Vue.config.productionTip = false Vue.prototype.axios = axios new Vue({ el: '#app' , router, components: { App }, template: '<App/>' })
接下来我们就可以定义api了 在api文件下 新建一个自定义接口文件 如questMock.js 里面是我们需要请求数据的模拟接口;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import axios from 'axios' this .axios = axiosfunction postMockList (data ) { return this .axios.post('/api/mock' , { data }) } function getMockList (data ) { return this .axios.get('/api/mock' , { data }) } export { postMockList, getMockList }
最后在组件中使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 <template> <div class ="hello" > <div class ="mask" :class ="{boxNone:isMask }" ></div> <div> <p>这是获取mock 数据</ p> <button @click="getMockData" >get 模拟数据</button> <button @click="postMockData">post模拟数据</button> </div> </div> </template> <script> import { postMockList, getMockList } from '../api/questMock.js' export default { name: 'HelloWorld' , data () { return { msg: '模拟前后台交互' , getMock: getMockList, postMock: postMockList, isMask: true } }, methods: { getMockData () { this .isMask = false this .getMock({ params: { name: '隔壁老王' } }).then(res => { this .isMask = true console .log('GET模拟数据' , res) }).catch(e => { console .log('错误' , e) }) }, postMockData () { this .isMask = false this .postMock({ name: 'xiaoming' , age: '5' }).then(res => { this .isMask = true console .log('POST模拟数据' , res) }).catch(e => { console .log('错误' , e) }) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { 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、在设置模拟接口时 使用get请求 发现报错404 后来查资料发现是因为直接使用字符串接口会导致mockjs 拦截不到地址 解决办法就是使用 正则去匹配请求接口 2、如何设置请求延时 由于mockjs 是在本地模拟数据所以并未发起真正的请求,无法看到请求的加载效果,解决办法就是使用Mock.setup({timeout: 加载时间}) 来设置每次的模拟请求时间 也可参考以下: vue-cli 中使用 Mockjs . 服务器端数据模拟,支持请求转发、返回JSON静态数据、返回JS可变数据 .