1、安装 mockjs、axios（一般默认自带，没有就安装下）
$ npm install mockjs # axios 一般默认自带 $ npm install axios
2、启动项目
# 根据项目环境运行对应的启动命令 $ npm run dev $ npm run serve
3、创建 mockjs 文件
1）在 src 目录下手动创建 /src/mock/index.js 文件夹与文件
2）在 main.js 文件中引入创建的 mock 文件
// 导入 mock 数据 import '../mock/index.js' // 或者这样导入（二选一即可） require('../mock/index.js')
3）/mock/index.js 文件中模拟常用请求方式，并返回数据
// 导入 mockjs ($ npm install mockjs) import Mock from 'mockjs' // 不限制请求方式 Mock.mock('/api/login', (req) => { // 输出请求参数 console.log(req) // 返回数据 return { // 输出数据(随机生成姓名) 'name': '@name', // 还可以自定义其他数据 } }) // 限制 post Mock.mock('/api/post', 'post', (req) => { // 输出请求参数 console.log(req) // 返回数据 return { // 输出数据(随机生成姓名) 'name': '@name', // 还可以自定义其他数据 } }) // 限制 get Mock.mock('/api/get', 'get', (req) => { // 输出请求参数 console.log(req) // 返回数据 return { // 输出数据 'age|10-20': 10 // 还可以自定义其他数据 } }) // 返回数据方式，所有请求方式都支持 Mock.mock('/api/login2', { "code": 200, "data": {}, "msg": "请求成功" }) Mock.mock('/api/login1', require('./test.json')) Mock.mock('/api/login3', (req) => { return require('./test.json') })
4）也可以通过 ./test.json 这种方式返回模拟数据，了解即可，根据情况使用
4、使用 mockjs 模拟的接口与数据
1）公共请求文件 request.js 封装案例，封装起来方便后续换线上接口
// 经过自定义处理后的 axios // import { axios } from '@/api/axios' // 直接使用 axios import axios from 'axios' // post export function login_post (parameter) { return axios.post('/api/login', parameter) } // get export function login_get (parameter) { return axios.get('/api/login', parameter) } // post export function login_post_1 (parameter) { return axios({ url: '/api/login1', method: 'post', data: parameter }) } // get export function login_get_1 (parameter) { return axios({ url: '/api/login', method: 'get', // 在使用 mockjs 时， get 请求不能使用 params 进行传参，会报 404 // params: parameter // 要么不传，要么先使用 post 的 data 方式先传着用 data: parameter }) }
2）.vue 页面中使用案例
<script> // 从封装的 request.js 文件中导出使用 import { login_post, login_post_1, login_get, login_get_1 } from '@/api/request' // 直接使用 axios import axios from 'axios' export default { mounted () { // 参数 const params = { id: 110 } // post login_post(params).then(res => { console.log(res) }).catch(err => { console.log(err) }) // post login_post_1(params).then(res => { console.log(res) }).catch(err => { console.log(err) }) // get login_get(params).then(res => { console.log(res) }).catch(err => { console.log(err) }) // get login_get_1(params).then(res => { console.log(res) }).catch(err => { console.log(err) }) // 直接使用 axios.post('/api/post', params).then(res => { console.log(res) }).catch(err => { console.log(err) }) // 直接使用 axios.get('/api/get', params).then(res => { console.log(res) }).catch(err => { console.log(err) }) } } </script>
到这里 mockjs 基本也算会用了！！！！
