集團網(wǎng)站建設(shè)方案書游戲推廣員是違法的嗎
一般開發(fā)過程中,會涉及到接口的調(diào)試,往往有時候開發(fā)的電腦不是我們自己的,沒有安裝一些類似postman 的接口調(diào)用工具,所以發(fā)現(xiàn)問題或者要測試某些接口是否正常的時候會很麻煩,而且現(xiàn)在網(wǎng)上也沒有找到很好的免費的網(wǎng)頁端接口請求的網(wǎng)址,所以我們使用Cursor來編寫這樣一個小工具,
直接打開Cursor,在COMPOSER 中提問:
"你是一個高級的前端開發(fā)者以及設(shè)計師, 請實現(xiàn)一個網(wǎng)頁,可以直接在網(wǎng)頁里 調(diào)用接口請求,類似postman 等接口調(diào)用工具一樣的功能,支持GET,POST等請求,請實現(xiàn)一個"
然后它會幫你實現(xiàn)一個簡單的 API 測試工具網(wǎng)頁,它將創(chuàng)建一個包含基本功能的界面，支持 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()">發(fā)送請求</button><div class="response"><h3>響應(yīng)結(jié)果：</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) : {};// 構(gòu)建請求配置const config = {method: method,headers: headers};// 如果有請求體且不是 GET 請求，添加請求體if (bodyText && method !== 'GET') {config.body = bodyText;}// 發(fā)送請求const response = await fetch(url, config);const data = await response.json();// 顯示響應(yīng)responseElement.textContent = JSON.stringify(data, null, 2);} catch (error) {responseElement.textContent = `錯誤: ${error.message}`;}}</script>
</body>
</html> 直接運行嘗試,可以正常運行,后續(xù)你也可以繼續(xù)完善這個功能,按照你需要的,