物业管理系统

项目简介

这是一个完整的智慧社区物业管理平台，包含H5移动端和PC管理后台。系统实现了通知公告、社区活动、访客管理、报修服务、失物招领、投诉建议、二手市场、分享墙、在线聊天等核心功能，采用前后端分离架构，适合作为Vue全栈开发学习项目或计算机设计参考。

技术栈

后端技术

技术	版本/说明
运行环境	Node.js
Web框架	Koa 2.7.0
数据库	MySQL 5.7+
数据库驱动	mysql
路由管理	koa-router
跨域处理	koa2-cors
请求解析	koa-bodyparser
文件上传	koa-multer
静态资源	koa-static
模板引擎	pug
实时通信	Socket.IO 4.0.1
热重载	nodemon

管理后台技术

技术	版本/说明
前端框架	Vue 2.6.11
UI组件库	Element UI 2.15.0
路由管理	Vue Router 3.2.0
状态管理	Vuex 3.4.0
HTTP请求	Axios 0.21.1
图表库	ECharts 5.0.1
CSS预处理器	Less 4.1.0

H5移动端技术

技术	版本/说明
前端框架	Vue 2.6.11
UI组件库	Vant 2.12.3
路由管理	Vue Router 3.2.0
状态管理	Vuex 3.4.0
HTTP请求	Axios 0.21.1
轮播组件	Swiper 6.4.5 / vue-awesome-swiper
滚动组件	vuescroll 4.17.3
实时通信	Socket.IO Client 4.0.1
移动端适配	amfe-flexible + postcss-px2rem
点击优化	fastclick
CSS预处理器	Less 4.1.0

项目特点

• 前后端分离：后端提供RESTful API，前端独立开发部署
• 多端支持：H5移动端 + PC管理后台
• 实时通信：基于Socket.IO实现在线聊天室功能
• 移动端适配：使用flexible + px2rem实现移动端自适应
• 完整物业功能：涵盖社区物业管理的各个方面
• 多角色管理：支持管理员、住户、普通用户等多种角色
• 数据可视化：管理后台集成ECharts图表展示

功能模块

H5移动端功能

1. 首页模块 (views/Index)

• 轮播图展示
• 功能导航入口
• 社区公告展示
• 快捷服务入口

2. 通知公告 (Notice)

• 物业通知列表
• 公告详情查看
• 重要通知置顶

3. 社区活动 (CommunityActivity)

• 活动列表展示
• 活动详情查看
• 活动报名参与

4. 组织活动 (OrganizingActivity)

• 用户发起活动
• 活动管理
• 参与人员管理

5. 访客管理 (Visitor)

• 访客登记
• 访客记录查询
• 访客通行码

6. 报修服务 (ReportRepair)

• 在线报修申请
• 报修进度查询
• 维修评价

7. 失物招领 (ReportLoss)

• 失物登记
• 招领信息发布
• 失物认领

8. 投诉建议 (Complaint)

• 在线投诉
• 建议提交
• 处理进度查询

9. 二手市场 (views/Market)

• 二手物品发布
• 商品浏览
• 商品搜索
• 联系卖家

10. 分享墙 (views/Share)

• 生活分享发布
• 图文动态展示
• 互动交流

11. 聊天室 (views/ChatRoom)

• 实时在线聊天
• 消息发送接收
• 聊天记录

12. 个人中心 (views/PersonalCenter)

• 用户信息展示
• 个人资料修改 (ChangePersonal)
• 地址登记 (AddressRegister)
• 活动管理 (ActivityManagement)
• 二手商品管理 (MarketManagement)
• 分享管理 (ShareManagement)
• 密码修改 (ChangePassword)
• 登录/注册

管理后台功能

1. 首页仪表盘 (Home)

• 数据统计概览
• 图表展示
• 快捷操作入口

2. 通知公告管理 (NoticeControl)

• 公告列表
• 新增/编辑/删除公告
• 公告发布管理

3. 小区活动管理 (CommunityActivityControl)

• 活动列表
• 活动审核
• 活动统计

4. 组织活动管理 (OrganizingActivityControl)

• 用户活动审核
• 活动管理
• 参与人员管理

