如果你还不知道如何在vue项目中使用mock,那太好了,我相信再过五分钟你就会了.
你可能会疑惑,五分钟得时间真的够么?
那么下面跟帅气得小哥哥走近 mock.js 咯…
安装 mock.js
来,先吃下这包文档,安装走一波1
npm install mockjs --save-dev
使用
图文并茂的使用教程哦,幸福感满满有没有
首先,你需要认真了解一下模块化规范CommonJS,ES6 Module两者的区别,
细心得你接下来会发现代码和图不一样,为啥子呢
了解一下两者得区别 require,import区别?
配置mock
require版
import版
1
2
3
4
5
6
7
8
9
10// xx/mock.js
import Mock from 'mockjs'
const base = 'http://localhost:8080'
Mock.mock(base + '/mock', {
'name': '@name'
})
Mock.mock(base + '/test', 'post', {
'age|1-100': 100
})
export default Mock
RESTful API
require版
import版
1
2
3// main.js
/* mock */
import './xx/mock'
axios配置
这里一定要注意导出哦1
2
3
4
5
6
7
8
9
10
11// config.js
import axios from 'axios'
// 配置api地址
const baseURL = '/api'
// axios设置
const $ajax = axios.create({
baseURL,
timeout: 5000,
withCredentials: true // 跨域cookie
})
export default $ajax
Ajax请求API
1
2
3
4// getData.js
import $ajax from './config'
/* 测试 */
export const getName = data => $ajax.get('/mock', data)
在组件中请求
总结
我相信聪明得你一定五分钟都没有用到就 Get√
拜拜,下课