一个用于学生管理的程序，第一步当然是要能调用信息了，如何制作呢？
1、把信息先放在excel里。如下图：
2、给ai发指令，让它编：
写一个全新的htm，要求就是导入excel,并把学生信息的内容展示出来。
写出来的是这样的，但是还是要自己理解代码，出了问题才好修改。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生信息管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
</head>
<body>
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md p-6">
<h1 class="text-2xl font-bold mb-6 text-blue-500">
<i class="fa fa-users mr-2"></i>学生信息管理系统
</h1>
<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 图标和提示文字 -->
<div class="text-gray-600 mb-2">
<svg class="w-12 h-12 mx-auto text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
</div>
<p class="text-gray-600">拖放Excel文件到此区域或点击选择文件</p>
<p class="text-sm text-gray-500 mt-2">支持格式: .xls, .xlsx</p>
</label>
</div>
<div class="overflow-x-auto">
<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>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">姓名</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">性别</th>
<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>
</div>
<!-- 状态提示 -->
<div id="status" class="mt-4 text-sm text-gray-600"></div>
</div>
<script>
function handleFileDrop(e) {
e.preventDefault();
const files = e.dataTransfer.files;
if (files.length > 0) {
processExcel(files[0]);
}
}
document.getElementById('file-input').addEventListener('change', function(e) {
if (this.files.length > 0) {
processExcel(this.files[0]);
}
});
function processExcel(file) {
const reader = new FileReader();
reader.onload = function (e) {
try{
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);
// 处理数据...
// 自动检测列名
const columns = {
name: findColumn(jsonData, ['姓名', '名字', 'Name']),
gender: findColumn(jsonData, ['性别', 'Gender']),
studentID: findColumn(jsonData, ['学号', 'studentID']),
class: findColumn(jsonData, ['班级', 'Class'])
};
if (!columns.name) {
showStatus('未找到姓名列', 'error');
return;
}
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.studentID] || ''}</td>
<td class="px-6 py-4 whitespace-nowrap">${item[columns.name] || ''}</td>
<td class="px-6 py-4 whitespace-nowrap">${item[columns.gender] || '未知'}</td>
<td class="px-6 py-4 whitespace-nowrap">${item[columns.class] || ''}</td>
</tr>
`).join('');
showStatus(`成功导入 ${jsonData.length} 条记录`, 'success');
} catch (error) {
console.error(error);
showStatus('文件处理失败，请检查文件格式', 'error');
}};
reader.onerror = () => showStatus('文件读取失败', 'error');
reader.readAsArrayBuffer(file);
}
function findColumn(data, possibleNames) {
if (!data || data.length === 0) return null;
const keys = Object.keys(data[0]);
return possibleNames.find(name =>
keys.some(k => k.toLowerCase() === name.toLowerCase())) || null;
}
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`;
}
</script>
</body>
</html>