学生成绩计算页面
一. 实验目的
1.掌握HTML基础知识的应用；
2.掌握Vue基本架构的应用；
3.掌握函数方法的定义及使用；
4.掌握methods方法的使用；
5.掌握computed计算属性的使用；
6.实现一个学生成绩计算页面。
二. 实验步骤（及实验数据）
1. 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;
}
2. HTML部分
<!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）
var app=Vue.createApp({
data(){
return{
isAverageThree:false,
isScoreAverage:false,
averageThreeCourse:0,
infoScoreTotal:0,
students:[{
stuName:"张三",
stuID:001,
scoreOne:61,
scoreTwo:66,
scoreThree:79,
scoreTotal:0,
scoreAverage:0
},
{
stuName:"李四",
stuID:002,
scoreOne:86,
scoreTwo:77,
scoreThree:99,
scoreTotal:0,
scoreAverage:0
},
{
stuName:"王五",
stuID:003,
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");
效果展示
注：“有志者，事竟成！！” 有问题欢迎讨论！😉😉😉
