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>
直接运行尝试,可以正常运行,后续你也可以继续完善这个功能,按照你需要的,
相关文章:
Cursor小试1.生成一个网页的接口请求工具
一般开发过程中,会涉及到接口的调试,往往有时候开发的电脑不是我们自己的,没有安装一些类似postman 的接口调用工具,所以发现问题或者要测试某些接口是否正常的时候会很麻烦,而且现在网上也没有找到很好的免费的网页端接口请求的网址,所以我们使用Cursor来编写这样一个小工具, …...

Xilinx DCI技术
Xilinx DCI技术 DCI技术概述Xilinx DCI技术实际使用某些Bank特殊DCI要求 DCI级联技术DCI端接方式阻抗控制驱动器(源端接)半阻抗控制阻抗驱动器(源端接)分体式DCI(戴维宁等效端接到VCCO/2)DCI和三态DCI&…...
Kubernetes Pod 优雅关闭:如何让容器平稳“退休”?
Kubernetes Pod 优雅关闭:如何让容器平稳“退休”? 在 Kubernetes 中,Pod 是应用的基本单元。你可能会遇到需要停止某个 Pod 或容器的情况,可能是因为要更新、调整或故障恢复。在这种情况下,Pod 的优雅关闭࿰…...

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

SimForge HSF 案例分享|复杂仿真应用定制——UAVSim无人机仿真APP(技术篇)
导读 「神工坊」核心技术——「SimForge HSF高性能数值模拟引擎」支持工程计算应用的快速开发、自动并行,以及多域耦合、AI求解加速,目前已实现航发整机数值模拟等多个系统级高保真数值模拟应用落地,支持10亿阶、100w核心量级的高效求解。其低…...

使用 Adaptive Mesh Refinement 加速 CFD 仿真:最佳实践
CFD 仿真中的网格划分挑战 技术的进步正在增强设计探索,数值仿真在优化工程设计方面发挥着至关重要的作用。通常,计算流体动力学 (CFD) 仿真从定制的手工网格开始,具有精细和粗糙的区域,以平衡分辨率和单元…...

前端-动画库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.…...
智能工厂的设计软件 应用场景的一个例子:为AI聊天工具添加一个知识系统 之5
本文要点 前端 问题描述语言 本文继续完善 “描述” ---现在我们应该可以将它称为 “问题problem描述语言 ”。 它 通过对话框的question 引发 表征的issue 的“涌现” 最终 厘清应用程序的“problem”。即它合并了 ISO七层模型中的上面三层,通过将三层 分别形成…...
java web
流程 1.浏览器发送http协议的格式数据和url给服务器软件tomcat 2.浏览器解析http格式数据并创建request和response对象,把数据封装到request对象里。 3.tomcat解析url确定访问路径,如果是静态资源html等,直接将html数据作为http格式响应体返回&#x…...
【嵌入式软件开发】嵌入式软件计时逻辑的两种实现:累加与递减的深入对比
本文主要从四个方面详细阐述了嵌入式软件编程中计时逻辑的两种实现方式:累加和递减。让我为您详细解析各个部分: 1. 基本概念对比 累加方式 从0开始向上计数每个周期增加固定值(通常为1)类似于我们日常生活中的秒表计时方式递减方式 从预设值开始向下计数每个周期减少固定…...

如何将vCenter6.7升级7.0?
vCenter是什么? vCenter是一种虚拟化管理软件,由VMware公司开发和发布。它是VMware vSphere虚拟化平台的核心组件之一,主要用于集中管理和监控虚拟化环境中的虚拟机、虚拟存储和网络资源。vCenter可以实现对多个ESXi主机的集中管理ÿ…...
服务器网卡绑定mode和交换机的对应关系
互联网各领域资料分享专区(不定期更新): Sheet 模式类别 网卡绑定mode共有七种(0~6): bond0、bond1、bond2、bond3、bond4、bond5、bond6 mode详解 mode0 ,即:(balance-rr) Round-robin policy(平衡轮循环策略,需要配置交换机静态聚合) mode…...

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

Echart实现3D饼图示例
在可视化项目中,很多地方会遇见图表;echart是最常见的;这个示例就是用Echart, echart-gl实现3D饼图效果,复制即可用 //需要安装,再引用依赖import * as echarts from "echarts"; import echar…...
UE5 Debug的一些心得
1、BUG粗略可分为两类: 一种是显性的,编译直接就通不过,必须马上解决。 第二种是隐性的,新功能完成后,编译成功顺利运行,洋洋自得,而问题隐藏在幕后,测试之后才逐渐发现有问题&…...
java中多线程的一些常见操作
Java 中的多线程是通过并发编程来提高应用程序的效率和响应速度。Java 提供了多个机制和类来支持多线程编程,包括继承 Thread 类、实现 Runnable 接口、使用线程池等。以下是 Java 中一些常见的多线程操作和应用场景。 1. 创建线程 1.1 通过继承 Thread 类创建线程…...
【gopher的java学习笔记】什么是Spring - IoC和DI
一聊到java,离不开的一个东西就是spring;当我想了解什么是spring的时候,一查,基本上都是围绕着两个词来展开的:IoC和AOP。 对于我自己来说,AOP我觉得比较好理解,因为不管是之前写golang还是pyt…...

【开源免费】基于SpringBoot+Vue.JS校园社团信息管理系统(JAVA毕业设计)
本文项目编号 T 107 ,文末自助获取源码 \color{red}{T107,文末自助获取源码} T107,文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…...

设计模式 创建型 工厂模式(Factory Pattern)与 常见技术框架应用 解析
工厂模式(Factory Pattern)是一种创建型设计模式,它提供了一种封装对象创建过程的方式,使得对象的创建与使用分离,从而提高了系统的可扩展性和可维护性。 一、核心思想 工厂模式的核心思想是将“实例化对象”的操作与…...
pip 下载安装时使用国内源配置
pip 是 Python 的包管理工具,用于安装和管理第三方库。然而,在某些情况下,默认的 PyPI(Python Package Index)源可能由于网络原因导致下载速度慢或者连接不稳定。幸运的是,我们可以轻松地配置 pip 使用国内…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

【JVM】- 内存结构
引言 JVM:Java Virtual Machine 定义:Java虚拟机,Java二进制字节码的运行环境好处: 一次编写,到处运行自动内存管理,垃圾回收的功能数组下标越界检查(会抛异常,不会覆盖到其他代码…...

cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...
基于数字孪生的水厂可视化平台建设:架构与实践
分享大纲: 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年,数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段,基于数字孪生的水厂可视化平台的…...
爬虫基础学习day2
# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper(简称 DM)是 Linux 内核中的一套通用块设备映射框架,为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程,并配以详细的…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...