如何使用ssm实现教材管理系统+vue

247 篇文章 0 订阅
144 篇文章 1 订阅

@TOC

ssm637教材管理系统+vue

第1章 绪论

1.1研究背景

近年来,第三产业发展非常迅速,诸如计算机服务、旅游、娱乐、体育等服务行业,对整个社会的经济建设起到了极大地促进作用,这一点是毋庸置疑的。现下,国家也出台了一些列的政策来支持和鼓励第三服务产业的发展与完善,用以带动社会经济的发展[1]。所以,整体来说,国家是比较提倡发展第三方服务行业的。纵观计算机领域的整个发展历程,从计算机的诞生到现在,已经有几百年的历史了,计算机应用技术也逐步趋于成熟,并且相关的设计人员也在不断地对其进行改进和完善。再到如今,计算机已经发展成为一个比较热门的行业了。在高校中,计算机、人工智能等专业热度非常高,许多学生在选择专业的时候,大都优先考虑计算机专业。在社会上,计算机类行业也成为了比较受欢迎的行业,从在浏览器中访问的网址,到手机上的各种应用程序,到大型的软件服务设备,基本上都离不开计算机技术支持,以及硬件的支撑。

如今,互联网几乎遍布于世界的各个角落,人工智能、大数据占据的越来越重要的社会地位,比如疫情期间,通过大数据技术进行筛查,确定哪些人员无接触史,哪些人员需要重点观察,由此可以在极短的时间内,以最快的速度对疫情进行防控。在这个大背景环境的推动下,本人通过学习Java语言、MySQL数据库、SSM框架等相关的计算机技术,打好坚实的技术基础,方便后期对系统进行研发。而后再通过对系统进行分析,确定系统的总体功能需求,以及实现的可能性,方便接下来详细地设计相关的功能模块,最后成功的研发了一款基于SSM的教材管理系统。本系统改善了传统的管理模式,将原先的手工记录和管理信息,改进为使用计算机存储和管理信息记录,极大地方便了工作人员对相关数据进行处理,为学校节约了不少的员工费用和管理开销,并且能够在较短的时间内响应用户的需求,这种便捷的操作,对于用户来说可以节省了不少时间和精力,也省去了不少的麻烦,极大了方便了用户。

1.2研究意义

传统的教材管理模式,主要是以人力为主进行管理和控制,由工作人员负责登记用户信息,再通过对照之前的信息记录,确定是否给用户提供相关的使用需求,以及如何提供能让用户满意的使用需求。这种管理模式已经适应不了时代的变化了,正在不断地走下坡路,并且逐步被信息化管理模式所取代。所谓的信息化管理模式,是现在主流的一种管理模式,其通过与计算机技术相结合的方式,对行业的整个工作模式和服务流程进行改进和完善。其主要通过使用计算机等设备,将工作服务流程电子化,并且进行存储记录,用以提高行业整体的服务水平。结合使用计算机技术,本人研发出一款基于SSM的教材管理系统,采用电子化的方式对数据信息进行存储,便于工作人员对相关信息进行记录和管理,有利于提高学校的工作运营效率以及工作人员的管理速度,以此更好的满足用户的相关需求,最终达到提升用户的使用感受的目的,由此可见设计和实现本系统具有重要的意义和价值。

1.3国内外研究现状

1.3.1国外研究现状

美国是最先发展计算机技术的众多国家之一,早在上个世纪,美国就快速的将计算机技术发展起来,并且将其运用在军事、医院、学校、社会服务等场所。日本、德国等国家紧随其后,不断地发展和完善计算机技术,侧重将医疗、社会服务等领域与计算机技术相结合[2]。而后随着社会的发展与进步,计算机技术逐渐趋于成熟。许多发达国家在探索将计算机技术应用于各行各业中时,从另一个角度来看,也在不断地推进学校的信息化管理进程,使得学校管理也变得更加网络化、信息化了。有许多专家表示,可以结合使用图像处理软件、人工智能技术等相关工具,深度地分析学校管理系统,主要从简化运行操作,加设功能模块,美化系统界面,保障数据安全等方面,更深层次地提升和优化系统,并且尽可能地在理想状态下做到实时的信息共享。

1.3.2国内研究现状

国内的计算机技术的发展虽然晚于国外,尤其是美国、英国、德国等发达国家。但是我国的计算机技术发展势头非常迅猛,近些年,也逐渐走向成熟和完善的阶段。现在,选择网上购物已经成为人们日常生活的一种常态趋势,当然这也离不开对于天猫、支付宝、微信等应用软件的使用[3]。许多企业结合使用了云计算、人工智能等先进的计算机技术,自主研发了行业相关的信息管理系统,计算机技术逐渐趋于成熟,使用设计的功能逐渐趋于完备。结合计算机技术,采用主流的B/S开发结构模式开发一款基于SSM的教材管理系统。由此,本系统能够支持工作人员随时随地的通过使用浏览器进行访问操作,支持随时随地对相关的教材进行管理,便于及时为用户提供一定的功能服务。并且所设计的系统基本上能够符合用户的客观使用需求,有利于充分协调学校的人力、财力、物力等资源,不断提高学校管理质量和水平[4]。

1.4研究内容与方法

1.4.1研究内容