5. 访客通道管理 (VisitorControl)

• 访客记录列表
• 访客审核
• 访客统计

6. 损坏报修管理 (ReportRepairControl)

• 报修列表
• 报修处理
• 维修派单
• 完成确认

7. 失物报备管理 (ReportLossControl)

• 失物列表
• 招领管理
• 认领确认

8. 投诉建议管理 (ComplaintControl)

• 投诉列表
• 投诉处理
• 回复反馈

9. 二手市场管理 (MarketControl)

• 商品列表
• 商品审核
• 违规处理

10. 分享墙管理 (ShareControl)

• 分享内容列表
• 内容审核
• 违规处理

11. 账号管理 (AccountControl)

• 用户账号列表
• 账号状态管理
• 用户信息查看

12. 住户管理 (HouseHoldControl)

• 住户信息列表
• 住户登记
• 房屋绑定

13. 管理员账号 (AdminAccountControl)

• 管理员列表
• 新增/编辑管理员
• 权限管理

项目结构

property-management-system/
├── admin/                          # 管理后台（Vue2 + Element UI）
│   ├── public/                     # 静态资源
│   ├── src/
│   │   ├── assets/                 # 静态资源
│   │   │   ├── css/                # 样式文件
│   │   │   ├── fonts/              # 字体文件
│   │   │   └── images/             # 图片资源
│   │   ├── components/             # 功能组件
│   │   │   ├── AccountControl/     # 账号管理
│   │   │   ├── AdminAccountControl/ # 管理员账号
│   │   │   ├── CommunityActivityControl/ # 小区活动
│   │   │   ├── ComplaintControl/   # 投诉建议
│   │   │   ├── Home/               # 首页仪表盘
│   │   │   ├── HouseHoldControl/   # 住户管理
│   │   │   ├── MarketControl/      # 二手市场
│   │   │   ├── NoticeControl/      # 通知公告
│   │   │   ├── OrganizingActivityControl/ # 组织活动
│   │   │   ├── ReportLossControl/  # 失物报备
│   │   │   ├── ReportRepairControl/ # 损坏报修
│   │   │   ├── ShareControl/       # 分享墙
│   │   │   └── VisitorControl/     # 访客通道
│   │   ├── router/                 # 路由配置
│   │   ├── store/                  # Vuex状态管理
│   │   ├── views/                  # 页面视图
│   │   │   ├── Back/               # 后台主布局
│   │   │   └── Login/              # 登录页
│   │   ├── App.vue                 # 根组件
│   │   └── main.js                 # 入口文件
│   ├── package.json
│   └── vue.config.js               # Vue配置
│
├── H5/                             # H5移动端（Vue2 + Vant）
│   ├── public/                     # 静态资源
│   ├── src/
│   │   ├── assets/                 # 静态资源
│   │   │   ├── css/                # 样式文件
│   │   │   ├── fonts/              # 字体文件
│   │   │   ├── images/             # 图片资源
│   │   │   └── less/               # Less样式
│   │   ├── components/             # 公共组件
│   │   │   ├── Banner/             # 轮播图组件
│   │   │   ├── TabBar/             # 底部导航
│   │   │   └── TitleTop/           # 顶部标题
│   │   ├── router/                 # 路由配置
│   │   ├── store/                  # Vuex状态管理
│   │   ├── views/                  # 页面视图
│   │   │   ├── ChatRoom/           # 聊天室
│   │   │   ├── Home/               # 主页框架
│   │   │   ├── Index/              # 首页
│   │   │   │   └── components/Nav/ # 功能导航
│   │   │   │       └── components/ # 各功能页面
│   │   │   ├── Market/             # 二手市场
│   │   │   ├── PersonalCenter/     # 个人中心
│   │   │   └── Share/              # 分享墙
│   │   ├── App.vue                 # 根组件
│   │   └── main.js                 # 入口文件
│   ├── package.json
│   └── vue.config.js               # Vue配置
│
├── sever/                          # 后端服务（Koa + MySQL）
│   ├── bin/
│   │   └── www                     # 启动入口
│   ├── src/
│   │   ├── conf/
│   │   │   └── db.js               # 数据库配置
│   │   ├── controller/             # 控制器
│   │   │   ├── admin/              # 管理端控制器
│   │   │   │   ├── account.js      # 账号管理
│   │   │   │   ├── activity.js     # 活动管理
│   │   │   │   └── notice.js       # 公告管理
│   │   │   ├── house-holder/       # 住户控制器
│   │   │   │   └── holder.js       # 住户管理
│   │   │   └── user/               # 用户端控制器
│   │   │       ├── account.js      # 账号相关
│   │   │       ├── activity.js     # 活动相关
│   │   │       ├── complaint.js    # 投诉建议
│   │   │       ├── lost.js         # 失物招领
│   │   │       ├── marketGoods.js  # 二手市场
│   │   │       ├── repair.js       # 报修服务
│   │   │       ├── share.js        # 分享墙
│   │   │       └── visitor.js      # 访客管理
│   │   ├── db/
│   │   │   └── mysql.js            # MySQL连接
│   │   ├── model/                  # 数据模型
│   │   │   ├── errorInfo.js        # 错误信息
│   │   │   ├── resModel.js         # 响应模型
│   │   │   └── successInfo.js      # 成功信息
│   │   ├── public/                 # 静态资源
│   │   │   └── uploads/            # 上传文件存储
│   │   ├── routes/                 # 路由文件
│   │   │   ├── admin-api/          # 管理端API
│   │   │   ├── house-holder-api/   # 住户API
│   │   │   ├── uploadImg/          # 图片上传
│   │   │   └── user-api/           # 用户端API
│   │   ├── services/               # 业务逻辑层
│   │   │   ├── admin/              # 管理端服务
│   │   │   ├── house-holder/       # 住户服务
│   │   │   └── user/               # 用户端服务
│   │   └── views/                  # 模板视图
│   ├── app.js                      # Koa应用配置
│   └── package.json
│
├── 截图/                            # 项目截图
│   ├── 管理后台/                    # 后台截图
│   └── 小程序/                      # H5截图
│
├── library.sql                     # 数据库SQL文件
├── mysql.sh                        # MySQL脚本
├── mysql操作手册.md                 # MySQL操作说明
├── 数据库创建方法.md                # 数据库创建说明
├── 运行必读.md                      # 运行说明
└── 物业管理系统.xmind               # 项目思维导图

