基于apicloud+vue的汽车服务系统设计与实现.doc

本科论文目 录摘 要IAbstractII引 言11 课题背景31.1 课题的研究背景与意义31.2研究现状31.3本章小结42 系统开发相关技术52.1 ApiCloud开发工具52.2 MVC架构模型52.3 MySQL数据库52.4 Hibernate、Spring框架62.5 本章小结63 系统分析73.1 系统需求分析73.1.1 功能需求分析83.1.2 性能需求分析83.2 系统可行性分析93.2.1 技术可行性93.2.2 管理可行性93.2.3 经济可行性93.3 本章小结104 系统设计114.1 系统架构设计114.2 系统模块设计124.3 数据库设计134.3.1 数据库实体关系图134.3.1 数据库数据字典164.4本章小结185系统实现195.1 系统环境搭建195.2 系统主要模块实现195.2.1 登录功能195.2.2 首页轮播图215.2.3 地图模块实现245.2.4 汽车服务实现245.2.5 车辆信息审核255.3 客户端主要功能实现265.3.1 客户端注册登录265.3.2 客户端汽车服务275.4 本章小结286系统测试296.1 系统测试方法296.1.1 系统测试计划296.1.1 系统测试类型296.2 系统测试的目的和原则296.3 系统功能测试296.4 本章小结31结论与展望32致 谢33参考文献34本科论文摘 要随着互联网时代的到来，计算机科学技术的飞速前进，以及计算机的迅速普及,人们开始愈来愈多地通过计算机用于实际问题的解决。汽车服务管理系统是现代企业信息管理的重要组成部分之一,面对大量的汽车百货商店零件信息、汽车装饰信息、汽车美容信息，使用传统的纸张处理信息将会浪费大量的时间、人力和物力，而且数据的准确性很低。因此，开发一个界面友好、易于操作的汽车服务管理系统软件进行处理已经变得非常重要，这也是本系统开发的目的。本系统根据汽车维修服务管理流程的特点和系统的建设目标，采用B/S(Browser/Server)模式的系统结构模型。系统以apicloud studio作为前台开发工具，idea作为后台开发工具，运用MySql数据库存储数据，为客户提供了客户注册，车辆信息查看，修改资料等功能，为管理者设计用户信息管理，车辆信息录入，服务信息录入，轮播管理，查看服务场所位置等功能。本系统通过前后台代码搭建而成，操作简单，安全性强，可行性好，可以有效减少企业的经营成本，提高工作效率。关键词：汽车服务；Java；MySQL；Apicloud AbstractWith the advent of the Internet era, the rapid development of computer science and technology, and the rapid popularization of computers, people begin to use computers more and more for solving practical problems. Automobile service management system is one of the important parts of modern enterprise information management. In the face of a large number of parts information, automobile decoration information, automobile beauty information, using traditional paper processing information will waste a lot of time, manpower and material resources, and the accuracy of the data is very low. Therefore, it is very important to develop a user-friendly and easy to operate auto service management system software for automatic processing, which is also the purpose and significance of the system development.According to the characteristics of automobile maintenance service management process and the construction goal of the system, this paper adopts B / S (Browser / server) mode of maintenance service management system structure model. The system uses apicloud studio as the foreground development tool, uses MySQL database to store data, provides customers with the functions of customer registration, information viewing, data modification, etc., and provides managers with the functions of user information management, vehicle information management, maintenance appointment management and value-added services for customers. A kind of.This system is easy to operate, safe and feasible. It can effectively reduce the operating cost of the enterprise and improve the working efficiency.Keywords: Automobile service; Java; MySQL; Apicloud引 言随着汽车进入家庭，汽车消费者变得更加理性，国内汽车消费者结构发生了重大变化。现代汽车消费者的消费观念不仅是可以满足汽车维修的需求，而且追求一种高效，廉价和个性化的服务。汽车服务系统的主要任务是通过计算机管理客户信息，使用数据收集，查询等步骤对内容和服务类型进行分类、提供更便捷、周到的服务。科学技术的进步促进了我们日常生活的改善，人们通过互联网可以快速的获取信息，发布信息和传播信息，我们生活的各个方面都有它的身影，在很多地方都发挥着弥足珍贵的作用。成为人们越来越接近没有互联网就无法完成的社会生活，强大的通讯优势使更改信息获取的难度和复杂性变得容易而简单。同时，中国的计算机应用已经变得非常普遍，现在已经与计算机密不可分，特别是在信息处理中，无论环境如何。困难极大地提高了信息的效率和可靠性。尤其是在处理更复杂的信息时，人脑无法完成计算，但是计算机可以更好地利用计算优势。因此，在这个充满计算机信息技术应用程序的通用环境中，信息收集、处理、通信和应用程序功能已成为人们最重要的功能。在如今信息的发展飞速，科学技术一天一个样。像面部识别，自动驾驶汽车和正在使用的支付宝和微信。随着这些智能产品的出现，电子信息产业彻底改变了我们的生活。中国的科学技术发展迅猛，高端智能产品层出不穷，像如今每个人都在使用的支付宝、微信，像人脸识别，像自动驾驶汽车。此类智能产品的出现，无一不说明电子信息产业正在悄悄地影响改变着我们的生活。该设计项目基于互联网环境，为拥有汽车的所有用户提供准确且非常方便的车辆维护信息，以便可以及时维护车辆，并改善有关服务商的统计信息。本文第一章介绍了系统的开发背景、意义以及现状，第二章介绍了系统开发所使用的工具和所用到的技术，详细介绍了所用技术的特点。第三章系统需求分析，包括系统功能分析和系统的性能需求，并对系统设计之前的准备工作进行详细介绍。第四章介绍了系统的数据库表结构的设计和总体架构的设计，包括系统架构的优点以及原理，例如每个数据表的字段类型和约束。同时，分析了系统客户端浏览器与服务器之间的通信原理。第五章是一个系统的实现，其中包括每个功能的实现，并通过大量的文字说明，阐述了每个功能的实现原理，以图形方式显示了该功能的界面，并附上了该功能的核心代码。第6章介绍了如何测试系统的核心功能，包括登录功能，业务信息管理功能和密码修改功能，并通过测试达到了预期的标准。1 课题背景1.1 课题的研究背景与意义随着时代的发展，人们越来越追求便捷的生活。在不离开家的情况下寻求便利。综合了汽车信息服务，云计算和车辆电子技术，智能交通，如今我们身边的无人驾驶技术，语音识别，人机交互等。这些都标志着车辆互联的到来。汽车的问世需要结合在线和离线服务，以提供适合汽车用户需求的产品。 现代企业技术公司的信息技术经济快速发展，汽车行业与互联网逐渐相结合，使汽车越来越变得智能。2019年6月为止，中国的汽车保有量为3.53亿和2.5亿，持有驾驶证的人数已达到4.21亿，拥有驾驶汽车的人数为3.8亿。在未来十年中，汽车公司的发展趋势是用混合动力和纯点驱动器代替动力控制系统。车身变轻，汽车自动驾驶并连接到汽车。在新能源方面，中国新能源汽车已达3.43亿美元，占汽车总数的1.37。纯电动汽车仍然是新能源汽车领域的“主流选择”，占新能源汽车的81.74。 该系统旨在通过网络的及时性和开放性为用户提供非常方便，快捷的应用程序，以便用户可以接收准确的消息，并且更多的用户可以在不离开房屋的情况下完成消息。上车，进行维护预订，检查附近的加油站，然后选择附近。对于需要汽车维修的人，无需等待即可提前在线预订，然后直接去商店维修。如果您有任何不便，可以选择上门服务以满足汽车使用者的需求并节省更多时间。 1.2研究现状截至2015年底，中国传统汽车的数量已超过1.75亿辆。汽车售后市场产业已超过750亿，并且每年以15的速度增长。中国汽车的平均年龄为五岁。车辆可能会在系统维护，管理和维护频率很高的时期进入。社会对汽车金融服务的需求处于爆炸性状态。中国的平均车龄超过5年。所有者离开了4S商店，而4S商店售后人员的业务功能急剧下降。 在汽车服务行业，政府反托拉斯垄断并非罕见。虽然国内外网络平台上关于此类系统实现应用不在少数，但是各个平台也存在一定被人诟病的功能。如页面比较错乱，要浪费一定的时间查找。本系统结合相关平台优点，并对其不完美的地方进行改进，设计出更为简洁的页面，更为清晰地功能，更好地为用户服务。人们越来越追求便捷的生活。在不离开家的情况下寻求便利。结合了智能交通，车辆信息服务，4S商店系统已经陷入了历史的圣殿，并且正在崩溃。私家车服务业已到了真正的春天。市场继续按主要市场细分。促销、专业化和品牌化已成为推动消费的关键因素。 1.3本章小结本章结主要介绍了本课题的现实意义以及研究背景，其次还介绍了国内和国外汽车服务业发展的现状，市面相关平台的缺点及自己项目的优越点。其次陈述了系统的开发环境及开发工具，最后列举了本系统使用的相关技术。本章全面系统地阐述了系统开发前的各项准备。2 系统开发相关技术2.1 ApiCloud开发工具Apicloud公众开发平台是基于当前混合云服务模型的重要平台，可以大大降低移动应用程序开发和管理的难度，简化移动应用程序开发技术Error! Reference source not found.。 APICloud的“云集成”概念是具有混合模式开发技术的核心知识产权的平台，可以让移动互联网布局实现的更加快速，以满足各种开发需求。 API Cloud主要由“云API”和“端API”两个部分组成，同时，平台的模块存储中有许多APP功能模块，可为开发人员提供服务，开发人员可开发移动应用软件的整个生命周期。可以支持。构建和管理移动应用程序可以大大缩短您的开发周期。 2.2 MVC架构模型本系统采用经典的“模型-视图-控制器（MVC）”设计模型，在MVC中，系统的模型用于处理数据，视图显示给用户，控制器处理请求逻辑。为了获得“高内聚，低耦合”的思想，经典的MVC模型2，将整个业务应用程序被划分为业务逻辑层（BLL），表示层（UI）和数据访问层（DAL）。用户基于表示层对数据输入和资源反馈提供接口用来数据传输，接收输入到接口的数据并显示返回到该接口的数据方面起着重要作用。业务逻辑层主要确保数据资源的安全。为确保系统资源库的安全性和可靠性，并确保在各个层之间以有效且安全的方式依次传输传输中的数据，请从表示层接收和发送验证请求，例如验证数据，存储数据和处理数据：数据信息访问层是资源库和数据库之间的联络人。核心任务是与资源库和数据库进行交互和通信。根据业务逻辑层进行区分之后，访问数据库并添加和删除数据库。检查实际操作3。此模式的示意图如图2.1所示。 图2.1 MVC三层架构模式图2.3 MySQL数据库My SQL是由瑞典公司My SQL-AB开发的一款经典的关系型数据库。与其他数据库系统相比，MySQL数据库使用的内存更少，但是如果您不熟悉编写DOS代码，则应该有一个可以使用的可视程序4。使用MySQL数据库开发系统时，数据库厂商提供连接的jar包，通过jar包，MySQL可以和任何语言连接，连接好数据库启动系统通过hibernate可以自动创建数据表。 MySQL是一个中小型的关系数据库，具有一些开源，快速响应和永久的功能5。但是，普通的MySQL数据库必须安装可视化软件。 2.4 Hibernate、Spring框架Hibernate是一个出色的持久性框架，支持自定义存储过程和高级映射，可以使用一个简单的XML或注解来配置和映射以及原生家庭类型、接口和Java数据库中的记录6，基本工作原理如图2.2所示。Spring框架从开销，大小这两方面来说都是轻量级的。独自用SpringMVC控制器，对象，模型和调度来处理程序对象，这样的分离的作用，让它们更容易定制7。从可测试性、简单性和松耦合的角度分析而言，任何Java语言开发的问题都可以从Spring中得到受益。图2.2 Hibernate基本执行原理图2.5 本章小结本章主要对使用到的各种技术进行了详细说明。并包含前端使用到的技术APIcloud、jQuery、JS，服务端使用到的MVC开发模式、spring+spring+Hibernate框架技术。3 系统分析3.1 系统需求分析系统分析属于系统科学。系统科学是一个多学科的新科学系，从系统的观点或客观的观点进行审查和研究，自1940年代以来，它在世界范围内迅速发展，以了解科学理论并改变人类世界和方法。它的产生和发展水平意味着我们的人文科学管理思想正在从“以物理为中心”一步步过渡到“以系统为中心”，这是科学技术思想上历史性重要突破8。 系统分析是最基本的研究方法。可以将复杂的应用项目视为系统的基础项目。通过对于系统元素分析、系统目标的分析、系统资源分析、系统环境的分析和系统管理分析，能够准确地诊断问题并深入了解问题形成的原因，从而更有效地得出满足客户的需求方案9。 3.1.1 功能需求分析对于管理员来说，注册并登录成功后，可以进行用户管理：对使用该系统的用户的信息进行增删改等操作，如清除无用账号、帮助修改用户信息等。车辆信息管理：对车辆相关信息进行添加、修改、删除等操作。服务信息管理：对汽车服务相关信息进行添加、修改、删除等操作。用户管理：添加用户为用户设置权限。（1）用户模块功能描述用户登录模块：用户根据注册的手机帐号和密码登录。这包括两部分：输入用户的登录名和密码。用户功能需求表如表3.1所示。浏览服务模块：当用户进入主页时，单击该模块后将显示信息。 （2）管理模块功能的描述管理员登录系统模块：进入登录页面，输入正确的帐户密码进行登录。用户管理：您可以查看和删除在前台注册的用户。管理员用户功能需求表如表3.2所示。 用户信息查询模块：注册用户有权查询所有用户信息。包括登录名，姓名，电话号码和年龄。当然，关于隐私，用户有权不写。 板块管理：新增，修改，删除板块信息。车辆信息管理：审核信息，修改，删除信息。服务信息管理：添加服务，设置服务地址，删除服务信息。表3.1 用户功能需求表编号功能名称功能描述输入内容输出内容1用户注册对普通用户进行检测用户名，密码、联系电话等注册的结果（提醒“用户注册成功”或者“用户注册失败”）2用户登录用户通过身份验证登入用户名、密码用户登录是否成功表3.2 管理员用户功能需求表编号功能名称功能描述输入内容输出内容1添加服务信息管理员添加服务服务地点，类型信息服务信息表2编辑服务信息管理员修改服务信息服务地点，类型信息是否编辑成功3用户浏览信息查看管理员录入的信息活动报名信息审核查看管理员录入的信息4审核车辆信息后台审核用户录入的信息用户录入车辆信息查看管理员录入的信息3.1.2 性能需求分析系统要具备良好的性能，才能安全稳定的运行，为了让本系统更加健壮，系统要具备，准确性、公开性、易操作性、可兼容性等性能，详细如下所示：（1）系统处理信息的及时性系统应对用户执行的操作进行准确的处理以及及时的响应，保证各功能准确的实施，增强用户体验度。（2）系统的公开性系统应该提供对外的接口，便于与其他平台的连接，进行系统间的数据交换9。（3）系统的易操作性本系统是面向用户的，但对于第一次接触的用户对系统的操作可能会比较陌生，所以系统的功能界面要简洁、清晰、易操作。（4）系统的可兼容性系统的前端方面应在各个浏览器中均能成功显示。3.2 系统可行性分析3.2.1 技术可行性本系统基于浏览器/服务器系统，通常称为B/S系统。如今，诸如手机和计算机之类的计算机设备已广为人知，并且在普通消费者的消费阶段价格逐渐保持不变，随着信息技术的更新，计算机和手机的性能也在逐渐提高10。该系统采用HTML和Java编码技术，逐步简化和推广了移动应用软件技术，从Android开发到混合模式开发的实现为移动软件应用的未来发展提供了巨大的机会。混合开发模型中最常用和最方便的开发平台是APICloud平台，该平台网站为用户提供各种帮助，包括培训课程。MySQL数据库和HIbernate框架用于为系统设计提供技术支持和保证。同时，该系统对UI技术的要求较低，开发界面简单明了。所以，该系统在技术上是可行的11。 3.2.2 管理可行性在分析研究对象和分析对象的属性的过程中，我们根据内部定律，使用以“事物”为中心的面向对象的方法，建立了一个解决方案模型12。可以基于此方法构建的基于软件的系统，无论外部市场环境或功能开发需要如何变化，都不会改变目标的内部功能，这与传统的“面向过程”训练方法不同13。由于功能分解是主要的研究方法，并且随着功能要求的不断变化，软件公司的整体经济结构可能会发生变化，进而影响管理系统不稳定。因此，基于这种方法实现软件系统，软件的整体结构没有改变，因此系统稳定。功能需求分析以及系统的性能需求分析，本系统分为普通用户及管理员两种用户，只有注册成功后才可以登录本系统。不同的人物，登录后浏览不同的页面、使用各自的系统功能。此外系统要具有准确性、公开性、易操作性、可兼容性等性能。因此该方法可以充分实现系统管理的可行性14。3.2.3 经济可行性从设计与开发的设备流程到人力资源等方面进行分析在经济上的可行性主要表现有以下几个方面：第一，本系统前端运行只需要手机操作代替人工的繁杂劳动，节省了时间和摆台材料经费15。第二，现如今几乎人人都具有手机，同时APP的下载是免费的因此不必担心会有多余的消费。第三，节省人工，使用系统可以减少人工16。综上所述，在经济上是可行的。3.3 本章小结本章首先对讲述了我国系统对于服务业的优势，说明了本系统的可行性。其次，针对不同角色对象，对系统的前后台系统进行了业务功能需求分析。不同的人物，登录后浏览不同的页面、使用各自的系统功能4 系统设计4.1 系统架构设计汽车服务平台系统分为管理端和客户端，本系统使用Java开发语言，前端使用Html、Css、Vue.js，开发环境为vue-cli。客户端开发工具Apicloud；开发工具为IDEA，数据库使用Mysql数据库，数据库开发工具为Navicat；前端和服务端使用api.ajax进行交互，服务端和数据库使用Hibernate进行连接17。（1）项目客户端使用Vue框架，使用APICLOUD开发工具，基于vue脚手架构建单页面应用。项目客户端程序结构图如图4.1所示。图4.1项目客户端程序结构图（2）服务端基于Java语言，使用IDEA开发工具，jdk1.8和Tomcat9.0开发环境，采用SpringMvc、Spring、Hibernate技术进行开发18。项目服务端程序结构如图4.2所示。图4.2项目服务端程序结构图4.2 系统模块设计该项目的客户主要分为模块，分为用户注册、搜索、新能源汽车、混合动力、汽油、柴油、加油站、加油站、充电文件、维护中心、维修店、洗车定位等模块。后台管理系统功能结构图如图4.3所示。汽车服务系统后台用户中心管理爆款展示模块消息管理服务模块统计模块用户信息管理用户注册登录爆款信息管理爆款信息录入报名审核管理发布消息审核服务添加服务标点区域地图显示图4.3后台管理系统功能结构图 本项目的后台管理系统分为五个模块，主要分为管理员登录、用户管理、用户管理、系统设置、使用帮助、车辆管理和汽车服务等模块。 用户登录：进入客户端后，用户自动进入登录页面，输入用户帐号和密码进入汽车服务平台客户端。 位置服务：您可以在首页上找到用户的实时位置，并提供附近的后续服务。 汽油：单击主页上的汽油模块以查看有关所有汽油车的详细信息。 广告幻灯片放映：广告显示在首页上。 汽车显示：主页上的汽车信息，参数，配置，内饰，品牌和其他详细信息。 查询汽车型号：选择主页上的搜索功能并过滤汽车名称，即可查看汽车信息，并根据列表显示搜索结果。 新能源汽车：单击主页上的“新能源汽车”模块以显示有关所有新能源汽车的详细信息。 混合动力车：单击主页上的“混合动力车”模块以显示有关所有混合动力车的详细信息。 加油站服务：提供有关最近的加油站的信息，以选择最近的加油站并为用户创建路线计划。 汽油：单击主页上的汽油模块以查看有关所有汽油车的详细信息。 柴油：单击主页上的柴油模块以查看有关所有柴油车辆的详细信息。 浏览汽车型号：在汽车列表或搜索页面上单击要查看的汽车型号，然后进入要查看的汽车详细信息页面。 客户服务：通过单击“主页”模块中的“在线客户服务”解决用户的怀疑。 加油站服务：提供有关最近的加油站的信息，以选择最近的加油站并为用户创建路线计划。 加油站服务：提供有关最近的加油站的信息，以选择最近的加油站并为用户创建路线计划。 洗车场：提供有关最近的洗车场的信息，以选择距离您最近的洗车场并计划您的导航路线。 维护中心：提供最近的维护中心的信息以选择最近的维护中心并计划您的路线。 维修工厂：提供最近的维修工厂的信息，选择最近的维修工厂并计划您的路线。 4.3 数据库设计4.3.1 数据库实体关系图因为可以根据特定的分析数据模型在社会上构建现实世界，所以必须同时考虑许多因素，因此设计和研究工作非常复杂，效果也不令人满意。解释结构19。为了说明数据库结构的概念模型,E-R图用于描述系统数据库中的实体关系。E R图不仅可以描述两个真实公司之间的联系，而且可以描述两个或多个真实经济体之间的关系20。 （1）用户信息包括ID（主键）、用户名、密码、电话号码、会员级别和性别。用户信息对象关系图如图4.4所示。 图4.4用户信息实体关系图（2）汽车服务信息表包含ID（主键）、服务时间、车牌号、联系电话、维护名称、总价和员工等字段。汽车服务信息实体关系图如图4.5所示。 图4.5汽车服务信息实体关系图（3）汽车耗材信息表包括编号（主键）、名称、价格、描述和数量。汽车实体关系图如图4.6所示。 图4.6汽车耗材实体关系图（4）车辆维护信息表中包括5个字段，包括编号（主键）、维护名称、价格、描述和时间。汽车维修实体关系图如图4.7所示。 图4.7汽车维护体关系图（5）汽车美容信息表中包括5个字段，序号设置为自增且为主键、编号（主键）、维护名称、价格、描述和时间。自动美容对象关系图如图4.8所示。 图4.8汽车美容实体关系（6）汽车装饰信息表包括编号（主键），装饰名称、价格、描述和数量。汽车装饰实体关系图如图4.9所示。 图4.9汽车装饰实体关系图4.3.2 数据库数据字典数据字典是系统可以描述的各种类型的信息数据的统一集合，并且是通过详细的数据技术收集和数据分析获得的主要研究结果，并且数据用法字典描述了系统使用的所有表结构21。当用到数据模型的程序被开发时，数据字典用来帮助你理解数据项适合用在结构中的哪些地方，本系统的主要数据如下所示。 表4.1用户基本信息表列名数据类型NULL约束描述IdINT(11)NOTNULLPrimaryKey用户idpasswordVARCHAR(45)NOTNULL密码UsernameVARCHAR(45)NOTNULL用户名NameVARCHAR(45)NOTNULL昵称AgeINT(11)NOTNULL年龄GenderVARCHAR(45)NOTNULL性别DateTimeDateNOTNULL出生日期表4.2汽车服务基本信息表列名数据类型NULL约束描述IdINT(11)NOTNULLPrimaryKey用户idFwnameVARCHAR(45)NOTNULL服务名称moneyVARCHAR(45)NOTNULL价格TimeVARCHAR(45)NOTNULL服务时间CarIdVARCHAR(45)NOTNULL车牌号phoneVARCHAR(45)NOTNULL电话fwmsVARCHAR(45)NOTNULL描述ygnameVARCHAR(45) NOTNULL所属职工 表4.3汽车用品基本信息表列名数据类型NULL约束描述IdINT(11)NOTNULLPrimaryKey用户idBynameVARCHAR(45)NOTNULL名称moneyVARCHAR(45)NOTNULL价格bymsVARCHAR(45)NOTNULL描述numberVARCHAR(45) NOTNULL数量表4.4车辆列表基本信息表列名数据类型NULL约束描述IdINT(11)NOTNULLPrimaryKey用户idNemeVARCHAR(45)NOTNULL车辆名称typeVARCHAR(45)NOTNULL车辆类型newcarVARCHAR(45)NOTNULL是否为新车CarIdVARCHAR(45)NOTNULL车辆图片BrandARCHAR(45) NOTNULL价格表4.5登录状态表列名数据类型NULL约束描述IdINT(11)NOTNULLPrimaryKey登录状态IDLoginSNameVARCHAR(45)NOTNULL登录状态名DescriptionVARCHAR(45)NOTNULL状态描述LoginifBOOLEANNOTNULL是否登录中4.4本章小结本章内容是对系统的设计，首先对功能的分析，总结出特点。详细说明了系统分为哪几个模块，每个模块大致包含哪些功能。最后对系统的数据库表进行了详细的分析。并详细具体的说明了各个功能的实现原理，通过抓图和代码的配合，将功能的核心准确地展现了出来。5系统实现5.1 系统环境搭建 安装Apicloud开发工具。进入apicloud官网下载，进行安装。 安装IDEA开发工具。进入idea官网进行下载安装即可。 jdk安装。打开甲骨文公司官网下载jdk。 下载vue.Js。打开vue.js官网下载即可。(5) 配置javahome环境变量。打开计算机属性，然后单击高级设置-环境变量-javahome目录添加jdk安装目录22。 5.2 系统主要模块实现5.2.1 登录功能用户登录界面主要与数据库用户表有关，此页面设计相对简单，由三个元素组成：文本框，标签和列表框。登录时，用户根据标签内容在文本框中输入登录帐号和密码以及联系电话进行登录。如果正确输入用户帐号和密码，您将被带到用户验证和完整的用户信息界面。如果输入了错误的输入帐号和密码，将出现错误信息提示，用户必须重新输入。用户登录界面如图5.1所示。 图5.1 用户登录界面展示图用户登录核心代码ResponseBody / 请求映射 = url RequestMapping(value = "verification", method = RequestMethod.POST) public Layui verification( ModelMap modelMap, HttpServletRequest request, HttpServletResponse response, Model model, RequestParam(value = "userName", required = false) String userName, /请求参数 RequestParam(value = "对应参数", required = false) String passWord /别名 RequestParam(value = "passWord", required = false) String passWord) try System.out.println(request.getSession().getAttribute("KAPTCHA_SESSION_KEY"); String username = request.getParameter("userName"); String pwd = request.getParameter("passWord"); String captchacode = request.getParameter("captchacode"); UsernamePasswordToken token = new UsernamePasswordToken(username, pwd); Subject currentUser = SecurityUtils.getSubject(); /没有登录的用户进行登录 if (!currentUser.isAuthenticated() currentUser.login(token); Locale locale = Locale.SIMPLIFIED_CHINESE; Date date = new Date(); DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale); String formattedDate = dateFormat.format(date); model.addAttribute("currentUser", username); model.addAttribute("serverTime", formattedDate); catch (UnknownAccountException uae) / 用户名未知. System.out.println("用户不存在" + uae); model.addAttribute("errorMsg", "用户不存在"); return Layui.data(403, "用户不存在" + uae, 1, null);