// 前端组件API测试脚本 - ES模块格式 import axios from 'axios'; // 创建axios实例 const instance = axios.create({ baseURL: 'http://localhost:5352/api', timeout: 10000, headers: { 'Content-Type': 'application/json' } }); // 登录获取token async function login() { try { const response = await instance.post('/auth/login', { username: 'admin', password: '123456' }); console.log('登录成功:', response.data); // 修正token获取路径 - 正确路径是response.data.data.token return response.data.data?.token || null; } catch (error) { console.error('登录失败:', error); console.error('错误详情:', error.response?.data || error.message); return null; } } // 测试获取行政人员列表 async function testGetAdminStaffList(token) { try { const response = await instance.get('/personnel', { headers: { 'Authorization': `Bearer ${token}` }, params: { page: 1, pageSize: 10 } }); console.log('行政人员列表获取成功:'); console.log('- 数据结构:', Object.keys(response.data)); console.log('- 行政人员总数:', response.data.total); console.log('- 行政人员列表数据长度:', response.data.data?.length || 0); if (response.data.data && response.data.data.length > 0) { console.log('- 第一条数据示例:', response.data.data[0]); } return response.data; } catch (error) { console.error('行政人员列表获取失败:', error); console.error('错误详情:', error.response?.data || error.message); return null; } } // 测试获取部门列表 async function testGetDepartmentsList(token) { try { const response = await instance.get('/government/departments', { headers: { 'Authorization': `Bearer ${token}` } }); console.log('部门列表获取成功:'); console.log('- 数据结构:', Object.keys(response.data)); console.log('- 部门列表数据长度:', response.data.data?.length || 0); if (response.data.data && response.data.data.length > 0) { console.log('- 第一条数据示例:', response.data.data[0]); } return response.data; } catch (error) { console.error('部门列表获取失败:', error); console.error('错误详情:', error.response?.data || error.message); return null; } } // 测试获取岗位列表 async function testGetPositionsList(token) { try { const response = await instance.get('/government/positions', { headers: { 'Authorization': `Bearer ${token}` } }); console.log('岗位列表获取成功:'); console.log('- 数据结构:', Object.keys(response.data)); console.log('- 岗位列表数据长度:', response.data.data?.length || 0); if (response.data.data && response.data.data.length > 0) { console.log('- 第一条数据示例:', response.data.data[0]); } return response.data; } catch (error) { console.error('岗位列表获取失败:', error); console.error('错误详情:', error.response?.data || error.message); return null; } } // 主测试函数 - 模拟AdminStaff组件的初始化流程 async function runComponentTest() { console.log('开始模拟AdminStaff组件初始化测试...'); // 1. 登录获取token console.log('\n1. 登录认证'); const token = await login(); if (!token) { console.error('测试失败: 无法获取登录token'); return; } // 2. 测试获取部门列表 - 对应组件中的fetchDepartments() console.log('\n2. 获取部门列表'); const departmentsData = await testGetDepartmentsList(token); // 3. 测试获取岗位列表 - 对应组件中的fetchPositions() console.log('\n3. 获取岗位列表'); const positionsData = await testGetPositionsList(token); // 4. 测试获取行政人员列表 - 对应组件中的fetchAdminStaffList() console.log('\n4. 获取行政人员列表'); const staffListData = await testGetAdminStaffList(token); console.log('\n测试完成!'); console.log('----------------------------------------'); console.log('测试结果总结:'); console.log('- 登录:', token ? '成功' : '失败'); console.log('- 部门列表:', departmentsData ? '成功' : '失败'); console.log('- 岗位列表:', positionsData ? '成功' : '失败'); console.log('- 行政人员列表:', staffListData ? '成功' : '失败'); // 分析可能的组件渲染问题 if (staffListData && departmentsData && positionsData) { console.log('\n所有API调用成功,但页面仍显示空白可能的原因:'); console.log('1. 数据格式不匹配 - 检查返回数据结构是否与组件期望的一致'); console.log('2. 组件生命周期问题 - 检查onMounted中是否正确调用initData()'); console.log('3. 数据处理逻辑错误 - 检查staffData.value的赋值和转换逻辑'); console.log('4. 权限问题 - 检查用户角色和权限是否正确'); console.log('5. 前端控制台错误 - 检查浏览器控制台是否有详细错误信息'); } else { console.log('\nAPI调用失败是页面空白的可能原因,请检查:'); console.log('1. 后端接口是否正确实现'); console.log('2. 认证token是否有效'); console.log('3. 网络连接是否正常'); } } // 运行测试 runComponentTest().catch(err => { console.error('测试过程中发生错误:', err); });