基于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

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

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

22. 管理员管理
    (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做数据库图形化管理更高效率进行前后端开发。