基于Java EE的城市公交线路仿真系统_定稿.docx

《基于Java EE的城市公交线路仿真系统_定稿.docx》由会员分享，可在线阅读，更多相关《基于Java EE的城市公交线路仿真系统_定稿.docx（44页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、基于Java EE的城市公交线路仿真系统学 院：专 业：姓 名：指导老师：计算机学院计算机科学与技术颜锐涛学 号：职 称：160201102885洪媛媛工程师中国珠海二二年四月北京理工大学珠海学院2020届本科生毕业设计诚信承诺书本人郑重承诺：本人承诺呈交的毕业设计基于Java EE的城市公交线路仿真系统是在指导教师的指导下，独立开展研究取得的成果，文中引用他人的观点和材料，均在文后按顺序列出其参考文献，设计使用的数据真实可靠。本人签名： 日期： 年 月 日基于Java EE的城市公交线路仿真系统摘 要城市公交线路仿真系统是应用科技手段提升公交管理水平和调度技能，如开发动态线路仿真系统，运用当

2、代通讯技术研发科技公交。随着社会经济的高速发展以及城镇化进程的加快，人们对于公共交通的质量与效率的追求不断提高，公共交通需求日益多样化，其中城市公交作为最初始的公共交通尤为重要。由此可见，城市公交线路仿真系统能在一定程度上压力帮助城市缓解公共交通压力。本课题旨在基于Java EE的基础上，开发一款城市公交线路仿真系统。运用前后端分离技术，通过使用VUE + Springboot 的逻辑结构开发，使用VUE完成前端的开发，并结合Springboot的后端开发技术，利用跨域连接前后端，完成系统开发。本文主要从选题背景与意义、可行性与需求分析、功能设计与实现、测试等四个方面，按照制作的流程对本次设计

3、进行论述，对开发的思路、实现以及实现过程中的主要问题都予以描述记录。关键词：城市公交线路；深圳公交；VUE；Springboot；前后端交互Simulation system of urban public transportation line based on Java EEAbstractUrban bus line simulation system is the application of scientific and technological means to improve the level of bus management and scheduling skills,

4、such as the development of dynamic line simulation system, the use of contemporary communication technology to develop scientific and technological buses. With the rapid development of the social economy and the acceleration of the urbanization process, peoples pursuit of the quality and efficiency

5、of public transportation continues to increase, and public transportation needs are increasingly diversified. Among them, urban public transportation is particularly important as the initial public transportation. It can be seen that the urban bus line simulation system can help the city relieve the

6、 pressure of public transportation to a certain extent.This subject aims to develop a city bus line simulation system based on Java EE. Using front-end and back-end separation technology, through the use of VUE + Springboot logical structure development, using VUE to complete the front-end developme

7、nt, combined with Springboots back-end development technology, the use of cross-domain connection front-end and back-end, complete system development.This article mainly discusses the design according to the production process from four aspects: the background and significance of the topic selection

8、, the feasibility and demand analysis, the functional design and function implementation, and the testing. The problem is described and recordedKeywords: Urban bus lines；Shenzhen public transport；VUE；Springboot；Front and back interaction目 录1. 前言11.1. 选题背景11.2. 本系统在国内外的发展概况及存在的问题11.3. 本系统的目的、意义及应达到的技

9、术要求21.4. 本系统应解决的主要问题22. 可行性研究32.1. 技术可行性32.2. 经济可行性32.3. 总结33. 概要设计43.1. 系统框架设计43.2. 系统功能模块设计64. 功能详细设计与实现104.1. 线路查询功能设计与实现104.2. 线路创建设计114.3. 线路编辑设计134.4. 线路汇总设计144.5. 线路仿真设计154.6. 登录与注册功能设计164.7. 权限控制设计194.8. 数据设计205. 测试215.1. 测试思路与方法215.2. 基础测试225.3. 具体功能测试235.4. 测试总结246. 总结25参考文献26谢 辞27附 录281.

