一般开发过程中,会涉及到接口的调试,往往有时候开发的电脑不是我们自己的,没有安装一些类似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> 直接运行尝试,可以正常运行,后续你也可以继续完善这个功能,按照你需要的,
