使用mockjs唯一目的是快速完成前端项目,前端不需要再等后端数据,使用mock,来模拟吧~
它可以拦截ajax请求,并模拟返回你需要的数据。这才是真正的前后端分离啊
好了下面开始上实战了..
先安装
npm install mockjs --save-dev
新建data.js(模拟数据)
import Mock from ‘mockjs‘;const data = Mock.mock({ ??"data|0-3": [ ???"浙A12222", ?]});export {data}
新建mock.js引入数据并拦截请求
import Mock from ‘mockjs‘;import {data} from ‘./data/data‘;Mock.mock(‘/do‘, ‘post‘, data);
建api.js封装axios请求
import axios from ‘axios‘import vue from ‘vue‘axios.defaults.headers = {"Content-Type": "application/x-www-form-urlencoded"}function fetch(url, params) { ?return new Promise((resolve, reject) => { ?????????axios.post(url, params) ?????.then(response => { ???????resolve(response.data); ?????}) ?????.catch((error) => { ???????reject(error); ?????}) ?})} export default { ?????getplate(url, params) { ???????????return fetch(url, params); ?????},}
然后在vue组件中调用
api.getplate(‘/do‘, content) ?????????????????????.then(res => { ??????????????????????let allplate = res.data;})
注意组建中请求地址应该与mock.js中地址相同。
大家还可以看下axios-mock-adapter,讲axios和vue结合,应该更好用一点。
mockjs+vue使用小记
原文地址:https://www.cnblogs.com/locim/p/8822794.html