基于vue2+element+springboot+mybatis+jpa+mysql的小区物业管理系统
目录
一、开发背景
二、用到的技术
三、开发使用的IDE
四、搭建开发环境
五、启动项目
六、物业管理系统使用说明
七、结语
八、整套项目源码下载
一、开发背景
本系统作为vue2初学者的入门系统,通过开发经典的《物业管理系统》模拟项目,使vue2的初学者快速掌握从无到有的搭建一套vue2前端+spring boot后端+mysql数据库的前后端分离的现代主流项目架构。另外,此系统还可作为计算机系大学生毕业设计参考项目,使广大学子轻松搭建属于自己的毕业设计项目。
二、用到的技术
前端:vue2、element、nodejs、nvm(node管理工具)、echarts
后端:spring boot、jpa、mybatis
数据库:mysql5.7.38
三、开发使用的IDE
前端:webstorm(版本号2020.3)如果没有webstorm,推荐使用vscode
后端:idea(版本号2020.3)如果没有idea,推荐使用eclipse
四、搭建开发环境
前端:
第一步:安装nvm
nvm是node管理工具,可以同时管理多个版本的node,在需要的时候,切换不同版本。
将下载的资源包解压,进入其中的nvm文件夹,如下图:
双击nvm-setup.exe进行安装。
注意:一定要将nvm安装到c盘根目录,否则会出现意想不到的问题
安装完成后在命令行输入nvm,可以看到一些关于nvm的使用说明
第二步:安装nodejs
nvm本身提供安装node的命令,在命令行输入nvm install 16.14.0就可以安装版本号为16.14.0的node,安装完成后运行命令nvm use 16.14.0,然后在命令行输入node -v,查看当前使用的node版本。到这里node就已经安装成功,但使用nvm安装node并不是每次都能成功,如果安装node失败,可以到下面的地址手动下载node,也可以使用资源包中提供的node。
Nodejs下载地址:Previous Releases | Node.js
Nodejs要求版本:大于14.0.0,小于18.0.0,笔者使用的是16.14.0,下面以16.14.0为例,一定要选择zip或7z文件,如下图:
下载之后将其解压,然后手动将node拷贝到nvm根目录下,并将文件夹命名为v16.14.0,如下图:
之后在命令行运行nvm use 16.14.0,效果是一样的。如果自己懒得下载,可以使用资源包中提供的node,如下图:
将node-v16.14.0-win-x64文件夹整体复制到nvm根目录下,改名为v16.14.0,效果也是一样的。
后端:
第一步:安装jdk
自行下载jdk或使用资源包中提供的jdk,下载地址:Java Downloads | Oracle,然后配置java环境变量,具体步骤自行百度。
第二步:安装mysql
使用资源包提供的mysql安装程序进行安装。具体的安装步骤自行百度一下,这里就不多介绍。
五、启动项目
前端:
第一步:将下载下来的项目解压缩,目录结构如下图,eastatemanagerclient是前端vue项目,eastatemanagerserver是后端springboot项目。
第二步:用webstorm或vscode打开eastatemanagerclient,项目目录结构如下
第三步:安装yarn
在命令行运行:npm install -g yarn
第四步:安装node依赖包
在eastatemanagerclient根目录下运行:yarn install,安装完毕后项目根目录下出现node_modules文件夹,如下图:
第五步:启动项目
在eastatemanagerclient根目录下运行:vue-cli-service serve,稍等片刻后,项目启动成功,出现如下信息:
第六步:运行项目
在浏览器输入http://localhost:8080/,出现登陆界面,如下图:
至此,前端项目运行成功。但此时前端并没有与后端连接,所以要进入系统,还要启动后端springboot项目。
后端:
第一步:打开项目
在idea或eclipse中打开资源包中的eastatemanagerserver项目,打开后项目结构如下图所示,这时系统会自动下载maven依赖包,稍等片刻即可:
第二步:修改数据库连接
找到src\main\resources\application.properties文件,并修改其中的spring.datasource.url键值,将其改为自己的数据库连接,如下图所示:
第三步:启动项目
找到src\main\java\com\dormitory\manager\ManagerApplication.java,右键选择Run ‘ManagerApplication’启动项目,这时系统会自动创建数据库表,一共5张表,分别是building(楼宇表)、unit(单元表)、charges(收费表)、complain(投诉表)、room(房间表)、users(用户表)
此时项目启动成功,但依然无法进入系统,我们还要在用户表中初始化一条用户记录
第四步:初始化用户
找到src\main\resources\static\init.sql文件,并依次执行“修改表字符集”的6条语句和“初始化管理员用户”的一条语句,如下图,如果不执行修改表字符集的6条语句,直接插入用户的时候会报编码错误。初始化的管理员密码是加密后的111111
至此,后端项目启动完成
六、物业管理系统使用说明
(一)登陆系统
经过了前后的项目的配置与启动,此时终于可以进入系统了,在登陆页面输入用户名:sysadmin,密码:111111,进入系统,出现以下欢迎页面
(二)用户管理
选择“系统管理”菜单,进入如下界面,此时只有管理员一个用户
我们可以新增用户,也可以批量导入用户,如果要新增用户,点击右上角的“新增用户”按钮,弹出新增用户对话框。
输入登录名等信息,用户角色可以选管理员或楼管,点确定之后新增用户成功。如果要导入用户,点击右上角的“导入用户”按钮,选择项目中提供的用户模板,找到src\main\resources\static\用户模板.xlsx选择即可导入模板中预置的用户,如果要加入自己的用户,可以将模板下载下来,点击右上角的“下载导入模板”按钮下载用户模板。导入之后的界面如下:
可以删除和编辑用户,可以修改用户的状态,直接点击状态,可以在“有效”和“无效”中切换。被设置为无效的用户,便无法登陆系统,并且在其他模块的各项操作中都会被过滤掉。
(三)楼宇管理
一套物业体系很可能有多个楼宇,所以在正式使用系统前,还需要把楼宇添加进来,选择“系统管理”菜单中的“楼宇管理”,出现如下界面:
此时笔者已经添加了三个楼宇,如果要手动添加,可以选择“新增楼宇”按钮,界面如下
(四)单元管理
一栋楼可能有多个单元门,添加完楼宇后,就可以添加单元了,选择“系统管理”菜单下的“单元管理”子菜单,进入如下界面
此时笔者系统已经有一些单元数据,点击“新增单元”按钮后,弹出如下对话框
(五)房间管理
选择“系统管理”菜单下的“房间管理”子菜单,进入如下界面
此时笔者已经添加了一些房间,可以手动新增也可以批量导入,选择“导入房间”按钮后,选择项目中提供的房间模板,找到src\main\resources\static\房间模板.xlsx选择即可导入模板中预置的房间,如果要加入自己的房间,可以将模板下载下来,点击右上角的“下载导入模板”按钮下载房间模板。
(六)收费管理
选择“物业管理”菜单下的“收费管理”子菜单,进入如下界面
此时笔者已经添加了几条记录,我们可以新增一条缴费记录,点击右上方的“新增缴费”按钮,弹出以下对画框
(七)投诉管理
居住的业主难免会有投诉现象,系统对业主投诉也可以进行管理记录,选择“物业管理”菜单下的“投诉管理”子菜单,进入如下界面:
此时笔者已经添加了一些投诉数据,如果继续添加,点击“新增投诉”按钮弹出如下对话框:
将信息填写完整后点击“确定”,就可以新增一条投诉。
(八)智能分析
进入“智能分析“菜单,可以看到系统提供了一些不同类型的数据分析,包括缴费分析、投诉分析、业主分析,界面如下
这个模块所用的技术为echarts,其中的图表数据是静态的,咱们如果有兴趣可以自行开发后台数据接口实现动态数据效果。
(八)个人中心
管理员在创建操作员账号之后,操作员可以自行登录系统修改密码和联系方式,初始密码为111111,登陆后的界面如下
对于操作员角色的用户,系统只提供了“物业管理”和“个人中心“菜单,选择”个人中心“,界面如下:
此时可以进行修改密码等操作。
七、结语
本套系统是面向vue2初学者和一些大学生用户的学习参考使用的一个小课件,并非真正的物业管理系统,不能用于实际的物业管理,真正的物业管理系统所需功能要比这个小课件多得多,如果大家有兴趣,可以在此基础上开发真正的物业管理系统。
另外,此系统作为学习参考使用,其中难免有一些bug和业务逻辑问题,请大家不必过于纠结,能忽略则忽略,如有必要可以自行修改。
八、整套项目源码下载
基于vue2+element+springboot+mybatis+jpa+mysql的小区物业管理系统源码毕业设计-管理软件文档类资源-CSDN下载本系统作为vue2初学者的入门系统,通过开发经典的《小区物业管理系统》模拟项目,使vue2的初学者快更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/leonMary/86035809
基于vue2+element+springboot+mybatis+jpa+mysql的小区物业管理系统相关推荐
- 基于vue2+element+springboot+mybatis+jpa+mysql的学籍管理系统
目录 整套系统源码下载 一.开发背景 二.用到的技术 三.开发使用的IDE 四.搭建开发环境 五.启动项目 六.学籍管理系统使用说明 七.结语 八.源码下载 基于vue2+element+spring ...
- 基于vue2+element+springboot+mybatis+jpa+mysql的幼儿园幼儿信息管理系统
目录 整套系统源码下载 一.开发背景 二.用到的技术 三.开发使用的IDE 四.搭建开发环境 五.启动项目 六.幼儿园幼儿信息管理系统使用说明 七.结语 八.整套系统源码下载 整套系统源码下载 基于v ...
- 基于JAVA+SpringBoot+Mybatis+Vue+MYSQL的小区物业管理系统
本项目使用前后端分离架构,因此分为两个部分. server 以Springboot为基础的后端项目 ui 以Vue.js为基础的前端项目 其中后端项目中的主要技术选型如下: SpringBoot 项目 ...
- 基于vue2+element+springboot+mysql+jpa+mybatis的图书管理系统
目录 整套系统源码下载 1.图书管理系统pc端 2.图书借阅系统app端源码 一.开发背景 二.用到的技术 三.开发使用的IDE 四.搭建开发环境 五.启动项目 六.图书管理系统使用说明 七.结语 八 ...
- python基于PHP+MySQL的小区物业管理系统
随着我国房产事业的发展.越来越多的居民以小区的方式进行居住.相对应的小区物业管理也需要跟上时代的步伐.传统的小区物业管理模式以及不能够满足人们的需求,传统模式的小区管理都是通过人工的方式在进行管理,这 ...
- 基于java+springboot+mybatis+vue+mysql的校园医疗保险管理系统
项目介绍 本系统采用java语言开发,后端采用springboot框架,前端采用vue技术,数据库采用mysql进行数据存储. 前端页面: 功能:首页.保险信息.公告信息. 留言反馈.个人中心.后台管 ...
- 基于JAVA+SpringBoot+Mybatis+MYSQL的小区物业管理系统
项目功能: *系统登录 *控制台 *房屋管理 *车位管理 *缴费管理 *社区服务 *用户管理 *个人中心 页面效果:
- 基于JAVA+SpringBoot+Mybatis+Vue+MYSQL的智慧养老管理系统
功能模块 本系统共分为两个角色:家长,养老院和管理员,家属功能:个人信息管理.查看公告.查看自己老人实时信息.留言板. 管理员功能:家属管理.公告管理.留言管理.老人健康管理.基础管理. 页面效果
- 基于javaweb的平行志愿管理系统(java+springboot+mybatis+vue+mysql)
基于javaweb的平行志愿管理系统(java+springboot+mybatis+vue+mysql) 运行环境 Java≥8.MySQL≥5.7.Node.js≥10 开发工具 后端:eclip ...
最新文章
- 2021年大数据Spark(三十七):SparkStreaming实战案例二 UpdateStateByKey
- D - 小晴天老师系列——晴天的后花园
- python制作英语字典_如何在Python中创建字典词典
- silverlight中数据绑定讲解
- golang mysql 防注入_Go,Gorm 和 Mysql 是如何防止 SQL 注入的
- C++ 语法都不会怎么写代码? 03
- threejs相机和渲染器
- ithoughts怎么自定义样式_微信小程序自定义导航栏组件封装
- 逆幂律模型_【微微出品】加速模型一起聊聊Peck、Lawson、MILHDBK217
- [Android] 环境优化配置Android Studio发展NDK
- Jenkins系列三通过脚本方式部署maven项目,maven聚合项目到Tomcat
- 快速开发jQuery插件的10大技巧(转)
- 机器学习一【决策树】
- ORA-00600: internal error code, arguments: [2037]
- linux每个进程有4g,32位Linux单进程有4G内存限制
- Android9 更改系统默认输入法
- 为何入参要在前,出参要在后
- 【MySQL】根据数据表中日期字段查询某个月每一天的数据量?查询数据表中所有日期每天的数据量?近三天每天数据量?
- MySQL查询7天内过生日的用户 查询生日是今天的用户 解决跨年问题
- 平均11岁的黑客你怕不怕?“孩子从小就该感受编程的乐趣!!”
热门文章
- PS怎样把做圆角图片?
- CSS——在HTML中引入CSS的四种方式
- tab html中怎么写,5种html tab写法
- 计算机知识树图片大全,计算机基础教案-----知识树.doc
- 文件上传下载注意事项
- http缓存(浏览器缓存)——强缓存、协商缓存
- 解决Arcgis10.2.2中dbf文件用EXCEL打开乱码问题
- wireshark提取流量包中的文件_返璞归真——流量中提取文件的五种方法
- DIY旧电脑-解决旧电脑硬盘无法显示
- 【CSS】课程网站 网格商品展示 模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 )