代码客栈-精品毕设论文源码资料分享

s
<
  1. JustNews首页
  2. 项目源码
  3. 其他源码

基于web的实验教学管理系统

代码小屋 • • 其他源码 • 阅读 1

基于web的实验教学管理系统 摘要： 实验教学管理系统基于B/S架构，它主要是为了满足从事这一行业的人获得加方便的沟通和管理而开发出来，系统是用java的一个轻量级JavaScript应用框架——Angular编写

本文包含相关资料包-----> 点击直达获取<-------

基于web的实验教学管理系统

摘要：

实验教学管理系统基于B/S架构，它主要是为了满足从事这一行业的人获得加方便的沟通和管理而开发出来。系统是用java的一个轻量级JavaScript应用框架——Angular编写。同时，本系统系统IntelliJ IDEA（后台）以及Visual Studio Code(前台)作为开发工具，以MySQL为后台数据库。本系统主要实现用户模块、统计模块、实验书模块、视频模块、增删改查模块、搜索模块和后台管理模块这七大功能模块。系统界面采用BootStrap框架搭建，简单易懂，便于操作。

关键词：实验教学管理，Angular，Java，MySQL，BootStrap

一、系统概述

1.1 项目研究背景和意义

随着学生教育步入数字信息化的时代，教育资源日益丰富，传统的线下教学和管理已经不能满足学生日益增长的实验室教学需求，网络化的实验教学管理普及及应用是当下发展的趋势，作为高校教育重要一环的实验室教学也变得愈发的重要起来。而学校实验教学管理的网络化能在一定程度解决实验室硬件设备使用紧张与学生的实验室使用需求问题。基于web的实验室管理系统也因此应运而生。有效的实验室教学管理系统能使学校实验室内的资源最大限度的利用并在一定程度上提高学校和教育机构的实验教学管理水平。

1.2 课题目的

实验教学管理管理系统的开发应当具备几个基本特性。一是系统应能与实验教学动态结合，系统管理员能结合实验教学所需对部分模块进行适当的增删改查。二是根据实际的教学需求，在同实际的实验室条件相结合的情况下，尽可能的同实验教学相适宜。三是尽量的精简，当下的软件行业，通用软件数不胜数，软件携带的功能也越来越臃肿，使使用者眼花缭乱。作为在传统教育行业所应用的实验教学管理系统应只为实验教学管理所服务，系统界面应当做到简洁、美观、操作便捷，在开发过程中同实验室老师及时沟通以及听取其意见以实现最适应的成果。

1.3 研究现状

当今社会，我国网络科学的技术水平正处于飞速发展的阶段，网络系统化的教学管理在教育的土壤生根发芽。传统的，通过纸质媒介以及黑板笔书进行的实验教学管理耗费的各种资源不但繁多，而且并不具备重复利用的特质。传统行业方法不但重复消耗老师以及管理人员的时间精力，也会使从事行业人员在重复性工作中消磨了工作热情。对于学习人员来说，不必把时间花费在寻找实验室以及记录实验的各种板书上，只需要通过实验教学管理系统下载老师发布的文件进行学习即可。

1.4 研究目标

深入理解课题内容，完成课题要求，实现实验教学管理系统的内容管理，目标包括但不限于实验、课程相关信息的编辑和发布；生成实验课程在在线网站上显示，并提供一个界面供后台管理；点击视频链链接后，可以播放链接视频。用户可以浏览管理员发布的视频、下载实验所用的实验书、并浏览相关的信息。具体的研究目标如下。

  • 某学期某门课程的实验项目录入、查询、修改。

  • 对开设的实验课程的电子版实验指导书提供下载。

  • 对某学期某学院开设的综合型、设计型、验证型实验数量的分类统计。

  • 实验示范视频演示。

  • 实验报告的收集。

  • 实验室及其他实验设备的信息管理。

  • 统计报表（如实验设备的折旧率统计，实验设备的报废年限统计，实验设备的分类统计等）。

二、相关技术介绍

2.1 Java

Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，避免了程序员直接操作内存地址空间的可能，减少规避空指针的异常。因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。

Java具有简单性、面向对象、分布性、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。Java可以编写桌面应用程序、web应用程序、分布式系统和嵌入式系统应用程序等。

2.2 Angular

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS 是一个javaScript框架。它是一个以 JavaScript 编写的库。它可通过 < script> 标签添加到HTML页面。

AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

2.3 MySQL数据库

原本是一个开放源码的关系数据库管理系统，原开发者为瑞典的MySQL AB公司，该公司于2008年被昇阳微系统（Sun Microsystems）收购。2009年，甲骨文公司（Oracle）收购昇阳微系统公司，MySQL成为Oracle旗下产品。

MySQL在过去由于性能高、成本低、可靠性好，已经成为最流行的开源数据库，因此被广泛地应用在Internet上的中小型网站中。随着MySQL的不断成熟，它也逐渐用于更多大规模网站和应用，比如维基百科、Google和Facebook等网站。非常流行的开源软件组合LAMP中的“M”指的就是MySQL。

2.4 Bootstrap

Bootstrap是美国公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、开发的简洁、直观、强悍的开发框架，使得Web开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言写成。Bootstrap一经推出后颇受欢迎，一直是上的热门开源项目，包括的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

2.5 IntelliJ IDEA

IDEA全称IntelliJ IDEA，是java编程语言开发的集成环境。IntelliJ在业界被公认为最好的java开发工具之一，尤其在智能代码助手、代码自动提示、重构、J2EE支持、各类版本工具(git、svn等) 、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能可以说是超常的。IDEA是JetBrains公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。它的旗舰版本还支持HTML，CSS，PHP，MySQL，Python等。免费版只支持Python等少数语言。

2.6 Visual Studio Code

Visual Studio Code是一个运行于 Mac OS X、和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。该编辑器也集成了所有一款现代编辑器所应该具备的特性，包括（syntax high lighting），可定制的热键绑定（customizable keyboard bindings），括号匹配（bracket matching）以及代码片段收集（snippets）。Somasegar 也告诉笔者这款编辑器也拥有对 Git 的开箱即用的支持。

