个人项目实训-教学辅助系统设计

• 实训名称

教学辅助设计系统

• 实训内容

实现教学系统的设计，实现学生学，老师教的设计，包括系统自动生成对学生的综合评价

• 需求分析

3.1教师需求分析

教师登陆可以进行发布公告，上传学习资料，对作业进行创建、批改、打回，考核创建、批改，课程评价查看操作。用例图如下：

（1）公告模块

用例名称：公告

用例标识编号：110

参与者：教师

简要说明：教师用来发布公告

前置条件：教师登录教学辅助系统

基本事件流： 教师登录系统 教师打开公告功能 填写标题，内容 发布

后置条件：发布公告成功

 （2）上传资料模块

用例名称：上传资料

用例标识编号：120

参与者：教师

简要说明：教师用来上传学习资料

前置条件：教师登录教学辅助系统

基本事件流： 1.教师登录系统 2.教师打开上传资料功能 3.选择文件 4.文件置入加载框 5.点击上传

后置条件：上传资料成功

（3）创建作业模块

用例名称：创建作业模块

用例标识编号：131

参与者：教师

简要说明：教师用来创建学生作业

前置条件：教师登录教学辅助系统

基本事件流： 1.教师登录系统 2.教师打开作业功能 3.点击创建作业 4.编写题目内容 5.可以创建新的题目，或者删除题目 6.填写班级 7.发布作业

后置条件：发布作业成功

（4）修改作业模块

用例名称：修改作业模块

用例标识编号：133

参与者：教师

简要说明：教师用来修改学生作业

前置条件：教师登录教学辅助系统

基本事件流： 1.教师登录系统 2.教师打开作业功能 3.点击修改作业 4.修改题目内容 5.也可以创建新的题目，或者删除题目 6.填写班级 7.重新发布作业

后置条件：发布作业成功

（5）批改作业模块

用例名称：批改作业模块

用例标识编号：134

参与者：教师

简要说明：教师用来批改学生作业

前置条件：教师登录教学辅助系统

基本事件流： 1.教师登录系统 2.教师打开作业批改功能 3.点击批改作业 4.打分，写作业评语 5.也可以重新修改分数和评语

后置条件：批改作业成功

（6）打回作业模块

用例名称：打回作业模块

用例标识编号：135

参与者：教师

简要说明：教师用来打回学生作业

前置条件：教师登录教学辅助系统

基本事件流： 1.教师登录系统 2.教师打开作业功能 3.点击打回作业

后置条件：打回作业成功

（7）创建考核模块

用例名称：创建考核模块

用例标识编号：141

参与者：教师

简要说明：教师用来创建学生考核

前置条件：教师登录教学辅助系统

基本事件流： 1.教师登录系统 2.教师打开考核功能 3.点击创建考核 4.编写题目内容 5.可以创建新的题目，或者删除题目 6.填写班级 7.发布考核

后置条件：发布考核成功

（8）修改考核模块

用例名称：修改考核模块

用例标识编号：142

参与者：教师

简要说明：教师用来修改学生考核

前置条件：教师登录教学辅助系统

基本事件流： 1.教师登录系统 2.教师打开考核功能 3.点击修改考核 4.修改题目内容 5.也可以创建新的题目，或者删除题目 6.填写班级 7.重新发布考核

后置条件：发布考核成功

（9）批改考核模块

用例名称：批改考核模块

用例标识编号：143

参与者：教师

简要说明：教师用来批改学生考核

前置条件：教师登录教学辅助系统

基本事件流： 1.教师登录系统 2.教师打开考核批改功能 3.点击批改考核 4.打分，写考核评语 5.也可以重新修改分数和评语

后置条件：批改考核成功

（10）学生评价模块

用例名称：学生评价模块

用例标识编号：150

参与者：教师

简要说明：教师用来查看学生对课程的评价

前置条件：教师登录教学辅助系统

基本事件流： 1.教师登录系统 2.教师打开学生评价功能 3.点击学生评价 4.查看学生评价

后置条件：查看成功

3.2学生需求分析

学生登录后进行相关操作。查看课程公告，观看学习视频，写作业，修改作业，查看作业结果，考试、查看考试结果，查看自己的学习进度，学习资料的下载，课程评价，学生社区发表讨论，查看他人讨论。用例图如下：

（1）公告模块

用例名称：查看公告

用例标识编号：210

参与者：学生

简要说明：学生用来查看你公告

前置条件：学生登录教学辅助系统

基本事件流： 1.学生登录系统 2.学生打开公告功能.

后置条件：查看公告成功

（2）下载学习资料模块

用例名称：下载学习资料

用例标识编号：220

参与者：学生

简要说明：学生用来下载学习资料

前置条件：学生登录教学辅助系统

基本事件流： 1.学生登录系统 2.学生打开下载学习资料功能. 3.选择某个文件 4.下载

后置条件：下载学习资料成功

（3）写作业模块

用例名称：写作业

用例标识编号：231

参与者：学生

简要说明：学生用来写作业

前置条件：学生登录教学辅助系统

基本事件流： 1.学生登录系统 2.学生打开打开写作业功能 3.开始写作业 4.写完，提交

