【前端开发】query参数和params参数的区别
在Web开发中,query参数(URL查询参数)和params参数(路由参数)是两种不同的URL传参方式,它们的核心区别如下:
一、 位置不同
| query参数 | params参数 | |
|---|---|---|
| 位置 | URL中?之后,用&连接多个参数 | URL路径中的一部分 |
| 示例 | /search?q=vue&page=2 | /user/123/profile |
二、 用途不同
| query参数 | params参数 | |
|---|---|---|
| 场景 | 可选的非关键参数(过滤、排序、分页等) | 必填的资源标识符(ID、slug等) |
| 特点 | 参数可缺失,顺序无关 | 参数是路径的一部分,通常不可缺失 |
示例对比:
# params标识资源:获取ID为456的商品
GET /api/products/456# query过滤资源:搜索价格≤100的手机,按销量排序
GET /api/products?category=phone&maxPrice=100&sort=sales
三、 代码获取方式不同
1. Express.js中获取参数
// params参数:通过 req.params 获取
app.get('/user/:id', (req, res) => {console.log(req.params.id); // 123
});// query参数:通过 req.query 获取
app.get('/search', (req, res) => {console.log(req.query.q); // "vue"console.log(req.query.page); // "2"
});
2. Vue Router中获取参数
// params参数:通过 $route.params 获取
this.$route.params.id // 123// query参数:通过 $route.query 获取
this.$route.query.q // "vue"
this.$route.query.page // "2"
四、 SEO与缓存影响
| query参数 | params参数 | |
|---|---|---|
| SEO | 可能被搜索引擎视为同一页面不同状态 | 通常作为独立页面处理 |
| 缓存 | 不同query可能共享缓存 | 不同params通常视为不同资源 |
五、 使用建议
-
用params的场景:
-
标识唯一资源(如
/user/:id) -
需要友好的URL结构(如
/blog/react-vs-vue) -
RESTful API设计中的资源定位
-
-
用query的场景:
-
过滤条件(如
?category=books) -
分页参数(如
?page=3&limit=20) -
排序参数(如
?sort=price&order=asc) -
不影响核心资源的可选参数
-
六、 高级技巧
-
混合使用:
# 同时使用params和query GET /category/books?minPrice=50&sort=rating -
类型转换:
// query参数默认是字符串,需手动转换类型 const page = Number(req.query.page) || 1; -
参数校验:
// 使用express-validator等库验证参数 checkParams('id').isInt({ min: 1 }) checkQuery('page').optional().isInt({ min: 1 })
总结:
-
params是路径的一部分,用于标识资源 -
query是附加参数,用于描述资源的状态
掌握二者的区别,能让你的URL设计更符合RESTful规范,同时提升API的可维护性和可读性。
相关文章:
【前端开发】query参数和params参数的区别
在Web开发中,query参数(URL查询参数)和params参数(路由参数)是两种不同的URL传参方式,它们的核心区别如下: 一、 位置不同 query参数params参数位置URL中?之后,用&连接多个参数…...
推荐系统召回算法
推荐系统召回算法 召回算法UserCFItemCFSwing矩阵分解 召回算法 基于协同过滤的召回算法主要是应用在推荐环节的早期阶段,大致可以分为基于用户、基于物品的。两者各有优劣,优点是具有较好的可解释性,缺点是对于稀疏的交互矩阵,效…...
Python基础(上)
1. 基础语法 1.1 环境安装 Python版本: 推荐使用Python 3.6.6及以上开发工具: PyCharm 1.2 基本语法 输出: print("Hello World") 注释: 单行注释: # 注释内容(快捷键 Ctrl/) 多行注释: 使用三引号 注释内容 注意:不推…...
【DuodooBMS】给PDF附件加“受控”水印的完整Python实现
给PDF附件加“受控”水印的完整Python实现 功能需求 在实际工作中,许多文件需要添加水印以标识其状态,例如“受控”“机密”等。对于PDF文件,添加水印不仅可以增强文件的可识别性,还可以防止未经授权的使用。本代码的功能需求是…...
【虚幻引擎UE】UE4.23到UE5.5的核心功能变化
简单总结从UE4.23到UE5.5,虚幻引擎的重大变化: 1. WebGL/HTML5 平台支持和像素流 UE4.23-UE4.25:移除官方HTML5支持,改为社区插件维护。 但通过第三方插件(如WebAssemblyWebGPU)可在浏览器运行部分项目。U…...
阿里云《AI 剧本生成与动画创作》解决方案技术评测
引言 随着人工智能技术的发展,越来越多的工具和服务被应用于内容创作领域。阿里云推出的《AI 剧本生成与动画创作》解决方案,利用函数计算 FC 构建 Web 服务,结合百炼模型服务和 ComfyUI 工具,实现了从故事剧本撰写、插图设计、声…...
commons-io 包 IOUtils、FileUtils、FilenameUtils
1. IOUtils void IOUtils.closeQuietly(Closeable... closeables) 无条件关闭流。int IOUtils.copy(InputStream inputStream, OutputStream outputStream) 将字节从InputStream复制到OutputStream,返回复制的长度,流最大不能超过2G,默认缓冲…...
JavaScript 加密技术全面指南
一、加密技术概述 在现代 Web 开发中,加密技术在保护用户数据和确保信息安全方面发挥着至关重要的作用。本文将带您了解 JavaScript 加密技术的基本概念、分类及其在实际应用中的场景。 加密的基本概念 加密是一种将明文数据转换为密文的技术,以保护数…...
【笔记】deep-seek wechat项目
1、安装ollama ollama官网 2、ollama上部署deepseek ollama官网下载deepseek模型(我下了1.5B) 3、配置python 国内镜像源 pip config set global.index-url https://mirrors.aliyun.com/pypi/simple/ 安装依赖包 pip install wxauto pip instal…...
FloodFill算法——搜索算法
一、什么是FloodFill算法 FloodFill算法字面意思就是洪水灌溉法,比如我们有这么一块地: 0表示平原,正数表示高地,负数表示凹地,那么当洪水来临时这些凹地会被优先灌满。而我们要找的正是这些联通块,如&…...
H5接入支付宝手机网站支付并实现
小程序文档 - 支付宝文档中心 1.登录 支付宝开放平台 创建 网页/移动应用 2.填写创建应用信息 3.配置开发设置 4.网页/移动应用:需要手动上线。提交审核后,预计 1 个工作日的审核时间。详细步骤可点击查看 上线应用 。应用上线后,还需要完成…...
基于SpringBoot+uniapp的在线办公小程序+LW示例参考
1.项目介绍 系统角色:管理员、普通用户功能模块:员工管理、部门信息管理、职位信息管理、会议记录、待办事项、工资信息、留言板等技术选型:SpringBoot,Vue(后端管理web),uniapp等测试环境&…...
文章精读篇——OMG-LLaVA
题目:OMG-LLaVA: Bridging Image-level, Object-level, Pixel-level Reasoning and Understanding 会议:Conference on Neural Information Processing Systems 2024 论文:http://arxiv.org/abs/2406.19389 主页:https://lxtgh…...
两个同一对象targetList和 sourceList 去重
我现在需要解决的问题是从一个Java的源列表`sourceList`中移除所有在目标列表`targetList`中存在的数据,并且还要去除`targetList`中的重复数据。让我先理清楚这两个问题的思路。 首先,如何快速从`sourceList`中移除含有`targetList`的数据。这里的“含有”应该是指两个列表中…...
软件开发 | GitHub企业版常见问题解读
什么是GitHub企业版? GitHub企业版是一个企业级软件开发平台,专为现代化开发的复杂工作流程而设计。 作为可扩展的平台解决方案,GitHub企业版使组织能够无缝集成其他工具和功能,并根据特定需求定制开发环境,提高整体…...
Docker 网络的配置与管理
目录 查看所有网络 查看网络详细信息 创建新的网络 删除网络 清理未使用的网络 将容器连接到网络 将容器从网络中断开 将容器端口映射到宿主机 绑定到特定 IP 地址 为容器设置自定义 DNS 查看所有网络 docker network ls 功能:列出所有 Docker 网络。 工…...
新手自学:如何用gromacs对简单分子复合物进行伞形采样
1、建立体系: 1、将蛋白的pdb文件转化为gmx: gmx pdb2gmx -f 2BEG_model1_capped.pdb -ignh -ter -o complex.gro 这个网页可以实现将多肽序列转化为pdb: ProBuilder On-line 这个教程的蛋白2BFG包含两条链(chain A和B) 在生成的topol文件中,增加如下的内容,效果就…...
力扣第一题 哈希解法 O(n)时间复杂度
题目: 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那俩个整数,并返回它们的数组下标。 你可以假设每种输入只会对应一个答案,并且你不能使用两次相同的元素。 你可以按任意顺序返…...
elementui: el-dialog的header设置样式不生效
问: el-dialog的header设置样式不生效 回答: 场景: <el-dialogv-model"dialogVisible"width"800px":before-close"beforeClose"append-to-body:close-on-click-modal"false"title"增加文…...
libpcap 的使用
1.libpcap的模式 有线环境: 使用混杂模式promisous,完成监听无线环境: 使用监听模式monitor,完成监听 2.交叉编译libpcap 设置好交叉编译工具链后下载libpcap源码使用configure进行构建:–disable-shared 构建静态库,–host 、…...
css实现圆环展示百分比,根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学(ECC)是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础,例如椭圆曲线数字签…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板,就像一个模具,里面可以将不同类型的材料做成一个形状,其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式:templa…...
Java毕业设计:WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发,实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构,服务器端使用Java Servlet处理请求,数据库采用MySQL存储信息࿰…...
逻辑回归暴力训练预测金融欺诈
简述 「使用逻辑回归暴力预测金融欺诈,并不断增加特征维度持续测试」的做法,体现了一种逐步建模与迭代验证的实验思路,在金融欺诈检测中非常有价值,本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...
