前端实现成绩管理系统

先上效果图

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

介绍

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

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

整体框架

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

本地环境

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

实现功能

登录
注册
学生信息增删改查
成绩信息增查
课堂随机点名
设置中英文，修改背景主题色
设置随机点名三种随机模式
设置随机点名自动暂停的时间
成绩可以导出excel
未完待续… 持续更新
前端代码已提交到github，需要的同学可以自取：机票→

核心功能

随机点名

	//提取学生姓名的数组
	let arr = this.filterData(choosedClass.stu,this.data.randomType)
    clearTimeout(this.tout)
    if (this.state == 0) {
      //如果是0即开始随机，变为1时结束，不是0时执行else
      clearInterval(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正在加载的界面。
在这里插入图片描述
最后看看效果图吧,是不是感觉效果还可以。
请添加图片描述