基于Vue和React脚手架演示各自项目的接口代理和数据Mock.

Vue接口代理实现步骤

vue中文官方文档：https://cn.vuejs.org/

vue-cli中文官方文档：https://cli.vuejs.org/zh/

Vue4.0脚手架安装(全局安装，不要安装vue-cli)

npm install -g @vue/cli# ORyarn global add @vue/cli

Vue项目创建

vue create my-project# 或者启动ui系统来创建项目(不推荐，作用不大)vue ui

注：Vue-Cli4.0创建的项目，隐藏了webpack配置信息。

安装必要插件

# axios发请求 ， mockjs做数据mockcnpm install axios mockjs --save # OR (下面是语法的简写)cnpm i axios mockjs -S

代码编写

# App.vue添加请求import axios from 'axios'export default {  name: 'App',  data(){    return {      time:0    }  },  mounted(){    axios.get('http://www.imooc.com/activity/servicetime').then((res)=>{      this.time = res.data;    })  }}

很显然这种情况会报错，因为浏览器有安全限制，不允许随意调用其它网站的接口，需要遵循同源策略(同协议、同域名、同端口)

所以，我们需要添加接口代理来解决，事件工作当中，我们前后端做接口联调时，同样基于接口代理的方式：

创建vue.config.js配置

/* vue.config.js */module.exports = {    devServer:{        host:'localhost',        port:8080,        proxy:{            '/activity':{                target:'http://www.imooc.com'            }        }    }   }

这个配置可以设置启动的端口、主机和接口代理地址，拦截到/activity后会转发到另外一台服务器，从而解决跨域，此配置仅用于本地开发环境，线上环境需要同步修改Nginx.conf配置。

以上是Vue项目接口代理的方案；

Vue项目在开发阶段如何做数据Mock呢？

常用的mock方案如下：

• 线上easy-mock平台(目前已经挂了，不提供服务了)

• 本地搭建easy-mock平台(https://github.com/easy-mock/easy-mock)

• mockjs插件在前端实现mock

• mockjs插件在后端实现mock

• 在public下创建json文件，实现数据mock

以上是我个人所用到过的各种mock方案，其中easy-mock是最好用的，然而目前已经不提供服务了，有条件的用户，可以在公司搭建easy-mock平台，如果没有条件，可以继续使用mockjs插件来实现。

Vue集成mockjs方案

mock中文文档：http://mockjs.com/

创建文件

添加mock代码

import Mock from 'mockjs'export default {    init(){        Mock.mock('/api/user/login',{            "status": 0,            "data": {              "id|+1": 0,              "list|10":[                  {                      "title":"欢迎加入前端未来"                  }              ],              "username": "@cname",              "email": "futurefe@futurefe.com",              "phone": 17611021717,              "subject":"前端未来"            }          });    }}

加载mock

import mock from './mock'# 判断是否开启mockconst isMock = true;if(isMock){  mock.init()}

接口调用

<script>import axios from 'axios'export default {  name: 'App',  components: {    HelloWorld  },  data(){    return {      time:0,      user:{}    }  },  mounted(){    // 数据mock    axios.get('/api/user/login').then((res)=>{      this.user = res.data;    })  }}script>

数据验证

以上是给大家提高Vue项目接口代理和数据Mock的方案，希望对大家有所帮助！