一个基于 Spring Boot + Vue 3 的现代化小区物业管理平台，提供 PC 管理端和移动端双端支持，实现问题报修、消息发布、论坛互动等核心功能。

本平台是一个面向小区业主和物业管理公司的综合管理系统，旨在提升物业管理效率，增强业主与物业之间的沟通互动。平台采用前后端分离架构，提供 PC 管理端 和 移动端 双端支持，支持问题报修全流程管理、消息分类发布、论坛互动交流等核心功能。

• 🖥️ 双端支持：PC 管理端 + 移动端，满足不同场景使用需求
• 🔧 问题管理闭环：业主发布问题 → 物业接收处理 → 整改反馈 → 业主评价 → 问题闭环
• 📢 消息分类发布：支持日常通知、限时公告、制度公示三大板块分类管理
• 💬 论坛互动交流：业主与业主、业主与物业之间的互动论坛平台
• 📊 数据可视化：首页数据看板，实时展示问题处理、消息发布等统计数据
• 🔐 角色权限管理：支持系统管理员、物业工作人员、业主三端独立管理
• 📱 移动优先：基于 Vant 的移动端设计，适配各种手机屏幕尺寸
• 🌐 响应式设计：PC 端适配桌面、平板等多种设备

模块	业主功能	物业工作人员功能
首页	问题统计、消息提醒、热门帖子、快捷操作	工作数据看板、待办提醒、消息统计
问题管理	发布问题、查看进度、上传图片、评价反馈	接收任务、处理问题、上传整改照片、状态更新
消息中心	分类查看消息、确认阅读、限时公告提醒	发布消息、分类管理、查看统计、定时推送
论坛互动	发帖评论、匿名发布、点赞收藏、热门推荐	发帖评论、官方回复、意见征集、内容管理
个人中心	个人信息、房屋信息、修改密码	个人信息、工作统计、修改密码

模块	功能描述
用户管理	业主管理、物业工作人员管理、账号启用禁用、角色分配
角色权限	角色定义、权限分配、权限矩阵管理
问题管理	问题统计、处理监督、数据导出、问题审核
消息管理	消息发布、消息统计、浏览统计、消息删除
论坛管理	帖子审核、违规处理、意见征集管理、内容管理
系统配置	参数设置、日志查看、性能监控、数据备份

Spring Boot: 3.1.5
Spring Data JPA: 数据持久化（自动更新表结构）
Spring Security: 认证授权
JWT: Token 认证
MySQL: 8.0+ (主数据库)
Redis: 7.0+ (缓存)
MinIO: 8.5+ (对象存储)
Neo4j: 5.16+ (图数据库)
WebSocket: 实时通信

Vue: 3.4+
TypeScript: 5.4+
Vite: 5.1+ (构建工具)
Vue Router: 4.3+ (路由)
Pinia: 2.1+ (状态管理)
Element Plus: 2.6+ (UI 组件库)
ECharts: 5.5+ (数据可视化)
Axios: 1.6+ (HTTP 客户端)

Vue: 3.4+
TypeScript: 5.4+
Vite: 5.1+ (构建工具)
Vue Router: 4.3+ (路由)
Pinia: 2.1+ (状态管理)
Vant: 4.8+ (移动端 UI 组件库)
Axios: 1.6+ (HTTP 客户端)
Dayjs: 日期处理

Docker: 容器化
Kubernetes: 容器编排
Nginx: 反向代理
CNB: CI/CD 平台
Prometheus: 监控
Grafana: 可视化

• JDK 17+
• Node.js 18+
• Maven 3.6+
• MySQL 8.0+
• Redis 7.0+
• Docker (可选)

git clone https://cnb.cool/code-channel/residential-property-visualization-platform.git
cd residential-property-visualization-platform

# 进入后端目录
cd residential-property-backend

# 配置数据库
# 修改 src/main/resources/application.yml 中的数据库连接信息

# 启动后端服务
mvn spring-boot:run

# 或使用 Docker
docker-compose up -d mysql redis
mvn spring-boot:run

后端服务启动在：http://localhost:8088/api

API 文档：http://localhost:8088/api/swagger-ui.html

# 进入前端目录
cd residential-property-frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 或使用 yarn
yarn install
yarn dev

