当前位置: 首页 > news >正文

js vue axios post 数组请求参数获取转换, 后端go参数解析(gin框架)全流程示例

今天介绍的是前后端分离系统中的请求参数 数组参数的生成,api请求发送,到后端请求参数接收的全过程示例。   

为何会有这个文章:后端同一个API接口同时处理单条或者多条数据,这样就要求我们在前端发送请求参数的时候需要统一将请求参数转换为一个数组(单条数据转换为数组)。 而我们在vue里面如果是这样 const idsStr = row.id || ids.value;  这样的话我们的请求参数就有可能是单条数据或者是一个数组, 而在go语言里面是严格区分数据类型的,同时POST数据发送到后端后都是以流的形式发送的,我们无法多次使用c.ShouldBind来多次绑定请求参数。

js axios网络API数据请求方法定义

这里将请求参数id统一转换为数组,  因为这里的请求参数id, 有可能是一个原始值 , 也有肯能是一个数组。

//url可用性检测
// 这里的参数id有可能是一个数组,也有可能是一个值,
// 这里在最终发送的时候都转换为数组来传递
export function checkUrl(id) {let arr = []; // 创建一个数组if (id instanceof Array) {arr = id; // 如果入参是一个数组 Proxy(Array) 则将他赋值给 arr} else {arr.push(id); // 将参数id放入到数组中}return request({url: "/video/parser/checkUrl",method: "POST",data: {ids:arr}});
}

上面的js示例中我们使用了  instanceof 关键字来判断一个对象是否是数组,js中我们还可以使用原型链 Array.prototype.isPrototypeOf(arr) 来判断 或者使用Array中的isArray方法来判断 Array.isArray(arr)。 还有在axios的网络请求中,请求参数的传递有2种方式即通过 data 或者params来传递请求参数,他们也是有很大区别的,具体如下:

axios data 请求参数传递 

通过data传递请求参数,只能应用于非GET请求方式的情况GET方式传递请求参数只能通过params的方式 传递请求参数

注意上面的请求方式为POST,数据时通过data来传递的。 最后生成的请求参数是这样的

vue里面使用selection获取的ids请求参数,他是一个数组。

axios params 请求参数

如果在请求体里面使用了params来传递请求参数, 最后的请求参数都会被生成为url附加到请求url中。,如下:

const ids= row.id || ids.value; 这里的row.id有值,这个时候传递给接口的就是一个原始值非数组,这时axios的网络请求载荷是这样的:

这个时候我们发送的数据的key是  ids  , 而后面的数组的时候发送的key是 ids[]  他们是完全不同的2个key哦

POST请求+params + 数组 通过 axios 发送网络请求【const ids= row.id || ids.value;这里的row.id没有值,传递的是 ids.value的值】后的 载荷效果图

vue数据绑定和api请求 示例

以下示例展示了vue端,api 数据请求方法,和请求参数获取,批量请求参数,和单个的请求参数获取和发送的示例。 由于js属于弱类型的语言,所以在发送参数的时候是没有强制类型判断的。


<template>
<!-- 批量检测按钮,点击这里时先选择multiple  --><el-col :span="1.5"><el-button:disabled="multiple"@click="handleCheckUrl"v-hasPermi="['POST:/video/parser/checkUrl']"type="success">URL检测</el-button></el-col><!-- 数据列表展示, 对单条数据进行检测 --><el-table ref="listRef" v-loading="loading" :data="parserList" @selection-change="handleSelectionChange" ><el-table-column type="selection" width="55" align="center" /><el-table-column label="数据ID" align="center" prop="id" /><el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width"><template #default="scope"><el-tooltip content="检测" placement="top"><el-buttontype="text"icon="CaretRight"@click="handleCheckUrl(scope.row)"v-hasPermi="['DELETE:/video/parser/checkUrl']"></el-button></el-tooltip></template></el-table-column>//......</el-table></template><script setup name="BizVideoParser">
import { checkUrl } from "@/api/video/parser";const ids = ref([]);
const multiple = ref(true);/** 多选框选中数据 */
function handleSelectionChange(selection) {// console.log(selection);ids.value = selection.map(item => {return item.id;});multiple.value = !selection.length;
}/* 检测 */
function handleCheckUrl(row) {// 这里的 ids.value 就是一个数组,而 row.id 则是一个具体的值const idsStr = row.id || ids.value;proxy.$modal.confirm('确认要对数据编号为"' + idsStr + '"的数据执行检测吗?').then(function () {return checkUrl(idsStr);}).then((res) => {proxy.$modal.msgSuccess(res.data);getList();}).catch(() => {});
}</script>

