1. 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>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>- <!DOCTYPE html> 声明文档类型为 HTML5
- <html> 是根元素，lang="zh-CN" 指定中文语言
- <head> 包含元数据和引用的外部资源
- <body> 包含页面可见内容
2. 引入外部资源
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>- Tailwind CSS: 实用优先的 CSS 框架
- SheetJS (xlsx): 处理 Excel 文件的 JavaScript 库
3. 页面布局与组件
3.1 容器与标题
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md p-6">
<h1 class="text-2xl font-bold mb-6 text-gray-800">
<i class="fa fa-users mr-2"></i>学生信息管理系统
</h1>
</div>- max-w-4xl mx-auto: 设置最大宽度并居中
- bg-white rounded-lg shadow-md: 白色背景、圆角和阴影
- p-6: 内边距
3.2 文件上传区域
<div class="mb-6 border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-500 transition-colors"
id="drop-zone"
ondragover="event.preventDefault(); this.classList.add('border-blue-500')"
ondragleave="this.classList.remove('border-blue-500')"
ondrop="handleFileDrop(event)">
<input type="file" id="file-input" class="hidden" accept=".xls,.xlsx" />
<label for="file-input" class="cursor-pointer">
<!-- SVG 图标和提示文字 -->
</label>
</div>- 实现了拖放文件上传功能
- hidden 类隐藏原生文件输入
- accept=".xls,.xlsx" 限制文件类型
3.3 数据表格
<table class="min-w-full divide-y divide-gray-200" id="data-table">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">姓名</th>
<!-- 其他表头 -->
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<!-- 动态内容 -->
</tbody>
</table>- divide-y 添加行间分隔线
- 表头(thead)和表体(tbody)分离
4. JavaScript 功能实现
4.1 文件处理逻辑
function processExcel(file) {
const reader = new FileReader();
reader.onload = function(e) {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: 'array' });
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
const jsonData = XLSX.utils.sheet_to_json(worksheet);
// 处理数据...
};
reader.readAsArrayBuffer(file);
}- 使用 FileReader 读取文件
- 通过 SheetJS 解析 Excel 文件
- 将工作表转换为 JSON 数据
4.2 动态生成表格内容
const tbody = document.querySelector('#data-table tbody');
tbody.innerHTML = jsonData.map(item => `
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">${item[columns.name] || ''}</td>
<!-- 其他单元格 -->
</tr>
`).join('');- 使用 map() 遍历数据
- 模板字符串生成 HTML
- join('') 将数组转换为字符串
4.3 自动检测列名
function findColumn(data, possibleNames) {
const keys = Object.keys(data[0]);
return possibleNames.find(name =>
keys.some(k => k.toLowerCase() === name.toLowerCase())
) || null;
}- 支持多种可能的列名
- 不区分大小写匹配
5. 响应式设计
Tailwind CSS 提供了响应式设计类，例如：
- md: 中等屏幕及以上
- lg: 大屏幕及以上
6. 交互效果
6.1 拖放反馈
ondragover="event.preventDefault(); this.classList.add('border-blue-500')"
ondragleave="this.classList.remove('border-blue-500')"- 拖拽时添加蓝色边框
- 拖拽离开时移除
6.2 状态提示
function showStatus(message, type = 'info') {
const status = document.getElementById('status');
status.textContent = message;
status.className = `mt-4 text-sm ${
info: 'text-blue-600',
success: 'text-green-600',
error: 'text-red-600'
}[type]} transition-colors`;
}- 根据类型显示不同颜色
- 使用对象查找简化条件逻辑