本文首先介绍了教材管理系统的研究背景与意义,其次介绍了系统的总体功能设计,接着将对系统规划好的总体功能拆分成了各个功能子模块,然后详细地对每一个小的功能子模块进行设计,最后介绍了展示设计好的功能模块以及测试结果。系统主要分为管理员角色和用户角色,具体的功能设计包括注册登录管理、用户信息管理、教材信息管理、学生申请管理等模块。注册登录管理功能是新用户在使用系统前,需要通过注册步骤,登记详细的信息资料,而后再通过输入正确的账号和密码,成功登录系统后,即可通过一系列的操作来满足自己的相关需求。用户信息管理功能是管理相关的用户信息资料,管理人员根据现实情况的需要,选择性的对用户信息记录进行更新处理。教材信息管理是管理相关的教材信息记录,保存详情的教材信息情况,方便及时响应用户的服务请求。学生申请管理是管理相关的学生申请信息记录,方便相关人员及时查看学生申请信息,如果遇到异常的申请信息,可以及时对其进行处理,在较短的时间内解决问题,提高用户的使用体验。

1.4.2研究方法

本系统以B/S结构进行实现,通过使用idea工具编写相关的java代码,设计系统功能模块,再通过MySQL数据库管控数据资源,由此有利于对系统相关数据进行必要的管理和控制。系统设计的最关键的环节,则是需要通过SSM框架设计系统功能架构,再通过Tomcat服务器将系统发布到浏览器上,以便相关用户的操作和使用。本系统的设计和实现促进了学校的信息化建设,有利于简化相关人员工作流程,提高工作效率,提升工作幸福感。

1.5论文的组织结构

基于SSM的教材管理系统的设计与实现的论文组织安排,大致可以被分为七个章节,具体的内容如下:

第一章为绪论,本章主要介绍了系统的背景、现状、方法等内容。根据研究背景与意义,介绍所要设计的系统的研究背景和理论依据,再通过国内外研究现状,了解当前相关的系统软件产品的实际研究情况,最后通过研究内容与方法,总体概括系统的整个开发流程和实现步骤,为系统提供可靠的理论依据和技术支持。

第二章为相关技术介绍,本章主要介绍了开发所使用的相关技术。本系统主要使用的开发技术包括Java语言、SSM框架、MySQL数据库等,并且所使用的开发模式为B/S结构。其中,Java语言具有跨平台性,可移植性高,可以支持在不同的浏览器上运行本系统,MySQL数据库占用内存少,执行速度快,对于中小型系统的数据管理是非常好的选择。

第三章为系统分析,系统分析阶段主要是对系统进行需求和可行性分析,规划系统的功能设计,判断系统实现的可能性。根据需求分析,确认使用者对系统的基本功能需求,再通过在经济、操作、法律上进行可行性分析,分析系统研发的实际意义和使用价值,系统性能的稳定性和功能操作的便捷性,以及成功投入市场的可能性。

第四章为系统设计,系统设计阶段主要是对系统进行总体功能和数据库设计。通过介绍系统的总体功能设计,总体规划系统的功能模块,为系统的基本功能实现提供参考依据和设计思路。再通过介绍数据库设计,设计相关的数据二维表格存放和管理与系统有关的数据信息,便于相关人员管理与系统有关的数据信息,维护和更新数据信息的安全。

第五章为系统实现,系统实现阶段主要是对教材信息管理、学生申请管理等功能模块进行阐述。通过前面介绍的系统分析,功能及数据库设计等相关内容,详细地实现系统功能模块。系统的具体实现步骤,就是对各子模块详细设计的过程,在整个系统设计过程中,这一阶段是极为重要,直接关系到用户对系统的使用感受。

第六章为系统测试,本章主要是对测试相关的内容进行叙述。本系统主要使用功能测试的方法,检查测验系统主要功能,测试所设计的系统功能模块能否正常打开,并且用户能够正常操作和使用,在系统运行过程中是否发生异常,如运行异常、数据异常、结果异常等,并且根据测试结果,给出相应的测试总结,由此得出相关结论,说明系统是否达到预期要求、设计目的。

第2章 开发技术介绍

2.1 B/S结构

就软件开发的现状而言,目前主要使用的系统开发结构模式大致可以分为C/S模式和B/S模式[5]。用户在使用基于C/S模式开发的系统时,必须下载相应的客户端,即应用程序,才能操作和使用软件系统的相关功能模块。从使用者的角度来看,由于下载和安装客户端的步骤比较繁琐,期间还需要确保下载网速的稳定性,以及安装步骤的正确性,进而增加了用户放弃使用该系统的可能性,由此可见C/S模式具有很大的局限性。

由于C/S模式适用于小范围的局域网,并且具有一定的通信效率,所以在以前系统规模很小的时代,主要使用C/S模式对系统开发。随着时代地发展以及社会地进步,C/S模式也越来越满足不了开发者的设计需要,以及使用者的使用需求[6]。当下,C/S模式已经满足不了实际的系统程序设计要求,由此,B/S模式以C/S模式为基础而被提出,并且在近些年逐渐发展成为主流的开发结构模式。在B/S模式下开发的系统,不再需要用户下载和安装相应的应用程序,直接通过使用浏览器,输入正确的网站地址,以访问网站的形式实现系统的相关功能操作,这一特点对C/S模式下的开发设计做出了极大地改进,当然,使用本系统的前提是确保账号和密码是合法的。

2.2 Java语言

Java语言是一种将数据和操作方法封装成对象整体的程序设计语言,它拥有着优秀的技术体系结构。目前在市场上,很大一部分的应用系统主要使用Java语言进行开发[7]。Java语言具有简单易懂,操作方便,健壮性强等优点,开发人员能够的在短时间内理解和掌握Java语言,并将其运用到具体的系统开发过程中学。针对于系统内存管理问题,Java语言为解决这类问题,内部提供了垃圾回收机制。为了极大地简化了开发编程的难易程度,Java语言还将C语言中的指针,改进成了引用,所以受到了很多开发人员的喜爱。Java语言还具有跨平台性的特点,意味着它的可移植性非常高,这一特点有利于开发人员更新和维护相关代码,由它所开发的系统可以支持在不同的浏览器中打开。因为使用Java开发的系统兼容性较强,代码通用性较高,为了后期方便对系统进行完善和维护,所以本人最终选择使用Java语言开发本系统。

