vue在body和query中如何向后端傳參
在body和query中向后端傳參
在vue向Django后端傳參的時(shí)候，常常會(huì)出現(xiàn)request.body或者其他為空的現(xiàn)象，主要原因是參數(shù)存放的位置不對(duì)。這里總結(jié)一下兩種傳參方式。
data
我們需要傳遞的數(shù)據(jù)可以放在data中以鍵值對(duì)的形式來(lái)傳遞到后端。
export function registerM(username, password) {
? ? return request({
? ? ? ? url: 'login/register/',
? ? ? ? method: 'post',
? ? ? ? data: {
? ? ? ? ? ? nickname: username,
? ? ? ? ? ? pwd: password
? ? ? ? }
? ? })
}在Django后端中我們通過(guò)request.data來(lái)訪問(wèn)vue傳遞的數(shù)據(jù)
? ? @action(methods=['post'], detail=False)
? ? @csrf_exempt
? ? def register(self, request, *args, **kwargs):
? ? ? ? username = request.data.get("nickname")
? ? ? ? pwd = request.data.get("pwd")params
我們也可以通過(guò)params來(lái)傳遞數(shù)據(jù)，params也是健值對(duì)的形式。
export function SignInM(params) {
? ? return request({
? ? ? ? url: 'login/LogOn/',
? ? ? ? method: 'post',
? ? ? ? params: params
? ? })
}在Django后端我們可以使用request.query_params.get()來(lái)獲取vue前端傳遞的數(shù)據(jù)。
? ? @action(methods=['post'], detail=False)
? ? @csrf_exempt
? ? def register(self, request, *args, **kwargs):
? ? ? ? username = request.query_params.get('nickname')vue往后臺(tái)傳參（不是傳對(duì)象）
因?yàn)橛幸?guī)定必須用post提交
example
vue:
withdrawCount(){
? ? let formData = new FormData();
? ? formData.append("date",this.date);
? ? withdrawCount(formData).then(response => {
? ? });
},js:
export function withdrawCount(query) {
? ? return fetch({
? ? ? ? url: commonUrl + '/withdrawCount',
? ? ? ? method: 'POST',
? ? ? ? data: query
? ? });
}后臺(tái)：
@PostMapping(value = "withdrawCount")
public Object withdrawCount(@RequestParam(required = true) int date) {
? ? return new UpmsResult(UpmsResultConstant.SUCCESS, dashboardService.withdrawCount(date));
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。這篇文章整理了vue中的常用知識(shí)點(diǎn)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼
本篇文章主要介紹了基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06
Vue 框架之動(dòng)態(tài)綁定 css 樣式實(shí)例分析
這篇文章主要介紹了Vue 框架之動(dòng)態(tài)綁定 css 樣式的方法，本文通過(guò)分享小實(shí)例給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
vue3中關(guān)于i18n字符串轉(zhuǎn)義問(wèn)題
這篇文章主要介紹了vue3中關(guān)于i18n字符串轉(zhuǎn)義問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue中使用過(guò)濾器filters的this為undefined的問(wèn)題
這篇文章主要介紹了vue中使用過(guò)濾器filters的this為undefined的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
過(guò)濾器，本質(zhì)上就是一個(gè)函數(shù)。其作用在于用戶輸入數(shù)據(jù)后，它能夠進(jìn)行處理，并返回一個(gè)數(shù)據(jù)結(jié)果。下面這篇文章主要給大家介紹了Vue.js中過(guò)濾器的相關(guān)資料,需要的朋友可以參考借鑒，一起來(lái)看看吧。2017-01-01
關(guān)于vue v-for 循環(huán)問(wèn)題(一行顯示四個(gè),每一行的最右邊那個(gè)計(jì)算屬性)
這篇文章主要介紹了關(guān)于vue v-for 循環(huán)問(wèn)題(一行顯示四個(gè),每一行的最右邊那個(gè)計(jì)算屬性),需要的朋友可以參考下2018-09-09
基于vue-cli3+typescript的tsx開(kāi)發(fā)模板搭建過(guò)程分享
這篇文章主要介紹了搭建基于vue-cli3+typescript的tsx開(kāi)發(fā)模板,本文通過(guò)實(shí)例代碼截圖的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Vue3之修改端口號(hào)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue項(xiàng)目開(kāi)發(fā)環(huán)境工具node搭建過(guò)程
最近在開(kāi)始接觸做vue框架的前端項(xiàng)目,以前用的前端比如html,js,css等都是比較原生的,寫好后直接瀏覽器打開(kāi)就行,今天就先記錄一下vue的開(kāi)發(fā)運(yùn)行搭建過(guò)程,感興趣的朋友一起看看吧2023-09-09