利用web前段技术设计一个学生成绩管理系统的界面代码Python
时间: 2024-03-13 22:48:11 浏览: 27
很高兴为您提供帮助！下面是一个使用 HTML、CSS 和 JavaScript 设计的学生成绩管理系统的界面代码示例。由于 Python 是后端编程语言，因此这里提供的是前端代码，需要与后端代码结合使用。
### HTML 代码
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生成绩管理系统</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>学生成绩管理系统</h1>
<h2>添加学生信息</h2>
<form id="add-student-form">
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br>
<label for="gender">性别：</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select><br>
<label for="age">年龄：</label>
<input type="number" id="age" name="age"><br>
<input type="submit" value="添加">
</form>
<h2>添加成绩信息</h2>
<form id="add-score-form">
<label for="student-id">学生 ID：</label>
<input type="number" id="student-id" name="student_id"><br>
<label for="subject">科目：</label>
<input type="text" id="subject" name="subject"><br>
<label for="score">分数：</label>
<input type="number" id="score" name="score"><br>
<input type="submit" value="添加">
</form>
<h2>查询学生信息</h2>
<button id="get-students-btn">查询</button>
<div id="students-list"></div>
<h2>查询成绩信息</h2>
<button id="get-scores-btn">查询</button>
<div id="scores-list"></div>
<script src="script.js"></script>
</body>
</html>
```
### CSS 代码
```css
h1 {
text-align: center;
font-size: 36px;
margin-bottom: 30px;
}
h2 {
font-size: 24px;
margin-top: 50px;
margin-bottom: 20px;
}
form {
display: inline-block;
margin-right: 20px;
}
label {
display: inline-block;
width: 100px;
text-align: right;
margin-right: 10px;
}
input[type="text"],
input[type="number"],
select {
margin-bottom: 10px;
}
input[type="submit"] {
margin-left: 110px;
}
button {
margin-bottom: 10px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 10px;
}
```
### JavaScript 代码
```javascript
// 添加学生信息
const addStudentForm = document.getElementById('add-student-form');
addStudentForm.addEventListener('submit', (event) => {
event.preventDefault();
const name = document.getElementById('name').value;
const gender = document.getElementById('gender').value;
const age = document.getElementById('age').value;
// 发送 POST 请求
fetch('/add-student', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: name,
gender: gender,
age: age
})
})
.then(response => response.json())
.then(data => {
console.log(data);
alert('添加成功');
})
.catch(error => {
console.error(error);
alert('添加失败');
});
});
// 添加成绩信息
const addScoreForm = document.getElementById('add-score-form');
addScoreForm.addEventListener('submit', (event) => {
event.preventDefault();
const studentId = document.getElementById('student-id').value;
const subject = document.getElementById('subject').value;
const score = document.getElementById('score').value;
// 发送 POST 请求
fetch('/add-score', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
student_id: studentId,
subject: subject,
score: score
})
})
.then(response => response.json())
.then(data => {
console.log(data);
alert('添加成功');
})
.catch(error => {
console.error(error);
alert('添加失败');
});
});
// 查询学生信息
const getStudentsBtn = document.getElementById('get-students-btn');
const studentsList = document.getElementById('students-list');
getStudentsBtn.addEventListener('click', (event) => {
// 发送 GET 请求
fetch('/get-students')
.then(response => response.json())
.then(data => {
console.log(data);
let html = '<ul>';
data.forEach(student => {
html += `<li>ID: ${student.id} - 姓名: ${student.name} - 性别: ${student.gender} - 年龄: ${student.age}</li>`;
});
html += '</ul>';
studentsList.innerHTML = html;
})
.catch(error => {
console.error(error);
alert('查询失败');
});
});
// 查询成绩信息
const getScoresBtn = document.getElementById('get-scores-btn');
const scoresList = document.getElementById('scores-list');
getScoresBtn.addEventListener('click', (event) => {
// 发送 GET 请求
fetch('/get-scores')
.then(response => response.json())
.then(data => {
console.log(data);
let html = '<ul>';
data.forEach(score => {
html += `<li>姓名: ${score.name} - 科目: ${score.subject} - 分数: ${score.score}</li>`;
});
html += '</ul>';
scoresList.innerHTML = html;
})
.catch(error => {
console.error(error);
alert('查询失败');
});
});
```
以上是一个使用 HTML、CSS 和 JavaScript 设计的学生成绩管理系统的界面代码示例，需要与后端代码结合使用。
相关推荐
最新推荐
python学生信息管理系统实现代码
主要介绍了python学生信息管理系统的实现代码，代码简单，复制即可使用,需要的朋友可以参考下
使用Python实现 学生学籍管理系统
主要介绍了使用Python实现 学生学籍管理系统，代码大致分为五个函数组成，具体内容详情本文给大家介绍的非常详细,需要的朋友可以参考下
不到40行代码用Python实现一个简单的推荐系统
主要给大家介绍了如何利用不到40行python代码实现一个简单的推荐系统，文中通过示例代码介绍的非常详细，对大家学习或者使用Python具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Python实现GUI学生信息管理系统
主要介绍了Python实现GUI学生信息管理系统，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
详解用python实现基本的学生管理系统(文件存储版)（python3）
主要介绍了python实现基本的学生管理系统，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
spring添加xml配置文件
1. 创建一个新的Spring配置文件，例如"applicationContext.xml"。
2. 在文件头部添加XML命名空间和schema定义，如下所示：
```
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。