如何通过Vue在body和query中向后端传递参数？

本文共计406个文字，预计阅读时间需要2分钟。

目录 + 在body和query中向后端传参 + data + params + Vue后台传参（非传对象） + example + 在body和query中向后端传参 + 在Vue向Django后端传参时，经常会发现request.body或其它为空的现像，主要原因为：

1. 请求方式错误

2.参数格式不正确

3.Django后端未正确解析参数

目录

• 在body和query中向后端传参
• data
• params
• vue往后台传参（不是传对象）
• example

在body和query中向后端传参

在vue向Django后端传参的时候，常常会出现request.body或者其他为空的现象，主要原因是参数存放的位置不对。这里总结一下两种传参方式。

data

我们需要传递的数据可以放在data中以键值对的形式来传递到后端。

export function registerM(username, password) {     return request({         url: 'login/register/',         method: 'post',         data: {             nickname: username,             pwd: password         }     }) }

在Django后端中我们通过request.data来访问vue传递的数据

    @action(methods=['post'], detail=False)     @csrf_exempt     def register(self, request, *args, **kwargs):         username = request.data.get("nickname")         pwd = request.data.get("pwd")

params

我们也可以通过params来传递数据，params也是健值对的形式。

export function SignInM(params) {     return request({         url: 'login/LogOn/',         method: 'post',         params: params     }) }

在Django后端我们可以使用request.query_params.get()来获取vue前端传递的数据。

    @action(methods=['post'], detail=False)     @csrf_exempt     def register(self, request, *args, **kwargs):         username = request.query_params.get('nickname')

vue往后台传参（不是传对象）

因为有规定必须用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     }); }

后台：

@PostMapping(value = "withdrawCount") public Object withdrawCount(@RequestParam(required = true) int date) {     return new UpmsResult(UpmsResultConstant.SUCCESS, dashboardService.withdrawCount(date)); }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。