Vue如何成功调用一个动态数据接口+解决跨域问题

1.安装axios（封装 / 不封装两种方法）
在控制台安装axios依赖，安装依赖包时一定要加 --save，这样会在package.json中声明版本，下次install才能被找到。

cnpm install axios --save

出现下图说明安装成功

前提
方法一：不封装axios 方法(适合接口不多，要求不高的项目，类似毕设或者小型项目)

<template>
  <div>
    <span>选项一</span>
    <el-button @click="getInfo">获取数据</el-button>
  </div>
</template>
<script>
//在要调用的接口的页面导入axios
import Axios from "axios";
export default {
  //变量区（使用前请加this.）
  data() {
    return {};
  },
  //方法区
  methods: {
  //点击按钮调用该方法get
    getInfo() {
      Axios.get("http://11.345.88.10:8081/menulist")
        .then(res => {
          console.log(res);
        })
        .catch(error => {
            console.log(error)
        });
    }
  }
};
</script>

post方法

 getInfo() {
      Axios.post("http://11.345.88.10:8081/menulist",{orgnCode:"1",account:"admin",password:"123456"})
        .then(res => {
          if(res.data.code==200){
            this.$router.push({path:'/menulist'})
          }
        })
        .catch(error => {
            console.log(error)
        });
    }

方法二：封装axios 方法（适合有大量接口的项目）
1.在src下新建一个文件夹utils,创建文件request.js代码如下：

import axios from 'axios'
const service = axios.create({

  baseURL: '/api', // url = base url + request url
  timeout: 5000 // request timeout
})


// respone拦截器
service.interceptors.response.use(
  response => {
    return response
  },
  error => {
    // 在status不正确的情况下，判别status状态码给出对应响应
    if (error.response) {
      console.log('在respone拦截器检查到错误：')
      switch (error.response.status) {
        case 204:
          error.response.data.error = '204:No Content（没有内容）'
          break
        case 401:
          location.reload() // 刷新页面，触发路由守卫
          error.response.data.error = '401:Unauthorized（未经授权）'
          break
        case 403:
          error.response.data.error = '403:Forbidden（被禁止的）'
          break
        case 500:
          error.response.data.error = '500:服务器内部错误'
          break
        default:
          return error
      }
      return Promise.reject(error.response.data.error)
    }

    return Promise.reject(error)
  }
)

export default service

这就相当于封装了axios

2.在src下新建一个api文件夹，放你的接口
一个js里可以放一个类型的，比如我login里就可以都放和登录相关的接口

给大家放几个例子
get请求还是post请求，是否需要传参取决于后端接口，根据自己需求更改就可以
例子1：给后台传一组参数post请求,每个js里只需要导入一次request

import request from '@/utils/request.js'
//登录（带参数的post请求，参数类型为对象不是一个具体值）
export function postLogin(data) {
  return request({
    url: '/login',
    method: 'post',
    data
  })
}

例子2，获取全部菜单数据和删除某一条数据

import request from '@/utils/request.js'
//获取菜单全部数据
export function postMenuList() {
  return request({
    url: '/menu/list',
    method: 'get',
  })
}
//删除菜单信息（给后台传一个id，参数类型为一个具体的值）
export function postDeleteMenuById(menuId) {
    return request({
      url: `/menu/delete/${menuId}`,
      method: 'post',
    })
  }

3.调用接口
在页面导入api

import { postLogin } from "@/api/login.js";

在方法中调用该接口

   loginFn() {
      postLogin(this.params).then(res => {
        console.log(res);
        //如果接口调用成功，跳转到mian页面
        if (res.data.code == 200) {
          this.$router.push({ path: "/Main" });
        }
      });
    }

以一个完整的登录代码为例

<template>
  <div class="wrapper">
    <h1>登录</h1>
    <el-form label-position="right" label-width="80px" :model="params" class="loginForm">
      <el-form-item label="组织名">
        <el-input v-model="params.orgnCode"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="params.account"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="params.password"></el-input>
      </el-form-item>
      <el-button @click="loginFn()">登录</el-button>
    </el-form>
  </div>
</template>
<script>
import { postLogin } from "@/api/login.js";
export default {
  data() {
    return {
      params: {
        orgnCode: "1",
        account: "admin",
        password: "123456"
      }
    };
  },
  methods: {
    loginFn() {
      postLogin(this.params).then(res => {
        console.log(res);
        //如果接口调用成功，跳转到mian页面
        if (res.data.code == 200) {
          this.$router.push({ path: "/Main" });
        }
      });
    }
  }
};
</script>
<style scoped>
.wrapper {
  text-align: center;
}
.loginForm {
  width: 400px !important;
  margin: 0 auto;
  border: 1px solid gray;
  padding: 20px;
  border-radius: 10px;
}
</style>

.
.
.
解决跨域问题
如果不是本地的接口，就会产生跨域问题（未封装和封装都是这种改法）
修改config下index.js里proxyTable的内容
接口就用例子：http://11.345.88.10:8081/menulist说明

代码如下：

 proxyTable: {
      '/api': { //使用"/api"来代替"url地址" 
        target: 'http://11.345.88.10:8081', //源地址 
        // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据
        // 这样服务端和服务端进行数据的交互就不会有跨域问题
        changeOrigin: true, //改变源 
        pathRewrite: {
          '^/api': 'http://11.345.88.10:8081' //路径重写 
        }
      }
    },

然后在调用接口的时候改成

 getInfo() {
      Axios.post("/api/menulist")
        .then(res => {
          console.log(res);
        })
        .catch(error => {
            console.log(error)
        });
    }

这个api字段是任意的，如果是封装的axios，就必须与封装的baseURL一致。若没有封装就要如上图自己加在请求路径上把地址换成/api
.
.
.
如果不部署可以不看这个
通过这中方法去解决跨域，打包部署时还按这种方法会出问题。解决方法如下：

let serverUrl = '/api/'  //本地调试时 
// let serverUrl = 'http://11.345.88.10:8081/'  //打包部署上线时 
export default { 
  dataUrl: serverUrl + 'menulist' 
}