当前位置：首页 > article >正文

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

article 2025/1/4 14:07:16

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