fix: 修复所有小程序页面的HTML实体编码显示问题
一个基于 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 # 项目说明
- 创建 Entity
@Entity
@Table(name = "your_table")
@Data
public class YourEntity {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(nullable = false)
private String name;
}
- 创建 Repository
@Repository
public interface YourRepository extends JpaRepository<YourEntity, Long> {
List<YourEntity> findByStatus(String status);
}
- 创建 Service
@Service
public class YourService {
@Autowired
private YourRepository repository;
public List<YourEntity> findAll() {
return repository.findAll();
}
}
- 创建 Controller
@RestController
@RequestMapping("/api/your-resource")
public class YourController {
@Autowired
private YourService service;
@GetMapping
public Result<List<YourEntity>> list() {
return Result.success(service.findAll());
}
}
- 创建页面组件
// 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>
- 配置路由
// src/router/routes/index.ts
{
path: '/your-module',
name: 'YourModule',
component: () => import('@/views/your-module/Index.vue'),
meta: { title: '您的模块', requiresAuth: true }
}
- 添加 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 配置，数据库表结构会在应用启动时自动更新：
- 添加字段：直接在 Entity 中添加属性
- 修改字段：修改 Entity 中的属性类型或注解
- 删除字段：从 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
欢迎贡献代码！请遵循以下步骤：
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 创建 Pull Request
- 后端：遵循 Alibaba Java 开发手册
- 前端：遵循 Vue 3 风格指南
- 提交信息：遵循 Conventional Commits 规范
详细的项目文档请查看 docs/ 目录：
- 系统管理员：最高权限，可以管理所有用户和系统配置
- 物业团队：根据角色拥有不同的管理权限
- 业主：基础权限，可以报修问题、查看消息、论坛互动
- 所有密码使用 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。
Sponsor
About
Sponsor
Language
Vue41.5%
Java31.5%
JavaScript16.7%
TypeScript7.1%
Others3.2%
35/F,Tencent Building,Kejizhongyi Avenue,Nanshan District,Shenzhen
