小白用vue写项目的心路历程，前后端数据交互篇

大家好，这是介绍我的项目经历的第三篇，我讲我的全部的坑和心得拿出来与大家分享，希望对大家在开发项目以及面试中介绍项目经历的时候有帮助，这一篇讲的是前后端的数据交互问题，我加入这个项目的时候，其他人已经接触这个项目半年了，他们前半年是在熟悉业务，我加入后我的后端已经写的差不多了，这就是最坑的，他不知道该给我什么样的数据，而我只接收到他给我的一整块数据，然后我拿过来处理后渲染到页面上，这里还是由于我之前组件划分的不合理导致我的js代码翻倍，我要把那一整块数据划分成若干块，分发给各个组件，然后我又要在各个组件汇总数据再发给后端，可能有不少小伙伴都有与后端对接数据时的无奈，但是他的逻辑都已经写好了，我只能硬着头皮把功能完成，光顾着吐槽了，忘了给大佬们递上vue的axios请求数据的方法了，接下来我给同学们讲一下axios，他其实是一个vue的包，用起来非常方便，他可以跨域，需要跨域的话在config文件夹中的index.js文件中修改。先把代码亮出了，看完代码我逐个讲解。

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://192.168.137.1:8081',
        changeOrigin: true,
        pathRewrite: {
          '^/api': 'http://192.168.137.1:8081'
        }
    }
  },

主要看’/api’对象中的值，target写上要发送数据的目标url，相信大家也看到了两个相同的值，下边那个是可以让你在调用axios的时候省去’http://192.168.137.1:8081’这段代码，直接写接口名；这个还是比较方便的。changeOrigin 是控制是