后置条件：写作业成功

（4）修改作业模块

用例名称：修改作业

用例标识编号：232

参与者：学生

简要说明：学生用来修改作业

前置条件：学生登录教学辅助系统

基本事件流： 1.学生登录系统 2.学生打开修改作业功能 3.开始修改作业 4.修改完，提交

后置条件：修改作业成功

（6）查看作业模块

用例名称：查看作业

用例标识编号：233

参与者：学生

简要说明：学生用来查看作业

前置条件：学生登录教学辅助系统

基本事件流： 1.学生登录系统 2.学生打开查看作业功能 3.查看作业

后置条件：查看作业成功

（7）写考核模块

用例名称：写考核

用例标识编号：241

参与者：学生

简要说明：学生用来写考核

前置条件：学生登录教学辅助系统

基本事件流： 1.学生登录系统 2.学生打开打开写考核功能 3.开始写考核 4.写完，提交

后置条件：写考核成功

（8）修改考核模块

用例名称：修改考核

用例标识编号：242

参与者：学生

简要说明：学生用来修改考核

前置条件：学生登录教学辅助系统

基本事件流： 1.学生登录系统 2.学生打开修改考核功能 3.开始修改考核 4.修改完，提交

后置条件：修改考核成功

（9）查看考核模块

用例名称：查看考核

用例标识编号：243

参与者：学生

简要说明：学生用来查看考核

前置条件：学生登录教学辅助系统

基本事件流： 1.学生登录系统 2.学生打开查看考核功能 3.查看考核

后置条件：查看考核成功

（10）课程评价模块

用例名称：查看课程评价

用例标识编号：250

参与者：学生

简要说明：学生用来课程评价

前置条件：学生登录教学辅助系统

基本事件流： 1.学生登录系统 2.学生打开课程评价 3.输入评价内容 4.提交

后置条件：提交课程评价成功

（11）观看学习视频模块

用例名称：观看学习视频

用例标识编号：260

参与者：学生

简要说明：学生用来观看学习视频

前置条件：学生登录教学辅助系统

基本事件流： 1.学生登录系统 2.学生打开观看章节内容 3.选择某节课/或者点击公告模块的继续观看 4.打开视频观看你

后置条件：观看学习视频成功

（12）创建讨论模块

用例名称：创建讨论

用例标识编号：271

参与者：学生

简要说明：学生用来创建讨论

前置条件：学生登录教学辅助系统

基本事件流： 1.学生登录系统 2.学生打开学生社区 3.点击创建讨论 4.输入标题和内容 5.发布

后置条件：创建讨论成功

（13）查看讨论模块

用例名称：查看讨论

用例标识编号：272

参与者：学生

简要说明：学生用来查看讨论

前置条件：学生登录教学辅助系统

基本事件流： 1.学生登录系统 2.学生打开学生社区 3.点击某个讨论

后置条件：查看讨论成功

（14）评论讨论模块

用例名称：评论讨论

用例标识编号：273

参与者：学生

简要说明：学生用来评论讨论

前置条件：学生登录教学辅助系统

基本事件流： 1.学生登录系统 2.学生打开学生社区 3.点击某个讨论 4.输入评论内容 5.点击发送

后置条件：评论讨论成功

3.3登录需求分析

可以用户密码登陆也可以二维码登录。用例图如下：

（1）账户密码登录模块

用例名称：账户密码登录

用例标识编号：310

参与者：学生

简要说明：学生用账户密码登录

前置条件：无

基本事件流： 学生输入账户密码 判断账户密码是否正确 错误，返回登录界面 成功进入下一个界面

后置条件：登录成功

（2）二维码登录模块

用例名称：二维码登录

用例标识编号：320

参与者：学生

简要说明：学生用二维码登录

前置条件：无

基本事件流： 1.扫描二维码 2.判断是否有该手机号在数据库 3.无，返回登录界面 4.有则进入下一个界面

后置条件：登录成功

• 教学辅助系统数据模型

 表一   评论表

 表二 讨论表

 表三  学生作业表

 表四  学生考核表

 表五   文件表

 表六   公告表

 表七   课程评价表

 表八   学生用户表

 表九   老师作业表

 表十   老师考核表

• 设计思路

5.1技术栈

后端：Spring+SringMVC+Mybaits+Springboot+tomcat+Maven+Mysql

前端：layui+jQuery+echarts

测试：Postman

5.2项目架构图

Database：顾名思义就是存放数据的地方，其实它与数据层是有个连接池，我并未画出

数据层：书写一些sql语句和执行一些sql语句的dao接口

业务层：简单理解就是执行你业务逻辑的地方，就是如何使用数据层的dao接口并返回数据或者不返回

控制层：接受页面传递过来的数据或者不传递，然后根据情况来使用业务层业务逻辑的方法，返回值或者跳转页面。

（使用了我原来博客的内容）

5.3教学辅助系统系统架构图

• 前端页面展示

这里只展示主要的一些页面设计

学生端：

登陆页面：

课程页面：

公告页面：

章节页面：

作业页面（考核页面相似不展示）：

