学生成绩计算页面
一. 实验目的
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");
效果展示
注：“有志者，事竟成！！” 有问题欢迎讨论！😉😉😉
