vue项目中如何使用mock你知道吗
更新时间:2021年11月21日 20:50 点击:451 作者:唐小亭
Mock.js
是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能:
- 根据数据模板生成模拟数据
- 模拟 Ajax 请求,生成并返回模拟数据
- 基于 HTML 模板生成模拟数据
第一步:
npm install mockjs // 安装mockjs
npm install axios
第二步,在request.js中进行相关配置,request.js代码如下:
import axios from 'axios' // axios.defaults.headers.post['Content-Type'] = 'application/x-www-urlencoded' const http = axios.create() http.defaults.timeout = 3000 http.interceptors.request.use(config => { // 请求拦截器配置 // 可不配置 // do sth return config }, error => { console.log(error) return Promise.reject(error) }) http.interceptors.response.use(response => { // 响应拦截器配置 // 可不配置 // do something return response }, error => { console.log(error) return Promise.reject(error) }) export function fetch(url, params) { // 封装axios的post请求 return new Promise((resolve, reject) => { // promise 用法,自行查阅 axios.post(url, params).then(response => { resolve(response.data) // promise相关 }).catch(error => { reject(error) // promise相关 }) }) } export default { // 暴露htto_mock方法,即后面页面中用到的方法 http_mock(url, params) { return fetch(url, params) } }
第三步,在mock.js中进行相关配置,mock.js代码如下:
import Mock from 'mockjs' const Random = Mock.Random var listData = function() { let _data = { status: 200, message: 'success', data: { total: 100, 'rows|10': [{ id: '@guid', name: '@cname', 'age|20-30': 23, 'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'] }] } } return { _data } } // url为要拦截的请求地址 请求方式 请求数据(规则) (此处api会被mockjs拦截) Mock.mock('http://route.showapi.com/60-27', 'post', listData())
第四步,在main.js中需引入mock.js即可
import mock from '@/http/mock'
第五步,在页面中使用
import request from '@/http/request' export default { name: "FirstPage", created() { this.getData() }, methods: { getData() { // 假装要使用http_mock发送请求(mock自动拦截请求并生成数据) // 此处第一个参数需要和Mock.mock()中的第一个参数一致 console.log('请求开始') request.http_mock('http://route.showapi.com/60-27','api_id=63114&api_sign=3847b0').then(response => { console.log(response._data) }) }, } }
效果如下:
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注猪先飞的更多内容!
原文出处:https://blog.csdn.net/tt18473481961/article/details/12137094
上一篇: Vue之事件处理和事件修饰符详解
下一篇: Vue之常用的内置指令详解
相关文章
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09Vue 列表页带参数进详情页的操作(router-link)
这篇文章主要介绍了Vue 列表页带参数进详情页的操作(router-link),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-13- 这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
- 这篇文章主要介绍了vue cli4.0项目引入typescript的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-17
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
- 距离 Vue 3.0 正式版发布已经有一段时间了,关于vue3组件库相关的问题还是挺多人感兴趣的,这篇文章主要给大家介绍了关于vue3如何按需加载第三方组件库的相关资料,需要的朋友可以参考下...2021-06-02
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20