mock-note

如果你还不知道如何在vue项目中使用mock,那太好了,我相信再过五分钟你就会了.
你可能会疑惑,五分钟得时间真的够么?
那么下面跟帅气得小哥哥走近 mock.js 咯…

安装 mock.js

来，先吃下这包文档,安装走一波

npm install mockjs --save-dev

使用

图文并茂的使用教程哦,幸福感满满有没有

首先，你需要认真了解一下模块化规范CommonJS,ES6 Module两者的区别,
细心得你接下来会发现代码和图不一样,为啥子呢
了解一下两者得区别 require，import区别？

配置mock

1. require版
   

2. import版

   // 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

1. require版
   

2. import版

   // main.js
   /* mock */
   import './xx/mock'

axios配置

这里一定要注意导出哦

// 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

// getData.js
import $ajax from './config'
/* 测试 */
export const getName = data => $ajax.get('/mock', data)

在组件中请求

总结

我相信聪明得你一定五分钟都没有用到就 Get√
拜拜,下课