PC 端服务启动在：http://localhost:5173

# 进入移动端目录
cd residential-property-mobile

# 安装依赖
npm install

# 启动开发服务器（监听所有网络接口）
npm run dev

# 或使用 yarn
yarn install
yarn dev

移动端服务启动在：

• 本地访问：http://localhost:5174
• 网络访问：http://192.168.x.x:5174 (可在手机浏览器访问)

• 访问地址：http://localhost:5173
• 适用角色：系统管理员、物业工作人员

• 本地访问：http://localhost:5174
• 网络访问：http://192.168.x.x:5174
• 适用角色：业主、物业工作人员

• 后端地址：http://localhost:8088/api
• Swagger 文档：http://localhost:8088/api/swagger-ui.html

用户名: admin
密码: admin123

用户名: property001
密码: property123

用户名: 13800138000
密码: user123

residential-property-visualization-platform/
├── docs/                              # 项目文档
│   ├── SPEC.md                         # 需求分析
│   ├── PROTOTYPE.md                    # 页面原型
│   ├── API.md                          # 接口设计
│   ├── DESIGN.md                       # 详细设计
│   └── MOBILE_DESIGN.md                # 移动端设计
│
├── residential-property-backend/       # 后端项目
│   ├── src/
│   │   └── main/
│   │       ├── java/com/property/
│   │       │   ├── controller/        # 控制器层
│   │       │   ├── service/           # 服务层
│   │       │   ├── repository/        # 数据访问层
│   │       │   ├── entity/            # 实体类
│   │       │   ├── dto/               # 数据传输对象
│   │       │   ├── config/            # 配置类
│   │       │   ├── security/          # 安全配置
│   │       │   ├── websocket/         # WebSocket
│   │       │   └── util/              # 工具类
│   │       └── resources/
│   │           ├── application.yml    # 主配置
│   │           ├── application-dev.yml
│   │           └── application-prod.yml
│   ├── pom.xml                        # Maven 配置
│   └── Dockerfile                     # 后端镜像
│
├── residential-property-frontend/     # PC 管理端项目
│   ├── src/
│   │   ├── api/                        # API 封装
│   │   ├── assets/                     # 静态资源
│   │   ├── components/                 # 公共组件
│   │   ├── composables/                # 组合式函数
│   │   ├── layouts/                    # 布局组件
│   │   ├── router/                     # 路由配置
│   │   ├── stores/                     # Pinia 状态管理
│   │   ├── types/                      # TypeScript 类型
│   │   ├── utils/                      # 工具函数
│   │   ├── views/                      # 页面视图
│   │   ├── App.vue
│   │   └── main.ts
│   ├── package.json
│   ├── vite.config.ts
│   └── Dockerfile                     # 前端镜像
│
├── residential-property-mobile/        # 移动端项目
│   ├── src/
│   │   ├── api/                        # API 封装
│   │   ├── components/                 # 公共组件
│   │   ├── router/                     # 路由配置
│   │   ├── stores/                     # Pinia 状态管理
│   │   ├── utils/                      # 工具函数
│   │   ├── views/                      # 页面视图
│   │   │   ├── auth/                   # 认证相关
│   │   │   ├── home/                   # 首页
│   │   │   ├── problem/                # 问题管理
│   │   │   ├── message/                # 消息通知
│   │   │   ├── forum/                  # 论坛互动
│   │   │   └── profile/                # 个人中心
│   │   ├── App.vue
│   │   └── main.ts
│   ├── package.json
│   ├── vite.config.ts
│   └── Dockerfile                     # 移动端镜像
│
├── docker-compose.yml                  # 本地开发环境
├── .cnb.yml                           # CNB 构建配置
├── .gitignore
└── README.md                          # 项目说明

1. 创建 Entity

@Entity
@Table(name = "your_table")
@Data
public class YourEntity {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable = false)
    private String name;
}

2. 创建 Repository

@Repository
public interface YourRepository extends JpaRepository<YourEntity, Long> {
    List<YourEntity> findByStatus(String status);
}

3. 创建 Service

@Service
public class YourService {
    @Autowired
    private YourRepository repository;

    public List<YourEntity> findAll() {
        return repository.findAll();
    }
}

