ExperimentTwo

学生成绩计算页面

一. 实验目的

1.掌握HTML基础知识的应用；

2.掌握Vue基本架构的应用；

3.掌握函数方法的定义及使用；

4.掌握methods方法的使用；

5.掌握computed计算属性的使用；

6.实现一个学生成绩计算页面。

二. 实验步骤（及实验数据）

1. css 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
* {
	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;
}

2. HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ExperimentTwo</title>
		<link rel="stylesheet" href="css/ExperimentTwo.css">
	</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" :key="index">
						<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>
<!--		<script src="./js/v3.2.8/vue.global.prod.js"></script>		-->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.prod.js"></script>
<!--		测试版			-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!--		JS部分			-->
		<script src="./js/ExperimentTwo.js"></script>
	</body>
</html>

3. JS部分（VUE3.0）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
 var app=Vue.createApp({
    data(){
        return{
            isAverageThree:false,
            isScoreAverage:false,
            averageThreeCourse:0,
            infoScoreTotal:0,
            students:[{
                stuName:"张三",
                stuID:22303,
                scoreOne:61,
                scoreTwo:66,
                scoreThree:79,
                scoreTotal:0,
                scoreAverage:0
            },
                {
                    stuName:"李四",
                    stuID:22304,
                    scoreOne:86,
                    scoreTwo:77,
                    scoreThree:99,
                    scoreTotal:0,
                    scoreAverage:0
                },
                {
                    stuName:"王五",
                    stuID:22305,
                    scoreOne:92,
                    scoreTwo:99,
                    scoreThree:89,
                    scoreTotal:0,
                    scoreAverage:0
                }
            ],
            newStudent:{
                stuName:"",
                stuID:0,
                scoreOne:0,
                scoreTwo:0,
                scoreThree:0,
            }
        }
    },
     // 计算属性
    computed:{
        // 计算课程三的平均分
        meAverageThreeCourse(){
            let total=0;
            for(let i=0;i<this.students.length;i++){
                total+=this.students[i].scoreThree;
            }
            return total/this.students.length;
        },
    },
     // 监听器
    methods:{
        // 添加学生信息
        createNewStudent(){
            // 判断输入信息是否有误
            if (this.newStudent.stuName === ''){
                alert("学生姓名不能为空！");
                return;
                // ==用于判断两个值是否相等 ！==用于判断两个值是否不相等
            }else if (this.newStudent.stuID === '' || this.newStudent.stuID == 0){
                alert("学生学号格式不正确！");
                return;
            }else if(this.newStudent.scoreOne<0 || this.newStudent.scoreOne>100){
                alert("课程一（HTML5应用开发）成绩输入有误,成绩区间[0-100]！");
                return;
            }else if(this.newStudent.scoreTwo<0 || this.newStudent.scoreTwo>100){
                alert("课程二（JavaScript程序设计）成绩输入有误,成绩区间[0-100]！");
                return;
            }else if(this.newStudent.scoreThree<0 || this.newStudent.scoreThree>100){
                alert("课程三（前端框架（Vue.js）应用开发）成绩输入有误,成绩区间[0-100]！");
                return;
            } else {
                // 如果无误添加学生信息
                this.students.push(this.newStudent);
                this.newStudent={
                    stuName:'',
                    stuID:0,
                    scoreOne:0,
                    scoreTwo:0,
                    scoreThree:0,
                }
            }
        },
        // 删除学生信息
        deleteStudent(index){
            this.students.splice(index,1);
        },
        // 课程三成绩排序 从高到低
        sortScoreThree(){
            this.students.sort(function (a,b) {
                return b.scoreThree-a.scoreThree;
            })
        },
        // 点击事件显示或隐藏课程三成绩
        averageThree() {
            this.isAverageThree = !this.isAverageThree;
            if (this.isAverageThree) {
                this.averageThreeCourse = this.meAverageThreeCourse;
            }else {
                this.averageThreeCourse = 0;
            }
        },
        // 点击事件像是或隐藏学生个人课程平均分 不保留小数
        averageTotal() {
            this.isScoreAverage = !this.isScoreAverage;
            if (this.isScoreAverage) {
                for(let i=0;i<this.students.length;i++){
                    this.students[i].scoreAverage=(this.students[i].scoreOne+this.students[i].scoreTwo+this.students[i].scoreThree)/3;
                    // .toFixed(0) 保留小数点后0位 不保留小数 保留整数
                    this.students[i].scoreAverage=this.students[i].scoreAverage.toFixed(0);
                }
            }else {
                for(let i=0;i<this.students.length;i++){
                    this.students[i].scoreAverage=0;
                }
            }
        },
        // 通过索引计算学生个人课程总分
        scoreTotal(index){
            return this.students[index].scoreOne+this.students[index].scoreTwo+this.students[index].scoreThree;
        },
        // 搜索学生信息 通过在输入框输入学生姓名搜索学生信息并显示
        filteredStudents() {
            // 判断是否输入了学生姓名
            if (this.search === '') {
                alert('请输入学生姓名！');
                return;
            } else {
                // 遍历students数组，查找是否有符合条件的学生
                for (let i = 0; i < this.students.length; i++) {
                    // 如果有符合条件的学生，则将符合条件的学生信息存储到一个新数组中
                    if (this.students[i].stuName === this.search) {
                        // 将符合条件的学生信息存储到一个新数组中
                        let stuSearch = [];
                        stuSearch.push(this.students[i]);
                        // 将符合条件的学生信息替换students数组
                        this.students = stuSearch;
                        return;
                    }
                }
                // 如果遍历完students数组后，没有符合条件的学生，则提示没有该学生
                alert('没有该学生！');
            }
        }
    },
}).mount("#app");

注：“有志者，事竟成！！” 有问题欢迎讨论！😉😉😉