2.3 SSM框架

SSM框架主要由Spring、SpringMVC、MyBatis这三个框架所集成的,是现在比较流行的一种Java开发框架,能够适用于大中型的应用程序的设计和搭建。Spring是前几十年前兴起的一种轻量级的、开源的Java开发框架,使用它可以解决相关的系统对象创建和对象依赖问题,并且也可以将高耦合的系统分解为低耦合的多个功能模块,方便对系统模块进行明确的分工,对功能代码进行理解和修改,这就极大地减轻了设计人员的开发压力[8]。SpringMVC框架是基于Spring框架而被提出的,它以MVC三层架构为核心,对Spring的相关技术进行了整合,主要针对于Web端进行技术架构,通过对相关的请求处理进行细化处理,对相关的用户请求做出一定的响应处理。MyBatis框架是一种开源的Java持久层框架,它主要是通过改进手动设置参数和获取结果记录的方式,通过支持对数据库进行存储过程、高级映射等处理,使得数据库的操作更加定制化、透明化,因此降低了数据库访问的复杂性,提高了开发的工作效率。

2.4 MySQL数据库

MySQL数据库是一种使用频繁的关系型数据库。因为其具有开源免费、占用内存少、安装简单、操作便捷、使用灵活等优点,所以经常被运用于中小型的系统开发中[9]。MySQL数据库可以支持多线程,在同一个时间内,能够同时响应多个用户的使用需求。MySQL数据库还自带了优化器,方便设计人员在 使用过程中,快速的查询相关的数据信息。除此之外,SQLServer数据库在当下也是使用比较频繁的,它在数据安全、系统稳定等方面还是比有所保障,但是由于其收费使用、占用内存大、操作复杂、维护成本高, 一般适用于中型及以上的系统开发中。MySQL数据库也有着许多的应用程序接口,以供相关的编程语言使用,编写的代码具有极高的通用性和维护性,并且MySQL数据库能够迅速的处理上千条数据记录,在系统故发生障时,能通过日志文件快速恢复。MySQL数据库与SQLServer数据库相比较,综合考虑成本开销、占存大小、代码通用、数据维护、操作难易程度等方面,MySQL数据库占有很大的优势,在数据库设计人员的眼中,MySQL数据库的实际运用价值极高。

第3章 系统分析

3.1系统的需求分析

需求分析阶段是设计系统功能模块的总方向,可以这样来说,系统的整个的开发流程以及设计进度,基本上都是以需求分析为基本依据的[10]。需求分析阶段可以确定系统的基本功能设计,以及在最后的系统验收阶段,再通过对需求分析报告进行对比,验证系统的功能设计是否合理,能否满足用户的基本需要,最终判断总结系统是否成功现实。本文主要通过问卷调查的方式,来分析教材管理系统所需要的相关功能[11]。根据调查结果显示,系统用户主要有两种类型,一种是以使用为主要目的的用户角色类型,另一种是以管理为主要目的的管理员角色类型。本系统主要功能需求包括教材信息管理、学生申请管理等模块。其中,密码信息、用户信息、教材信息等都是非常重要的数据记录,在系统设计的过程中,需要进行一定的加密处理,确保数据安全性,切实的保护好用户的重要信息。

3.2系统的可行性分析

3.2.1经济可行性

对系统进行经济可行性分析,也可以被称为对系统进行经济可行性研究,它是从社会的经济发展出发,通过研究整个的系统可行性,对成本收益情况进行全面地、具体地分析,并且根据所分析的可行性报告,为相关的投资者提供最科学的决策理论和最优的投资方案。本系统的开发促进了学校的信息化管理,管理人员可以直接通过在浏览器上发布教材管理系统的网站地址,即可用户根据一定的需要,有选择的对系统相关功能进行操作。这种方式打破了时间和空间的限制,可以使得学校在较短的时间内最大化地管理教材的相关信息。并且本系统所使用的开发技术和相关工具,大部分是开源的、免费的,所以可以节约很大一笔开发成本。综合上述内容分析可知,本系统的实现在经济层面上是具备可行性的。

3.2.2技术可行性

本系统是基于Java语言而进行开发的,因为Java语言容易学习、使用简单、稳定性强等特点,所以许多的开发技术人员均喜欢使用Java语言进行系统设计。现今很多程序系统的研究和开发,是通过使用Java语言进行编码设计的。此外,Java语言还具有跨平台的优点,这意味着所设计的系统是与平台无关的,也就说明由Java语言开发的系统可以支持在不同的浏览器上运行和使用。在条件大致相同的情况下,对比其他数据库,本系统使用的是MySQL数据库的相关语法简单易懂,数据库设计人员可以尽可能快的对其掌握和使用。MySQL数据库还具有占用系统内存少、功能齐全、响应速度快、使用不收费等特点,能够在极短时间内处理上千条信息记录,所以能够保证系统可以高效地运行和工作。综合上述内容分析可知,系统的实现在技术层面上是具备可行性的。

3.2.3操作可行性