10、前言1.1. 选题背景随着社会经济的高速发展以及城镇化进程的加快，人们对于公共交通的质量与效率的追求不断提高，公共交通需求日益多样化，其中城市公交作为最初始的公共交通尤为重要。根据城市公交现状问题分析与线网布局规划模式研究10，城市公交系统一般包含公交线路、站点、运营支持系统四个方面，它们相互配合共同作用。近些年来，城市公交发展问题一直都是每一个城市都需要解决的重要问题，许多问题都需要通过系统分析并解决，如公交线路覆盖不全面，公交运营时间不当等问题，城市公交问题已经成为制约社会可持续发展的首要问题。优化公交运营系统性能已然成为解决城市发展问题和提高市民生活质量的首要目标。通过设计城市公交线路仿

11、真系统，我们就可以使得公交线路管理更加的规范与高效，所以笔者选择设计基于java EE的城市公交线路仿真系统优化与解决城市公交治理问题和优化城市公交管理水平1.2. 本系统在国内外的发展概况及存在的问题根据浅谈国内外交通仿真发展概况，不难发现城市交通仿真技术成长最快和最先的国家就是美国，世界上其他国家的仿真软件都是在美国的交通仿真技术的基础上进行进一步的发展，美国早在1967年就有计算机专业的专家就组织成立了美国的计算机仿真学会（SocietyforComputerSimulation），仿真学会的成立极大的推进了美国在城市交通仿真方面的技术钻研的发展22。世界上很多国家才逐渐开始对交通仿真技

12、术的感兴趣且开始研究，期间也源源不断有新的仿真软件出现，可是大部分仿真软件都不能实际投入生产使用中。如今已经到了21世纪，已经有大部分交通仿真软件都已经实现了交通仿真软件的商业化，并且投入实际生产使用中，就如西班牙TSS公司开发的AIMSUN2，是一款交互式交通仿真软件，适用于检验与测试交通控制系统，它还能够用于对交通状况的进行预测以及优化车辆导航系统和其他实时交通信息的应用。与国外相比，在那个年代国内整个交通行业发展薄弱，更别说道路交通系统仿真方面研究有什么起色。早在20世纪80年代，我国交通仿真技术发展初期，大部分技术研究都是集中在高等院校等研究机构进行研究，主要是为了解决一些相对简单的交

13、通问题进行研究模拟，可是这些研究对于交通实际问题的解决并没有起到太大的作用。经过许多年的研究与摸索后，我国交通工程的相关研究人员才开始意识到需将研究方向改为如何实际性的解决交通问题，此后就开始钻研相关的建设性研究。如在2014年东北大学徐晓昱设计的基于Flexsim的城市公交系统仿真，用数学模型来描述公交系统微观层次的细节存在局限性，离散虚拟现实的仿真技术作为一种重要的研究手段可以有效避免这一缺陷20。 2020年国内交通仿真软件的研发已经处于一个高速发展的阶段，从技术层面上看，我国的交通仿真技术已经属于世界顶级水平，虽然当初我国基础技术和人才方面都较为单薄，但是通过我国的科技人才不断努力的研

14、发，如今已经能达到商用化水平，不过还是有许多的问题需要优化与解决，例如交通线路规划管理、交通运营方案，仿真软件设计，公交线路数据采集等许多技术上的问题。1.3. 本系统的目的、意义及应达到的技术要求本次毕业设计主要集中研究城市公交线路规划类型，并设计制作一款城市公交线路仿真系统，我们就可以做到公交信息管理的系统化、规范化和自动化。将传统公共交通系统的开环方式不断优化，调整为闭环反馈的整体调控过程，且更加高效，从而建立体系辨识、状态与演变再现、趋向善于分析和预测的分析能力，实现一种全新概念的智能管理系统和手段，从而优化城市公交的治理问题。城市公交作为突显城市文明的主要窗口行业之一，不仅展示着一个

