前端实现成绩管理系统

先上效果图

简单演示：登录，学生信息展示，学生成绩展示

介绍

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

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

整体框架

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

本地环境

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

实现功能

1. 登录
2. 注册
3. 学生信息增删改查
4. 成绩信息增查
5. 课堂随机点名
6. 设置中英文，修改背景主题色
7. 设置随机点名三种随机模式
8. 设置随机点名自动暂停的时间
9. 成绩可以导出excel
10. 未完待续… 持续更新
    前端代码已提交到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");
  }

实现功能效果图

成绩界面 与 导出成绩单excel表格

设置界面

登录界面

注册界面

学生信息管理界面

可以批量添加一个班级的数据，也是添加一个，同时管理数据的时候可以修改名字，性别，也能删除数据。

成绩管理界面

总结

php调试起来比较麻烦，建议本地安装一个xampp，
前端不管是angular，vue，或者是react，都是js，重要的是如何运用自己掌握的编程语言把功能（网页）写出来，后台呢，根据自己条件选java或者php，或者python，学海无涯，共勉！