如今,人们的日常生活已经离不开互联网的使用,在一定程度上,相关行业的信息化建设促进着社会的发展。人们通过使用手机上的应用程序,比如,通过使用电子商务系统,可以实现网上购物、在线支付等功能;通过使用国家官方网站,可以查看最新消息,申报个人业务;通过使用医院管理系统,可以进行网上预约挂号,在线查看体检报告等操作。在这些应用的背景下,本系统使用的是B/S开发结构模式,网站界面以人性化的设计为主,具有美观友好、交互性好等优点,用户不需要掌握一定的编程技术,直接通过对系统进行简单的功能操作,即可满足自己的使用需求。本系统还设计了一些提示信息,便于用户更好的理解系统相关功能,较快的以正确的操作方式来使用系统。综合上述内容分析可知,系统的实现在操作层面上是具备可行性的。

第4章 系统设计

4.1系统的总体功能设计

系统的总体功能设计,是需求分析的下个阶段,是系统实现的上个阶段,它是系统详细功能设计的一个大方向,也就是说系统的各类子功能模块的设计,都是以总体功能设计为目标而进行的。通过对系统进行需求分析可知,可以大致了解系统具体所需要的相关的主要功能模块。本系统主要的功能需求包括教材信息管理、学生申请管理等模块。系统总体功能设计图如图4-1所示。

教材管理系统

用户信息管理

学生申请管理

教材信息管理

教师申请管理

基础数据管理

用户信息修改

用户信息新增

基础数据添加

基础数据删除

基础数据修改

教师申请添加

教师申请修改

教师申请删除

学生申请添加

学生申请删改

学生申请删除

教材信息添加

教材信息修改

教材信息删除

公告信息管理

公告信息修改

公告信息删除

公告信息添加

图4-1系统总体功能设计图

4.2数据库设计

4.2.1概念设计

本系统使用轻量级的MySQL数据库,对系统相关的数据信息进行管理和维护[12]。数据库设计阶段一般可以被分为概念设计和逻辑设计这两个阶段。在进行数据库相关设计的全过程中,两个阶段所起到作用是完全不同的,概念设计是实现数据库设计的主要基础,逻辑设计阶段是完成数据库设计的最终目标。概念设计阶段以设计实体-联系图(E-R图)的方式,将现实世界中用户的相关需求抽象化为虚拟世界中的概念模型。本人通过设计E-R图,详细地对系统各实体以及其存在的联系进行了表达。各实体信息的实体属性图如图4-2、图4-3、图4-4、图4-5、图4-6、图4-7、图4-8、图4-9、图4-10、图4-11、图4-12所示,系统总体E-R图如图4-12所示。

图4-2管理员信息实体属性图

图4-3教材管理员信息实体属性图

图4-4教师信息实体属性图

图4-5学生信息实体属性图

图4-6字典信息实体属性图

图4-7教材信息实体属性图

图4-8出入库信息实体属性图

图4-9出入库详情信息实体属性图

图4-10教师申请信息实体属性图

图4-11学生申请信息实体属性图

图4-12公告信息实体属性图

图4-13系统总体E-R图

4.2.2逻辑设计

逻辑设计阶段主要的工作是将概念设计中的E-R图,转换成方便系统进行存储和管理的二维表格形式。这一阶段也可以被称为数据库的详细设计,其直接关系到系统功能模块的正常运行、数据信息的正常更新等[13]。在设计过程中,需要充分考虑数据库的规范性和合理性,使得能够满足系统的功能和性能需求。本系统相关的数据表格设计内容如下所示。

表4-1 管理员信息表

序号列名数据类型说明允许空
1idInt编号
2usernameString用户名
3passwordString密码
4roleString角色
5addtimeDate新增时间

表4-2 教材管理员信息表

序号列名数据类型说明允许空
1idInt编号
2usernameString账户
3passwordString密码
4jiaocaiguanli_nameString教材管理员姓名
5sex_typesInteger性别
6jiaocaiguanli_phoneString联系方式
7create_timeDate创建时间

表4-3 教师信息表

序号列名数据类型说明允许空
1idInt编号
2usernameString账户
3passwordString密码
4jiaoshi_nameString教师姓名
5jiaoshi_photoString头像
6sex_typesInteger性别
7jiaoshi_phoneString联系方式
8jiaoshi_id_numberString身份证号
9jiaoshi_emailString邮箱
10jiaoshi_deleteInteger假删
11create_timeDate创建时间

表4-4 学生信息表

序号列名数据类型说明允许空
1idInt编号
2usernameString账户
3passwordString密码
4yonghu_nameString学生姓名
5yonghu_photoString头像
6sex_typesInteger性别
7yonghu_phoneString联系方式
8yonghu_id_numberString身份证号
9yonghu_emailString邮箱
10banji_typesInteger班级
11yonghu_deleteInteger假删
12create_timeDate创建时间

表4-5 字典信息表

序号列名数据类型说明允许空
1idInt编号
2dic_codeString字段
3dic_nameString字段名
4code_indexInteger编码
5index_nameString编码名字
6super_idInteger父字段编号
7beizhuString备注
8create_timeDate创建时间

表4-6 教材信息表

序号列名数据类型说明允许空
1idInt编号
2jiaocai_order_uuid_numberString教材编号
3jiaocai_typesInteger教材类型
4jiaocai_kucun_numberInteger教材库存
5jiaocai_new_moneyBigDecimal教材价格
6insert_timeDate发布时间
7create_timeDate创建时间

表4-7 出入库信息表

序号列名数据类型说明允许空
1idInt编号
2jiaocai_churu_inout_uuid_numberString出入库流水号
3jiaocai_churu_inout_nameString出入库名称
4jiaocai_churu_inout_typesInteger出入库类型
5jiaocai_churu_inout_contentString备注
6insert_timeDate添加时间
7create_timeDate创建时间

