学生管理系统毕业设计：完整代码示例

这是一个简单的学生管理系统毕业设计示例，包括前端页面和后端API的代码。这个示例使用了HTML、CSS、JavaScript和Node.js，展示了如何创建学生列表、编辑和删除学生信息。

前端页面

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>学生管理系统</title>
    <link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
    <h1>学生管理系统</h1>
    <div id='student-list'></div>

    <script src='script.js'></script>
</body>
</html>

style.css

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

h1 {
    text-align: center;
}

#student-list {
    margin: 20px auto;
    max-width: 600px;
    border: 1px solid #ccc;
    padding: 10px;
}

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

.table th,
.table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ccc;
}

.button {
    padding: 6px 12px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

script.js

document.addEventListener('DOMContentLoaded', function() {
    fetchStudents();
});

function fetchStudents() {
    fetch('/api/students')
        .then(response => response.json())
        .then(data => displayStudents(data))
        .catch(error => console.log(error));
}

function displayStudents(students) {
    const studentList = document.getElementById('student-list');
    studentList.innerHTML = '';

    const table = document.createElement('table');
    table.className = 'table';

    const headerRow = table.insertRow();
    headerRow.innerHTML = '<th>ID</th><th>姓名</th><th>年龄</th><th>操作</th>';

    students.forEach(student => {
        const row = table.insertRow();
        row.innerHTML = `<td>${student.id}</td><td>${student.name}</td><td>${student.age}</td><td><button class='button' onclick='editStudent(${student.id})'>编辑</button><button class='button' onclick='deleteStudent(${student.id})'>删除</button></td>`;
    });

    studentList.appendChild(table);
}

function editStudent(id) {
    // 编辑学生的逻辑
}

function deleteStudent(id) {
    // 删除学生的逻辑
}

后端API

server.js

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

let students = [
    { id: 1, name: '张三', age: 18 },
    { id: 2, name: '李四', age: 20 }
];

app.get('/api/students', (req, res) => {
    res.json(students);
});

app.post('/api/students', (req, res) => {
    const newStudent = req.body;
    students.push(newStudent);
    res.status(201).json(newStudent);
});

app.put('/api/students/:id', (req, res) => {
    const id = parseInt(req.params.id);
    const updatedStudent = req.body;
    students = students.map(student => {
        if (student.id === id) {
            return { ...student, ...updatedStudent };
        }
        return student;
    });
    res.sendStatus(204);
});

app.delete('/api/students/:id', (req, res) => {
    const id = parseInt(req.params.id);
    students = students.filter(student => student.id !== id);
    res.sendStatus(204);
});

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

运行步骤:

将上述代码保存到对应的文件中。
在命令行中运行node server.js启动后端服务器。
在浏览器中打开index.html文件，即可展示学生列表和进行学生的编辑和删除操作。

注意: 这个示例只是一个简单的毕业设计示例，实际的学生管理系统需要根据具体需求进行定制和扩展，例如添加身份验证、数据校验和更复杂的业务逻辑等。