189 8069 5689
本篇文章为大家展示了使用mock.js怎么模拟前后台交互，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
成都创新互联是一家集网站建设,柳河企业网站建设,柳河品牌网站建设,网站定制,柳河网站建设报价,网络营销,网络优化,柳河网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
1、首先安装
# 在项目中安装 npm install mockjs
2、在项目中使用
在项目中src文件夹下 新建mock文件夹 新建mock.js 和index.js文件 这里面用来生成基础的接口
项目结构截图：
数据
mock.js 文件
//-----------------mock.js-------------------
// 引入mockjs
import Mock from 'mockjs'
// 创建模拟数据 具体的数据生成方法 请查看文档http://mockjs.com/examples.html
function creatPostMock () {
const list = []
const mockdata = {
id: '@increment', // 数据定义 @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 文件
// ------------index.js---------------
// 引入mockjs
import Mock from 'mockjs'
// 引入生成的模拟数据
import {creatPostMock, creatGetMock} from './mock'
// 设置请求延时时间
Mock.setup({
// timeout: 2000 方式一 直接设置值
timeout: '2000 - 5000' // 方式二 设置区间 注意这个是一个字符串形式
})
// 设置拦截的接口 格式请看文档 https://github.com/nuysoft/Mock/wiki/Mock.mock()
// 注意: 这里拦截的地址 最好使用正则匹配 如果直接使用字符串接口 就有可能拦截不到带参数的请求 报错404
Mock.mock(/\/api\/mock(|\?\S*)$/, 'post', creatPostMock)
// Mock.mock('/api/mock', 'get', creatGetMock) // 方式一
Mock.mock(/\/api\/mock(|\?\S*)$/, 'get', creatGetMock) // 方式二然后在main.js 文件里面引入我们写好的mock/index.js文件 用于拦截请求
//------------------main.js-------------------
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios' // 引入axios
import('./mock/index') // 引入设置好基础的mock, 用于拦截请求
// 设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false
// 在vue项目中 axios中无法直接使用vue.use() 所以将axios直接添加到Vue的原型上
Vue.prototype.axios = axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '接下来我们就可以定义api了 在api文件下 新建一个自定义接口文件 如questMock.js 里面是我们需要请求数据的模拟接口；
//-------------questMock.js----------------
// 引入axios
import axios from 'axios'
// 使用
this.axios = axios
// 封装的post
function postMockList (data) {
return this.axios.post('/api/mock', {
data
})
}
// 封装的get
function getMockList (data) {
return this.axios.get('/api/mock', {
data
})
}
// 输出
export { postMockList, getMockList }最后在组件中使用