vue在body和query中如何向后端传参

 更新时间:2022年09月07日 09:20:26   作者:沃特艾文儿~  
这篇文章主要介绍了vue在body和query中如何向后端传参,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

在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));
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue常用知识点整理

    vue常用知识点整理

    Vue是一套用于构建用户界面的渐进式JavaScript框架。这篇文章整理了vue中的常用知识点,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 基于vue2框架的机器人自动回复mini-project实例代码

    基于vue2框架的机器人自动回复mini-project实例代码

    本篇文章主要介绍了基于vue2框架的机器人自动回复mini-project实例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-06-06
  • Vue 框架之动态绑定 css 样式实例分析

    Vue 框架之动态绑定 css 样式实例分析

    这篇文章主要介绍了Vue 框架之动态绑定 css 样式的方法,本文通过分享小实例给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • vue3中关于i18n字符串转义问题

    vue3中关于i18n字符串转义问题

    这篇文章主要介绍了vue3中关于i18n字符串转义问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • vue中使用过滤器filters的this为undefined的问题

    vue中使用过滤器filters的this为undefined的问题

    这篇文章主要介绍了vue中使用过滤器filters的this为undefined的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • Vue.js学习之过滤器详解

    Vue.js学习之过滤器详解

    过滤器,本质上就是一个函数。其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果。下面这篇文章主要给大家介绍了Vue.js中过滤器的相关资料,需要的朋友可以参考借鉴,一起来看看吧。
    2017-01-01
  • 关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)

    关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)

    这篇文章主要介绍了关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性),需要的朋友可以参考下
    2018-09-09
  • 基于vue-cli3+typescript的tsx开发模板搭建过程分享

    基于vue-cli3+typescript的tsx开发模板搭建过程分享

    这篇文章主要介绍了搭建基于vue-cli3+typescript的tsx开发模板,本文通过实例代码截图的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • Vue3之修改端口号方式

    Vue3之修改端口号方式

    这篇文章主要介绍了Vue3之修改端口号方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue项目开发环境工具node搭建过程

    vue项目开发环境工具node搭建过程

    最近在开始接触做vue框架的前端项目,以前用的前端比如html,js,css等都是比较原生的,写好后直接浏览器打开就行,今天就先记录一下vue的开发运行搭建过程,感兴趣的朋友一起看看吧
    2023-09-09

最新评论