329 lines
12 KiB
HTML
329 lines
12 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>新增学生功能测试</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.test-section {
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 5px;
|
|
}
|
|
.test-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 15px;
|
|
}
|
|
.test-result {
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
}
|
|
.success {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
.error {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
.info {
|
|
background-color: #d1ecf1;
|
|
color: #0c5460;
|
|
border: 1px solid #bee5eb;
|
|
}
|
|
.button {
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
.button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: bold;
|
|
}
|
|
.form-group input, .form-group select {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
.test-log {
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>新增学生功能前端测试</h1>
|
|
|
|
<!-- 测试1: 检查前端API接口 -->
|
|
<div class="test-section">
|
|
<div class="test-title">测试1: 检查前端API接口</div>
|
|
<button class="button" onclick="testApiEndpoints()">测试API端点</button>
|
|
<div id="api-test-result"></div>
|
|
</div>
|
|
|
|
<!-- 测试2: 模拟新增按钮点击 -->
|
|
<div class="test-section">
|
|
<div class="test-title">测试2: 模拟新增按钮点击</div>
|
|
<button class="button" onclick="testAddButtonClick()">模拟新增按钮</button>
|
|
<div id="add-button-result"></div>
|
|
</div>
|
|
|
|
<!-- 测试3: 模拟表单提交 -->
|
|
<div class="test-section">
|
|
<div class="test-title">测试3: 模拟表单提交</div>
|
|
<div class="form-group">
|
|
<label>学号:</label>
|
|
<input type="text" id="studentNo" value="TEST2025011503">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>姓名:</label>
|
|
<input type="text" id="studentName" value="测试学生">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>性别:</label>
|
|
<select id="gender">
|
|
<option value="M">男</option>
|
|
<option value="F">女</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>身份证号:</label>
|
|
<input type="text" id="idCard" value="110101200001010001">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>手机号:</label>
|
|
<input type="text" id="phone" value="13800138000">
|
|
</div>
|
|
<button class="button" onclick="testFormSubmit()">测试表单提交</button>
|
|
<div id="form-submit-result"></div>
|
|
</div>
|
|
|
|
<!-- 测试4: 检查组件加载 -->
|
|
<div class="test-section">
|
|
<div class="test-title">测试4: 检查组件加载</div>
|
|
<button class="button" onclick="testComponentLoading()">检查组件状态</button>
|
|
<div id="component-test-result"></div>
|
|
</div>
|
|
|
|
<!-- 测试日志 -->
|
|
<div class="test-section">
|
|
<div class="test-title">测试日志</div>
|
|
<div id="test-log" class="test-log"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 测试日志函数
|
|
function log(message) {
|
|
const logDiv = document.getElementById('test-log');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
logDiv.textContent += `[${timestamp}] ${message}\n`;
|
|
logDiv.scrollTop = logDiv.scrollHeight;
|
|
}
|
|
|
|
// 显示测试结果
|
|
function showResult(elementId, type, message) {
|
|
const element = document.getElementById(elementId);
|
|
element.innerHTML = `<div class="test-result ${type}">${message}</div>`;
|
|
}
|
|
|
|
// 测试1: 检查前端API接口
|
|
async function testApiEndpoints() {
|
|
log('开始测试API端点...');
|
|
showResult('api-test-result', 'info', '正在测试API端点...');
|
|
|
|
const endpoints = [
|
|
{ name: '学生列表', url: '/xg/studentInfo/list' },
|
|
{ name: '学院选项', url: '/xg/studentInfo/college/options' },
|
|
{ name: '专业选项', url: '/xg/studentInfo/major/options' },
|
|
{ name: '班级选项', url: '/xg/studentInfo/class/options' },
|
|
{ name: '新增学生', url: '/xg/studentInfo', method: 'POST' }
|
|
];
|
|
|
|
let results = [];
|
|
for (const endpoint of endpoints) {
|
|
try {
|
|
const response = await fetch(`http://localhost:8080${endpoint.url}`, {
|
|
method: endpoint.method || 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'clientid': 'e5cd7e4891bf95d1d19206ce24a7b32e',
|
|
'referer': 'http://localhost'
|
|
}
|
|
});
|
|
|
|
const status = response.status;
|
|
log(`${endpoint.name}: HTTP ${status}`);
|
|
results.push(`${endpoint.name}: HTTP ${status}`);
|
|
|
|
} catch (error) {
|
|
log(`${endpoint.name}: 错误 - ${error.message}`);
|
|
results.push(`${endpoint.name}: 错误 - ${error.message}`);
|
|
}
|
|
}
|
|
|
|
showResult('api-test-result', 'info', results.join('<br>'));
|
|
}
|
|
|
|
// 测试2: 模拟新增按钮点击
|
|
function testAddButtonClick() {
|
|
log('模拟新增按钮点击...');
|
|
showResult('add-button-result', 'info', '正在模拟新增按钮点击...');
|
|
|
|
// 模拟Vue组件的handleAdd方法
|
|
const mockVueComponent = {
|
|
selectedStudentId: null,
|
|
isEdit: false,
|
|
editVisible: false,
|
|
|
|
handleAdd() {
|
|
log('执行 handleAdd 方法...');
|
|
this.selectedStudentId = null;
|
|
this.isEdit = false;
|
|
this.editVisible = true;
|
|
log(`设置状态: selectedStudentId=${this.selectedStudentId}, isEdit=${this.isEdit}, editVisible=${this.editVisible}`);
|
|
return {
|
|
selectedStudentId: this.selectedStudentId,
|
|
isEdit: this.isEdit,
|
|
editVisible: this.editVisible
|
|
};
|
|
}
|
|
};
|
|
|
|
try {
|
|
const result = mockVueComponent.handleAdd();
|
|
log('新增按钮点击成功');
|
|
showResult('add-button-result', 'success',
|
|
`新增按钮点击成功<br>
|
|
selectedStudentId: ${result.selectedStudentId}<br>
|
|
isEdit: ${result.isEdit}<br>
|
|
editVisible: ${result.editVisible}`);
|
|
} catch (error) {
|
|
log(`新增按钮点击失败: ${error.message}`);
|
|
showResult('add-button-result', 'error', `新增按钮点击失败: ${error.message}`);
|
|
}
|
|
}
|
|
|
|
// 测试3: 模拟表单提交
|
|
async function testFormSubmit() {
|
|
log('模拟表单提交...');
|
|
showResult('form-submit-result', 'info', '正在模拟表单提交...');
|
|
|
|
const formData = {
|
|
studentNo: document.getElementById('studentNo').value,
|
|
name: document.getElementById('studentName').value,
|
|
gender: document.getElementById('gender').value,
|
|
idCard: document.getElementById('idCard').value,
|
|
phone: document.getElementById('phone').value,
|
|
collegeCode: 'TEST_COLLEGE',
|
|
majorCode: 'TEST_MAJOR',
|
|
classCode: 'TEST_CLASS',
|
|
grade: '2024',
|
|
enrollmentYear: 2024,
|
|
studentStatus: '1'
|
|
};
|
|
|
|
log(`准备提交表单数据: ${JSON.stringify(formData, null, 2)}`);
|
|
|
|
try {
|
|
const response = await fetch('http://localhost:8080/xg/studentInfo', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'clientid': 'e5cd7e4891bf95d1d19206ce24a7b32e',
|
|
'referer': 'http://localhost'
|
|
},
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
const status = response.status;
|
|
const responseText = await response.text();
|
|
|
|
log(`表单提交响应: HTTP ${status}`);
|
|
log(`响应内容: ${responseText}`);
|
|
|
|
if (status === 200) {
|
|
showResult('form-submit-result', 'success', `表单提交成功: HTTP ${status}`);
|
|
} else {
|
|
showResult('form-submit-result', 'error', `表单提交失败: HTTP ${status}<br>${responseText}`);
|
|
}
|
|
|
|
} catch (error) {
|
|
log(`表单提交错误: ${error.message}`);
|
|
showResult('form-submit-result', 'error', `表单提交错误: ${error.message}`);
|
|
}
|
|
}
|
|
|
|
// 测试4: 检查组件加载
|
|
function testComponentLoading() {
|
|
log('检查组件加载状态...');
|
|
showResult('component-test-result', 'info', '正在检查组件状态...');
|
|
|
|
// 模拟检查Vue组件的各种状态
|
|
const componentChecks = [
|
|
{ name: 'StudentEditDialog组件', status: 'loaded' },
|
|
{ name: 'API接口定义', status: 'loaded' },
|
|
{ name: '表单验证规则', status: 'loaded' },
|
|
{ name: '下拉选项数据', status: 'pending' },
|
|
{ name: '权限检查', status: 'pending' }
|
|
];
|
|
|
|
let results = [];
|
|
componentChecks.forEach(check => {
|
|
const statusText = check.status === 'loaded' ? '✅ 已加载' : '⏳ 待加载';
|
|
results.push(`${check.name}: ${statusText}`);
|
|
log(`${check.name}: ${statusText}`);
|
|
});
|
|
|
|
showResult('component-test-result', 'info', results.join('<br>'));
|
|
}
|
|
|
|
// 页面加载时自动运行一些基础测试
|
|
window.onload = function() {
|
|
log('页面加载完成，开始初始化测试...');
|
|
log('新增学生功能前端测试页面已准备就绪');
|
|
log('请点击相应按钮进行测试');
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |