- 从服务器拉取完整代码 - 按框架规范整理项目结构 - 配置 Drone CI 测试环境部署 - 包含后端(FastAPI)、前端(Vue3)、管理端 技术栈: Vue3 + TypeScript + FastAPI + MySQL
124 lines
4.3 KiB
HTML
124 lines
4.3 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>测试陪练场景API</title>
|
||
<style>
|
||
body { font-family: Arial, sans-serif; padding: 20px; }
|
||
.result { margin-top: 20px; padding: 15px; background: #f5f5f5; border-radius: 5px; }
|
||
button { padding: 10px 20px; margin: 5px; cursor: pointer; }
|
||
pre { white-space: pre-wrap; word-wrap: break-word; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>陪练场景API测试</h1>
|
||
|
||
<div>
|
||
<button onclick="testLogin()">1. 测试登录</button>
|
||
<button onclick="testGetScenes()">2. 获取场景列表</button>
|
||
<button onclick="testWithBrowserToken()">3. 使用浏览器Token测试</button>
|
||
</div>
|
||
|
||
<div class="result" id="result"></div>
|
||
|
||
<script>
|
||
let token = '';
|
||
const API_BASE_URL = 'http://localhost:8000';
|
||
const resultDiv = document.getElementById('result');
|
||
|
||
function log(message, data = null) {
|
||
console.log(message, data);
|
||
let html = `<div><strong>${message}</strong></div>`;
|
||
if (data) {
|
||
html += `<pre>${JSON.stringify(data, null, 2)}</pre>`;
|
||
}
|
||
resultDiv.innerHTML = html + resultDiv.innerHTML;
|
||
}
|
||
|
||
async function testLogin() {
|
||
try {
|
||
log('正在登录...');
|
||
const response = await fetch(`${API_BASE_URL}/api/v1/auth/login`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
username: 'admin',
|
||
password: 'admin123'
|
||
})
|
||
});
|
||
|
||
const data = await response.json();
|
||
log('登录响应:', data);
|
||
|
||
if (data.code === 200 && data.data.token) {
|
||
token = data.data.token.access_token;
|
||
log('✅ 登录成功!Token已保存');
|
||
localStorage.setItem('access_token', token);
|
||
} else {
|
||
log('❌ 登录失败', data);
|
||
}
|
||
} catch (error) {
|
||
log('❌ 登录错误', error);
|
||
}
|
||
}
|
||
|
||
async function testGetScenes() {
|
||
if (!token) {
|
||
log('⚠️ 请先登录获取Token');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
log('正在获取场景列表...');
|
||
const response = await fetch(`${API_BASE_URL}/api/v1/practice/scenes?page=1&size=20`, {
|
||
method: 'GET',
|
||
headers: {
|
||
'Authorization': `Bearer ${token}`,
|
||
'Content-Type': 'application/json'
|
||
}
|
||
});
|
||
|
||
const data = await response.json();
|
||
log('场景列表响应:', data);
|
||
|
||
if (data.code === 200 && data.data) {
|
||
log(`✅ 获取成功!共 ${data.data.total} 个场景,当前页 ${data.data.items.length} 个`);
|
||
log('场景列表:', data.data.items.map(s => ({ id: s.id, name: s.name, type: s.type })));
|
||
} else {
|
||
log('❌ 获取失败', data);
|
||
}
|
||
} catch (error) {
|
||
log('❌ 请求错误', error);
|
||
}
|
||
}
|
||
|
||
async function testWithBrowserToken() {
|
||
const browserToken = localStorage.getItem('access_token');
|
||
if (!browserToken) {
|
||
log('⚠️ 浏览器中未找到Token,请先在系统中登录');
|
||
return;
|
||
}
|
||
|
||
token = browserToken;
|
||
log('✅ 使用浏览器Token');
|
||
await testGetScenes();
|
||
}
|
||
|
||
// 页面加载时检查Token
|
||
window.onload = () => {
|
||
const browserToken = localStorage.getItem('access_token');
|
||
if (browserToken) {
|
||
token = browserToken;
|
||
log('✅ 检测到浏览器Token,可直接使用');
|
||
} else {
|
||
log('ℹ️ 未检测到Token,请先登录');
|
||
}
|
||
};
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|