378 lines
14 KiB
HTML
378 lines
14 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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 20px;
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
.container {
|
|||
|
|
max-width: 800px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 30px;
|
|||
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
h1 {
|
|||
|
|
color: #303133;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
.test-section {
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
padding: 20px;
|
|||
|
|
border: 1px solid #e4e7ed;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
background: #fafafa;
|
|||
|
|
}
|
|||
|
|
.test-title {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #409eff;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
.test-button {
|
|||
|
|
background: #409eff;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.test-button:hover {
|
|||
|
|
background: #66b1ff;
|
|||
|
|
}
|
|||
|
|
.test-button.success {
|
|||
|
|
background: #67c23a;
|
|||
|
|
}
|
|||
|
|
.test-button.success:hover {
|
|||
|
|
background: #85ce61;
|
|||
|
|
}
|
|||
|
|
.result {
|
|||
|
|
margin-top: 15px;
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-family: monospace;
|
|||
|
|
font-size: 14px;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
max-height: 200px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
.result.success {
|
|||
|
|
background: #f0f9ff;
|
|||
|
|
border: 1px solid #b3d8ff;
|
|||
|
|
color: #0066cc;
|
|||
|
|
}
|
|||
|
|
.result.error {
|
|||
|
|
background: #fef0f0;
|
|||
|
|
border: 1px solid #fbc4c4;
|
|||
|
|
color: #f56c6c;
|
|||
|
|
}
|
|||
|
|
.status {
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 4px 8px;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
.status.online {
|
|||
|
|
background: #67c23a;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
.status.offline {
|
|||
|
|
background: #f56c6c;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
.login-form {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 15px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
.form-group {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.form-group label {
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
.form-group input {
|
|||
|
|
padding: 8px;
|
|||
|
|
border: 1px solid #dcdfe6;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<h1>🧪 API测试页面</h1>
|
|||
|
|
|
|||
|
|
<!-- 服务状态检查 -->
|
|||
|
|
<div class="test-section">
|
|||
|
|
<div class="test-title">🔍 服务状态检查</div>
|
|||
|
|
<button class="test-button" onclick="checkBackendStatus()">检查后端服务</button>
|
|||
|
|
<button class="test-button" onclick="checkFrontendStatus()">检查前端服务</button>
|
|||
|
|
<div id="statusResult" class="result" style="display: none;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- API测试 -->
|
|||
|
|
<div class="test-section">
|
|||
|
|
<div class="test-title">🔐 用户认证测试</div>
|
|||
|
|
<div class="login-form">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label>用户名:</label>
|
|||
|
|
<input type="text" id="username" value="admin" />
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label>密码:</label>
|
|||
|
|
<input type="password" id="password" value="admin123456" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<button class="test-button" onclick="testLogin()">测试登录</button>
|
|||
|
|
<button class="test-button success" onclick="testGetProfile()">获取用户信息</button>
|
|||
|
|
<div id="authResult" class="result" style="display: none;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 日报API测试 -->
|
|||
|
|
<div class="test-section">
|
|||
|
|
<div class="test-title">📝 日报API测试</div>
|
|||
|
|
<button class="test-button" onclick="testGetReports()">获取日报列表</button>
|
|||
|
|
<button class="test-button" onclick="testCreateReport()">创建测试日报</button>
|
|||
|
|
<button class="test-button" onclick="testGetStats()">获取统计数据</button>
|
|||
|
|
<div id="reportsResult" class="result" style="display: none;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 快速链接 -->
|
|||
|
|
<div class="test-section">
|
|||
|
|
<div class="test-title">🔗 快速链接</div>
|
|||
|
|
<a href="http://localhost:8000/admin/" target="_blank">
|
|||
|
|
<button class="test-button">Django管理后台</button>
|
|||
|
|
</a>
|
|||
|
|
<a href="http://localhost:8000/api/" target="_blank">
|
|||
|
|
<button class="test-button">API根目录</button>
|
|||
|
|
</a>
|
|||
|
|
<a href="http://localhost:3000" target="_blank">
|
|||
|
|
<button class="test-button success">前端应用</button>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
let authToken = null;
|
|||
|
|
|
|||
|
|
// 显示结果
|
|||
|
|
function showResult(elementId, content, isSuccess = true) {
|
|||
|
|
const element = document.getElementById(elementId);
|
|||
|
|
element.style.display = 'block';
|
|||
|
|
element.className = `result ${isSuccess ? 'success' : 'error'}`;
|
|||
|
|
element.textContent = content;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查后端服务状态
|
|||
|
|
async function checkBackendStatus() {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('http://localhost:8000/api/auth/login/', {
|
|||
|
|
method: 'OPTIONS'
|
|||
|
|
});
|
|||
|
|
showResult('statusResult', '✅ 后端服务运行正常\n状态码: ' + response.status + '\n地址: http://localhost:8000');
|
|||
|
|
} catch (error) {
|
|||
|
|
showResult('statusResult', '❌ 后端服务连接失败\n错误: ' + error.message + '\n\n请确保Django服务器已启动：\ncd backend && python manage.py runserver', false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查前端服务状态
|
|||
|
|
async function checkFrontendStatus() {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('http://localhost:3000/', {
|
|||
|
|
method: 'GET',
|
|||
|
|
mode: 'no-cors'
|
|||
|
|
});
|
|||
|
|
showResult('statusResult', '✅ 前端服务运行正常\n地址: http://localhost:3000');
|
|||
|
|
} catch (error) {
|
|||
|
|
showResult('statusResult', '❌ 前端服务连接失败\n错误: ' + error.message + '\n\n请确保Vue服务器已启动：\ncd frontend && npm run serve', false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 测试登录
|
|||
|
|
async function testLogin() {
|
|||
|
|
const username = document.getElementById('username').value;
|
|||
|
|
const password = document.getElementById('password').value;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('http://localhost:8000/api/auth/login/', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({ username, password })
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
authToken = data.tokens.access;
|
|||
|
|
showResult('authResult',
|
|||
|
|
'✅ 登录成功！\n' +
|
|||
|
|
'用户: ' + data.user.username + '\n' +
|
|||
|
|
'姓名: ' + (data.user.full_name || '未设置') + '\n' +
|
|||
|
|
'权限: ' + (data.user.is_staff ? '管理员' : '普通用户') + '\n' +
|
|||
|
|
'Token: ' + data.tokens.access.substring(0, 50) + '...'
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
showResult('authResult', '❌ 登录失败\n' + JSON.stringify(data, null, 2), false);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
showResult('authResult', '❌ 登录请求失败\n错误: ' + error.message, false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 测试获取用户信息
|
|||
|
|
async function testGetProfile() {
|
|||
|
|
if (!authToken) {
|
|||
|
|
showResult('authResult', '❌ 请先登录获取Token', false);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('http://localhost:8000/api/auth/profile/', {
|
|||
|
|
headers: {
|
|||
|
|
'Authorization': 'Bearer ' + authToken
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
showResult('authResult',
|
|||
|
|
'✅ 获取用户信息成功！\n' +
|
|||
|
|
JSON.stringify(data, null, 2)
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
showResult('authResult', '❌ 获取用户信息失败\n' + JSON.stringify(data, null, 2), false);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
showResult('authResult', '❌ 请求失败\n错误: ' + error.message, false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 测试获取日报列表
|
|||
|
|
async function testGetReports() {
|
|||
|
|
if (!authToken) {
|
|||
|
|
showResult('reportsResult', '❌ 请先登录获取Token', false);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('http://localhost:8000/api/reports/', {
|
|||
|
|
headers: {
|
|||
|
|
'Authorization': 'Bearer ' + authToken
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
showResult('reportsResult',
|
|||
|
|
'✅ 获取日报列表成功！\n' +
|
|||
|
|
'总数: ' + (data.count || 0) + '\n' +
|
|||
|
|
'结果: ' + JSON.stringify(data, null, 2).substring(0, 500) + '...'
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
showResult('reportsResult', '❌ 获取日报列表失败\n' + JSON.stringify(data, null, 2), false);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
showResult('reportsResult', '❌ 请求失败\n错误: ' + error.message, false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 测试创建日报
|
|||
|
|
async function testCreateReport() {
|
|||
|
|
if (!authToken) {
|
|||
|
|
showResult('reportsResult', '❌ 请先登录获取Token', false);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const reportData = {
|
|||
|
|
report_date: new Date().toISOString().split('T')[0],
|
|||
|
|
work_summary: '今天完成了API测试功能的开发，包括前端界面和后端接口的测试。',
|
|||
|
|
next_day_plan: '明天将继续优化系统性能，添加更多的测试用例。',
|
|||
|
|
is_draft: false
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('http://localhost:8000/api/reports/', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Authorization': 'Bearer ' + authToken,
|
|||
|
|
'Content-Type': 'application/json'
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify(reportData)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
showResult('reportsResult',
|
|||
|
|
'✅ 创建日报成功！\n' +
|
|||
|
|
'ID: ' + data.id + '\n' +
|
|||
|
|
'日期: ' + data.report_date + '\n' +
|
|||
|
|
'状态: ' + (data.is_draft ? '草稿' : '已发布')
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
showResult('reportsResult', '❌ 创建日报失败\n' + JSON.stringify(data, null, 2), false);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
showResult('reportsResult', '❌ 请求失败\n错误: ' + error.message, false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 测试获取统计数据
|
|||
|
|
async function testGetStats() {
|
|||
|
|
if (!authToken) {
|
|||
|
|
showResult('reportsResult', '❌ 请先登录获取Token', false);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('http://localhost:8000/api/stats/', {
|
|||
|
|
headers: {
|
|||
|
|
'Authorization': 'Bearer ' + authToken
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
showResult('reportsResult',
|
|||
|
|
'✅ 获取统计数据成功！\n' +
|
|||
|
|
'总日报数: ' + data.total_reports + '\n' +
|
|||
|
|
'本月日报: ' + data.this_month_reports + '\n' +
|
|||
|
|
'本周日报: ' + data.this_week_reports + '\n' +
|
|||
|
|
'完成率: ' + data.completion_rate + '%'
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
showResult('reportsResult', '❌ 获取统计数据失败\n' + JSON.stringify(data, null, 2), false);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
showResult('reportsResult', '❌ 请求失败\n错误: ' + error.message, false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 页面加载完成后自动检查服务状态
|
|||
|
|
window.onload = function() {
|
|||
|
|
setTimeout(checkBackendStatus, 1000);
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|