三、需求分析

本章是需求分析在几个方面的主要探讨。主要包括了三个方面，首先，是该系统的开发环境，主要包括课题所用到的编程技术、使用到的数据库、操作系统；其次，介绍了该软件系统的可行性研究，主要包括技术、经济、操作等方面的可行性；最后，详细介绍了该软件系统的功能需求分析。

3.1 开发环境

  • 开发语言：Java

  • 数据库：MySQL

  • 开发工具: IntelliJ IDEA（后台）以及Visual Studio Code前台

  • 操作系统：手机、PC端

3.2 可行性研究

可行性的研究是为了这个课题在进入正式的开发设计之前，验证其可行性，主要从操作、时间、技术和经济这几个方面来评估该软件项目的可行性，如果研究结果为不可行，则停止研究，避免损失。如果研究结果可行，则继续深入研究，完成这个课题的研究，下面就操作、时间、技术和经济这几个方面的可行性做详细介绍。

技术可行性：该系统是基于WEB实验教学管理系统，所需实现的功能有用户登录、实验管理、课程的管理、设备统计等等，对这些功能的实现我有一定的时间经验，在所计划好的时间能顺利完成。

经济可行性：该系统是利用MySQL数据库来存储数据，用springboot集成的spring.jpa与spring.Hibernate建立与数据库的映射关系，它的出现去掉了本系统使用传统的SQL语句对数据库进行操作。开发软件用IntellijIDEA，服务器租借阿里云的学生服务器。在软件方面的成本上，不需要花钱买操作系统、数据库和软件开发工具。在硬件成本上来说，只需要一台装有JDK、maven、tomcat、IntellijIDEA和MySQL的电脑即可。而在人员使用的培训方面，实验教学管理系统面向的即使从事这一行业的人员，他们对于大部分的网站所共有的登录、注册、下载等功能应当是早已娴熟。甚至是自己曾开发过类似系统。人员培训上不用付出太多。

操作可行性：实验教学管理系统是一个在线的网站，使用的是当下最便捷的图形用户界面，界面上的内容简洁明了操作简单，只要根据文字等提示进行操作即可。另外当下是互联网时代，实验教学管理系统面向的用户就是是同计算机行业相关的老师以及预备从事这一行业的大学生，对于这些生活在互联网时代的人来说，实验教学管理系统操作十分友好。

社会环境：当下是互联网爆炸的时代，管理网络化系统化已经成了社会发展的方向，越来越多的机构以及个人希望通过互联网便捷自己的学习工作。对于教学人员，传统的通过纸质媒介以及黑板笔书进行的实验教学管理耗费的各种资源不但繁多而且并不具备重复利用的特质，传统行业方法不但重复消耗老师以及管理人员的时间精力，也会使从事行业人员在重复性工作中消磨了工作热情。对于学习人员来说，不必把时间花费在寻找实验室以及记录实验的各种板书上，只需要通过实验教学管理系统下载老师发布的文件进行学习即可。当下是国家大力推行教学信息化的互联网+时代，从政策以及时代发展上来看本系统的开发是可行的

分析结果：综合考虑技术、经济和操作的可行性及社会环境等因素，该系统的开发是可行的。

3.3 系统的功能需求

  • 实验教学管理系统分为前台和后端两个部分，以后台为主某学期某门课程的实验项目录入、查询、修改

  • 对开设的实验课程的电子版实验指导书提供下载

  • 对某学期某学院开设的综合型、设计型、验证型实验数量的分类统计

  • 实验示范视频演示

  • 实验报告的收集

  • 实验室及其他实验设备的信息管理

  • 统计报表（如实验设备的折旧率统计，实验设备的报废年限统计，实验设备的分类统计等）

总体设计

本章是对整个项目的总体设计以及数据库的设计。项目的总体设计是把整个项目划分成七个模块，以便于自身的详细开发，而数据库的设计则由概要设计和逻辑设计组成。

系统模块总体设计

系统模块的总体设计是按照由表及里的概念，把这个整的系统分解成若干个子模块，从子模块一一设计、开发、测试，最终组合成整体统一进行上述流程。

基于需求分析中的功能需求，即可对系统的整体进行模块分解，这样就能在详细开发的时候对系统有一个整体把握，也为软件发布以后的运维提供了很大的便捷。一般来说，软件的模块划分时和该模块在界面上的展示是有一定关系的，在表面上表现成同层次关系的功能，一般放在不同的模块，在界面上表示上下级关系的功能，一般被划分在同一个模块。

从实际的开发的角度考虑，可将本系统划分为用户模块、统计模块、实验书模块、视频模块、增删改查模块、搜索模块和后台管理模块七大功能模块，如下图所示：

图4-1 模块划分图

功能设计

用户管理模块

用户模块包括用户注册、登录、修改密码、修改信息等功能，用户进入实验管理系统主页后，如果想使用本系统进行操作，并且在此之前没有使用过本系统，则可以点击报名入口链接进行注册。注册账号界面要求用户填写邮箱、用户名和密码。注册主要用以登录页面填写真实的报名资料，当然也可以只注册而。注册后就可设置找回密码，通过将密码发送到注册时的电子邮箱中，从而对其进行修改。能进行实验项目的上传。

实验管理模块

①视频管理

对视频进行管理，视频是显示在系统前台的首页导航栏，管理员可进行增加、删除和修改。通过对视频文件的管理，前台首页的信息才能保证有足够的时效性。

②指导书管理

实验书模块是由老师本次实验所用的文字描述及要求模板，管理员根据所对应的学生实验进度增加删除实验书。用户通过所进行的实验获取实验书的下载。

3.5.3 设备管理模块

本模块包括了对实验室实验室各类设备的基本信息的录入和展示。

①用户可查看设备的使用情况和相关事项。

②管理员可以对设备信息进行增加、删除和修改操作。

