基于BS小区车辆管理系统.docx

基于B/S小区车辆管理系统摘要随着当今社会的快速发展人们对车辆信息的查询需求日益增加，而传统的查询方式效率低下，无法满足用户需求。同时，车辆作为重要的交通工具和资产，其管理也变得至关重要。该文在分析多个小区物业在车辆管理存在的问题基础上，设计实现一个前后端分离基于B/S的车辆管理系统，实现用户在线查询车辆、新建车辆、修改车辆、删除车辆等功能，同时对系统功能特点和设计方案进行了说明。关键词：JAVA数据库在线查询用户管理第一章绪论1.1 课题的来源及背景随着城市化进程的加快，人们对居住环境的要求也越来越高，小区成为城市居民生活的重要组成部分。然而，随之而来的问题也日益突出，尤其是小区车辆管理问题。传统的小区车辆管理方式主要依靠人工登记和管理，存在着信息不及时、管理效率低下、易出现漏洞和纸漏等问题。因此，基于b/s的小区车辆管理系统应运而生。小区车辆管理系统的来源可以追溯到对城市交通管理日益严峻的挑战。随着城市化进程的不断加快，车辆数量迅速增长，停车难、交通拥堵等问题日益突出。特别是在小区内，由于车辆数量众多，传统的管理方式已经难以满足需求，因此迫切需要一种更高效、更智能的管理系统来解决这一问题。小区车辆管理系统的出现，正是针对传统管理方式的不足，旨在提高管理效率、减少人力成本、增强安全性和便利性。通过互联网技术的应用，小区车辆管理系统能够实现车辆信息的在线登记、查验和管理，提供了更便捷、更高效的解决方案。在社会背景方面，随着城市化进程的加快，小区车辆管理问题已成为一个亟待解决的难题。传统的手工登记和管理方式效率低下，容易出现漏洞和纸漏。随着城市交通压力的增大，小区车辆管理问题也日益凸显。传统的管理方式已经难以适应城市化发展的需求，因此迫切需要一种更高效、更智能的管理系统来解决这一问题。此外，随着人们生活水平的提高，对居住环境的要求也越来越高。小区作为城市居民的居住地，其管理和服务水平也受到了更高的关注。而小区车辆管理作为小区管理的重要组成部分，直接关系到小区居民的生活质量和安全。因此，开发一个基于b/s的小区车辆管理系统具有重要的现实意义和市场需求。总的来说，小区车辆管理系统的来源和社会背景主要源于城市化进程的加快、城市交通管理的挑战以及居民生活质量的提高。基于B/S的小区车辆管理系统的出现，为解决传统管理方式存在的问题提供了新的解决方案，有望成为城市管理和居民生活中的一大利器。1.2 研究目的及意义随着经济的不断的发展，我国市场中涌现出许多新型高端的小区，随着这些小区的入住率不断的增加，小区中的车辆种类和数量也有了大规模的增加，且车辆的使用频率不断提高，在此背景下，课题研究基于B/S的小区车辆管理信息系统，系统的设计和建设要满足以下目标：随着城市化进程的加快，小区车辆管理问题日益凸显，传统的手工登记和管理方式已经难以满足需求。因此，研究开发基于b/s的小区车辆管理系统具有重要的现实意义和市场需求。本文旨在探讨基于小区车辆管理系统的研究目的及意义。首先，研究目的方面，基于小区车辆管理系统的研究目的主要包括以下几个方面：1.提高管理效率：传统的小区车辆管理方式主要依靠人工登记和管理，效率低下。而基于b/s的小区车辆管理系统能够实现车辆信息的在线登记、查验和管理，提高管理效率，减少人力成本。2 .增强安全性：小区车辆管理系统能够实现对车辆信息的实时监控和管理，提高了小区的安全性，有效防范了非法车辆进入小区的风险。3 .提升居民生活质量：良好的小区车辆管理系统能够提升小区的整体管理水平，改善居民的生活环境，提升居民的生活质量。4 .适应城市化发展需求：随着城市化进程的加快，小区车辆管理问题日益凸显，基于b/s的小区车辆管理系统能够更好地适应城市化发展的需求，为城市管理提供新的解决方案。接下来，研究意义方面，基于小区车辆管理系统的研究意义主要体现在以下几个方面：1 .社会意义：基于b/s的小区车辆管理系统的研究对于提升城市管理水平、改善居民生活环境具有重要的社会意义。通过提高管理效率、增强安全性，小区车辆管理系统有望为城市管理和居民生活带来积极的影响。2 .经济意义：良好的小区车辆管理系统能够提高管理效率，减少人力成本，为小区管理带来经济效益。同时，基于b/s的小区车辆管理系统也为相关企业提供了商机和发展空间3 .科技意义：研究开发基于b/s的小区车辆管理系统，将促进互联网技术在城市管理领域的应用，拓展了互联网技术在实际生活中的应用范围。4 .环境意义：良好的小区车辆管理系统有助于减少小区内的交通拥堵现象，改善环境质量，为居民提供更加舒适的生活环境。综上所述，基于小区车辆管理系统的研究目的在于提高管理效率、增强安全性、提升居民生活质量、适应城市化发展需求；研究意义则主要体现在社会意义、经济意义、科技意义和环境意义等方面。因此，开发基于b/s的小区车辆管理系统具有重要的现实意义和市场需求，对城市管理和居民生活具有积极的促进作用。1.3 国内外研究现状小区车辆管理，作为现在物业信息化管理的一个重要组成部分，在国外已经有了相当长的发展从最初的基于文件的MIS,到现在的关系型数据库的MIS,从C/S的车辆管理系统到B/S的车辆管理系统，在这重大的变革过程中，我们都能看到车辆管理系统的不断发张和进步。国内的研究现状：在国内，针对基于B/S的车辆查询系统的研究和应用已经取得了一定的进展。一些政府部门和交通管理机构已经建立了基于B/S架构的车辆信息管理系统，用于管理车辆的基本信息、行驶证信息、违章信息等。这些系统提供了便捷的查询服务，方便用户查询车辆的相关信息，同时也提供了数据统计和分析功能，帮助管理部门进行车辆管理和监管。国内的一些高校和科研机构也进行了相关领域的研究，探索如何利用B/S架构实现车辆信息的管理和查询，以及如何提高系统的安全性和稳定性。总体来说，国内在基于B/S的车辆查询系统方面已经有了一定的研究和实践经验,但仍有提升空间。未来可以进一步探索如何结合云计算、大数据等新技术，提升系统的性能和用户体验。国外的研究现状：在国外，基于B/S的车辆查询系统也得到了广泛的研究和应用。一些发达国家的政府部门和交通管理机构已经建立了先进的车辆信息管理系统，采用B/S架构，用于管理车辆的注册信息、行驶证信息、保险信息、年检信息以及违章信息等。这些系统通常提供了便捷的查询服务，用户可以通过互联网轻松查询到相关的车辆信息，同时也提供了数据统计和分析功能，帮助管理部门进行车辆管理和监管。在国外，一些先进的技术如云计算、大数据分析等也被应用到车辆查询系统中，提升了系统的性能和用户体验。同时，一些国外公司也在车辆信息的安全管理方面进行了深入研究，提出了一些先进的安全技术和策略。总体来说，国外在基于B/S的车辆查询系统方面也取得了一定的成就，不断引入新技术和理念，提升系统的功能和性能。这些经验对于国内的车辆查询系统的设计和实现具有借鉴意义。1.4 课题的主要工作本课题的目的是设计和实现一款基于B/S的小区车辆管理系统，用于完成对现代化物业的车辆管理的信息化，提高物业的办公效率，提升物业的综合实力。论文首先比较了国内外小区车辆管理系统的建设现状，提出了现在国内小区车辆管理中存在的困难和不足，然后针对这些情况进行了需求分析，提出了基于B/S的小区车辆管理系统的设计和实现，最后给出了该原型系统的实现示例。本文的主要工作集中在以下几点：1 .通过对国内小区车辆管理的调查和研究，确定国内小区车辆管理信息系统的建设目标。小区车辆管理信息系统涉及的车辆数据非常大，车辆管理操作流程复杂。因此，需要对小区车辆管理进行全面的需求分析，确定项目目标。2 .2.根据需求分析，对系统进行设计和实现。首先，选择合适的开发平台，在此基础上，对系统进行整体性的设计，包括车辆管理信息系统的物理架构、逻辑架构和功能架构等。然后，依据功能架构，划分系统模块，进行功能模块下的业务流程设计与优化，并对业务流程加以实现。最后，建设车辆管理信息系统的关系数据库模型。3 .系统测试。依据系统的设计与实现情况，对系统的每个模块进行全面的测试，保证系统功能的全面性、健壮性。第二章需求分析小区车辆管理系统的实际需求分析包括对小区车辆管理的方方面面进行全面考量。首先，系统需要具备车辆登记和信息管理功能，包括车辆基本信息、车主信息、车牌号码等的录入和管理。综合考虑小区实际情况和管理需求，系统还应具备易用性、稳定性、实时性和扩展性等特点，以满足小区车辆管理的实际需求。根据小区的实际情况十分需要设计一种相对安全的基于B/S的小区车辆管理系统所以对基于B/S的小区车辆管理系统功能及形式提以下要求：1.界面美观并且大方，人机交互性强，各大功能以按钮的形式存在于主界面内,页面之间可以相互跳转，无论在哪个页面都可以清晰明了，对特殊的要求及功能可以单独方式打开，页面内以按钮的形式调用相应的功能页面，各个页面功能划分清晰明了。2 .运行平台为WlNDOWS、MAC等浏览器上。3 .整个系统分为：用户登录、用户注册、车辆管理、注销用户四个部分。4 .系统需要建立数据库。5 .系统应用具备的安全性。第三章平台与开发工具的选择3.1B/S架构B/S的定义：B/S架构(BrOWSeiVServer),是WEB兴起后产生一种软件设计结构。基于B/S架构的软件，通常利用Internet作为连接用户请求和后台业务逻辑以及数据的通道，WEB浏览器是客户端最主要的应用软件，而软件的主体部分，包括数据以及业务逻辑则可以分开设计部署，通常部署于后台服务器。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用，实现了客户端的零部署。典型的B/S架构如图3.1所示图3.1典型的B/S架构图如图3.1所示，典型的B/S架构，将服务部署在Web服务器和后台数据库，用户只需要通过网络发送HTTP的请求，就可以进行各项业务操作。可以说，B/S是浏览器和服务端的真正意义上的实现，在B/S模式下，用户客户端不需要在部署任何系统相关的软件，只需要能够通过浏览器上网，就可以完成各项业务。B/S模式在方便办公的同时，极大的降低了系统维护的费用。3.2B/S优点B/S的优势B/S架构(BroWSelVServer架构)是一种常见的Web应用程序架构，其优点包括：跨平台性：B/S架构基于Web浏览器和服务器，用户端只需具备浏览器即可访问应用程序，不受操作系统的限制，具有很好的跨平台性。维护方便：应用程序的安装、更新和维护都在服务器端进行，用户端无需安装独立的应用程序，大大减轻了维护的负担。安全性：B/S架构可以通过安全套接字层（SS1.）等技术实现数据传输的加密，保障数据的安全性，同时服务器端集中管理数据，降低了数据泄露的风险。灵活性：由于应用程序运行在Web浏览器上，用户可以随时随地通过互联网访问应用程序，具有较高的灵活性和便捷性。成本效益：B/S架构下的应用程序无需在用户端安装，减少了硬件和软件成本，同时提高了系统的可维护性和扩展性。更新方便：应用程序的更新只需在服务器端进行，用户端无需进行任何操作，大大简化了应用程序的更新和升级过程。部署简单：B/S架构应用程序的部署相对简单，只需在服务器端进行部署即可，用户端无需进行任何部署操作。综上所述，B/S架构具有跨平台性、维护方便、安全性、灵活性、成本效益、更新方便和部署简单等诸多优点，因此在Web应用程序开发中得到广泛应用。3.3 缺点B/S架构（BrOWSer/Server架构）虽然具有诸多优点，但也存在一些缺点，包括：客户端依赖：B/S架构需要依赖Web浏览器作为客户端，对浏览器的版本和兼容性要求较高，可能会受到浏览器的限制。性能受限：由于B/S架构应用程序在服务器端运行,客户端需要通过网络传输数据，因此性能受到网络带宽和延迟的限制，可能会影响应用程序的响应速度。客户端资源占用：B/S架构应用程序在客户端运行时可能会占用较多的系统资源，特别是在处理大量数据或复杂交互时，可能导致客户端设备的性能下降。安全性风险:B/S架构应用程序的客户端依赖Web浏览器,可能受到跨站脚本攻击、跨站请求伪造等Web安全问题的影响，需要采取相应的安全措施。离线使用受限：B/S架构应用程序通常需要依赖网络连接，离线状态下无法使用，对于一些需要离线使用的场景不太适用。开发复杂度：相比传统的C/S架构（CIient/Server架构），B/S架构的开发可能相对复杂一些，特别是在涉及大量客户端交互和复杂逻辑的情况下。数据安全性：由于大部分数据存储在服务器端，一旦服务器端出现问题，可能导致数据丢失或泄露，需要采取相应的数据备份和安全措施。综上所述，B/S架构虽然具有诸多优点，但也存在客户端依赖、性能受限、安全性风险、离线使用受限、开发复杂度和数据安全性等方面的缺点，因此在选择架构时需要根据具体应用场景进行权衡和选择。3.4 B/S于C/S的区别C/S(Client/server)模式，服务器通常采用高性能的PC、工作站或小型机，并采用大型数据库系统，如OraCIe、MySQ1.。客户端需要安装专用的客户端软件。本文从多个方面把两者进行比较内容如表3.1所示：比较内容B/SC/S建立基础局域网广域网安装需要安装只需要浏览器压力客户端压力大服务器压力大其它升级和维护成本高，不受网速影响，更安全，断网时不能与其它电脑共享资源适应性强，受网速影响，不够安全更加注重访问速度，共享性强业务扩展方便、维护简单、兼容问题大表3.1B/S与C/S的比较3.5 开发工具的选择本次设计所用的编程语言主要是JAVA,开发工具是IntelliJlDEA。JAVA的简介:JaVa是一种高级编程语言和计算平台，最初由SunMicrosystems(后被OraCIe收购)的詹姆斯高斯林(JameSGOSling)等人开发。JaVa语言的设计目标是实现“一次编写，到处运行"(WriteOnce,RunAnywhere,WORA),即通过JaVa虚拟机(JVM)实现跨平台的特性。以下是JaVa的一些详细介绍：语言特性：面向对象：JaVa是一种面向对象的编程语言，支持类和对象的概念，提供了封装、继承和多态等面向对象的特性。平台无关性：JaVa程序可以在不同操作系统上运行，只需在对应平台上安装Java虚拟机(JVM)即可。强类型：JaVa是一种强类型语言，要求变量在使用前必须声明其类型，这有助于减少程序运行时的错误。自动内存管理：JaVa通过垃圾回收机制自动管理内存，程序员不需要手动释放内存。多线程：JaVa内置对多线程编程的支持，使得并发编程变得更加容易。安全性：JaVa提供了安全管理机制，可以防止恶意代码对系统造成破坏。高性能：JaVa通过即时编译技术(Just-In-TimeCompilation)实现了较高的性能。Java平台介绍：JavaSE(StandardEdition)：用于桌面应用程序、嵌入式系统和服务器应用程序的标准版JaVa平台。JavaEE(EnterpriseEdition)：用于企业级应用开发的Java平台，提供了大量的APl和服务。JavaME(MicroEdition)：用于移动设备和嵌入式系统的小型版JaVa平台。Java生态系统介绍：开发工具：包括ECliPSe、IntelliJIDEANetBeanS等集成开发环境(IDE)。框架和库：如SPring、Hibernate>StrUtS等，提供了丰富的功能和组件，简化了开发过程。应用服务器：如TomcatJBoss>Web1.ogic等，用于部署和运行JavaEE应用程序。Android平台：Android应用开发使用Java作为主要开发语言。Java应用领域：企业级应用开发：JaVaEE广泛应用于企业级应用的开发，如电子商务系统、客户关系管理系统等。移动应用开发：Android平台使用Java作为主要开发语言。大数据处理：Hadoop.SPark等大数据处理框架通常使用JaVa进行开发。云计算：许多云计算平台和工具使用JaVa作为主要的开发语言。综上所述，Java是一种功能强大、广泛应用的编程语言，具有跨平台性、面向对象、安全性、多线程等特性，适用于多种应用场景，是软件开发领域中的重要技术之一。3. 6JAVA的优缺点Java开发的优点：跨平台性：JaVa程序可以在不同操作系统上运行，只需在对应平台上安装JaVa虚拟机(JVM)即可，实现了“一次编写，到处运行”的特性。强大的生态系统：JaVa拥有丰富的开发工具、框架和库，为开发人员提供了丰富的资源和支持，可以快速开发复杂的应用程序。面向对象：JaVa是一种面向对象的编程语言，支持封装、继承、多态等面向对象的特性，有助于提高代码的可维护性和可重用性。内存管理和安全性：JaVa通过垃圾回收机制自动管理内存，减少了内存泄漏的可能性，同时提供了安全管理机制，可以防止恶意代码对系统造成破坏。多线程支持：JaVa内置对多线程编程的支持，使得并发编程变得更加容易，有助于提高程序的性能和响应速度。Java开发的缺点：性能：相比一些编译型语言（如CC+）,JaVa的性能可能稍逊一筹，尤其是对于一些对性能要求极高的应用场景。内存消耗：由于JaVa的自动内存管理机制，有时候会导致一定的内存消耗，尤其是在一些嵌入式系统和资源受限的环境中。学习曲线：相比一些脚本语言和其他语言，JaVa的学习曲线可能相对较陡，尤其对于初学者来说，需要花费一定的时间来熟悉语言和相关的生态系统。部署复杂性：JaVa应用程序通常需要JaVa虚拟机（JVM）来运行，这可能增加了部署和维护的复杂性。尽管JaVa有一些缺点，但其优点仍然使其成为一种广泛应用的编程语言，尤其在企业级应用开发、移动应用开发、大数据处理等领域具有重要地位。3.7InteIIiJIDEA的介绍IntelliJIDEA是一款由JetBrains公司开发的集成开发环境（IDE）,专门用于Java、Kotlin>GroOVy和SCala等编程语言的开发。它是目前广受开发者欢迎的一款优秀的IDE,具有丰富的功能和强大的工具集，被认为是JaVa开发领域中最好的IDE之一。以下是IntelliJIDEA的一些主要特点和功能：智能代码编辑：InteHiJIDEA具有智能的代码编辑功能，包括代码自动完成、代码导航、重构、语法高亮、代码模板等，能够帮助开发者提高编码效率。强大的调试器：IDEA内置了强大的调试工具，支持断点调试、表达式查看、变量监视等功能，帮助开发者快速定位和解决代码中的问题。丰富的插件生态系统：IntelliJIDEA支持丰富的插件，可以扩展其功能，满足不同开发需求，例如支持各种框架、库、版本控制系统等。集成构建工具：IDEA集成了常用的构建工具，如MaVen和GradIe,能够方便地管理项目的依赖和构建过程。版本控制集成：支持Git、SVN等版本控制系统，提供了直观的版本控制工具，方便开发者管理代码版本。内置的代码分析和检查：ImeHiJIDEA内置了代码质量分析工具，可以帮助开发者发现潜在的问题和改进代码质量。支持多种语言:除了JavaJntelliJIDEA还支持其他编程语言,如Kotlin.Groovy.Scala等，使得开发者可以在同一个IDE中进行多种语言的开发。总的来说，ImelIiJIDEA是一款功能丰富、强大而灵活的IDE,为JaVa开发者提供了高效的开发环境和工具，极大地提升了开发效率和代码质量。第四章系统的总体设计与结构图4.1系统功能分析该系统采用了层次化模块设计方法对系统总体进行设计和分析。本系统的功能模块主要完成如下功能：身份验证功能：登录模块的主要作用是为了限制小区车辆管理系统的使用，只有经过身份确认的用户才可以访问和使用相关资源，为了确保该系统用户的数据信息安全所以提供完善的信息权限管理，登陆时都需要进行身份验证，确保用户的信息安全可靠。车辆管理：凡是经过登录的用户都可以进行车辆管理操作，用户可以操作自己页面的新增车辆信息，修改车辆信息，删除车辆信息，并且用户可以查询信息，查询信息可以全部查询和按条件查询，用户只可以进行查询不能进行修改主页面的任何内容。注销用户：利用注销用户功能，可以返回到登录模块界面。用户管理功能：用户管理模块将用户分为超级用户和普通用户，当以管理员身份登录后可以添加用户和删除用户.管理员可以分配权限。4. 2系统的功能特点操作简单、界面友好、完全控件式的页面布局，使得车辆管理工作更加简单，许多功能比如注册、新增、修改、删除等只需要用户点击鼠标就可以完成即使可以：对车辆的处理（新增车辆、修改车辆、删除车辆、查询车辆）将立即在页面上显示出来，达到即使见效的功能。功能完善：包括常见的目录、新增车辆、修改车辆、删除车辆、查询车辆等实现了网站上在线的管理要求。第五章数据库设计与实现基于Web的数据库访问技术通常涉及使用一种或多种技术来实现从web应用程序到数据库的数据访问和交互。以下是一些常见的基于web的数据库访问技术：SQ1.语句：使用SQ1.语句来直接与数据库进行交互，包括查询、插入、更新和删除数据等操作。在Web应用程序中,可以通过后端的服务器端脚本语言(如PHP、PythOn、JaVa等)来执行SQ1.查询，并将结果返回给前端页面。ORM(对象关系映射)框架：ORM框架可以将数据库表映射为对象，使开发人员可以使用面向对象的方式来访问和操作数据库。常见的ORM框架包括Hibernate(Java)、EntityFramework(.NET)等。在Web应用程序中，开发人员可以使用ORM框架来简化数据库访问和操作。数据访问层(DataACCeSS1.ayer)：在Web应用程序中，可以使用数据访问层来封装数据库访问的细节，使业务逻辑层和数据库之间实现解耦。数据访问层可以包括数据库连接管理、数据查询和更新操作等功能。RESTfulAPI：通过使用RESTfUIAPI,可以在Web应用程序和数据库之间建立一种标准化的数据交互方式。开发人员可以通过HTTP请求和响应来访问和操作数据库中的数据。数据库连接池：为了提高性能和资源利用率，可以使用数据库连接池技术来管理数据库连接。数据库连接池可以在Web应用程序和数据库之间提供连接的复用和管理，以减少连接的创建和销毁开销。以上技术可以单独或结合使用，根据具体的需求和技术栈来选择合适的数据库访问技术。在实际应用中，还需要考虑数据库安全性、性能优化、事务管理等方面的问题，以确保数据库访问的稳定和安全。本系统中的数据库文件选择的是比较通用和简介的MySQ1.数据库作为后台数据，在MySQ1.中建立数据库CARdb,在CARdb下建立userinfo表和carinfo表用来记录注册用户信息和车辆信息，具体结构说明如下：USeHnfO表的说明：字段名称数据类型字段说明usernameVarchar用户名passwordint密码Useridint主键userphoneint用户电话Gradeidint用户级别1表示超级用户2表示普通用户表5.3userlnfo说明字段名称数据类型字段说明CaridInt主键CamameVarchar车辆名称CarcolorVarchar车龄颜色Carlpnvarchar车牌号表5.2carlnfo说明第六章系统的详细设计本系统共分为几个模块，分别是：系统登录模块、系统注册模块、车辆管理模块、注销模块：6.1系统登录模块登录脸证事发送短信推荐使用还没H,点击立BD注册登录模块界面功能说明：用户登录模块主要是为了系统的安全设置的，负责接受用户输入用户名和密码，验证码短信验证码，并且进行处理的-查询数据库.通过对用户输入信息的检测，确定用户是否合法，如果合法进入主页面否则提示该用户不存在。录模块流程图：主要代码：<html><head><metacharset=11utf-811>Vtitle>登录页面<title><linkrel=',styIesheetnhref=".csslogin.css"><scriptsrc=".jslogin.js"><script><head><body><divid="app"><divclass=11content11><divCIaSS="header”>登录<div><divclass=11main11><inputtype=ntext11id=11user"class="input_item"PIaCehOlder="账号”><inputtype=11text11id=11pwd"class=11input-item"placeholder="S',><divclass=11YZM"><inputtype="textnid=',yzm-id"class=',input-itemyzm,PIaCehOlder二"验证码”><inputtype=11button"id="yzm_btn"VaIUe="验证码"><div><divclass="DX',><inputtype=,text"id=',dxjdclass="input_itemdx"placeholder="短信”><inputtype="button“id="dx_btn"ValUe="发送短信”><div><divclass="BTN11><inputtype=11button"id="loginBtn"value="登录”><inputtype="button”id="resetBtn”VaIlle="注销”><div><div><divclass=,'fboter">推荐使用<ahref=',javascript:void(0)">快速登录va><div><divclass="reg"><ahref=".register.html">还没账号，点击立即注册<a><div><div><div><divid="cover11><div><divid="module"><divclass=',close"><imgSrC=".img登录注册img/绅士.ng"alt=""><buttonid="ck>seBtn">恭喜小主完成扫码登录<bulton><div><div><body><html>window.onload=function()/遮罩层事件letfooter=document.querySelector(',.footer");letCloseBtn=document.querySelector("#closeBtnH);letcover=document.querySelector(H#covern);letmodule1=document.querySelector("#modulen);footer.onclick=function()cover.style.display=11block"modulel.style.display="block"closeBtn.onclick=function()cover.style.display=unone11;module1.style.display=',none")/账号失焦事件letuser=document.querySelector(H#user");user.onblur=function()if(user.value=",r)user.placeholder="账号不能为空"；elseif(user.value.length<3user.value.length>7)user.value=,11;USer.placeholder="账号长度不对”；elseuser.style.borderBottom=,'lpxsolidrgb(168,193,237)n;)/密码失焦事件letpwd=document.querySelector(H#pwd");pwd.onblur=function()if(pwd.value="”)PWc1.PlaCehoIder="密码不能为空”；elseif(pwd.value.length<3pwd.value.length>7)pwd.value=""pwd.placeholder="密码长度不对"；elsepwd.style.borderBottom="lpxsolidrgb(168,193,237)")验证码点击事件letyzm_btn=document.querySelector("#yzm_btn");letyzm_id=document.querySelector("#yzm_id");yzm_btn.onclick=function()letnum=Math.ceil(Math.random()*10000);if(num>999&&num<10000)yzm_btn.value=num;验证码失焦事件yzmjd.onblur=function()if(yzm_id.value=*'n)yzmjd.placeholder="验证码不能为空”;elseif(!(yzmjd.value.length=4)yzm_id.value=yzm_id.placeholder="验证码长度不对”；)elseyzm_id.style.borderBottom=111pxsolidrgb(168,)I/短信点击事件letdx_btn=document.querySelector("#dx_btn");letdx_id=document.querySelector(H#dx_idM);dx_btn.onclick=function()letnum=Math.ceil(Math.random()*1000000);if(num>99999&&num<1000000)dx_btn.value=num;)短信失焦事件dx_id.onblur=function()if(dxjd.value="")dx_id.placeholder="短信不能为空”;elseif(!(dx_id.value.length=6)dxjd.value=,"dx_id.placeholder="短信长度不对”；else193,237)n;193,237),f;dx_id.style.borderBottom=,1pxsolidrgb(168,/登录点击事件letIoginBtn=document.querySelector("#loginBtnu);loginBtn.onclick=function()(if(user.value="admin"&&pwd.value="admin"&&yzm_btn.valueyzm_id.value&&dx_btn.value=dx_id.value)alert("页面马上发生跳转”);window.location.href=u.main.htm,;elsealert("账号密码或验证码短信输入有误，请重新输入!”)；user.value=user.placeholder="账号"；pwd.value=PWd.placeholder="密码"；yzm_id.value=,m;yzm_id.placeholder="验证码”；dxjd.value='m'dx_id.placeholder="短信"；1重置点击事件letresetBtn=document.querySelector("#TeSetBIrr);resetBtn.onclick=function()user.value=',11;user.placeholder="账号"；pwd.value='",;PWC1.PIaCehoIder="密码"；yzm_id.value=",;yzm_id.placeholder="验证码”；dx_id.value='11'dx_id.placeholder="短信"；6.2统注册模块注册可以登录到主页面。注册模块流程图：主要代码：<html><head><metacharset=11utf-811>vtitle>注册页面vtitle><linkrel=',stylesheethref=".cssregister.css"><scriptsrc=".jsregister.js11><script><head><body><divid="app"><divclass=',contentu><divClaSS="header”）注册<div><divclass=,mian',><inputid=11user"class=,input-item"type="text"placeholder=*PKn><inutid=11pwd"class=11inutjtem,'type="text"PIaCeholder="密码”><inputid="repwd"class="inputjtem"type=,text"placeholder=*'5密码”><inputid="emai'class="inputjtem,'type=11text"PIaCehoIder="电子邮箱”<inputid=11tel11class=,'input-item"type="text*PlaCeholder="手机号码,><div><divclass=ufbotern><inputid=',submitBtn"type="button"value="ft,><inputid=11resetBtn"type="butlon”ValUe="注销”><div><divclass=ulogin"><divclass=,'login-title">其他方式登录<div><divclass="login_contentM><aclass="login_item"href=',#"><imgSre=1img登录注册img/zhifubao.png“<a><aCIa