前端实现成绩管理系统
先上效果圖
簡單演示：登錄，學生信息展示，學生成績展示
介紹
最初也不想做這么多功能，從一個隨機點名開始，需要到學生信息，然后記錄每次點名后回答正確或者錯誤分數，后面考慮到考試成績錄入，就想到了還能生成excel文件，一步步加入各種功能，后面考慮加入echarts，把成績用圖表展示。
其實php我是不怎么會的，我更熟練使用jave的spring boot，但是服務器是阿里云的最低配置：1核1g運行，帶不動Mysql+Apache+Spring boot，所以最終使用了更輕量級的php。
整體框架
本地環境
Angular CLI: 8.3.29 Node: 10.17.0 OS: win32 x64 Angular: 8.2.14實現功能
前端代碼已提交到github，需要的同學可以自取：機票→
核心功能
隨機點名
//提取學生姓名的數組let arr = this.filterData(choosedClass.stu,this.data.randomType)clearTimeout(this.tout)if (this.state == 0) {//如果是0即開始隨機，變為1時結束，不是0時執行elseclearInterval(this.t);this.t = setInterval( ()=>{// console.log(1);var sj = Math.round(Math.random() * (arr.length - 1));this.luckyName = arr[sj].name;this.luckyStu = arr[sj]}, 37)this.state=1;this.tout = setTimeout(() => {this.state=0;clearInterval(this.t);if(this.data.randomType === "C"){this.data.setCallRecord(this.data.getCallRecord(this.curClass)+"_"+this.luckyName,this.curClass);}}, this.data.randomTime*1000+Math.round(Math.random() * 1000));}else{this.state=0;clearInterval(this.t);// this.btnText = '開始'if(this.data.randomType === "C"){this.data.setCallRecord(this.data.getCallRecord(this.curClass)+"_"+this.luckyName,this.curClass);}}導出excel
主要用到了xlsx庫
import * as XLSX from 'xlsx';// 導出的文件名，導出的數據exportExcelFile(fileName:string,dataArray:any[]){const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(dataArray);/* generate workbook and add the worksheet */const wb: XLSX.WorkBook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');/* save to file */XLSX.writeFile(wb, fileName+".xlsx");}頁面等待展示加載中loading界面
服務器的帶寬是1M的，所以實際網速最快只有120左右，然后angular屬于比較重的前端框架，一個必須加載的main.js文件有900k以上，所以從輸入網址pojun.top到顯示內容，用戶需要面對空白界面七八秒，這是很不好的體驗，所以就需要給界面顯示loading正在加載，緩解等待焦慮。
從上圖可以發現整個界面加載完一共7.87s。
通過js監控頁面加載的狀態，從而邏輯上就能控制“loading”界面的顯示
下面是loading.js文件
使用的時候經量放在head標簽內前排一點，保證頁面一進來就優先加載這個load.js文件
<!doctype html> <html lang="en"> <head><meta charset="utf-8"><title>破軍突破</title><base href="./"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="./assets/js/load.js"></script><link rel="icon" type="image/x-icon" href="favicon.ico"> </head>從下圖的箭頭方向能輕易看出，瀏覽器解析域名pojun.top后，第二個網絡請求就是load.js這個文件實際上只有1.7kb，基本上一輸入網址，這個js文件就能馬上下載下來，從而展示loading正在加載的界面。
最后看看效果圖吧,是不是感覺效果還可以。
實現功能效果圖
成績界面 與 導出成績單excel表格
設置界面
登錄界面
注冊界面
學生信息管理界面
可以批量添加一個班級的數據，也是添加一個，同時管理數據的時候可以修改名字，性別，也能刪除數據。
成績管理界面
總結
php調試起來比較麻煩，建議本地安裝一個xampp，
前端不管是angular，vue，或者是react，都是js，重要的是如何運用自己掌握的編程語言把功能（網頁）寫出來，后臺呢，根據自己條件選java或者php，或者python，學海無涯，共勉！
總結
以上是生活随笔為你收集整理的前端实现成绩管理系统的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据库杂谈（五）——关系数据库语言
- 下一篇： 在Ubuntu上安装RealPlayer