4. 创建 Controller

@RestController
@RequestMapping("/api/your-resource")
public class YourController {
    @Autowired
    private YourService service;

    @GetMapping
    public Result<List<YourEntity>> list() {
        return Result.success(service.findAll());
    }
}

1. 创建页面组件

// src/views/your-module/YourPage.vue
<template>
  <div class="your-page">
    <h1>Your Page Title</h1>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

onMounted(() => {
  // 初始化逻辑
})
</script>

2. 配置路由

// src/router/routes/index.ts
{
  path: '/your-module',
  name: 'YourModule',
  component: () => import('@/views/your-module/Index.vue'),
  meta: { title: '您的模块', requiresAuth: true }
}

3. 添加 API 接口

// src/api/your-module.ts
import request from '@/utils/request'

export function getYourData() {
  return request({
    url: '/api/your-data',
    method: 'get'
  })
}

由于使用 Spring Data JPA 的 ddl-auto: update 配置，数据库表结构会在应用启动时自动更新：

1. 添加字段：直接在 Entity 中添加属性
2. 修改字段：修改 Entity 中的属性类型或注解
3. 删除字段：从 Entity 中删除属性

// 例如：添加新字段
@Column(name = "new_field", length = 100)
private String newField;

重启应用后，数据库表结构会自动更新。

# 启动所有服务
docker-compose up -d

# 查看日志
docker-compose logs -f backend
docker-compose logs -f frontend

# 停止服务
docker-compose down

参考 .cnb.yml 配置文件，使用 CNB 平台进行 CI/CD 部署。

创建 .env.development 文件：

# 服务器
SERVER_PORT=8088
SPRING_PROFILES_ACTIVE=dev

# 数据库
DB_HOST=localhost
DB_PORT=3306
DB_NAME=property_dev
DB_USER=root
DB_PASSWORD=rootpassword

# Redis
REDIS_HOST=localhost
REDIS_PORT=6379
REDIS_PASSWORD=

# JWT
JWT_SECRET=dev-secret-key
JWT_EXPIRATION=86400000

创建 .env.production 文件：

# 服务器
SERVER_PORT=8088
SPRING_PROFILES_ACTIVE=prod

# 数据库
DB_HOST=your-production-host
DB_PORT=3306
DB_NAME=property_prod
DB_USER=prod_user
DB_PASSWORD=prod_password

# Redis
REDIS_HOST=your-redis-host
REDIS_PORT=6379
REDIS_PASSWORD=your_redis_password

# JWT
JWT_SECRET=your-production-secret-key
JWT_EXPIRATION=86400000

详细的 API 文档请查看：API.md

