最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue-axios-post數(shù)據(jù)后端接不到問(wèn)題解決

 更新時(shí)間:2020年01月09日 11:38:26   作者:Caeser110  
這篇文章主要介紹了Vue-axios-post數(shù)據(jù)后端接不到問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1 前言

最近在前后端聯(lián)調(diào)的時(shí)候發(fā)現(xiàn)了一個(gè)問(wèn)題,可能自己平時(shí)不注意發(fā)送的內(nèi)容格式,導(dǎo)致解決問(wèn)題的路上,走了很多彎路,尤其是在剛剛懂了一點(diǎn)Vue知識(shí)之后,發(fā)送請(qǐng)求的各種花式寫(xiě)法也是讓人頭大,我在這把我踩到的坑給大家介紹一下吧。

2 問(wèn)題

這個(gè)問(wèn)題是我前端登錄的時(shí)候向后端發(fā)生post請(qǐng)求。在使用這個(gè)接口前,我使用 postman 確認(rèn)過(guò)了幾次,接口傳參是沒(méi)有問(wèn)題的,而且使用params或者body傳參都是能接收到的。然而還是報(bào)錯(cuò)了……我們先來(lái)看看一個(gè)截圖吧。

我向后端發(fā)參數(shù)的時(shí)候無(wú)論如何我都接不到數(shù)據(jù),然后我就開(kāi)始各種懷疑和猜測(cè)

( a )后端接口問(wèn)題
如果是后端接口問(wèn)題,那么我用postman接到了呀,所以這一條雖然我不信,但是我還是去各種嘗試修改,我修改的接口傳遞方式,我懷疑是不是跨域失敗,然而都沒(méi)能解決我的問(wèn)題。

( b )懷疑跨域未成功
我仔細(xì)檢查了是否存在全局代理(各種代理工具)
是否存在nodejs本身問(wèn)題

( c )發(fā)送參數(shù)問(wèn)題

我的請(qǐng)求代碼如下:

axios.post('/api/home/login',{
     params: {
      username: this.username,
      password: this.password
     }
    }).then(this.handleLoginSucc)

我自認(rèn)為沒(méi)有問(wèn)題,但是又不敢確定,于是我又換了一種寫(xiě)法

// main.js配置
import axios from 'axios'
// 配置請(qǐng)求的根路徑
axios.defaults.baseURL = 'http://localhost:8088/caeser/'
Vue.prototype.$http = axios

// 代碼調(diào)用
// 設(shè)置同步方法 async
const{ data: res } await this.$http.post('users', { params: this.queryInfo })

然而并不能解決我的問(wèn)題,因?yàn)榘l(fā)送的內(nèi)格式依然沒(méi)有變化。

最后我找了解決辦法,而且確定了內(nèi)容格式是formdata

3 解決辦法

3.1 辦法1

var params = new URLSearchParams()
// 參數(shù)保存
params.append('username', this.loginForm.username)
params.append('password', this.loginForm.password)
// post發(fā)送
axios.post('/api/home/login', params).then(this.handleLoginSucc)

這次我就能接到了,我們看看內(nèi)容格式是什么

Content-type依然是application/json,但是數(shù)據(jù)格式變成了 Form Data,于是問(wèn)題迎刃而解了。

這個(gè)問(wèn)題困擾了我兩天,算是吸取一個(gè)教訓(xùn)吧,復(fù)習(xí)了一下請(qǐng)求方面的知識(shí),算是有所進(jìn)步了。

3.1.1 兼容性

有個(gè)很重要提醒:所有瀏覽器都不支持URLSearchParams,但是有一個(gè)polyfill可用(確保polyfill全局環(huán)境)

// 安裝
// npm install url-search-params-polyfill --save

ES2015+

import 'url-search-params-polyfill';

3.2 辦法2

這個(gè)辦法我建議使用,因?yàn)榭梢越鉀Q兼容性問(wèn)題
使用qs庫(kù)對(duì)數(shù)據(jù)進(jìn)行編碼

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

使用qs庫(kù)編碼發(fā)送請(qǐng)求后端也是可以接收到的。

3.3 辦法3

不推薦使用

axios.post(url,{data:{},
 headers:{content-type:'application/x-www-form-unlencoded'}
})

4 Request payload 和 FormData 區(qū)別

