vue mock数据，模拟后台接口返回数据

系统管理员 2023-06-06 13:29 564阅读 0赞

在前端开发过程中，有后台配合是很必要的。但是如果自己测试开发，或者后台很忙，没时间，那么我们需要自己提供或修改接口。下面提供两种方式，第二种更简单，个人推荐第二种。

## 第一种、mock文件方式 ##

1、安装，开发环境

npm i mockjs -D

2、在src目录下新建mock目录，结构如下：  
![在这里插入图片描述][20191012100446334.png]  
3、index.js内容如下：

const Mock = require('mockjs');
    //格式： Mock.mock( url, post/get , 返回的数据)； 下面的userInfo是指mock目录下的json目录下的userInfo.json文件
    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模板访问

//通过ajax访问url，由于我们这里配置了mock方式，所以相当于是mock返回给我们模拟的后端接口返回数据
    axios.get('/user/userInfo')  
    .then(function(res){  //如果ajax访问成功就走这个then()
      console.log(res);
    })
    .catch(function(err){  //如果访问ajax失败就走这个catch()
      console.log(err);
    });

二、第三方接口eolinker  
1、官网接口地址：[https://www.eolinker.com/\#/home/project/api/][https_www.eolinker.com_home_project_api]需登录，没注册过的小伙伴，注册一个账号吧。

2、注册好后有一个默认接口，当然我们要做自己的项目。

3、新建项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]  
4、添加接口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]  
5、自定义接口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]  
6、使用接口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 3]  
7、前端项目中，后台url地址，有开发版，测试版，产线版等多个版本，建议大家统一管理，访问时，做url拼接  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 4]  
本文转载自;https://blog.csdn.net/bocongbo/article/details/81700843

[20191012100446334.png]: /images/20230601/d9d0c12659bb44ff9c914d945035a286.png
[https_www.eolinker.com_home_project_api]: https://www.eolinker.com/#/home/project/api/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]: /images/20230601/ffd96027402f4ef4946adabcb1231e42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]: /images/20230601/6ac2f4278790469cb26aaae267c21d73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]: /images/20230601/4f97168e937e47d2823294ccdea55b49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 3]: /images/20230601/83c65c03deac460f87e15d3eea6f6383.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 4]: /images/20230601/6d323c6a8c9d45b08db12587503eb525.png