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

一般开发过程中,会涉及到接口的调试,往往有时候开发的电脑不是我们自己的,没有安装一些类似postman 的接口调用工具,所以发现问题或者要测试某些接口是否正常的时候会很麻烦,而且现在网上也没有找到很好的免费的网页端接口请求的网址,所以我们使用Cursor来编写这样一个小工具,

直接打开Cursor,在COMPOSER 中提问:

"你是一个高级的前端开发者以及设计师, 请实现一个网页,可以直接在网页里 调用接口请求,类似postman 等接口调用工具一样的功能,支持GET,POST等请求,请实现一个"

然后它会帮你实现一个简单的 API 测试工具网页,它将创建一个包含基本功能的界面,支持 GET 和 POST 请求。

javascript 复制代码
<!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> 

直接运行尝试,可以正常运行,后续你也可以继续完善这个功能,按照你需要的,

相关推荐
Sam_Deep_Thinking3 天前
在Windows 11上配置Cursor IDE进行Java开发
ai编程·cursor
SamDeepThinking4 天前
在Cursor里安装极其好用的Mysql Database Client 插件
ai编程·cursor
卡尔特斯5 天前
Cursor 自用习惯快速调整基础布局与配置
cursor
Sam_Deep_Thinking5 天前
在 Cursor IDE 中配置 SQLTools 连接 MySQL 数据库指南(Windows 11)
ai编程·cursor
SamDeepThinking6 天前
彻底让Cursor不要格式化Java代码
ai编程·cursor
SamDeepThinking6 天前
使用Cursor生成【财务对账系统】前后端代码
后端·ai编程·cursor
SamDeepThinking6 天前
在Windows 11上配置Cursor IDE进行Java开发
后端·ai编程·cursor
陈佬昔没带相机6 天前
告别Token焦虑!我是如何用最低消费玩转AI编程的
claude·cursor·trae
yaocheng的ai分身6 天前
Browser MCP扩展
cursor·mcp
转转技术团队7 天前
让AI成为你的编程助手:如何高效使用Cursor
后端·cursor