【软件工程】详细设计（二）

这里是详细设计文档的第二部分。前一部分点这里

4. 学生端模块详细设计

学生端模块主要由几个组件构成：学生登录界面，成绩查询界面等界面。因为学生端的功能相对来说比较单一，因此这里只给出两个最重要的功能。

图4.1 学生端模块流程图

4.1 学生登录界面模块

4.1.1类描述

定义了对学生的登录操作功能结构。

4.1.2功能

给定账号和密码，实现登录功能。每次登录时都需要验证账号与密码是否正确（通过查询数据库与正则表达式验证），学生比较特殊，他们的学号就是他们的账号。

4.1.3代码实现

JavaScript代码(通过正则表达式实现密码验证)：

else {
   
  debugger;
  var userName = param.userName;
  var reg = /^[\d]{6,10}$/;
  if (userName.length > 10) {
   
    layer.msg('学号长度不能大于10位', {
   
      icon: 5
    });
  }
  if (reg.test(userName)) {
   
    $.ajax({
   
      //几个参数需要注意一下
      type: "POST",//方法类型
      dataType: "json",//预期服务器返回的数据类型
      url: "/user/studentLogin",//url
      data: param,
      success: function (result) {
   
        if (result.code == "0") {
   
          location.href = "/student-index.html";
        } else {
   
          layer.msg('用户名密码错误', {
   
            icon: 5
          });
        }
      },
      error: function () {
   
        layer.msg('服务器错误', {
   
          icon: 5
        });
      }
    });
  } else {
   
    layer.msg('学生角色登录请使用学号', {
   
      icon: 5
    });
  }
}

4.1.4性能

在执行相关操作时，均可以正常实现学生登录功能。

4.2成绩查询界面

4.2.1类描述

定义了对学生的成绩查询操作功能结构。

4.2.2功能

学生查询自己的相关信息与所有的成绩信息。

4.2.3代码实现

HTML代码：

<table class="layui-table"   lay-data="{ url:'/score/getMyScore', page:true, id:'scoreSum'}"   lay-filter="demo">   <thead>      <tr>         <th lay-data="{type:'checkbox', }"></th>         <th lay-data="{field:'studentNo',sort: true}">学号</th>         <th lay-data="{field:'studentName'}">姓名</th>         <th lay-data="{field:'score1'}">习题成绩</th>         <th lay-data="{field:'score2'}">测验成绩</th