vue 使用 axios 前後端資料傳輸 Post請求參數問題

後端 java 接口，前端 vue

第一種方法:使用 qs 子產品處理參數（推薦使用）

1、安裝

npm install axios qs --save            

2、引入

//引入 axios
import axios from 'axios'
Vue.prototype.$http=axios; // 将 $http 替換成  axios 
Vue.prototype.$http.defaults.baseURL = 'http://192.168.31.13:41000' //請求位址的公有部分

import qs from 'qs';
Vue.prototype.$qs = qs;           

3、使用

login(){ 
        var params = {
          account: this.account,
          password: this.password
        }

        this.$http.post("/api/admin/login", this.$qs.stringify(params))
        .then(function (data) {
          console.log(data)
        })
        .catch(function (error) {
          console.log(error)
        })
      }           

第二種方法：使用URLSearchParams對象處理參數

1、安裝axios

npm install axios --save            

2、main.js  引入

//引入 axios
import axios from 'axios'
Vue.prototype.$http=axios; //将 $http 變量替換成 axios
Vue.prototype.$http.defaults.baseURL = 'http://192.168.31.13:41000' //公有請求位址           

3、發送post請求

login(){  
        var params = new URLSearchParams();
        params.append('account', this.account);
        params.append('password', this.password);

        this.$http.post("/api/admin/login", params)
        .then(function (data) {
          console.log(data)
        })
        .catch(function (error) {
          console.log(error)
        })
      }