put请求时传参的格式

在前后端交互的项目中,我在前端调用接口的时候,发现在apifox里面进行发送测试的时候数据是可以获取成功的,但是在浏览器总是显示

put请求时传参的格式_第1张图片

 请求参数错误   【原因在于调用接口里面的数据的时候直接调用了需要的数据】

而它需要以键值对的方式进行

键值数据库是一种非关系数据库,它使用简单的键值方法来存储数据。键值数据库将数据存储为键值对集合,其中键作为唯一标识符。键和值都可以是从简单对象到复杂复合对象的任何内容。

 methods: {
        // 开关切换
        onChange(index) {
            console.log(this.allDepList[index].dept_id);
            requpdate(this.allDepList[index].dept_id).then(res => {
                console.log(res, '是否开启考勤');
            })
        },

这是一个put请求所以传递的,所以里面的参数不能直接拼接调用的形式,如下图

export const reqSubs = (subscriber, subscribee) => requests({ url: `/api/leave/SubscribeToSomeone?sub=${subscriber}&subscr=${subscribee}`, method: 'post' })

put请求在接口里面调用数据(如下图):

export const requpdate = (dept) => requests({ url: `/api/ding/dept/updateDept`, method: 'put', data: dept })

接口调用之后在对应的vue组件里面引入接口

import {  requpdate } from "@/api"

 定义数组来接收数据

export default{
data(){
return {
allList:[]    // 这里是自己定义的数组用来接收数据的
     }
   }
 }

之后在methods里面进行方法的调用

 methods: {
        // 开关切换
        onChange(index) {
            console.log(this.allList[index].dept_id);
            requpdate({ "dept_id": this.allList[index].dept_id }).then(res => {
                console.log(res, '是否开启考勤');
            })
        },

put请求时传参的格式_第2张图片

 更新成功之后获取的数据是以 data:{}  方式进行展示的,我们第一次进行调用的时候直接调用了对应的数,就是只获取了一个数而不是对象的存储格式所以需要加上括号,再以键值对的形式进行展示

 

你可能感兴趣的:(vue)