Python构建学生信息管理系统：前端页面开发

在本系列博客的前几篇中，我们详细介绍了学生信息管理系统（SIMS）的需求分析、环境搭建、工程初始化、数据库设计、后端逻辑以及安全设计。在本文中，我们将专注于前端页面的开发，包括学生信息的展示、搜索以及增删改操作。

学生信息列表页面

首先，我们将创建一个学生信息列表页面，该页面将展示所有学生的信息，并提供搜索、添加、编辑和删除功能。

HTML模板（templates/students.html）

<!-- templates/students.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student List</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <h1>Student List</h1>
    <input type="text" id="searchInput" placeholder="Search by name...">
    <button onclick="searchStudents()">Search</button>
    <table id="studentsTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Class ID</th>
                <th>Email</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <!-- 学生信息将通过JavaScript动态插入 -->
        </tbody>
    </table>
    <script src="{{ url_for('static', filename='js/students.js') }}"></script>
</body>
</html>

CSS样式（static/css/style.css）

/* static/css/style.css */

body {
    font-family: Arial, sans-serif;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 10px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

input[type="text"] {
    margin-bottom: 20px;
    padding: 10px;
    width: 200px;
}

button {
    padding: 10px 20px;
    cursor: pointer;
}

JavaScript逻辑（static/js/students.js）

// static/js/students.js

function fetchStudents() {
    fetch('/students')
    .then(response => response.json())
    .then(data => {
        const tableBody = document.getElementById('studentsTable').getElementsByTagName('tbody')[0];
        tableBody.innerHTML = ''; // 清空表格
        data.students.forEach(student => {
            const row = tableBody.insertRow();
            row.insertCell(0).textContent = student.StudentID;
            row.insertCell(1).textContent = student.FirstName;
            row.insertCell(2).textContent = student.LastName;
            row.insertCell(3).textContent = student.ClassID;
            row.insertCell(4).textContent = student.Email;
            const actionsCell = row.insertCell(5);
            actionsCell.innerHTML = `
                <button οnclick="editStudent(${student.StudentID})">Edit</button>
                <button οnclick="deleteStudent(${student.StudentID})">Delete</button>
            `;
        });
    })
    .catch(error => console.error('Error fetching students:', error));
}

function searchStudents() {
    const searchTerm = document.getElementById('searchInput').value;
    fetch(`/students?search=${searchTerm}`)
    .then(response => response.json())
    .then(data => {
        const tableBody = document.getElementById('studentsTable').getElementsByTagName('tbody')[0];
        tableBody.innerHTML = ''; // 清空表格
        data.students.forEach(student => {
            // 插入学生信息到表格
            // 代码与 fetchStudents 函数中的类似
        });
    })
    .catch(error => console.error('Error searching students:', error));
}

function editStudent(studentID) {
    // 打开编辑学生信息的模态框或页面
    // 可以通过JavaScript打开一个新的页面或模态框，并填充当前学生的信息
}

function deleteStudent(studentID) {
    // 发送删除请求到服务器
    fetch(`/students/${studentID}`, {
        method: 'DELETE'
    })
    .then(response => {
        if (response.ok) {
            fetchStudents(); // 更新学生列表
        } else {
            alert('Error deleting student.');
        }
    })
    .catch(error => console.error('Error deleting student:', error));
}

// 当文档加载完成时，获取学生列表
document.addEventListener('DOMContentLoaded', fetchStudents);

学生信息编辑页面

编辑页面将允许用户更新现有学生的信息。这个页面可以是模态框内的表单，也可以是一个新的页面。

HTML模板（templates/edit_student.html）

<!-- templates/edit_student.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Edit Student</title>
    <!-- 引入CSS样式 -->
</head>
<body>
    <h1>Edit Student</h1>
    <form id="editStudentForm">
        <label for="firstName">First Name:</label>
        <input type="text" id="firstName" name="FirstName" required><br>
        
        <label for="lastName">Last Name:</label>
        <input type="text" id="lastName" name="LastName" required><br>
        
        <!-- 添加其他字段... -->
        
        <button type="submit">Save Changes</button>
    </form>
    <!-- 引入JavaScript逻辑 -->
</body>
</html>