120 lines
4.2 KiB
HTML
120 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mock API 测试</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
.container { max-width: 800px; margin: 0 auto; }
|
|
.card { border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin: 20px 0; }
|
|
.success { color: green; }
|
|
.error { color: red; }
|
|
.loading { color: blue; }
|
|
button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
|
|
button:hover { background: #0056b3; }
|
|
pre { background: #f5f5f5; padding: 10px; border-radius: 4px; overflow: auto; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Mock API 测试</h1>
|
|
<p>测试新配置的Mock API是否正常工作</p>
|
|
|
|
<div class="card">
|
|
<h2>测试1: 商品列表API</h2>
|
|
<button onclick="testGoodsList()">测试 /api/goods/list</button>
|
|
<div id="result1" class="loading">等待测试...</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>测试2: 商品选择API</h2>
|
|
<button onclick="testGoodsSelect()">测试 /api/goods/select</button>
|
|
<div id="result2" class="loading">等待测试...</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>测试3: 推送日志API</h2>
|
|
<button onclick="testPushLogs()">测试 /api/goods/pushLogs</button>
|
|
<div id="result3" class="loading">等待测试...</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>测试4: 订单列表API</h2>
|
|
<button onclick="testOrdersList()">测试 /api/orders/list</button>
|
|
<div id="result4" class="loading">等待测试...</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>测试5: 不存在的API</h2>
|
|
<button onclick="testNotFound()">测试 /api/not/exist</button>
|
|
<div id="result5" class="loading">等待测试...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
<script>
|
|
// 使用与项目相同的axios配置
|
|
const axiosInstance = axios.create({
|
|
baseURL: '/api',
|
|
timeout: 10000,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
},
|
|
});
|
|
|
|
async function testAPI(url, resultId) {
|
|
const resultEl = document.getElementById(resultId);
|
|
resultEl.className = 'loading';
|
|
resultEl.textContent = '请求中...';
|
|
|
|
try {
|
|
const response = await axiosInstance.get(url);
|
|
const data = response.data;
|
|
|
|
resultEl.className = 'success';
|
|
resultEl.innerHTML = `
|
|
✅ 成功! 状态码: ${response.status}<br>
|
|
<pre>${JSON.stringify(data, null, 2)}</pre>
|
|
`;
|
|
} catch (error) {
|
|
resultEl.className = 'error';
|
|
if (error.response) {
|
|
resultEl.innerHTML = `
|
|
❌ 失败! 状态码: ${error.response.status}<br>
|
|
<pre>${JSON.stringify(error.response.data, null, 2)}</pre>
|
|
`;
|
|
} else {
|
|
resultEl.textContent = `❌ 请求失败: ${error.message}`;
|
|
}
|
|
}
|
|
}
|
|
|
|
function testGoodsList() {
|
|
testAPI('/api/goods/list', 'result1');
|
|
}
|
|
|
|
function testGoodsSelect() {
|
|
testAPI('/api/goods/select', 'result2');
|
|
}
|
|
|
|
function testPushLogs() {
|
|
testAPI('/api/goods/pushLogs', 'result3');
|
|
}
|
|
|
|
function testOrdersList() {
|
|
testAPI('/api/orders/list', 'result4');
|
|
}
|
|
|
|
function testNotFound() {
|
|
testAPI('/api/not/exist', 'result5');
|
|
}
|
|
|
|
// 页面加载时自动测试一个API
|
|
window.onload = () => {
|
|
testGoodsList();
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |