摘要: 伴随着Web2.0的普及，大多数的网站都有着丰富的交互能力。选择家庭网站设计作为毕业设计的课题，而不是传统的管理系统，一方面如今业界对于CMS（内容管理系统）已经有了非常完善和成熟的解决方案，在这些基础上进行扩充拓展功能则是轻而易举的，另一方面我对于web前端的了解更深入一些，同时也更为感兴趣，因此想利用这样的机会完整地进行一次Web应用的开发。

  这次网站的制作着重点在于从脚手架的搭建到整个项目的构建过程，把我在各个网站中，Github源码中学习到的小技巧以及企业化开发的思想运用在了项目中，也从前端到后端详细介绍了网站的整体架构以及管理各个模块的方法，对于所有应用到的框架以及新的技术选型的认识和看法我也都有详细阐述，通过这次实践，我深入学习到了真正前后端分离的开发流程，以及一些前端开发中模块化，组件化的思想。我认为这是将来Web开发的一个大趋势，每一位程序员都必须了解的。

关键词：网站设计;前后分离;组件化;模块化

目录

摘要

Abstract

1.网站整体架构介绍1

1.1前端基于Webpack架构方案-1

1.2后端SpringBoot+MyBatis整合框架描述-4

1.3关系型数据库与NoSQL型数据库结合的介绍-9

2.设计实践详细介绍15

2.1 家庭网站需求分析和总体设计15

2.2 网站详细设计-16

 2.2.1 左侧导航栏以及ElementUI组件库-16

 2.2.2 通讯录功能MockServer模拟数据-17

 2.2.3 时间轴页面以及留言板功能介绍-20

 2.2.4 JQuery插件构造家族树的方案-22

 2.2.5 家庭影音HTML5播放器的实现原理23

 2.2.6 基于BufferedImage实现的照片集管理功能24

 2.2.7 基于nodejs实现家庭日志功能的介绍25

 2.2.8 基于百度地图API实现周边地图的查找,公交步行路线推荐-29

 2.2.9 家庭计划表实现-30

 2.2.10 家庭网介绍页面-31

3. 项目的管理33

3.1 使用Maven管理后端Java依赖包-33

3.2 使用npm管理前端node模块-33

3.3 使用Git管理整个项目版本-33

3.4 使用swagger管理接口文档-35

4 总结和展望-37

5 参考文献38

6 致谢39