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.rhkb.cn/news/501487.html

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

相关文章

第R3周:RNN-心脏病预测

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 文章目录 一、前言二、代码流程1、导入包&#xff0c;设置GPU2、导入数据3、数据处理4、构建RNN模型5、编译模型6、模型训练7、模型评估 电脑环境&#xff1a;…

40% 降本:多点 DMALL x StarRocks 的湖仓升级实战

小编导读&#xff1a; 多点 DMALL 成立于2015年&#xff0c;持续深耕零售业&#xff0c;为企业提供一站式全渠道数字零售解决方案 DMALL OS。作为 DMALL OS 数字化能力的技术底座&#xff0c;大数据平台历经多次迭代平稳支撑了公司 To B 业务的快速开展。随着国家产业升级和云原…

C语言——字符函数和内存函数

目录 前言 字符函数 1strlen 模拟实现 2strcpy 模拟实现 3strcat 模拟实现 4strcmp 模拟实现 5strncpy 模拟实现 6strncat 模拟实现 7strncmp 模拟实现 8strstr 模拟实现 9strtok 10strerror 11大小写字符转换函数 内存函数 1memcpy 模拟实现 2…

职场常用Excel基础04-二维表转换

大家好&#xff0c;今天和大家一起分享一下excel的二维表转换相关内容~ 在Excel中&#xff0c;二维表&#xff08;也称为矩阵或表格&#xff09;是一种组织数据的方式&#xff0c;其中数据按照行和列的格式进行排列。然而&#xff0c;在实际的数据分析过程中&#xff0c;我们常…

软考教材重点内容 信息安全工程师 第 12 章网络安全审计技术原理与应用

12.1.1 网络安全审计概念 网络安全审计是指对网络信息系统的安全相关活动信息进行获取、记录、存储、分析和利用的工作。网络安全审计的作用在于建立“事后”安全保障措施&#xff0c;保存网络安全事件及行为信息&#xff0c;为网络安全事件分析提供线索及证据&#xff0c;以便…

TT100K数据集, YOLO格式, COCO格式

TT100K交通标志数据集, 标签txt&#xff0c;图像已经分好了测试集&#xff0c;验证集&#xff0c;训练集 1️⃣可以直接导入YOLO进行训练&#xff0c;没有细分类&#xff0c;里面有的类&#xff0c; 闲鱼9.9 解君愁 &#xff0c;明人不说暗话 https://m.tb.cn/h.T7Ossey?tk…

更改element-plus的table样式

表头样式&#xff1a; <el-table :data"props.tableData" style"width: 100%" :header-cell-style"headerCellStyle" :cell-style"cellStyle"> </el-table>样式&#xff1a; // 表头样式 const headerCellStyle {backgro…

“善弈者”也需妙手,Oclean欧可林:差异化不是说说而已

作者 | 曾响铃 文 | 响铃说 俗话说&#xff0c;“牙痛不是病&#xff0c;痛起来要人命”。这话意思大家都知道&#xff0c;牙痛虽不是什么大病&#xff0c;可一旦发作却是极难忍受。 前几日&#xff0c;Oclean欧可林举办了一场AirPump A10氧气啵啵冲牙器新品品鉴会&#xff…

数字货币支付系统开发搭建:构建未来的区块链支付生态

随着数字货币的迅猛发展&#xff0c;越来越多的企业和机构开始关注如何搭建一个高效、安全、可扩展的数字货币支付系统。区块链技术因其去中心化、安全性高、透明性强等优势&#xff0c;已成为开发数字货币支付系统的首选技术。本文将深入探讨数字货币支付系统的开发和搭建过程…

K8s高可用集群之Kubernetes集群管理平台、命令补全工具、资源监控工具部署、常用命令

K8s高可用集群之Kubernetes管理平台、补全命令工具、资源监控工具部署 1.Kuboard可视化管理平台2.kubectl命令tab补全工具3.MetricsServer资源监控工具4.Kubernetes常用命令 1.Kuboard可视化管理平台 可以选择安装k8s官网的管理平台&#xff1b;我这里是安装的其他开源平台Kub…

cka考试-02-节点维护

