目录

说明

在此使用是的vue-cli2

 npm install axios --save

在main.js中引入

import VueAxios from "vue-axios";

Vue.prototype.$axios = axios;

沿用上一次网络请求接口

接口文档

说明 请求方式 请求参数 请求地址
GET 方式，无参数 GET 无 /user/getUser
GET方式，Int参数 GET Int(id) /user/getParamUser
Post方式，无参数 POST 无 /user/postNoParamUser
Post方式，有参数 POST Int(id) /user/postParamUser
Post方式，Json化参数 POST Object(id，name，sex，studentId，sex，data) /user/postObjectParamUser

解决跨域问题

在项目的config目录下的index.js文件下配置，（在vue-cli3中需要手动新建vue.config.js文件进行配置）

在proxyTable属性中添加跨域对象，target为要跨域的目标对象地址,changeOrigin设置为true为表示跨域，pathRewrite则为路径简写，之后根路径的重复路径直接用/api代替就可。

布局

<template>
  <button @click="sendRequset">发送请求</button>
</template>

<script> export default {
     name: "TestAxios", methods: {
     /** * 发送测试请求 */ sendRequset() {
     } } } </script>

<style scoped> </style>

发送Get请求

参照上次接口

无参GET请求

在sendRequset方法中写入请求，因为在配置跨域时配置了请求路径的简写，所以直接简写为/api即可

sendRequset() {
   
      this.$axios.get("/api/user/getUser").then(e => {
   
        console.log(e)
      })
  }

打印结果正确

有参GET请求

sendRequset() {
   
      //有参GET请求还可直接拼接到url后面
      this.$axios.get("/api/user/getParamUser",{
   
        params:{
   
          id:15
        }
      }).then(e => {
   
        console.log(e)
      })
    }

发送POST请求

因为在配置跨域时配置了请求路径的简写，所以直接简写为/api即可

发送无参POST请求

sendRequset() {
   
      this.$axios.post("/api/user/postNoParamUser").then( e => {
   
        console.log(e)
      })
    }

发送有参的表单数据

sendRequset() {
   
      let param = new FormData();
      param.append("id", 14);
      this.$axios.post("/api/user/postParamUser", param)
          .then(e => {
   
          console.log(e);
        })
    }

发送JSON化POST请求

sendRequset() {
   
      axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
      this.$axios.post("/api/user/postObjectParamUser", {
   
        id:1,
        name:"顺子",
        data:666,
        studentId:123123,
        sex:"萌新"
      }).then(e => {
   
          console.log(e);
        })
    }