使用vue3实现页面学生成绩录入系统

去喝可乐哇

已于 2023-05-10 21:28:05 修改

阅读量1.3k

点赞数 2

分类专栏：项目学习文章标签： javascript 前端 vue.js

于 2023-04-27 11:11:15 首次发布

本文链接：https://blog.csdn.net/a1357000424/article/details/130402185

版权

项目学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现的功能如下：

输入框为空提示
数据添加
平均分计算
总分计算
姓名搜索

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实验二</title>
		<link rel="stylesheet" href="../实验二/css/实验二.css">
		<script type="text/javascript"  src="../实验二/js/vue.global.prod.js" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h3>学生成绩录入系统</h3>
			<div class="inputInfo">
				<label for="studentName">姓名：</label>
				<input type="text" id="studentName" placeholder="请输入学生的姓名......" v-model="newStudent.stuName" />
			</div>
			<div class="inputInfo">
				<label for="studentID">学号：</label>
				<input type="text" id="studentID" placeholder="请输入学生的学号......" v-model="newStudent.stuID" />
			</div>
			<div class="inputInfo">
				<label for="studentScore_One">课程一（HTML5应用开发）：</label>
				<input type="number" id="studentScore_One" placeholder="请输入课程成绩......" v-model.number="newStudent.scoreOne" />
			</div>
			<div class="inputInfo">
				<label for="studentScore_Two">课程二（JavaScript程序设计）：</label>
				<input type="number" id="studentScore_Two" placeholder="请输入课程成绩......" v-model.number="newStudent.scoreTwo" />
			</div>
			<div class="inputInfo">
				<label for="studentScore_Three">课程三（前端框架（Vue.js）应用开发）：</label>
				<input type="number" id="studentScore_Three" placeholder="请输入课程成绩......" v-model.number="newStudent.scoreThree" />
			</div>
			<button class="btnStyle createBtn" @click="createNewStudent()">添加学生成绩</button>
			
			<hr />
			<!-- 学生信息列表 -->
			<h3>学生成绩列表</h3>
			<div class="optionBtn">
				<button class="btnStyle averageBtn" @click="averageThree()">显示课程三的平均值</button>
				<button class="btnStyle averageBtn" @click="averageTotal()">显示个人课程平均分</button>
			</div>
			<table class="studentList">
				<thead>
					<tr>
						<td>姓名</td>
						<td>学号</td>
						<td>课程一<br />（HTML5应用开发）</td>
						<td>课程二<br />（JavaScript程序设计）</td>
						<td><a href="javascript:void(0)" @click="sortScoreThree()">课程三<br />（前端框架（Vue.js）应用开发）↑</a></td>
						<td>个人课程<br />总分</td>
						<td>个人课程<br />平均分</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(student,index) in students">
						<td>{{student.stuName}}</td>
						<td>{{student.stuID}}</td>
						<td>{{student.scoreOne}}</td>
						<td>{{student.scoreTwo}}</td>
						<td>{{student.scoreThree}}</td>
						<td>{{scoreTotal(index)}}</td>
						<td>{{student.scoreAverage}}</td>
						<td>
							<button class="btnStyle deleteBtn" @click="deleteStudent(index)">删除</button>
						</td>
					</tr>
					<tr class="lastTr">
						<td>平均分</td>
						<td>/</td>
						<td></td>
						<td></td>
						<td>{{averageThreeCourse}}</td>
						<td>/</td>
						<td>/</td>
						<td>/</td>
					</tr>
				</tbody>
			</table>
			<div class="searchInfo">
				按姓名搜索：<input type="text" v-model="search" />
				<button class="btnStyle searchBtn" @click="filteredStudents()">搜索</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		const app = Vue.createApp({
			data(){
				return{
					students:[{
						stuName:"远航",
						stuID:"22010230900",
						scoreOne:"88",
						scoreTwo:"99",
						scoreThree:"22",
						scoreAverage:''
					},
					{
						stuName:"小航",
						stuID:"22010230900",
						scoreOne:"18",
						scoreTwo:"29",
						scoreThree:"32",
						scoreAverage:''
					}],
					newStudent:{stuName:'',stuID:'',scoreOne:'',scoreTwo:'',scoreThree:'',scoreAverage:''},
					search:'',
					averageThreeCourse:0,
					courseNum:3
				}
			},
			methods: {
					createNewStudent(){
						if(this.newStudent.stuName ===""){
							alert("姓名不能为空！")
							return
						}
						if(this.newStudent.stuID ===""){
							alert("学号不能为空！")
							return
						}
						if(this.newStudent.scoreOne ===""){
							alert("课程一不能为空！")
							return
						}
						if(this.newStudent.scoreTwo ===""){
							alert("课程二不能为空！")
							return
						}
						if(this.newStudent.scoreThree ===""){
							alert("课程二不能为空！")
							return
							
						}
						this.students.unshift(this.newStudent)
						// 添加完成后清空输入框
						this.newStudent = {stuName:'',stuID:'',scoreOne:'',scoreTwo:'',scoreThree:''}
						
					},
					averageThree(){
						var ever_class3_sum = 0
						for(var i=0;i<this.students.length;i++){
							ever_class3_sum += parseInt(this.students[i].scoreThree)
						}
						this.averageThreeCourse = ever_class3_sum/this.students.length
					},
					averageTotal(){
						for(var i = 0;i<this.students.length;i++){
							 this.students[i].scoreAverage = (this.scoreTotal(i)/this.courseNum).toFixed(2)
						}
					},
					sortScoreThree(){
						// console.log(this.students.sort(function(a ,b){
						// 	return a.scoreThree > b.scoreThree
						// }))
						this.students.reverse(function(a,b){
							return a.scoreThree > b.scoreThree
						})
						
					},
					scoreTotal(index){
						sum =  Number(this.students[index].scoreOne) + Number(this.students[index].scoreTwo) + Number(this.students[index].scoreThree)
						return sum
					},
					deleteStudent(index){
						this.students.splice(index, 1)
					},
					// 还未做完？搜索为空回显原来数据
					filteredStudents(){
						window.localStorage.setItem
						search = this.search
						if(search.length == 0){
							console.log(12)
							this.newSearchStudent = this.students.slice()
							console.log(this.newSearchStudent)
							return "success"
						}
						app.students = this.students.filter(function(item){
							return item.stuName.match(search)
						})
						
					}
				},
		}).mount('#app')
	</script>