表4-8 出入库详情信息表

序号列名数据类型说明允许空
1idInt编号
2jiaocai_churu_inout_idInteger出入库
3jiaocai_idInteger教材
4jiaocai_churu_inout_list_numberInteger操作数量
5insert_timeDate操作时间
6create_timeDate创建时间

表4-9 教师申请信息表

序号列名数据类型说明允许空
1idInt编号
2jiaoshishenqing_uuid_numberString申请编号
3jiaocai_idInteger教材
4jiaoshi_idInteger教师
5jiaoshishenqing_numberInteger申请数量
6kecheng_typesInteger课程
7banji_typesInteger班级
8jiaoshishenqing_yesno_typesInteger申请状态
9jiaoshishenqing_yesno_textString申请结果
10insert_timeDate申请时间
11create_timeDate创建时间

表4-10 学生申请信息表

序号列名数据类型说明允许空
1idInt编号
2jiaoshishenqing_idInteger教材
3yonghu_idInteger学生
4jiaoshishenqing_numberInteger申请数量
5xueshengshenqing_yesno_typesInteger申请状态
6xueshengshenqing_yesno_textString申请结果
7insert_timeDate申请时间
8create_timeDate创建时间

表4-11 公告信息表

序号列名数据类型说明允许空
1idInt编号
2news_nameString公告标题
3news_typesInteger公告类型
4news_photoString公告图片
5insert_timeDate公告时间
6news_contentString公告详情
7create_timeDate创建时间

第5章 系统实现

5.1个人中心

通过设计的个人中心功能模块,用户可以选择修改账号密码,查看个人资料信息,通过不定期的对个人账户密码进行更新,保障个人信息安全,修改密码界面设计如图5-1所示,个人信息界面设计如图5-2所示。

图5-1 修改密码界面

图5-2 个人信息界面

5.2管理员管理

通过设计的管理员管理功能模块,管理用户可以管理相关的管理员用户信息资料,比如进行查看管理员的详细资料,修改管理员的密码信息,删除已经注销的管理员信息记录等操作,管理员管理界面设计如图5-3所示。

图5-3 管理员管理界面

5.3教材管理员管理

通过设计的教材管理员管理功能模块,管理用户可以管理相关的教材管理员信息资料,比如进行查看教材管理员的详细资料,修改教材管理员的联系方式,删除已经注销的教材管理员信息记录等操作,教材管理员管理界面设计如图5-4所示。

图5-4教材管理员管理界面

5.4基础数据管理

通过设计的基础数据管理功能模块,管理用户可以管理相关的班级、教材类型、课程、公告类型信息记录,比如进行查看班级、教材类型、课程、公告类型信息的详细资料,修改班级、教材类型、课程、公告类型的名称信息,删除已经失效的班级、教材类型、课程、公告类型信息记录等操作,班级管理界面设计如图5-5所示,教材类型管理界面设计如图5-6所示,课程管理界面设计如图5-7所示,公告类型管理界面设计如图5-8所示。

图5-5班级管理界面

图5-6教材类型管理界面

图5-7课程管理界面

图5-8公告类型管理界面

5.5教材信息管理

通过设计的教材信息管理功能模块,管理用户可以管理相关的教材信息记录,比如进行查看教材信息的详细资料,修改教材的库存信息,删除已经失效的教材信息记录等操作,教材信息管理界面设计如图5-9所示。

图5-9教材信息管理界面

5.6出入库管理

通过设计的出入库管理功能模块,管理用户可以管理相关的出入库、出入库详情信息记录,比如进行查看出入库信息的详细资料,修改出入库的名称信息,删除已经失效的出入库信息记录等操作,出入库管理界面设计如图5-10所示,出入库详情管理界面设计如图5-11所示。

图5-10出入库管理界面

图5-11出入库详情管理界面

5.7教师管理

通过设计的教师管理功能模块,管理用户可以管理相关的教师信息资料,比如进行查看教师的详细资料,修改教师的联系方式,删除已经注销的教师信息记录等操作,教师管理界面设计如图5-12所示。

图5-12教师管理界面

5.8教师申请管理

通过设计的教师申请管理功能模块,管理用户可以管理相关的教师申请信息记录,比如进行查看教师申请信息的详细资料,修改教师申请的数量信息,删除已经失效的教师申请信息记录等操作,教师申请管理界面设计如图5-13所示。

图5-13教师申请管理界面

5.9公告信息管理

通过设计的公告信息管理功能模块,管理用户可以管理相关的公告信息记录,比如进行查看公告信息的详细资料,修改公告的标题信息,删除已经失效的公告信息记录等操作,公告信息管理界面设计如图5-14所示。

图5-14公告信息管理界面

5.10学生申请管理

通过设计的学生申请管理功能模块,管理用户可以管理相关的学生申请信息记录,比如进行查看学生申请信息的详细资料,修改学生申请的数量信息,删除已经失效的学生申请信息记录等操作,学生申请管理界面设计如图5-15所示。

图5-15学生申请管理界面

5.11学生管理

通过设计的学生管理功能模块,管理用户可以管理相关的学生信息资料,比如进行查看学生的详细资料,修改学生的联系方式,删除已经注销的学生信息记录等操作,学生管理界面设计如图5-16所示。

图5-16学生管理界面

ConfigServiceImpl.java

package com.service.impl;


import java.util.Map;

import org.springframework.stereotype.Service;

