我的编程空间,编程开发者的网络收藏夹
学习永远不晚

vue中mock数据,模拟后台接口实例

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

vue中mock数据,模拟后台接口实例

在前端开发过程中,有后台配合是很必要的。但是如果自己测试开发,或者后台很忙,没时间,那么我们需要自己提供或修改接口。

下面提供两种方式,第二种更简单,个人推荐第二种。

一、mock文件

1、安装,开发环境

npm i mockjs -D

2、在class="lazy" data-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拼接

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

vue中mock数据,模拟后台接口实例

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vue中mock数据模拟后台接口的方法

这篇文章主要讲解了“vue中mock数据模拟后台接口的方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中mock数据模拟后台接口的方法”吧!在前端开发过程中,有后台配合是很必要的。但
2023-06-29

vue-element-admin如何从mock数据过渡到使用后台接口

这篇文章主要介绍了vue-element-admin如何从mock数据过渡到使用后台接口问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-05-17

在Vue中使用Mock.js虚拟接口数据实例详解

在Vue项目中使用Mock.js可以方便地模拟接口数据,用于前端开发和测试。Mock.js是一个生成随机数据的库,可以帮助我们快速构建虚拟接口数据。在本文中,我将通过一个实例来详细讲解在Vue中使用Mock.js虚拟接口数据的方法。

vue-cli如何实现异步请求返回mock模拟数据

这篇文章主要为大家展示了“vue-cli如何实现异步请求返回mock模拟数据”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue-cli如何实现异步请求返回mock模拟数据”这篇文章吧。  在前
2023-06-29

vue如何模拟后台数据请求本地数据配置

随着前端框架的不断发展,越来越多的公司选择使用前后端分离的开发模式。在这种情况下,前端需要模拟后台数据请求来测试自己所开发的页面,以确保在与后台联调时能够顺利地进行下去。本文将介绍在使用Vue框架下,如何模拟后台数据请求本地数据配置。一、Vue-cli 3.x脚手架搭建项目首先需要使用 Vue-cli 3.x的脚手架来创建项目。这里本文就不再赘述。接着,在创建好的项目中,可以在
2023-05-14

vue中如何使用echarts实现动态数据绑定及获取后端接口数据

本篇内容主要讲解“vue中如何使用echarts实现动态数据绑定及获取后端接口数据”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue中如何使用echarts实现动态数据绑定及获取后端接口数据”
2023-07-02

编程热搜

目录