15、城市的文明程度，还反映了城市科技发展水平。改革开放以来，深圳市公共交通事业发展迅速，在推进城市建设的进程中发挥了重要作用，同时也说明了深圳市科技水平发展迅速。通过本系统，有助于将城市公共交通建设与管理水平提升到一个新的高度。基于Java EE的基础上，进行web设计，通过Js，html5,css,等编程技能实现网页系统，公交管理人员可以利用本系统进行线路查询及管理，有效地调度公交系统。1.4. 本系统应解决的主要问题由深圳市公共交通总体规划12以及深圳市城市交通仿真系统，从中分析得到的现阶段调度水平落后是目前公交营运效率低下的主要原因。主要是调度方法单一，缺少灵活性，较少使用先进科技技术手段研

16、制仿真系统，缺乏应变能力。可以通过科技手段提升公交调度与管理水平，如开发路线仿真系统，方便管理人员运用现代通讯技术调剂公交运营，高效地进行公交调度及管理。目前由于许多城市的道路规划出现问题，导致城市交通拥挤状况加剧的例子源源不断，本系统能通过模拟线路规划，收集数据，从而优化道路规划引起的城市交通拥堵问题。2. 可行性研究2.1. 技术可行性本次设计是基于Java EE基础上，使用JavaScript、Html5、CSS等编程语言进行前端开发的。Vue.js是当前较为常用的前端框架之一，它帮助开发人员快速地构建与开发前端项目，是一套方便开发人员构建用户界面的渐进式框架，Vue的核心库主要专注于视

17、图层，并且很方便的与其他第三方库或现有项目进行集成。在当下比较流行的两种Java EE框架有SSH（Struts、Spring、Hibernate），SSM（Spring、SpringMVC、MyBatis）。SSH 一般指的是 Struts2 做控制器(controller)，spring 管理各层的组件，hibernate 负责持久化层，SSH较重视配置开发，此中的Hiibernate对JDBC的完整封装更面向对象，对增删改查的数据维护更自动化，但SQL优化方面较弱，且入门门槛稍高。并不十分适合学生个人开发者。SSM 则指的是 SpringMVC 做控制器(controller)，Spri

18、ng 管理各层的组件，MyBatis 负责持久化层。SSM偏向轻量级配置，将注解开发发挥到极致，且ORM实现更加灵便，SQL优化更轻便，较为适合像笔者这样的学生个人开发者。由上可知，SSM框架为初级的开发者给予了很大的便利，且能更好的掌控SQL，这会让有数据库经验的个人开发者能开发出更高效率的SQL语句，并且XML配置管理起来也非常方便。综上所述，本次设计在基于Java EE基础上利用前后端分离方法，使用SSM框架进行后端开发，使用Vue进行前端开发，在技术上可行。2.2. 经济可行性本次毕业设计为城市公交线路仿真系统，在Java EE基础上进行网页开发，只需通过网页访问，就能进行公交线路管理

19、仿真。由于本次系统为笔者独立开发，故不需考虑团队开销的问题，本系统的成本主要集中在前期资源的搜集与系统开发上，所以本系统投入成本少，若作为实际系统投入使用，对于城市公交管理人员，本系统还是有一定的吸引力，所产生的效益会远大于系统开发成本。综上所述，本次毕业设计在经济上可行。2.3. 总结从技术层面上来说，前后端分离开发，使用Vue + SSM框架十分的适合本次论文设计；从经济层面来说，本次论文设计由于设计规模较小，投入的开发成本较少。综合以上论述表明，本次设计在基于Java EE的基础上，使用Vue + SSM框架开发一套城市公交线路仿真系统，是可行的。3. 概要设计3.1. 系统框架设计通过

