基于vuex的物业管理系统APP及网页后台设计

目录
一、绪论 3
（一）选题背景简介 3
（二）目的和意义 3
二技术简介 4
（一） HTML5技术简介 4
（二）ES6简介 4
（三）Vue-cli 3.0 4
（四）Koa2 4
（五）Vuex 5
（六）iView 5
（七）MySQL 5
（八）Navicat 5
（九）VScode 5
三、系统概要设计 6
（一）系统需求分析 6
（二）可行性分析 7
1.技术可行性 7
2.经济可行性 7
3.操作可行性 8
（五）网站模型 8
（六）Server端模型 9
四、数据库设计 10
（一）数据概念结构设计 10
（二）数据库关系设计 10
（三）数据字典 11
五、前端部分 15
（一）管理端部分 15

登录部分 15
管理员个人信息 16
房间管理 17
业主管理 18
家庭成员管理 19
报修管理 19
零件类型管理 21
零件管理 22
管理员管理 23
404 24
（二）客户端部分 24
登录 25
注册 28
房屋信息 29
报修信息 30
家庭成员信息 32
个人信息 34
六、后台部分 35
（一）路由 35
（二）数据库操作 35
（三）跨域 36
（四）图片处理 36
结论 36
参考文献 38
致谢 39

三、系统概要设计
系统的设计主要前台和后台两个部分
前台客户端是展现给用户的，包括登录注册、查看个人房间信息、查看家庭报修信息、报修故障、撤销报修、在线缴费、查看家庭成员、审核家庭成员、删除家庭成员、查看与编辑个人信息。
后台管理端是物业管理人员使用的，包括管理员登入与登出、修改个人信息、查看与筛选房间信息、新增业主、
（一）系统需求分析
物业管理端
17. 登录/登出
18. 房间管理
(1) 为房间添加业主信息
(2) 条件筛选房间
19. 业主管理
（1）编辑/删除业主信息
（2）编辑/删除家庭成员信息
20. 报修管理
（1）查看报修列表
（2）报修状态筛选
（3）查看具体报修内容
（4）更改报修进度：已联系、已派修、已维修（更改为已维修时录入维修费用）、已缴费
21. 零件管理
(1) 对零件增删改查，出库
(2) 对零件类型增删改查

管理员管理
(1) 新增/查看管理员

业主端
23. 登录/登出（判断是否为业主，若为业主添加审核家庭成员权限）
24. 注册（注册成功后须业主审核后才可登录）
25. 修改个人信息
26. 业主查看家庭报修列表
27. 普通用户查看个人报修列表
28. 支付维修费用
1.技术可行性
技术上的可行性分析主要分析技术条件能否顺利完成开发工作，硬、软件能否满足开发者的需要等。
本系统前端设计主要由Vue.js实现，vue 的开发体验是非常令人感到愉悦的。Vue在数据交互，组件化开发方面有非常大的优势，每个组件都是一个.vue文件，可以把页面拆成很多组件，方便开发与维护，使用时只需引入组件即可，通过vue-router实现路由跳转，可以很容易地创建单页面应用程序，本文转载自http://www.biyezuopin.vip/onews.asp?id=13581只需要把vue-router添加到vue工程中，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。
本系统数据库使用的MySQL，MySQL是最流行的关系型数据库管理系统，在WEB应用方面MySQL是最好的关系型数据库，轻量、开源、简便易用，使用Navicat Premium 12做数据库图形化管理更高效率进行前后端开发。

<template><div><router-view style="padding-bottom: 100px;" /><div id="nav"><van-tabbar v-model="active"><van-tabbar-item v-for="(item, index) in tabs" :key="index" :icon="item.icon" :to="{name: item.name}">{{item.label}}</van-tabbar-item></van-tabbar></div></div>
</template><script>import {Component,Prop,Vue,Watch} from 'vue-property-decorator';@Componentexport default class Main extends Vue {active = 0;tabs = [{label: '房屋',icon: 'home',name: 'room'}, {label: '报修列表',icon: 'setting',name: 'repair'}, {label: '家庭成员',icon: 'pending-orders',name: 'homeUser'}, {label: '个人信息',icon: 'contact',name: 'me'}];created() {};@Watch('$route', { immediate: true, deep: true })watchRoute(newVal, oldVal) {this.active = this.tabs.indexOf(this.tabs.find(item => {return item.name == this.$route.name}))}}
</script><style lang="scss">#nav {width: 100%;position: fixed;bottom: 0;background-color: #fff;.tab-name {padding-top: 3px;font-size: 1em;}.tab-icon {font-size: 1.3em;}}
</style>

基于vuex的物业管理系统APP及网页后台设计相关推荐

基于JavaScript的物业管理系统APP设计
目录 1绪论 5 1.1选题背景简介 5 1.2目的和意义 5 2 技术简介 6 2.1 ASP.NET技术简介 6 2.2 SQL Serer 简介 7 2.3 C#语言简介 9 2.4 Visu ...
物业管理系统app开发的解决方案
业户对新建住宅小区的期待包括对专业.靠谱的物业管理的期待.业主对传统物业繁琐的工作流程感到疲倦,物业管理系统app开发可以提升物业管理效率.接下来,一起了解一下物业管理系统app开发的解决方案吧. 系 ...
毕业设计-基于SpringBoot小区物业管理系统
环境:开发工具:idea,数据库:MySQL5.7 jdk1.8 架构:SpringBoot,前端HTML 主要功能用户: 添加新投诉添加新维修查看个人账单修改密码查看我的投诉查看我的维修 ...
大学生课程设计-基于SSM的物业管理系统-智能小区物业系统代码java-社区物业水电缴费系统代码jsp
大学生课程设计-基于SSM的物业管理系统-智能小区物业系统代码java-社区物业水电缴费系统代码jsp 注意:该项目只展示部分功能,如需了解,评论区咨询即可. 1.开发环境开发语言:Java 后台: ...
基于SSM的物业管理系统
1.项目介绍基于SSM的物业管理系统拥有两种角色管理员:用户管理.用户缴费.车位管理.车位分配.新闻管理.公告管理.投诉处理等业主:个人车位.投诉.缴费.查看新闻公告等 2.项目技术后端框架: ...
基于java小区物业管理系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
基于java小区物业管理系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署基于java小区物业管理系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署本源码技术栈: ...
java计算机毕业设计基于springboot小区物业管理系统
项目介绍随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势:对于小区物业管理系统当然也不能排除在外,随着网络技术的不断成熟,带动了小区物业管理系统,它彻底改变了过 ...
Springboot居民小区物业管理系统4bq5w计算机毕业设计-课程设计-期末作业-毕设程序代做
Springboot居民小区物业管理系统4bq5w计算机毕业设计-课程设计-期末作业-毕设程序代做 [免费赠送源码]Springboot居民小区物业管理系统4bq5w计算机毕业设计-课程设计-期末作业 ...
基于Web小区物业管理系统/物业管理系统的设计与实现
目录第一章绪论 1.1 研究背景 1.2 主要研究内容第二章相关技术 2.1 MySQL技术介绍 2.2 eclipse编译器介绍 2.3 Spring框架介绍 2.4 MyBatis ...

基于vuex的物业管理系统APP及网页后台设计

基于vuex的物业管理系统APP及网页后台设计相关推荐

最新文章

热门文章