前端实现成绩管理系统

先上效果图

简单演示：登录，学生信息展示，学生成绩展示
请添加图片描述

介绍

最初也不想做这么多功能，从一个随机点名开始，需要到学生信息，然后记录每次点名后回答正确或者错误分数，后面考虑到考试成绩录入，就想到了还能生成excel文件，一步步加入各种功能，后面考虑加入echarts，把成绩用图表展示。

其实php我是不怎么会的，我更熟练使用jave的spring boot，但是服务器是阿里云的最低配置：1核1g运行，带不动Mysql+Apache+Spring boot，所以最终使用了更轻量级的php。

整体框架

前端：angular
后端：php
数据库：mysql
服务器：Apache2.4

本地环境

Angular CLI: 8.3.29Node: 10.17.0OS: win32 x64Angular: 8.2.14

实现功能

登录
注册
学生信息增删改查
成绩信息增查
课堂随机点名
设置中英文，修改背景主题色
设置随机点名三种随机模式
设置随机点名自动暂停的时间
成绩可以导出excel
未完待续… 持续更新
前端代码已提交到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正在加载，缓解等待焦虑。
dom加载分析
从上图可以发现整个界面加载完一共7.87s。
通过js监控页面加载的状态，从而逻辑上就能控制“loading”界面的显示
下面是loading.js文件

//获取浏览器页面可见高度和宽度var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth;//计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0, _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;//在页面未加载完毕之前显示的loading Html自定义内容var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#17B794;opacity:1;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background: #fff url(assets/pictures/loadding.gif) no-repeat scroll 5px 10px; border: 2px solid white;border-radius: 5px; color: #696969; font-family:\'Microsoft YaHei\';">页面加载中，请等待...</div></div>';//呈现loading效果document.write(_LoadingHtml);//监听加载状态改变document.onreadystatechange = completeLoading;//加载状态为complete时移除loading效果function completeLoading() {if (document.readyState == "complete") {var loadingMask = document.getElementById('loadingDiv');loadingMask.parentNode.removeChild(loadingMask);}}

使用的时候经量放在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正在加载的界面。
在这里插入图片描述
最后看看效果图吧,是不是感觉效果还可以。
请添加图片描述