# 基于vue3的前后端分离项目 **Repository Path**: zaradee/vue_web_tree ## Basic Information - **Project Name**: 基于vue3的前后端分离项目 - **Description**: 本项目是一个基于VUE3的，内部含有AI聊天模块的前后端分离的web项目，项目名称为暮云春树——智学助老平台，详情看readme - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2025-08-03 - **Last Updated**: 2025-08-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 基于vue3的前后端分离项目 #### 介绍 本项目是一个基于VUE3的，内部含有AI聊天模块的前后端分离的web项目，项目名称为暮云春树——智学助老平台 本项目前端部分分为管理员端，用户ABC三个端。 其中用户A端为老年人服务端，B端为志愿者个人端，C端为志愿者团体端，后续写入时Bc两个端写成了一个端，可以正常使用 #### 主要技术以及设想介绍 使用内嵌markdown编辑器，将文本以及图片打包上传至后端数据库转为html格式，在读出时转化为markdown格式（体现于老人段的发帖与查看功能） 在志愿者端具备解答发帖，发布活动，志愿者团体端有管理团员等功能 管理员端对于数据有实时的动态更新以及增删改查等操作 #### 软件架构 软件架构说明 ##### 1. 以下是对于后端的说明 ###### 技术栈 Spring Boot 3.5.3 - 主框架 MySQL - 数据库 MyBatis-Plus - ORM框架 JWT - 用户认证和授权 Lombok - 简化Java代码 CommonMark - Markdown解析 项目结构 项目采用了典型的分层架构模式，遵循MVC设计模式： com.web_group ├── VoluntSerApplication.java # Spring Boot启动类 ├── common/ # 公共组件 ├── config/ # 配置类 ├── controller/ # 控制层（API接口） │ ├── Manage/ # 管理员相关接口 │ ├── Volunteer/ # 志愿者相关接口 │ └── elderly/ # 老人相关接口 ├── dto/ # 数据传输对象 ├── entity/ # 实体类（与数据库表对应） ├── exception/ # 异常处理 ├── mapper/ # 数据访问接口（MyBatis Mapper） ├── service/ # 业务逻辑层 │ └── impl/ # 业务逻辑实现类 └── vo/ # 视图对象 ###### 功能模块分析 核心业务实体 根据数据库结构，系统主要包含以下核心实体： 用户系统 (user) 支持多种用户类型：老人、志愿者、队伍、管理员 包含基础用户信息和状态管理 志愿者管理 (volunteer, volunteer_team, team_member) 志愿者个人信息管理 志愿者队伍创建和管理 队伍成员关系管理 志愿活动系统 (volunteer_activity, activity_tag, activity_participation) 活动发布、审核和管理 活动标签分类 志愿者参与活动记录 社区功能 (post, post_tag, comment) 帖子发布和管理 帖子标签分类 评论和评分系统 服务记录与统计 (service_record, platform_stats, user_activity_log) 服务时长记录 平台数据统计 用户行为日志 审核系统 (audit_record) 活动和帖子审核流程 审核记录管理 控制层结构 控制层按用户角色划分： AdminLoginController - 管理员登录接口 Manage目录 - 管理员功能接口 Volunteer目录 - 志愿者相关接口 elderly目录 - 老人相关接口 ###### 数据访问层 采用MyBatis-Plus作为持久层框架，每个实体对应一个Mapper接口，负责数据的增删改查操作。 ##### 2. 以下是对于用户A端的说明： ###### 技术栈： 核心框架：Vue 3（使用Composition API） 路由管理：Vue Router 4 UI框架：Element Plus HTTP客户端：Axios 构建工具：Vite 样式预处理器：Sass/SCSS Markdown编辑器：@kangc/v-md-editor 代码高亮：highlight.js 状态管理：基于Vue的响应式API实现简单的全局状态管理 src/ ├── assets/ # 静态资源文件（CSS、图片等） ├── components/ # 可复用的Vue组件 ├── router/ # 路由配置 ├── utils/ # 工具类和辅助函数 ├── views/ # 页面级Vue组件 ├── App.vue # 根组件 └── main.js # 应用入口文件 ###### 核心架构组件详解 1.应用入口（main.js） 项目使用Vue 3的Composition API风格，通过createApp创建应用实例。主要功能包括： 集成Element Plus UI组件库，并设置中文语言包 配置Markdown编辑器（VMdEditor）和预览组件（VMdPreview） 注册Element Plus图标组件库 配置全局样式 挂载路由和各种插件 2.路由系统（router/index.js） 采用Vue Router 4实现SPA路由管理，路由结构如下： /login：登录页面 /manage：主管理界面（包含子路由） /manage/home：论坛首页 /manage/person：已解决帖子 /manage/allwork：发帖审核情况 /manage/work：新建帖子 /manage/setting：用户设置 /404：404页面 通配符路由处理未匹配路径，重定向到404页面 3.状态管理 项目采用简单的全局状态管理模式，通过utils/globalState.ts文件定义响应式状态，这种模式适用于小型项目，避免了引入Vuex或Pinia等复杂状态管理库。 4.HTTP客户端封装（utils/request.js） 对Axios进行了封装，主要功能包括： 设置基础URL和超时时间 请求拦截器：统一设置Content-Type 响应拦截器：统一处理响应数据格式和错误处理 集成Element Plus的错误消息提示 5.页面结构 项目采用典型的管理后台布局： Manage.vue：主管理界面，包含顶部导航栏和左侧菜单栏 Login.vue：登录/注册页面，采用现代化的切换设计 各功能页面通过路由嵌套在Manage.vue的中展示 6.样式架构 global.css：全局样式定义 Scoped样式：各组件使用scoped样式避免全局污染 CSS变量：使用CSS自定义属性管理主题色 Element Plus样式定制：通过深度选择器修改组件库默认样式 #### 3. 以下是关于用户B端志愿者端的说明 这是一个基于Vue 3的单页面应用程序（SPA），用于志愿活动管理，包含志愿者个人用户和组织用户两种角色。 ##### 技术栈 核心框架：Vue 3 (Composition API) 路由管理：Vue Router 4 UI组件库：Element Plus HTTP客户端：Axios 构建工具：Vite 状态管理：未使用Vuex/Pinia，采用localStorage存储用户信息 ##### 架构图 src/ ├── assets/ # 静态资源文件 ├── components/ # 可复用组件 │ └── icons/ # 图标组件 ├── router/ # 路由配置 ├── utils/ # 工具类 ├── views/ # 页面组件 └── App.vue # 根组件 ##### 架构设计 路由架构 采用Vue Router实现单页面应用路由管理 主要分为登录页面和管理系统页面 系统管理采用嵌套路由，包含主页、活动管理、个人/组织设置等子页面 用户角色 个人志愿者（userType = 2） 志愿者组织（userType = 3） 根据不同角色显示不同的功能菜单和页面内容 页面布局 采用经典的三段式布局：头部导航栏 + 左侧菜单 + 右侧内容区 通过条件渲染为不同用户角色展示不同的界面元素 数据交互 使用Axios与后端API进行数据交互 封装了request.js工具类，统一处理请求和响应拦截 采用localStorage存储用户登录信息 主要功能模块 用户认证（登录/注册） 志愿活动管理（发布、审核、参与） 个人信息设置 活动搜索和详情查看 #### 4. 以下是管理员端的架构说明 这是一个基于Vue 3的单页面应用程序（SPA），采用了典型的前端技术栈，用于管理志愿者活动和相关信息。 ##### 技术栈 核心框架：Vue 3 (Composition API) 路由管理：Vue Router 4 UI框架：Element Plus HTTP客户端：Axios 构建工具：Vite 图表库：ECharts CSS预处理器：Sass ##### 项目架构模式 ┌────────────────────────────────────┐ │ View Layer │ │ (Vue Components - 视图层) │ ├────────────────────────────────────┤ │ Routing Layer │ │ (Vue Router - 路由层) │ ├────────────────────────────────────┤ │ Business Logic │ │ (Vue Components + Composition │ │ API - 业务逻辑层) │ ├────────────────────────────────────┤ │ Service Layer │ │ (Axios - HTTP客户端) │ ├────────────────────────────────────┤ │ Utility Layer │ │ (Request Interceptors, Tools) │ └────────────────────────────────────┘ 目录结构 src/ ├── assets/ # 静态资源文件（图片、样式等） ├── components/ # 可复用的UI组件 ├── router/ # 路由配置 ├── utils/ # 工具类和通用函数 ├── views/ # 页面级组件 ├── App.vue # 根组件 └── main.js # 应用入口文件 ###### 管理端亮点 系统采用基于Token的认证机制： 用户在登录页面进行身份验证 成功登录后跳转到管理后台 系统通过localStorage存储token信息 通过拦截器处理请求和响应 数据流架构 ![输入图片说明](image.png) #### 安装教程 1. npm install 2. npm install axios --save 3. npm install vue-router --save 4. npm install vue-router@4 5. 记得启动mysql数据库，数据文件在web_backend里面，其中的数据库结构是数据库构造文件 #### 使用说明 1. 对于各个端口我们进行了重新命名，例如老人段是5003等，方便辨识以及多端口同时合作 2. 在启用所有端口之前需要优先配置后端以及数据库，除管理员静态写入之外，剩余项目需要注册 3. readme仅仅是基本介绍，不包含全部功能，请自行探索（期待你能发现我的彩蛋） #### 参与贡献 1. Fork 本仓库 2. 新建 ，master 分支 3. 提交代码 4. 新建 Pull Request #### 特技 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com) 3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目 4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目 5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) 6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)