基于AngularJS和Bootstrap的社区物业管理系统的设计与研究

发布时间：2020-10-08 17:36

　　随着互联网技术的快速发展,信息化及数字化已逐步融入到各行各业,对行业服务效率的提高起到了积极作用。与此同时,人们的生活水平也在不断地提高和改善,对与自身息息相关的居住环境有了更高的要求。但是传统物业管理模式比较单一,信息化水平不高,业务流程繁琐,服务效率低下。社区物业管理效率与社区业主的都市快节奏生活不相匹配。这些情况导致物业公司既无法满足业主的诉求,也不利于其长远发展。为了解决传统物业管理模式的弊端,本文决定利用互联网的高效、便捷、快速等特点,研究开发一款社区物业管理系统,用来提高物业的管理水平和服务质量,减少物业公司的运营管理成本,实现社区物业管理公司的可持续发展。本系统面向社区物业管理人员和社区业主进行开发。根据不同用户的使用特点,为社区物业管理人员提供基于网页的客户端,为社区业主提供基于移动设备的客户端。本文主要工作如下:(1)根据社区业主和物业管理人员的需求,设计并实现了社区物业管理系统。该系统为用户提供投诉建议、物业通知、报修、广告宣传等功能。通过该系统社区业主和物业管理人员可以通过语音、文字、图片三种方式进行便捷沟通。(2)系统实现过程中,后端使用成熟的SSM(Spring+Spring MVC+My Batis)框架,Web前端使用目前流行的Angular JS+Bootstrap框架。这样的设计实现了前后端分离,缩短了整体开发周期,提高了系统的可维护性和可扩展性。另外,响应式Web设计,兼容手机、平板、PC等多种设备,方便物业管理人员根据业务需要自由选择。(3)基于物业管理系统,分析了影响Web前端性能的因素,先从页面元素、HTTP请求、DNS查询和压缩四个方面进行了性能优化。然后针对浏览器的多连接并发限制引起的阻塞问题设计并实现了一种优化的综合调度算法。最后针对网页端主页设计实现了一种可兼容不同浏览器的预加载方法。这些优化方法解决了网页响应速度慢、假死、占用资源多、用户体验差等问题。
【学位单位】：杭州电子科技大学
【学位级别】：硕士
【学位年份】：2017
【中图分类】：TP311.52
【部分图文】：

趋势图,数据交换格式,冗余,标签

杭州电子科技大学硕士学位论文2.4 轻量级数据交换格式 JSON目前，JSON和XML是在Web开发领域中较流行的两种数据交换格式。XML允许用户自定义标签，具有跨平台、格式统一等优点[18]。但其自身文件较大，格式复杂，编码时需使用大量冗余标签来对内容进行描述，传输时会占用较多带宽使得传输效率受到影响。此外 XML 不管使用 SAX 还是 DOM 解析方式，都会占用较多资源和时间。另外会使客户端和服务端代码变得复杂难以维护，这就不可避免的会造成开发效率低下，YouTube、Twitter 等应用已经开始抛弃 XML。而 JSON 作为一种轻量级数据交换格式[19]，数据格式简单清晰且冗余少，传送同样数据信息时，JSON 所需字节数更少，能够有效提高软件系统的响应速度。另外，JSON 易于前后端解析，同 XML 相比，具有更好的灵活性和简单性，如图2.3 为 Google 统计的趋势图，可以看出越来越多的应用使用 JSON。基于此本文选用 JSON 作为物业管理系统的数据交换格式。

架构图,架构,业主,物业管理系统

图 3.1 系统总架构图3.2 系统总体功能设计通过需求分析，可知社区物业管理系统主要是为业主和物业这两个用户群体服务。由于业主和物业需求不同，因此将社区物业管理系统分为业主和物业管理两部分，虽然这两部分是相互独立的，但两者在访问数据方面是紧密相关的。如图 3.2 所示为物业管理人员功能结构图。从图中可以看出，社区物业这一部分的功能主要包括设备信息管理、投诉信息管理、业主信息管理等七个功能。其中可以对常用电话、业主信息、设备信息、小区广告进行增、删、改、查的操作，因为投诉信息和报修信息都是由业主填写，因此物业管理人员不能执行添加操作。

网页,图片,页面,加载时间

杭州电子科技大学硕士学位论文放连接等步骤[36]，这一过程需要耗费很多时间。HTTP 无状态的特点意味着，如果重新请求资源，必须发起一次新的请求，因此减少 HTTP 的请求数可有效减少用户等待时间。将网页中需要用到的小图片通过使用 CSS Sprites 整合到一张图片中[37]，使用 CSS 中的 background-position 属性来定位需要使用的小图片，这样做可以显著的减少 HTTP 的请求数量。此外，将页面中的样式表和脚本文件各自进行一些合并，也能在一定程度上减少页面中 HTTP 的请求数。从图 3.5 可以看出，没有对零星小图片进行整合前，物业管理系统主界面的请求数达到了 43个，其中对于零星小图片的请求就有 9 个，总加载时间达到了 8s 以上，这对用户来说是非常槽糕的体验。图 3.6 为对一些 css、js 和小图片进行整合后的结果页面，可以看出加载时间减少了 22%。HTTP 请求数量优化前后数据对比如表 3.9所示，可看出通过 HTTP 请求优化后，HTTP 请求数减少了 32.5%，页面全部加载时间降低了 22.1%。

【参考文献】