基于vue 添加axios組件,解決post傳參數(shù)為null的問題

更新時間：2018年03月05日 15:16:43 作者：0day__

下面小編就為大家分享一篇基于vue 添加axios組件,解決post傳參數(shù)為null的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

好，下面上貨。

1、安裝axios

npm install axios --save

2、添加axios組件

import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.baseURL = 'http://localhost:7878/zkview';
Vue.prototype.$ajax = axios;

3、get請求

testGet: function () {
 this.$ajax({
  method: 'get',
  url: '/test/greeting',
  params: {
   firstName: 'Fred',
   lastName: 'Flintstone'
  }
 }).then(function (response) {
  console.log(response);
 }).catch(function (error) {
  console.log(error);
 });
},

4、post請求

testPost: function () {
    var params = new URLSearchParams();
    params.append('name', 'hello jdmc你好');
    params.append('id', '2');
    this.$ajax({
     method: 'post',
     url: '/test/greeting2',
     data:params
//     data: {id: '3', name: 'abc'}
    }).then(function (response) {
     console.log(response);
    }).catch(function (error) {
     console.log(error);
    })
   }

5、運(yùn)行結(jié)果：

6、注意：

在使用post方式的時候傳遞參數(shù)有兩種方式，一種是普通方式，一種是json方式，如果后臺接受的是普通方式，那么使用上述方式即可。

普通的formed方式

var params = new URLSearchParams();
params.append('name', 'hello jdmc你好');
params.append('id', '2');
data:params

后臺接收參數(shù)：

public Student greeting2(int id,String name) {

json方式

data: {id: '3', name: 'abc'}

后臺接收參數(shù)

public Object greeting2(@RequestBody Object student) {

以上這篇基于vue 添加axios組件,解決post傳參數(shù)為null的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺談Vue內(nèi)置component組件的應(yīng)用場景
這篇文章主要介紹了淺談Vue內(nèi)置component組件的應(yīng)用場景，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
Vue實(shí)現(xiàn)table列表項上下移動的示例代碼
本文主要介紹了Vue實(shí)現(xiàn)table列表項上下移動的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Vue3新增時自動獲取當(dāng)前時間的操作方法
這篇文章主要介紹了Vue3新增時自動獲取當(dāng)前時間的操作方法,本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-07-07
vue中復(fù)用vuex.store對象的定義
這篇文章主要介紹了vue中復(fù)用vuex.store對象的定義，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
npm?run?dev失敗的簡單解決辦法
最近工作中遇到了npm?run?dev報錯這個問題,通過查找相關(guān)資料最終解決了,所以下面這篇文章主要給大家介紹了關(guān)于npm?run?dev失敗的詳細(xì)解決辦法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
vue中動態(tài)修改img標(biāo)簽中src的方法實(shí)踐
本文主要介紹了vue中動態(tài)修改img標(biāo)簽中src的方法實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
Vue多環(huán)境代理配置方法思路詳解
多人協(xié)作模式下，修改代理比較麻煩，而且很容易某個開發(fā)人員會修改了vue.config.js文件后提交了。接下來通過本文給大家分享Vue多環(huán)境代理配置方法思路詳解,需要的朋友可以參考下
2019-06-06
談?wù)刅ue中的nextTick
Vue.nextTick是Vue官方給我們提供的一個API（方法），作用是在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的DOM
2021-04-04
深入詳解Vue中的路由懶加載
路由懶加載是一種優(yōu)化技術(shù)，用于延遲加載應(yīng)用程序中的路由組件，它可以提高初始加載速度并減少資源消耗，特別適用于大型單頁應(yīng)用，下面我們就來看看它的原理與使用吧
2023-08-08
vue封裝自定義指令之動態(tài)顯示title操作(溢出顯示,不溢出不顯示)
這篇文章主要介紹了vue封裝自定義指令之動態(tài)顯示title操作(溢出顯示,不溢出不顯示)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11