vue中mock数据,模拟后台接口实例
更新时间：2022年04月06日 10:20:38 作者：不求甚解bc
这篇文章主要介绍了vue中mock数据,模拟后台接口实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
在前端开发过程中，有后台配合是很必要的。但是如果自己测试开发，或者后台很忙，没时间，那么我们需要自己提供或修改接口。
下面提供两种方式，第二种更简单，个人推荐第二种。
一、mock文件
1、安装，开发环境
npm i mockjs -D
2、在src目录下新建mock目录，结构如下：
3、index.js内容如下：
const Mock = require('mockjs');
//格式： Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/user/userInfo', 'get', require('./json/userInfo'));
Mock.mock('/home/banner', 'get', require('./json/homeBanner'));4、json文件内容如下，以userInfo.json为例：
{
"result": "success",
"data": {
"userSn": "3785521",
"username": "不求甚解",
"age": 25,
"imgUrl": "https://avatar.csdn.net/8/5/D/3_bocongbo.jpg"
},
"msg": ""
}5、在main.js入口文件中引入mock数据，不需要时，则注释掉。
import Vue from 'vue';
import App from './App';
import router from './router';
require('./mock'); //引入mock数据，关闭则注释该行
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});6、在vue模板访问
axios.get('/user/userInfo')
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
});二、第三方接口eolinker
1、官网接口地址：https://www.eolinker.com/#/home/project/api/
需登录，没注册过的小伙伴，注册一个账号吧。
2、注册好后有一个默认接口，当然我们要做自己的项目。
3、新建项目
4、添加接口
5、自定义接口
6、使用接口
7、前端项目中，后台url地址，有开发版，测试版，产线版等多个版本，建议大家统一管理，访问时，做url拼接
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue.js开发中我们经常会遇到需要将数字格式化为保留两位小数的情况,下面这篇文章主要给大家介绍了关于Vue前端数值转换为千分位格式并保留两位小数的相关资料,需要的朋友可以参考下2024-06-06
这篇文章主要给大家介绍了关于el-input宽度跟随输入内容自适应的实现方法,我们再实际应用中可能需要input文本框能够根据输入字符的所占据的宽度自动调节尺寸,需要的朋友可以参考下2023-08-08
详解windows下vue-cli及webpack 构建网站(三)使用组件
本篇文章主要介绍了详解windows下vue-cli及webpack 构建网站(三)使用组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了vue中如何通过函数传参数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家介绍了Vue编程格式化代码属性及自动换行问题，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要给大家介绍了关于如何完全掌握Vue中$set方法的相关资料,vue中$set方法对数组和对象的处理本质上的一样的,对新增的值添加响应然后手动触发派发更新,需要的朋友可以参考下2023-11-11
使用强大的Vuetify开发前端页面,结果发现官方没有提供简便的全局消息通知组件,所以自己动手写了一个简单的组件,接下来通过本文给大家介绍使用vuetify实现全局v-alert消息通知的详细代码,感兴趣的朋友跟随小编一起看看吧2024-02-02
这篇文章主要给大家介绍了关于vuex使用方法的相关资料,主要内容包括Vuex的安装和配置,以及如何在.vue文件中引入和使用Vuex状态,作者还分享了一种在模块中存储状态的建议方法,并提供了具体的代码示例,需要的朋友可以参考下2024-10-10
在实际项目中，我们可能需要对请求进行“防抖”处理。本文主要实现axios中取消请求及阻止重复请求，具有一定的参考价值，感兴趣的可以了解一下2021-08-08
这篇文章主要介绍了vue2和vue3的v-if与v-for优先级对比学习，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
最新评论