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拼接

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/bocongbo/article/details/81700843
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-06-28 03:40:12
阅读 ( 720 )
分类：前端

vue mock数据，模拟后台接口

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看