基于Spring Boot Vue的健身房管理系统的设计与实现

目录TOC\o"1-2"\u摘要 IABSTRACT II第1章 引言 11.1 选题背景与意义 11.2 国内外研究现状和相关工作 21.3 本文的研究内容与主要工作 21.4 本文的论文结构与章节安排 3第2章 相关技术介绍 52.1 关键技术 52.2 开发工具 62.3 本章小结 7第3章 需求分析 83.1 问题陈述 83.2 可行性研究 83.3 总体功能需求 93.4 系统用例析取 93.5 系统用例规约 113.6 术语表 223.7 本章小结 23第4章 概要设计 244.1 系统架构设计 244.2 系统功能框架 254.3 本章小结 26第5章 详细设计 275.1 功能模块设计 275.2 系统关键类及其分析 325.3 数据库设计 385.4 本章小结 48第6章 系统实现 496.1界面风格 496.2主要页面展示 496.3本章小结 72第7章 系统测试 737.1测试原则 737.2测试方法 737.3测试环境 737.4测试用例 747.5本章小结 77第8章 总结与展望 788.1总结 788.2研究展望 78参考文献 79致谢 81附录 82随着社会经济水平的持续增长，人们的生活质量也得到了显著的提升，丰富多彩的娱乐活动，饮食消遣开始融入人们的生活，健身便是其中之一。随着人们对健身需求的不断提高，健身房便开始进入大众的视野。而对于健身房来说，一个能够帮助管理各项事务，减轻人员负担的系统正是它们所需要的。本文详细阐述了基于SpringBoot+Vue的健身房管理系统的设计与实现过程。该系统拥有用户管理，会员管理，课程管理等多个方面的功能模块，能帮助用户更加有效的管理健身房，从而促进健身房的发展。“身体是革命的本钱。”伴随着生活水平的提高,人们开始更多地关注健康生活。习近平总书记明确指出,体育是促进社会发展的重要动力,也是在国际上展示我国综合国力的一项因素[1]。正因如此，为了增强民众的健身意识，提高全民健康水平，国家多次制定全面健身计划，如2009年颁布的《全民健身条例》、2021年最新颁布的《全民健身计划》[2]。随着时代的发展，健身行业展现出良好的发展前景，因此许多人都投身进健身行业当中。然而国内的健身房系统还远远不够完善与高效，这样就阻碍了健身房的发展，同时也对国内的健身行业产生了消极影响[3]。而国外的健身房管理系统大都十分完善且先进，当前国外采用的基本都是基于SaaS(Software-as-a-Service)开发的健身房管理系统，并且，SaaS系统研发商对客户在使用过程中给予全程指导和维护[4]。综上所述，利用前沿技术，开发一套全面的健身房管理系统，能有效改善目前行业现状，并促进健身行业的发展，弥补现有管理模式的不足。近年来，随着我国经济与科学技术的不断发展，人们的生活水平与质量也随之水涨船高，同时也带来了许多新的浪潮。其中，健身这一行业便逐渐开始进入人们的日常生活之中，而随着健身行业的不断壮大，许多健身房也随之出现。伴随着健身房的快速增加，健身房的管理问题便也成为一个需要优先解决的事项。最开始的健身房管理多是采用人工管理，不仅效率低，还容易出现错误，而随着计算机技术的不断发展，为了高效的管理健身房的各项事务且尽量减少人员的负担，越来越多的健身房开始使用计算机系统进行科学化的管理，健身房管理系统开始出现。国内外的大部分健身房管理系统目前采用的技术大多都不是当前的前沿技术，而随着科技的发展，系统也应随之更新。前后端分离的开发模式是目前的主流模式，该模式成功地将前端和后端的业务逻辑进行分离，真正实现了两者的解耦合，从而提升了开发的效率。使用前后端分离模式开发的健身房管理系统可以降低维护的成本，且能为使用者带来更加舒适的体验。本课题旨在开发一个基于SpringBoot和Vue的前后端分离的健身房管理系统，该系统主要的研究内容包括:1.实现该健身房管理系统的主要功能，包括：(1)登录功能：该功能支持不同用户的登录，并根据用户类型展示对应的操作界面，例如教练专属界面和会员专属界面。(2)会员管理：负责维护会员的基本资料，包括会员卡号、姓名、性别等信息的增删改查操作。(3)教练管理：对教练的基本信息进行管理，涉及工号、姓名、性别、年龄等数据的维护。(4)器材管理：对健身房内器材数量、使用状态等进行有效管理。(5)课程管理：对健身房提供的各类课程信息进行维护和管理。(6)在线预约：使会员能够在线上选择并预约自己感兴趣的健身课程。(7)反馈信息管理：管理员可以查看、处理和删除会员的反馈意见，以提升服务质量。2.尽可能实现并完善更多的功能，使系统更加完整。3.尽可能实现代码的“高内聚，低耦合”，减少代码冗余，提高代码的可重用性和可维护性。4.编写代码时，应注意系统的安全性、易用性、兼容性，以提高用户的体验。5.尽量使用模块化设计开发系统，从而提高项目的开发效率。本文共分为8章，章节内容安排如下：第1章引言。本章着重阐述了健身房管理系统的研究背景、重要性以及在国内外的发展现状。第2章相关技术介绍。这部分介绍了构建健身房管理系统时所采用的多种技术框架和开发工具。第3章需求分析。这部分通过规约表、活动图等方法对健身房管理系统的需求进行了详细的分析。第4章系统概要设计。这部分对健身房管理系统的总体架构进行了大致的分析。第5章系统详细设计。这部分介绍了健身房管理系统的关键类，并分析了系统的功能模块和数据库设计。第6章系统实现。这部分展示了健身房管理系统的界面效果与部分核心代码。第7章系统测试。这部分展示了健身房管理系统的重要用例的测试情况。第8章总结与展望。这部分对整个系统的开发过程进行了回顾，指出了存在的不足，并讨论了系统未来的发展方向。基于SpringBoot+Vue的健身房管理系统的设计与实现第2章相关技术介绍本章主要介绍开发健身房管理系统所用到的框架技术、开发工具等。开发健身房管理系统所用到的关键技术有SpringBoot、Vue.js、MyBatis-Plus、Axios等，下面将分别对以上技术进行说明。SpringBootSpringBoot是由Pivotal团队开发的全新的开源开发框架，它大大简化了Spring应用各个方面的配置。同时SpringBoot还能够集成许多框架，通过这个特点解决了项目之间包的版本依赖和稳定性问题[5]。Vue.jsVue.js框架是一种面向前端界面开发的轻量化框架，其设计模式遵循自下而上的原则，它有着响应式编程和组态化的特点。同时，它采用了MVVM的设计模式，此模式改变了传统的DOM操作模式，在视图维护与数据管理方面所需的时间大大降低，只需要持续的监控数据的变化。Vue.js框架的核心是能够快速响应数据，这能让代码的开发变得更加简洁和高效，同时方便其他开发人员对代码进行理解[6]。作为一款渐进式框架，Vue.js使用组件化的方式构建应用，使得代码的可维护性和可重用性提高[7]。这些特性能够帮助解决代码冗余的问题，还能让项目的维护更加的轻松，同时Vue.js也能与HTML和JS协作，从而提高系统开发的效率。MyBatis-PlusMyBatis-Plus是在MyBatis的基础上进行升级，为了提升开发效率和简化代码而诞生的。它的目的在于简化开发、提高效率，具有强大的增查改删（CRUD）操作、支持Lambda、支持主键自动生成等特性[8]。开发健身房管理系统所使用的数据库为MySQL，工具主要有IntelliJIDEA、VisualStudioCode，这些便捷的开发工具能大大提高开发人员的工作效率。MySQLMySQL是一种关系型数据库。MySQL数据库支持多种操作系统和开发语言的API接口，可以方便的进行数据的存储和查询[9]。同时，MySQL数据库体积小，速度快，拥有良好的性能与稳定的服务。IntelliJIDEAIntelliJIDEA是一款主要用于支持Java、Scala、Groovy等语言的开发工具，它支持目前主流的技术和框架。IntelliJIDEA有许多优点，如：强大的整合能力、方便的提示功能、好用的快捷键与模板代码等。VisualStudioCodeVisualStudioCode是一款跨平台的免费源代码编辑器。它支持几乎所有主流的程序语言的语法高亮、智能代码补全、自定义热键等特性，支持插件扩展，是目前最为流行的代码编辑器之一[10]。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。本章介绍了在开发健身管理系统过程中应用的核心技术和主要开发工具等。这些技术与开发工具等都是当前较为主流的，有着广泛的社区支持和丰富的开发资源，能够为开发过程提供强大的技术保障。同时也能为开发人员带来便捷的开发体验。基于SpringBoot+Vue的健身房管理系统的设计与实现第3章需求分析本章主要对系统进行需求分析，确定系统需要解决的问题与健身房管理系统所要完成的功能。准确有效的需求可以减少后期修改和维护的成本，确保产品的质量，从而提高用户满意度。本系统的主要功能是供用户进行系统管理，会员管理，课程管理，器材管理，反馈管理等功能。实现权限分配，对于不同的用户，如教练与会员登录后所能使用的功能不同是开发本系统的一大难点。同时也要考虑用户对系统的使用体验感。3.2.1经济可行性开发本系统所用到的技术框架，如：SpringBoot、Vue等都是开源框架，使用的开发软件，如IntelliJIDEA、VisualStudioCode等也是开源软件，这大大节约了开发的成本。3.2.2技术可行性健身房管理系统所用到的使用SpringBoot加Vue的前后端分离的开发模式作为近年来非常热门的开发模式，有着许多的优点。如可以真正的实现前后端的解耦合从而加快整体系统的响应速度、可以减少后端服务器的负载压力、可以通过前后端的并行开发来提高开发的效率等，这些都能有效的提高开发效率。登录：用户可通过输入正确的用户名和密码、选择对应的用户类型来登录系统。系统管理：用户可在系统上对员工信息，系统角色信息，系统菜单信息进行相应的管理。会员管理：用户可在系统上对会员卡信息，会员信息等进行相应的管理。课程管理：用户可在系统上对课程进行管理，能报名对应的课程，并显示出自己报名的课程的信息。器材管理：用户可在系统上对器材信息进行管理。商品管理：用户可在系统上对商品进行管理，能进行下单操作，并能查看订单信息。失物招领：用户可在系统上对失物进行管理，能进行认领操作。反馈管理：用户可在系统上对反馈信息进行管理。本系统的主要服务用户为员工与会员，员工又分为超级管理员，普通员工与教练。图3-1超级管理员用例图图3-2会员用例图图3-3普通员工用例图图3-4教练用例图本节主要对健身房管理系统登录、查看会员个人信息、查看课程信息、报名课程、商品下单、认领失物等用例进行了分析。用户登录表3-1登录用例规约表用例名称登录参与者系统用户用例描述用户输入正确的登录信息，选择对应的用户类型后登入系统前置条件用户名已存在数据库中后置条件用户名、密码、验证码、用户类型输入正确事件流（1）用户在登录界面输入用户名、密码、验证码、用户类型（2）登录成功补充说明（1）若用户名在数据库中不存在，登录失败（2）若用户名、密码、验证码、用户类型输入错误，登录失败图3-5登录活动图2、查看会员个人信息表3-2查看会员个人信息用例规约表用例名称查看会员个人信息参与者系统用户用例描述用户进入会员管理页面查看信息前置条件用户已登录后置条件用户拥有对应权限事件流（1）用户进入会员管理界面（2）查看信息续上表3-2补充说明会员只能查看自己个人的信息图3-6查看会员个人信息活动图3、查看课程信息表3-3查看课程信息用例规约表用例名称查看课程信息参与者系统用户用例描述用户进入课程列表页面查看课程信息前置条件用户已登录后置条件用户拥有对应权限事件流（1）用户进入课程列表界面（2）输入所需的课程名称，点击查询（3）查看课程信息补充说明无图3-7查看课程信息活动图4、报名课程表3-4报名课程用例规约表用例名称报名课程参与者会员用例描述会员进入课程列表页面选择课程进行报名前置条件会员已登录后置条件会员拥有对应权限事件流（1）会员进入课程列表界面（2）输入所需的课程名称，点击搜索（3）点击课程旁的报名按钮（4）报名成功补充说明无图3-8报名课程活动图5、商品下单表3-5商品下单用例规约表用例名称商品下单参与者系统用户用例描述用户进入订单管理页面选择商品进行下单前置条件用户已登录后置条件用户拥有对应权限续上表3-5事件流（1）用户进入订单管理界面（2）点击下单按钮，进入购物车（3）点击选择商品按钮，进入商品列表（4）点击加入按钮，将商品加入购物车（5）返回购物车（6）选择商品数量后，点击确定按钮（7）下单成功补充说明无图3-9商品下单活动图6、认领失物表3-6认领失物用例规约表用例名称认领失物参与者系统用户用例描述用户进入失物列表页面选择失物进行认领前置条件用户已登录后置条件用户拥有对应权限事件流（1）用户进入失物列表界面（2）输入失物名称，点击搜索（3）点击认领（4）输入认领人名称，点击确定（5）认领成功补充说明若失物状态为已认领，则弹出信息该物品已被认领图3-10认领失物活动图7、添加反馈信息表3-7添加反馈信息用例规约表用例名称添加反馈信息参与者系统用户用例描述用户进入反馈列表页面添加反馈信息前置条件用户已登录后置条件用户拥有对应权限事件流（1）用户进入反馈列表界面（2）点击新增（3）输入反馈标题与内容后，点击确定（4）添加反馈信息成功补充说明无图3-11添加反馈信息活动图8、添加会员信息表3-8添加会员信息用例规约表用例名称添加会员信息参与者系统用户用例描述用户进入会员管理页面添加会员信息前置条件用户已登录后置条件用户拥有对应权限事件流（1）用户进入会员管理界面（2）点击新增（3）输入相应的会员信息后，点击确定（4）添加会员信息成功补充说明会员卡号不能重复，重复时，添加会员信息失败图3-12添加会员信息活动图9、分配权限表3-9分配权限用例规约表用例名称分配权限参与者超级管理员用例描述超级管理员进入角色管理页面为不同的角色分别分配权限前置条件超级管理员已登录后置条件无事件流（1）超级管理员进入角色管理界面（2）点击分配权限按钮（3）选择好要分配的权限后，点击确定（4）分配权限成功补充说明只有超级管理员拥有分配权限的权限图3-13分配权限活动图本节主要为术语表的描述。表3-10术语表术语名称解析超级管理员系统的最高管理者，拥有所有的权限系统用户系统基本功能的使用者会员健身房的会员本章对健身房管理系统进行了需求分析，确定了系统的各个功能模块，同时还展示了系统的用例图、规约表、活动图等。这可以帮助用户更好的了解系统的各项功能，同时也能为开发者提供清晰的指导，从而更好的完成系统的开发。基于SpringBoot+Vue的健身房管理系统的设计与实现第4章概要设计一个良好的设计在系统开发减少不必要的工作，同时还能起到一定的引导作用。本章将对系统的架构与功能模块设计进行阐述说明。本系统采用的是前后端分离的MVVM软件架构开发模式,将前端和后端的项目业务进行分离，可以做到更好地解耦合[11]。前端使用Vue框架进行设计开发，能够更好地对数据进行处理，使前后端数据交互更为容易便捷[12]。后端则采用的是目前在后端开发当中使用最为广泛的SpringBoot框架，它可以快速构建出一个独立的Spring应用，同时能够通过依赖启动器简化构建配置，并能自动化配置Spring和第三方库，大大的减轻了开发人员的负担。数据库接口的访问方面通过MyBatis-Plus进行。系统的总体设计框架图如下图所示。图4-1总体设计框架图本健身房管理系统主要划分为登录、系统管理，会员管理，课程管理等功能，不同的用户所能使用的功能也有所区别，如图4-2所示。图4-2系统功能图本章通过对系统架构设计与功能框架等方面的详细分析，展示了健身房管理系统的整体架构和关键功能模块。基于SpringBoot+Vue的健身房管理系统的设计与实现第5章详细设计本章将系统分为登录、新增、编辑、删除、查询等五大主要的功能模块，同时分别对这些模块进行了相应的分析说明。本节将通过时序图对健身房管理系统的主要功能模块进行说明。5.1.1用户登录模块用户在健身房管理系统的登录页面输入相关的登录信息，点击登录按钮调用login方法并将数据发送到后台，校验数据库中的信息与验证码，若账号、密码或验证码错误则登录失败，否则登录成功，并跳转到主页。图5-1用户登录时序图5.1.2用户查询模块用户可以在健身房管理系统的系统页面中的搜索栏输入想要搜索的对应的信息，点击查询按钮后系统会将关键字发送到后端校验。此时开始进行数据库检索，若检索失败，则页面显示暂无数据；若检索出相关数据，则返回对应数据并在前端页面显示。图5-2用户查询时序图5.1.3用户新增模块用户可以在健身房管理系统的各个系统页面中点击新增按钮进入新增页面，输入想要添加的对应页面的数据（如用户信息，会员信息等），输入完成后点击确定按钮，调用add方法，将数据发送至后端并添加到数据库中，然后系统页面将会刷新并显示最新的数据。图5-3用户新增时序图5.1.4用户编辑模块用户可以在健身房管理系统的各个系统页面中选择想要修改的数据（如用户信息，会员信息等），选择好后点击编辑按钮进入编辑页面，此时便可以修改对应页面的数据，修改完成后点击确定按钮，将数据发送至后端并更新对应的数据库表，然后系统页面将会刷新并显示最新的数据。 图5-4用户编辑时序图5.1.5用户删除模块用户可以在健身房管理系统的各个系统页面中选择想要删除的数据（如用户信息，会员信息等），选择好后点击删除按钮，此时系统会跳出提示确定删除该数据吗，此时点击确定，将会调用delete方法，将对应的数据从数据库中删除，然后系统页面将会刷新并显示最新的数据。图5-5用户删除时序图健身房管理系统包含的关键类有如下：SysUser（员工类），SysRole（角色类），SysMenu（菜单类），Member（会员类），MemberCard（会员卡类），Course（课程类），Material（器材类），Goods（商品类），Lost（失物类），Suggest（反馈类），对应的类图：1.SysUser,员工类，主要用于登录、员工管理等功能，关键属性为userId、username等。图5-6SysUser类图2.SysRole，角色类，主要用于角色管理功能，关键属性为roleId。图5-7SysRole类图3.SysMenu，菜单类，主要用于菜单管理功能，关键属性为menuId、parentId。图5-8SysMenu类图4.Member，会员类，主要用于登录、会员管理等功能，关键属性为memberId、username。图5-9Member类图5.MemberCard，会员卡类，主要用于会员卡管理功能，关键属性为cardId。图5-10MemberCard类图6.Material，器材类，主要用于器材管理功能，关键属性为id。图5-11Material类图7.Course，课程类，主要用于课程管理功能，关键属性为courseId、teacherId。图5-12Course类图8.Lost，失物类，主要用于失物招领功能，关键属性为lostId。图5-13Lost类图9.Suggest，反馈类，主要用于反馈管理功能，关键属性为id。图5-14Suggest类图10.Goods，商品类，主要用于商品管理功能，关键属性为goodsId。图5-15Goods类图本节主要分析了系统的数据库设计，其中包含了E-R图以及sys_user表、sys_role表、sys_menu表等主要数据表的阐述。应实体属性过多，E-R图中便省略了一些实体属性，详细属性见数据库表。5.3.1E-R图1.员工E-R图图5-16员工E-R图2.角色E-R图图5-17角色E-R图3.菜单E-R图图5-18菜单E-R图4.会员E-R图图5-19会员E-R图5.会员卡E-R图图5-20会员卡E-R图6.课程E-R图图5-21课程E-R图7.商品E-R图图5-22商品E-R图8.器材E-R图图5-23器材E-R图9.失物E-R图图5-24失物E-R图10.反馈信息E-R图图5-25反馈信息E-R图5.3.2数据库表1.sys_user表。该表存储了健身房管理系统员工的基本信息。表5-1sys_user表序号字段名类型含义1user_idint员工id2usernamevarchar账号3passwordvarchar密码4phonevarchar电话5emailvarchar邮箱续上表5-16sexvarchar性别：0为男，1为女7salarydecimal工资8user_typevarchar类型：1为员工，2为教练9statusvarchar状态10is_adminvarchar是否是管理员11is_account_non_expiredtinyint账户是否过期：1未过期，0已过期12is_account_non_lockedtinyint账户是否被锁定：1未锁定，0已锁定13is_credentials_non_expiredtinyint密码是否过期：1未过期，0已过期14is_enabledtinyint账户是否可用：1可用，0删除用户15nick_namevarchar姓名16create_timedatetime创建时间17update_timedatetime更新时间2.sys_role表。该表存储了健身房管理系统中角色的基本信息。表5-2sys_role表序号字段名类型含义1role_idint角色id2role_namevarchar角色名称3remarkvarchar备注4create_timedatetime创建时间续上表5-25update_timedatetime更新时间3.sys_menu表。该表存储了健身房管理系统菜单的基本信息。表5-3sys_menu表序号字段名类型含义1menu_idint菜单id2parent_idint父级id3titlevarchar菜单名称4codevarchar权限字段5namevarchar路由名称6pathvarchar路由path7urlvarchar组件路由8typevarchar类型：0目录，1菜单，2按钮9iconvarchar图标10parent_namevarchar上级菜单名称11order_numint序号12create_timedatetime创建时间13update_timedatetime更新时间4.member表。该表存储了健身房管理系统会员的基本信息。表5-4member表序号字段名类型含义1member_idint会员ID2namevarchar姓名3sexvarchar性别续上表5-44phonevarchar电话5ageint年龄6birthdayvarchar生日7heightint身高8weightint体重9waistint腰围10join_timevarchar加入时间11end_timevarchar到期时间12usernamevarchar会员卡号13passwordvarchar密码14statusvarchar状态：1启用，0停用15moneydecimal充值金额16card_typevarchar会员类型17card_dayint天数18pricedecimal会员价格19is_account_non_expiredtinyint账户是否过期：1未过期，0已过期20is_account_non_lockedtinyint账户是否被锁定：1未锁定，0已锁定21is_credentials_non_expiredtinyint密码是否过期：1未过期，0已过期22is_enabledtinyint账户可用否:1可用，0删除用户5.member_card表。该表存储了健身房管理系统会员的基本信息。表5-5member_card表序号字段名类型含义1card_idint会员卡id2titlevarchar标题3card_typevarchar卡类型：1：天卡，2：周卡，3：月卡，4：年卡4pricedecimal价格5card_dayint天数6statusvarchar状态：1启用，0停用6.course表。该表存储了健身房管理系统课程的基本信息。表5-6course表序号字段名类型含义1course_idint课程id2course_namevarchar课程名称3imagevarchar封面图4teacher_namevarchar授课教师5course_hourint课时6course_detailstext课程详情7course_pricedecimal课程价格8teacher_idint教师id7.goods表。该表存储了健身房管理系统商品的基本信息。表5-7goods表序号字段名类型含义1goods_idint商品id2namevarchar名称3pricedecimal价格4storeint库存5imagevarchar图片6detailstext描述7unitvarchar单位8specsvarchar规格8.material表。该表存储了健身房管理系统器材的基本信息。表5-8material表序号字段名类型含义1idint器材id2namevarchar器材名称3num_totalint数量4detailstext简介9.lost表。该表存储了健身房管理系统失物的基本信息。表5-9lost表序号字段名类型含义1lost_idintid2lost_namevarchar失物名称3found_timevarchar寻获时间续上表5-94found_addressvarchar寻获地址5found_personvarchar寻获人6found_phonevarchar寻获人电话7statusvarchar认领状态8lost_personvarchar认领人10.suggest表。该表存储了健身房管理系统的反馈信息。表5-10suggest表序号字段名类型含义1idintid2titlevarchar标题3contenttext反馈内容4date_timedatetime反馈时间本章通过时序图，类图等介绍了健身房管理系统中主要模块的业务流程，并借助E-R图与表格等对系统的数据库设计进行了分析。基于SpringBoot+Vue的健身房管理系统的设计与实现第6章系统实现本章将将进一步深入探讨健身房管理系统的实现细节，通过展示主要界面和部分核心代码，详细阐述系统的实现过程。系统的界面风格主要遵循简洁原则，界面使用蓝色为背景主体颜色，数据展示部分为白色背景，logo为哑铃图标，与系统的主要功能对象健身房相呼应。一个好的前端界面设计不仅能够在第一时间抓住用户的目光，同时也能很好的提高用户使用系统的舒适度。该部分主要展示系统的主要页面与核心代码。6.2.1登录页面登录页面头部为系统登录的字样，中间是账号、密码、验证码的输入框与用户类型的选择框，最下方则为登录与重置按钮。图6-1登录页面图核心代码：//登录提交constonSubmit=()=>{loginRef.value?.validate(async(valid)=>{if(valid){letres=awaitloginApi(loginModel);//使用方法调用对应接口if(res&&res.code==200){//存储userId与tokenstore.setToken(res.data.token);store.setUserId(res.data.userId);store.setUserType(res.data.userType);//跳转到首页router.push({path:"/"});}}})}//登录exportconstloginApi=(parm:LoginParm)=>{returnhttp.post("/api/login/login",parm)}6.2.2首页系统首页左侧为菜单栏，右侧头部最右边的部分为一个下拉栏，当鼠标移动到上方后便会出现修改密码与退出登录的选项，接着下方为导航栏，用户可以通过菜单栏与导航栏快速跳转到相应页面。右侧主体部分分为上下两部分，上部为显示会员总数，员工总数，器材总数与昨日订单的数量信息栏，下部则为使用ECharts制作的热销商品，热销卡，热销课程的图表与反馈信息的列表，用户可以通过首页快速的了解对应的信息。图6-2首页图核心代码：//获取总数constgetTotal=async()=>{letres=awaitgetTotalApi()//使用方法调用对应接口if(res&&res.code==200){total.userCount=res.data.userCount;total.memberCount=res.data.memberCount;total.materCount=res.data.materCount;total.orderCount=res.data.orderCount;}};//反馈列表constsuuggest=async()=>{letres=awaitgetSuggestListApi();//使用方法调用对应接口if(res&&res.code==200){suggestList.value=res.data;}}//统计总数exportconstgetTotalApi=()=>{returnhttp.get("/api/home/getTotal")}//反馈列表exportconstgetSuggestListApi=()=>{returnhttp.get("/api/home/getSuggestList")}6.2.3员工管理页面员工管理页面头部为两个搜索栏与搜索，重置、新增按钮，搜索栏可分别对姓名与电话进行关键字搜索，主体部分为一个表格，用来显示员工的各项基本数据，如姓名，账号，电话等，每项数据的旁边均有三个按钮，分别为编辑，删除与重置密码。最下方为分页栏。图6-3员工管理页面图核心代码：//新增@PreAuthorize("hasAuthority('sys:user:add')")@PostMappingpublicResultVoadd(@RequestBodySysUsersysUser){sysUser.setCreateTime(newDate());if(StringUtils.isNotEmpty(sysUser.getPassword())){sysUser.setPassword(passwordEncoder.encode(sysUser.getPassword()));}//设置是否是管理员sysUser.setIsAdmin("0");//判断该用户是否存在QueryWrapper<SysUser>query=newQueryWrapper<>();query.lambda().eq(SysUser::getUsername,sysUser.getUsername());SysUserone=sysUserService.getOne(query);if(one!=null){returnResultUtils.error("该账户已被注册！");}//保存sysUserService.addUser(sysUser);returnResultUtils.success("新增成功！");}//编辑@PreAuthorize("hasAuthority('sys:user:edit')")@PutMappingpublicResultVoedit(@RequestBodySysUsersysUser){sysUser.setUpdateTime(newDate());//判断该用户是否存在QueryWrapper<SysUser>query=newQueryWrapper<>();query.lambda().eq(SysUser::getUsername,sysUser.getUsername());SysUserone=sysUserService.getOne(query);if(one!=null&&!sysUser.getUserId().equals(one.getUserId())){returnResultUtils.error("该账户已被注册！");}//更新sysUserService.editUser(sysUser);returnResultUtils.success("更新成功！");}//删除@PreAuthorize("hasAuthority('sys:user:delete')")@DeleteMapping("/{userId}")publicResultVodelete(@PathVariable("userId")LonguserId){sysUserService.deleteUser(userId);returnResultUtils.success("删除成功！");}//查询@GetMapping("/list")publicResultVolist(PageParmparm){IPage<SysUser>list=sysUserService.getList(parm);if(list.getRecords().size()>0){list.getRecords().forEach(item->{item.setPassword("");});}returnResultUtils.success("查询成功！",list);}6.2.4角色管理页面角色管理页面头部为一个搜索栏与搜索，重置、新增按钮，搜索栏可对角色名称进行关键字搜索，主体部分为一个表格，用来显示角色的各项基本数据，如角色名称，角色描述，每项数据的旁边均有三个按钮，分别为编辑，分配权限与删除。最下方为分页栏。图6-4角色管理页面图核心代码：publicRolePermissionVogetMenuTree(RoleAssignParmparm){//查询用户信息SysUseruser=sysUserService.getById(parm.getUserId());List<SysMenu>list=null;//如果是超级管理员直接查询所有菜单if(StringUtils.isNotEmpty(user.getIsAdmin())&&user.getIsAdmin().equals("1")){list=sysMenuService.list();}else{list=sysMenuService.getMenuByUserId(user.getUserId());}//组装树型数据List<SysMenu>menuList=MakeMenuTree.makeTree(list,0L);//查询角色原来的数据List<SysMenu>roleList=sysMenuService.getMenuByRoleId(parm.getRoleId());List<Long>ids=newArrayList<>();Optional.ofNullable(roleList).orElse(newArrayList<>()).stream().filter(item->item!=null).forEach(item->{ids.add(item.getMenuId());});RolePermissionVovo=newRolePermissionVo();vo.setListmenu(menuList);vo.setCheckList(ids.toArray());returnvo;}6.2.5菜单管理页面菜单管理页面头部为一个新增按钮，主体部分为一个表格，用来显示菜单的各项基本数据，如菜单名称，类型，图标等，每项数据的旁边均有两个按钮，分别为编辑与删除。图6-5菜单管理页面图核心代码：publicList<SysMenu>getParent(){//查询目录和菜单String[]type={"0","1"};List<String>strings=Arrays.asList(type);//构造查询条件QueryWrapper<SysMenu>query=newQueryWrapper<>();query.lambda().in(SysMenu::getType,strings).orderByAsc(SysMenu::getOrderNum);List<SysMenu>menus=this.baseMapper.selectList(query);//组装顶级菜单（默认）SysMenumenu=newSysMenu();menu.setMenuId(0L);menu.setParentId(-1L);menu.setTitle("顶级菜单");menus.add(menu);//组装树数据returnMakeMenuTree.makeTree(menus,-1L);}6.2.6会员卡管理页面会员卡管理页面头部为一个搜索栏和搜索，重置与新增按钮，主体部分为一个表格，用来显示会员卡的各项基本数据，如标题，类型，天数等，每项数据的旁边均有俩个按钮，分别为编辑与删除。图6-6会员卡管理页面图6.2.7会员管理页面会员管理页面头部为三个搜索栏和搜索，重置与新增按钮，搜索栏可分别对姓名，电话与会员卡号进行关键字搜索。主体部分为一个表格，用来显示会员的各项基本数据，如会员卡号，姓名，电话等，每项数据的旁边均有一个按钮与一个多选栏，多选栏中为充值、编辑、删除与重置密码按钮，底部为分页栏。图6-7会员管理页面图核心代码：@OverridepublicvoidjoinApply(JoinParmjoinParm)throwsParseException{//根据会员id查询会员信息Memberselect=this.baseMapper.selectById(joinParm.getMemberId());//根据会员卡查询信息MemberCardcard=memberCardService.getById(joinParm.getCardId());//更新会员信息Membermember=newMember();member.setMemberId(joinParm.getMemberId());member.setCardType(card.getTitle());member.setCardDay(card.getCardDay());member.setPrice(card.getPrice());StringendTime=select.getEndTime();Calendarcalendar=Calendar.getInstance();//判断结束时间是否为空if(StringUtils.isNotEmpty(endTime)){Datedate=newSimpleDateFormat("yyyy-MM-dd").parse(select.getEndTime());calendar.setTime(date);//结束时间，加上会员卡类型的时间calendar.add(Calendar.DATE,card.getCardDay());}else{Datedate=newDate();calendar.setTime(date);//当前时间+卡的天数=结束时间calendar.add(Calendar.DATE,card.getCardDay());}member.setEndTime(newSimpleDateFormat("yyyy-MM-dd").format(calendar.getTime()));//更新会员信息inti=this.baseMapper.updateById(member);if(i>0){//插入办卡明细MemberApplyapply=newMemberApply();apply.setMemberId(member.getMemberId());apply.setCreateTime(newDate());apply.setCardDay(card.getCardDay());apply.setCardType(card.getTitle());apply.setPrice(card.getPrice());memberApplyService.save(apply);}}6.2.8我的充值页面我的充值页面主体部分为一个表格，用来显示充值数据，如会员卡号，会员姓名，充值金额等，底部为分页栏。图6-8我的充值页面图6.2.9课程管理页面课程管理页面头部为两个搜索栏和搜索，重置与新增按钮，搜索栏可分别对课程名称与教练进行关键字搜索。主体部分为一个表格，用来显示课程的各项基本数据，如课程封面，课程名称，课程价格等，每项数据的旁边均有三个按钮分别为编辑，报名，删除，底部为分页栏。图6-9课程管理页面图核心代码：//报名@PreAuthorize("hasAuthority('sys:courseList:join')")@PostMapping("/joinCourse")publicResultVojoinCourse(@RequestBodyMemberCoursememberCourse){//查询是否报名过该课程QueryWrapper<MemberCourse>query=newQueryWrapper<>();query.lambda().eq(MemberCourse::getCourseId,memberCourse.getCourseId()).eq(MemberCourse::getMemberId,memberCourse.getMemberId());MemberCourseone=memberCourseService.getOne(query);if(one!=null){returnResultUtils.error("您已经报名过该课程，请不要重复报名!");}//检查会员余额是否充足Coursecourse=courseService.getById(memberCourse.getCourseId());Membermember=memberService.getById(memberCourse.getMemberId());intflag=member.getMoney().compareTo(course.getCoursePrice());if(flag==-1){returnResultUtils.error("您当前的余额不足，请先充值!");}memberCourseService.joinCourse(memberCourse);returnResultUtils.success("报名成功!");}6.2.10我的课程页面我的课程页面主体部分为一个表格，用来显示课程的各项基本数据，如课程封面，课程名称，课程价格，教练等，每项数据的旁边均有一个按钮为导出学员，点击后可将选择了该课程的学员信息导出为Excel文档，底部为分页栏。图6-10我的课程页面图核心代码：//导出学员@RequestMapping("/exportStuInfo")publicvoidexportStuInfo(HttpServletResponseresponse,LongteacherId,LongcourseId)throwsException{List<ExportMemberVo>memberVoList=newArrayList<>();//根据教师id与课程id查询会员QueryWrapper<MemberCourse>query=newQueryWrapper<>();query.lambda().eq(MemberCourse::getCourseId,courseId).eq(MemberCourse::getTeacherId,teacherId);query.select("member_id");List<MemberCourse>list=memberCourseService.list(query);//会员idList<Long>ids=list.stream().map(MemberCourse::getMemberId).collect(Collectors.toList());if(ids.size()>0){List<Member>members=memberService.listByIds(ids);//组装数据for(inti=0;i<members.size();i++){ExportMemberVovo=newExportMemberVo();BeanUtils.copyProperties(members.get(i),vo);memberVoList.add(vo);}}//导出StringfileName="学员信息.xlsx";ExportParamsexportParams=newExportParams();exportParams.setType(ExcelType.XSSF);Workbookworkbook=ExcelExportUtil.exportExcel(exportParams,ExportMemberVo.class,memberVoList);downloadExcel(fileName,workbook,response);}6.2.11器材管理页面器材管理页面头部为一个搜索栏和搜索，重置与新增按钮，搜索栏可对器材名称进行关键字搜索。主体部分为一个表格，用来显示器材的各项基本数据，如器材名称，器材数量，每项数据的旁边均有两个按钮分别为编辑与删除，底部为分页栏。图6-11器材管理页面图核心代码：//列表查询@GetMapping("list")publicResultVolist(ListParmparm){//构造分页对象IPage<Material>page=newPage<>(parm.getCurrentPage(),parm.getPageSize());//构造查询条件QueryWrapper<Material>query=newQueryWrapper<>();if(StringUtils.isNotEmpty(parm.getName())){query.lambda().like(Material::getName,parm.getName());}IPage<Material>list=materialService.page(page,query);returnResultUtils.success("查询成功",list);}6.2.12商品管理页面商品管理页面头部为一个搜索栏和搜索，重置与新增按钮，搜索栏可对商品名称进行关键字搜索。主体部分为一个表格，用来显示商品的各项基本数据，如商品图片，商品名称，商品库存等，每项数据的旁边均有两个按钮分别为编辑与删除，底部为分页栏。图6-12商品管理页面图核心代码：//列表查询@GetMapping("list")publicResultVolist(GoodsParmparm){//构造分页对象IPage<Goods>page=newPage<>(parm.getCurrentPage(),parm.getPageSize());//构造查询条件QueryWrapper<Goods>query=newQueryWrapper<>();if(StringUtils.isNotEmpty(parm.getName())){query.lambda().like(Goods::getName,parm.getName());}IPage<Goods>list=goodsService.page(page,query);returnResultUtils.success("查询成功",list);}6.2.13订单管理页面订单管理页面头部为一个搜索栏和搜索，重置与下单按钮，搜索栏可对商品名称进行关键字搜索。点击下单按钮后进入购物车，再点击选择商品按钮进入商品列表选择完商品后即可返回购物车点击确定按钮完成下单。订单管理页面主体部分为一个表格，用来显示订单的各项基本数据，如商品图片，商品名称，价格等，底部为分页栏。图6-13订单管理页面图图6-14购物车页面图图6-15商品列表页面图核心代码：//下单@PostMapping("/down")publicResultVodown(@RequestBodyOrderParmparm){//根据用户id查询用户信息SysUseruser=sysUserService.getById(parm.getUserId());List<OrderItem>list=parm.getOrderList();if(list.size()==0){returnResultUtils.error("请选择商品!");}List<GoodsOrder>orderList=newArrayList<>();for(inti=0;i<list.size();i++){GoodsOrderorder=newGoodsOrder();LonggoodsId=list.get(i).getGoodsId();//获取商品信息Goodsgoods=goodsService.getById(goodsId);BeanUtils.copyProperties(goods,order);//设置数量order.setNum(list.get(i).getNum());order.setControlUser(user.getNickName());//设置订单金额BigDecimalnumber=BigDecimal.valueOf(list.get(i).getNum());BigDecimalprice=goods.getPrice();//总价BigDecimaltotal=number.multiply(price);BigDecimaltotalPrice=total.setScale(2,BigDecimal.ROUND_HALF_UP);order.setTotalPrice(totalPrice);order.setCreateTime(newDate());orderList.add(order);}goodsOrderService.saveBatch(orderList);returnResultUtils.success("下单成功!");}6.2.14失物招领页面失物招领页面头部为一个搜索栏和搜索，重置与新增按钮，搜索栏可对失物名称进行关键字搜索。页面主体部分为一个表格，用来显示失物的各项基本数据，如失物名称，寻获人，寻获地址等，每项数据的旁边均有三个按钮分别为编辑，删除与认领，底部为分页栏。图6-16失物招领页面图6.2.15反馈管理页面反馈管理页面头部为一个搜索栏和搜索，重置与新增按钮，搜索栏可对反馈标题进行关键字搜索。页面主体部分为一个表格，用来显示反馈信息数据，如标题与反馈内容，每项数据的旁边均有两个按钮分别为编辑与删除，底部为分页栏。图6-17反馈管理页面图核心代码：

//列表查询@GetMapping("/list")publicResultVolist(SuggestParmparm){IPage<Suggest>page=newPage<>(parm.getCurrentPage(),parm.getPageSize());QueryWrapper<Suggest>query=newQue