蓬莱专业做网站公司,NextApp wordpress,北京4a广告公司有哪些,制作一个交易平台网站一般开发过程中,会涉及到接口的调试,往往有时候开发的电脑不是我们自己的,没有安装一些类似postman 的接口调用工具,所以发现问题或者要测试某些接口是否正常的时候会很麻烦,而且现在网上也没有找到很好的免费的网页端接口请求的网址,所以我们使用Cursor来编写这样一个小工具, …一般开发过程中,会涉及到接口的调试,往往有时候开发的电脑不是我们自己的,没有安装一些类似postman 的接口调用工具,所以发现问题或者要测试某些接口是否正常的时候会很麻烦,而且现在网上也没有找到很好的免费的网页端接口请求的网址,所以我们使用Cursor来编写这样一个小工具,
直接打开Cursor,在COMPOSER 中提问:
你是一个高级的前端开发者以及设计师, 请实现一个网页,可以直接在网页里 调用接口请求,类似postman 等接口调用工具一样的功能,支持GET,POST等请求,请实现一个 然后它会帮你实现一个简单的 API 测试工具网页,它将创建一个包含基本功能的界面支持 GET 和 POST 请求。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAPI 测试工具/titlestyle* {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
bodydiv classcontainerh1API 测试工具/h1div classinput-grouplabel formethod请求方法/labelselect idmethodoption valueGETGET/optionoption valuePOSTPOST/optionoption valuePUTPUT/optionoption valueDELETEDELETE/option/select/divdiv classinput-grouplabel forurlURL/labelinput typeurl idurl placeholder请输入 API 地址/divdiv classinput-grouplabel forheaders请求头 (JSON 格式)/labeltextarea idheaders placeholder{Content-Type: application/json}/textarea/divdiv classinput-grouplabel forbody请求体 (JSON 格式)/labeltextarea idbody placeholder{key: value}/textarea/divbutton onclicksendRequest()发送请求/buttondiv classresponseh3响应结果/h3pre idresponse/pre/div/divscriptasync 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
直接运行尝试,可以正常运行,后续你也可以继续完善这个功能,按照你需要的,