FormData和Payload是瀏覽器傳輸給后端接口的兩種內(nèi)容格式,這兩種方式瀏覽器是通過(guò)Content-Type來(lái)進(jìn)行區(qū)分的,如果是 application/x-www-form-urlencoded的話,則為formdata方式,如果是application/json或multipart/form-data的話,則為 request payload

下面內(nèi)容為后端內(nèi)容

4.1 后端代碼如何處理這兩種格式

Request payload
對(duì)于 Request Payload 請(qǐng)求, 必須加 @RequestBody 才能將請(qǐng)求正文解析到對(duì)應(yīng)的 bean 中,且只能通過(guò) request.getReader() 來(lái)獲取請(qǐng)求正文內(nèi)容

Form Data
無(wú)需任何注解,springmvc 會(huì)自動(dòng)使用 MessageConverter 將請(qǐng)求參數(shù)解析到對(duì)應(yīng)的 bean,且通過(guò) request.getParameter(…) 能獲取請(qǐng)求參數(shù)

我自己后端代碼就是因?yàn)闆](méi)有使用 request.getReader() 來(lái)獲取,才出現(xiàn)的問(wèn)題

上面內(nèi)容為后端內(nèi)容

5 復(fù)習(xí)js和jquery的請(qǐng)求

jquery的請(qǐng)求很方便,格式很清晰

$.ajax({
  url : targeturl,
  type : 'POST',
  data : formData,
  contentType : false,
  processData : false,
  cache : false,
  success : function(data) {
    if (data.success) {
      // success
    } else {
      // error
    }
  }
});

JavaScript

function sendData(data) {
 var XHR = new XMLHttpRequest();
 var urlEncodedData = "";
 var urlEncodedDataPairs = [];
 var name;
 // 將數(shù)據(jù)對(duì)象轉(zhuǎn)換為URL編碼的鍵/值對(duì)數(shù)組。
 for(name in data) {
  urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
 }
 urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
 // 定義成功數(shù)據(jù)提交時(shí)發(fā)生的情況
 XHR.addEventListener('load', function(event) {
  //
 });
 // 定義錯(cuò)誤提示
 XHR.addEventListener('error', function(event) {
  //
 });
 // 建立我們的請(qǐng)求
 XHR.open('POST', 'https://example.com/cors.php');
 // 為表單數(shù)據(jù)POST請(qǐng)求添加所需的HTTP頭
 XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 // 最后,發(fā)送我們的數(shù)據(jù)。
 XHR.send(urlEncodedData);
}

6 Axios知識(shí)點(diǎn)

6.1 全局默認(rèn)值

axios.defaults.baseURL = 'https://caeser.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

6.2 攔截器

//添加請(qǐng)求攔截器
axios.interceptors.request.use(function(config){
   // before success
   // must return config
   // 必須返回config
   return config;
  }, function(error){
   // error
  })
 
//添加響應(yīng)攔截器
axios.interceptors.response.use(function(response){
   // 
   return response;
  },function(error){
   // error
  });

或者自定義實(shí)體

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

7 總結(jié)

