现在有一个完整的MySQL数据库student,设计一个学生成绩管理系统完成对这个数据库的增删改查。 要求:1.该系统有用户登入界面,用户输入用户名和密码后才能进入学生成绩管理系统,并且合理增加系统的动画效果。 2.进入系统后,连接student数据库,用户能通过系统内提供的功能选择完成对该数据库的操作: (1)添加学生信息,如姓名、学号、专业、班级、数学、语文、英语成绩。 (2)修改学生信息 (3)删除学生信息 (4)查找学生信息 (5)对数据库内的学生信息按照总分排序 (6)展示数据库内的所有学生信息 给出该系统的html、JavaScript实现代码
时间: 2024-02-21 07:01:43 浏览: 78
由于该系统需要连接数据库,需要使用服务器端语言,例如PHP来完成。以下是一个简单的实现示例:
1. 登录界面HTML代码
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生成绩管理系统</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>学生成绩管理系统</h1>
<form action="login.php" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<button type="submit">登录</button>
</form>
</div>
</body>
</html>
```
2. 登录验证和跳转PHP代码
```php
<?php
// 用户名和密码验证
$username = $_POST['username'];
$password = $_POST['password'];
if ($username === 'admin' && $password === '123456') {
// 跳转到主页面
header('Location: main.php');
exit;
} else {
// 显示错误信息
echo '用户名或密码错误';
}
?>
```
3. 主页面HTML代码
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生成绩管理系统</title>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</head>
<body>
<div class="container">
<h1>学生成绩管理系统</h1>
<ul class="menu">
<li><a href="#add">添加学生信息</a></li>
<li><a href="#modify">修改学生信息</a></li>
<li><a href="#delete">删除学生信息</a></li>
<li><a href="#search">查找学生信息</a></li>
<li><a href="#sort">按总分排序</a></li>
<li><a href="#show">展示所有学生信息</a></li>
</ul>
<div class="content">
<div id="add">
<h2>添加学生信息</h2>
<form action="add.php" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="id">学号:</label>
<input type="text" id="id" name="id" required>
<label for="major">专业:</label>
<input type="text" id="major" name="major" required>
<label for="class">班级:</label>
<input type="text" id="class" name="class" required>
<label for="math">数学成绩:</label>
<input type="number" id="math" name="math" min="0" max="100" required>
<label for="chinese">语文成绩:</label>
<input type="number" id="chinese" name="chinese" min="0" max="100" required>
<label for="english">英语成绩:</label>
<input type="number" id="english" name="english" min="0" max="100" required>
<button type="submit">添加</button>
</form>
</div>
<!-- 省略其他功能的代码 -->
</div>
</div>
</body>
</html>
```
4. 添加学生信息PHP代码
```php
<?php
// 连接数据库
$host = 'localhost';
$user = 'root';
$password = '123456';
$database = 'student';
$conn = mysqli_connect($host, $user, $password, $database);
if (!$conn) {
die('连接数据库失败:' . mysqli_connect_error());
}
// 获取表单数据
$name = $_POST['name'];
$id = $_POST['id'];
$major = $_POST['major'];
$class = $_POST['class'];
$math = $_POST['math'];
$chinese = $_POST['chinese'];
$english = $_POST['english'];
// 插入数据
$sql = "INSERT INTO score (name, id, major, class, math, chinese, english) VALUES ('$name', '$id', '$major', '$class', $math, $chinese, $english)";
if (mysqli_query($conn, $sql)) {
echo '添加学生信息成功';
} else {
echo '添加学生信息失败:' . mysqli_error($conn);
}
// 关闭连接
mysqli_close($conn);
?>
```
5. CSS样式文件
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.menu {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.menu li {
flex: 1;
list-style: none;
text-align: center;
}
.menu a {
display: block;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
text-decoration: none;
color: #333;
transition: background-color .3s ease;
}
.menu a:hover {
background-color: #ccc;
}
.content > div {
margin-bottom: 30px;
}
h2 {
margin-bottom: 10px;
}
form label {
display: inline-block;
width: 80px;
}
form input[type="text"],
form input[type="password"],
form input[type="number"] {
width: 200px;
padding: 5px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
form button[type="submit"] {
display: block;
margin: 20px auto 0;
padding: 10px;
background-color: #007bff;
border: none;
border-radius: 5px;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color .3s ease;
}
form button[type="submit"]:hover {
background-color: #0069d9;
}
```
6. JavaScript代码
```javascript
// 滚动到锚点
function scrollToAnchor(anchorId) {
var anchor = document.getElementById(anchorId);
if (anchor) {
anchor.scrollIntoView({behavior: 'smooth'});
}
}
// 监听菜单点击事件
var menuLinks = document.querySelectorAll('.menu a');
for (var i = 0; i < menuLinks.length; i++) {
menuLinks[i].addEventListener('click', function(e) {
e.preventDefault();
var href = this.getAttribute('href');
scrollToAnchor(href.substr(1));
});
}
```
阅读全文