如何使用ssm实现基于web的素材网的设计与实现+vue

@TOC

ssm559基于web的素材网的设计与实现+vue

绪论

1.1研究背景与意义

1.1.1研究背景

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

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

1.1.2研究意义

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

2

1.2国内外研究现状

1.2.1国外研究现状

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

1.2.2国内研究现状

国内的计算机技术的发展虽然晚于国外，尤其是美国、英国、德国等发达国家。但是我国的计算机技术发展势头非常迅猛，近些年，也逐渐走向成熟和完善的阶段。现在人们大多选择网上购物，并且主要使用支付宝、微信等软件进行电子支付，这样一来用户不需要带现金，便可以成功完成支付操作[4]。许多企业结合使用了云计算、人工智能等先进的计算机技术，自主研发了素材网站，使得系统越来越成熟，功能越来越完备。结合计算机技术，采用主流的B/S开发结构模式开发一款基于web的素材网站。由此，工作人员不再被时空所限制，直接通过使用浏览器的方式对系统进行注册登录操作，支持随时随地对相关的素材信息进行管理，便于及时为用户提供相关的素材管理服务。并且所设计的系统基本上能够符合用户的客观使用需求，有利于充分协调相关单位的人力、财力、物力等资源，不断提高相关人员的服务水平和管理质量。

1.3研究内容与方法

1.3.1研究内容

本文主要论述了设计和开发本系统的现实背景、理论价值、技术依据、实现功能、测试结果等内容。根据现实背景和理论价值等内容，整体规划设计具体的系统功能，再根据技术依据和实现功能等内容，详细地将规划好的功能模块进行设计和实现，最后根据测试结果等内容，对编码实现的主要系统功能进行验证，并且不断地对所设计的系统进行改进和完善，以达到的能够满足用户的现实需求的目的。系统主要分为管理员角色和用户角色，具体的功能设计包括注册登录管理、个人中心管理、用户信息管理、素材信息管理、素材留言信息管理等模块。注册登录管理功能是之前没有使用过本系统的新用户，在使用系统前，需要通过注册步骤，登记详细的信息资料，而后再通过输入正确的账号和密码，成功登录系统后，即可通过一系列的操作来满足自己的相关需求。个人中心管理功能是管理相关的个人信息资料，个人根据现实情况的需要，有选择的对个人账户的相关信息进行一定的操作，比如选择更新或者删除操作。用户信息管理是管理相关的用户信息记录，对用户相关的信息进行管理，可以及时的更新相应的用户的基本资料。素材信息管理是管理相关的素材信息记录，查看详情情况，方便及时响应用户的服务请求。素材留言管理是管理相关的素材留言信息记录，方便相关人员及时查看并管理素材留言信息，如果遇到异常的素材留言信息，可以及时对其进行处理，在较短的时间内解决问题，提高用户的使用体验。

1.3.2研究方法

本系统采用B/S架构，在idea平台上，通过使用Java语言设计系统相关的功能模块，MySQL数据库管理系统相关的数据信息，SSM框架设计系统功能架构，并且对其进行必要的管理和控制。系统设计的最关键的环节，则是需要通过Tomcat服务器将系统发布到浏览器上，以便相关用户的操作和使用。本系统的设计和实现是相关单位信息化管理建设的一大进步，促进了素材管理信息行业的信息化建设，有利于简化相关人员工作流程，提高工作效率，提升工作幸福感。

1.4论文的组织结构

基于web的素材网站的设计与实现的论文组织安排，大致可以被分为七个章节，具体的内容如下：

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

第二章为相关技术介绍，本章主要论述了系统开发的技术依据。本系统主要通过在idea平台上编写相关的Java代码，设计系统主要功能模块，使用SSM框架构建项目主流架构，MySQL数据库记录和管控相关的数据表格，便于数据库识别和存放相关的数据资源。

第三章为系统分析，本章主要论述了系统的需求、可行性分析等内容。根据需求分析，确认使用者对系统的基本功能需求，再通过在经济、操作、法律上进行可行性分析，分析系统研发的实际意义和使用价值，系统性能的稳定性和功能操作的便捷性，以及成功投入市场的可能性。