import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.dao.ConfigDao;
import com.entity.ConfigEntity;
import com.service.ConfigService;
import com.utils.PageUtils;
import com.utils.Query;


/**
 * 系统用户
 * @author yangliyuan
 * @date 2019年10月10日 上午9:17:59
 */
@Service("configService")
public class ConfigServiceImpl extends ServiceImpl<ConfigDao, ConfigEntity> implements ConfigService {
	@Override
	public PageUtils queryPage(Map<String, Object> params) {
		Page<ConfigEntity> page = this.selectPage(
                new Query<ConfigEntity>(params).getPage(),
                new EntityWrapper<ConfigEntity>()
        );
        return new PageUtils(page);
	}
}

JiaoshishenqingServiceImpl.java
package com.service.impl;

import com.utils.StringUtil;
import org.springframework.stereotype.Service;
import java.lang.reflect.Field;
import java.util.*;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import org.springframework.transaction.annotation.Transactional;
import com.utils.PageUtils;
import com.utils.Query;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import com.dao.JiaoshishenqingDao;
import com.entity.JiaoshishenqingEntity;
import com.service.JiaoshishenqingService;
import com.entity.view.JiaoshishenqingView;

/**
 * 教师申请 服务实现类
 */
@Service("jiaoshishenqingService")
@Transactional
public class JiaoshishenqingServiceImpl extends ServiceImpl<JiaoshishenqingDao, JiaoshishenqingEntity> implements JiaoshishenqingService {

    @Override
    public PageUtils queryPage(Map<String,Object> params) {
        if(params != null && (params.get("limit") == null || params.get("page") == null)){
            params.put("page","1");
            params.put("limit","10");
        }
        Page<JiaoshishenqingView> page =new Query<JiaoshishenqingView>(params).getPage();
        page.setRecords(baseMapper.selectListView(page,params));
        return new PageUtils(page);
    }


}

BaiduUtil.java
package com.utils;

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.json.JSONObject;


/**
* @author yangliyuan
* @version 创建时间:2020年2月7日 下午9:37:05
* 类说明 : 
*/

public class BaiduUtil {
	
    /**
     * 根据经纬度获得省市区信息
     * @param lon 纬度
     * @param lat 经度
     * @param coordtype 经纬度坐标系
     * @return
     */
    public static Map<String, String> getCityByLonLat(String key, String lng, String lat) {
        String location = lat + "," + lng;
        try {
            //拼装url
            String url = "http://api.map.baidu.com/reverse_geocoding/v3/?ak="+key+"&output=json&coordtype=wgs84ll&location="+location;
            String result = HttpClientUtils.doGet(url);
            JSONObject o = new JSONObject(result);
            Map<String, String> area = new HashMap<>();
			area.put("province", o.getJSONObject("result").getJSONObject("addressComponent").getString("province"));
			area.put("city", o.getJSONObject("result").getJSONObject("addressComponent").getString("city"));
			area.put("district", o.getJSONObject("result").getJSONObject("addressComponent").getString("district"));
			area.put("street", o.getJSONObject("result").getJSONObject("addressComponent").getString("street"));
            return area;
        }catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
	     * 获取API访问token
	     * 该token有一定的有效期,需要自行管理,当失效时需重新获取.
	     * @param ak - 百度云官网获取的 API Key
	     * @param sk - 百度云官网获取的 Securet Key
	     * @return assess_token
	     */
    public static String getAuth(String ak, String sk) {
        // 获取token地址
        String authHost = "https://aip.baidubce.com/oauth/2.0/token?";
        String getAccessTokenUrl = authHost
                // 1. grant_type为固定参数
                + "grant_type=client_credentials"
                // 2. 官网获取的 API Key
                + "&client_id=" + ak
                // 3. 官网获取的 Secret Key
                + "&client_secret=" + sk;
        try {
            URL realUrl = new URL(getAccessTokenUrl);
            // 打开和URL之间的连接
            HttpURLConnection connection = (HttpURLConnection) realUrl.openConnection();
            connection.setRequestMethod("GET");
            connection.connect();
            // 获取所有响应头字段
            Map<String, List<String>> map = connection.getHeaderFields();
            // 遍历所有的响应头字段
            for (String key : map.keySet()) {
                System.err.println(key + "--->" + map.get(key));
            }
            // 定义 BufferedReader输入流来读取URL的响应
            BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));
            String result = "";
            String line;
            while ((line = in.readLine()) != null) {
                result += line;
            }
            /**
             * 返回结果示例
             */
            System.err.println("result:" + result);
            org.json.JSONObject jsonObject = new org.json.JSONObject(result);
            String access_token = jsonObject.getString("access_token");
            return access_token;
        } catch (Exception e) {
            System.err.printf("获取token失败!");
            e.printStackTrace(System.err);
        }
        return null;
    }

}

