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

一般开发过程中,会涉及到接口的调试,往往有时候开发的电脑不是我们自己的,没有安装一些类似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> 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/66036.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1961-2022年中国大陆多干旱指数数据集(SPI/SPEI/EDDI/PDSI/SC-PDSI/VPD)

DOI: 10.5194/essd-2024-270 干旱指数对于评估和管理缺水和农业风险至关重要;然而&#xff0c;现有数据集中缺乏统一的数据基础&#xff0c;导致不一致&#xff0c;对干旱指数的可比性提出了挑战。本研究致力于创建CHM_Drought&#xff0c;这是一个创新且全面的长期气象干旱数…

C# 在PDF中添加和删除水印注释 (Watermark Annotation)

目录 使用工具 C# 在PDF文档中添加水印注释 C# 在PDF文档中删除水印注释 PDF中的水印注释是一种独特的注释类型&#xff0c;它通常以透明的文本或图片形式叠加在页面内容之上&#xff0c;为文档添加标识或信息提示。与传统的静态水印不同&#xff0c;水印注释并不会永久嵌入…

单片机-蜂鸣器实验

#include "reg52.h" typedef unsigned char u8; typedef unsigned int u16; sbit BEEPP2^5; //将 P2.5 管脚定义为 BEEP P2.5默认高电平 void delay_10us(u16 ten_us){ while(ten_us--); } void main() { u16 i2000;//脉冲2000次 while(1) { …

LLVM防忘录

目录 Windows中源码编译LLVMWindows下编译LLVM Pass DLL Windows中源码编译LLVM 直接从llvm-project下载源码, 然后解压后用VS2022打开该目录, 然后利用VS的开发终端执行: cmake -S llvm -B build -G "Visual Studio 17 2022" -DLLVM_ENABLE_PROJECTSclang -DLLVM_…

解释一下:运放的输入失调电流

输入失调电流 首先看基础部分:这就是同相比例放大器 按照理论计算,输入VIN=0时,输出VOUT应为0,对吧 仿真与理论差距较大,有200多毫伏的偏差,这就是输入偏置电流IBIAS引起的,接着看它的定义 同向和反向输入电流的平均值,也就是Ib1、Ib2求平均,即(Ib1+Ib2)/2 按照下面…

【双指针】算法题(二)

【双指针】算法题&#xff08;二&#xff09; 前言&#xff1a; 这里是几道算法题&#xff0c;双指针说明在上一章。 一、有效三角形的个数 题目链接&#xff1a; 有效三角形的个数 题目叙述&#xff1a; 解法一&#xff1a;暴力循环&#xff0c;叠加三层for循环&#xff0c…

Socket编程入门

一个服务端 对应 一个客户端&#xff0c;双方可以通信。 1、服务端代码 public class EchoServerDemo { public static void main(String[] args) { // 端口号从 1024-65535 try { ServerSocket ss new ServerSocket(9007); System.out.println("Server start...&qu…

SQL 分析函数与聚合函数的组合应用

目标&#xff1a;掌握 SQL 中分析函数&#xff08;窗口函数&#xff09;与聚合函数的组合使用&#xff0c;通过实际案例实现复杂业务需求&#xff0c;如同比、环比和趋势分析。 1. 分析函数与聚合函数的区别 聚合函数&#xff08;Aggregate Functions&#xff09;&#xff1a;…

docker 安装influxdb

docker pull influxdb mkdir -p /root/influxdb/data docker run -d --name influxdb -p 8086:8086 -v /root/influxdb/data:/var/lib/influxdb influxdb:latest#浏览器登录&#xff1a;http://192.168.31.135:8086&#xff0c;首次登录设置用户名密码&#xff1a;admin/admin1…

深入剖析MySQL数据库架构:核心组件、存储引擎与优化策略(四)

慢查询日志&#xff0c;顾名思义&#xff0c;就是查询慢的日志&#xff0c;是指mysql记录所有执行超过long_query_time&#xff08;默认的时间10秒&#xff09;参数设定的时间阈值的SQL语句的日志。该日志能为SQL语句的优化带来很好的帮助。默认情况下&#xff0c;慢查询日志是…