第四章为系统设计，本章主要论述了系统的功能、数据库设计等内容。根据功能设计，规划出主要的功能设计，方便满足用户的实际需求。根据数据库设计，设计相关的数据二维表格存放和管理与系统有关的数据信息，便于相关人员管理与系统有关的数据信息，维护和更新数据信息的安全。

第五章为系统实现，本章主要论述了注册用户管理、素材信息管理、素材留言管理等功能模块。通过前面介绍的系统分析，功能及数据库设计等相关内容，详细地实现系统功能模块。这一过程就是系统的具体实现阶段，站在系统的整体设计角度出发，对系统的实现进行必要分析可知，这一阶段是极为重要，直接关系到用户对系统的使用感受。

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

第七章为总结与展望，总结全文所阐述的相关内容，并对系统的未来的改进和发展工作提出展望。整体来看，本系统的开发基本上是比较顺利的，功能设计也比较齐全，未来将对系统的相关功能进一步优化，并加强系统的性能设计，简化系统的操作难度，使其能够满足更多用户的使用需求。

42

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

2.4 MySQL数据库

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

3系统分析

3.1系统的需求分析

在软件设计开发的整个过程中，需求分析占用的时间是比较长的，也是比较耗费人力的阶段。需求分析是设计系统功能模块的总方向，通过需求分析阶段，可以确定系统的基本功能设计，以及在最后的系统验收阶段，通过对照需求分析报告，验证系统的功能设计是否合理，能否满足用户的基本需要，最终判断评定系统设计是否成功完成。本文主要通过问卷调查的方式，对基于web的素材网站进行了需求分析[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所示。

基于web的素材网站

用户信息管理

论坛信息管理

素材留言管理

素材收藏管理

素材信息管理

用户信息修改

用户信息新增

素材信息添加

素材信息删除

素材信息修改

素材收藏添加

素材收藏修改

素材收藏删除

论坛信息添加

论坛信息删改

论坛信息删除

素材留言添加

素材留言修改

素材留言删除

公告信息管理

公告信息修改

公告信息删除

公告信息添加

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

4.2系统流程设计

4.2.1登录流程

用户需要通过输入正确格式账号和密码信息，才能成功使用本系统，实现自己所需的功能操作，登录流程图如图4-2所示。

图4-2登录流程图

4.2.2注册流程

首次使用本系统的新用户，需要通过注册操作，再通过登录操作，才能成功使用系统功能模块，注册流程图如图4-3所示。

图4-3注册流程图

4.2.3添加信息流程

当添加系统所需要的数据信息时，需要输入正确、合法的字符格式，才能成功添加数据信息，添加信息流程图如图4-4所示。

图4-4添加信息流程图

4.2.4修改信息流程

当修改系统所需要的数据信息时，需要输入正确、合法的字符格式，才能成功修改数据信息，修改信息流程图如图4-5所示。

图4-5修改信息流程图

4.2.5删除信息流程

当删除系统所需要的数据信息时，需要将需要删除的数据信息选中，再通过确认删除按钮，成功将其进行删除，删除信息流程图如图4-6所示。

图4-6删除信息流程图

4.3数据库设计

4.3.1概念设计

在数据库设计阶段，本系统通过使用开源的、小型的MySQL数据库对系统相关的数据信息进行管理和维护[12]。数据库设计阶段一般可以被分为概念设计和逻辑设计这两个阶段。这两个阶段起到作用是不同的，概念设计阶段是实现基础，逻辑设计阶段最终目标。概念设计阶段主要通过使用实体-联系图（E-R图）的方式，将现实世界中用户对系统的实际需求，转换成设计人员能够理解的抽象的数据库概念模型。本人通过设计E-R图，详细的对系统中的实体以及实体之间的联系进行了表达。各实体信息的E-R图如图4-7、图4-8、图4-9、图4-10、图4-11、图4-12、图4-13、图4-14所示，系统总体E-R图如图4-15所示。

图4-7管理员信息E-R图

图4-8用户信息E-R图

图4-9字典信息E-R图

图4-10素材信息E-R图

图4-11素材留言信息E-R图

图4-12素材收藏信息E-R图

图4-13论坛信息E-R图

图4-14公告信息E-R图

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

4.3.2逻辑设计

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

表4-1管理员信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	username	String	用户名	是
3	password	String	密码	是
4	role	String	角色	是
5	addtime	Date	新增时间	是

表4-2用户信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	username	String	账户	是
3	password	String	密码	是
4	yonghu_name	String	用户姓名	是
5	yonghu_phone	String	用户手机号	是
6	yonghu_id_number	String	用户身份证号	是
7	yonghu_photo	String	用户头像	是
8	sex_types	Integer	性别	是
9	yonghu_email	String	电子邮箱	是
10	create_time	Date	创建时间	是

表4-3字典信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	dic_code	String	字段	是
3	dic_name	String	字段名	是
4	code_index	Integer	编码	是
5	index_name	String	编码名字	是
6	super_id	Integer	父字段编号	是
7	beizhu	String	备注	是
8	create_time	Date	创建时间	是

表4-4素材信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	yonghu_id	Integer	用户	是
3	sucai_name	String	素材名称	是
4	sucai_photo	String	素材照片	是
5	sucai_types	Integer	素材类型	是
6	sucai_file	String	素材文件	是
7	sucai_clicknum	Integer	点击次数	是
8	shangxia_types	Integer	是否上架	是
9	sucai_content	String	素材介绍	是
10	sucai_delete	Integer	逻辑删除	是
11	insert_time	Date	上传时间	是
12	create_time	Date	创建时间	是

表4-5素材留言信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	sucai_id	Integer	素材	是
3	yonghu_id	Integer	用户	是
4	sucai_liuyan_text	String	留言内容	是
5	insert_time	Date	留言时间	是
6	reply_text	String	回复内容	是
7	update_time	Date	回复时间	是
8	create_time	Date	创建时间	是

表4-6素材收藏信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	sucai_id	Integer	素材	是
3	yonghu_id	Integer	用户	是
4	sucai_collection_ types	Integer	类型	是
5	insert_time	Date	收藏时间	是
6	create_time	Date	创建时间	是

表4-7论坛信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	forum_name	String	帖子标题	是
3	yonghu_id	Integer	用户	是
4	laoshi_id	Integer	老师	是
5	users_id	Integer	管理员	是
6	forum_content	String	发布内容	是
7	super_ids	Integer	父编号	是
8	forum_types	Integer	帖子类型	是
9	forum_state_types	Integer	帖子状态	是
10	insert_time	Date	发帖时间	是
11	update_time	Date	修改时间	是
12	create_time	Date	创建时间	是

表4-8公告信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	gonggao_name	String	公告名称	是
3	gonggao_photo	String	公告图片	是
4	gonggao_types	Integer	公告类型	是
5	insert_time	Date	公告发布时间	是
6	gonggao_content	String	公告详情	是
7	create_time	Date	创建时间	是

5系统实现

5.1用户登录

当用户成功完成注册步骤操作之后，便可以通过输入正确的个人信息资料，成功登录系统，并根据自己实际的需求，选择系统相关的功能模块进行操作和使用，用户登录界面设计如图5-1所示。

图5-1用户登录界面

5.2用户注册

用户在第一次使用本系统时，需要进行注册操作，通过输入正确的字符串格式，才能成功注册好个人账号，用户注册界面设计如图5-2所示。

图5-2用户注册界面

5.3个人中心

通过设计的个人中心管理功能模块，管理用户可以对相关的个人信息进行管理，比如管理用户可以更新个人账号的密码信息，修改个人账号的用户名信息等，修改密码界面设计如图5-3所示，个人信息界面设计如图5-4所示。

图5-3修改密码界面

图5-4个人信息界面

5.4用户管理

通过设计的用户管理功能模块，管理用户可以对相关的用户信息进行管理，比如管理用户可以查看用户头像信息，更新用户手机号码，删除已经注销的用户信息记录等，用户管理界面设计如图5-5所示。

图5-5用户管理界面

5.5素材管理

通过设计的素材管理功能模块，管理用户可以对相关的素材信息进行管理，比如管理用户可以添加新素材信息记录，更新素材名称，上传素材文件，删除失效的素材信息记录等，素材管理界面设计如图5-6所示。

图5-6素材管理界面

5.6素材留言管理

通过设计的素材留言管理功能模块，管理用户可以对相关的素材留言信息进行管理，比如管理用户可以查看详细的留言内容、回复内容信息，删除失效的素材留言信息记录等，素材留言管理界面设计如图5-7所示。

图5-7素材留言管理界面

5.7素材收藏管理

通过设计的素材收藏管理功能模块，管理用户可以对相关的素材收藏信息进行管理，比如管理用户可以查看详细的素材收藏内容信息，删除失效的素材收藏信息记录等，素材收藏管理界面设计如图5-8所示。

图5-8素材收藏管理界面

5.8基础数据管理

通过设计的基础数据管理功能模块，管理用户可以对相关的公告类型、素材类型信息进行管理，比如管理用户可以查看详细的公告类型、素材类型内容信息，删除失效的公告类型、素材类型信息记录等，公告类型管理界面设计如图5-9所示，素材类型管理界面设计如图5-10所示。

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

图5-10素材类型管理界面

5.9论坛管理

通过设计的论坛管理功能模块，管理用户可以对相关的论坛信息进行管理，比如管理用户可以查看详细的帖子内容信息，删除失效的论坛信息记录等，论坛管理界面设计如图5-11所示。

图5-1论坛管理界面

5.10公告信息管理

通过设计的公告信息管理功能模块，管理用户可以对相关的公告信息进行管理，比如管理用户可以查看详细的公告内容信息，删除失效的公告信息记录等，公告信息管理界面设计如图5-12所示。

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

5.11轮播图管理

通过设计的轮播图管理功能模块，管理用户可以对相关的轮播图信息进行管理，比如管理用户可以查看轮播图名称，删除失效的轮播图信息记录等，轮播图管理界面设计如图5-13所示。

图5-13轮播图管理界面

系

GonggaoController.java

package com.controller;

import java.io.File;
import java.math.BigDecimal;
import java.net.URL;
import java.text.SimpleDateFormat;
import com.alibaba.fastjson.JSONObject;
import java.util.*;
import org.springframework.beans.BeanUtils;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import com.service.TokenService;
import com.utils.*;
import java.lang.reflect.InvocationTargetException;

import com.service.DictionaryService;
import org.apache.commons.lang3.StringUtils;
import com.annotation.IgnoreAuth;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.entity.*;
import com.entity.view.*;
import com.service.*;
import com.utils.PageUtils;
import com.utils.R;
import com.alibaba.fastjson.*;

/**
 * 公告信息
 * 后端接口
 * @author
 * @email
*/
@RestController
@Controller
@RequestMapping("/gonggao")
public class GonggaoController {
    private static final Logger logger = LoggerFactory.getLogger(GonggaoController.class);

    @Autowired
    private GonggaoService gonggaoService;


    @Autowired
    private TokenService tokenService;
    @Autowired
    private DictionaryService dictionaryService;

    //级联表service

    @Autowired
    private YonghuService yonghuService;


    /**
    * 后端列表
    */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
        logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永不会进入");
        else if("用户".equals(role))
            params.put("yonghuId",request.getSession().getAttribute("userId"));
        if(params.get("orderBy")==null || params.get("orderBy")==""){
            params.put("orderBy","id");
        }
        PageUtils page = gonggaoService.queryPage(params);

        //字典表数据转换
        List<GonggaoView> list =(List<GonggaoView>)page.getList();
        for(GonggaoView c:list){
            //修改对应字典表字段
            dictionaryService.dictionaryConvert(c, request);
        }
        return R.ok().put("data", page);
    }

    /**
    * 后端详情
    */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id, HttpServletRequest request){
        logger.debug("info方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
        GonggaoEntity gonggao = gonggaoService.selectById(id);
        if(gonggao !=null){
            //entity转view
            GonggaoView view = new GonggaoView();
            BeanUtils.copyProperties( gonggao , view );//把实体数据重构到view中

            //修改对应字典表字段
            dictionaryService.dictionaryConvert(view, request);
            return R.ok().put("data", view);
        }else {
            return R.error(511,"查不到数据");
        }

    }

    /**
    * 后端保存
    */
    @RequestMapping("/save")
    public R save(@RequestBody GonggaoEntity gonggao, HttpServletRequest request){
        logger.debug("save方法:,,Controller:{},,gonggao:{}",this.getClass().getName(),gonggao.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永远不会进入");

        Wrapper<GonggaoEntity> queryWrapper = new EntityWrapper<GonggaoEntity>()
            .eq("gonggao_name", gonggao.getGonggaoName())
            .eq("gonggao_types", gonggao.getGonggaoTypes())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        GonggaoEntity gonggaoEntity = gonggaoService.selectOne(queryWrapper);
        if(gonggaoEntity==null){
            gonggao.setInsertTime(new Date());
            gonggao.setCreateTime(new Date());
            gonggaoService.insert(gonggao);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

    /**
    * 后端修改
    */
    @RequestMapping("/update")
    public R update(@RequestBody GonggaoEntity gonggao, HttpServletRequest request){
        logger.debug("update方法:,,Controller:{},,gonggao:{}",this.getClass().getName(),gonggao.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
        //根据字段查询是否有相同数据
        Wrapper<GonggaoEntity> queryWrapper = new EntityWrapper<GonggaoEntity>()
            .notIn("id",gonggao.getId())
            .andNew()
            .eq("gonggao_name", gonggao.getGonggaoName())
            .eq("gonggao_types", gonggao.getGonggaoTypes())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        GonggaoEntity gonggaoEntity = gonggaoService.selectOne(queryWrapper);
        if("".equals(gonggao.getGonggaoPhoto()) || "null".equals(gonggao.getGonggaoPhoto())){
                gonggao.setGonggaoPhoto(null);
        }
        if(gonggaoEntity==null){
            gonggaoService.updateById(gonggao);//根据id更新
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

    /**
    * 删除
    */
    @RequestMapping("/delete")
    public R delete(@RequestBody Integer[] ids){
        logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
        gonggaoService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }


    /**
     * 批量上传
     */
    @RequestMapping("/batchInsert")
    public R save( String fileName){
        logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
        try {
            List<GonggaoEntity> gonggaoList = new ArrayList<>();//上传的东西
            Map<String, List<String>> seachFields= new HashMap<>();//要查询的字段
            Date date = new Date();
            int lastIndexOf = fileName.lastIndexOf(".");
            if(lastIndexOf == -1){
                return R.error(511,"该文件没有后缀");
            }else{
                String suffix = fileName.substring(lastIndexOf);
                if(!".xls".equals(suffix)){
                    return R.error(511,"只支持后缀为xls的excel文件");
                }else{
                    URL resource = this.getClass().getClassLoader().getResource("static/upload/" + fileName);//获取文件路径
                    File file = new File(resource.getFile());
                    if(!file.exists()){
                        return R.error(511,"找不到上传文件，请联系管理员");
                    }else{
                        List<List<String>> dataList = PoiUtil.poiImport(file.getPath());//读取xls文件
                        dataList.remove(0);//删除第一行，因为第一行是提示
                        for(List<String> data:dataList){
                            //循环
                            GonggaoEntity gonggaoEntity = new GonggaoEntity();
//                            gonggaoEntity.setGonggaoName(data.get(0));                    //公告名称 要改的
//                            gonggaoEntity.setGonggaoPhoto("");//照片
//                            gonggaoEntity.setGonggaoTypes(Integer.valueOf(data.get(0)));   //公告类型 要改的
//                            gonggaoEntity.setInsertTime(date);//时间
//                            gonggaoEntity.setGonggaoContent("");//照片
//                            gonggaoEntity.setCreateTime(date);//时间
                            gonggaoList.add(gonggaoEntity);


                            //把要查询是否重复的字段放入map中
                        }

                        //查询是否重复
                        gonggaoService.insertBatch(gonggaoList);
                        return R.ok();
                    }
                }
            }
        }catch (Exception e){
            return R.error(511,"批量插入数据异常，请联系管理员");
        }
    }





    /**
    * 前端列表
    */
    @IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params, HttpServletRequest request){
        logger.debug("list方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));

        // 没有指定排序字段就默认id倒序
        if(StringUtil.isEmpty(String.valueOf(params.get("orderBy")))){
            params.put("orderBy","id");
        }
        PageUtils page = gonggaoService.queryPage(params);

        //字典表数据转换
        List<GonggaoView> list =(List<GonggaoView>)page.getList();
        for(GonggaoView c:list)
            dictionaryService.dictionaryConvert(c, request); //修改对应字典表字段
        return R.ok().put("data", page);
    }

    /**
    * 前端详情
    */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id, HttpServletRequest request){
        logger.debug("detail方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
        GonggaoEntity gonggao = gonggaoService.selectById(id);
            if(gonggao !=null){


                //entity转view
                GonggaoView view = new GonggaoView();
                BeanUtils.copyProperties( gonggao , view );//把实体数据重构到view中

                //修改对应字典表字段
                dictionaryService.dictionaryConvert(view, request);
                return R.ok().put("data", view);
            }else {
                return R.error(511,"查不到数据");
            }
    }


    /**
    * 前端保存
    */
    @RequestMapping("/add")
    public R add(@RequestBody GonggaoEntity gonggao, HttpServletRequest request){
        logger.debug("add方法:,,Controller:{},,gonggao:{}",this.getClass().getName(),gonggao.toString());
        Wrapper<GonggaoEntity> queryWrapper = new EntityWrapper<GonggaoEntity>()
            .eq("gonggao_name", gonggao.getGonggaoName())
            .eq("gonggao_types", gonggao.getGonggaoTypes())
            ;
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        GonggaoEntity gonggaoEntity = gonggaoService.selectOne(queryWrapper);
        if(gonggaoEntity==null){
            gonggao.setInsertTime(new Date());
            gonggao.setCreateTime(new Date());
        gonggaoService.insert(gonggao);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }


}

CommonServiceImpl.java

package com.service.impl;


import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.dao.CommonDao;
import com.service.CommonService;


/**
 * 系统用户
 * @author
 * @date
 */
@Service("commonService")
public class CommonServiceImpl implements CommonService {
	
	@Autowired
	private CommonDao commonDao;

	@Override
	public List<String> getOption(Map<String, Object> params) {
		return commonDao.getOption(params);
	}
	
	@Override
	public Map<String, Object> getFollowByOption(Map<String, Object> params) {
		return commonDao.getFollowByOption(params);
	}


	/**
	 tableName 查询表
	 condition1 条件1
	 condition1Value 条件1值
	 average 计算平均评分
	 * */
	public Map<String, Object> queryScore(Map<String, Object> params){
		return commonDao.queryScore(params);
	}
	
	@Override
	public void sh(Map<String, Object> params) {
		commonDao.sh(params); 
	}

	@Override
	public int remindCount(Map<String, Object> params) {
		return commonDao.remindCount(params);
	}

	@Override
	public Map<String, Object> selectCal(Map<String, Object> params) {
		return commonDao.selectCal(params);
	}
	
	@Override
	public List<Map<String, Object>> selectGroup(Map<String, Object> params) {
		return commonDao.selectGroup(params);
	}
	
	@Override
	public List<Map<String, Object>> selectValue(Map<String, Object> params) {
		return commonDao.selectValue(params);
	}

	@Override
	public List<Map<String, Object>> chartBoth(Map<String, Object> params) {
		return commonDao.chartBoth(params);
	}

	@Override
	public List<Map<String, Object>> chartOne(Map<String, Object> params) {
		return commonDao.chartOne(params);
	}


	/**
	 * 新的级联字典表的  分组求和统计
	 * @param params
	 * @return
	 */
	@Override
	public List<Map<String, Object>> newSelectGroupSum(Map<String, Object> params) {
		return commonDao.newSelectGroupSum(params);
	}


	/**
	 * 新的级联字典表的  分组条数统计
	 * @param params
	 * @return
	 */
	@Override
	public List<Map<String, Object>> newSelectGroupCount(Map<String, Object> params) {
		return commonDao.newSelectGroupCount(params);
	}

	/**
	 * 当前表的日期分组求和
	 * @param params
	 * @return
	 */
	@Override
	public List<Map<String, Object>> newSelectDateGroupSum(Map<String, Object> params) {
		return commonDao.newSelectDateGroupSum(params);
	}


	/**
	 * 查询字典表的分组统计总条数
	 * @param params
	 * @return
	 */
	@Override
	public List<Map<String, Object>> newSelectDateGroupCount(Map<String, Object> params) {
		return commonDao.newSelectDateGroupCount(params);
	}

	@Override
	public int plusCloumNumber(Map<String, Object> params) {
		return commonDao.plusCloumNumber(params);
	}
	@Override
	public int reduceCloumNumber(Map<String, Object> params) {
		return commonDao.reduceCloumNumber(params);
	}
	@Override
	public int updateCloumValue(Map<String, Object> params) {
		return commonDao.updateCloumValue(params);
	}

/**
 * 饼状图
 * -- 饼状图  查询当前表
 -- 				查询字典表【月】
 -- 				 统计   -- 查询某个月的每个类型的订单销售数量
 -- 				 求和   -- 查询某个月的每个类型的订单销售额
 -- 				查询某个字符串【月】
 -- 				 统计   -- 查询某个月的每个员工的订单销售数量
 -- 				 求和   -- 查询某个月的每个员工的订单销售额
 -- 				查询时间【年】
 -- 				 统计 	-- 查询每个月的订单销售数量
 -- 				 求和 	-- 查询每个月的订单销售额
 -- 饼状图  查询级联表
 -- 				查询字典表
 -- 				 统计  	-- 查询某个月的每个类型的订单销售数量
 -- 				 求和   -- 查询某个月的每个类型的订单销售额
 -- 				查询某个字符串
 -- 				 统计   -- 查询某个月的每个员工的订单销售数量
 -- 				 求和   -- 查询某个月的每个员工的订单销售额
 -- 				查询时间
 -- 				 统计 	-- 统计每个月的订单销售数量
 -- 				 求和 	-- 查询每个月的订单销售额
 */


/**
 * 柱状图
 -- 柱状图  查询当前表
 --             某个【年，月】
 -- 			 当前表 2 级联表 1
 -- 						统计
 --   						【日期，字符串，下拉框】
 -- 						求和
 --   						【日期，字符串，下拉框】
 -- 柱状图  查询级联表
 -- 					某个【年，月】
 -- 						统计
 --   						【日期，字符串，下拉框】
 -- 						求和
 --   						【日期，字符串，下拉框】
 */
	/**
	 * 柱状图求和
	 * @param params
	 * @return
	 */
	public List<Map<String, Object>> barSum(Map<String, Object> params){
		return commonDao.barSum(params);
	}

	/**
	 * 柱状图统计
	 * @param params
	 * @return
	 */
	public List<Map<String, Object>> barCount(Map<String, Object> params){
		return commonDao.barCount(params);
	}

}

StringUtil.java

package com.utils;

public class StringUtil {

    public  static boolean isEmpty(String s){
        if(s==null || s.equals("") || s.equals("null")){
            return true;
        }
        return false;
    }

    public  static boolean isNotEmpty(String s){
        return !StringUtil.isEmpty(s);
    }
}

base.js

const base = {
    get() {
        return {
            url : "http://localhost:8080/sucaiwangzhan/",
            name: "sucaiwangzhan",
            // 退出到首页链接
            indexUrl: 'http://localhost:8080/sucaiwangzhan/front/index.html'
        };
    },
    getProjectName(){
        return {
            projectName: "素材网"
        } 
    }
}
export default base

声明

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