目录
一、绪论 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';
@Component
export 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>
