基web学生成绩理系统设计
实现
基web学生成绩理系统设计实现
摘
着计算机技术行业广泛应计算机技术应学校中提高学校理效率学生成绩理系统提高学校理效率中发挥重作
系统基web学生成绩理系统采前分离开发模式基前端语言HTML+CSS实现页面制作JS+AJAX实现页面数交互MySQL 创建理数库SSM框架作端开发网络框架IntelliJ IDEA作台开发工具良支持数库应HBuilder作前端开发工具具边改边模式提高编写网页代码效率文介绍实现系统开发工具技术系统进行行性分析需求分析系统设计系统实现等
关键词：成绩理web数库SSM
The design and implementation of the Student Score Management System based on Web
Abstract
With the wide application of computer technology in all walks of life the application of computer technology to schools will greatly improve the efficiency of school management Student achievement management system will play an important role in improving the efficiency of school management
This system is a webbased student achievement management system which adopts a separate development mode With the basic frontend language HTML + CSS to achieve page production JS + Ajax to achieve page data interaction using MySQL to create and manage the database the SSM framework as a backend development of the network framework Intellij IDEA is used as a backend development tool because it can support database application and HBuilder is used as a frontend development tool to improve the efficiency of writing web page code This paper mainly introduces the development tools and technology of the system and the system feasibility analysis demand analysis system design and system implementation
Keywords Performance Management web database SSM
目 录
1 引言 1
11 次设计目意义 1
12 次设计研究容 1
2 系统开发工具技术 1
21 开发工具 2
211 IntelliJ IDEA 2
212 Mysql Server 80 + SQLyog 2
213 HBuilder 2
22 开发技术 3
221系统开发模式 3
222 SSM框架 3
223 前端开发语言 4
3 系统分析 4
31行性分析 4
311 济行性 4
312 技术行性 4
313运行操作行性 5
32 系统需求分析 5
4 系统设计 6
41 系统总设计 6
42 数库设计 8
5 系统实现 9
51 登录模块 9
511 登录页面 9
512系统首页 10
52成绩理模块 11
521成绩录入 11
522编辑学生成绩 12
523成绩查询 13
53户理模块 14
531添加户 14
532查询编辑户 15
54户信息模块 16
541查询户信息 16
542添加户信息 18
543编辑户信息 19
6 系统测试 19
61 系统功测试 19
62系统测试例 20
63系统测试结果 27
参考文献 29
谢 辞 30
附 录 31
1 引言
11 次设计目意义
着媒体教学推广什类型学校学生成绩理直学校重工作容着学校办学规模扩招生数增加学生成绩理成项非常繁琐工作学生成绩学校许工作重支撑学校奖学金评定教师根学生成绩解学生学情况学生档案建设学校等级评等等见学生成绩理系统学校日常工作中发挥着越越明显作特点节省力资源方便减少纸张消耗极提高工作效率
现阶段学初中高中获取成绩方式老师书面通知学生果已弄见成绩单想解考试成绩次需咨询老师某种程度会影响老师工作开发套学生成绩理系统势趋样方便学生快速获取成绩学生根学成绩定制合适学方案家长通该成绩系统解孩子学成绩进孩子学提出指导意见基理该学生成绩系统高校学生作象进行设计开发
12 次设计研究容
着计算机技术行业广泛应学生成绩理系统学校常规教务理工作中发挥着越越明显作进步提高学校办公效率必现代计算机技术传统学生成绩理相结合设计实现基web学生成绩理系统
系统设计研究容示：
Ø 系统功需求分析：分析该学生成绩系统需实现什样容
Ø 系统设计：界面设计数库设计系统功设计
Ø 系统开发技术工具选取：基功需求分析选取合适开发该系统开发技术工具
Ø 学生成绩理系统实现：充分利选择开发技术开发工具系统功进行实现
2 系统开发工具技术
果想成功开发系统作开发者需考虑东西开发系统涉东西太首先开发中必少层面开发技术选择编程语言框架技术选择选择合适开发技术会开发种事半功倍效果确定技术选择应技术支持开发台开发工具运行环境容会次系统开发开发工具开发技术进行介绍
21 开发工具
211 IntelliJ IDEA
IntelliJ IDEA开发java语言集成环境业界认佳开发工具许公司该工具进行台开发该工具着许强功
IntelliJ IDEA优点：高度智安装智代码补全框架针性辅助促进生产力
212 Mysql Server 80 + SQLyog
MySQL关系数库理系统中关系数库创建表存储数提高操作速度灵活性MySQL开源支持型数库标准 SQL 数语言形式
Mysql Server 80成功安装命令窗口命令窗口命令语句进行操作命令语句语法格式非常严格输错字符行窗口操作数库非常麻烦SQLyog连接MYSQL数库视化界面工具SQLyog工具中成功连接数库SQL语句直接里面创建数库建立数表修改数表中数类型直接查表中数简单便利
213 HBuilder
HBuilder快web编码工具量快捷键开发者需鼠标完成工作需逐逐敲写代码HBuilder完整代码语法提示功根代码容进行智提示量代码块供开发者快速生成段代码提高开发者编写HTMLCSSJS代码效率HBuilder框架语法提示功muijQueryreact等框架语法验证功输入代码误会立报错未解决继续编写代码会没智提示提醒开发者代码误方法外HBuilder开发者欲罢功边编写代码边实时查实际效果需开发者开浏览器进行查实现效果节约时间开发效率提高
22 开发技术
221系统开发模式
系统采前端分离开发模式系统基web学生成绩理系统首先理解什基web通俗语言说属BS结构浏览器服务器模式webHTTP协议通信基础利浏览器进行访问网站传t统开发模式里采前端分离模式数服务端渲染前端服务端渲染方式指服务器端网页直接生成传递浏览器程许重复代码定程度增加服务器工作压力外前端代码端代码放起会产生代码混乱果程度增加项目续维护难度前端分离意味着开发者需边开发台边开发前端前端兼顾开发效率低开发周延长解决问题出现种新开发模式前端分离模式前端分离指前端员端员商量需数交互接口起进行开发前端员需负责相关页面制作样式调试动态数渲染端专心实现具体业务需求提供前端需接口样模式端返回前端数页面前端通Ajax技术调端接口获取需数负责数渲染HTML页面中端需考虑前端实现效果户页面样式均前端决定句话概括台需负责提供前端开发员需数前端负责端员传数进行显示职责分工非常明确采前端分离模式提高开发效率开发变更加灵活时降低服务器负载系统性提升增强代码维护性
222 SSM框架
SSM框架SpringMVCSpringMybatis整合成整系统划分视图层控制层业务层DAO层
业务层（Spring）指service层负责设计实现特定业务模块逻辑应该层业务实现需调已定义DAO层接口
持久层（Mybatis）指DAO层该层负责数持久层工作开发员层设计接口配置类数库进行sql语句映射结构变非常清晰
控制层（springMVC）指controller层该层负责控制具体业务模块流程层开发员需调service层接口控制业务流程
视图层指view层层负责前端页面展示设计系统开发模式前端分离模式没view层做阐述
223 前端开发语言
HTML指描述页面超文标记语言提供关web页面信息web页面特定容
CSS指层叠样式表设计web页面种样式允许样式信息web页面容分离
JavaScriptInternet流行脚语言广泛HTMLWeb应程序开发作种动态编程语言处理页面数交互种浏览器中运行解释式编程语言
jQuery轻量级少写做js库包含许功提供量供开发员插件设计ajax功
设计中HTML+CSS语言实现页面jQueryajax请求功请求台数JS实现数交互
3 系统分析
设计系统前需系统进行分析利加快理解系统部明确系统开发方利开发进度推进
31行性分析
311 济行性
分析系统济行性估算开发系统期维护费外分析学校济状况投资力否力支付系统开发费否提供系统运行环境般情况说该系统运行台电脑浏览器中开目前电脑市场计算机价格十分低廉性差学校济力系统开发济行
312 技术行性
相技术方面言系统HTML+CSS实现前端静态页面HTML+CSS种易学易标记语言简单手JavaScriptjQuery技术动态获取台数进行数交互jQuery封装Ajax请求请求服务器数功需引入JS文件需安装插件操作方便利适中规模数量需求MySQL设计系统数库满足学生成绩理系统数库理需求IntelliJ IDEA作系统台开发工具目前数公司选择开发台首选工具支持代码编写配置测试出错程度提高开发效率
综述开发工具开发技术均满足实现系统开发条件系统技术行
313运行操作行性
运行操作行性指否提供运行环境系统操作难易程度般情况该系统台连接网络普通电脑运行操作现学校工作电脑电脑网络满足运行该系统条件
系统页面简洁直观易懂操作简单会电脑学生教师均直接手操作理员权限根页面文字提示进行操作会电脑户通简单说明操作系统会存太问题
综系统运行操作行
32 系统需求分析
系统进行设计前开发员首先必须解确定户需求什满足户需求系统没意义开发者应该户需求进行全面客观分析基结果进行应功设计
系统户类型学生教师理员户类型功系统中理员拥功权限次教师学生功基础
会根户类型（理员教师学生）阐述系统中操作具体功
登录功存系统户功
学生系统中两功查成绩查信息
教师系统中学生成绩进行录入查修改删操作查教师信息查学生信息
理员成绩理模块功权限教师相理员拥户信息模块功权限查包括户信息添加修改删户信息两功模块理员功权限户理理员查已存户查登录账号姓名密码户类型添加存户修改已存户姓名密码删已存户
户功显示图31示：
图31户功显示图
4 系统设计
41 系统总设计
系统设计四模块
1登录模块：
理员教师学校分配工号密码登录系统
学生学校分配学号密码登录系统
2户理模块：
理员该功模块权限理员已存户进行编辑查户修改户信息删已存户等系统添加新户
3户信息理模块：
学生查信息教师查信息学生信息理员查包括户信息添加修改删户信息
4学生成绩理模块：
理员教师均查学生成绩录入学生成绩学生成绩进行编辑编辑功包括修改删学生成绩学生种权限查询成绩查询学成绩
系统功模块设计图示：
图41系统功模块设计图
42 数库设计
数库设计需求分析结果某数库理系统MySQL创建数库创建数表程中需数库中数表进行关联样系统效访问数表创建需满足户需求更处理需求设计开发数库系统时候应该考虑方面尤考虑户种需求时候应该更加仔细详细量避免必力物力
设计数库理系统建立4张数表
学生信息表studentInfo存放学生详细信息表41 ：
表41 学生信息表
列名
列标识
数类型
长度
空值
键
学号
stu_No
varchar
20
No
yes
姓名
stu_Name
varchar
50
No
No
性
stu_Sex
varchar
10
Yes
No
出生年月日
stu_Birth
date
Yes
No
身份证号码
stu_identity_num
varchar
50
No
No
电话号码
stu_tel_phone
varchar
50
Yes
No
籍贯
stu_native_place
varchar
50
Yes
No
政治面貌
stu_politics_status
varchar
10
Yes
No
现居住址
stu_address
varchar
50
Yes
No
教师信息表teacherInfo存放教师详细信息中包括理员详细信息表42示：
表42教师信息表
列名
列标识
数类型
长度
空值
键
工号
teacher_No
varchar
20
No
yes
姓名
teacher_Name
varchar
50
No
No
性
teacher_Sex
varchar
10
Yes
No
出生年月日
teacher_Birth
date
Yes
No
身份证号码
teacher_identity_no
varchar
50
No
No
电话号码
teacher_tel_phone
varchar
50
Yes
No
籍贯
teacher_native_place
varchar
50
Yes
No
政治面貌
teacher_politics_status
varchar
10
Yes
No
教书科目
teaching_subject
varchar
10
Yes
No
婚否
is_marry
int
11
Yes
No
现居住址
teacher_address
varchar
50
Yes
No
毕业学校
graduation_school
varchar
50
Yes
No
学历
education_background
varchar
10
Yes
No
户理表userInfo存放该系统户登录账号密码姓名权限信息表43 ：
表43 户理表
列名
列标识
数类型
长度
空值
键
帐号
user_no
varchar
20
No
yes
姓名
user_name
varchar
50
No
No
密码
user_password
varchar
50
No
No
户类型
user_type
varchar
50
No
No
成绩表scoretable存放学生相关成绩表44：
表44 学生成绩表
列名
列标识
数类型
长度
空值
键
学号
stu_no
varchar
20
No
yes
姓名
stu_name
varchar
20
No
No
课程号
course_no
varchar
20
No
yes
课程名
course_name
varchar
50
No
No
课程成绩
course_score
float
No
No
传时间
upload_time
date
No
No
学期
school_term
varchar
20
No
No
5 系统实现
51 登录模块
511 登录页面
户需登录页面通输入户账号密码登录系统果该户账号存数库中户表userInfo中存该户账号法成功登录该系统登录页面图51示：
图51登录页面
512系统首页
果登录成功进入该系统户会进入界面理员成功登录进入操作页面图52示：
图52 理员操作页面
教师成功登录进入页面图53示：
图53 教师操作界面
学生成功登录进入操作页面图54示：
图54 学生操作界面
52成绩理模块
该模块作整系统核心理员教师均拥该模块功权限学校中理学生成绩课老师意味着模块率高应该教师该模块教师进行阐述
521成绩录入
理员教师拥该功权限学生该权限
图55教师录入成绩页面
图55 成绩录入界面
图示教师录入成绩时需输入课程号课程名学期录入时间学生学号学生名字学生成绩等字段缺
522编辑学生成绩
教师该界面需输入学生学号需查询成绩课程名称获取学生某科目成绩点击表格中编辑框方钮学生成绩进行修改删操作
图56 教师编辑学生成绩界面
编辑学生页面：
点击重置钮会已修改信息变回原信息前提没点确定钮点击确定钮编辑学生成绩进行修改界面图示：
图57 修改学生成绩界面
删学生成绩前页面进行删跳转页面删成功会弹框显示删成功页面：
图58 删学生成绩成功界面
523成绩查询
该功模块理员教师学生均查询成绩理员查询学生成绩者查询单学生成绩教师次查询查询某学生成绩次性查询学生成绩学生查询成绩查学成绩
理员查询成绩界面：
图59 理员查询学生成绩界面
教师法次性查询学成绩次查询查询学生成绩查询程中必须输入学生学号否提示学生学号空查询界面：
图510 教师查询学生成绩学号空界面
学生查询成绩法查询学成绩：
图中学生学号前该系统学生学号系统动显示学生法编辑
图511 学生查询成绩界面
53户理模块
该户理功模块权限理员专属该功模块会非理员操作页面出现
531添加户
添加户界面四输入框分户账号户姓名户密码户类型理员添加户时四字段缺空否法成功添加户添加户界面：
图512 添加户界面
532查询编辑户
理员点击获取户钮查询该系统户点击表格中修改’钮前行户姓名密码进行修改点击删’钮删前行户
图513 理员获取户信息界面
图514 查询特定户界面
果想查询某户图513示界面中input框中输入需查询户账号（工号学号）成功会方表格中显示图514示时表格中点击钮修改’删’该户进行编辑
编辑户修改户删户
修改户修改户姓名户密码法修改户账号户类型修改户界面中户账号户类型法进行编辑
图 515 修改户界面
删户时查询页面查询获取户信息点击目标删户表格中应行中删钮进行删
图516 删户成功界面
54户信息模块
该功模块频率高户理员文模块理员进行阐述
541查询户信息
模块中户查询功学生查信息教师查信息学生信息权查理员信息理员查询户信息
查户信息界面：
图517查询理员教师信息界面
图518查询学生信息界面
图519理员查信息界面
542添加户信息
理员功权限添加页面两钮选择添加户类型户信息学生教师点击钮会出现表格表格直接添加信息
界面：
图520 选择添加户信息界面
图521 添加学生信息界面
图522 添加教师信息界面
543编辑户信息
理员操作该功模块权限户功操作权限编辑户信息指修改删户信息
图523 查询户信息成功页面
图524 编辑户信息页面
编辑户信息：通查询界面输入该户工号者学号获取户信息查询成功户界面图523点击红色框中编辑户钮’直接表格中进行修改户信息修改完信息点击图524中确定修改’钮成功修改点击图523中删户信息钮进行删图524中点击删户信息钮进行删
6 系统测试
61 系统功测试
系统功测试指需求分析阶段提出全部功进行验证检查系统否实现户求功针系统测试方法：
1 页面跳转检查：检查页面间跳转否正确
2 钮功检查：检查页面中钮功否设想中该钮实现功致否钮绑定功事件
3 户登录检查：登录页面输入登录账号密码时检查户输入信息否空否填写正确正确否会页面出现提示登录成功检查数库中否存该户核否跳转正确户操作页面
4 户信息验证：检查户身份证号码电话号码否输入正确格式
5 查询功验证：查询程中检查查询结果否预期结果匹配否会存信息混乱查询成绩时应返回学生成绩结果返回户信息等
6 删功验证：删程中吧检查需删数否成功删成功删指页面删时数库删条数具体删规删功准
7 添加功验证：添加程中检查成功添加数中否查询添加数查否数添加正确数表中
8 修改功验证：编辑信息学生成绩时页面提示编辑成功确认否真修改成功需数库中查应表中数够修改
9 接口测试：成功调接口时检查端返回数预期值致查询某学生成绩时端返回数否该学生成绩
10 浏览器测试：系统放置浏览器进行测试测试兼容性查浏览器页面样式否致功否致
62系统测试例
系统针功模块重功撰写测试例进行测试
(1) 登录系统测试例
表61登录测试例
序号
测试步骤
预期结果
实际结果
01
1输入正确户账号密码
2点击登录’钮
登录成功
登录成功
02
1 输入存户账号
2点击登录’钮
登录失败
登录失败
03
1 输入存户账号错误密码2点击登录’钮
登录失败
登录失败
04
1 输入户账号空密码空
2 点击登录’钮
登录失败
登录失败
05
1 输入户账号空户密码空
2 点击登录’钮
登录失败
登录失败
(2) 成绩理模块测试例
表62 查询成绩测试例
序号
测试步骤
预期结果
实际结果
01
1 学期学生学号课程名均空（数库空）
2 点击查询’钮
页面显示学生成绩
页面显示学生成绩
02
1学期学生学号课程名均空（数库空）
2点击查询’钮
页面显示暂相关成绩疑问请咨询老师’
页面显示暂相关成绩疑问请咨询老师’
03
1 学期空学生学号空该学生成绩数库中存课程名空
2 点击查询’钮
页面显示该学生成绩显示学生学号查询学号致
页面显示该学生成绩显示学生学号查询学号致
04
1学期空学生学号空该学生成绩数库中存课程名空
2点击查询’钮
页面显示暂相关成绩疑问请咨询老师’
页面显示暂相关成绩疑问请咨询老师’
05
1 选择学期学生学号空课程名空
2 点击查询’钮
页面显示数库中应学期学生成绩显示学期查询学期致
页面显示数库中应学期学生成绩显示学期查询学期致
06
1 选择学期学生学号空课程名空（数库存）
2 点击查询钮’
页面显示该学生应学期成绩学号学期查询学期学号致
页面显示该学生应学期成绩学号学期查询学期学号致
07
1选择学期学生学号空课程名空（数库存）
2点击查询钮
页面显示暂相关成绩疑问请咨询老师’
页面显示暂相关成绩疑问请咨询老师’
08
1 选择学期学号空课程名空（数库中存）
2 点击查询’钮
页面显示该学生应学期应课程成绩学期学号课程名查询信息致
页面显示该学生应学期应课程成绩学期学号课程名查询信息致
09
1选择学期学号空课程名空（数库中存）
2点击查询’钮
页面显示暂相关成绩疑问请咨询老师’
页面显示暂相关成绩疑问请咨询老师’
表63 录入成绩测试例
序号
测试步骤
预期结果
实际结果
01
1 输入课程号课程名录入时间选择学期学生学号学生姓名学生成绩
2 点击录入’钮
数库成功插入该学生成绩页面提示录入成功需查请点击查询成绩’
数库成功插入该学生成绩页面提示录入成功需查请点击查询成绩’
02
1输入课程号课程名录入时间学期学生学号学生姓名学生成绩均空
2点击录入’钮
前页面提示数验证失败：1 课程名空2 课程号空3 学生名空’
前页面提示数验证失败：1 课程名空2 课程号空3 学生名空’
图64修改学生成绩测试例
序号
测试步骤
预期结果
实际结果
01
1 点击菜单列表中编辑学生成绩’选项
2 输入学生学号查询课程名（数库存）
3 点击查询’钮
4 点击表格方修改’钮
5 修改跳转页面中学生课程成绩信息
6 点击确定’钮
页面中表格显示查询该学生某课程成绩信息显示学生学号课程名查询学号课程名致修改页面修改学生成绩信息点击确定’钮页面显示已成功修改’提示
页面中表格显示查询该学生某课程成绩信息显示学生学号课程名查询学号课程名致修改页面修改学生成绩信息点击确定’钮页面显示已成功修改’提示
02
1点击菜单列表中编辑学生成绩’选项
2输入学生学号查询课程名（数库存该学生课程成绩信息）
3点击查询’钮
页面弹框提示该学生该成绩记录’
页面弹框提示该学生该成绩记录’
03
1 点击菜单列表中编辑学生成绩’选项
2 输入存学生学号输入课程名
3 点击查询’钮
页面弹框提示该学生该成绩记录’
页面弹框提示该学生该成绩记录’
04
1 点击菜单列表中编辑学生成绩’选项
2 输入学生账号空课程名空
3 点击查询’钮
页面弹框提示学生学号课程名均空’
页面弹框提示学生学号课程名均空’
05
1点击菜单列表中编辑学生成绩’选项
2输入学生账号空课程名空
3点击查询’钮
页面弹框提示学生学号课程名均空’
页面弹框提示学生学号课程名均空’
06
1点击菜单列表中编辑学生成绩’选项
2输入学生账号空课程名空
3点击查询’钮
页面弹框提示学生学号课程名均空’
页面弹框提示学生学号课程名均空’
(3) 户理模块测试例
表65添加户测试例
序号
测试步骤
预期结果
实际结果
01
1 输入户账号户名户密码选择户类型
2 点击添加’钮
数库成功添加该户页面弹框提示成功添加户’
数库成功添加该户页面弹框提示成功添加户’
02
1 输入户姓名户密码户类型户账号空
2 点击添加’钮
数库添加户失败页面弹框提示户账号空’
数库添加户失败页面弹框提示户账号空’
03
1输入户账号户密码户类型户姓名空
2点击添加’钮
数库添加户失败页面弹框提示户名空’
数库添加户失败页面弹框提示户名空’
04
1输入户账号户姓名户类型户密码空
2点击添加’钮
数库添加户失败页面弹框提示户密码空’
数库添加户失败页面弹框提示户密码空’
05
1输入户账号户名户密码选择户类型均空
2点击添加’钮
数库添加户失败页面弹框提示户账号空户名空户密码空’
数库添加户失败页面弹框提示户账号空户名空户密码空’
表66 查询户测试例
序号
测试步骤
预期结果
实际结果
01
1 点击左边菜单编辑户’选项
2 点击右边查询页面中获取户’钮
前页面右侧方表格显示系统户
页面右侧方表格显示系统户
02
1 点击左边菜单编辑户’选项
2 右边查询页面输入户账号（数库存）
3 点击查询户’钮
前页面右侧表格方显示查询户查询户账号显示户账号致
前页面右侧表格方显示查询户查询户账号显示户账号致
03
1 点击左边菜单编辑户’选项
2 右边查询页面输入户账号（数库存）
3 点击查询户’钮
页面提示该户存’
页面提示该户存’
04
1点击左边菜单编辑户’选项
2右边查询页面输入户账号空
3点击查询户’钮
页面提示户账号空’
页面提示户账号空’
表67修改户测试例
序号
测试步骤
预期结果
实际结果
01
1 修改户姓名
2 点击确定修改’钮
数库中户名修改户名致户账号致
页面弹框显示成功修改’
数库中户名修改户名致户账号致页面弹框显示成功修改’
02
1 修改户密码
2 点击确定修改’钮
页面弹框显示成功修改’数库中户密码成功修改户账号致原密码登录系统登录失败新密码成功登录系统
页面弹框显示成功修改’数库中户密码成功修改户账号致原密码登录系统登录失败新密码成功登录系统
03
修改户账号户类型
页面中法编辑户账号户类型输入框
页面中法编辑户账号户类型输入框
04
1 更改信息
2 点击确定修改’钮
页面出现红字提示前信息没进行改动请改动确定修改’
页面出现红字提示前信息没进行改动请改动确定修改’
(4) 户信息模块测试例
表68 添加户信息测试例
序号
测试步骤
预期结果
实际结果
01
1点击添加学生信息’钮
页面出现应学生信息表格
页面出现应学生信息表格
02
1点击添加教师信息’钮
页面出现应教师信息表格
页面出现应教师信息表格
03
1 点击添加学生信息’钮
2 表格中添加信息学号姓名身份证号手机号空（数库存该户信息）
3 点击添加’钮
数库中studentInfo表成功添加该户信息查询页面查询该户信息
数库中studentInfo表成功添加该户信息查询页面查询该户信息
04
1点击添加学生信息’钮
2表格中添加信息学号姓名身份证号手机号空（数库已存该户信息）
3点击添加’钮
页面提示该学生学号已存’
页面提示该学生学号已存’
05
1点击添加教师信息’钮
2表格中添加信息学号姓名身份证号手机号空（数库存该户信息）
3点击添加’钮
数库中teacherInfo表成功添加该户信息查询页面查询该户信息
数库中teacherInfo表成功添加该户信息查询页面查询该户信息
06
1点击添加教师信息’钮
2表格中添加信息学号姓名身份证号手机号空（数库存该户信息）
3点击添加’钮
页面提示该教师工号已存’
页面提示该教师工号已存’
07
输信息直接点击添加’钮
页面提示数验证失败：1 学号空2 身份证号码格式误3 电话号码格式误4 出生年月日格式误5 姓名空6 身份证号码空’
页面提示数验证失败：1 学号空2 身份证号码格式误3 电话号码格式误4 出生年月日格式误5 姓名空6 身份证号码空’
表69 查询户信息
序号
测试步骤
预期结果
实际结果
01
1 点击菜单列表中查信息’选项
页面中显示该系统前户信息
页面中显示该系统前户信息
02
1 点击菜单列表中查学生信息’选项
2 查询界面输入查询学生学号
3 点击确定’钮
跳转页面中显示该学生信息显示学号查询学号致
跳转页面中显示该学生信息显示学号查询学号致
03
1点击菜单列表中查学生信息’选项
2查询界面输入学生学号空
3点击确定’钮
页面出现红字提示查询账号空需查询请输入查询账号’
页面出现红字提示查询账号空需查询请输入查询账号’
04
1 点击菜单列表中查学生信息选项’
2 查询界面输入存学号
3 点击确定’钮
页面提示数疑问请咨询理员确定否录入该学生信息’
页面提示数疑问请咨询理员确定否录入该学生信息’
05
1 点击菜单列表中查教师信息’选项
2 查询界面输入查询教师工号
3 点击确定’钮
跳转页面中显示查询教师信息显示信息中工号查询工号致
跳转页面中显示查询教师信息显示信息中工号查询工号致
06
1点击菜单列表中查教师信息’选项
2查询界面输入教师工号空
3点击确定’钮
页面红字提示查询账号空需查询请输入查询账号’
页面红字提示查询账号空需查询请输入查询账号’
07
1 点击菜单列表中查教师信息’选项
2 查询界面输入存工号
3 点击确定’钮
页面提示数疑问请前数库查否录入该户信息’
页面提示数疑问请前数库查否录入该户信息’
63系统测试结果
测试出结果该系统需实现功基实现交互良
7 总结
文讲述该成绩理系统设计实现根目前开发模式决定前端分离开发模式HTML+CSS前端语言完成页面制作JS+AJAX实现数交互HBuilder作前端开发工具SSM框架作台开发框架IntelliJ IDEA作台开发工具选择MySQL Server 80工具实现数库设计创建数库表等采技术系统进行开发实现
界面良操作方便便日程序更新没开发项目验知识储备充分导致开发前期选开发技术耗费较时间拖慢整系统开发进度导致时间较仓促开发程中某功考虑够周全忽略细节问题知识储备够该系统必然会存缺陷足
作毕业设计感觉需做仅仅代码实现更求系统开发流程总体解首先学会分析项目解项目需求站高点维度思考问题仅仅开发者考虑问题更站户角度思考解户需求开发出项目缺乏验学生成绩理开发流程够熟悉考虑够全面系统进行需求分析时未完全站户角度考虑需求未做完全满足户需求通系统开发体会方面考虑问题重性学间互相帮助友精神
参考文献
[1]郑英姿浅析学生成绩理系统中国科技信息2009（10）：214215
[2]姜宛园浅析学生成绩理系统开发意义 吉林财学信息济学院 130122 2012（29）：138
[3]程光德基web学生成绩理系统设计实现计算机光盘软件应2010（4）：107107
[4]冯治广基Web成绩理系统设计实现电脑编程技巧维护2014（15）：5253
[5]志勇绍荣基WEB学生成绩理系统贡师范高等专科学校学报2003（4）：137139
[6]冯天飞施法中等．基Web户理系统设计实施[J]．计算机应研究200118(4)：78—79
[7]万常选廖国琼吴京慧刘喜 著数库系统原理设计（第2版） [M] 清华学出版社
[8]刘亮亮李文强 著零点起飞学JavaScript+jQuery [M] 清华学出版社
[9]储久良 著web前端开发技术HTMLCSSJavaScript（第2版） [M] 清华学出版社
[10](美) 梁勇 著戴开宇 译Java语言程序设计（基础篇） [M] 机械工业出版社
[11]贾红宇 高校学生成绩理系统设计实现J教育坛2008（9）148149
[12]王颖基MySQL学生成绩理系统设计电脑编程技巧维护2014（6）：3738
[13]肖文翀基SQL Server学生成绩理系统设计[J]计算机光盘软件应2012(5)183184
谢 辞
着毕业设计文完成时学期毕业设计结束意味着北京理工学珠海学院学生涯结束时光流水般飞逝学四年学时光珠海美丽城市划句号
首先感谢北京理工学珠海学院四年培养教导时感谢计算机学院老师感谢您传授知识教会思考培养学力感谢父母四年私支持予学费生活费外学生活忧外想学期间帮助关心支持老师学朋友表达真挚谢意然毕业疫情原已长段时间没见面然感恩存陪走整学生涯
生断学完善程学四年时间里解计算机相关知识正通方面学解前端喜爱热衷选择毕设题目时候选择制作关前端毕设题目——基web学生成绩理系统设计实现采前端分离思想实现该系统毕业设计段时间里学收获特前端方面知识直前端解通次毕业设计制作网页时候进行数交互处理遇少困难时更加清楚意识欠缺方面前端知识时间里知识补次困难次挑战次面挑战克服困难断学机会完善程
文许婷老师耐心指导完成毕业选题选定开题报告完成完成文阶段少许老师耐心指导帮助许老师身学特工作教学热情认真态度许老师表示真挚感谢
道感激情诉甜美回忆漫长生旅途中刚刚扬帆起航生活道路努力社会国家做贡献回报家关心感谢辛苦评阅文老师您辛苦
附 录
附录1
程序源代码
录入成绩程序
@PostMapping(add)
@ResponseBody
public BaseResult add (@RequestBody ScoreTableDomain domain) {
try {
return scoreTableServiceadd(domain)
} catch (Exception e) {
eprintStackTrace()
return toError()
}
}
查询成绩程序
@PostMapping(info)
@ResponseBody
public BaseResult getInfo (String scoreId) {
try {
return scoreTableServicegetInfo(scoreId)
} catch (Exception e) {
eprintStackTrace()
return toError()
}
}
修改成绩程序
@PostMapping(update)
@ResponseBody
public BaseResult update (@RequestBody ScoreTableDomain domain) {
try {
return scoreTableServiceupdate(domain)
} catch (Exception e) {
eprintStackTrace()
return toError()}
}
删成绩程序
@PostMapping(del)
@ResponseBody
public BaseResult del (String scoreId) {
try {
return scoreTableServicedel(scoreId)
} catch (Exception e) {
eprintStackTrace()
return toError() }}
前端代码
修改成绩
ajax({type post
data JSONstringify(data)
xhrFields { withCredentials true}
url rootpath + ＇scoreupdate＇
contentType ＇applicationjson＇
success function(data) {
if(datastatus 200) {
var tipsdocumentgetElementById(＇tips＇)
tipsstylecolor＇blue＇
tipsstyletextAlign＇center＇
tipsinnerText已成功修改
} else {alert(datamessage)}
consolelog(data)}dataType ＇json＇})}
删成绩
ajax({type post
data {scoreId scoreId}
xhrFields {
withCredentials true}
anysc false
url rootpath + ＇scoredel＇
success function(data) {
if(datastatus 200) {
alert(删成功)}}
})
点击钮切换户信息表格
(＇#student＇)on(＇click＇ function() {
if((＇#teacherInfotable＇)hasClass(＇hide＇)&& (＇#buttonDiv＇)hasClass(＇hide＇)){
(＇#teacherInfotable＇)addClass(＇hide＇) (＇#buttonDiv＇)addClass(＇hide＇)}
(＇#studentInfotable＇)toggleClass(＇hide＇)
(＇#buttonDiv＇)toggleClass(＇hide＇)
(＇#addType＇)text(＇1＇)})(＇#teacher＇)on(＇click＇ function() {
if((＇#studentInfotable＇)hasClass(＇hide＇) && (＇#buttonDiv＇)hasClass(＇hide＇)) {
(＇#studentInfotable＇)addClass(＇hide＇)
(＇#buttonDiv＇)addClass(＇hide＇)}
(＇#teacherInfotable＇)toggleClass(＇hide＇)
(＇#buttonDiv＇)toggleClass(＇hide＇)
(＇#addType＇)text(＇2＇)})
登录利jQueryajax请求实现验证户根权限进入操作页面代码：0：理员1：学生2：教师
function login() {
var userNo documentgetElementById(＇userId＇)value
var userPwd documentgetElementById(＇password＇)value
var data {userNo userNouserPassword userPwd}
ajax({type postdata JSONstringify(data)
xhrFields {withCredentials true}url rootpath + ＇login＇
contentType ＇applicationjson＇success function(data) {
if(datastatus 200)
{var userinfo datadatasessionStoragesetItem(＇userno＇userinfouserNo)
sessionStoragesetItem(＇username＇ userinfouserName)if(userinfouserType 0) {
windowlocationhref ＇htmladminActionhtml＇}
if(userinfouserType 2) {
windowlocationhref ＇htmlteacherActionhtml＇}
if(userinfouserType 1) {
windowlocationhref ＇htmlstudentActionhtml＇
}} else {var tips documentgetElementById(＇tips＇)
tipsinnerText datamessage}consolelog(data)}dataType ＇json＇})}
系统操作页面左侧菜单点击菜单中选项会右边显示页面容该功实现采jQuery 中ajax请求load()方法实现页面局部刷新代码：
function loadInner(mId) { var mId windowlocationhashvar pathn
switch(mId) {case ＇#edituser＇pathn userManagehtmlbreak
case #adduserpathn adduserhtmlbreak
case #searchstuscorepathn searchScorehtmlbreak
case #addstuscorepathn insertscorehtmlbreak
case #editstuscorepathn editscorehtmlbreak
case #lookpersonalinfo
var userType (＇#usertitle labellastchild＇)attr(＇id＇)
if(userType 1) {pathn teacherinfohtml} else {
pathn studentInfohtml}breakcase #lookteacherinfo
pathn searchUserInfohtmlbreak
case #loohstuinfopathn searchUserInfohtmlbreak
case #adduserinfopathn adduserInfohtmlbreak
case changepathn changescorehtmlbreak}
(＇#maincontentright＇)load(pathn)}
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容，不代表《香当网》观点或立场，请自行判断内容的真实性和可靠性！
该内容是文档的文本内容，更好的格式请下载文档
基web学生成绩理系统设计
实现
基web学生成绩理系统设计实现
摘
着计算机技术行业广泛应计算机技术应学校中提高学校理效率学生成绩理系统提高学校理效率中发挥重作
系统基web学生成绩理系统采前分离开发模式基前端语言HTML+CSS实现页面制作JS+AJAX实现页面数交互MySQL 创建理数库SSM框架作端开发网络框架IntelliJ IDEA作台开发工具良支持数库应HBuilder作前端开发工具具边改边模式提高编写网页代码效率文介绍实现系统开发工具技术系统进行行性分析需求分析系统设计系统实现等
关键词：成绩理web数库SSM
The design and implementation of the Student Score Management System based on Web
Abstract
With the wide application of computer technology in all walks of life the application of computer technology to schools will greatly improve the efficiency of school management Student achievement management system will play an important role in improving the efficiency of school management
This system is a webbased student achievement management system which adopts a separate development mode With the basic frontend language HTML + CSS to achieve page production JS + Ajax to achieve page data interaction using MySQL to create and manage the database the SSM framework as a backend development of the network framework Intellij IDEA is used as a backend development tool because it can support database application and HBuilder is used as a frontend development tool to improve the efficiency of writing web page code This paper mainly introduces the development tools and technology of the system and the system feasibility analysis demand analysis system design and system implementation
Keywords Performance Management web database SSM
目 录
1 引言 1
11 次设计目意义 1
12 次设计研究容 1
2 系统开发工具技术 1
21 开发工具 2
211 IntelliJ IDEA 2
212 Mysql Server 80 + SQLyog 2
213 HBuilder 2
22 开发技术 3
221系统开发模式 3
222 SSM框架 3
223 前端开发语言 4
3 系统分析 4
31行性分析 4
311 济行性 4
312 技术行性 4
313运行操作行性 5
32 系统需求分析 5
4 系统设计 6
41 系统总设计 6
42 数库设计 8
5 系统实现 9
51 登录模块 9
511 登录页面 9
512系统首页 10
52成绩理模块 11
521成绩录入 11
522编辑学生成绩 12
523成绩查询 13
53户理模块 14
531添加户 14
532查询编辑户 15
54户信息模块 16
541查询户信息 16
542添加户信息 18
543编辑户信息 19
6 系统测试 19
61 系统功测试 19
62系统测试例 20
63系统测试结果 27
参考文献 29
谢 辞 30
附 录 31
1 引言
11 次设计目意义
着媒体教学推广什类型学校学生成绩理直学校重工作容着学校办学规模扩招生数增加学生成绩理成项非常繁琐工作学生成绩学校许工作重支撑学校奖学金评定教师根学生成绩解学生学情况学生档案建设学校等级评等等见学生成绩理系统学校日常工作中发挥着越越明显作特点节省力资源方便减少纸张消耗极提高工作效率
现阶段学初中高中获取成绩方式老师书面通知学生果已弄见成绩单想解考试成绩次需咨询老师某种程度会影响老师工作开发套学生成绩理系统势趋样方便学生快速获取成绩学生根学成绩定制合适学方案家长通该成绩系统解孩子学成绩进孩子学提出指导意见基理该学生成绩系统高校学生作象进行设计开发
12 次设计研究容
着计算机技术行业广泛应学生成绩理系统学校常规教务理工作中发挥着越越明显作进步提高学校办公效率必现代计算机技术传统学生成绩理相结合设计实现基web学生成绩理系统
系统设计研究容示：
Ø 系统功需求分析：分析该学生成绩系统需实现什样容
Ø 系统设计：界面设计数库设计系统功设计
Ø 系统开发技术工具选取：基功需求分析选取合适开发该系统开发技术工具
Ø 学生成绩理系统实现：充分利选择开发技术开发工具系统功进行实现
2 系统开发工具技术
果想成功开发系统作开发者需考虑东西开发系统涉东西太首先开发中必少层面开发技术选择编程语言框架技术选择选择合适开发技术会开发种事半功倍效果确定技术选择应技术支持开发台开发工具运行环境容会次系统开发开发工具开发技术进行介绍
21 开发工具
211 IntelliJ IDEA
IntelliJ IDEA开发java语言集成环境业界认佳开发工具许公司该工具进行台开发该工具着许强功
IntelliJ IDEA优点：高度智安装智代码补全框架针性辅助促进生产力
212 Mysql Server 80 + SQLyog
MySQL关系数库理系统中关系数库创建表存储数提高操作速度灵活性MySQL开源支持型数库标准 SQL 数语言形式
Mysql Server 80成功安装命令窗口命令窗口命令语句进行操作命令语句语法格式非常严格输错字符行窗口操作数库非常麻烦SQLyog连接MYSQL数库视化界面工具SQLyog工具中成功连接数库SQL语句直接里面创建数库建立数表修改数表中数类型直接查表中数简单便利
213 HBuilder
HBuilder快web编码工具量快捷键开发者需鼠标完成工作需逐逐敲写代码HBuilder完整代码语法提示功根代码容进行智提示量代码块供开发者快速生成段代码提高开发者编写HTMLCSSJS代码效率HBuilder框架语法提示功muijQueryreact等框架语法验证功输入代码误会立报错未解决继续编写代码会没智提示提醒开发者代码误方法外HBuilder开发者欲罢功边编写代码边实时查实际效果需开发者开浏览器进行查实现效果节约时间开发效率提高
22 开发技术
221系统开发模式
系统采前端分离开发模式系统基web学生成绩理系统首先理解什基web通俗语言说属BS结构浏览器服务器模式webHTTP协议通信基础利浏览器进行访问网站传t统开发模式里采前端分离模式数服务端渲染前端服务端渲染方式指服务器端网页直接生成传递浏览器程许重复代码定程度增加服务器工作压力外前端代码端代码放起会产生代码混乱果程度增加项目续维护难度前端分离意味着开发者需边开发台边开发前端前端兼顾开发效率低开发周延长解决问题出现种新开发模式前端分离模式前端分离指前端员端员商量需数交互接口起进行开发前端员需负责相关页面制作样式调试动态数渲染端专心实现具体业务需求提供前端需接口样模式端返回前端数页面前端通Ajax技术调端接口获取需数负责数渲染HTML页面中端需考虑前端实现效果户页面样式均前端决定句话概括台需负责提供前端开发员需数前端负责端员传数进行显示职责分工非常明确采前端分离模式提高开发效率开发变更加灵活时降低服务器负载系统性提升增强代码维护性
222 SSM框架
SSM框架SpringMVCSpringMybatis整合成整系统划分视图层控制层业务层DAO层
业务层（Spring）指service层负责设计实现特定业务模块逻辑应该层业务实现需调已定义DAO层接口
持久层（Mybatis）指DAO层该层负责数持久层工作开发员层设计接口配置类数库进行sql语句映射结构变非常清晰
控制层（springMVC）指controller层该层负责控制具体业务模块流程层开发员需调service层接口控制业务流程
视图层指view层层负责前端页面展示设计系统开发模式前端分离模式没view层做阐述
223 前端开发语言
HTML指描述页面超文标记语言提供关web页面信息web页面特定容
CSS指层叠样式表设计web页面种样式允许样式信息web页面容分离
JavaScriptInternet流行脚语言广泛HTMLWeb应程序开发作种动态编程语言处理页面数交互种浏览器中运行解释式编程语言
jQuery轻量级少写做js库包含许功提供量供开发员插件设计ajax功
设计中HTML+CSS语言实现页面jQueryajax请求功请求台数JS实现数交互
3 系统分析
设计系统前需系统进行分析利加快理解系统部明确系统开发方利开发进度推进
31行性分析
311 济行性
分析系统济行性估算开发系统期维护费外分析学校济状况投资力否力支付系统开发费否提供系统运行环境般情况说该系统运行台电脑浏览器中开目前电脑市场计算机价格十分低廉性差学校济力系统开发济行
312 技术行性
相技术方面言系统HTML+CSS实现前端静态页面HTML+CSS种易学易标记语言简单手JavaScriptjQuery技术动态获取台数进行数交互jQuery封装Ajax请求请求服务器数功需引入JS文件需安装插件操作方便利适中规模数量需求MySQL设计系统数库满足学生成绩理系统数库理需求IntelliJ IDEA作系统台开发工具目前数公司选择开发台首选工具支持代码编写配置测试出错程度提高开发效率
综述开发工具开发技术均满足实现系统开发条件系统技术行
313运行操作行性
运行操作行性指否提供运行环境系统操作难易程度般情况该系统台连接网络普通电脑运行操作现学校工作电脑电脑网络满足运行该系统条件
系统页面简洁直观易懂操作简单会电脑学生教师均直接手操作理员权限根页面文字提示进行操作会电脑户通简单说明操作系统会存太问题
综系统运行操作行
32 系统需求分析
系统进行设计前开发员首先必须解确定户需求什满足户需求系统没意义开发者应该户需求进行全面客观分析基结果进行应功设计
系统户类型学生教师理员户类型功系统中理员拥功权限次教师学生功基础
会根户类型（理员教师学生）阐述系统中操作具体功
登录功存系统户功
学生系统中两功查成绩查信息
教师系统中学生成绩进行录入查修改删操作查教师信息查学生信息
理员成绩理模块功权限教师相理员拥户信息模块功权限查包括户信息添加修改删户信息两功模块理员功权限户理理员查已存户查登录账号姓名密码户类型添加存户修改已存户姓名密码删已存户
户功显示图31示：
图31户功显示图
4 系统设计
41 系统总设计
系统设计四模块
1登录模块：
理员教师学校分配工号密码登录系统
学生学校分配学号密码登录系统
2户理模块：
理员该功模块权限理员已存户进行编辑查户修改户信息删已存户等系统添加新户
3户信息理模块：
学生查信息教师查信息学生信息理员查包括户信息添加修改删户信息
4学生成绩理模块：
理员教师均查学生成绩录入学生成绩学生成绩进行编辑编辑功包括修改删学生成绩学生种权限查询成绩查询学成绩
系统功模块设计图示：
图41系统功模块设计图
42 数库设计
数库设计需求分析结果某数库理系统MySQL创建数库创建数表程中需数库中数表进行关联样系统效访问数表创建需满足户需求更处理需求设计开发数库系统时候应该考虑方面尤考虑户种需求时候应该更加仔细详细量避免必力物力
设计数库理系统建立4张数表
学生信息表studentInfo存放学生详细信息表41 ：
表41 学生信息表
列名
列标识
数类型
长度
空值
键
学号
stu_No
varchar
20
No
yes
姓名
stu_Name
varchar
50
No
No
性
stu_Sex
varchar
10
Yes
No
出生年月日
stu_Birth
date
Yes
No
身份证号码
stu_identity_num
varchar
50
No
No
电话号码
stu_tel_phone
varchar
50
Yes
No
籍贯
stu_native_place
varchar
50
Yes
No
政治面貌
stu_politics_status
varchar
10
Yes
No
现居住址
stu_address
varchar
50
Yes
No
教师信息表teacherInfo存放教师详细信息中包括理员详细信息表42示：
表42教师信息表
列名
列标识
数类型
长度
空值
键
工号
teacher_No
varchar
20
No
yes
姓名
teacher_Name
varchar
50
No
No
性
teacher_Sex
varchar
10
Yes
No
出生年月日
teacher_Birth
date
Yes
No
身份证号码
teacher_identity_no
varchar
50
No
No
电话号码
teacher_tel_phone
varchar
50
Yes
No
籍贯
teacher_native_place
varchar
50
Yes
No
政治面貌
teacher_politics_status
varchar
10
Yes
No
教书科目
teaching_subject
varchar
10
Yes
No
婚否
is_marry
int
11
Yes
No
现居住址
teacher_address
varchar
50
Yes
No
毕业学校
graduation_school
varchar
50
Yes
No
学历
education_background
varchar
10
Yes
No
户理表userInfo存放该系统户登录账号密码姓名权限信息表43 ：
表43 户理表
列名
列标识
数类型
长度
空值
键
帐号
user_no
varchar
20
No
yes
姓名
user_name
varchar
50
No
No
密码
user_password
varchar
50
No
No
户类型
user_type
varchar
50
No
No
成绩表scoretable存放学生相关成绩表44：
表44 学生成绩表
列名
列标识
数类型
长度
空值
键
学号
stu_no
varchar
20
No
yes
姓名
stu_name
varchar
20
No
No
课程号
course_no
varchar
20
No
yes
课程名
course_name
varchar
50
No
No
课程成绩
course_score
float
No
No
传时间
upload_time
date
No
No
学期
school_term
varchar
20
No
No
5 系统实现
51 登录模块
511 登录页面
户需登录页面通输入户账号密码登录系统果该户账号存数库中户表userInfo中存该户账号法成功登录该系统登录页面图51示：
图51登录页面
512系统首页
果登录成功进入该系统户会进入界面理员成功登录进入操作页面图52示：
图52 理员操作页面
教师成功登录进入页面图53示：
图53 教师操作界面
学生成功登录进入操作页面图54示：
图54 学生操作界面
52成绩理模块
该模块作整系统核心理员教师均拥该模块功权限学校中理学生成绩课老师意味着模块率高应该教师该模块教师进行阐述
521成绩录入
理员教师拥该功权限学生该权限
图55教师录入成绩页面
图55 成绩录入界面
图示教师录入成绩时需输入课程号课程名学期录入时间学生学号学生名字学生成绩等字段缺
522编辑学生成绩
教师该界面需输入学生学号需查询成绩课程名称获取学生某科目成绩点击表格中编辑框方钮学生成绩进行修改删操作
图56 教师编辑学生成绩界面
编辑学生页面：
点击重置钮会已修改信息变回原信息前提没点确定钮点击确定钮编辑学生成绩进行修改界面图示：
图57 修改学生成绩界面
删学生成绩前页面进行删跳转页面删成功会弹框显示删成功页面：
图58 删学生成绩成功界面
523成绩查询
该功模块理员教师学生均查询成绩理员查询学生成绩者查询单学生成绩教师次查询查询某学生成绩次性查询学生成绩学生查询成绩查学成绩
理员查询成绩界面：
图59 理员查询学生成绩界面
教师法次性查询学成绩次查询查询学生成绩查询程中必须输入学生学号否提示学生学号空查询界面：
图510 教师查询学生成绩学号空界面
学生查询成绩法查询学成绩：
图中学生学号前该系统学生学号系统动显示学生法编辑
图511 学生查询成绩界面
53户理模块
该户理功模块权限理员专属该功模块会非理员操作页面出现
531添加户
添加户界面四输入框分户账号户姓名户密码户类型理员添加户时四字段缺空否法成功添加户添加户界面：
图512 添加户界面
532查询编辑户
理员点击获取户钮查询该系统户点击表格中修改’钮前行户姓名密码进行修改点击删’钮删前行户
图513 理员获取户信息界面
图514 查询特定户界面
果想查询某户图513示界面中input框中输入需查询户账号（工号学号）成功会方表格中显示图514示时表格中点击钮修改’删’该户进行编辑
编辑户修改户删户
修改户修改户姓名户密码法修改户账号户类型修改户界面中户账号户类型法进行编辑
图 515 修改户界面
删户时查询页面查询获取户信息点击目标删户表格中应行中删钮进行删
图516 删户成功界面
54户信息模块
该功模块频率高户理员文模块理员进行阐述
541查询户信息
模块中户查询功学生查信息教师查信息学生信息权查理员信息理员查询户信息
查户信息界面：
图517查询理员教师信息界面
图518查询学生信息界面
图519理员查信息界面
542添加户信息
理员功权限添加页面两钮选择添加户类型户信息学生教师点击钮会出现表格表格直接添加信息
界面：
图520 选择添加户信息界面
图521 添加学生信息界面
图522 添加教师信息界面
543编辑户信息
理员操作该功模块权限户功操作权限编辑户信息指修改删户信息
图523 查询户信息成功页面
图524 编辑户信息页面
编辑户信息：通查询界面输入该户工号者学号获取户信息查询成功户界面图523点击红色框中编辑户钮’直接表格中进行修改户信息修改完信息点击图524中确定修改’钮成功修改点击图523中删户信息钮进行删图524中点击删户信息钮进行删
6 系统测试
61 系统功测试
系统功测试指需求分析阶段提出全部功进行验证检查系统否实现户求功针系统测试方法：
1 页面跳转检查：检查页面间跳转否正确
2 钮功检查：检查页面中钮功否设想中该钮实现功致否钮绑定功事件
3 户登录检查：登录页面输入登录账号密码时检查户输入信息否空否填写正确正确否会页面出现提示登录成功检查数库中否存该户核否跳转正确户操作页面
4 户信息验证：检查户身份证号码电话号码否输入正确格式
5 查询功验证：查询程中检查查询结果否预期结果匹配否会存信息混乱查询成绩时应返回学生成绩结果返回户信息等
6 删功验证：删程中吧检查需删数否成功删成功删指页面删时数库删条数具体删规删功准
7 添加功验证：添加程中检查成功添加数中否查询添加数查否数添加正确数表中
8 修改功验证：编辑信息学生成绩时页面提示编辑成功确认否真修改成功需数库中查应表中数够修改
9 接口测试：成功调接口时检查端返回数预期值致查询某学生成绩时端返回数否该学生成绩
10 浏览器测试：系统放置浏览器进行测试测试兼容性查浏览器页面样式否致功否致
62系统测试例
系统针功模块重功撰写测试例进行测试
(1) 登录系统测试例
表61登录测试例
序号
测试步骤
预期结果
实际结果
01
1输入正确户账号密码
2点击登录’钮
登录成功
登录成功
02
1 输入存户账号
2点击登录’钮
登录失败
登录失败
03
1 输入存户账号错误密码2点击登录’钮
登录失败
登录失败
04
1 输入户账号空密码空
2 点击登录’钮
登录失败
登录失败
05
1 输入户账号空户密码空
2 点击登录’钮
登录失败
登录失败
(2) 成绩理模块测试例
表62 查询成绩测试例
序号
测试步骤
预期结果
实际结果
01
1 学期学生学号课程名均空（数库空）
2 点击查询’钮
页面显示学生成绩
页面显示学生成绩
02
1学期学生学号课程名均空（数库空）
2点击查询’钮
页面显示暂相关成绩疑问请咨询老师’
页面显示暂相关成绩疑问请咨询老师’
03
1 学期空学生学号空该学生成绩数库中存课程名空
2 点击查询’钮
页面显示该学生成绩显示学生学号查询学号致
页面显示该学生成绩显示学生学号查询学号致
04
1学期空学生学号空该学生成绩数库中存课程名空
2点击查询’钮
页面显示暂相关成绩疑问请咨询老师’
页面显示暂相关成绩疑问请咨询老师’
05
1 选择学期学生学号空课程名空
2 点击查询’钮
页面显示数库中应学期学生成绩显示学期查询学期致
页面显示数库中应学期学生成绩显示学期查询学期致
06
1 选择学期学生学号空课程名空（数库存）
2 点击查询钮’
页面显示该学生应学期成绩学号学期查询学期学号致
页面显示该学生应学期成绩学号学期查询学期学号致
07
1选择学期学生学号空课程名空（数库存）
2点击查询钮
页面显示暂相关成绩疑问请咨询老师’
页面显示暂相关成绩疑问请咨询老师’
08
1 选择学期学号空课程名空（数库中存）
2 点击查询’钮
页面显示该学生应学期应课程成绩学期学号课程名查询信息致
页面显示该学生应学期应课程成绩学期学号课程名查询信息致
09
1选择学期学号空课程名空（数库中存）
2点击查询’钮
页面显示暂相关成绩疑问请咨询老师’
页面显示暂相关成绩疑问请咨询老师’
表63 录入成绩测试例
序号
测试步骤
预期结果
实际结果
01
1 输入课程号课程名录入时间选择学期学生学号学生姓名学生成绩
2 点击录入’钮
数库成功插入该学生成绩页面提示录入成功需查请点击查询成绩’
数库成功插入该学生成绩页面提示录入成功需查请点击查询成绩’
02
1输入课程号课程名录入时间学期学生学号学生姓名学生成绩均空
2点击录入’钮
前页面提示数验证失败：1 课程名空2 课程号空3 学生名空’
前页面提示数验证失败：1 课程名空2 课程号空3 学生名空’
图64修改学生成绩测试例
序号
测试步骤
预期结果
实际结果
01
1 点击菜单列表中编辑学生成绩’选项
2 输入学生学号查询课程名（数库存）
3 点击查询’钮
4 点击表格方修改’钮
5 修改跳转页面中学生课程成绩信息
6 点击确定’钮
页面中表格显示查询该学生某课程成绩信息显示学生学号课程名查询学号课程名致修改页面修改学生成绩信息点击确定’钮页面显示已成功修改’提示
页面中表格显示查询该学生某课程成绩信息显示学生学号课程名查询学号课程名致修改页面修改学生成绩信息点击确定’钮页面显示已成功修改’提示
02
1点击菜单列表中编辑学生成绩’选项
2输入学生学号查询课程名（数库存该学生课程成绩信息）
3点击查询’钮
页面弹框提示该学生该成绩记录’
页面弹框提示该学生该成绩记录’
03
1 点击菜单列表中编辑学生成绩’选项
2 输入存学生学号输入课程名
3 点击查询’钮
页面弹框提示该学生该成绩记录’
页面弹框提示该学生该成绩记录’
04
1 点击菜单列表中编辑学生成绩’选项
2 输入学生账号空课程名空
3 点击查询’钮
页面弹框提示学生学号课程名均空’
页面弹框提示学生学号课程名均空’
05
1点击菜单列表中编辑学生成绩’选项
2输入学生账号空课程名空
3点击查询’钮
页面弹框提示学生学号课程名均空’
页面弹框提示学生学号课程名均空’
06
1点击菜单列表中编辑学生成绩’选项
2输入学生账号空课程名空
3点击查询’钮
页面弹框提示学生学号课程名均空’
页面弹框提示学生学号课程名均空’
(3) 户理模块测试例
表65添加户测试例
序号
测试步骤
预期结果
实际结果
01
1 输入户账号户名户密码选择户类型
2 点击添加’钮
数库成功添加该户页面弹框提示成功添加户’
数库成功添加该户页面弹框提示成功添加户’
02
1 输入户姓名户密码户类型户账号空
2 点击添加’钮
数库添加户失败页面弹框提示户账号空’
数库添加户失败页面弹框提示户账号空’
03
1输入户账号户密码户类型户姓名空
2点击添加’钮
数库添加户失败页面弹框提示户名空’
数库添加户失败页面弹框提示户名空’
04
1输入户账号户姓名户类型户密码空
2点击添加’钮
数库添加户失败页面弹框提示户密码空’
数库添加户失败页面弹框提示户密码空’
05
1输入户账号户名户密码选择户类型均空
2点击添加’钮
数库添加户失败页面弹框提示户账号空户名空户密码空’
数库添加户失败页面弹框提示户账号空户名空户密码空’
表66 查询户测试例
序号
测试步骤
预期结果
实际结果
01
1 点击左边菜单编辑户’选项
2 点击右边查询页面中获取户’钮
前页面右侧方表格显示系统户
页面右侧方表格显示系统户
02
1 点击左边菜单编辑户’选项
2 右边查询页面输入户账号（数库存）
3 点击查询户’钮
前页面右侧表格方显示查询户查询户账号显示户账号致
前页面右侧表格方显示查询户查询户账号显示户账号致
03
1 点击左边菜单编辑户’选项
2 右边查询页面输入户账号（数库存）
3 点击查询户’钮
页面提示该户存’
页面提示该户存’
04
1点击左边菜单编辑户’选项
2右边查询页面输入户账号空
3点击查询户’钮
页面提示户账号空’
页面提示户账号空’
表67修改户测试例
序号
测试步骤
预期结果
实际结果
01
1 修改户姓名
2 点击确定修改’钮
数库中户名修改户名致户账号致
页面弹框显示成功修改’
数库中户名修改户名致户账号致页面弹框显示成功修改’
02
1 修改户密码
2 点击确定修改’钮
页面弹框显示成功修改’数库中户密码成功修改户账号致原密码登录系统登录失败新密码成功登录系统
页面弹框显示成功修改’数库中户密码成功修改户账号致原密码登录系统登录失败新密码成功登录系统
03
修改户账号户类型
页面中法编辑户账号户类型输入框
页面中法编辑户账号户类型输入框
04
1 更改信息
2 点击确定修改’钮
页面出现红字提示前信息没进行改动请改动确定修改’
页面出现红字提示前信息没进行改动请改动确定修改’
(4) 户信息模块测试例
表68 添加户信息测试例
序号
测试步骤
预期结果
实际结果
01
1点击添加学生信息’钮
页面出现应学生信息表格
页面出现应学生信息表格
02
1点击添加教师信息’钮
页面出现应教师信息表格
页面出现应教师信息表格
03
1 点击添加学生信息’钮
2 表格中添加信息学号姓名身份证号手机号空（数库存该户信息）
3 点击添加’钮
数库中studentInfo表成功添加该户信息查询页面查询该户信息
数库中studentInfo表成功添加该户信息查询页面查询该户信息
04
1点击添加学生信息’钮
2表格中添加信息学号姓名身份证号手机号空（数库已存该户信息）
3点击添加’钮
页面提示该学生学号已存’
页面提示该学生学号已存’
05
1点击添加教师信息’钮
2表格中添加信息学号姓名身份证号手机号空（数库存该户信息）
3点击添加’钮
数库中teacherInfo表成功添加该户信息查询页面查询该户信息
数库中teacherInfo表成功添加该户信息查询页面查询该户信息
06
1点击添加教师信息’钮
2表格中添加信息学号姓名身份证号手机号空（数库存该户信息）
3点击添加’钮
页面提示该教师工号已存’
页面提示该教师工号已存’
07
输信息直接点击添加’钮
页面提示数验证失败：1 学号空2 身份证号码格式误3 电话号码格式误4 出生年月日格式误5 姓名空6 身份证号码空’
页面提示数验证失败：1 学号空2 身份证号码格式误3 电话号码格式误4 出生年月日格式误5 姓名空6 身份证号码空’
表69 查询户信息
序号
测试步骤
预期结果
实际结果
01
1 点击菜单列表中查信息’选项
页面中显示该系统前户信息
页面中显示该系统前户信息
02
1 点击菜单列表中查学生信息’选项
2 查询界面输入查询学生学号
3 点击确定’钮
跳转页面中显示该学生信息显示学号查询学号致
跳转页面中显示该学生信息显示学号查询学号致
03
1点击菜单列表中查学生信息’选项
2查询界面输入学生学号空
3点击确定’钮
页面出现红字提示查询账号空需查询请输入查询账号’
页面出现红字提示查询账号空需查询请输入查询账号’
04
1 点击菜单列表中查学生信息选项’
2 查询界面输入存学号
3 点击确定’钮
页面提示数疑问请咨询理员确定否录入该学生信息’
页面提示数疑问请咨询理员确定否录入该学生信息’
05
1 点击菜单列表中查教师信息’选项
2 查询界面输入查询教师工号
3 点击确定’钮
跳转页面中显示查询教师信息显示信息中工号查询工号致
跳转页面中显示查询教师信息显示信息中工号查询工号致
06
1点击菜单列表中查教师信息’选项
2查询界面输入教师工号空
3点击确定’钮
页面红字提示查询账号空需查询请输入查询账号’
页面红字提示查询账号空需查询请输入查询账号’
07
1 点击菜单列表中查教师信息’选项
2 查询界面输入存工号
3 点击确定’钮
页面提示数疑问请前数库查否录入该户信息’
页面提示数疑问请前数库查否录入该户信息’
63系统测试结果
测试出结果该系统需实现功基实现交互良
7 总结
文讲述该成绩理系统设计实现根目前开发模式决定前端分离开发模式HTML+CSS前端语言完成页面制作JS+AJAX实现数交互HBuilder作前端开发工具SSM框架作台开发框架IntelliJ IDEA作台开发工具选择MySQL Server 80工具实现数库设计创建数库表等采技术系统进行开发实现
界面良操作方便便日程序更新没开发项目验知识储备充分导致开发前期选开发技术耗费较时间拖慢整系统开发进度导致时间较仓促开发程中某功考虑够周全忽略细节问题知识储备够该系统必然会存缺陷足
作毕业设计感觉需做仅仅代码实现更求系统开发流程总体解首先学会分析项目解项目需求站高点维度思考问题仅仅开发者考虑问题更站户角度思考解户需求开发出项目缺乏验学生成绩理开发流程够熟悉考虑够全面系统进行需求分析时未完全站户角度考虑需求未做完全满足户需求通系统开发体会方面考虑问题重性学间互相帮助友精神
参考文献
[1]郑英姿浅析学生成绩理系统中国科技信息2009（10）：214215
[2]姜宛园浅析学生成绩理系统开发意义 吉林财学信息济学院 130122 2012（29）：138
[3]程光德基web学生成绩理系统设计实现计算机光盘软件应2010（4）：107107
[4]冯治广基Web成绩理系统设计实现电脑编程技巧维护2014（15）：5253
[5]志勇绍荣基WEB学生成绩理系统贡师范高等专科学校学报2003（4）：137139
[6]冯天飞施法中等．基Web户理系统设计实施[J]．计算机应研究200118(4)：78—79
[7]万常选廖国琼吴京慧刘喜 著数库系统原理设计（第2版） [M] 清华学出版社
[8]刘亮亮李文强 著零点起飞学JavaScript+jQuery [M] 清华学出版社
[9]储久良 著web前端开发技术HTMLCSSJavaScript（第2版） [M] 清华学出版社
[10](美) 梁勇 著戴开宇 译Java语言程序设计（基础篇） [M] 机械工业出版社
[11]贾红宇 高校学生成绩理系统设计实现J教育坛2008（9）148149
[12]王颖基MySQL学生成绩理系统设计电脑编程技巧维护2014（6）：3738
[13]肖文翀基SQL Server学生成绩理系统设计[J]计算机光盘软件应2012(5)183184
谢 辞
着毕业设计文完成时学期毕业设计结束意味着北京理工学珠海学院学生涯结束时光流水般飞逝学四年学时光珠海美丽城市划句号
首先感谢北京理工学珠海学院四年培养教导时感谢计算机学院老师感谢您传授知识教会思考培养学力感谢父母四年私支持予学费生活费外学生活忧外想学期间帮助关心支持老师学朋友表达真挚谢意然毕业疫情原已长段时间没见面然感恩存陪走整学生涯
生断学完善程学四年时间里解计算机相关知识正通方面学解前端喜爱热衷选择毕设题目时候选择制作关前端毕设题目——基web学生成绩理系统设计实现采前端分离思想实现该系统毕业设计段时间里学收获特前端方面知识直前端解通次毕业设计制作网页时候进行数交互处理遇少困难时更加清楚意识欠缺方面前端知识时间里知识补次困难次挑战次面挑战克服困难断学机会完善程
文许婷老师耐心指导完成毕业选题选定开题报告完成完成文阶段少许老师耐心指导帮助许老师身学特工作教学热情认真态度许老师表示真挚感谢
道感激情诉甜美回忆漫长生旅途中刚刚扬帆起航生活道路努力社会国家做贡献回报家关心感谢辛苦评阅文老师您辛苦
附 录
附录1
程序源代码
录入成绩程序
@PostMapping(add)
@ResponseBody
public BaseResult add (@RequestBody ScoreTableDomain domain) {
try {
return scoreTableServiceadd(domain)
} catch (Exception e) {
eprintStackTrace()
return toError()
}
}
查询成绩程序
@PostMapping(info)
@ResponseBody
public BaseResult getInfo (String scoreId) {
try {
return scoreTableServicegetInfo(scoreId)
} catch (Exception e) {
eprintStackTrace()
return toError()
}
}
修改成绩程序
@PostMapping(update)
@ResponseBody
public BaseResult update (@RequestBody ScoreTableDomain domain) {
try {
return scoreTableServiceupdate(domain)
} catch (Exception e) {
eprintStackTrace()
return toError()}
}
删成绩程序
@PostMapping(del)
@ResponseBody
public BaseResult del (String scoreId) {
try {
return scoreTableServicedel(scoreId)
} catch (Exception e) {
eprintStackTrace()
return toError() }}
前端代码
修改成绩
ajax({type post
data JSONstringify(data)
xhrFields { withCredentials true}
url rootpath + ＇scoreupdate＇
contentType ＇applicationjson＇
success function(data) {
if(datastatus 200) {
var tipsdocumentgetElementById(＇tips＇)
tipsstylecolor＇blue＇
tipsstyletextAlign＇center＇
tipsinnerText已成功修改
} else {alert(datamessage)}
consolelog(data)}dataType ＇json＇})}
删成绩
ajax({type post
data {scoreId scoreId}
xhrFields {
withCredentials true}
anysc false
url rootpath + ＇scoredel＇
success function(data) {
if(datastatus 200) {
alert(删成功)}}
})
点击钮切换户信息表格
(＇#student＇)on(＇click＇ function() {
if((＇#teacherInfotable＇)hasClass(＇hide＇)&& (＇#buttonDiv＇)hasClass(＇hide＇)){
(＇#teacherInfotable＇)addClass(＇hide＇) (＇#buttonDiv＇)addClass(＇hide＇)}
(＇#studentInfotable＇)toggleClass(＇hide＇)
(＇#buttonDiv＇)toggleClass(＇hide＇)
(＇#addType＇)text(＇1＇)})(＇#teacher＇)on(＇click＇ function() {
if((＇#studentInfotable＇)hasClass(＇hide＇) && (＇#buttonDiv＇)hasClass(＇hide＇)) {
(＇#studentInfotable＇)addClass(＇hide＇)
(＇#buttonDiv＇)addClass(＇hide＇)}
(＇#teacherInfotable＇)toggleClass(＇hide＇)
(＇#buttonDiv＇)toggleClass(＇hide＇)
(＇#addType＇)text(＇2＇)})
登录利jQueryajax请求实现验证户根权限进入操作页面代码：0：理员1：学生2：教师
function login() {
var userNo documentgetElementById(＇userId＇)value
var userPwd documentgetElementById(＇password＇)value
var data {userNo userNouserPassword userPwd}
ajax({type postdata JSONstringify(data)
xhrFields {withCredentials true}url rootpath + ＇login＇
contentType ＇applicationjson＇success function(data) {
if(datastatus 200)
{var userinfo datadatasessionStoragesetItem(＇userno＇userinfouserNo)
sessionStoragesetItem(＇username＇ userinfouserName)if(userinfouserType 0) {
windowlocationhref ＇htmladminActionhtml＇}
if(userinfouserType 2) {
windowlocationhref ＇htmlteacherActionhtml＇}
if(userinfouserType 1) {
windowlocationhref ＇htmlstudentActionhtml＇
}} else {var tips documentgetElementById(＇tips＇)
tipsinnerText datamessage}consolelog(data)}dataType ＇json＇})}
系统操作页面左侧菜单点击菜单中选项会右边显示页面容该功实现采jQuery 中ajax请求load()方法实现页面局部刷新代码：
function loadInner(mId) { var mId windowlocationhashvar pathn
switch(mId) {case ＇#edituser＇pathn userManagehtmlbreak
case #adduserpathn adduserhtmlbreak
case #searchstuscorepathn searchScorehtmlbreak
case #addstuscorepathn insertscorehtmlbreak
case #editstuscorepathn editscorehtmlbreak
case #lookpersonalinfo
var userType (＇#usertitle labellastchild＇)attr(＇id＇)
if(userType 1) {pathn teacherinfohtml} else {
pathn studentInfohtml}breakcase #lookteacherinfo
pathn searchUserInfohtmlbreak
case #loohstuinfopathn searchUserInfohtmlbreak
case #adduserinfopathn adduserInfohtmlbreak
case changepathn changescorehtmlbreak}
(＇#maincontentright＇)load(pathn)}
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容，不代表《香当网》观点或立场，请自行判断内容的真实性和可靠性！
该内容是文档的文本内容，更好的格式请下载文档