小区物业管理系统+SpringBoot + Vue (前后端分离)

大家好，今天给大家带来一个超级简单的 小区物业管理系统。大家可用学习下系统的设计和源码风格。

视频演示

图片演示

技术栈

后端

技术框架：JDK8+SpringBoot + Mybatis-Plus

数据库：Mysql8

前端

- Vue.js 2.6.12 - 主要的前端框架 - Vue Router 3.4.8 - 单页面应用路由管理 - Vuex 3.5.1 - 状态管理 - Vue CLI 4.5.8 - 项目脚手架和构建工具

UI组件库

- Ant Design Vue 1.7.2 - 主要的UI组件库，提供丰富的企业级组件 - Element UI 2.14.0 - 辅助UI组件库，补充部分组件功能

HTTP请求处理

- Axios 0.21.0 - HTTP客户端，用于API请求 - Day.js 1.9.4 - 轻量级日期处理库 - Vue Cookies 1.7.4 - Cookie管理

系统功能概述

整个系统分为 “物业角色” ， “业务角色”。物业相当于管理员，可以对业主进行管理， 还可以对小区的信息进行管理，小区内的楼盘，房间号，物业的费用，周边设施，公告等进行管理。业主可以发起投诉，报修等，还可以缴纳物业费。

物业登录： admin / 123456

业主登录： gg / 123456

物业端

小区管理

基本信息管理： 可以对小区的名称 ，负责人，楼栋数量，建筑面积，简介等属性进行管理。

周边设施管理： 可以新增小区的周边设施，比如：学校，医院，银行，美食等。同一个设施类型的设施会归为同一类。

物业公告管理： 类似与文章，采用富文本编辑器，文章在物业的前端首页展示。

楼盘管理

楼宇管理： 可以新增楼栋，楼栋有名称，层数，高度，面积等属性。

房间管理： 每个楼栋都有很多房间，可以对每个房间进行管理。

小区保障管理

保修管理： 可以收到业主发起的保修单，对单据进行审核。

投诉管理： 可以收到业主发起的投诉单，对单据进行审核。

收费管理

收费类似管理： 可以新增收费类型，费用会每月显示到业主端，业主了可以进行缴纳。

用户管理

物业人员管理： 可以新增物业人员。

住户信息管理：可以对业主进行管理。

业主端

首页

业主可以在首页看到楼盘基本信息，物业公告，小区周边设施，物业人员等。

基本信息

个人信息： 可以修改业主的手机号，姓名。

报修管理

申请报修： 业主可以发起报修，填好报修内容，联系方式，楼栋房间等信息。然后物业就可以收到报修单。

报修管理： 查看自己申请的报修单，物业审核后，可以看到审核的备注。

投诉管理

发起投诉： 业主可以发起投诉，填好投诉内容，联系方式，楼栋房间等信息。然后物业就可以收到投诉单。

投诉管理： 查看自己申请的投诉单，物业审核后，可以看到审核的备注。

登录/注册

系统部署

执行sql 用户需要自己安装好mysql数据库，注意，必须是mysql8 ，否则代码运行会出错。 然后用navicate等连接工具，连接到mysql服务，然后新建一个hadluo-wuye 数据库， 然后执行 “hadluo-wuye.sql” 里面的表创建和数据导入。 前端部署

vue项目部署

前端的项目必须没有中文，否则启动会报错！！ 安装node ， 版本：v22.12.0 ， 安装完成后。 进入到项目 hadluo-vue 目录下，这个项目是vue端， 右键，运行cmd，运行下面命令：

npm config set registry http://mirrors.cloud.tencent.com/npm/
npm install -g yarn
yarn config set "strict-ssl" false -g
set NODE_OPTIONS=--openssl-legacy-provider
yarn install
npm run serve

成功图例：

启动后端项目 将maven设置的settings.xml改成你自己的配置。

然后刷新maven，等待项目下载依赖包完成。。。。。 然后部署后端 ， 打开idea， 导入maven工程 hadluo-server。 打开resources目录， 修改 application.properties 配置文件，主要修改下面几个信息： 数据库信息（注意改成你的地址）

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.name=defaultDataSource
spring.datasource.url=jdbc:mysql://192.168.200.131:3306/hadluo-wuye?serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=qq123456

然后启动 main 启动类 ：EmServerApplication.class 前端访问 http://localhost:8080 物业登录： admin / 123456 业主登录： gg / 123456