学习资料页面：

课程评价页面：

学生社区展页面：

 

学习进度页面：

教师端：

发布公告页面：

上传资料：

     

创建作业（创建考核类似不展示）：

作业批改（考核批改类似不展示）：

学生的评价：

• 编码和主要功能说明

（对主要功能进行解析和代码截图，简单功能进行一个简单的阐述）

1. 二维码生成以及登录实现

这里我使用谷歌提供的二维码生成器的jar包（com.google.zxing）

然后对生成的图片增加返回的url（content），url前面为自己主机的ip（注意需要连接自己的热点然后查询自己的主机ip）在加上端口号填写需要返回页面的端口，访问此端口可以输入手机号并向后端传递手机号

 

如何在前端显示二维码，这里我选择了二进制文件流，向前端传递二进制编码，html来熏染整个二进制

通过ajax向后端发送请求生成二维码，然后回传二进制编码对img进行渲染

        2 .章节视频

点击要选择的章节进行观看视频，视频有个链接就可以跳转了。使用的是layui的树组件。

        3.做作业模块

首先要实现的动态表格，通过ajax请求向后端发送请求，返回一个作业的一个序列，然后每个序列添加一行作业。

当然作业有个属性mark批改过的将会标记，这样显示的不是做题而是查看

做题就比较简单，简单的一些更新操作。细节就在于做题时会在dotask表中的第一条数据，也就是第一个题目的数据行中的mark填写0标识，标明我做过这个作业。（其实0不太好，因为数据库选出空数据块向后端传递的时候显示的就是0，可以改进）

若mark标识为1，就显示的查看按钮，表示作业已经批改过。

        4.做考核模块

和做作业模块实现过程也差不多，只不过多了一个考核时间。考核时间到了之后，自动显示考试结束。这里展示一下时间截止的脚本。

        5.学习进度

这里我使用echars的组件，使用图标，环形图进行对学习进度的展示。Echarts我比较生疏，并没有后端传值动态生成，而是静态加载生成的。

展示部分echarts代码：

        6.学习资料

资料的上传和下载。我们这里先讲文件的下载，这里我们首先获得文件名，向后端传递文件名，后端查询整个文件在本地是否存在，存在我则设置文件的响应下载头，读取要下载的文件，保存到文件输入流，创建输出流，创建缓冲区，循环将输入流的内容读取到缓冲区中。这里需要注意的是我对下载头（文件名）进行了一个UTF-8的转码，防止乱码。

对于sprngboot来说我可以设置下载的大小这里我设置的是1000MB

文件上传，后端使用的是一个spring类型的一个类MultipartFile，代表HTML中form data方式上传的文件，包含二进制数据+文件名称。创建文件流，使用MultipartFile的方法transferto解析文件，其实这个方法封装了二进制文件流的传输，上传到本地文件。

前端我使用了layui的组件进行选择本地的一个文件。截取了部分图。

        7.课程评价

输入评价内容，提交后在输入框下面的列表添加一条评价。

还是使用了Ajax请求进行了传值。

获取内容，获取学生id，通过json格式向后端传值

        8.讨论区

数据库查询选出所有讨论，将每个讨论的内容的前150个字作为概要放在主页上。可以观看他人的讨论并进入，然后评论进行讨论，我这里没有选择评论他人的评论，因为讨论放在一级讨论就可以了。也可以创建讨论。

        9.公告模块

老师通过输入公告标题和公告内容进行公告的发布（比较简单），学生公告我选择没有弹窗而是选择放在学生页面的课程公告里，这里我选择对公告进行了日期由近到迟进行了排序（其实我认为没必要对日期进行排序，直接对id进行排序就行）

        10.作业的批改和打回

学生做作业的数据表的设计我才用了反范式的设计，这样会提高我代码编写的效率，和运行的效率，也就是我把学生的id和姓名、作业内容、答案、批语、分数都在一个表里，这样我不管是学生做作业、查看作业，老师改作业我都只要传递一个json格式的数据就行了，只不过有些数据我选择不将它显示到页面上来。

批改也只是一个数据的更新动作。

老师点开该学生的批改后，就会在学生的dotask表中的第一条数据的mark字段写入1，标明这个学生的作业在批改中。

作业的打回其实也比较简单，将mark改为0就行了。

        11.考核的批改

和作业批改一样不做多余的阐述。

        12.学生的评价

通过学生评价的数据返回一个list，进行一个展示，不显示学生的姓名。

        13.其他一些我编写的规则和标准

我制订了一个返回值的一个标准result类

有一些我可以通过返回result类里的code状态码进行判断，比如说我登录，错误我就会将code设置为400，前端判断状态码进行一个是否登录的判断在进行跳转，result类我则是进行一个Object类用来传递实体类，比如说学生类。

• 结论和体会

我发现我对个人项目实训学到很多比如二维码的实现，不过还是有遗憾的比如说直播的实现，其实我有些许了解大致就是推流就行直播。还有我在这次代码里其实我花在前端的时间比较多，学习了jQuery，使用了ajax进行传值。而且我查阅了许多资料，对web技术有了一个更深入的一个了解。