html做一个学习成绩管理网页

Question

有没有佬看看做一个html学生成绩管理网页，其中需要要用到node，express，mysql（代码中连接mysql），navicat prenium（网页中的增删改除也会影响到表），html，css，js。
网页分为两个页面
第一个页面：需要在输入框输入用户名和密码登录，页面中有登录按钮（按钮为绿色）和注册按钮（按钮为蓝色）。账号密码输入正确后点击登录跳转到第二个页面。
若点击注册则跳转到第三个页面。
第二个页面：学生成绩管理界面，此界面中做一个表格有学号， 班级，成绩，科目，排名。该页面的顶部要有一个添加的按钮方便增删改查。该页面的增删改查也会影响到navicat premium
第三个页面：注册页面可以注册新用户登录第三个界面，该页面的增删改查也会影响到navicat premium

Answer 1

让【道友老李】来帮你解答，本回答参考通义千问大模型编写，并整理提供，如果还有疑问可以点击头像关注私信或评论。

如果答案让您满意，请采纳、关注，非常感谢！

好的，下面是一个简单的学生成绩管理网页的实现方案。这个方案包括三个页面：登录页面、成绩管理页面和注册页面。我们将使用HTML、CSS、JavaScript来构建前端界面，并使用Node.js、Express和MySQL来处理后端逻辑。

1. 项目结构

project-root/
├── public/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── script.js
│   ├── index.html
│   ├── dashboard.html
│   └── register.html
├── server.js
├── package.json
└── .env

2. 安装依赖

首先，确保你已经安装了Node.js。然后在项目根目录下运行以下命令来初始化项目并安装必要的依赖：

npm init -y
npm install express mysql2 body-parser ejs dotenv

3. 配置文件

创建一个.env文件来存储数据库连接信息和其他环境变量：

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=your_password
DB_NAME=student_management

4. 数据库设置

使用Navicat Premium创建一个名为student_management的数据库，并创建以下表：

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL
);

CREATE TABLE students (
    id INT AUTO_INCREMENT PRIMARY KEY,
    student_id VARCHAR(50) NOT NULL,
    class VARCHAR(50),
    subject VARCHAR(50),
    score DECIMAL(5, 2),
    rank INT
);

5. 后端代码 (server.js)

const express = require('express');
const mysql = require('mysql2/promise');
const bodyParser = require('body-parser');
const session = require('express-session');
const dotenv = require('dotenv');

dotenv.config();

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

app.use(bodyParser.urlencoded({ extended: true }));
app.use(session({
    secret: 'secret',
    resave: false,
    saveUninitialized: true
}));

const dbConfig = {
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME
};

async function query(sql, params) {
    const connection = await mysql.createConnection(dbConfig);
    const [rows] = await connection.execute(sql, params);
    connection.end();
    return rows;
}

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});

app.post('/login', async (req, res) => {
    const { username, password } = req.body;
    const sql = 'SELECT * FROM users WHERE username = ? AND password = ?';
    const result = await query(sql, [username, password]);

    if (result.length > 0) {
        req.session.user = result[0];
        res.redirect('/dashboard');
    } else {
        res.send('Invalid username or password');
    }
});

app.get('/dashboard', (req, res) => {
    if (req.session.user) {
        res.sendFile(__dirname + '/public/dashboard.html');
    } else {
        res.redirect('/');
    }
});

app.get('/students', async (req, res) => {
    const sql = 'SELECT * FROM students';
    const students = await query(sql);
    res.json(students);
});

app.post('/students', async (req, res) => {
    const { student_id, class, subject, score, rank } = req.body;
    const sql = 'INSERT INTO students (student_id, class, subject, score, rank) VALUES (?, ?, ?, ?, ?)';
    await query(sql, [student_id, class, subject, score, rank]);
    res.sendStatus(201);
});