在學(xué)習(xí)vue的過(guò)程中是非常容易的,因?yàn)関ue真的很方便使用,學(xué)起來(lái)很快,都是模板語(yǔ)法,直接COPY就行了,而且邏輯性很簡(jiǎn)單,就是在使用的時(shí)候,各種版本和插件要學(xué)會(huì)調(diào)試,多嘗試多使用,而且為了好好寫(xiě)前端,我都下載了離線的CSS樣式文件,因?yàn)楹芏鄻邮轿叶紱](méi)背下來(lái),而且很多樣式我都不知道,有很多新的好用的特性,都是值得使用的。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • uniapp頁(yè)面完成水印添加功能代碼示例(自定義文字)

    uniapp頁(yè)面完成水印添加功能代碼示例(自定義文字)

    這篇文章主要介紹了uniapp頁(yè)面完成水印添加功能(自定義文字)的相關(guān)資料,包括如何編寫(xiě)頁(yè)面代碼、數(shù)據(jù)代碼以及如何展示效果圖,通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2025-01-01
  • 如何巧用Vue緩存函數(shù)淺析

    如何巧用Vue緩存函數(shù)淺析

    有時(shí)候不希望已經(jīng)請(qǐng)求過(guò)的數(shù)據(jù),再次請(qǐng)求重復(fù)執(zhí)行刷新操作,我們就需要使用數(shù)據(jù)緩存,這篇文章主要給大家介紹了關(guān)于如何巧用Vue緩存函數(shù)的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • vue3?hook重構(gòu)DataV的全屏容器組件詳解

    vue3?hook重構(gòu)DataV的全屏容器組件詳解

    這篇文章主要為大家介紹了vue3?hook重構(gòu)DataV的全屏容器組件詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04
  • Vue 監(jiān)聽(tīng)列表item渲染事件方法

    Vue 監(jiān)聽(tīng)列表item渲染事件方法

    今天小編就為大家分享一篇Vue 監(jiān)聽(tīng)列表item渲染事件方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • vue項(xiàng)目接口訪問(wèn)地址設(shè)置方式

    vue項(xiàng)目接口訪問(wèn)地址設(shè)置方式

    這篇文章主要介紹了vue項(xiàng)目接口訪問(wèn)地址設(shè)置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue 使用rules對(duì)表單字段進(jìn)行校驗(yàn)的步驟

    vue 使用rules對(duì)表單字段進(jìn)行校驗(yàn)的步驟

    這篇文章主要介紹了vue 使用rules對(duì)表單字段進(jìn)行校驗(yàn)的步驟,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2020-12-12
  • vue 解決移動(dòng)端彈出鍵盤(pán)導(dǎo)致頁(yè)面fixed布局錯(cuò)亂的問(wèn)題

    vue 解決移動(dòng)端彈出鍵盤(pán)導(dǎo)致頁(yè)面fixed布局錯(cuò)亂的問(wèn)題

    今天小編就為大家分享一篇vue 解決移動(dòng)端彈出鍵盤(pán)導(dǎo)致頁(yè)面fixed布局錯(cuò)亂的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-11-11
  • Vue3源碼分析偵聽(tīng)器watch的實(shí)現(xiàn)原理

    Vue3源碼分析偵聽(tīng)器watch的實(shí)現(xiàn)原理

    watch?的本質(zhì)就是觀測(cè)一個(gè)響應(yīng)式數(shù)據(jù),當(dāng)數(shù)據(jù)發(fā)生變化時(shí)通知并執(zhí)行相應(yīng)的回調(diào)函數(shù)。watch的實(shí)現(xiàn)利用了effect?和?options.scheduler?選項(xiàng),這篇文章主要介紹了Vue3源碼分析偵聽(tīng)器watch的實(shí)現(xiàn)原理,需要的朋友可以參考下
    2022-08-08
  • Antd的Table組件嵌套Table以及選擇框聯(lián)動(dòng)操作

    Antd的Table組件嵌套Table以及選擇框聯(lián)動(dòng)操作

    這篇文章主要介紹了Antd的Table組件嵌套Table以及選擇框聯(lián)動(dòng)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-10-10
  • vue 實(shí)現(xiàn)數(shù)字滾動(dòng)增加效果的實(shí)例代碼

    vue 實(shí)現(xiàn)數(shù)字滾動(dòng)增加效果的實(shí)例代碼

    最近做了個(gè)項(xiàng)目需要做數(shù)字滾動(dòng)增加的效果,剛開(kāi)始接到這個(gè)項(xiàng)目還真是懵了,后來(lái)發(fā)現(xiàn)實(shí)現(xiàn)代碼很簡(jiǎn)單的,下面小編給大家?guī)?lái)了vue 實(shí)現(xiàn)數(shù)字滾動(dòng)增加效果的實(shí)例代碼,需要的朋友參考下吧
    2018-07-07

最新評(píng)論

武宣县| 馆陶县| 谢通门县| 桃源县| 岗巴县| 伊金霍洛旗| 阿合奇县| 泌阳县| 定南县| 南汇区| 马公市| 江油市| 常山县| 盈江县| 安达市| 青神县| 西丰县| 隆尧县| 洞头县| 泸溪县| 微山县| 长寿区| 唐山市| 顺平县| 呼玛县| 西乌珠穆沁旗| 乌审旗| 阳信县| 乐都县| 衢州市| 连云港市| 靖远县| 海口市| 延安市| 北安市| 洮南市| 灌南县| 广平县| 习水县| 当阳市| 囊谦县|