正文

揭秘：如何用jQuery实现前后端分离的校园学生管理系统？

/0 浏览量
0322

引言

随着互联网技术的不断发展，前后端分离已经成为现代Web开发的主流模式。本文将探讨如何使用jQuery实现一个前后端分离的校园学生管理系统。我们将详细分析系统架构、技术选型以及关键代码实现。

系统架构

在前后端分离的架构中，前端负责展示和交互，后端负责数据处理和业务逻辑。以下是校园学生管理系统的基本架构：

  • 前端：使用jQuery作为主要库，配合HTML、CSS和JavaScript实现用户界面和交互。
  • 后端：可以选择Node.js、Python、Java等语言，配合Express、Flask、Spring Boot等框架实现API接口。
  • 数据库：使用MySQL、MongoDB等关系型或非关系型数据库存储学生信息。

技术选型

以下是实现校园学生管理系统所需的技术选型：

  • 前端：jQuery、HTML5、CSS3、Bootstrap
  • 后端：Node.js、Express、MySQL
  • 数据库：MySQL

关键代码实现

1. 前端界面

首先，我们需要创建一个简单的HTML页面，用于展示学生信息列表和添加、编辑学生信息的表单。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>校园学生管理系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>学生信息列表</h2>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>班级</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="studentList">
                <!-- 学生信息将通过jQuery动态加载 -->
            </tbody>
        </table>
        <button class="btn btn-primary" data-toggle="modal" data-target="#studentModal">添加学生</button>
    </div>

    <!-- 添加/编辑学生信息的模态框 -->
    <div class="modal fade" id="studentModal" tabindex="-1" role="dialog" aria-labelledby="studentModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="studentModalLabel">学生信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="studentForm">
                        <div class="form-group">
                            <label for="studentId">学号</label>
                            <input type="text" class="form-control" id="studentId" required>
                        </div>
                        <div class="form-group">
                            <label for="studentName">姓名</label>
                            <input type="text" class="form-control" id="studentName" required>
                        </div>
                        <div class="form-group">
                            <label for="studentGender">性别</label>
                            <select class="form-control" id="studentGender">
                                <option value="male">男</option>
                                <option value="female">女</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="studentClass">班级</label>
                            <input type="text" class="form-control" id="studentClass" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="saveStudent">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>

2. 后端API

接下来，我们需要实现后端API，用于处理学生信息的增删改查（CRUD）操作。

const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

// 创建数据库连接
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'student_management'
});

connection.connect();

// 获取学生信息列表
app.get('/students', (req, res) => {
    const query = 'SELECT * FROM students';
    connection.query(query, (error, results) => {
        if (error) throw error;
        res.send(results);
    });
});

// 添加学生信息
app.post('/students', (req, res) => {
    const { studentId, studentName, studentGender, studentClass } = req.body;
    const query = 'INSERT INTO students (student_id, student_name, student_gender, student_class) VALUES (?, ?, ?, ?)';
    connection.query(query, [studentId, studentName, studentGender, studentClass], (error, results) => {
        if (error) throw error;
        res.send(results);
    });
});

// 编辑学生信息
app.put('/students/:id', (req, res) => {
    const { studentId, studentName, studentGender, studentClass } = req.body;
    const { id } = req.params;
    const query = 'UPDATE students SET student_id = ?, student_name = ?, student_gender = ?, student_class = ? WHERE id = ?';
    connection.query(query, [studentId, studentName, studentGender, studentClass, id], (error, results) => {
        if (error) throw error;
        res.send(results);
    });
});

// 删除学生信息
app.delete('/students/:id', (req, res) => {
    const { id } = req.params;
    const query = 'DELETE FROM students WHERE id = ?';
    connection.query(query, [id], (error, results) => {
        if (error) throw error;
        res.send(results);
    });
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

3. 前端交互

最后，我们需要使用jQuery实现前端与后端的交互，包括学生信息列表的加载、添加、编辑和删除操作。

$(document).ready(function() {
    // 加载学生信息列表
    function loadStudents() {
        $.ajax({
            url: '/students',
            type: 'GET',
            success: function(data) {
                const students = data;
                const html = students.map(student => `
                    <tr>
                        <td>${student.student_id}</td>
                        <td>${student.student_name}</td>
                        <td>${student.student_gender}</td>
                        <td>${student.student_class}</td>
                        <td>
                            <button class="btn btn-warning" data-id="${student.id}" data-toggle="modal" data-target="#studentModal">编辑</button>
                            <button class="btn btn-danger" data-id="${student.id}" onclick="deleteStudent(${student.id})">删除</button>
                        </td>
                    </tr>
                `).join('');
                $('#studentList').html(html);
            }
        });
    }

    // 添加/编辑学生信息
    $('#saveStudent').click(function() {
        const studentId = $('#studentId').val();
        const studentName = $('#studentName').val();
        const studentGender = $('#studentGender').val();
        const studentClass = $('#studentClass').val();
        const id = $('#studentModal').data('id');

        const url = id ? `/students/${id}` : '/students';
        const method = id ? 'PUT' : 'POST';

        $.ajax({
            url: url,
            type: method,
            data: { studentId, studentName, studentGender, studentClass },
            success: function(data) {
                $('#studentModal').modal('hide');
                loadStudents();
            }
        });
    });

    // 删除学生信息
    function deleteStudent(id) {
        $.ajax({
            url: `/students/${id}`,
            type: 'DELETE',
            success: function(data) {
                loadStudents();
            }
        });
    }
});

总结

通过以上步骤，我们成功地使用jQuery实现了前后端分离的校园学生管理系统。该系统具备基本的学生信息管理功能，包括信息展示、添加、编辑和删除操作。在实际开发中，可以根据需求添加更多功能，如权限管理、分页显示等。

-- 展开阅读全文 --