小区物业管理系统源码+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

相关推荐
山岚的运维笔记几秒前
mysql 专业笔记 -- 第 17 章:连接:连接三个具有相同名称 ID 的表
运维·数据库·笔记·后端·学习·mysql·dba
遨翔在知识的海洋里4 分钟前
nest(3)- filter和Interceptor
后端
挽安62117 分钟前
若依微服务 Nacos 2.x 控制台配置列表为空?一个 tenant_id 字段引发的血案
后端
周杰伦fans23 分钟前
ASP.NET Core Identity 从入门到实战:常见问题与解决方案
后端·asp.net
n8n43 分钟前
Spring AI 三层架构详解:ChatModel → ChatClient → Controller,同步调用 vs 流式调用(SSE)
后端
小傅哥1 小时前
Java + DDD,1:1 复刻 Deepseek Harness 项目
前端·后端·ai编程
Lambert2811 小时前
AgentScope Java 从零(03):Agent 的记性默认全开,我在第 50 轮翻了车
后端·aigc
积硅步致千里1 小时前
Word 里的 .wmf 其实是 EMF:一次 metafile 转 PNG 排障
前端·后端
mayaairi1 小时前
Vue2 组件通讯(二):ref、自定义事件与provide/inject实战
前端·javascript·vue.js
爱读源码的大都督1 小时前
DeepSeek面试官问:生产RAG系统回答不准确,该如何定位和优化?这样回答,能让面试官当场给你Offer!
java·后端·python