Query Builder

工具简介：Query Builder

Query Builder 用于把 URL 查询参数按键值对形式可视化管理，并实时生成 query string 或完整 URL。它适合 API 调试、推广链接整理、筛选分页拼接，以及需要频繁修改参数的场景。

什么是 Query Builder？

Query Builder 把原本手动编辑 ?page=1&sort=desc&tag=dev 这类参数字符串的方式，改成更直观的结构化操作。你可以逐行新增、复制、删除参数，也可以更清楚地处理重复 key、空值和编码问题。

如何使用

1. 如果需要生成完整链接，先输入基础 URL。
2. 粘贴原始 query string 并解析，或手动新增参数行。
3. 逐行编辑 key 和 value。
4. 选择是否自动编码、是否跳过空行、输出时是否带 ?。
5. 复制生成后的 query string 或完整 URL。

常见使用场景

• 快速拼接 API 请求参数
• 整理 UTM 推广链接
• 组合分页、排序、筛选链接
• 删除空参数后重新生成 URL
• 在文档中演示查询参数结构

❓ 常见问题 FAQ

Q1：支持重复参数吗？
A：支持，重复 key 会按当前参数行顺序保留。

Q2：可以只生成 query string，不带基础 URL 吗？
A：可以，基础 URL 为空时也能单独输出查询参数部分。

Q3：为什么有些参数没有出现在结果里？
A：如果开启了“跳过空值”，空 key 的行会被自动忽略。

✨ 主要功能

• 以可视化键值对方式编辑查询参数
• 支持把已有 raw query string 解析成参数行
• 同时生成 query string 和完整 URL
• 可选自动编码，避免空格和特殊字符问题
• 可选跳过空参数行
• 支持 tag=js&tag=vue 这类重复 key

📖 使用示例

基础参数拼接

输入参数：

page = 2
sort = newest
tag = tools

生成结果：

?page=2&sort=newest&tag=tools

生成完整 URL

基础 URL：

https://example.com/search

输入参数：

q = query builder
lang = zh

生成结果：

https://example.com/search?q=query%20builder&lang=zh

重复参数

输入参数：

tag = javascript
tag = vue
tag = nuxt

生成结果：

?tag=javascript&tag=vue&tag=nuxt

🎯 适用场景

1. API 调试

快速调整分页、筛选、排序等参数，拼接请求地址更方便。

2. 营销链接整理

生成带有 utm_source、utm_medium、utm_campaign 的推广链接，避免手动改错。

3. 搜索与筛选页面

拼接商品筛选、搜索关键词、排序方式等前端页面常见参数。

4. 文档与教学演示

用更清晰的表格式结构说明查询参数是如何组成的。

💡 使用建议

• 基础 URL 和参数分开管理，后续替换域名会更方便。
• 参数值包含空格、符号或非 ASCII 字符时，建议开启自动编码。
• 复制正式链接前，建议开启“跳过空值”。
• 如果目标服务要求重复 key，不要合并，直接保留多行即可。