③针对设备的使用情况等信息做报表展示。

3.5.4 课程管理模块

此统计功能能查看到此课程的详细信息，

①包括课名，实验项目，该实验的类型（设计、验证、综合）等信息增加、删除和修改操作。

②对各类信息整合之后通过图形显示。

15455

图4-3 联系人信息图

数据库设计

逻辑结构设计

E-R图中文全称就是实体-联系图，是描述现实客观世界的概念模型，它用实体、关系、属性三个基本概念概括了数据的基本结构，描述了静态数据的概念结构模式。实验教学管理系统的整体实体-联系图如图5-1所示：

图5-1 实验项目管理系统整体实体-联系图

图5—1对实验教学管理系统的功能以及运行过程进行了系统化的处理，并对整个的系统的数据库进行了全面的描述，下面是实验教学管理系统中一些重要的功能模块实体图。

管理员的实体图如图5-2所示：

图5-2管理员的实体图

用户相关的实体图如图5-3所示：

图5-3用户相关的实体图

实验项目的实体图如图5-4所示：

图5-4实验项目的实体图

视频咨询的实体图如图5-5所示：

图5-5视频咨询的实体图

课程信息的实体图如图5-6所示：

图5-6课程信息的实体图

数据库结构的实现

实验教学管理系统采用的是MySQL小型关系型数据库，在数据库管理系统中建立名为yjyks数据库，通过对系统各功能模块的详细分析对yjyks数据库设计了主要的数据表，其详细信息如下表所示：

表5-1 管理员（admin）

字段名 字段类型 字段长度 是否主键 是否唯一 描述
id int 11 是 是 管理员编号
name varchar 100 否 是 管理员姓名
pwd varchar 100 否 否 管理员密码
is_super smallint 6 否 否 管理员类型
addtime datetime 0 否 否 添加时间

表5-2 管理员登录日志（adminlog）

字段名 字段名 字段类型 字段长度 是否主键 是否唯一 描述
id int int 11 是 是 登录日志编号
admin_id int int 11 否 是 管理员id
ip varchar varchar 100 否 否 登录地所在ip
addtime datetime datetime 0 否 否 添加时间

表5-3 操作日志（oplog）

字段名 字段名 字段类型 字段长度 是否主键 是否唯一 描述
id int int 11 是 是 操作日志编号
admin_id int int 11 否 是 管理员id
ip varchar varchar 100 否 否 登录地所在ip
opdetail varchar varchar 600 否 否 操作详情
addtime datetime datetime 0 否 否 添加时间

表5-4 用户（user）

字段名 字段类型 字段长度 是否主键 是否唯一 描述
id int 11 是 是 用户编号
name varchar 100 否 否 用户姓名
pwd varchar 100 否 否 用户密码
gender smallint 1 否 否 用户性别
email varchar 100 否 是 用户邮箱
id_card varchar 18 否 是 用户身份证
phone varchar 11 否 是 用户手机
face varchar 255 否 否 用户照片
area varchar 200 否 否 用户所在地区
id_status smallint 1 否 否 身份证状态
addtime datetime 0 否 否 添加时间

表5-5 用户登录日志（userlog）

字段名 字段名 字段类型 字段长度 是否主键 是否唯一 是否唯一 描述
id id int 11 是 是 是 登录日志编号
user_id int int 11 否 否 是 用户id
ip varchar varchar 100 否 否 否 登录地所在ip
addtime datetime datetime 0 否 否 否 添加时间

表5-6 实验指导书（refbook）

字段名 字段类型 字段长度 是否主键 是否唯一 描述
id int 11 是 是 指导书编号
title varchar 100 否 否 指导书名称
pages int 11 否 否 页码
addtime datetime 0 否 否 添加时间

表5-7实验项目（tsubject）

字段名 字段类型 字段长度 是否主键 是否唯一 描述
id int 11 是 是 项目编号
subject varchar 100 否 是 名称
addtime datetime 0 否 否 添加时间

表5-8 设备信息（tinfo）

字段名 字段类型 字段长度 是否主键 是否唯一 描述
id int 11 是 是 信息编号
level_id int 11 否 否 年级编号
subject_id int 11 否 否 科室编号
t_time datetime 0 否 否 使用时间
area varchar 100 否 否 存放地点
examroom varchar 100 否 否 实验室
personnum int 11 否 否 使用人数
price float 10 否 否 设备价格
refbook_id int 11 否 否 指导书id
addtime datetime 0 否 否 添加时间

表5-9 课程信息（trinfo）

字段名 字段类型 字段长度 是否主键 是否唯一 描述
id int 11 是 是 课程编号
teacher_id int 11 否 否 教师编号
subject_id int 11 否 否 科目编号
num int 11 否 否 课程人数
status smallint 6 否 否 课程状态
addtime datetime 0 否 否 添加时间

表5-10 视频资讯（newsinfo）

字段名 字段类型 字段长度 是否主键 是否唯一 描述
id int 11 是 是 视频编号
title varchar 100 否 是 视频标题
content varchar 20000 否 否 视频内容
view_num int 11 否 否 视频浏览量
admin_id int 11 否 否 管理员id
newstag_id int 11 否 否 标签id
img varchar 300 否 否 视频图片
remark varchar 600 否 否 备注
addtime datetime 0 否 否 添加时间

四、详细设计

4.1 前台界面设计

前台重点应用了Angular7，angular是一款优秀的前端JS框架，已经被用于Google的多款产品当中，它是一个以 JavaScript 编写的库，Angular有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

关键代码：

python { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "yjybs": { "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "app", "schematics": {}, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/yjybs", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ "src/assets" ], "styles": [ "src/styles.css", "./node_modules/font-awesome/css/font-awesome.min.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css", "./node_modules/admin-lte/dist/css/adminlte.min.css", "./node_modules/ionicons/dist/css/ionicons.min.css", "./node_modules/admin-lte/dist/css/skins/_all-skins.min.css", "./src/assets/css/jquery-jvectormap.css" ], "scripts": [ "./node_modules/jquery/dist/jquery.min.js", "./node_modules/bootstrap/dist/js/bootstrap.min.js", "./src/assets/js/jquery.dataTables.min.js", "./src/assets/js/dataTables.bootstrap.min.js", "./src/assets/js/fastclick.js", "src/assets/js/jquery.sparkline.min.js", "src/assets/js/jquery-jvectormap-1.2.2.min.js", "src/assets/js/jquery-jvectormap-world-mill-en.js", "src/assets/js/Chart.min.js", "src/assets/js/dashboard2.js", "./src/assets/js/jquery.slimscroll.min.js", "./node_modules/admin-lte/dist/js/adminlte.min.js", "./src/assets/js/demo.js" ], "es5BrowserSupport": true }, }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "yjybs:build", "port": 9000, "proxyConfig": "proxy.conf.json" }, "configurations": { "production": { "browserTarget": "yjybs:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "yjybs:build" } }, } } } }, "defaultProject": "yjybs" }

图5-4 前台配置代码

4.1.1 前端首页

在系统的主界面上，主要是两个界面，1.登录界面 2.系统主界面。

界面如下图所示：

关键代码：

```html

Yjybs

```

这段代码为前台页面的主界面代码。其中重点应提一下 标签,此标签是angular框架标签，主要为了解决路由问题儿而产生，路由的作用就是建立URL路径和组件（页面，因为页面就是由组件构成）之间的对应关系，根据不同的URL路径匹配出相应的组件并渲染。从而不需要为显示不同页面内容而一一创建新的页面，其次更重要的是因为有路由的存在，浏览器才能实现前进和后退功能。

4.2 页面内容显示

对于页面显示内容的实现上，本系统并没有重新写一个新的后台管理页面，而是根据用户在登录时所使用的账号在与数据库作对比之后，取得该用户的身份权限，从而前台页面上的所有功能都会根据该登录账号的身份权限来改变自己的隐藏显示状态，从而实现系统对不同用户不同权限的区别对待。

关键代码如下：

(此时为管理员的权限时所显示的内容)

(此时为管理员的权限时所显示的内容)

这段代码关键是ngIf 标签，这个标签是angular框架自带的标签，作用是控制内容的显示与隐藏，从而在此系统中实现权限显示的控制。

4.3 指导书管理模块

在实验教学管理系统的主页面上，点击左侧导航栏的实验管理按钮，下拉框打开之后再点击指导书管理按钮，此时路由界面就会以列表的形式显示出所有指导书的情况，但是并无具体内容，界面如下：

界面代码如下：

```python

指导书列表

1-50/200
1-50/200
Folders

```

点击想要查看的指导书之后，路由界面会显示所选指导书的具体详细内容。

4.4 视频管理设计

在视频管理的设计与实现上，前端视频播放功能应用了youtube播放器，节省了自己写代码做播放器的时间。播放视频的流程为，后端服务器将视频从存储位置取出来，然后传给前端浏览器，页面在收到后端传来的视频之后，以为中间传输都是以二进制的形式，所以前端收到视频之后，先对二进制视频进行解析，解析完成后交给youtube播放器，这样播放成功，

代码如下：

```c++

183 
     <td>John Doe</td>
     <td>11-7-2014</td>
     <td><span >Approved</span></td>
     <td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
     <td >
      <div >
       <button type="button" data-toggle="modal" data-target="#myModal">查看</button>
       <button type="button" >替换</button>
       <button type="button" >删除</button>
      </div>
     </td>
    </tr>
   </table>
  </div>
  <!-- /.box-body -->
 </div>
 <!-- /.box -->
</div>

```

界面如下：

图5-9 视频界面

4.5 设备管理模块设计

设备管理模块分为两个部分，一部分是设备基本信息，另一部分是对设备等相关信息的一些统计报表显示模块。

第一部分：设备基本信息

界面截图如下：

目前界面主要显示的信息为设备的编号，存放的位置，设备信息的创建时间，对设备的简介及可以对设备信息采取的一些操作。

主要代码如下：

```c++

``` 第二部分：统计报表 界面如下： ![](https://www.writebug.com/myres/static/uploads/2022/4/15/addedece018590c887fcc50917456b90.writebug) 主要代码如下： ```c++
CPU Traffic 90 %
Likes 41,410
Sales 760
``` ## 4.6 课程管理模块设计 课程管理模块分为两大部分：图表和课程基本信息显示两大部分 图表部分：截图如下： ![](https://www.writebug.com/myres/static/uploads/2022/4/15/dbc2329735bc7f0d3168127417c976b9.writebug) 图表部分主要是对全部课程和教室或学生的统计与显示。 主要代码如下： ```c++
CPU Traffic 90 %
Likes 41,410
Sales 760
``` 课程基本信息部分主要是把所有的课程以列表的形式显示出来，管理员可对其没条信息做相关操作。 ## 4.7 登录模块设计 当用户在前端查看本系统网页时，以为系统配置了路由的原因，网站会自动跳转到登录界面。配置如下： ```c++ export const appRoutes = [ { path: '', redirectTo: 'login', pathMatch: 'full' }, { path: 'login', component: LoginPageComponent }, { path: 'welcome', component: WelcomePageComponent }, { path: 'main', component: MainPageComponent, children: [ { path: '', component: DefaultDisplayComponent }, { path: 'userManagement', component: UserManagementComponent }, { path: 'uploadManagement', component: UploadManagementComponent }, { path: 'chainManagement', component: ChainManagementComponent }, { path: 'experimentCrud', component: ExperimentCrudComponent }, { path: 'experimentGather', component: ExperimentRepotGatherComponent }, { path: 'className', component: ClassNameComponent }, { path: 'experimentName', component: ExperimentNameComponent }, { path: 'type', component: TypeComponent }, { path: 'instructorManagement', component: InstructorManagementComponent }, { path: 'baseMsg', component: BaseMsgComponent }, { path: 'numericalStatement', component: NumericalStatementComponent }, { path: 'chartDisplay', component: ChartDisplayComponent } ] }, { path: '**', component: MainPageComponent } ]; ``` 以上是路由的配置代码，此操作在前端完成。 界面如下： ![](https://www.writebug.com/myres/static/uploads/2022/4/15/74789f96ee06298ed60c495f645fc25c.writebug) 当用户输入完成账号密码之后，当点击Sign in 按钮之后，首先前台会对账号密码的格式进行验证，若格式不正确则会显示相应的提示信息，界面如图： ![](https://www.writebug.com/myres/static/uploads/2022/4/15/d7f882e11d82239d92dfae01845c77da.writebug) 若格式验证通过之后，则前端会将账号密码传给后端代码，后端controller层接收代码如下： ```c++ package app.controllers; import app.dtos.PromptMsgDto; import app.services.LoginService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; @RestController @RequestMapping(path = "/login") public class LoginController { @Autowired private LoginService loginService; /** * 登录验证 * @param accPasStr * @return */ @PostMapping(value = "/{accPasStr}") public PromptMsgDto login(@PathVariable(name = "accPasStr") String accPasStr) { String account = accPasStr.split("&")[0]; String password = accPasStr.split("&")[1]; return loginService.Login(account, password); } } ``` 做了相关前置操作之后controller层再传给service层，也就是我们常说的业务层。 ```c++ @Override public PromptMsgDto Login(String account, String password) { PromptMsgDto promptMsg =new PromptMsgDto(); if(loginRepo.login(account, password).size() == 0){ promptMsg.setMsgContent("账号或密码输入错误，请检查后重新输入！"); }else{ promptMsg.setMsgContent("验证通过"); } return promptMsg; } ``` Service层做完相关业务代码操作之后，会将信息传给repository层，代码：loginRepo.login(account, password)也就是这句代码，之后repository层将带着数据与数据库做对比，代码如下： ```c++ @Query(value = "select * from user where account = ?1 and password = ?2 ", nativeQuery = true) List login(String account, String password); ``` 做完对比之后，将结果逐层再返回出去。最后之后会将比对结果返回给前端代码，之后前端会做相应的操作。 ## 4.8 数据库相关 本系统采用mysql数据库，众所周知MySQL是一个关系型数据库，由瑞典MySQL AB 公司开发，目前属于旗下产品。MySQL 是最流行的之一，在 WEB 应用方面，MySQL是最好的(Relational Database Management System，关系数据库管理系统) 应用软件， MySQL是一种关系数据库管理系统，关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。 MySQL所使用的 SQL 语言是用于访问的最常用标准化语言。MySQL 软件采用了双授权政策，分为社区版和商业版，由于其体积小、速度快、总体拥有成本低，尤其是这一特点，一般中小型网站的开发都选择 MySQL 作为网站数据库。 由于其社区版的性能卓越，搭配和可组成良好的开发环境。 因此，基于以上所有mysql数据库的优势与特点，本系统选择了它。 数据库的创建代码： ```sql create database yjyks; use yjyks; create table admin( id int auto_increment,#管理员编号 name varchar(100),#管理员姓名 pwd varchar(100),#管理员密码 is_super varchar(100),#管理员类型 addtime datetime,#添加时间 primary key(id) ); create table adminlog( id int auto_increment,#登录日志编号 admin_id int,#管理员id ip varcahr(100),#登录地所在ip addtime datetime,#添加时间 primary key(id) ); create table oplog( id int auto_increment,#操作日志编号 admin_id varchar(5),#管理员id ip varcahr(100),#登录地所在ip opdetail varchar(600),#操作详情 addtime datetime,#添加时间 primary key(id) ); create table user( id int auto_increment,#用户编号 name varchar(100),#用户姓名 pwd varchar(30),#用户密码 gender smallint,#用户性别 email varchar(30),#用户邮箱 id_card varchar(18),#用户身份证 phone varchar(11),#用户手机 face varchar(255),#用户照片 area varchar(200),#用户所在地区 id_status smallint,#身份证状态 add_time datetime,#添加时间 primary key(id) ); create table user_log( id int auto_increment,#登录日志编号 user_id int,#用户id ip varchar(100),#登录地所在ip addtime datetime,#添加时间 primary key(id) ); create table ref_book( id int auto_increment,#指导书编号 title varchar(100),#指导书名称 pages int,#页码 addtime datetime,#添加时间 primary key(id) ); create table tsubject( id int auto_increment,#项目编号 subject varchar(100),#名称 addtime datetime,#添加时间 primary key(id) ); create table tinfo( id int auto_increment,#信息编号 level_id int,#年级编号 subject_id int,#科室编号 t_time datetime,#使用时间 area varchar(100),#存放地点 examroom varchar(100),#实验室 personnum int,#使用人数 price float,#设备价格 refbook_id int,#指导书id addtime datetime,#添加时间 primary key(id) ); create table trinfo( id int auto_increment,#课程编号 teacher_id int,#教师编号 subject_id int,#科目编号 num int,#课程人数 status varchar(10),#课程状态 addtime datetime,#添加时间 primary key(id) ); create table viosinfo( id int auto_increment,#视频编号 title varchar(100),#视频编号 contetn varchar(20000),#视频 view_num int,#视频浏览量 admin_id int,#管理员id newstag_id int,#标签id img varchar(300),#视频图片 remark varchar(600),#备注 addtime datetime,#添加时间 primary key(id) ); ``` 创建好数据库之后，将后端与数据库连接，测试畅通。 # 五、系统测试 ## 5.1 软件测试概述 在软件的代码编写完成之后并不意味着整个项目已经完成结束，对系统进行软件测试是一项必不可少的工序。软件测试即是在软件的正式发布之前对整个软件进行一些特定的操作，以此来发现一些在编写过程中尚未发现的错误，从而优化整个程序，增加整个系统的稳定性、健壮性。 一个成功的软件并不是埋头写出来的，而是通过无数个测试测出来的，对于实验教学管理系统这个课题，作为一个应用于学校，服务于老师学生的软件，更需要通过大量的测试，让系统更强健，减少因为用户输入问题而造成软件崩溃的概率。 目前软件测试方法主要是黑盒测试和白盒测试，白盒测试测试的主要是系统的内部结构，依照具体的编写代码，通过不同参数输入得到的结果来优化代码；而黑盒测试测试的是系统的整体结构，黑盒测试把整个系统当成一个不可拆分的整体，而不依照具体的代码，只通过输入特定参数之后得到的结果和预先设定的结果比较，如果一致，则证明该功能达到了需求分析时的要求，如果不一致，则需要继续修改代码，直到结果一致。 该系统主要是把白盒测试和黑盒测试结合起来使用。首先，通过黑盒测试，一个模块一个模块地去测试是否达到了需求分析时候提出的要求，如果没有达到，再用白盒测试对具体模块进行详细的测试，通过单步调试对系统内部代码进行测试。 ## 5.2 软件测试目的 软件测试的目的在于发现在开发过程中没有发现的软件缺陷，在得到测试结果后依照测试结果去优化软件、完善功能。通过设计详细且全面的测试用例，对软件系统进行反复的测试，去判定程序员开发的程序是否到达用户的需求。 该软件系统测试的目的主要在于增强系统的安全性，一些公司的机密不能泄露给别人；增加系统的稳定性，减少系统无故崩溃的概率，增强用户的体验感；完善UI设计，给用户呈现一个友好的UI界面。总之，就是站在用户的立场，去设计各种测试用例，预先解决一些在发布以后可能产生的问题。 ## 5.3 后台测试 后台测试的方法有很多，单元测试、单步调试、与前端集成测试等多种测试方法。 现在很多项目都要打包集成在容器中进行测试，那么就涉及到java后台代码的修改和打包之间的关系。通常我们只是修改了某几个类或者接口的情况下我们没必要执行一次打包脚本重新打包，我们可以将修改后编译的class文件直接拖到war包中的对应文件进行替换，删除缓存重启服务即可。如果只是简单的修改一些位置比如只是一些参数，自己没有必要测试的非功能性的问题，我们也可以将war包中的class直接拖到反编译工具（如gui）中进行修改 然后再拖回原处。 单元测试。其实这个是我们比较常用的测试方法，我们可以通过将方法参数，传入的数值进行模拟测试，以达到方法实现的功能。这个是比较简单的。 单步调试。单步调试也就是所谓的debug调试，这个调试方式非常方便，我们可以通过打断点以debug模式启动，对每一行代码的取值传值进行验证。新手建议一定要学会这种调试方式，因为新手经常问的问题范围都很广，不是你的同事一般很难一眼就能确认问题的根源，所以新手自己一定要学会定位问题，把问题定位在某一行或者某几行，是什么类型的问题空指针？越界？类找不到等问题。 我们一般测试是通过打包扔到容器中进行测试，当程序报错很多朋友第一时间回去看控制台，其实控制台提供的错误提示都是比较宽泛的，不够具体只是一个错误类型，当我们看控制台无法解决错误时，我们应该去容器中拿你执行时加载整个过程的日志，这个里边一般报错信息，比如sql取值都是可以拿到的，这样找的问题是比较清晰的也比较容易解决。 登录测试为例： 首先确定基本功能测试点： - 输入正确的用户名和密码登录成功 - 输入错误的用户名密码登录失败 - 用户名正确，密码错误，是否提示输入密码错误？ - 用户名错误，密码正常，是否提示输入用户名错误？ - 用户名和密码都错误，是否有相应提示？ - 用户名密码为空时，是否有相应提示？ - 如果用户未注册，提示请先注册，然后进行登录 - 已经注销的用户登录失败，提示信息友好？ - 密码框是否加密显示？ - 用户名是否支持中文、特殊字符？ - 用户名是否有长度限制？ - 密码是否支持中文，特殊字符？ - 密码是否有长度限制？ - 密码是否区分大小写？ - 密码为一些简单常用字符串时，是否提示修改？如：123456 - 密码存储方式？是否加密？ - 登录功能是否需要输入验证码？ - 验证码有效时间？ - 验证码输入错误，登录失败，提示信息是否友好？ - 输入过期的验证能否登录成功？ - 验证码是否容易识别？ - 验证码换一张功能是否可用？点击验证码图片是否可以更换验证码？ - 用户体系：比如系统分普通用户、高级用户，不同用户登录系统后可的权限不同。 - 如果使用第三方账号(QQ,微博账号)登录，那么第三方账号与本系统的账号体系对应关系如何保存？首次登录需要极权等。 页面测试： - 登录页面显示是否正常？文字和图片能否正常显示，相应的提示信息是否正确，按钮的设置和排列是否正常，页面是否简洁壮观等。 - 页面默认焦点是否定位在用户名的输入框中 - 首次登录时相应的输入框是否为空？或者如果有默认文案，当点击输入框时默认方案是否消失？ - 相应的按钮如登录、重置等，是否可用;页面的前进、后退、刷新按钮是否可用？ - 快捷键Tab,Esc,Enter 等，能否控制使用 - 兼容性测试：不同浏览器，不同操作系统，不同分辨率下界面是否正常 安全测试 - 不登录：浏览器中直接输入登录后的地址，看是否可以直接进入 - 登录成功后生成的Cookie，是否是httponly (否则容易被脚本盗取) - 用户名和密码是否通过加密的方式，发送给Web服务器 - 用户名和密码的验证，应该是用服务器端验证， 而不能单单是在客户端用javascript验证 - 用户名和密码的输入框，应该屏蔽SQL 注入攻击 - 用户名和密码的的输入框，应该禁止输入脚本 （防止XSS攻击） - 错误登陆的次数限制（防止暴力破解） - 考虑是否支持多用户在同一机器上登录； - 考虑一用户在多台机器上登录 性能测试 - 单用户登录系统的响应时间是否符合"3-5-8"原则 - 用户数在临界点时并发登录是否还能符合"3-5-8"原则 - 压力：大量并发用户登录，系统的响应时间是多少？系统会出现宕机、内存泄露、cpu饱和、无法登录吗? - 稳定性： 系统能否处理并发用户数在临界点以内连续登录N个时的场景？ 编写测试配置 - 首先在pom.xml文件导入测试依赖 ```c++ org.springframework.boot spring-boot-starter-test test ``` 编写测试类与代码 ```c++ package app; import app.controllers.LoginController; import app.dtos.PromptMsgDto; import org.junit.Assert; import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import org.springframework.test.context.junit4.SpringRunner; @RunWith(SpringRunner.class) @SpringBootTest public class LoginControllerTest { @Autowired private LoginController loginController; /** * 登录接口测试 */ @Test public void loginTest() { //设置期盼的返回结果 PromptMsgDto promptMsg =new PromptMsgDto(); promptMsg.setMsgContent("验证通过"); //接口返回与期盼结果做对比 Assert.assertEquals(promptMsg.toString(),loginController.login(("1021031476@qq.com&123456")).toString()); } } ``` 测试结果控制台输出 ![](https://www.writebug.com/myres/static/uploads/2022/4/15/b8e09ac9376d70a7be3115d4508bf5f3.writebug) # 六、总结与展望 ## 6.1 总结 本篇论文首先探讨了基于web的实验教学管理系统存在的必要性，并分析了社会背景对我开始研发web的实验教学管理系统的推动作用。接下来，我将软件剖析，将每一个功能详细的解释给了文章的读者，并解释了每一个功能模块存在的理由。然后，我从多个角度诠释了本软件的研发过程与代码设计。最后，我将软件设计最重要的部分：“测试”这一过程详细的解释给了读者,并证明了本软件的可操作性与现实性。 web的实验教学管理系统开发的毕业设计并非是我参与设计的第一个软件，但是确实是我独自一人完成的第一个作品。通过这次的学习经历，我对一个整体的项目开发有了全新的认识，感谢学校的老师与企业的师傅在我完成这项作品中的谆谆教诲与细心指导，如果没有他们，我将会耗费大量的时间在不必要的岔路上摸爬滚打，也无法完成现在这样的一件毕业作品。 从大二，我们专业开设Java课程开始，我就对Java产生了浓厚的兴趣，到大三我们专业课设JavaEE的课程，我就决定大学毕业一定要做一名Java程序员，再到后来自学Android知识，因为我有较好的Java基础知识，所以学习Android知识的过程还是比较顺利，然后渐渐地迷上了Android开发，我以为这样就可以做好一名称职的Android开发程序员，直到经过这次毕业设计，我才真正认识到自己是多么的无知，自己学到的知识就像一个圆圈，未知的知识就像圆外面接触的面积，当学到的越多，圆越大，未知的知识也就越多，我知道，我未来在IT领域需要走的路还很长。 该系统是一个基于学校教学需求完成的软件，根据老师与同学们种样繁多的客观需求，进行归纳，总结，概括；完成功能的细致划分；然后完成软件的详细设计；再进行软件的重复测试；最后交给教师和学生，在校园中使用。这个软件的目的是帮助老师，为老师营造一个轻松的教学氛围，同时让同学学的开心，学的省心，避免与节省大量浪费时间的无用工作。 经过这次毕业设计，让我对自身有了一个更好的定位，特别是在开发商用软件的时候，考虑的需要更全面一些，不能只要求实现功能而已，还要去关注界面的美观、代码的健壮性、系统的稳定性等。在开发的过程中还遇到了很多问题，这也教会了我一个学习的方法，当遇到不知道的时候，就去网上找相关的资料，然后去解决它，这样就学会了解决类似的问题，等完成功能以后，再整理解决的方法，以供下次遇到同样的问题时可以节约大量的时间，提高效率。 最后，我将这份诚挚的谢意献给我的指导老师和其他在毕业设计过程中给予我帮助的人，是在他们的帮助下，我才能完成整个软件系统的开发。 ## 6.2 展望 本系统设计之初，便是想要做设计并开发一个界面美观、功能齐全、技术新颖的基于web的实验教学管理系统。需求分析时，不仅要考虑系统功能的丰富度，还要保证完整度，除此之外还要考虑工时的问题，所以无论需求分析得到的分析结果有多么丰富，也要根据可用工时进行适当的调整，同时保证系统功能的完整性。系统的设计UI设计也要美观，因为UI设计是用户的第一感受。 对于WEB系统程序员可以分为前端程序员和后端程序员，现在的WEB开发大多都是前后端分离的，前端开发与后端开发所需要学习和掌握的只是都是非常不同的，但是两者在开发时都需要为对方做考虑，同时也要共同维护、遵守两者共同建立的前后端之间的通信方式、协议等。前端开发不仅仅需要掌握相关的技术，还需要从使用者的角度考虑，设计出符合大众审美的UI界面，同时页面的交互也要足够的人性化，符合使用者的使用习惯。现在的开发环境与以前相比已经越来越开放了，越来越多的开源产品、技术、组件被发布，他们都有着官方的使用文档，极大的帮助了初学者的学习。本系统采用的组件库Ant-Design-Vue就极大地减少了于前端UI框架设计所耗费的人力成本，使我在较短时间内就可以设计并开发出样式精美、交互流畅的前端UI界面。 对于系统的相关技术，一方面大学期间老师课上讲的spirng开源框架是一个及其强大且容易使用的开源框架，另一方面考虑到实验教学管理系统作为一个轻量级的web项目，spring对轻量级的系统支持也是很成功，所以系统最终选择了spring。 然后就是系统的视频模块，开发中遇见了传输，编码，存储等多方面的问题，之前也是没有做过相关的代码，所以对本系统来说，最大的难点就是视频模块，虽然在学校的学习中未曾接触过这一方向的相关知识，但是作为一个程序员，不断的尝试、不断的学习更多方向的知识，可以在以后的编程思想、以后的产品需求选择采用的技术时可以有更多的思考与选择。 设计和开发本系统的过程，让我对这些框架、组件、工具有了更进一步的掌握。虽然选用了这么多自身不熟悉的技术，但好在他们大多都是开源的，且官方有详细的说明文档、用例参照等，可以更好的帮助我进行学习和开发系统。本次设计开发的不足之处是由于时间的限制，在需求分析时舍弃了可配置化的相关内容。 总而言之，通过这次让我印象深刻的毕业实践，我将大学四年所学会的知识融会贯通，并借助多方面的助力，一点一滴，一砖一瓦的成功完成了这样一份属于自己的作品。这份夹杂着汗水，泪水与欢笑的设计承载了我自己的努力与亲朋好友们的好意，也让我受益良多。说实话，我为这样的成就而自豪。但是我知道，我所知所学所应用都的只是沧海一粟，而我在未来的学习，工作中要探索的是浩瀚无垠的整片宇宙。 毕业并不是结束，而是新的开始。我学习的尽头是星辰大海，我求知的步伐将永无止尽。在未来的日子里，我将时刻记住我所学的，我所用的，我所磨砺的，以母校为荣，以老师为自己的榜样，踏上一步又一步的，遥远的征途。 # 七、致 谢 怀着在大学四年间所学所习，所感所悟，凭着恩师，朋友，亲人的鼎力相助，历时半年，我终于完成了这篇毕业论文的最后一段。在松了一口气的同时，一股复杂而又难以言喻的情感在一瞬间涌上了我的心头。 也许是感慨吧，感慨四年时光匆匆流水，我终究学有所成；也或许是感动，感动于师长朋友的帮助，与我一同为本科生涯画上了一个完美的句号；又或许是悲伤，悲伤很快就要离开承载了四年欢笑，泪水，与回忆的校园；甚至是迷惘，迷惘未来路在何方，迷惘自己浅薄的学识能否让自己去追逐自己的梦想。 可是，我最想要表达的感情，是感激。 在这最后的最后，我想感激的实在太多。首先，我想要感谢的是我的论文指导老师，郭煦老师。他不仅是我的论文指导老师，是我大学间四年的学业指导老师，也是我亦师亦友的指路明灯。在大学生活中的最后一里路中，他详细的为我理清课题的思路，时刻关心我课题进度。在我提交了各个部分的文档材料后，针对我的不足也严格，谨慎，耐心的给我提出修改意见。有言道，桃李不言，下自成蹊。郭老师正是这样一位无私奉献的优秀的老师。然后，我要感谢的实习过程中部门的师傅们。即使自己工作是那么的繁忙，他们仍会细心的抽出时间，给我的程序提出他们看法，解决我在开发过程中遇到的难题。我也要感谢我的朋友，在我遇到接连不断地困难和问题时，会鼓励我，和我一同解决和探讨，让我依旧保持着努力探索的心。最后，我也想感谢我自己，感谢自己虽无数次想要放弃但是仍然坚持了下来，感谢自己将四年的积蓄的锋芒打磨成了这一把锋利的宝剑。 未来的路还很长，这一里程碑式的论文将成为我人生重要的基石。从今往后，我将站在这一块基石之上，不断向上向前，奋发图强，并将在这篇论文中的所见所学深深的烙在灵魂的深处，将其作为一生宝贵的财富。 四年前，有一个少年，怀着希望和憧憬，携着期待与梦想，步入了大学的校园；四年后，有一个少年，抱着满腹的抱负与梦想，望着明日的迷茫与惆怅，很快就要离开他亲爱的母校了。 小荷才露尖尖角，早有蜻蜓立上头。这个夏天注定将是不一样的夏天，这一年也注定将是不平凡的一年。感谢我所经历的一切，感谢我失去的，我拥有的，感谢赠予我的，离开我的。我将以这个夏天作为终点，也将以这个夏天作为起点，踏上新的征途，走向新的人生。
设备编号 存放位置 创建时间 使用状态 设备简介 操作
183 一号楼 11-7-2014 空闲 Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.

参考文献

  • 基于Web Services的学生数据共享的研究（东北大学·杨川）
  • 高校实验教学管理系统的设计与实现（电子科技大学·陈爱霞）
  • 基于.NET的Web Service技术应用（华中师范大学·赵生翼）
  • 基于WEB的高校实验资源申报管理系统的设计与实现（电子科技大学·刘亮亮）
  • 中等职业学校实验教学管理系统的设计与实现（山东大学·刘太艳）
  • 基于Web Services的学生数据共享的研究（东北大学·杨川）
  • 基于.NET的实验室教学管理平台的建模与实现（北京化工大学·刘玉华）
  • 高校设计型实验管理平台的设计与实现（厦门大学·杰恩斯·玉素甫）
  • 高校实验教学管理平台的设计与实现（云南大学·舒家赋）
  • 基于.NET技术的实验教学管理系统设计与实现（吉林大学·刘静）
  • 基于.Net和Ajax技术的实验教学管理系统的设计和实现（苏州大学·周骏）
  • 高校实验教学管理系统的设计与实现（电子科技大学·陈爱霞）
  • 基于.NET的实验室教学管理平台的建模与实现（北京化工大学·刘玉华）
  • 基于J2EE技术的实验教学管理系统的设计与实现（山东大学·肖建东）
  • 实验课教学信息管理系统的设计与实现（吉林大学·胡洋）

本文内容包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主题。发布者：代码小屋 ，原文地址：https://m.bishedaima.com/yuanma/35976.html

资源下载

本站所有项目都经过严格测试,直连告诉下载项目包, 毕设课设定制需求, 点此提交表单
代码都经过了认真的调试,不免费哦 联系QQ2625289483 更多资料关注公号: 大学生学习圈

相关推荐

发表回复

登录后才能评论