vue项目中使用mockjs模拟接口返回数据
2018-05-14 23:16
801 查看
Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了。
网上介绍mock的教程也较多,不过大多数看的比较模糊。其实使用起来非常简单,这里介绍在Vue工程中使用Mockjs,并且实现开发和生产配置化。
然后再main.js里面引入mockjs
mock/index.js
拦截ajax请求主要可以使用Mock中的两个方法:
rurl:表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。(在vue 工程中,建议将api的url全部放在apipath中统一管理,然后在Mock中使用与发请求的时候使用的同一个引用)
rtype:表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template:表示数据模板,可以是对象或字符串。如果需要要把数据写死,可以直接写一个普通的对象。如果要让Mock随机生成,可以根据Mock模板的规则自定义。例如:
再就是函数,比如下面这样
到此基本应用就可以了,更详细的使用,请看官方文档。
网上介绍mock的教程也较多,不过大多数看的比较模糊。其实使用起来非常简单,这里介绍在Vue工程中使用Mockjs,并且实现开发和生产配置化。
一、安装
cnpm install --save-dev mockjs
二、引入
为了只在开发环境使用mock,而打包到生产环境时自动不使用mock,我们可以在env中做一个配置//dev.env module.exports = merge(prodEnv, { NODE_ENV: '"development"', MOCK: 'true', }) //prod.env module.exports = { NODE_ENV: '"production"', MOCK: 'false', }
然后再main.js里面引入mockjs
process.env.MOCK && require('@/mock') //表示配置MOCK为true的时候,才引入mock,所以生产环境的时候就不引入mock了
三、目录和文件创建
在src目录下创建mock目录,添加index.js文件,这里建议给每类api使用单独的mock文件。例如下面一个api文件对应一个mock文件mock/index.js
//将所有的mock文件导入 require('./inspection') // 在这里可以做一些通用的配置 const Mock = require("mockjs") // 设置所有ajax请求的超时时间,模拟网络传输耗时 Mock.setup({ timeout: 0-300 })
四、拦截ajax请求,配置mock的数据
const Mock = require("mockjs") const Random = Mock.Random; Mock.mock('/api/load','get',{ 'xData|100':['@datetime'], 'series|2':[{ 'name':'@NAME', 'type':'line', 'smooth':true, 'data|100':['@integer(1,600)'] }] })
拦截ajax请求主要可以使用Mock中的两个方法:
Mock.mock( rurl, rtype, template ) Mock.mock( rurl, rtype, function( options ) )
rurl:表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。(在vue 工程中,建议将api的url全部放在apipath中统一管理,然后在Mock中使用与发请求的时候使用的同一个引用)
rtype:表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template:表示数据模板,可以是对象或字符串。如果需要要把数据写死,可以直接写一个普通的对象。如果要让Mock随机生成,可以根据Mock模板的规则自定义。例如:
{ 'data|1-10':[{}] } 表示生成生成包含 1到10个空对象的数据 '@EMAIL' 表示随机生成一个email地址 '@CNAME' 表示随机生成一个中文人名
再就是函数,比如下面这样
Mock.mock('/api/redo','get',function(options){ let series=[]; for(let n=1;n<18;n++){ let _obj={}; _obj.name = '05-' + (n <= 9 ? '0' + n : n); _obj.type = 'line'; _obj.data=[]; for(let i=0;i<24;i++){ let _d = Random.integer(1,10) * (i%2 == 0 ? 10 : 90); _obj.data.push(_d); } series.push(_obj); } return series; })
到此基本应用就可以了,更详细的使用,请看官方文档。
五、Mock 无法拦截 带参数的 GET 请求
解决:后来将路径改成正则就好//api //获取健康模型数据 export const getRadarDataApi = (id) => ajax({url:BASEURL + 'radar/' + id}) //mock Mock.mock(/\/api\/radar/,'get',{ 'radar|5':['@integer(0, 100)'] })
相关文章推荐
- 如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发
- vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
- vue项目的webpack设置请求模拟数据的接口方法
- 在vue-cli环境下模拟数据接口及如何应用mockjs
- 详解在vue-cli项目中使用mockjs(请求数据删除数据)
- vue+vuecli+webpack中使用mockjs模拟后端数据的示例
- vue+vuecli+webpack中使用mockjs模拟后端数据
- vue+vuecli+webpack中使用mockjs模拟后端数据
- 一个正在项目中使用的DataInterface数据访问接口
- 对接支付宝接口时,不使用SDK,调用成功但是返回的数据一直验签失败问题解决方案
- Fiddler学习_模拟网络限速+设置接口404+地址替换+修改返回数据
- gulp、MockJs、NodeJs、Mustache脱离后台环境,只通过模拟数据运行项目
- Vue项目使用swiper做轮播图时,异步调用数据时导致图片不能滑动的解决方法
- PHP模拟POST提交数据并获得返回值之CURL方法(使用PHP extension,然后使用php_curl.dll,很不错)
- vux 数据模拟mockjs的使用
- 前端模拟后台返回数据之Mockjs
- asp.net 使用ajax请求地址接口数据 ajax返回类型是json js get post请求数据
- Vue项目 五、表现->5.2数据模拟
- 模拟http请求返回json数据的接口并解析
- vue项目模拟后台数据