大学测试：用一个html学生信息登记网页，其中需要要用到node，express，mysql（代码中连接mysql），navicat prenium（网页中的增删改除也会影响到表），html，css，js。
网页分为两个页面
第一个页面：需要在输入框输入用户名和密码登录，页面中有登录按钮（按钮为绿色）和注册按钮（按钮为蓝色）。账号密码输入成功后跳转到第二个界面：学生登录信息登录界面，此界面中做一个表格有学号，姓名，班级，联系方式，专业，操作。该页面的顶部要有一个添加的按钮方便增删改除。
两个页面的增删改除会影响到navicat premium
完成效果图如图所示：
分享
关注让【道友老李】来帮你解答，本回答参考通义千问大模型编写，并整理提供，如果还有疑问可以点击头像关注私信或评论。
如果答案让您满意，请采纳、关注，非常感谢！为了实现这个学生信息登记系统，我们需要构建一个前后端分离的应用程序。前端部分使用HTML、CSS和JavaScript来创建用户界面，后端则用Node.js配合Express框架处理请求，并通过MySQL数据库存储数据。下面我将分步骤详细说明如何实现这一功能。
student-info-system/
│
├── public/ # 静态文件存放目录
│ ├── css/ # CSS样式文件
│ ├── js/ # JavaScript脚本文件
│ └── index.html # 主页面
│
├── views/ # 视图模板文件
│ ├── login.ejs # 登录页
│ └── student.ejs # 学生信息页
│
├── app.js # 应用入口文件
└── package.json # 项目配置文件
在项目的根目录下运行：
npm init -y
安装必要的依赖包：
npm install express mysql ejs body-parser
在MySQL中创建数据库和表：
CREATE DATABASE students_db;
USE students_db;
CREATE TABLE `students` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`student_id` varchar(50) NOT NULL,
`name` varchar(100) NOT NULL,
`class` varchar(100),
`contact` varchar(100),
`major` varchar(100),
PRIMARY KEY (`id`)
);
const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
// 创建数据库连接
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'yourpassword',
database: 'students_db'
});
db.connect((err) => {
if (err) throw err;
console.log('Connected to the database.');
});
// 登录页面
app.get('/', (req, res) => {
res.render('login');
});
// 处理登录
app.post('/login', (req, res) => {
// 这里简单假设用户名为admin，密码为123456
if (req.body.username === 'admin' && req.body.password === '123456') {
res.redirect('/students');
} else {
res.send('Invalid credentials!');
}
});
// 学生信息页面
app.get('/students', (req, res) => {
const sql = 'SELECT * FROM students';
db.query(sql, (err, results) => {
if (err) throw err;
res.render('student', { students: results });
});
});
// 添加学生
app.post('/add-student', (req, res) => {
const { student_id, name, class, contact, major } = req.body;
const sql = 'INSERT INTO students (student_id, name, class, contact, major) VALUES (?, ?, ?, ?, ?)';
db.query(sql, [student_id, name, class, contact, major], (err, result) => {
if (err) throw err;
res.redirect('/students');
});
});
// 删除学生
app.get('/delete/:id', (req, res) => {
const id = req.params.id;
const sql = 'DELETE FROM students WHERE id = ?';
db.query(sql, [id], (err, result) => {
if (err) throw err;
res.redirect('/students');
});
});
// 更新学生
app.post('/update/:id', (req, res) => {
const id = req.params.id;
const { student_id, name, class, contact, major } = req.body;
const sql = 'UPDATE students SET student_id=?, name=?, class=?, contact=?, major=? WHERE id=?';
db.query(sql, [student_id, name, class, contact, major, id], (err, result) => {
if (err) throw err;
res.redirect('/students');
});
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
这里提供简单的示例代码，你可以根据需求进一步美化。
login.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<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" style="background-color: green; color: white;">Login</button>
<a href="/register" style="color: blue;">Register</a>
</form>
</body>
</html>
student.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Student Info</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>Students Information</h1>
<form action="/add-student" method="POST">
<input type="text" name="student_id" placeholder="Student ID" required>
<input type="text" name="name" placeholder="Name" required>
<input type="text" name="class" placeholder="Class">
<input type="text" name="contact" placeholder="Contact">
<input type="text" name="major" placeholder="Major">
<button type="submit">Add Student</button>
</form>
<table>
<tr>
<th>ID</th>
<th>Student ID</th>
<th>Name</th>
<th>Class</th>
<th>Contact</th>
<th>Major</th>
<th>Action</th>
</tr>
<% students.forEach(student => { %>
<tr>
<td><%= student.id %></td>
<td><%= student.student_id %></td>
<td><%= student.name %></td>
<td><%= student.class %></td>
<td><%= student.contact %></td>
<td><%= student.major %></td>
<td>
<a href="/delete/<%= student.id %>">Delete</a>
<form action="/update/<%= student.id %>" method="POST" style="display:inline;">
<input type="hidden" name="student_id" value="<%= student.student_id %>">
<input type="hidden" name="name" value="<%= student.name %>">
<input type="hidden" name="class" value="<%= student.class %>">
<input type="hidden" name="contact" value="<%= student.contact %>">
<input type="hidden" name="major" value="<%= student.major %>">
<button type="submit">Update</button>
</form>
</td>
</tr>
<% }); %>
</table>
</body>
</html>
body {
font-family: Arial, sans-serif;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
th {
background-color: #f2f2f2;
}
button {
margin: 10px 0;
}
这样你就有了一个基本的学生信息管理系统，包括登录、显示学生信息、添加新学生、删除学生和更新学生信息的功能。你可以根据实际需要对样式和功能进行扩展和完善。
分享
创建了问题
12月25日