VueCli 中安裝 axios

axios 官網：axios中文網

方式一：將 axios 繫結到 vue 原型上

安裝：

npm install axios

main.js中匯入並繫結

import Vue from 'vue'
import App from './App'
import axios from 'axios'

Vue.prototype.$axios = axios

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

使用：

<template>
  <div id="app">
    <button @click="handleClick">點選</button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    handleClick() {
    //   this.$axios({
    //     method: "get",
    //     url: "http://localhost:8081/hello"
    //   }).then(res => {
    //     console.log(res.data);
    //   });

      this.$axios.get("http://localhost:8081/hello").then(response => {
        console.log(response.data);
      });
    }
  }
};
</script>

<style></style>

方式二：使用 vue-axios

安裝：

npm install --save axios vue-axios

main.js 中安裝

import Vue from 'vue'
import App from './App'

import axios from 'axios'
import VueAxios from 'vue-axios'
// VueAxios 與 axios 的位置不能交換，否則出現 TypeError: Cannot read property 'protocol' of undefined
Vue.use( VueAxios , axios)

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

使用：

<template>
  <div id="app">
    <button @click="handleClick">點選</button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    handleClick() {
    //   this.axios({
    //     method: "get",
    //     url: "http://localhost:8081/hello"
    //   }).then(res => {
    //     console.log(res.data);
    //   });

      this.axios.get("http://localhost:8081/hello").then(response => {
        console.log(response.data);
      });
    }
  }
};
</script>

<style></style>

補充：傳送 post 請求

this.axios({
    method: "post",
    url: "http://localhost:8081/hello",
    data: {
        username: "admin",
        password: "123"
    }
}).then((res)=>{
    console.log(res.data);
})

後端 springboot 程式碼

@RestController
@CrossOrigin
public class HelloController {
    @RequestMapping("hello")
    public String hello(@RequestBody Map<String, String> username) {
        System.out.println(username);
        return "Hello world!";
    }
}

結果：

---

---

---