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

Cursor小试1.生成一个网页的接口请求工具

news 2026/4/3 9:08:31

一般开发过程中,会涉及到接口的调试,往往有时候开发的电脑不是我们自己的,没有安装一些类似postman 的接口调用工具,所以发现问题或者要测试某些接口是否正常的时候会很麻烦,而且现在网上也没有找到很好的免费的网页端接口请求的网址,所以我们使用Cursor来编写这样一个小工具,

直接打开Cursor,在COMPOSER 中提问:

"你是一个高级的前端开发者以及设计师, 请实现一个网页,可以直接在网页里 调用接口请求,类似postman 等接口调用工具一样的功能,支持GET,POST等请求,请实现一个"

然后它会帮你实现一个简单的 API 测试工具网页,它将创建一个包含基本功能的界面，支持 GET 和 POST 请求。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>API 测试工具</title><style>* {box-sizing: border-box;margin: 0;padding: 0;}body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;padding: 20px;background-color: #f5f5f5;}.container {max-width: 1000px;margin: 0 auto;background-color: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}.input-group {margin-bottom: 15px;}.input-group label {display: block;margin-bottom: 5px;font-weight: bold;}select, input, textarea {width: 100%;padding: 8px;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;}textarea {min-height: 120px;font-family: monospace;}button {background-color: #4CAF50;color: white;padding: 10px 20px;border: none;border-radius: 4px;cursor: pointer;font-size: 14px;}button:hover {background-color: #45a049;}.response {margin-top: 20px;padding: 15px;background-color: #f8f9fa;border-radius: 4px;border: 1px solid #ddd;}.response pre {white-space: pre-wrap;word-wrap: break-word;}</style>
</head>
<body><div class="container"><h1>API 测试工具</h1><div class="input-group"><label for="method">请求方法</label><select id="method"><option value="GET">GET</option><option value="POST">POST</option><option value="PUT">PUT</option><option value="DELETE">DELETE</option></select></div><div class="input-group"><label for="url">URL</label><input type="url" id="url" placeholder="请输入 API 地址"></div><div class="input-group"><label for="headers">请求头 (JSON 格式)</label><textarea id="headers" placeholder='{"Content-Type": "application/json"}'></textarea></div><div class="input-group"><label for="body">请求体 (JSON 格式)</label><textarea id="body" placeholder='{"key": "value"}'></textarea></div><button onclick="sendRequest()">发送请求</button><div class="response"><h3>响应结果：</h3><pre id="response"></pre></div></div><script>async function sendRequest() {const method = document.getElementById('method').value;const url = document.getElementById('url').value;const headersText = document.getElementById('headers').value;const bodyText = document.getElementById('body').value;const responseElement = document.getElementById('response');try {// 解析请求头const headers = headersText ? JSON.parse(headersText) : {};// 构建请求配置const config = {method: method,headers: headers};// 如果有请求体且不是 GET 请求，添加请求体if (bodyText && method !== 'GET') {config.body = bodyText;}// 发送请求const response = await fetch(url, config);const data = await response.json();// 显示响应responseElement.textContent = JSON.stringify(data, null, 2);} catch (error) {responseElement.textContent = `错误: ${error.message}`;}}</script>
</body>
</html>

直接运行尝试,可以正常运行,后续你也可以继续完善这个功能,按照你需要的,

相关文章：

Cursor小试1.生成一个网页的接口请求工具

一般开发过程中,会涉及到接口的调试,往往有时候开发的电脑不是我们自己的,没有安装一些类似postman 的接口调用工具,所以发现问题或者要测试某些接口是否正常的时候会很麻烦,而且现在网上也没有找到很好的免费的网页端接口请求的网址,所以我们使用Cursor来编写这样一个小工具, …...

编程日记 2025/1/2 12:00:27

Xilinx DCI技术

Xilinx DCI技术 DCI技术概述Xilinx DCI技术实际使用某些Bank特殊DCI要求 DCI级联技术DCI端接方式阻抗控制驱动器&#xff08;源端接&#xff09;半阻抗控制阻抗驱动器&#xff08;源端接&#xff09;分体式DCI&#xff08;戴维宁等效端接到VCCO/2&#xff09;DCI和三态DCI&…...

编程日记 2025/1/2 11:57:24

Kubernetes Pod 优雅关闭：如何让容器平稳“退休”？

Kubernetes Pod 优雅关闭&#xff1a;如何让容器平稳“退休”&#xff1f; 在 Kubernetes 中&#xff0c;Pod 是应用的基本单元。你可能会遇到需要停止某个 Pod 或容器的情况&#xff0c;可能是因为要更新、调整或故障恢复。在这种情况下&#xff0c;Pod 的优雅关闭&#xff0…...

编程日记 2025/1/2 11:56:23

鸿蒙应用开发（1）

可能以为通过 鸿蒙应用开发启航计划&#xff08;点我去看上一节&#xff09; 的内容&#xff0c;就足够了&#xff0c;其实还没有。 可是我还是要告诉你&#xff0c;你还需要学习新的语言 -- ArkTS。 &#xff0c;ArkTS是HUAWEI开发的程序语言。你需要学习这门语言。这会花费你…...

编程日记 2025/1/2 11:55:22

SimForge HSF 案例分享｜复杂仿真应用定制——UAVSim无人机仿真APP（技术篇）

导读 「神工坊」核心技术——「SimForge HSF高性能数值模拟引擎」支持工程计算应用的快速开发、自动并行&#xff0c;以及多域耦合、AI求解加速&#xff0c;目前已实现航发整机数值模拟等多个系统级高保真数值模拟应用落地&#xff0c;支持10亿阶、100w核心量级的高效求解。其低…...

编程日记 2025/1/2 11:53:19

使用 Adaptive Mesh Refinement 加速 CFD 仿真：最佳实践

CFD 仿真中的网格划分挑战 技术的进步正在增强设计探索&#xff0c;数值仿真在优化工程设计方面发挥着至关重要的作用。通常&#xff0c;计算流体动力学 &#xff08;CFD&#xff09; 仿真从定制的手工网格开始&#xff0c;具有精细和粗糙的区域&#xff0c;以平衡分辨率和单元…...

编程日记 2025/1/2 11:50:14

前端-动画库Lottie 3分钟学会使用

目录 1. Lottie地址 2. 使用html实操 3. 也可以选择其他的语言 1. Lottie地址 LottieFiles: Download Free lightweight animations for website & apps.Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs.…...

编程日记 2025/1/2 11:49:13

智能工厂的设计软件 应用场景的一个例子：为AI聊天工具添加一个知识系统 之5

本文要点 前端 问题描述语言 本文继续完善 “描述” ---现在我们应该可以将它称为 “问题problem描述语言 ”。 它 通过对话框的question 引发 表征的issue 的“涌现” 最终 厘清应用程序的“problem”。即它合并了 ISO七层模型中的上面三层&#xff0c;通过将三层 分别形成…...

编程日记 2025/1/2 11:48:12

java web

流程 1.浏览器发送http协议的格式数据和url给服务器软件tomcat 2.浏览器解析http格式数据并创建request和response对象,把数据封装到request对象里。 3.tomcat解析url确定访问路径&#xff0c;如果是静态资源html等&#xff0c;直接将html数据作为http格式响应体返回&#x…...

编程日记 2025/1/2 11:47:11

【嵌入式软件开发】嵌入式软件计时逻辑的两种实现：累加与递减的深入对比

本文主要从四个方面详细阐述了嵌入式软件编程中计时逻辑的两种实现方式：累加和递减。让我为您详细解析各个部分： 1. 基本概念对比 累加方式 从0开始向上计数每个周期增加固定值（通常为1）类似于我们日常生活中的秒表计时方式递减方式 从预设值开始向下计数每个周期减少固定…...

编程日记 2025/1/2 11:45:09

如何将vCenter6.7升级7.0？

vCenter是什么&#xff1f; vCenter是一种虚拟化管理软件&#xff0c;由VMware公司开发和发布。它是VMware vSphere虚拟化平台的核心组件之一&#xff0c;主要用于集中管理和监控虚拟化环境中的虚拟机、虚拟存储和网络资源。vCenter可以实现对多个ESXi主机的集中管理&#xff…...

编程日记 2025/1/2 11:41:04

服务器网卡绑定mode和交换机的对应关系

互联网各领域资料分享专区(不定期更新)&#xff1a; Sheet 模式类别 网卡绑定mode共有七种(0~6): bond0、bond1、bond2、bond3、bond4、bond5、bond6 mode详解 mode0 &#xff0c;即:(balance-rr) Round-robin policy(平衡轮循环策略&#xff0c;需要配置交换机静态聚合) mode…...

编程日记 2025/1/2 11:39:02

Maven (day04)

什么是maven? Maven 是 Apache 旗下的一个开源项目&#xff0c;是一款用于管理和构建 java 项目的工具。 官网&#xff1a;Welcome to Apache Maven – Maven https://maven.apache.org/ Maven的作用 依赖管理&#xff08;方便快捷的管理项目依赖的资源(jar包)&#xff…...

编程日记 2025/1/2 11:37:00

Echart实现3D饼图示例

在可视化项目中&#xff0c;很多地方会遇见图表&#xff1b;echart是最常见的&#xff1b;这个示例就是用Echart&#xff0c; echart-gl实现3D饼图效果&#xff0c;复制即可用 //需要安装&#xff0c;再引用依赖import * as echarts from "echarts"; import echar…...

编程日记 2025/1/2 11:34:58

UE5 Debug的一些心得

1、BUG粗略可分为两类&#xff1a; 一种是显性的&#xff0c;编译直接就通不过&#xff0c;必须马上解决。 第二种是隐性的&#xff0c;新功能完成后&#xff0c;编译成功顺利运行&#xff0c;洋洋自得&#xff0c;而问题隐藏在幕后&#xff0c;测试之后才逐渐发现有问题&…...

编程日记 2025/1/2 11:32:55

java中多线程的一些常见操作

Java 中的多线程是通过并发编程来提高应用程序的效率和响应速度。Java 提供了多个机制和类来支持多线程编程&#xff0c;包括继承 Thread 类、实现 Runnable 接口、使用线程池等。以下是 Java 中一些常见的多线程操作和应用场景。 1. 创建线程 1.1 通过继承 Thread 类创建线程…...

编程日记 2025/1/2 11:27:49

【gopher的java学习笔记】什么是Spring - IoC和DI

一聊到java&#xff0c;离不开的一个东西就是spring&#xff1b;当我想了解什么是spring的时候&#xff0c;一查&#xff0c;基本上都是围绕着两个词来展开的&#xff1a;IoC和AOP。 对于我自己来说&#xff0c;AOP我觉得比较好理解&#xff0c;因为不管是之前写golang还是pyt…...

编程日记 2025/1/2 11:23:43

【开源免费】基于SpringBoot+Vue.JS校园社团信息管理系统（JAVA毕业设计）

本文项目编号 T 107 &#xff0c;文末自助获取源码 \color{red}{T107&#xff0c;文末自助获取源码} T107&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…...

编程日记 2025/1/2 11:21:40

设计模式 创建型 工厂模式（Factory Pattern）与 常见技术框架应用 解析

工厂模式&#xff08;Factory Pattern&#xff09;是一种创建型设计模式&#xff0c;它提供了一种封装对象创建过程的方式&#xff0c;使得对象的创建与使用分离&#xff0c;从而提高了系统的可扩展性和可维护性。 一、核心思想 工厂模式的核心思想是将“实例化对象”的操作与…...

编程日记 2025/1/2 11:19:38

pip 下载安装时使用国内源配置

pip 是 Python 的包管理工具&#xff0c;用于安装和管理第三方库。然而&#xff0c;在某些情况下&#xff0c;默认的 PyPI&#xff08;Python Package Index&#xff09;源可能由于网络原因导致下载速度慢或者连接不稳定。幸运的是&#xff0c;我们可以轻松地配置 pip 使用国内…...

编程日记 2025/1/2 11:18:34

如何快速配置Zotero插件：终极管理解决方案与插件市场指南

如何快速配置Zotero插件&#xff1a;终极管理解决方案与插件市场指南 【免费下载链接】zotero-addons Zotero Add-on Market | Zotero插件市场 | Browsing, installing, and reviewing plugins within Zotero 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-addons …...

编程新知 2026/4/3 8:51:29

项目介绍 MATLAB实现基于PSO-Q-learning 粒子群优化算法（PSO）结合Q学习算法（Q-learning）进行无人机三维路径规划（含模型描述及部分示例代码） 还请多多点一下关注 加油

MATLAB实现基于PSO-Q-learning 粒子群优化算法&#xff08;PSO&#xff09;结合Q学习算法&#xff08;Q-learning&#xff09;进行无人机三维路径规划的详细项目实例 更多详细内容可直接联系博主本人 或者访问对应标题的完整博客或者文档下载页面&#xff08;含完整的程序&…...

编程新知 2026/4/3 7:10:09

Qwen3.5-9B生产环境实践：高并发请求处理+响应延迟优化策略

Qwen3.5-9B生产环境实践&#xff1a;高并发请求处理响应延迟优化策略 1. 项目概述与核心能力 Qwen3.5-9B是一款拥有90亿参数的开源大语言模型&#xff0c;在多个领域展现出卓越的性能。这个模型特别适合需要处理复杂任务的生产环境&#xff0c;因为它具备以下核心能力&#x…...

编程新知 2026/4/3 5:57:00

简单三步：部署Qwen3-ForcedAligner，实现音频转字幕的自动化流程

简单三步&#xff1a;部署Qwen3-ForcedAligner&#xff0c;实现音频转字幕的自动化流程 1. 工具核心价值与工作原理 1.1 为什么需要本地字幕生成工具 在视频创作和会议记录场景中&#xff0c;手动添加字幕既耗时又费力。传统在线字幕服务存在隐私泄露风险&#xff0c;且通常…...

编程新知 2026/4/3 5:28:24

学术论文利器：OpenClaw+Qwen3.5-9B自动生成LaTeX文档

学术论文利器&#xff1a;OpenClawQwen3.5-9B自动生成LaTeX文档 1. 为什么需要自动化论文写作工具 去年冬天&#xff0c;当我面对第五篇论文的修订时&#xff0c;突然意识到自己把80%的时间花在了重复劳动上&#xff1a;调整表格格式、重新绘制图表、校对参考文献编号。这种机…...

编程新知 2026/4/3 4:33:37

终极指南：Redoc安全最佳实践，全面保护你的API文档

终极指南&#xff1a;Redoc安全最佳实践&#xff0c;全面保护你的API文档 【免费下载链接】redoc &#x1f4d8; OpenAPI/Swagger-generated API Reference Documentation 项目地址: https://gitcode.com/gh_mirrors/re/redoc Redoc是一款强大的OpenAPI/Swagger生成API参…...

编程新知 2026/4/3 4:03:17

【绝密架构图首次公开】：某头部券商万兆网卡直通+DPDK+自研内存池三级联动拓扑（支持128GB/s持续吞吐，QPS超2400万）

第一章&#xff1a;金融高频交易 C 内存池优化方法在纳秒级响应要求的金融高频交易系统中&#xff0c;动态内存分配&#xff08;new/delete&#xff09;引发的堆碎片、锁竞争与缓存不友好性&#xff0c;常导致不可预测的延迟尖峰。为消除 malloc 的内核态切换开销与全局堆锁争用…...

编程新知 2026/4/3 3:49:05

EasyAnimation性能优化指南：确保动画流畅运行的7个关键点

EasyAnimation性能优化指南&#xff1a;确保动画流畅运行的7个关键点 【免费下载链接】EasyAnimation A Swift library to take the power of UIView.animateWithDuration(_:, animations:...) to a whole new level - layers, springs, chain-able animations and mixing view…...

编程新知 2026/4/3 3:47:02

《Moltbot 终极实操手册：从自托管架构到生产级 AI Agent》

《Moltbot 终极实操手册：从自托管架构到生产级 AI Agent》 第一部分：定义与架构篇 —— 深度理解 Moltbot 第 1 章：AI 助手的新形态：Moltbot 概览 1.1 什么是 Moltbot？（从核心定义到原名 Clawdbot 的演变） 1.2 核心愿景：打破 AI 沙箱，实现系统级控制与隐私自主。 1.…...

编程新知 2026/4/3 3:37:00

OpenClaw跨平台控制：Qwen3.5-9B管理多台电脑

OpenClaw跨平台控制&#xff1a;Qwen3.5-9B管理多台电脑 1. 为什么需要跨设备自动化管理 去年夏天&#xff0c;我同时处理三个项目时遇到了一个典型问题&#xff1a;每天需要在三台不同电脑上重复执行数据同步、日志收集和报告生成。手动操作不仅耗时&#xff0c;还经常遗漏步…...

编程新知 2026/4/3 2:54:22