selection 数据请求复选框 效果

go后端 gin 框架请求参数解析示例

gin框架获取请求传递的参数, 我们只需要定义一个结构体, 然后使用 ShouldBind方法就可很方便的获取前端发送的请求参数。 以下为示例:

// ids请求参数接收结构体
type IdsArrReq struct {Ids []int64 `form:"ids"`
}// 请求参数接收方法 示例。。。。
func (a *parserApi) CheckUrl(c *ginx.XContext) {var req = &IdsArrReq{}// 获取参数if err := c.ShouldBind(req); err != nil {global.Log.Debug(err.Error())}// 这里的 req.Ids 的类型就是 []int64 了if len(req.Ids) < 1 {a.Err(c, "id参数缺失!")return}// .......}

总结:

        我们在统一了请求的请求数据类型后,后端就可以通过一个参数来接收了, 而且在gin框架里面,我们可以非常方便的使用c.ShouldBind来接收请求参数。这里的关键是就在前端发送api请求的时候将请求参数的类型统一转换为数组,这样后端就可以通过定义一个数组来接收了。

相关文章:

js vue axios post 数组请求参数获取转换, 后端go参数解析(gin框架)全流程示例

今天介绍的是前后端分离系统中的请求参数 数组参数的生成&#xff0c;api请求发送&#xff0c;到后端请求参数接收的全过程示例。 为何会有这个文章&#xff1a;后端同一个API接口同时处理单条或者多条数据&#xff0c;这样就要求我们在前端发送请求参数的时候需要统一将请…...

揭秘郭采洁浪漫升级

【揭秘&#xff01;郭采洁浪漫升级&#xff0c;与“莫拉怪乐”共谱爱情新篇章】在这个春意盎然的季节里&#xff0c;娱乐圈迎来了一则既意外又甜蜜的爆炸新闻——郭采洁&#xff0c;这位以独特气质与精湛演技著称的才女&#xff0c;悄然间迈入了人生的新阶段&#xff0c;而她的…...

数据结构(Java):力扣牛客 二叉树面试OJ题(一)

&#x1f449; ​​​​​​目录 &#x1f448; 1、题一&#xff1a;检查两棵树是否相同 1.1 思路分析 1.2 代码 2、题二&#xff1a;另一棵树的子树 2.1 思路分析 2.2 代码 3、题三&#xff1a;翻转二叉树 3.1 思路分析 3.2 代码 4、题四&#xff1a;判断树是否对称 …...

在国产芯片上实现YOLOv5/v8图像AI识别-【1.3】YOLOv5的介绍及使用(训练、导出)更多内容见视频

本专栏主要是提供一种国产化图像识别的解决方案&#xff0c;专栏中实现了YOLOv5/v8在国产化芯片上的使用部署&#xff0c;并可以实现网页端实时查看。根据自己的具体需求可以直接产品化部署使用。 B站配套视频&#xff1a;https://www.bilibili.com/video/BV1or421T74f 数据…...

逻辑门的题目怎么做?

FPGA语法练习——二输入逻辑门&#xff0c;一起来听~~ FPGA语法练习——二输入逻辑门 题目介绍&#xff1a;F学社-全球FPGA技术提升平台 (zzfpga.com)...

CentOS 7报错:yum命令报错 “ Cannot find a valid baseurl for repo: base/7/x86_6 ”

参考连接&#xff1a; 【linux】CentOS 7报错&#xff1a;yum命令报错 “ Cannot find a valid baseurl for repo: base/7/x86_6 ”_centos linux yum search ifconfig cannot find a val-CSDN博客 Centos7出现问题Cannot find a valid baseurl for repo: base/7/x86_64&…...

51单片机STC89C52RC——18.1 HC-SR04超声波测距

目的/效果 独立按键K1按下后开始测距&#xff0c;LCD显示距离&#xff08;mm&#xff09; 一&#xff0c;STC单片机模块 二&#xff0c;HC-SR04 超声波测距 2.1 HC-SR04 简介 HC-SR04超声波测距模块提供2cm~400cm的测距功能&#xff0c;精度达3mm。 2.2 时序 以上时序图表明…...

WordPress与 wp-cron.php

WordPress 傲居全球最流行的内容管理系统&#xff08;CMS&#xff09;之位&#xff0c;占据了互联网约43%的网站后台&#xff0c;这主要得益于其直观易用的用户界面以及丰富的扩展功能&#xff0c;特别是为新手用户提供了极大的便利。 然而&#xff0c;在畅享WordPress带来的便…...

bb-------

社保费申报及缴纳...

数据挖掘与分析部分实验与实训项目报告

一、机器学习算法的应用 1. 朴素贝叶斯分类器 相关代码 import pandas as pd from sklearn.model_selection import train_test_split from sklearn.naive_bayes import GaussianNB, MultinomialNB from sklearn.metrics import accuracy_score # 将数据加载到DataFrame中&a…...

Python中使用SpeechLib实现文本转换语音朗读的示例(修正bug)

一、修正SpeechLib的导入包顺序后的代码&#xff1a; from comtypes.client import CreateObjectengine CreateObject(SAPI.SpVoice) stream CreateObject(SAPI.SpFileStream)from comtypes.gen import SpeechLibinfile E:\\语音文档\\易经64卦读音.txt outfile E:\\demo.…...

政安晨【零基础玩转各类开源AI项目】基于Ubuntu系统部署Hallo :针对肖像图像动画的分层音频驱动视觉合成

政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: 零基础玩转各类开源AI项目 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff01; 本文目标&#xff1a;在Ubuntu系统上部署Hallo&#x…...

Spring Boot1(概要 入门 Spring Boot 核心配置 YAML JSR303数据校验 )

目录 一、Spring Boot概要 1. SpringBoot优点 2. SpringBoot缺点 二、Spring Boot入门开发 1. 第一个SpringBoot项目 项目创建方式一&#xff1a;使用 IDEA 直接创建项目 项目创建方式二&#xff1a;使用Spring Initializr 的 Web页面创建项目 &#xff08;了解&#…...

电脑屏幕录制怎么弄?分享3个简单的电脑录屏方法

在信息爆炸的时代&#xff0c;屏幕上的每一个画面都可能成为我们生活中不可或缺的记忆。作为一名年轻男性&#xff0c;我对于录屏软件的需求可以说是既挑剔又实际。今天&#xff0c;我就为大家分享一下我近期体验的三款录屏软件&#xff1a;福昕录屏大师、转转大师录屏大师和OB…...

idea双击没有反应,打不开

问题描述 Error opening zip file or JAR manifest missing : /home/IntelliJ-IDEA/bin/jetbrains-agent.jar解决方案...

关于UniApp使用的个人笔记

UniApp 开发者中心 用于注册应用以及申请对应证书 https://dev.dcloud.net.cn/pages/app/list https://blog.csdn.net/fred_kang/article/details/124988303 下载证书后&#xff0c;获取SHA1关键cmd keytool -list -v -keystore test.keystore Enter keystore password…...

autoware.universe源码略读(3.16)--perception:object_range_splitter

autoware.universe源码略读3.16--perception:object_range_splitter Overviewnode&#xff08;Class Constructor&#xff09;ObjectRangeSplitterNode::ObjectRangeSplitterNode&#xff08;mFunc&#xff09;ObjectRangeSplitterNode::objectCallback Overview 这里处理的依…...

深度学习落地实战:人脸五官定位检测

前言 大家好,我是机长 本专栏将持续收集整理市场上深度学习的相关项目,旨在为准备从事深度学习工作或相关科研活动的伙伴,储备、提升更多的实际开发经验,每个项目实例都可作为实际开发项目写入简历,且都附带完整的代码与数据集。可通过百度云盘进行获取,实现开箱即用 …...

270-VC709E 基于FMC接口的Virtex7 XC7VX690T PCIeX8 接口卡

一、板卡概述 本板卡基于Xilinx公司的FPGA XC7VX690T-FFG1761 芯片&#xff0c;支持PCIeX8、两组 64bit DDR3容量8GByte&#xff0c;HPC的FMC连接器&#xff0c;板卡支持各种FMC子卡扩展。软件支持windows&#xff0c;Linux操作系统。 二、功能和技术指标&#xff1a; 板卡功…...

【go】Excelize处理excel表 带合并单元格、自动换行与固定列宽的文件导出

文章目录 1 简介2 相关需求与实现2.1 导出带单元格合并的excel文件2.2 导出增加自动换行和固定列宽的excel文件 1 简介 之前整理过使用Excelize导出原始excel文件与增加数据校验的excel导出。【go】Excelize处理excel表 带数据校验的文件导出 本文整理使用Excelize导出带单元…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...