• 认证接口：POST /api/auth/login
• 问题接口：/api/problems/*
• 消息接口：/api/messages/*
• 论坛接口：/api/posts/*
• 管理接口：/api/admin/*

启动后端服务后访问：http://localhost:8088/api/swagger-ui.html

cd residential-property-backend

# 运行单元测试
mvn test

# 运行集成测试
mvn verify

cd residential-property-frontend

# 运行单元测试
npm run test:unit

# 运行端到端测试
npm run test:e2e

后端集成了 Spring Boot Actuator，提供应用监控端点：

• 健康检查：/api/actuator/health
• 指标信息：/api/actuator/metrics
• 环境信息：/api/actuator/env
• 线程信息：/api/actuator/threaddump

# 查看后端日志
tail -f residential-property-backend/logs/application.log

# 查看 Docker 日志
docker-compose logs -f backend

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 创建 Pull Request

• 后端：遵循 Alibaba Java 开发手册
• 前端：遵循 Vue 3 风格指南
• 提交信息：遵循 Conventional Commits 规范

详细的项目文档请查看 docs/ 目录：

• 需求分析.md：详细的需求分析和功能设计
• 原型设计.md：页面原型和交互设计
• 接口设计.md：RESTful API 接口文档
• 详细设计.md：系统架构和详细设计

• 系统管理员：最高权限，可以管理所有用户和系统配置
• 物业团队：根据角色拥有不同的管理权限
• 业主：基础权限，可以报修问题、查看消息、论坛互动

• 所有密码使用 BCrypt 加密存储
• 敏感数据传输使用 HTTPS 加密
• JWT Token 定期刷新，过期自动失效
• 接口访问频率限制，防止恶意攻击

• 项目维护：物业平台开发团队
• 技术支持：tech-support@example.com
• 问题反馈：https://github.com/your-org/issues

• ✨ 移动端应用：基于 Vant 4.8 的完整移动端实现
• ✨ 双端支持：PC 管理端 + 移动端，满足不同场景需求
• ✨ 角色权限体系：业主、物业工作人员、系统管理员三端独立管理
• ✨ 移动端专属功能：
  • 业主：问题报修、消息查看、论坛互动、个人中心
  • 物业工作人员：任务处理、消息发布、数据统计、工作管理
• ✨ CORS 配置优化：支持移动端端口 5174 网络访问
• ✨ API 响应格式统一：数组与分页对象自动转换

• ⚡ 移动端响应式设计，适配各种手机屏幕
• ⚡ Vant 组件库移动端交互优化
• ⚡ JWT + X-User-Id 双重认证机制
• ⚡ 移动端路由权限控制

• 🐛 修复移动端 API 接口路径问题
• 🐛 修复消息类型枚举值不一致问题
• 🐛 修复评论功能与 API 文档不符问题

• ✨ 完成问题管理全流程功能
• ✨ 实现消息分类发布功能
• ✨ 搭建论坛互动平台
• ✨ 部署数据可视化看板

• ⚡ 使用 Spring Data JPA 自动更新表结构
• ⚡ WebSocket 实时通信支持
• ⚡ 响应式设计适配多端

• 🐛 修复跨域配置问题
• 🐛 修复文件上传大小限制
• 🐛 优化 Token 刷新机制

• 🏠 首页概览：一键查看问题统计、消息提醒、热门帖子
• 📝 快速报修：拍照上传、位置选择、问题描述、进度跟踪
• 🔔 消息提醒：限时公告置顶显示、重要消息确认阅读
• 💬 论坛互动：匿名发帖、点赞收藏、热门推荐、实时评论
• 👤 个人中心：房屋信息绑定、问题历史、修改密码

• 📊 工作看板：今日新增、待处理、进行中、已完成统计
• ⚠️ 待办提醒：待接收、待跟进、待整改、待反馈实时提醒
• 📢 消息发布：日常通知、限时公告、制度公示一键发布
• 📋 任务管理：问题接收、状态更新、整改上传、闭环管理
• 📈 工作统计：处理量统计、工作效率分析

• Vant 4.8 移动端组件库：提供原生 App 般的交互体验
• Touch 优化：所有交互元素最小点击区域 44x44px
• 手势支持：下拉刷新、上拉加载、左滑删除、图片预览
• 离线缓存：登录状态持久化、用户信息本地存储
• 响应式图片：图片懒加载、缩略图预览、原图查看
• 性能优化：虚拟滚动、列表分页、请求防抖

# 启动移动端（监听所有网络接口）
cd residential-property-mobile
npm run dev

# 手机浏览器访问
# 查看本机 IP 地址
ifconfig  # macOS
ipconfig  # Windows
ip addr   # Linux

# 手机浏览器访问
http://192.168.x.x:5174

# 构建移动端
cd residential-property-mobile
npm run build

# 使用 Docker 部署
docker build -t mobile-app .
docker run -p 80:80 mobile-app

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

感谢以下开源项目：

• Spring Boot - Java 企业级开发框架
• Spring Data JPA - 数据持久化框架
• Spring Security - 安全框架
• MySQL - 关系型数据库
• Redis - 缓存数据库

• Vue.js - 渐进式 JavaScript 框架
• Element Plus - Vue 3 UI 组件库
• ECharts - 数据可视化图表库
• Vite - 下一代前端构建工具

• Vant - 轻量、可靠的移动端组件库
• Vue Router - Vue.js 官方路由
• Pinia - Vue 3 状态管理库
• Axios - HTTP 客户端
• Dayjs - 轻量级日期处理库

• Docker - 容器化平台
• Kubernetes - 容器编排平台
• CNB - CI/CD 平台

---

🎉 感谢使用小区物业可视化平台！

如有问题或建议，欢迎提交 Issue 或 Pull Request。