20、对比类似的管理系统的学习研究，为了本论文题目设计了与之合适的基础框架，本次系统使用前后端分离技术，将系统分为前端部分、后端部分、数据库部分。前端部分主要是vue前端框架（基于webpack构建）如图4.1，Vue中有许多的组件如vuex，vue-router， vue-resource，再加上构建工具vue-cli，sass样式,就是一个完整的vue项目的主要组成。后端部分为Spring+SpringMVC+Mybatis后台开发框架（基于maven构建）如图4.2。各部分间的关系见下图4.2。图4.1 Vue架构图图4.2 SSM框架图图4.3前后端架构总图3.2. 系统功能模块设计在系统主

21、体框架中进行详细的功能模块划分。细分为了界面交互、线路系统、 数据管理4个部分，框架的每个部分主要对应的功能模块如下表3.1。框架主要对应模块界面交互权限控制（不同界面），登录界面、注册界面线路系统线路创建、线路查询、线路编辑、线路仿真用户系统用户管理，管理员权限数据管理数据处理表3.1功能模块设计表3.2.1. 界面模块概要设计本系统主要交互在于登录界面，注册界面，菜单界面。输入网址进入系统，首先出现登录界面，用户需要输入正确的用户名和密码，方可登录，登录界面如下图3.2.1.1。图3.2.1.1 登录界面若是用户没有账号，可以点击登录页面内的注册按钮，进入注册界面进行用户注册功能，注册界面

22、如下图3.2.1.2，注册一个账号图3.2.1.2 注册界面在登录后，加载完主界面之后，进入系统操作界面，会看到用户可操作的菜单，而在点击不同的菜单选项后，会进入不同的网页中，由于权限控制，管理员与用户界面单有所区分，管理员界面菜单功能设计如下图3.2.1.3，点击线路查询后进入线路查询页面，输入车号进行查询，点击线路汇总后进入线路汇总页面，可看到所有线路信息，管理员可对所有线路进行编辑，点击用户管理后进入用户管理界面，可对所有用户进行管理，包括管理员，点击用户名可进行个人信息修改且可退出系统。用户界面菜单功能设计如下图3.2.1.4点击线路查询后进入线路查询页面，输入车号进行查询，点击线路汇

23、总后进入线路汇总页面，可看到所有线路信息，管理员可对所有线路进行编辑，点击用户名可进行个人信息修改且可退出系统。图3.2.1.3 管理员界面菜单图3.2.1.4 用户界面菜单3.2.2. 线路系统模块概要设计线路创建系统主要是通过在地图上画出路线，键盘输入线路信息如车号、线路编号、运行时间、距离、收益、站点，如下图3.2.2.1线路创建图。图3.2.2.1 线路创建图线路编辑系统主要是通过编辑已有线路，编辑车号、线路编号、运行时间、距离、收益、站点等信息，可通过线路查询，进行路线车号查询后，输入相关信息后，有更多选项，可在更多选项中选着编辑按钮如图3.2.2.2线路查询编辑图，进行线路编辑如图

24、3.2.2.3线路编辑图。或者通过线路汇总页面直接选取线路进行线路编辑，如图3.2.2.4线路汇总中线路编辑图。图3.2.2.2 线路查询编辑图图3.2.2.3线路编辑图图3.2.2.4线路汇总中线路编辑图线路查询系统是通过车号进行线路查询，车号作为查询的关键字，进行精确匹配，点击查询按钮，即可查询出线路的车号，线路编号及线路信息，点击更多可对线路进行编辑及删除操作，在线路查询页面可直接添加线路，会跳转至线路线路添加页面。图3.2.2.5线路查询图4. 功能详细设计与实现4.1. 线路查询功能设计与实现l 线路查询功能实现线路查询功能实现主要体现在线路查询页面内的搜索框里，通过输入车号关键字，

25、当按下搜索按钮，系统搜索车号后获取到线路车号，并显示出车号、线路编号、线路信息。线索按钮图标是使用element的icon属性中的icon=el-icon-search。本功能还可进行优化，现在只具备精确匹配功能，还未有模糊匹配功能，后续有研发需求可添加进入功能内，优化线路查询功能。l 线路查询设计流程线路查询功能实现流程：当输入车号关键字后，用户按下搜索按钮，后端进行查询功能，通过getById查询相对应的车号ID，浏览器通过服务器发出请求，MySQL数据库服务器返回相对于数据，前端再通过handelSearch函数如下图4.1.1，搜索相对应的车号关键字，从而获取到车号，系统就会从JSON

