refactor(frontend): 重构前端目录结构并优化认证流程
将前端文件从html目录迁移到views目录，按功能模块组织 重构认证中间件和路由处理，简化页面权限控制 更新静态资源引用路径，统一使用/public前缀 添加学生仪表板页面，优化移动端显示 移除旧版html和js文件，更新样式和脚本
This commit is contained in:
祀梦
@@ -0,0 +1,447 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>�鞟貍敶訫� - XX摮行嵗�鞟貍蝞∠�蝟餌�</title>
|
||||
<link rel="stylesheet" href="/public/css/style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- 撖潸⏛�?-->
|
||||
<nav class="navbar">
|
||||
<div class="navbar-brand">
|
||||
<a href="/"><i class="fas fa-graduation-cap"></i> XX摮行嵗�鞟貍蝞∠�蝟餌�</a>
|
||||
</div>
|
||||
<div class="navbar-menu">
|
||||
<a href="/teacher/dashboard" class="navbar-item"><i class="fas fa-tachometer-alt"></i> �坔�隞芾”�?/a>
|
||||
<a href="/teacher/grade_entry" class="navbar-item active"><i class="fas fa-edit"></i> �鞟貍敶訫�</a>
|
||||
<a href="/teacher/grade_management" class="navbar-item"><i class="fas fa-list"></i> �鞟貍蝞∠�</a>
|
||||
<div class="user-info">
|
||||
<span class="user-name">�舘���</span>
|
||||
<span class="user-role">�坔�</span>
|
||||
<a href="/login" class="btn btn-outline btn-small"><i class="fas fa-sign-out-alt"></i> ���?/a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- �Ｗ�撅穃紡�?-->
|
||||
<div class="container">
|
||||
<div class="breadcrumb">
|
||||
<a href="/">銝駁△</a>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
<a href="/teacher/dashboard">�坔�隞芾”�?/a>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
<span>�鞟貍敶訫�</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 銝餃�摰孵躹 -->
|
||||
<div class="grade-entry-container">
|
||||
<div class="entry-header">
|
||||
<h1><i class="fas fa-edit"></i> �鞟貍敶訫�</h1>
|
||||
<p>霂琿�㗇𥋘�剔漣�諹紋蝔页��嗅�銝箸�銝芸郎�笔��交�蝏?/p>
|
||||
</div>
|
||||
|
||||
<div class="entry-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="class-select"><i class="fas fa-users"></i> �㗇𥋘�剔漣</label>
|
||||
<select id="class-select" class="form-control">
|
||||
<option value="">霂琿�㗇𥋘�剔漣</option>
|
||||
<option value="class1">霈∠��箇�摮虫����?021蝥?�?/option>
|
||||
<option value="class2">霈∠��箇�摮虫����?021蝥?�?/option>
|
||||
<option value="class3">頧臭辣撌亦�2021蝥?�?/option>
|
||||
<option value="class4">頧臭辣撌亦�2021蝥?�?/option>
|
||||
<option value="class5">蝵𤑳�撌亦�2021蝥?�?/option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="course-name"><i class="fas fa-book"></i> 霂曄��滨妍</label>
|
||||
<input type="text" id="course-name" placeholder="霂瑁��亥紋蝔见�蝘堆�憒���唳旿蝏𤘪����雿𦦵頂蝏毺�">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="exam-date"><i class="fas fa-calendar-alt"></i> ����交�</label>
|
||||
<input type="date" id="exam-date">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label><i class="fas fa-info-circle"></i> 憭�釣霂湔�嚗�虾�㚁�</label>
|
||||
<textarea id="remarks" rows="3" placeholder="�航��交𧋦甈∟�����秩�𦒘縑�荔�憒���煺葉�������怨���蝑?></textarea>
|
||||
</div>
|
||||
|
||||
<div class="students-table-container">
|
||||
<h3><i class="fas fa-user-graduate"></i> 摮衣��鞟貍敶訫�</h3>
|
||||
<p class="text-muted">�㗇𥋘�剔漣�𠬍�蝟餌�撠�䌊�典�頧質砲�剔漣��郎�笔�銵?/p>
|
||||
|
||||
<div id="students-loading" class="loading" style="display: none;">
|
||||
<i class="fas fa-spinner"></i>
|
||||
<p>甇�銁�㰘蝸摮衣��𡑒”...</p>
|
||||
</div>
|
||||
|
||||
<div id="no-students" class="no-students" style="display: none;">
|
||||
<i class="fas fa-user-slash"></i>
|
||||
<p>霂亦号蝥扳��惩郎��㺭�殷�霂瑕�瘛餃�摮衣�靽⊥�</p>
|
||||
</div>
|
||||
|
||||
<table id="students-table" class="students-table" style="display: none;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>摮血噡</th>
|
||||
<th>憪枏�</th>
|
||||
<th>撟單𧒄�鞟貍</th>
|
||||
<th>�煺葉�鞟貍</th>
|
||||
<th>��錰�鞟貍</th>
|
||||
<th>�餉��鞟貍</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="students-tbody">
|
||||
<!-- 摮衣��唳旿撠��朞�JavaScript�冽���頧?-->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button id="cancel-btn" class="btn btn-secondary btn-large">
|
||||
<i class="fas fa-times"></i> �𡝗�
|
||||
</button>
|
||||
<button id="submit-btn" class="btn btn-primary btn-large" disabled>
|
||||
<i class="fas fa-check"></i> �𣂷漱�鞟貍
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3><i class="fas fa-lightbulb"></i> 雿輻鍂霂湔�</h3>
|
||||
<ul class="text-muted">
|
||||
<li>擐硋��㗇𥋘閬���交�蝏拍��剔漣�諹紋蝔?/li>
|
||||
<li>蝟餌�隡朞䌊�典�頧質砲�剔漣��郎�笔�銵?/li>
|
||||
<li>銝箸�銝芸郎�蠘��亙像�嗆�蝏押���銝剜�蝏拙���錰�鞟貍</li>
|
||||
<li>�餉��鞟貍撠�覔�格��滩䌊�刻恣蝞梹�暺䁅恕���嚗𡁜像�?0%嚗峕�銝?0%嚗峕��?0%嚗?/li>
|
||||
<li>蝖株恕�㰘秤�𡒊��領�𨀣�鈭斗�蝏抽�脲��桐�摮䀹㺭�?/li>
|
||||
<li>�𣂷漱�𤾸虾隞亙銁�𨀣�蝏拍恣���嗪△�Ｘ䰻�见�靽格㺿撌脣��亦��鞟貍</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script>
|
||||
// 璅⊥�摮衣��唳旿
|
||||
const mockStudents = [
|
||||
{ id: '2021001', name: '撘牐�', usual: '', midterm: '', final: '', total: '' },
|
||||
{ id: '2021002', name: '�𤾸�', usual: '', midterm: '', final: '', total: '' },
|
||||
{ id: '2021003', name: '�衤�', usual: '', midterm: '', final: '', total: '' },
|
||||
{ id: '2021004', name: '韏萄�', usual: '', midterm: '', final: '', total: '' },
|
||||
{ id: '2021005', name: '�曹�', usual: '', midterm: '', final: '', total: '' },
|
||||
{ id: '2021006', name: '摮坔�', usual: '', midterm: '', final: '', total: '' },
|
||||
{ id: '2021007', name: '�其�', usual: '', midterm: '', final: '', total: '' },
|
||||
{ id: '2021008', name: '�游�', usual: '', midterm: '', final: '', total: '' }
|
||||
];
|
||||
|
||||
// DOM���
|
||||
const classSelect = document.getElementById('class-select');
|
||||
const courseNameInput = document.getElementById('course-name');
|
||||
const examDateInput = document.getElementById('exam-date');
|
||||
const remarksInput = document.getElementById('remarks');
|
||||
const studentsLoading = document.getElementById('students-loading');
|
||||
const noStudents = document.getElementById('no-students');
|
||||
const studentsTable = document.getElementById('students-table');
|
||||
const studentsTbody = document.getElementById('students-tbody');
|
||||
const cancelBtn = document.getElementById('cancel-btn');
|
||||
const submitBtn = document.getElementById('submit-btn');
|
||||
|
||||
// 霈曄蔭暺䁅恕����交�銝箔�憭? const today = new Date().toISOString().split('T')[0];
|
||||
examDateInput.value = today;
|
||||
|
||||
// �剔漣�㗇𥋘�睃�鈭衤辣
|
||||
classSelect.addEventListener('change', function() {
|
||||
const selectedClass = this.value;
|
||||
|
||||
if (!selectedClass) {
|
||||
hideStudentsTable();
|
||||
submitBtn.disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// �曄內�㰘蝸�嗆�? showLoading();
|
||||
|
||||
// 璅⊥�API靚�鍂撱嗉�
|
||||
setTimeout(() => {
|
||||
loadStudentsForClass(selectedClass);
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// �㰘蝸摮衣��唳旿
|
||||
function loadStudentsForClass(className) {
|
||||
// 璅⊥�API�滚�
|
||||
if (mockStudents.length > 0) {
|
||||
renderStudentsTable(mockStudents);
|
||||
} else {
|
||||
showNoStudents();
|
||||
}
|
||||
}
|
||||
|
||||
// 皜脫�摮衣�銵冽聢
|
||||
function renderStudentsTable(students) {
|
||||
hideLoading();
|
||||
|
||||
// 皜�征銵冽聢
|
||||
studentsTbody.innerHTML = '';
|
||||
|
||||
// 瘛餃�摮衣�銵? students.forEach((student, index) => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${student.id}</td>
|
||||
<td>${student.name}</td>
|
||||
<td>
|
||||
<input type="number" class="grade-input usual-grade"
|
||||
data-index="${index}" min="0" max="100"
|
||||
placeholder="0-100" value="${student.usual}">
|
||||
</td>
|
||||
<td>
|
||||
<input type="number" class="grade-input midterm-grade"
|
||||
data-index="${index}" min="0" max="100"
|
||||
placeholder="0-100" value="${student.midterm}">
|
||||
</td>
|
||||
<td>
|
||||
<input type="number" class="grade-input final-grade"
|
||||
data-index="${index}" min="0" max="100"
|
||||
placeholder="0-100" value="${student.final}">
|
||||
</td>
|
||||
<td>
|
||||
<span class="total-grade" data-index="${index}">${student.total || ''}</span>
|
||||
</td>
|
||||
`;
|
||||
|
||||
studentsTbody.appendChild(row);
|
||||
});
|
||||
|
||||
// �曄內銵冽聢
|
||||
studentsTable.style.display = 'table';
|
||||
noStudents.style.display = 'none';
|
||||
|
||||
// �舐鍂�𣂷漱�厰僼
|
||||
submitBtn.disabled = false;
|
||||
|
||||
// 瘛餃��鞟貍颲枏�鈭衤辣�穃𨯬
|
||||
addGradeInputListeners();
|
||||
}
|
||||
|
||||
// �曄內�㰘蝸�嗆�? function showLoading() {
|
||||
studentsLoading.style.display = 'block';
|
||||
studentsTable.style.display = 'none';
|
||||
noStudents.style.display = 'none';
|
||||
}
|
||||
|
||||
// �鞱��㰘蝸�嗆�? function hideLoading() {
|
||||
studentsLoading.style.display = 'none';
|
||||
}
|
||||
|
||||
// �曄內�惩郎��㺭�? function showNoStudents() {
|
||||
hideLoading();
|
||||
studentsTable.style.display = 'none';
|
||||
noStudents.style.display = 'block';
|
||||
}
|
||||
|
||||
// �鞱�摮衣�銵冽聢
|
||||
function hideStudentsTable() {
|
||||
studentsTable.style.display = 'none';
|
||||
noStudents.style.display = 'none';
|
||||
}
|
||||
|
||||
// 瘛餃��鞟貍颲枏�鈭衤辣�穃𨯬
|
||||
function addGradeInputListeners() {
|
||||
const usualGrades = document.querySelectorAll('.usual-grade');
|
||||
const midtermGrades = document.querySelectorAll('.midterm-grade');
|
||||
const finalGrades = document.querySelectorAll('.final-grade');
|
||||
|
||||
usualGrades.forEach(input => {
|
||||
input.addEventListener('input', calculateTotalGrade);
|
||||
});
|
||||
|
||||
midtermGrades.forEach(input => {
|
||||
input.addEventListener('input', calculateTotalGrade);
|
||||
});
|
||||
|
||||
finalGrades.forEach(input => {
|
||||
input.addEventListener('input', calculateTotalGrade);
|
||||
});
|
||||
}
|
||||
|
||||
// 霈∠��餉��鞟貍
|
||||
function calculateTotalGrade(event) {
|
||||
const input = event.target;
|
||||
const index = input.getAttribute('data-index');
|
||||
|
||||
// �瑕�銝劐葵�鞟貍
|
||||
const usualInput = document.querySelector(`.usual-grade[data-index="${index}"]`);
|
||||
const midtermInput = document.querySelector(`.midterm-grade[data-index="${index}"]`);
|
||||
const finalInput = document.querySelector(`.final-grade[data-index="${index}"]`);
|
||||
const totalSpan = document.querySelector(`.total-grade[data-index="${index}"]`);
|
||||
|
||||
const usual = parseFloat(usualInput.value) || 0;
|
||||
const midterm = parseFloat(midtermInput.value) || 0;
|
||||
const final = parseFloat(finalInput.value) || 0;
|
||||
|
||||
// 霈∠��餉��鞟貍嚗���㵪�撟單𧒄20%嚗峕�銝?0%嚗峕��?0%嚗? const total = (usual * 0.2) + (midterm * 0.3) + (final * 0.5);
|
||||
|
||||
// �曄內�餉��鞟貍嚗���滢��亙��湔㺭嚗? totalSpan.textContent = Math.round(total);
|
||||
|
||||
// �寞旿�鞟貍��凒霈曄蔭憸𡏭𠧧
|
||||
if (total >= 90) {
|
||||
totalSpan.style.color = '#38a169';
|
||||
totalSpan.style.fontWeight = 'bold';
|
||||
} else if (total >= 60) {
|
||||
totalSpan.style.color = '#d69e2e';
|
||||
totalSpan.style.fontWeight = 'normal';
|
||||
} else {
|
||||
totalSpan.style.color = '#e53e3e';
|
||||
totalSpan.style.fontWeight = 'bold';
|
||||
}
|
||||
}
|
||||
|
||||
// 銵典�撉諹�
|
||||
function validateForm() {
|
||||
const className = classSelect.value;
|
||||
const courseName = courseNameInput.value.trim();
|
||||
|
||||
if (!className) {
|
||||
alert('霂琿�㗇𥋘�剔漣');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!courseName) {
|
||||
alert('霂瑁��亥紋蝔见�蝘?);
|
||||
courseNameInput.focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
// 璉��交糓�行�摮衣��鞟貍�芸‵�? const usualGrades = document.querySelectorAll('.usual-grade');
|
||||
const midtermGrades = document.querySelectorAll('.midterm-grade');
|
||||
const finalGrades = document.querySelectorAll('.final-grade');
|
||||
|
||||
for (let i = 0; i < usualGrades.length; i++) {
|
||||
const usual = usualGrades[i].value.trim();
|
||||
const midterm = midtermGrades[i].value.trim();
|
||||
const final = finalGrades[i].value.trim();
|
||||
|
||||
if (!usual || !midterm || !final) {
|
||||
alert(`霂瑕‵�嗵洵${i + 1}銵�郎�毺����㗇�蝏奈);
|
||||
return false;
|
||||
}
|
||||
|
||||
const usualNum = parseFloat(usual);
|
||||
const midtermNum = parseFloat(midterm);
|
||||
const finalNum = parseFloat(final);
|
||||
|
||||
if (usualNum < 0 || usualNum > 100 ||
|
||||
midtermNum < 0 || midtermNum > 100 ||
|
||||
finalNum < 0 || finalNum > 100) {
|
||||
alert(`蝚?{i + 1}銵�郎�毺��鞟貍敹�◆�?-100銋钅𡢿`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// �園�銵典��唳旿
|
||||
function collectFormData() {
|
||||
const className = classSelect.options[classSelect.selectedIndex].text;
|
||||
const courseName = courseNameInput.value.trim();
|
||||
const examDate = examDateInput.value;
|
||||
const remarks = remarksInput.value.trim();
|
||||
|
||||
const grades = [];
|
||||
const rows = studentsTbody.querySelectorAll('tr');
|
||||
|
||||
rows.forEach((row, index) => {
|
||||
const studentId = row.cells[0].textContent;
|
||||
const studentName = row.cells[1].textContent;
|
||||
const usual = row.cells[2].querySelector('input').value;
|
||||
const midterm = row.cells[3].querySelector('input').value;
|
||||
const final = row.cells[4].querySelector('input').value;
|
||||
const total = row.cells[5].querySelector('span').textContent;
|
||||
|
||||
grades.push({
|
||||
studentId,
|
||||
studentName,
|
||||
usual: parseFloat(usual),
|
||||
midterm: parseFloat(midterm),
|
||||
final: parseFloat(final),
|
||||
total: parseFloat(total)
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
className,
|
||||
courseName,
|
||||
examDate,
|
||||
remarks,
|
||||
grades
|
||||
};
|
||||
}
|
||||
|
||||
// �𣂷漱銵典�
|
||||
function submitForm() {
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = collectFormData();
|
||||
|
||||
// �曄內�𣂷漱銝剔𠶖�? submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> �𣂷漱銝?..';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
// 璅⊥�API靚�鍂
|
||||
setTimeout(() => {
|
||||
// 璅⊥��𣂼��滚�
|
||||
alert(`�鞟貍�𣂷漱�𣂼�嚗�n�剔漣嚗?{formData.className}\n霂曄�嚗?{formData.courseName}\n�勗��?{formData.grades.length}�滚郎���蝏奈);
|
||||
|
||||
// �滨蔭�厰僼�嗆�? submitBtn.innerHTML = '<i class="fas fa-check"></i> �𣂷漱�鞟貍';
|
||||
submitBtn.disabled = false;
|
||||
|
||||
// �滨蔭銵典�
|
||||
resetForm();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// �滨蔭銵典�
|
||||
function resetForm() {
|
||||
classSelect.value = '';
|
||||
courseNameInput.value = '';
|
||||
examDateInput.value = today;
|
||||
remarksInput.value = '';
|
||||
|
||||
// 皜�征摮衣�銵冽聢
|
||||
studentsTbody.innerHTML = '';
|
||||
studentsTable.style.display = 'none';
|
||||
noStudents.style.display = 'none';
|
||||
|
||||
// 蝳�鍂�𣂷漱�厰僼
|
||||
submitBtn.disabled = true;
|
||||
}
|
||||
|
||||
// �𡝗��厰僼鈭衤辣
|
||||
cancelBtn.addEventListener('click', function() {
|
||||
if (confirm('蝖桀�閬��瘨��嚗���㗇𧊋靽嘥���凒�孵�隡帋腺憭晞�?)) {
|
||||
resetForm();
|
||||
}
|
||||
});
|
||||
|
||||
// �𣂷漱�厰僼鈭衤辣
|
||||
submitBtn.addEventListener('click', submitForm);
|
||||
|
||||
// 憿菟𢒰�㰘蝸�嗅�憪见�
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 璉��交糓�行�敹����㺭�? if (!classSelect.value) {
|
||||
submitBtn.disabled = true;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user