一.解答答案 kubectl config use-context ek8s kubectl cordon k8s-node1 kubectl drain k8s-node1 --delete-emptydir-data --ignore-daemonsets --force 二.解答思路 记住这2个cordon,drain,使用kubectl -h 查询使用方法 [root@master ~]# kubectl -h |grep -E cordon…

【pytorch】现代循环神经网络-2

1 双向循环神经网络&#xff08;Bi-RNN&#xff09; 具有单个隐藏层的双向循环神经网络的架构如图所示&#xff1a; 对于任意时间步t&#xff0c;给定一个小批量的输入数据 Xt ∈ Rnd &#xff08;样本数n&#xff0c;每个示例中的输入数d&#xff09;&#xff0c;并且令隐藏层…

服务器等保测评日志策略配置

操作系统日志 /var/log/message 系统启动后的信息和错误日志&#xff0c;是Red Hat Linux中最常用的日志之一 /var/log/secure 与安全相关的日志信息 /var/log/maillog 与邮件相关的日志信息 /var/log/cron 与定时任务相关的日志信息 /var/log/spooler 与UUCP和news设备相关的…

Flutter-插件 scroll-to-index 实现 listView 滚动到指定索引位置

scroll-to-index 简介 scroll_to_index 是一个 Flutter 插件&#xff0c;用于通过索引滚动到 ListView 中的某个特定项。这个库对复杂滚动需求&#xff08;如动态高度的列表项&#xff09;非常实用&#xff0c;因为它会自动计算需要滚动的目标位置。 使用 安装插件 flutte…

我用AI学Android Jetpack Compose之开篇

最近突发奇想&#xff0c;想学一下Jetpack Compose&#xff0c;打算用Ai学&#xff0c;学最新的技术应该要到官网学&#xff0c;不过Compose已经出来一段时间了&#xff0c;Ai肯定学过了&#xff0c;用Ai来学&#xff0c;应该问题不大&#xff0c;学习过程记录下来&#xff0c;…

PHP框架+gatewayworker实现在线1对1聊天--发送消息(6)

文章目录 发送消息原理说明发送功能实现html部分javascript代码PHP代码 发送消息原理说明 接下来我们发送聊天的文本信息。点击发送按钮的时候&#xff0c;会自动将文本框里的内容发送出去。过程是我们将信息发送到服务器&#xff0c;服务器再转发给对方。文本框的id为msgcont…

网络安全 | 信息安全管理体系(ISMS)认证与实施

网络安全 | 信息安全管理体系&#xff08;ISMS&#xff09;认证与实施 一、前言二、信息安全管理体系&#xff08;ISMS&#xff09;概述2.1 ISMS 的定义与内涵2.2 ISMS 的核心标准 ——ISO/IEC 27001 三、信息安全管理体系&#xff08;ISMS&#xff09;认证3.1 认证的意义与价值…

服务器数据恢复—服务器硬盘亮黄灯的数据恢复案例

服务器硬盘指示灯闪烁黄灯是一种警示&#xff0c;意味着服务器硬盘出现故障即将下线。发现这种情况建议及时更换硬盘。 一旦服务器上有大量数据频繁读写&#xff0c;硬盘指示灯会快速闪烁。服务器上某个硬盘的指示灯只有黄灯亮着&#xff0c;而其他颜色的灯没有亮的话&#xff…

AfuseKt1.4.4 | 刮削视频播放器,支持阿里云盘和自动海报墙

AfuseKt是一款功能强大的安卓端在线视频播放器&#xff0c;广泛兼容多种平台如阿里云盘、Alist、WebDAV、Emby、Jellyfin等&#xff0c;同时也支持本地存储视频文件的播放。其特色功能包括自动抓取影片信息生成海报墙展示&#xff0c;充分利用设备硬件进行高清视频流畅播放&…

数字孪生:物联+数据打造洞察世界新视角

引言&#xff1a;数字孪生是物理系统向信息空间映射的关键技术&#xff0c;通过传感器、数据分析、物联网&#xff0c;实现实时模拟和控制。新一代信息技术支撑数字孪生的广泛应用&#xff0c;使其在工业、城市、交通、医疗、水利等多领域实现虚拟与现实融合&#xff0c;促进经…