使用mock.js怎么模拟前后台交互
本篇文章为大家展示了使用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 }
最后在组件中使用
// ----------------------HelloWorld---------------------这是获取mock 数据
遇到的问题
1、在设置模拟接口时 使用get请求 发现报错404 后来查资料发现是因为直接使用字符串接口会导致mockjs 拦截不到地址 解决办法就是使用 正则去匹配请求接口
2、如何设置请求延时 由于mockjs 是在本地模拟数据所以并未发起真正的请求,无法看到请求的加载效果,解决办法就是使用Mock.setup({timeout: 加载时间}) 来设置每次的模拟请求时间
也可参考以下:
服务器端数据模拟,支持请求转发、返回JSON静态数据、返回JS可变数据 .
上述内容就是使用mock.js怎么模拟前后台交互,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
当前文章:使用mock.js怎么模拟前后台交互
转载源于:http://hbruida.cn/article/ghegdp.html