【工具类】RedisUtil 操作相关

目标 一行代码调用 安装 redis <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency>hutool 工具类 <dependency><groupId>cn.hutool</grou…

Ansys Discovery 中的网格划分方法:探索模式

本篇博客文章将介绍 Ansys Discovery 中可用于在探索模式下进行分析的网格划分方法。我们将在下一篇博客中介绍 Refine 模式下的网格划分技术。 了解 Discovery Explore 模式下的网格划分 网格划分是将几何模型划分为小单元以模拟系统在不同条件下的行为的过程。这是通过创建…

MT8788安卓核心板_MTK8788核心板参数_联发科模块定制开发

MT8788安卓核心板是一款尺寸为52.5mm x 38.5mm x 2.95mm的高集成度电路板&#xff0c;专为各种智能设备应用而设计。该板卡整合了处理器、图形处理单元(GPU)、LPDDR3内存、eMMC存储及电源管理模块&#xff0c;具备出色的性能与低功耗特性。 这款核心板搭载了联发科的MT8788处理…

Linux实验报告14-Linux内存管理实验

目录 一&#xff1a;实验目的 二&#xff1a;实验内容 1、编辑模块的源代码mm_viraddr.c 2、编译模块 3、编写测试程序mm_test.c 4、编译测试程序mm_test.c 5、在后台运行mm_test 6、验证mm_viraddr模块 一&#xff1a;实验目的 (1)掌握内核空间、用户空间&#xff…

SAP物料主数据界面增加客制化字段、客制化页签的方式

文章目录 前言一、不增加页签&#xff0c;只增加客制化字段二、增加物料主数据页签 前言 【SAP系统MM模块研究】 #SAP #MM #物料 #客制化 #物料主数据 项目上难免会遇到客户要在物料主数据的界面上&#xff0c;增加新字段的需求。 实现方式有&#xff1a; &#xff08;1&…

设计心得——流程图和数据流图绘制

一、流程图和数据流图 在软件开发中&#xff0c;画流程图和数据流图可以说是几乎每个人都会遇到。 1、数据流&#xff08;程&#xff09;图 Data Flow Diagram&#xff0c;DFG。它可以称为数据流图或数据流程图。其主要用来描述系统中数据流程的一种图形工具&#xff0c;可以将…

U盘数据恢复实战指南与预防策略

一、U盘数据恢复初探 U盘数据恢复&#xff0c;简而言之&#xff0c;是指当U盘中的数据因各种原因丢失、损坏或无法访问时&#xff0c;通过特定技术和工具&#xff0c;将丢失的数据重新找回的过程。U盘作为现代生活中不可或缺的便携式存储设备&#xff0c;其数据安全性和稳定性…

250103-逻辑操作符

1. 逻辑与操作符 && 2. 逻辑非操作符 &#xff01; 实例 if(!(p1.agep2.age&&p1.name.equals(p2.name))) 对象p1p2的年龄与对象p1p2的姓名不为真&#xff0c;即至少有一个为假。

持续大额亏损,销量增幅有限,北汽蓝谷依旧黯然神伤

撰稿 | 行星 来源 | 贝多财经 “起了个大早&#xff0c;赶了个晚集”&#xff0c;用在如今的北汽蓝谷身上再合适不过。 2025年的第一个工作日&#xff0c;北汽蓝谷新能源科技股份有限公司&#xff08;SH:600733&#xff0c;简称“北汽蓝谷”&#xff09;对外披露了子公司北京…

【微软,模型规模】模型参数规模泄露:理解大型语言模型的参数量级

模型参数规模泄露&#xff1a;理解大型语言模型的参数量级 关键词&#xff1a; #大型语言模型 Large Language Model #参数规模 Parameter Scale #GPT-4o #GPT-4o-mini #Claude 3.5 Sonnet 具体实例与推演 近日&#xff0c;微软在一篇医学相关论文中意外泄露了OpenAI及Claud…