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

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目实例中用query传参如何实现跳转效果

    目录 用query传参实现跳转效果 传值页面 接收参数页面 vue使用query传参,解决跳转回退无参数渲染页面,无内容的方法(不需使用缓存的技术) 简说params和query的区别 用query传参实现跳转效果 vue中已element-ui为例,写带参跳转很方便 <el-table :data="tables" style="width: 100%; cursor: pointer" :class="tableData.length >

  • vue3中路由传参query、params及动态路由传参详解

    目录 一.query传参 二.params传参 三.动态传参 四.query传参和params传参的区别 总结 一.query传参 编程式导航 使用router.push 或者 router.replace 的时候,改为对象形式新增query 必须传入一个对象 import { useRouter } from 'vue-router'; ... const router = useRouter() const toDetail = (item: Item) => { router.push({

  • Vue Router修改query参数url参数没有变化问题及解决

    目录 Router修改query参数url参数没有变化问题 正常情况下 就可以修改了 vueRouter不切换url只修改query报错 解决方案 Router修改query参数url参数没有变化问题 正常情况下 this.$router.push({ query:{} }) this.$router.replace({ query:{} }) 就可以修改了 但是当已有query对象里面修改其中一个值,就会发现虽然this.$route.query发生改变但是浏览器的url上的参数并没有发生变化

  • vue引入jquery时报错 $ is not defined的问题及解决

    vue引入jquery时报错 $ is not defined的问题及解决

    目录 vue引入jquery时报错 $ is not defined 安装JQuery 统一webpack版本 新建配置文件 vue错误笔记 Vue is not defined 事情的经过 找到两种解决方案 vue引入jquery时报错 $ is not defined 以免日后再次遇到忘记. 安装JQuery npm install --save jquery 统一webpack版本 不同版本处理方法可能不同,我们这里就统一一下webpack版本 npm uninstall webpack

  • 某些场景下建议vue query代替pinia原理解析

    目录 前言 使用区别 pinia vue-query 总结 趋势 前言 在 vue3 中,状态管理都是用的 pinia 来处理和存储从服务端获取的数据.使用 react 的同学应该对 swr.react-query.ahooks 的 useRequest(前两者的模仿)并不陌生,这些是专门用来处理数据请求的, 能够帮助你处理得到的数据.loading.error,还有缓存数据的功能等等.不止有 react-query.vue-query, 还有 svelte-query 和 solid-quer

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

    目录 在body和query中向后端传参 data params vue往后台传参(不是传对象) example 在body和query中向后端传参 在vue向Django后端传参的时候,常常会出现request.body或者其他为空的现象,主要原因是参数存放的位置不对.这里总结一下两种传参方式. data 我们需要传递的数据可以放在data中以键值对的形式来传递到后端. export function registerM(username, password) {     return req

  • vue项目中form data形式传参方式

    vue项目中form data形式传参方式

    目录 vue中form data形式传参 vue文件提交 FormData方式 前驱知识 FormDate FormData的使用 URL 实操 vue中form data形式传参 vue项目中form data形式传参,需要在headers中添加如下代码 headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' } 接口请求如下: export function subFaq (params) {

  • vue中的计算属性传参

    目录 vue计算属性传参 我们来看看下面的示例 vue计算属性传参,根据值不同,渲染相应的内容 业务描述 vue计算属性传参 最近很多小伙伴问到,计算属性怎么做到像普通函数一样传参呢? 针对这个问题 我们来看看下面的示例 <template>     <p>{{ getCallerName }}</p>  </template> <script> export default {     props: {         callRecord:

  • 微信小程序中多个页面传参通信的学习与实践

    前言 微信小程序越来越火,不少公司都在将原生代码转为微信小程序代码.在开发过程中,由于微信小程序wx.navigateBack方法并不支持返回传参,导致一些页面,尤其是从列表页面跳入详情页,用户在详情页改变了状态,返回后无论是否刷新页面,体验都不是很好.在android中,我们一般采用setresult方法来返回参数,或者直接使用rxjava框架或者eventbus框架来解决此类问题. 业务分析 此类需求大概意思是:A页面进入B页面,B页面返回并传值给A. 探索之路 刚开始我想采用一个比较偷懒的

  • 详解vuex中mutation/action的传参方式

    前言 在vuex中提交 mutation 是更改状态的唯一方法,并且这个过程是同步的,异步逻辑都应该封装到 action 里面.对于mutation/action,有一个常见的操作就是传参,也就是官网上说的"提交载荷". 这里是关于如何在vue-cli中使用vuex的方法,我们采用将vuex设置分割成不同模块的方法.其中,state模块中配置如下 //vuex中的state const state = { count: 0 } export default state; mutatio

  • C#中POST接口formdata传参模板的记录

    目录 POST接口formdata传参模板记录 C#模拟formdata提交参数 POST接口formdata传参模板记录 var res = ""; HttpClient _httpClient = new HttpClient(); var postContent = new MultipartFormDataContent(); string boundary = string.Format("--{0}", DateTime.Now.Ticks.ToStri

  • vue router使用query和params传参的使用和区别

    vue router使用query和params传参的使用和区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456

  • 如何处理vue router 路由传参刷新页面参数丢失

    如何处理vue router 路由传参刷新页面参数丢失

    概述 常见场景:点击列表的详情,跳转到详情内页,在内页根据传递的参数获取详情数据. 路由传参一般有如下几种方式,下面主要介编程式导航 router.push 的传参方式: 方法一:通过 params 传参 路由配置如下: { path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail } 通过 $router.push 中 path 携带参数的方式 // 列表中的传参 goDetail(row) { thi

  • vue路由传参方式的方式总结及获取参数详解

    目录 一.声明式传参 1.params传参(显示参数) 2.params传参(不显示参数) 3.query 传参 二.编程式传参 1.params传参(显示参数) 2.params传参(不显示参数) 3.query 传参 三.获取参数 1.params的获取方式 2.query的获取方式 四.需要注意的点 总结 一.声明式传参 1.params传参(显示参数) 在url中会显示出传参的值,刷新页面不会失去拿到的参数,使用该方式传值的时候,需要子路由提前配置好参数: //路由参数配置 const

  • Vue路由传参页面刷新后参数丢失原因和解决办法

    目录 vue路由传参方法 原因分析: 解决方案: 总结 vue路由传参方法 在编写vue项目时,时常会使用路由在不同页面中传递参数,常见使用方式如下: this.$router.push({ path: "/test", query: { a: 1, b: 2 } }) 这样我们就传递了两个参数,在 /test  页面 就可以接收这两个参数 let a = this.$route.query.a; let b = this.$route.query.b; 可以看到浏览器进行了url参数

随机推荐