基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+项目文档

<a name="G3k1C"></a> # <a name="JJYaN"></a> # 一、项目需求分析 <a name="p6BM4"></a> ### 1、目的 - 学习如何独立解决开发过程中的问题， - 多踩坑，多总结，夯实基础， - 最大化了解体会实际gis项目开发工作，积累工作经验， - 学习和累团队协作开发的经验。 <a name="H2apf"></a> ### 2、需求分析 - **中台**功能需求：管理员、普通用户、交通管理部门 - 基础功能需求： - 管理员：系统初始分配一个管理员账号，通过管理员账号管理所有用户信息，管理员可以添加交通部门用户账号。 - 交管：交通部门需要对交通事故进行录入、查看、统计、分析，及时发布道路管制、维修等信息。 - 普通用户：普通用户可以通过系统查询交通事故以及交通部门发布的施工公告，合理规划出行路线，普通用户使用注册功能成为新用户。 - 用户权限分析： - 管理员：管理员拥有系统最高权限。 - 交管：交通部门拥有除用户管理功能外的其他权限。 - 普通用户：普通拥有基本的系统浏览与交通事件查询权限，所有用户均可登陆系统，可以修改密码信息。 - **前台**功能需求： - 用户功能需求 - 具有注册和登录功能 - 报告路况：报告发生的路况信息； - 查看公告：查看交通部门发布的施工公告； - 地图功能需求 - 初始：天地图矢量地图 - 切换：影像地图 - 控件：提供放大缩小、复位、鼠标位置控件； - 智慧交通地图： - 基础功能：用于查看道路、居民区、交通事件等信息，部分图层可以做显示与隐藏操作 - 管理员和交管功能：可以查看光谷智慧交通地图的目录结构，对部分图层可以做显示与隐藏操作。 - 事件图层：加载智慧交通系统的专有图层 - API需求： - 实时路况：将实时路况进行可视化展示的API - 交通事件：将交通事件进行可视化展示的API： - 在地图上进行标注， - 并在表格中展示， - 事件更新：提供展示给用户的事件更新的API， - 接收公告：用户实时接收施工公告的API， - 工具箱：向用户提供测量长度、测量面积、导出图片等功能的API。 - <br /> - **后台**功能需求： - 数据库需求 - 实时路况：能够实时反映区域内交通情况（拥堵、事故）的数据， - 施工数据：影响道路通行的事件的数据， - 监控数据：提供道路监控信息的数据库， - 事件查询：提供热力图或统计图的数据库， - 事件更新：记录交通事件处理进度的数据库、 - 发布公告：建立道路维护对用户影响的数据库， - 地理数据：建立光谷区域基础地理信息的数据库， - 接口需求 - 交通路线：合理规划出行路线的API， - 公告提示：提供施工公告的API， - 路况报告与展示：提供用户报告路况的API，并设置校验规则，通过后提交到交管部门， - 交通监控：向交管提供路况监控的API， - 事件添加：设置校验路况api和监控api的API，添加事件到路况信息数据库的API，添加事件到光谷智慧地图的API，面向用户和交通部门的管理。 - 事件查询：框选获取交通信息的API， - 事件更新：交管提供交通事件处理进度的API， - 公告发布：发布施工公告通知住户的API， - 图层目录：交管对交通事件图层可以进行显示与隐藏的API ， - 工具箱：提供测量长度、测量面积、导出图片等功能的AP <a name="jFOZI"></a> # 二、项目开发规划 <a name="HFskv"></a> ### 1、项目开发的模式 <a name="bif2n"></a> #### 1)模块拆分 本次项目开发的模式采用纵向开发的模式，根据需求分析，对完整的项目进行模块化拆分，综合评估后，将醒目拆分为五大模块。<br /> <a name="h8BlY"></a> #### 2）模块分析 <a name="bwuYK"></a> ##### 用户模块： 不同权限用户展示不同功能 | **用户分类** | **功能** | | --- | --- | | 所有用户 | 登录功能，修改密码 | | 普通用户 | 注册、注册验证 | | 交管用户 | | | 超级管理员 | 添加交管用户，重置密码 | <a name="JItL0"></a> ##### 事件（路况）模块： | **用户分类** | **功能** | | --- | --- | | 所有用户 | 实时路况、事件查询、 | | 普通用户 | 报告路况、事件审核进度（我上报事件的审核进度）、 | | 交管用户 | 事件添加、事件删除、事件编辑（名字，内容、状态）、查看视频监控、审核路况信息、 | | 超级管理员 | 事件审核和添加、事件删除、事件编辑（名字，内容）、查看视频监控、 | > Tips:交管用户的事件添加是：表单选择完毕，提交之后直接显示到地图上。 > 事件（路况）模块： > 事件分类功能，允许用户将事件按照类型进行分类，例如交通事故、道路施工等。 > 事件统计功能，允许用户查看不同类型事件的数量、分布情况等信息。 | # | 功能 | | --- | --- | | 前台 | 实时路况、报告路况、事件查询、查看视频监控、事件添加、事件审核、事件删除、事件编辑 | <a name="OLL3u"></a> ##### 施工公告模块： | **用户分类** | **功能** | | --- | --- | | 所有用户 | 查看公告 | | 普通用户 | | | 交管用户 | 发布公告、删除公告 | | 超级管理员 | 发布公告、删除公告 | 工具模块： > Tips: 工具模块面向所有用户 | **用户分类** | **功能** | | --- | --- | | 所有用户 | 测量距离，测量面积、导出图片、取消测量 | | 普通用户 | | | 交管用户 | <br /> | | 超级管理员 | <br /> | <a name="Y7xW3"></a> ##### 待添加功能： 导航功能，搜索功能 <a name="lXax1"></a> ### 2、项目开发流程 项目的模块开发评估中，由于事件模块的业务代码最多，并且与其他模块的交互较多，决定最后集中开发事件模块，先完成其他模块的开发。 <a name="Yshma"></a> <a name="Biddh"></a> # 三、项目技术文档 <a name="R6zZu"></a> ### 1、项目技术栈 <a name="LFFCt"></a> #### 1）前端技术栈 - HTML5 - CSS3 - JavaScript - Axios - Vite - Less <a name="ONWm5"></a> #### 2）后端技术栈 - Node.js - Express.js - JWT - Axios <a name="nj3s2"></a> #### 3）调试技术栈 - Google Chrome - REST client <a name="QwC68"></a> #### 4）其他工具和框架 - Git - GitHub - Visual Studio Code <a name="CESeQ"></a> ### 2、技术栈说明 <a name="lbxVh"></a> #### 1）前端技术栈 - HTML5、CSS3 和 JavaScript 是 Web 前端开发的基础技术。 - Axios 是一个流行的 JavaScript 库，用于发送 HTTP 请求和处理响应。 - Vite：一个现代化的前端构建工具，它可以快速构建现代化的 Web 应用程序。 - Less：一种 CSS 预处理器，它扩展了 CSS 语言，包括变量、混合、嵌套等特性，让 CSS 更易于维护和扩展。 <a name="kcCrJ"></a> #### 2）后端技术栈 - Node.js 和 Express.js 是流行的后端开发框架，它们可以帮助开发人员构建 RESTful API 和其他服务器端应用程序。 - JWT 和 Passport.js 是流行的身份验证和授权库，它们