《基于Java,EE城市公交线路仿真系统.docx》由会员分享，可在线阅读，更多相关《基于Java,EE城市公交线路仿真系统.docx（32页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、基于Java,EE城市公交线路仿真系统 基于Java EE的城市公交线路仿真系统 基于Java EE的城市公交线路仿真系统 摘 要 城市公交线路仿真系统是应用科技手段提升公交管理水平和调度技能，如开发动态线路仿真系统，运用当代通讯技术研发科技公交。随着社会经济的高速发展以及城镇化进程的加快，人们对于公共交通的质量与效率的追求不断提高，公共交通需求日益多样化，其中城市公交作为最初始的公共交通尤为重要。由此可见，城市公交线路仿真系统能在肯定程度上压力帮助城市缓解公共交通压力。 本课题旨在基于Java EE的基础上，开发一款城市公交线路仿真系统。运用前后端分别技术，通过运用VUE + Springb
2、oot 的逻辑结构开发，运用VUE完成前端的开发，并结合Springboot的后端开发技术，利用跨域连接前后端，完成系统开发。本文主要从选题背景与意义、可行性与需求分析、功能设计与实现、测试等四个方面，根据制作的流程对本次设计进行论述，对开发的思路、实现以及实现过程中的主要问题都予以描述记录。关键词：城市公交线路；深圳公交；VUE；Springboot；前后端交互 Simulation system of urban public transportation line based on Java EE Abstract Urban bus line simulation system is
3、the application of scientific and technological means to improve the level of bus management and scheduling skills, 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
4、 the social economy and the acceleration of the urbanization process, peoples pursuit of the quality and efficiency of public transportation continues to increase, and public transportation needs are increasingly diversified. Among them, urban public transportation is particularly important as the i
5、nitial public transportation. It can be seen that the urban bus line simulation system can help the city relieve the 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 technol
6、ogy, through the use of VUE + Springboot logical structure development, using VUE to complete the front-end development, 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 th
7、e design according to the production process from four aspects: the background and significance of the topic selection, the feasibility and demand analysis, the functional design and function implementation, and the testing. The problem is described and recorded Keywords: Urban bus lines；Shenzhen pu
8、blic transport；VUE；Springboot；Front and back interaction 目 录 1. 前言 1 1.1. 选题背景 1 1.2. 本系统在国内外的发展概况及存在的问题 1 1.3. 本系统的目的、意义及应达到的技术要求 2 1.4. 本系统应解决的主要问题 2 2. 可行性探讨 3 2.1. 技术可行性 3 2.2. 经济可行性 3 2.3. 总结 3 3. 概要设计 4 3.1. 系统框架设计 4 3.2. 系统功能模块设计 6 4. 功能具体设计与实现 10 4.1. 线路查询功能设计与实现 10 4.2. 线路创建设计 11 4.3. 线路编辑设
9、计 13 4.4. 线路汇总设计 14 4.5. 线路仿真设计 15 4.6. 登录与注册功能设计 16 4.7. 权限限制设计 19 4.8. 数据设计 20 5. 测试 21 5.1. 测试思路与方法 21 5.2. 基础测试 22 5.3. 详细功能测试 23 5.4. 测试总结 24 6. 总结 25 参考文献 26 谢 辞 27 附 录 28 1. 前言 1.1. 选题背景 随着社会经济的高速发展以及城镇化进程的加快，人们对于公共交通的质量与效率的追求不断提高，公共交通需求日益多样化，其中城市公交作为最初始的公共交通尤为重要。依据城市公交现状问题分析与线网布局规划模式探讨10，城市公
10、交系统一般包含公交线路、站点、运营支持系统四个方面，它们相互协作共同作用。近些年来，城市公交发展问题始终都是每一个城市都须要解决的重要问题，很多问题都须要通过系统分析并解决，如公交线路覆盖不全面，公交运营时间不当等问题，城市公交问题已经成为制约社会可持续发展的首要问题。优化公交运营系统性能已然成为解决城市发展问题和提高市民生活质量的首要目标。通过设计城市公交线路仿真系统，我们就可以使得公交线路管理更加的规范与高效，所以笔者选择设计基于java EE的城市公交线路仿真系统优化与解决城市公交治理问题和优化城市公交管理水平 1.2. 本系统在国内外的发展概况及存在的问题 依据浅谈国内外交通仿真发展概
11、况，不难发觉城市交通仿真技术成长最快和最先的国家就是美国，世界上其他国家的仿真软件都是在美国的交通仿真技术的基础上进行进一步的发展，美国早在1967年就有计算机专业的专家就组织成立了美国的计算机仿真学会（SocietyforComputerSimulation），仿真学会的成立极大的推动了美国在城市交通仿真方面的技术钻研的发展22。世界上许多国家才渐渐起先对交通仿真技术的感爱好且起先探讨，期间也源源不断有新的仿真软件出现，可是大部分仿真软件都不能实际投入生产运用中。如今已经到了21世纪，已经有大部分交通仿真软件都已经实现了交通仿真软件的商业化，并且投入实际生产运用中，就如西班牙TSS公司开发的
12、AIMSUN2，是一款交互式交通仿真软件，适用于检验与测试交通限制系统，它还能够用于对交通状况的进行预料以及优化车辆导航系统和其他实时交通信息的应用。与国外相比，在那个年头国内整个交通行业发展薄弱，更别说道路交通系统仿真方面探讨有什么起色。早在20世纪80年头，我国交通仿真技术发展初期，大部分技术探讨都是集中在高等院校等探讨机构进行探讨，主要是为了解决一些相对简洁的交通问题进行探讨模拟，可是这些探讨对于交通实际问题的解决并没有起到太大的作用。经过很多年的探讨与摸索后，我国交通工程的相关探讨人员才起先意识到需将探讨方向改为如何实际性的解决交通问题，此后就起先钻研相关的建设性探讨。如在2014年东
13、北高校徐晓昱设计的基于Flexsim的城市公交系统仿真，用数学模型来描述公交系统微观层次的细微环节存在局限性，离散虚拟现实的仿真技术作为一种重要的探讨手段可以有效避开这一缺陷20。 2020年国内交通仿真软件的研发已经处于一个高速发展的阶段，从技术层面上看，我国的交通仿真技术已经属于世界顶级水平，虽然当时我国基础技术和人才方面都较为单薄，但是通过我国的科技人才不断努力的研发，如今已经能达到商用化水平，不过还是有很多的问题须要优化与解决，例如交通线路规划管理、交通运营方案，仿真软件设计，公交线路数据采集等很多技术上的问题。 1.3. 本系统的目的、意义及应达到的技术要求 本次毕业设计主要集中探讨
14、城市公交线路规划类型，并设计制作一款城市公交线路仿真系统，我们就可以做到公交信息管理的系统化、规范化和自动化。将传统公共交通系统的开环方式不断优化，调整为闭环反馈的整体调控过程，且更加高效，从而建立体系辨识、状态与演化再现、趋向擅长分析和预料的分析实力，实现一种全新概念的智能管理系统和手段，从而优化城市公交的治理问题。城市公交作为突显城市文明的主要窗口行业之一，不仅展示着一个城市的文明程度，还反映了城市科技发展水平。改革开放以来，深圳市公共交通事业发展快速，在推动城市建设的进程中发挥了重要作用，同时也说明白深圳市科技水平发展快速。通过本系统，有助于将城市公共交通建设与管理水平提升到一个新的高度
15、。基于Java EE的基础上，进行web设计，通过Js，html5,css,等编程技能实现网页系统，公交管理人员可以利用本系统进行线路查询及管理，有效地调度公交系统。1.4. 本系统应解决的主要问题 由深圳市公共交通总体规划12以及深圳市城市交通仿真系统，从中分析得到的现阶段调度水平落后是目前公交营运效率低下的主要缘由。主要是调度方法单一，缺少敏捷性，较少运用先进科技技术手段研制仿真系统，缺乏应变实力。可以通过科技手段提升公交调度与管理水平，如开发路途仿真系统，便利管理人员运用现代通讯技术调剂公交运营，高效地进行公交调度及管理。目前由于很多城市的道路规划出现问题，导致城市交通拥挤状况加剧的例子
16、源源不断，本系统能通过模拟线路规划，收集数据，从而优化道路规划引起的城市交通拥堵问题。 2. 可行性探讨 2.1. 技术可行性 本次设计是基于Java EE基础上，运用JavaScript、Html5、CSS等编程语言进行前端开发的。Vue.js是当前较为常用的前端框架之一，它帮助开发人员快速地构建与开发前端项目，是一套便利开发人员构建用户界面的渐进式框架，Vue的核心库主要专注于视图层，并且很便利的与其他第三方库或现有项目进行集成。在当下比较流行的两种Java EE框架有SSH（Struts、Spring、Hibernate），SSM（Spring、SpringMVC、MyBatis）。 S
17、SH 一般指的是 Struts2 做限制器(controller)，spring 管理各层的组件，hibernate 负责长久化层，SSH较重视配置开发，此中的Hiibernate对JDBC的完整封装更面对对象，对增删改查的数据维护更自动化，但SQL优化方面较弱，且入门门槛稍高。并不非常适合学生个人开发者。SSM 则指的是 SpringMVC 做限制器(controller)，Spring 管理各层的组件，MyBatis 负责长久化层。SSM偏向轻量级配置，将注解开发发挥到极致，且ORM实现更加灵活，SQL优化更轻巧，较为适合像笔者这样的学生个人开发者。由上可知，SSM框架为初级的开发者赐予了
18、很大的便利，且能更好的掌控SQL，这会让有数据库阅历的个人开发者能开发出更高效率的SQL语句，并且XML配置管理起来也特别便利。综上所述，本次设计在基于Java EE基础上利用前后端分别方法，运用SSM框架进行后端开发，运用Vue进行前端开发，在技术上可行。2.2. 经济可行性 本次毕业设计为城市公交线路仿真系统，在Java EE基础上进行网页开发，只需通过网页访问，就能进行公交线路管理仿真。由于本次系统为笔者独立开发，故不需考虑团队开销的问题，本系统的成本主要集中在前期资源的搜集与系统开发上，所以本系统投入成本少，若作为实际系统投入运用，对于城市公交管理人员，本系统还是有肯定的吸引力，所产生
19、的效益会远大于系统开发成本。综上所述，本次毕业设计在经济上可行。2.3. 总结 从技术层面上来说，前后端分别开发，运用Vue + SSM框架非常的适合本次论文设计；从经济层面来说，本次论文设计由于设计规模较小，投入的开发成本较少。综合以上论述表明，本次设计在基于Java EE的基础上，运用Vue + SSM框架开发一套城市公交线路仿真系统，是可行的。3. 概要设计 3.1. 系统框架设计 通过对比类似的管理系统的学习探讨，为了本论文题目设计了与之合适的基础框架，本次系统运用前后端分别技术，将系统分为前端部分、后端部分、数据库部分。前端部分主要是vue前端框架（基于webpack构建）如图4.1
20、，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. 系统功能模块设计 在系统主体框架中进行具体的功能模块划分。细分为了界面交互、线路系统、 数据管理4个部分，框架的每个部分主要对应的功能模块如下表3.1。 框架 主要对应模块 界面交互 权限限制（不同界面），登录界面、注册界
21、面 线路系统 线路创建、线路查询、线路编辑、线路仿真 用户系统 用户管理，管理员权限 数据管理 数据处理 表3.1功能模块设计表 3.2.1. 界面模块概要设计 本系统主要交互在于登录界面，注册界面，菜单界面。输入网址进入系统，首先出现登录界面，用户须要输入正确的用户名和密码，方可登录，登录界面如下图3.2.1.1。 图3.2.1.1 登录界面 若是用户没有账号，可以点击登录页面内的注册按钮，进入注册界面进行用户注册功能，注册界面如下图3.2.1.2，注册一个账号 图3.2.1.2 注册界面 在登录后，加载完主界面之后，进入系统操作界面，会看到用户可操作的菜单，而在点击不同的菜单选项后，会进入
22、不同的网页中，由于权限限制，管理员与用户界面单有所区分，管理员界面菜单功能设计如下图3.2.1.3，点击线路查询后进入线路查询页面，输入车号进行查询，点击线路汇总后进入线路汇总页面，可看到全部线路信息，管理员可对全部线路进行编辑，点击用户管理后进入用户管理界面，可对全部用户进行管理，包括管理员，点击用户名可进行个人信息修改且可退出系统。用户界面菜单功能设计如下图3.2.1.4点击线路查询后进入线路查询页面，输入车号进行查询，点击线路汇总后进入线路汇总页面，可看到全部线路信息，管理员可对全部线路进行编辑，点击用户名可进行个人信息修改且可退出系统。 图3.2.1.3 管理员界面菜单 图3.2.1.
23、4 用户界面菜单 3.2.2. 线路系统模块概要设计 线路创建系统主要是通过在地图上画出路途，键盘输入线路信息如车号、线路编号、运行时间、距离、收益、站点，如下图3.2.2.1线路创建图。 图3.2.2.1 线路创建图 线路编辑系统主要是通过编辑已有线路，编辑车号、线路编号、运行时间、距离、收益、站点等信息，可通过线路查询，进行路途车号查询后，输入相关信息后，有更多选项，可在更多选项中选着编辑按钮如图3.2.2.2线路查询编辑图，进行线路编辑如图3.2.2.3线路编辑图。或者通过线路汇总页面干脆选取线路进行线路编辑，如图3.2.2.4线路汇总中线路编辑图。 图3.2.2.2 线路查询编辑图 图
24、3.2.2.3线路编辑图 图3.2.2.4线路汇总中线路编辑图 线路查询系统是通过车号进行线路查询，车号作为查询的关键字，进行精确匹配，点击查询按钮，即可查询出线路的车号，线路编号及线路信息，点击更多可对线路进行编辑及删除操作，在线路查询页面可干脆添加线路，会跳转至线路途路添加页面。 图3.2.2.5线路查询图 4. 功能具体设计与实现 4.1. 线路查询功能设计与实现 l 线路查询功能实现 线路查询功能实现主要体现在线路查询页面内的搜寻框里，通过输入车号关键字，当按下搜寻按钮，系统搜寻车号后获得到线路车号，并显示出车号、线路编号、线路信息。线索按钮图标是运用element的icon属性中的i
25、con=“el-icon-search。本功能还可进行优化，现在只具备精确匹配功能，还未有模糊匹配功能，后续有研发需求可添加进入功能内，优化线路查询功能。 l 线路查询设计流程 线路查询功能实现流程：当输入车号关键字后，用户按下搜寻按钮，后端进行查询功能，通过getById查询相对应的车号ID，阅读器通过服务器发出恳求，MySQL数据库服务器返回相对于数据，前端再通过handelSearch函数如下图4.1.1，搜寻相对应的车号关键字，从而获得到车号，系统就会从JSON里获得到保存好车号相关信息，在百度地图上显示出线路仿真，且在页面内显示出车号、线路编号。图4.1.1 handelSearch
26、函数 同时通过点击更多按钮，触发more函数，调用element的el-dropdown设置el-dropdown-item属性，出现下拉框，进行操作选择，能对线路进行编辑或删除功能，点击编辑按钮就会跳转至线路创建页面，进行数据编辑。点击删除功能，系统会弹出确认删除框，询问用户是否进行删除确定或删除取消。4.2. 线路创建设计 l 线路创建基本设计 公交线路信息有车号，线路编号，运行距离，运行时间，收益，经过的站点，公交线路在地图上的路途，这是一条公交线路的基本信息，用户输入完相应的信息后，点击提交，即可完成一条线路的创建，可在线路查询及线路汇总查看线路信息。l 线路创建设计流程 用户线路创建
27、的时候，须要键盘输入车号，线路编号，运行距离，运行时间，收益，经过的站点。当用户点击网页内的添加按钮，click=“linkTo“，linkTO函数会使系统自动使得网页跳转至线路创建页面，前端通过运用element的el-input创建数据输入框，用户输入玩基本信息后。接着在百度地图上创建公交路途，利用百度地图API调用百度地图，handler函数实例化百度地图，路途的实现是通过调用百度地图API的属性Polyline折线以及Overlay覆盖物，实现添加覆盖物至地图上，同时记录下point经纬度，形成公交路途。公交路途在地图上通过右键点击地图2点，形成一条Polyline折线，左键限制移动地
28、图显示范围，创建折线后，可对折线进行调整，将鼠标移动至折线上polyline.addEventListener(mouseover,(type, target, point, pixel)，鼠标进入曲线可以进行编辑，左键点击拖动折线上的点，调整公交路途，鼠标移出折线后，返回polyline，并且保存相对应的point经纬度，如下图4.2.1 路途创建图。 图4.2.1 路途创建图 清空线路按钮是通过click=” clearOverlays”函数，点击按钮后，进行线路清除即清除覆盖物，清除全部覆盖物，所以设定了一个提示框函数interaction.showModel.confirm(确认清空所
29、画路途？, 提示)，询问用户是否清空线路，避开用户误删线路。效果如下图4.2.2 清空线路提示图。 图4.2.2 清空线路提示图 线路信息填写完毕，地图上的路途也画完后，即可点击提交，提交线路，点击提交按钮后，会有提示框提示用户线路创建胜利，后端就会通过public Object save(Route route)函数，保存用户创建的路途，同时保存数据至数据库内，永久存储，依据需求前端也会有一份缓存数据，用户需填写全部线路信息及画出路途，否则系统会提示缺少了什么，添加后才能点击提交按钮，创建线路，至此线路创建功能就已经完成了。 图4.2.2 路途创建胜利图 l 功能可优化点设计 本功能可优化的
30、点就是地图上画路途的功能，右键添加路途的同时可以获得到地图上的信息，还有就是路途清除功能，假如设置成2个按钮，清空全部路途和清除上一段路途，路途清除功能也会得到更好的完善，后续笔者技术有所提升还会接着探讨如何优化该功能。 4.3. 线路编辑设计 l 线路编辑基本设计 线路编辑功能主要是通过点击编辑按钮click=“edit(index)“相当于进入线路创建页面，系统获得原有数据后，进行原有线路上的数据编辑。 l 线路编辑设计流程 进入页面方式： 1.在线路查询页面内，点击线路信息内的更多选项click=“edit(index)“，弹出下拉框，出现编辑选项，点击进入线路编辑页面。2.在线路汇总页
31、面内，查看到线路信息，在操作一栏可见编辑选项，点击跳转至线路编辑页面（受权限限制，一般用户无法编辑管理员创建的线路） 进入页面后，系统通过ID确认，获得线路信息， if(id) this.id = id route.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表格<el-table :data=“pageInfo.records“ border style=“width: 100%“>，其中的data通过pageInfro.records获得，获得函数如图4.4.1表格数据添加图。 图4.4.1表格数据添加图 获得到数据后，表格基本能显示出来了，现在须要设计分页功能，同样也是调用element的组件el-pagination设置，随着数据的增加，数据条数的改变，以及分
34、页可选择页数。利用其中的size-change以及current-change事务修改页码大小和当前页变动时候触发的事务。current-page表示当前页数，支持 .sync 修饰。显示效果如下图4.4.2 分页功能显示图。 图4.4.2 分页功能显示图 4.5. 线路仿真设计 l 线路仿真基本设计 本功能为本系统的难点之一，实现功能效果：线路查询中输入车号，搜寻出来线路，地图上的路途会有辆小车循着轨迹运动。 l 线路仿真设计难点及尝试方案 设计本系统的时候，笔者想先实现画路途再实现小车循着轨迹运动，可当设计好画路途的功能后，尝试加入小车循迹运动，出现了BUG，经过多次调整以及与导师沟通后，
35、尝试多另外几种方法。方法一：运用Ecahrts插件来实现车辆轨迹运动，通过调用echart以及百度地图API，实例化echart设置属性后，笔者发觉原本设置好的路途显示不出来了，数据读取不到，多次调整后，线路能显示出来，可无轨迹可视化，仍旧是原本的静止效果，这个方案先暂定，尝试别的方案先。方法二：百度路书轨迹播放，运用一个播放按钮来实现轨迹运动，配置文件设置完成后，路途也显示出来了，可是调试运行的时候，始终报报错BMapLib is not defined，查询了相关资料后，重新调整配置文件，仍旧不行行。由于时间上的问题以及笔者对于vue刚入门不久，本功能先跳过，简化实现，等有更好的方法或者学
36、习到如何实现后再来完成该功能。l 线路仿真暂定解决方案 无法实现小车循迹运动，先实现路途有方向及起终点，选择在线路查询后，在地图路途上线路箭头，以表示路途的运动。可对箭头进行大小和粗细调整，如下图4.5.1 路途实现图 图4.5.1 路途实现图 4.6. 登录与注册功能设计 l 登录与注册基本设计 本系统另一个难点就在于登录与注册功能，登录功能实现效果为：当用户输入账号及密码，若输入正确账号密码则胜利登录系统，系统弹出登录胜利提示窗，反之则会弹出提示窗输入错误，提示用户账号或密码错误。若是用户未注册账号会提示账号或密码错误，所以须要进行用户注册功能。注册功能是未做限制注册的，任何用户都可以进行
37、账号注册，注册胜利后即可登录系统，进行系统操作，不过只能对本用户所创建的线路进行操作。l 登录功能设计流程 1.登录胜利设计流程 首先须要做好打算工作，配置vuex，使得页面刷新时将vuex里的信息保存到localStorage，这样子刷新页面就无需再次登录如下图4.6.1 刷新配置， 图4.6.1 刷新页面配置 打算好即可写Login的页面及函数，还须要设置监控，同时还须要修改主页内的菜单栏，用户登录后，显示出用户名称，最终就是与后端进行交互，进行用户名及密码验证，基础函数设计完毕后。由于须要进行权限区分，还须要设置多一个.java，去辨别用户为一般用户还是管理员，对UsernamePass
38、wordToken进行了简洁的封装，用于推断该用户是须要用哪个realm进行登录，还有获得当前用户授权信息，进行授权处理，区分开一般用户只能操作一般用户创建的线路。如下图4.6.2 身份认证函数。 图4.6.2 身份认证函数 2.登录失败设计流程 本功能的登录失败目前做了两种失败提示区分，第一种：当用户输入错误的账号和密码，系统则提示用户账号或密码错误；其次种：当用户输入正确的账号后，输入错误的密码，系统则提示用户密码错误。 用户输入账号和密码错误，点击登录按钮后，数据会传到后端进行验证及推断，假如账号和密码都不正确的话，弹出提示框：用户账号或密码错误，请重新输入，调用到public stat
39、ic BaseResult fail(String msg)函数，返回一个msg：“账号或密码错误“。用户输入正确的账号后，密码输入不正确，点击登录按钮后，后端会验证到用户名存在且正确，在验证密码，假如密码不正确，网页会弹出提示框，提示用户密码错误，请重新输入。登录Login类设计如下图4.6.3 Login类设计 图4.6.3 Login类设计 l 注册功能设计流程 用户未注册账号，在进入系统界面时，点击注册按钮，系统跳转至注册页面，在页面输入用户名、密码、姓名、手机号进行注册，手机号需输入正确的手机号，否则系统会提示用户请输入正确的手机号，系统会验证手机号码是否正确，调用到isPhone函
40、数如下图4.6.4 isPhone函数，用户名及密码都有数字长度限制，需长度在 3 个字符以上。 图4.6.4 isPhone函数 后端会进行账号是否存在检测，用户填写完成后，点击注册按钮，即可完成注册，就可以登录系统进行运用了，后端就须要完成数据提交及用户创建的功能，register类设计如下图4.6.5 register类设计图，后台也要设置好一个注册接口filterChainDefinitionMap.put(“/user/register“, “anon“)，到这里注册功能算是完成了，接下来就是简洁的数据调试下，是否有保存进数据库内，调试胜利即可完成注册。 图4.6.5 registe
41、r类设计图 l 登录与注册功能留意事项 跨域问题解决方案 跨域是什么呢？跨域就是一个网域向另一个网域进行资源交互，因此跨域访问违反了同源策略（两个网域的“协议+域名+端口“相同），才会当恳求不在同一域名下的资源文件时出现了No Access-Control-Allow-Origin错误。在本次设计过程中的同样也须要解决跨域问题，要访问8088端口的服务器，会报错，是因为VUE须要占用8080端口。这个问题在前端或在后端处理都可以。在本次设计中我是在后端处理的，运用cros解决跨域运用json返回数据给前端，设置了CorsConfig类如下图4.6.6 CorsConfig类。 图4.6.6 C
42、orsConfig类 4.7. 权限限制设计 l 权限限制基本设计 由于系统须要区分开一般用户及管理员的运用状况，故设计了权限限制功能，用户注册后为一般用户，如需升级为管理员，需管理员赐予权限后，才可升级为管理员，只有管理员才会有用户管理这一菜单栏选项。管理员可限制全部路途和对用户进行管理包含查询用户，编辑用户，删除用户与添加用户。 l 权限限制设计流程 基本设计思路为：权限限制就是对用户进行校验，假如为admin管理员，则显示出用户管理这一栏，假如为user一般用户，则不显示出用户管理，且对路途操作进行局限限制。首先在home.vue内的用户管理这一菜单栏选项加上v-if=“admin“ i
43、ndex=“user“，再在computed设置好user以及admin，以作校验区分，再运用If进行推断，假如是admin管理员则可跳转至用户管理页面，否则无法显示用户管理项和跳转至页面。接着就是路途权限操作设置，在table.vue内操作行加上v-if=“admin | user.id = scope.row.userId，推断用户权限，同样的须要在computed设置好user以及admin。最终就是管理员权限赐予设计： 管理员进入用户管理页面，页面内会显示出来的全部用户信息表格，管理员点击用户编辑项后，跳转至用户信息编辑页面，系统会读取用户的角色信息即roleSn，读取函数getRol
44、eByUserId如下图4.7.1读取角色函数，管理员可通过选择一般用户或管理员来修改用户角色roleSn，以达到管理员权限赐予效果，点击提交按钮后，userUpdateById函数生效后，修改的roleSn值返回data中，至此管理员权限赐予就完成了。用户再次登录系统后，会读取用户state，从而识别用户为一般用户还是管理员。权限限制功能是与其他功能进行交互，从而实现的，设计过程较为繁琐。 图4.7.1读取角色函数 4.8. 数据设计 l 数据基础设计 1.数据库的设计 依据公交线路数据特性分析可得，通过车号进行线路查询这一特点，设计了如下图4.8.1数据库表设计，以车号ID为主键。通过创建
45、用户的ID，进行用户权限管理，且限制线路编辑等功能的运用。只有管理员才具备的线路限制权和人员管理权限也需进行区分在对于数据的存储与读取功能上，分为了user_role表以及role表，role_permission表。实现对于数据的查询处理、存储、读取，通过数据缓存放在Redis中缓存的以及永久存储在MySQL数据库中 图4.8.1数据库表设计 2.后端数据配置设计 首先须要配置好pom.xml，其中包括了数据库Mysql配置，百度api配置，mybatis配置，缓存的配置。接着就是数据库连接和连接池的设置，如下图4.8.2 数据库连接设置图以及创建BaseResult.java设置好统一返回
46、结果类，以及在各个编辑类需重新上传数据的功能中，添加好获得数据库路径以及数据保存函数。为了好用Redis缓存，需配置好RedisConfig.java，设置缓存管理器管理的缓存的默认过期时间，当没有没有Redis，不运用。 图4.8.2 数据库连接设置图 5. 测试 5.1. 测试思路与方法 1、页面完整性测试：首先须要查看界面整体布局、按钮、颜色等，接着测试：是否支持键盘操作，是否有操作提示等，操作阅读器前进后退页面是否对系统有影响，还有测试：变更一项数据时是否会对其他项数据产生影响，假如产生影响，这些影响是否都正确，考虑语言友好性以及文字的缩放比例显示。 2、搜寻框测试：测试搜寻框是否支持
47、模糊搜寻，本系统的查询功能不支持模糊搜寻的，还有就是权限问题，搜寻没有权限看到的内容是否能搜寻出来。3、页面链接测试：每个页面链接都有对应的页面，并且进行页面跳转时是否正确。还可以单独将链接复制到阅读器里面是否正常展示页面（本系统是须要登录才能运用的，登录不胜利则无法进入页面）。4、字符及标点符号检查测试： 1）在应当输入相应类型的项中输入其他类型的内容，若输入不正确是否会有系统提示。2）输入超出所设置的字符长度的内容，系统是否有提示提示用户输入内容超过输入长度。3）输入各种标点符号，例如空格、回车键、各种符号等，系统是否有做相对应处理。5、业务功能测试：采纳各种黑盒测试方法进行针对性的业务功
48、能测试，运用手工测试的方式，并做下相关记录，以便对比功能效果，进行功能优化。6、平安测试： 1）重复提交数据测试：选取已经胜利提交的一条数据，后退页面后再次提交，系统是否正确处理数据，以及数据是否有所改变 2）系统是否对信息传输、密码传输存储进行加密。是否允许用户进行多点登录。 7、阅读器兼容性测试：利用电脑端上的各种阅读器打开系统进行测试，如下列阅读器：IE，谷歌阅读器，搜狗阅读器，360阅读器，QQ阅读器，FireFox（火狐）阅读器，（留意：VUE 3.0 不支持 IE8.0及其以下的阅读器）。 5.2. 基础测试 l 基础测试流程 首先进行简洁的基础测试，完整操作流程进行操作，流程如下
49、：从登陆界面起先，首先点击注册，注册一个一般用户后，运用一般用户登录系统，系统提示登录胜利后，进入系统，查看Home页面是否显示完整。 接着点击线路查询，进入线路查询页面，查询已有公交线路数据，如1号线，82号线，输入车号后，点击查询按钮，页面出现相关线路信息及地图路途，线路查询页面即完成基础测试。完成后，点击线路汇总菜单栏选项，页面跳转至线路汇总页面，查看全部的线路信息，视察到有些路途，一般用户无法进行操作，那些路途就是只有拥有管理员权限后才可进行操作的路途，一般用户只能操作一般权限的路途，查看公交线路信息后，点击操作栏中的编辑，进入线路编辑页面，修改相关信息后，点击提交，再次进入线路汇总页面，查