register.vue
<template>
    <div style="backgroundImage: url('/jiaocaiguanlixitong/img/back-img-bg.jpg');background-size:cover;">
        <div class="container">
            <div class="login-form" style="backgroundColor:rgba(183, 174, 174, 0.5);borderRadius:22px">
                <h1 class="h1" style="color:#000;fontSize:28px;">教材管理系统注册</h1>
                <el-form class="rgs-form" label-width="120px">
                        <el-form-item label="账号" class="input">
                            <el-input v-model="ruleForm.username" autocomplete="off" placeholder="账号"  />
                        </el-form-item>
                        <el-form-item label="密码" class="input">
                            <el-input type="password" v-model="ruleForm.password" autocomplete="off" show-password/>
                        </el-form-item>
                        <el-form-item label="重复密码" class="input">
                            <el-input type="password" v-model="ruleForm.repetitionPassword" autocomplete="off" show-password/>
                        </el-form-item>
                        <el-form-item label="教材管理员姓名" class="input" v-if="tableName=='jiaocaiguanli'">
                            <el-input v-model="ruleForm.jiaocaiguanliName" autocomplete="off" placeholder="教材管理员姓名"  />
                        </el-form-item>
                        <el-form-item label="联系方式" class="input" v-if="tableName=='jiaocaiguanli'">
                            <el-input v-model="ruleForm.jiaocaiguanliPhone" autocomplete="off" placeholder="联系方式"  />
                        </el-form-item>
                        <el-form-item label="教师姓名" class="input" v-if="tableName=='jiaoshi'">
                            <el-input v-model="ruleForm.jiaoshiName" autocomplete="off" placeholder="教师姓名"  />
                        </el-form-item>
                        <el-form-item label="联系方式" class="input" v-if="tableName=='jiaoshi'">
                            <el-input v-model="ruleForm.jiaoshiPhone" autocomplete="off" placeholder="联系方式"  />
                        </el-form-item>
                        <el-form-item label="身份证号" class="input" v-if="tableName=='jiaoshi'">
                            <el-input v-model="ruleForm.jiaoshiIdNumber" autocomplete="off" placeholder="身份证号"  />
                        </el-form-item>
                        <el-form-item label="邮箱" class="input" v-if="tableName=='jiaoshi'">
                            <el-input v-model="ruleForm.jiaoshiEmail" autocomplete="off" placeholder="邮箱"  />
                        </el-form-item>
                        <el-form-item label="学生姓名" class="input" v-if="tableName=='yonghu'">
                            <el-input v-model="ruleForm.yonghuName" autocomplete="off" placeholder="学生姓名"  />
                        </el-form-item>
                        <el-form-item label="联系方式" class="input" v-if="tableName=='yonghu'">
                            <el-input v-model="ruleForm.yonghuPhone" autocomplete="off" placeholder="联系方式"  />
                        </el-form-item>
                        <el-form-item label="身份证号" class="input" v-if="tableName=='yonghu'">
                            <el-input v-model="ruleForm.yonghuIdNumber" autocomplete="off" placeholder="身份证号"  />
                        </el-form-item>
                        <el-form-item label="邮箱" class="input" v-if="tableName=='yonghu'">
                            <el-input v-model="ruleForm.yonghuEmail" autocomplete="off" placeholder="邮箱"  />
                        </el-form-item>
                        <div style="display: flex;flex-wrap: wrap;width: 100%;justify-content: center;">
                            <el-button class="btn" type="primary" @click="login()">注册</el-button>
                            <el-button class="btn close" type="primary" @click="close()">取消</el-button>
                        </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                ruleForm: {
                },
                tableName:"",
                rules: {},
                sexTypesOptions : [],
            };
        },
        mounted(){
            let table = this.$storage.get("loginTable");
            this.tableName = table;

            //级联表的下拉框查询

        },
        methods: {
            // 获取uuid
            getUUID () {
                return new Date().getTime();
            },
            close(){
                this.$router.push({ path: "/login" });
            },
            // 注册
            login() {

                            if((!this.ruleForm.username)){
                                this.$message.error('账号不能为空');
                                return
                            }
                            if((!this.ruleForm.password)){
                                this.$message.error('密码不能为空');
                                return
                            }
                            if((!this.ruleForm.repetitionPassword)){
                                this.$message.error('重复密码不能为空');
                                return
                            }
                            if(this.ruleForm.repetitionPassword != this.ruleForm.password){
                                this.$message.error('密码和重复密码不一致');
                                return
                            }
                            if((!this.ruleForm.jiaocaiguanliName)&& 'jiaocaiguanli'==this.tableName){
                                this.$message.error('教材管理员姓名不能为空');
                                return
                            }
                             if('jiaocaiguanli' == this.tableName && this.ruleForm.jiaocaiguanliPhone&&(!this.$validate.isMobile(this.ruleForm.jiaocaiguanliPhone))){
                                 this.$message.error('手机应输入手机格式');
                                 return
                             }
                            if((!this.ruleForm.jiaoshiName)&& 'jiaoshi'==this.tableName){
                                this.$message.error('教师姓名不能为空');
                                return
                            }
                             if('jiaoshi' == this.tableName && this.ruleForm.jiaoshiPhone&&(!this.$validate.isMobile(this.ruleForm.jiaoshiPhone))){
                                 this.$message.error('手机应输入手机格式');
                                 return
                             }
                            if((!this.ruleForm.jiaoshiIdNumber)&& 'jiaoshi'==this.tableName){
                                this.$message.error('身份证号不能为空');
                                return
                            }
                            if('jiaoshi' == this.tableName && this.ruleForm.jiaoshiEmail&&(!this.$validate.isEmail(this.ruleForm.jiaoshiEmail))){
                                this.$message.error("邮箱应输入邮件格式");
                                return
                            }
                            if((!this.ruleForm.yonghuName)&& 'yonghu'==this.tableName){
                                this.$message.error('学生姓名不能为空');
                                return
                            }
                             if('yonghu' == this.tableName && this.ruleForm.yonghuPhone&&(!this.$validate.isMobile(this.ruleForm.yonghuPhone))){
                                 this.$message.error('手机应输入手机格式');
                                 return
                             }
                            if((!this.ruleForm.yonghuIdNumber)&& 'yonghu'==this.tableName){
                                this.$message.error('身份证号不能为空');
                                return
                            }
                            if('yonghu' == this.tableName && this.ruleForm.yonghuEmail&&(!this.$validate.isEmail(this.ruleForm.yonghuEmail))){
                                this.$message.error("邮箱应输入邮件格式");
                                return
                            }
                this.$http({
                    url: `${this.tableName}/register`,
                    method: "post",
                    data:this.ruleForm
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                    this.$message({
                        message: "注册成功,请登录后在个人中心页面补充个人数据",
                        type: "success",
                        duration: 1500,
                        onClose: () => {
                        this.$router.replace({ path: "/login" });
                }
                });
                } else {
                    this.$message.error(data.msg);
                }
            });
            }
        }
    };
