前端实现成绩管理系统
先上效果圖
簡單演示：登錄，學(xué)生信息展示，學(xué)生成績展示
介紹
最初也不想做這么多功能，從一個(gè)隨機(jī)點(diǎn)名開始，需要到學(xué)生信息，然后記錄每次點(diǎn)名后回答正確或者錯(cuò)誤分?jǐn)?shù)，后面考慮到考試成績錄入，就想到了還能生成excel文件，一步步加入各種功能，后面考慮加入echarts，把成績用圖表展示。
其實(shí)php我是不怎么會的，我更熟練使用jave的spring boot，但是服務(wù)器是阿里云的最低配置：1核1g運(yùn)行，帶不動Mysql+Apache+Spring boot，所以最終使用了更輕量級的php。
整體框架
本地環(huán)境
Angular CLI: 8.3.29 Node: 10.17.0 OS: win32 x64 Angular: 8.2.14實(shí)現(xiàn)功能
前端代碼已提交到github，需要的同學(xué)可以自取：機(jī)票→
核心功能
隨機(jī)點(diǎn)名
//提取學(xué)生姓名的數(shù)組let arr = this.filterData(choosedClass.stu,this.data.randomType)clearTimeout(this.tout)if (this.state == 0) {//如果是0即開始隨機(jī)，變?yōu)?時(shí)結(jié)束，不是0時(shí)執(zhí)行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);}}導(dǎo)出excel
主要用到了xlsx庫
import * as XLSX from 'xlsx';// 導(dǎo)出的文件名，導(dǎo)出的數(shù)據(jù)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");}頁面等待展示加載中l(wèi)oading界面
服務(wù)器的帶寬是1M的，所以實(shí)際網(wǎng)速最快只有120左右，然后angular屬于比較重的前端框架，一個(gè)必須加載的main.js文件有900k以上，所以從輸入網(wǎng)址pojun.top到顯示內(nèi)容，用戶需要面對空白界面七八秒，這是很不好的體驗(yàn)，所以就需要給界面顯示loading正在加載，緩解等待焦慮。
從上圖可以發(fā)現(xiàn)整個(gè)界面加載完一共7.87s。
通過js監(jiān)控頁面加載的狀態(tài)，從而邏輯上就能控制“l(fā)oading”界面的顯示
下面是loading.js文件
使用的時(shí)候經(jīng)量放在head標(biāo)簽內(nèi)前排一點(diǎn)，保證頁面一進(jìn)來就優(yōu)先加載這個(gè)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后，第二個(gè)網(wǎng)絡(luò)請求就是load.js這個(gè)文件實(shí)際上只有1.7kb，基本上一輸入網(wǎng)址，這個(gè)js文件就能馬上下載下來，從而展示loading正在加載的界面。
最后看看效果圖吧,是不是感覺效果還可以。
實(shí)現(xiàn)功能效果圖
成績界面 與 導(dǎo)出成績單excel表格
設(shè)置界面
登錄界面
注冊界面
學(xué)生信息管理界面
可以批量添加一個(gè)班級的數(shù)據(jù)，也是添加一個(gè)，同時(shí)管理數(shù)據(jù)的時(shí)候可以修改名字，性別，也能刪除數(shù)據(jù)。
成績管理界面
總結(jié)
php調(diào)試起來比較麻煩，建議本地安裝一個(gè)xampp，
前端不管是angular，vue，或者是react，都是js，重要的是如何運(yùn)用自己掌握的編程語言把功能（網(wǎng)頁）寫出來，后臺呢，根據(jù)自己條件選java或者php，或者python，學(xué)海無涯，共勉！
總結(jié)
以上是生活随笔為你收集整理的前端实现成绩管理系统的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据库杂谈（五）——关系数据库语言
- 下一篇： 在Ubuntu上安装RealPlayer