</html>

效果图如下：
在这里插入图片描述

css

* {
	margin: 0px;
	padding: 0px;
	font-size: 18px;
}
h3 {
	text-align: center;
	margin: 20px 0px;
	font-size: 36px;
}
.inputInfo {
	width: 800px;
	margin: 0px auto;
	margin-bottom: 18px;
}
.inputInfo input[type="text"],
.inputInfo input[type="number"]{
	width: 800px;
	height: 32px;
	border-radius: 4px;
	padding-left: 6px;
}
.inputInfo input[type="radio"]{
	margin-right: 6px;
	margin-left: 6px;
}
.inputInfo select {
	width: 100px;
	height: 32px;
	border-radius: 4px;
}
.btnStyle {
	display: block;
	padding: 6px 12px;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	color: white;
	border: 1px solid transparent;
	border-radius: 8px;
	margin: 0px auto;
	margin-bottom: 20px;
}
.createBtn {
	background-color: #d9534f;
	border-color: #d43f3a;
}
.optionBtn {
	width: 800px;
	margin: 0px auto;
}
.optionBtn>button {
	display: inline-block;
	margin-left: 10px;
}
.averageBtn,
.sortBtn{
	background-color: #E5E5E5;
	border-color: #E5E5E5;
	color: #333;
	margin: 20px auto;
}
.studentList{
	width: 1200px;
	margin: 0px auto;
	border-collapse:collapse;
}
.studentList thead tr td {
	background-color: #6495ED;
}
.studentList thead tr td>a{
	font-size: 20px;
	text-decoration: none;
	color: #333;
}
.lastTr{
	font-size: 20px;
	font-weight: bold;
}
.studentList td {
	height: 60px;
	text-align: center;
	border: 1px solid #ddd;
	font-size: 20px;
}
.deleteBtn{
	background-color: #428bca;
	border-color: #357ebd;
	margin: 0px auto;
}
.searchBtn {
	background-color: #5bc0de;
	border-color: #46b8da;
	height: 20px;
	margin: 0px 10px;
	font-size: 14px;
}
.searchInfo {
	width: 800px;
	height: 50px;
	margin: 0px auto;
	line-height: 50px;
	font-size: 20px;
}
.searchInfo>input {
	height: 28px;
	border-radius: 4px;
	padding-left: 6px;
}
.searchInfo>button {
	height: 34px;
	font-size: 20px;
	line-height: 20px;
	display: inline-block;
}