26、里获取到保存好车号相关信息，在百度地图上显示出线路仿真，且在页面内显示出车号、线路编号。图4.1.1 handelSearch函数同时通过点击更多按钮，触发more函数，调用element的el-dropdown设置el-dropdown-item属性，出现下拉框，进行操作选择，能对线路进行编辑或删除功能，点击编辑按钮就会跳转至线路创建页面，进行数据编辑。点击删除功能，系统会弹出确认删除框，咨询用户是否进行删除确定或删除取消。4.2. 线路创建设计l 线路创建基本设计公交线路信息有车号，线路编号，运行距离，运行时间，收益，经过的站点，公交线路在地图上的路线，这是一条公交线路的基本信息，用户输入

27、完相应的信息后，点击提交，即可完成一条线路的创建，可在线路查询及线路汇总查看线路信息。l 线路创建设计流程用户线路创建的时候，需要键盘输入车号，线路编号，运行距离，运行时间，收益，经过的站点。当用户点击网页内的添加按钮，click=linkTo，linkTO函数会使系统自动使得网页跳转至线路创建页面，前端通过使用element的el-input创建数据输入框，用户输入玩基本信息后。接着在百度地图上创建公交路线，利用百度地图API调用百度地图，handler函数实例化百度地图，路线的实现是通过调用百度地图API的属性Polyline折线以及Overlay覆盖物，实现添加覆盖物至地图上，同时记录下