app.put('/students/:id', async (req, res) => {
    const { id } = req.params;
    const { student_id, class, subject, score, rank } = req.body;
    const sql = 'UPDATE students SET student_id = ?, class = ?, subject = ?, score = ?, rank = ? WHERE id = ?';
    await query(sql, [student_id, class, subject, score, rank, id]);
    res.sendStatus(200);
});

app.delete('/students/:id', async (req, res) => {
    const { id } = req.params;
    const sql = 'DELETE FROM students WHERE id = ?';
    await query(sql, [id]);
    res.sendStatus(200);
});

app.get('/register', (req, res) => {
    res.sendFile(__dirname + '/public/register.html');
});

app.post('/register', async (req, res) => {
    const { username, password } = req.body;
    const sql = 'INSERT INTO users (username, password) VALUES (?, ?)';
    await query(sql, [username, password]);
    res.redirect('/');
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

6. 前端代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div class="container">
        <h2>Login</h2>
        <form action="/login" method="post">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
            <button type="submit" class="green-button">Login</button>
        </form>
        <a href="/register"><button class="blue-button">Register</button></a>
    </div>
</body>
</html>

dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div class="container">
        <h2>Student Management</h2>
        <button id="add-student" class="green-button">Add Student</button>
        <table id="students-table">
            <thead>
                <tr>
                    <th>Student ID</th>
                    <th>Class</th>
                    <th>Subject</th>
                    <th>Score</th>
                    <th>Rank</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <!-- Data will be populated here -->
            </tbody>
        </table>
    </div>
    <script src="/js/script.js"></script>
</body>
</html>

register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div class="container">
        <h2>Register</h2>
        <form action="/register" method="post">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
            <button type="submit" class="blue-button">Register</button>
        </form>
    </div>
</body>
</html>

style.css

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
    margin-bottom: 20px;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.green-button {
    background-color: green;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.blue-button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
}

script.js

document.addEventListener('DOMContentLoaded', async () => {
    const tableBody = document.querySelector('#students-table tbody');
    const addStudentButton = document.getElementById('add-student');

    // Fetch and display students
    const students = await fetch('/students').then(res => res.json());
    students.forEach(student => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${student.student_id}</td>
            <td>${student.class}</td>
            <td>${student.subject}</td>
            <td>${student.score}</td>
            <td>${student.rank}</td>
            <td>
                <button class="edit-button" data-id="${student.id}">Edit</button>
                <button class="delete-button" data-id="${student.id}">Delete</button>
            </td>
        `;
        tableBody.appendChild(row);
    });

    // Add student
    addStudentButton.addEventListener('click', () => {
        const studentId = prompt('Enter Student ID:');
        const class_ = prompt('Enter Class:');
        const subject = prompt('Enter Subject:');
        const score = prompt('Enter Score:');
        const rank = prompt('Enter Rank:');

        fetch('/students', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ student_id: studentId, class: class_, subject, score, rank })
        }).then(() => location.reload());
    });

    // Edit student
    tableBody.addEventListener('click', async (e) => {
        if (e.target.classList.contains('edit-button')) {
            const id = e.target.getAttribute('data-id');
            const student = students.find(s => s.id == id);

            const studentId = prompt('Enter Student ID:', student.student_id);
            const class_ = prompt('Enter Class:', student.class);
            const subject = prompt('Enter Subject:', student.subject);
            const score = prompt('Enter Score:', student.score);
            const rank = prompt('Enter Rank:', student.rank);

            fetch(`/students/${id}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ student_id: studentId, class: class_, subject, score, rank })
            }).then(() => location.reload());
        }

        // Delete student
        if (e.target.classList.contains('delete-button')) {
            const id = e.target.getAttribute('data-id');
            if (confirm('Are you sure you want to delete this student?')) {
                fetch(`/students/${id}`, { method: 'DELETE' }).then(() => location.reload());
            }
        }
    });
});

7. 运行项目

在项目根目录下运行以下命令启动服务器：

node server.js

现在你可以通过浏览器访问http://localhost:3000来查看和测试你的学生成绩管理网页。希望这个示例对你有帮助！