数据模型

用户表 (user)

{
  id: int,                    // 用户ID
  username: varchar(10),      // 用户名
  nickname: varchar(255),     // 昵称
  avatar: varchar(1000),      // 头像
  phone: varchar(11),         // 手机号
  password: varchar(100),     // 密码
  role: int,                  // 角色 (0普通用户, 99管理员)
  active: int,                // 状态 (0禁用, 1正常)
  sex: int,                   // 性别
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

通知公告表 (notice)

{
  id: int,                    // 公告ID
  title: varchar(255),        // 标题
  content: text,              // 内容
  cover: varchar(255),        // 封面图
  status: int,                // 状态
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

活动表 (activity)

{
  id: int,                    // 活动ID
  title: varchar(255),        // 活动标题
  content: text,              // 活动内容
  cover: varchar(255),        // 封面图
  start_time: datetime,       // 开始时间
  end_time: datetime,         // 结束时间
  user_id: int,               // 发起人ID
  status: int,                // 状态
  type: int,                  // 类型 (社区活动/组织活动)
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

访客表 (visitor)

{
  id: int,                    // 访客ID
  user_id: int,               // 住户ID
  visitor_name: varchar(50),  // 访客姓名
  visitor_phone: varchar(11), // 访客电话
  visit_time: datetime,       // 来访时间
  reason: varchar(255),       // 来访事由
  status: int,                // 状态
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

报修表 (repair)

{
  id: int,                    // 报修ID
  user_id: int,               // 用户ID
  title: varchar(255),        // 报修标题
  content: text,              // 报修内容
  cover: varchar(1000),       // 图片
  address: varchar(255),      // 地址
  status: int,                // 状态 (0待处理 1处理中 2已完成)
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

失物招领表 (lost)

{
  id: int,                    // 记录ID
  user_id: int,               // 用户ID
  title: varchar(255),        // 标题
  content: text,              // 描述
  cover: varchar(1000),       // 图片
  type: int,                  // 类型 (0失物 1招领)
  status: int,                // 状态
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

投诉建议表 (complaint)

{
  id: int,                    // 投诉ID
  user_id: int,               // 用户ID
  title: varchar(255),        // 标题
  content: text,              // 内容
  cover: varchar(1000),       // 图片
  reply: text,                // 回复
  status: int,                // 状态
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

二手商品表 (market_goods)

{
  id: int,                    // 商品ID
  user_id: int,               // 用户ID
  title: varchar(255),        // 商品名称
  content: text,              // 商品描述
  cover: varchar(1000),       // 图片
  price: decimal(10,2),       // 价格
  status: int,                // 状态
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

分享表 (share)

{
  id: int,                    // 分享ID
  user_id: int,               // 用户ID
  content: text,              // 分享内容
  cover: varchar(1000),       // 图片
  status: int,                // 状态
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

住户表 (house_holder)

{
  id: int,                    // 住户ID
  user_id: int,               // 用户ID
  building: varchar(50),      // 楼栋
  unit: varchar(50),          // 单元
  room: varchar(50),          // 房号
  status: int,                // 状态
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

运行环境要求

后端环境

• Node.js 14.0+
• MySQL 5.7+
• npm 或 yarn

管理后台

• Node.js 14.0+
• npm 或 yarn
• 现代浏览器（Chrome、Firefox、Edge等）

H5移动端

• Node.js 14.0+
• npm 或 yarn
• 现代浏览器或移动端浏览器

快速开始

1. 数据库配置

1. 创建MySQL数据库

CREATE DATABASE community_management CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

2. 导入数据库文件

mysql -u root -p community_management < library.sql

3. 修改数据库配置 编辑 sever/src/conf/db.js：

const MYSQL_CONF = {
  host: 'localhost',
  user: 'root',
  password: '你的密码', // 修改为你的密码
  port: '3306',
  database: 'community_management',
};

2. 启动后端服务

# 进入后端目录
cd sever

# 安装依赖
npm install

# 启动服务（开发模式）
npm run dev

后端服务默认运行在 http://localhost:3000

3. 启动管理后台

# 进入管理后台目录
cd admin

# 安装依赖
npm install

# 启动开发服务器
npm run dev

管理后台默认运行在 http://localhost:8080

4. 启动H5移动端

# 进入H5目录
cd H5

# 安装依赖
npm install

# 启动开发服务器
npm run dev

H5移动端默认运行在 http://localhost:8081

默认账号

管理后台

• 用户名：admin
• 密码：123456

H5移动端

• 手机号：1871502XXXX
• 密码：123456

界面预览

项目包含截图文件夹：

• 截图/管理后台/ - 管理后台界面截图
• 截图/小程序/ - H5移动端界面截图

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 微信小程序：将H5端改造为微信小程序
2. 消息推送：集成消息推送服务
3. 物业缴费：添加物业费、水电费缴纳功能
4. 停车管理：车位管理和停车缴费
5. 门禁系统：集成智能门禁
6. 快递代收：快递代收和通知
7. 社区团购：社区团购功能
8. 智能家居：智能家居设备控制

注意事项

1. 本项目为学习演示项目，部分数据为模拟数据
2. 生产环境部署需要配置HTTPS
3. Socket.IO聊天功能需要确保WebSocket连接正常
4. 建议定期备份数据库数据
5. 移动端适配基于375px设计稿

常见问题

Q: 数据库连接失败？

A: 检查MySQL服务是否启动，数据库配置是否正确

Q: 图片无法显示？

A: 检查后端服务是否启动，图片路径配置是否正确

Q: 聊天功能无法使用？

A: 检查Socket.IO连接是否正常，后端服务是否启动

Q: H5页面样式错乱？

A: 检查是否正确引入了flexible和px2rem配置

Q: 管理后台登录失败？

A: 确认数据库中有管理员账号数据

许可证

本项目仅供学习交流使用，请勿用于商业用途。