28、point经纬度，形成公交路线。公交路线在地图上通过右键点击地图2点，形成一条Polyline折线，左键控制移动地图显示范围，创建折线后，可对折线进行调整，将鼠标移动至折线上polyline.addEventListener(mouseover,(type, target, point, pixel)，鼠标进入曲线可以进行编辑，左键点击拖动折线上的点，调整公交路线，鼠标移出折线后，返回polyline，并且保存相对应的point经纬度，如下图4.2.1 路线创建图。图4.2.1 路线创建图清空线路按钮是通过click=” clearOverlays”函数，点击按钮后，进行线路清除即清除覆盖物，

29、清除所有覆盖物，所以设定了一个提示框函数interaction.showModel.confirm(确认清空所画路线？, 提示)，询问用户是否清空线路，避免用户误删线路。效果如下图4.2.2 清空线路提示图。图4.2.2 清空线路提示图线路信息填写完毕，地图上的路线也画完后，即可点击提交，提交线路，点击提交按钮后，会有提示框提示用户线路创建成功，后端就会通过public Object save(Route route)函数，保存用户创建的路线，同时保存数据至数据库内，永久存储，根据需求前端也会有一份缓存数据，用户需填写所有线路信息及画出路线，否则系统会提示缺少了什么，添加后才能点击提交按钮，创

30、建线路，至此线路创建功能就已经完成了。图4.2.2 路线创建成功图l 功能可优化点设计本功能可优化的点就是地图上画路线的功能，右键添加路线的同时可以获取到地图上的信息，还有就是路线清除功能，如果设置成2个按钮，清空所有路线和清除上一段路线，路线清除功能也会得到更好的完善，后续笔者技术有所提升还会继续研究如何优化该功能。4.3. 线路编辑设计l 线路编辑基本设计线路编辑功能主要是通过点击编辑按钮click=edit(index)相当于进入线路创建页面，系统获取原有数据后，进行原有线路上的数据编辑。l 线路编辑设计流程进入页面方式：1.在线路查询页面内，点击线路信息内的更多选项click=edit

31、(index)，弹出下拉框，出现编辑选项，点击进入线路编辑页面。2.在线路汇总页面内，查看到线路信息，在操作一栏可见编辑选项，点击跳转至线路编辑页面（受权限控制，普通用户无法编辑管理员创建的线路）进入页面后，系统通过ID确认，获取线路信息， if(id)this.id = idroute.routeGetById(this,id).then确认线路ID后，通过data显示线路相关信息，如地图上的路线经纬度：this.form.point = JSON.parse(data.point)，车号，线路编号等信息。用户直接键盘输入修改线路信息即可，地图上的路线可利用清空线路再次规划路线或移动鼠标至路

32、线上，进行拖拽修改。以上操作与线路创建时相同，本功能实现点在于点击编辑后，获取原有数据，与后端数据进行交互。信息都填写完毕后，方可点击提交按钮，后端函数public Object updateById(Route route)运行后，线路信息保存至数据库内，用户可以直接查看修改后的线路信息。如下图4.3.1 原有线路数据图、图4.3.2 修改后线路数据图。图4.3.1 原有线路数据图图4.3.2 修改后线路数据图4.4. 线路汇总设计l 线路汇总基本设计本功能设计初衷是为了方便用户能更好更直观的看到公交数据并进行查询，编辑等操作，本功能是通过调用Element-UI的组件el-table来作为

33、表格的显示，从而展现多条数据以及可对数据进行对比等自定义操作。还有调用Element-UI的组件Pagination分页，是为了优化数据展示效果以及分化数据，更便于展示数据以及进行对比。l 线路汇总设计流程首先创建基础的Table表格，其中的data通过pageInfro.records获取，获取函数如图4.4.1表格数据添加图。图4.4.1表格数据添加图获取到数据后，表格基本能显示出来了，现在需要设计分页功能，同样也是调用element的组件el-pagination设置，随着数据的增加，数据条数的变化，以及分页可选择页数。利用其中的size-change以及current-change事件

34、修改页码大小和当前页变动时候触发的事件。current-page表示当前页数，支持 .sync 修饰。显示效果如下图4.4.2 分页功能显示图。图4.4.2 分页功能显示图4.5. 线路仿真设计l 线路仿真基本设计本功能为本系统的难点之一，实现功能效果：线路查询中输入车号，搜索出来线路，地图上的路线会有辆小车循着轨迹运动。l 线路仿真设计难点及尝试方案设计本系统的时候，笔者想先实现画路线再实现小车循着轨迹运动，可当设计好画路线的功能后，尝试加入小车循迹运动，出现了BUG，经过多次调整以及与导师沟通后，尝试多另外几种方法。方法一：使用Ecahrts插件来实现车辆轨迹运动，通过调用echart以及

35、百度地图API，实例化echart设置属性后，笔者发现原本设置好的路线显示不出来了，数据读取不到，多次调整后，线路能显示出来，可无轨迹可视化，仍然是原本的静止效果，这个方案先暂定，尝试别的方案先。方法二：百度路书轨迹播放，使用一个播放按钮来实现轨迹运动，配置文件设置完成后，路线也显示出来了，可是调试运行的时候，一直报报错BMapLib is not defined，查询了相关资料后，重新调整配置文件，仍然不可行。由于时间上的问题以及笔者对于vue刚入门不久，本功能先跳过，简化实现，等有更好的方法或者学习到如何实现后再来完成该功能。l 线路仿真暂定解决方案无法实现小车循迹运动，先实现路线有方向及

36、起终点，选择在线路查询后，在地图路线上线路箭头，以表示路线的运动。可对箭头进行大小和粗细调整，如下图4.5.1 路线实现图图4.5.1 路线实现图4.6. 登录与注册功能设计l 登录与注册基本设计本系统另一个难点就在于登录与注册功能，登录功能实现效果为：当用户输入账号及密码，若输入正确账号密码则成功登录系统，系统弹出登录成功提示窗，反之则会弹出提示窗输入错误，提示用户账号或密码错误。若是用户未注册账号会提示账号或密码错误，所以需要进行用户注册功能。注册功能是未做限制注册的，任何用户都可以进行账号注册，注册成功后即可登录系统，进行系统操作，不过只能对本用户所创建的线路进行操作。l 登录功能设计流

37、程1.登录成功设计流程首先需要做好准备工作，配置vuex，使得页面刷新时将vuex里的信息保存到localStorage，这样子刷新页面就无需再次登录如下图4.6.1 刷新配置，图4.6.1 刷新页面配置准备好即可写Login的页面及函数，还需要设置监控，同时还需要修改主页内的菜单栏，用户登录后，显示出用户名称，最后就是与后端进行交互，进行用户名及密码验证，基础函数设计完毕后。由于需要进行权限区分，还需要设置多一个.java，去分辨用户为普通用户还是管理员，对UsernamePasswordToken进行了简单的封装，用于判断该用户是需要用哪个realm进行登录，还有获取当前用户授权信息，进行

38、授权处理，区别开普通用户只能操作普通用户创建的线路。如下图4.6.2 身份认证函数。图4.6.2 身份认证函数2.登录失败设计流程本功能的登录失败目前做了两种失败提示区分，第一种：当用户输入错误的账号和密码，系统则提醒用户账号或密码错误；第二种：当用户输入正确的账号后，输入错误的密码，系统则提示用户密码错误。用户输入账号和密码错误，点击登录按钮后，数据会传到后端进行验证及判断，如果账号和密码都不正确的话，弹出提示框：用户账号或密码错误，请重新输入，调用到public static BaseResult fail(String msg)函数，返回一个msg：账号或密码错误。用户输入正确的账号后，

39、密码输入不正确，点击登录按钮后，后端会验证到用户名存在且正确，在验证密码，如果密码不正确，网页会弹出提示框，提示用户密码错误，请重新输入。登录Login类设计如下图4.6.3 Login类设计图4.6.3 Login类设计l 注册功能设计流程用户未注册账号，在进入系统界面时，点击注册按钮，系统跳转至注册页面，在页面输入用户名、密码、姓名、手机号进行注册，手机号需输入正确的手机号，否则系统会提示用户请输入正确的手机号，系统会验证手机号码是否正确，调用到isPhone函数如下图4.6.4 isPhone函数，用户名及密码都有数字长度限制，需长度在 3 个字符以上。图4.6.4 isPhone函数后

40、端会进行账号是否存在检测，用户填写完成后，点击注册按钮，即可完成注册，就可以登录系统进行使用了，后端就需要完成数据提交及用户创建的功能，register类设计如下图4.6.5 register类设计图，后台也要设置好一个注册接口filterChainDefinitionMap.put(/user/register, anon)，到这里注册功能算是完成了，接下来就是简单的数据调试下，是否有保存进数据库内，调试成功即可完成注册。图4.6.5 register类设计图l 登录与注册功能注意事项跨域问题解决方案跨域是什么呢？跨域就是一个网域向另一个网域进行资源交互，因此跨域访问违背了同源策略（两个网域

41、的协议+域名+端口相同），才会当请求不在同一域名下的资源文件时出现了No Access-Control-Allow-Origin错误。在本次设计过程中的同样也需要解决跨域问题，要访问8088端口的服务器，会报错，是因为VUE需要占用8080端口。这个问题在前端或在后端处理都可以。在本次设计中我是在后端处理的，使用cros解决跨域使用json返回数据给前端，设置了CorsConfig类如下图4.6.6 CorsConfig类。图4.6.6 CorsConfig类4.7. 权限控制设计l 权限控制基本设计由于系统需要区分开普通用户及管理员的使用情况，故设计了权限控制功能，用户注册后为普通用户，如需

42、升级为管理员，需管理员给予权限后，才可升级为管理员，只有管理员才会有用户管理这一菜单栏选项。管理员可控制所有路线和对用户进行管理包含查询用户，编辑用户，删除用户与添加用户。l 权限控制设计流程基本设计思路为：权限控制就是对用户进行校验，如果为admin管理员，则显示出用户管理这一栏，如果为user普通用户，则不显示出用户管理，且对路线操作进行局限控制。首先在home.vue内的用户管理这一菜单栏选项加上v-if=admin index=user，再在computed设置好user以及admin，以作校验区分，再使用If进行判断，如果是admin管理员则可跳转至用户管理页面，否则无法显示用户管理

43、项和跳转至页面。接着就是路线权限操作设置，在table.vue内操作行加上v-if=admin | user.id = scope.row.userId，判断用户权限，同样的需要在computed设置好user以及admin。最后就是管理员权限给予设计：管理员进入用户管理页面，页面内会显示出来的所有用户信息表格，管理员点击用户编辑项后，跳转至用户信息编辑页面，系统会读取用户的角色信息即roleSn，读取函数getRoleByUserId如下图4.7.1读取角色函数，管理员可通过选择普通用户或管理员来修改用户角色roleSn，以达到管理员权限给予效果，点击提交按钮后，userUpdateById

44、函数生效后，修改的roleSn值返回data中，至此管理员权限给予就完成了。用户再次登录系统后，会读取用户state，从而识别用户为普通用户还是管理员。权限控制功能是与其他功能进行交互，从而实现的，设计过程较为繁琐。图4.7.1读取角色函数4.8. 数据设计l 数据基础设计1.数据库的设计根据公交线路数据特性分析可得，通过车号进行线路查询这一特点，设计了如下图4.8.1数据库表设计，以车号ID为主键。通过创建用户的ID，进行用户权限管理，且控制线路编辑等功能的使用。只有管理员才具备的线路控制权和人员管理权限也需进行区分在对于数据的存储与读取功能上，分为了user_role表以及role表，ro

45、le_permission表。实现对于数据的查询处理、存储、读取，通过数据缓存放在Redis中缓存的以及永久存储在MySQL数据库中图4.8.1数据库表设计2.后端数据配置设计首先需要配置好pom.xml，其中包括了数据库Mysql配置，百度api配置，mybatis配置，缓存的配置。接着就是数据库连接和连接池的设置，如下图4.8.2 数据库连接设置图以及创建BaseResult.java设置好统一返回结果类，以及在各个编辑类需重新上传数据的功能中，添加好获取数据库路径以及数据保存函数。为了实用Redis缓存，需配置好RedisConfig.java，设置缓存管理器管理的缓存的默认过期时间，当

46、没有没有Redis，不使用。图4.8.2 数据库连接设置图5. 测试5.1. 测试思路与方法1、页面完整性测试：首先需要查看界面整体布局、按钮、颜色等，接着测试：是否支持键盘操作，是否有操作提示等，操作浏览器前进后退页面是否对系统有影响，还有测试：改变一项数据时是否会对其他项数据产生影响，如果产生影响，这些影响是否都正确，考虑语言友好性以及文字的缩放比例显示。2、搜索框测试：测试搜索框是否支持模糊搜索，本系统的查询功能不支持模糊搜索的，还有就是权限问题，搜索没有权限看到的内容是否能搜索出来。3、页面链接测试：每个页面链接都有对应的页面，并且进行页面跳转时是否正确。还可以单独将链接复制到浏览器里面是否正常展示页面（本系统是需要登录才能使用的，登录不成功则无法进入页面）。4、字符及标点符号检查测试：1）在应该输入相应类型的项中输入其他类型的内容，若输入不正确是否会有系统提示。2）输入超出所设置的字符长度的内容，系统是否有提示提醒用户输入内容超过输入长度。3）输入各种标点符号，例如空格、回车键、各种符号等，系统是否有做相对应处理。5、业务功能测试：采用各种黑盒测试方法进行针对性的业务功能测试，使用手工测试的方式，并做下相关记录，以便对比功能效果，进行功能优化。6、安全测试：1）重复提交数据测试：选取已经成功提交的一条数据，后退页面后再次提交，系统是否正确处理数据，以