</script>
<style lang="scss" scoped>
    .el-radio__input.is-checked .el-radio__inner {
        border-color: #00c292;
        background: #00c292;
    }

    .el-radio__input.is-checked .el-radio__inner {
        border-color: #00c292;
        background: #00c292;
    }

    .el-radio__input.is-checked .el-radio__inner {
        border-color: #00c292;
        background: #00c292;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #00c292;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #00c292;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #00c292;
    }

    .h1 {
        margin-top: 10px;
    }

    body {
        padding: 0;
        margin: 0;
    }

    // .container {
       //    min-height: 100vh;
       //    text-align: center;
       //    // background-color: #00c292;
       //    padding-top: 20vh;
       //    background-image: url(../assets/img/bg.jpg);
       //    background-size: 100% 100%;
       //    opacity: 0.9;
       //  }

    // .login-form:before {
       // 	vertical-align: middle;
       // 	display: inline-block;
       // }

    // .login-form {
       // 	max-width: 500px;
       // 	padding: 20px 0;
       // 	width: 80%;
       // 	position: relative;
       // 	margin: 0 auto;

    // 	.label {
          // 		min-width: 60px;
          // 	}

    // 	.input-group {
          // 		max-width: 500px;
          // 		padding: 20px 0;
          // 		width: 80%;
          // 		position: relative;
          // 		margin: 0 auto;
          // 		display: flex;
          // 		align-items: center;

    // 		.input-container {
              // 			display: inline-block;
              // 			width: 100%;
              // 			text-align: left;
              // 			margin-left: 10px;
              // 		}

    // 		.icon {
              // 			width: 30px;
              // 			height: 30px;
              // 		}

    // 		.input {
              // 			position: relative;
              // 			z-index: 2;
              // 			float: left;
              // 			width: 100%;
              // 			margin-bottom: 0;
              // 			box-shadow: none;
              // 			border-top: 0px solid #ccc;
              // 			border-left: 0px solid #ccc;
              // 			border-right: 0px solid #ccc;
              // 			border-bottom: 1px solid #ccc;
              // 			padding: 0px;
              // 			resize: none;
              // 			border-radius: 0px;
              // 			display: block;
              // 			width: 100%;
              // 			height: 34px;
              // 			padding: 6px 12px;
              // 			font-size: 14px;
              // 			line-height: 1.42857143;
              // 			color: #555;
              // 			background-color: #fff;
              // 		}

    // 	}
    // }

    .nk-navigation {
        margin-top: 15px;

    a {
        display: inline-block;
        color: #fff;
        background: rgba(255, 255, 255, .2);
        width: 100px;
        height: 50px;
        border-radius: 30px;
        text-align: center;
        display: flex;
        align-items: center;
        margin: 0 auto;
        justify-content: center;
        padding: 0 20px;
    }

    .icon {
        margin-left: 10px;
        width: 30px;
        height: 30px;
    }
    }

    .register-container {
        margin-top: 10px;

    a {
        display: inline-block;
        color: #fff;
        max-width: 500px;
        height: 50px;
        border-radius: 30px;
        text-align: center;
        display: flex;
        align-items: center;
        margin: 0 auto;
        justify-content: center;
        padding: 0 20px;

    div {
        margin-left: 10px;
    }
    }
    }

    .container {
        height: 100vh;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;

    .login-form {
        right: 50%;
        top: 50%;
        height: auto;
        transform: translate3d(50%, -50%, 0);
        border-radius: 10px;
        background-color: rgba(255,255,255,.5);
        width: 420px;
        padding: 30px 30px 40px 30px;
        font-size: 14px;
        font-weight: 500;

    .h1 {
        margin: 0;
        text-align: center;
        line-height: 54px;
        font-size: 24px;
        color: #000;
    }

    .rgs-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    .input {
        width: 100%;

    & /deep/ .el-form-item__label {
          line-height: 40px;
          color: rgba(17, 16, 16, 1);
          font-size: #606266;
      }

    & /deep/ .el-input__inner {
          height: 40px;
          color: rgba(23, 24, 26, 1);
          font-size: 14px;
          border-width: 1px;
          border-style: solid;
          border-color: #606266;
          border-radius: 22px;
          background-color: #fff;
      }
    }

    .btn {
        margin: 0 10px;
        width: 88px;
        height: 44px;
        color: #fff;
        font-size: 14px;
        border-width: 1px;
        border-style: solid;
        border-color: #409EFF;
        border-radius: 22px;
        background-color: #409EFF;
    }

    .close {
        margin: 0 10px;
        width: 88px;
        height: 44px;
        color: #409EFF;
        font-size: 14px;
        border-width: 1px;
        border-style: solid;
        border-color: #409EFF;
        border-radius: 22px;
        background-color: #FFF;
    }

    }
    }
    }
</style>

声明

本博客适用于广泛的学术和教育用途,包括但不限于个人学习、开发设计,产品设计。仅供学习参考,旨在为读者提供深入理解和学术研究的材料。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值