小区管理系统设计与实现.docx

1、小区管理系统设计与实现小区管理系统设计与实现4.1 小区管理系统总体设计本次设计以HTML作为骨架，构建应用的主体页面，后端使用Express框架来维护创建好的“REST”服务，来确保前后端数据的流通；不同的页面能够去完成不同的功能，项目绝大部分数据存储在MongoDB中。AngularJS是“MEAN”堆栈MongoDB数据库、Express.js服务器框架、AngularJS前端框架和Node.js服务器运行时环境的前端部分。用户打开主页，可以浏览到工作人员发布的社区新闻、临时通知等，获取到最新的消息；通过上方的导航栏跳转到“表单”页面，用户可以填写表单，提供详细的要求或者信息来告知物业方

2、自己有哪些事情需要解决处理；通过上方的导航栏跳转到“周边”页面，用户可以查看社区周围的娱乐、体育、医疗等设施这里使用重绘的地图能更为清晰地标出地点；通过上方的导航栏跳转到“联系我”页面，用户可以查看社区内部的一些机构、组织的位置和联系方式，快速满足需求。屏幕的左下方设计了一个按钮，点击可以回到顶部，滑动可以唤出另外的功能按钮来刷新页面。管理端可以使用额外的页面，来发布最新情况、社区活动等信息，也可以删除过时、失效的新闻；用户发来的表单信息，使用数据库的可视化工具操作，更为安全、方便，几乎没有上手难度。首先安装好本次设计所需的服务器运行时环境Node.js的长期支持版本，按照指导一步步安装。Mo

3、ngoDB数据库去官方网站下载即可，然后安装。要注意一点，需要提前在安装MongoDB的磁盘根目录下新建一个data文件夹，之后才能使用各种方式命令行或者GUI正常访问到MongoDB。本次设计使用的AngularJS版本号是1.6.9；AngularJS含有多个可以额外使用的模块文件，每个文件都可以独立使用，根据项目中的使用程度有选择地放进项目文件夹，没有使用到的就放在一边。Express框架需要在npm窗口下载、全局安装，Express需要下载额外的express-generator包来进行基础的操作。开发时使用Mongoose来连接到MongoDB并对其操作，使用nodemon包来解决实

4、时刷新预览的问题。本次设计选择Chrome浏览器作为产品的测试平台，使用的版本号为66.0.3359.181。Chrome浏览器可以实时模拟多个页面，以检测产品在各个终端上的效果。检测各部分版本号，这是排查问题、搜索答案时重要的依据，如图4-1所示。图4- 版本号检测4.2 后端数据接口设计项目的目录如图4-2所示。图4-2 目录结构数据的结构文件存放在models中，脚本、样式表、图片等资源放在public“公共”文件夹内；routes文件夹里是路由文件，views文件夹里的是视图文件将要展示在浏览器上的主要内容，package .json文件记录着项目的依赖项等一系列基本信息，app.js

5、文件是Express的“根基”，它设定了服务器的方法规则。在app.js中调用自带的方法把Mongoose连接到本地已经自动建立好的数据库，具体的代码如图4-3所示。图4-3 Mongoose连接数据库Mongoose提供一系列原生的方法来操作数据库中的数据，这里不再详细介绍。需要设计2个模板，1个用来规范管理方发布的信息，另1个用来规范用户提交的表单信息。虽然使用的数据是无模式的，不过使全部的数据拥有一个规范合理的结构会易于验证信息的真实性。模板设计了3个属性（内容），分别是新闻标题、新闻内容、具体时间；表单模板设计了7个属性（内容），分别是地点、是否解决、期待时间、联系方式、事件详情、事件

6、种类、提交时间。如图4-4，4-5所示。图4-4 新闻模板图4-5 表单模板通过在路由文件里面编写的代码，设计具体的页面路径，路径设置使用/news/:id来展示新闻信息，详细表单信息则对用户隐藏，本次设计如图4-6所示。图4-6 具体路由设置4.3 前端界面设计使用AngularJS的factory方法创建2个服务，分别对应后端2个数据接口，都使用封装好的、高级的$resource服务替代$http与其通信，如图4-7所示。图4-7 factory方法通过改写尾部的$routeProvider，可以调整将要渲染的页面，展示出不同的信息。为每个页面指定各自的控制器，来改变能够使用的功能。利用$

7、resource获取的数据暂时存储在临时创建的数组中，使用AngularJS内置的ng-repeat指令从该数组取出数据的内容，填充进HTML文档中，展示给用户，如图4-8所示。图4-8 分配控制器的设置“周边”页面使用重绘的地图来标示周边的娱乐、体育、医疗设施，相比于接入XX地图等地图，能够清晰地传达给浏览者更多有效的信息，如图4-9所示。图4-9 简单的地图“联系我”页面与周边页面设计的大同小异，地图更换为社区内部的结构图，指引用户去了解本社区内部的成员，下方会列出有效的联系方式，如图4-10所示。图4-10 示例地图首页展示了新闻列表，并且设计了一个输入框去检索过往的信息。页面顶部引用了

8、必应的每日图片，每天都有新的图片呈现给用户；后期也可以使用自建的图库，例如社区内部景观的摄影、社区居民生活中的摄影，如图4-11所示。图4-11 首页贴图管理方可以进入到控制页面，发布、修改新闻，这个地址只有管理员知道。填写完必要的信息后，点击发布按钮，即可把新闻、活动、通知等公布给用户；在列项页面，管理方可以删除已经发布的消息，如图4-12，4-13所示。图4-12 发布新闻页面图4-13 管理页面用户发来的表单信息使用数据库的可视化工具操作，容易上手，功能全面，更加安全。请求的事务由不同的“varis”的值来分类，“details”的值用来描述事务的详细信息。管理员收到请求后，安排相关人员

9、处理，接收到用户的确认完成信息后将请求归档为已完成“completed”的值改为“true”。这里以MongoDB Compass Community版为例，每一条信息的详细内容如图4-14所示，连接到数据库后的软件主页页面如图4-15所示。图4-14 详细表单信息图4-15 可视化软件管理页面4.4 智能手机接入小区管理系统测试首先启动MongoDB，然后进入项目文件夹让Node.js开始工作。打开Chrome浏览器，在地址栏输入默认的地址进入新闻的主页，为图4-11所示的画面。使用鼠标点击新闻标题，新闻的详细内容就会被浏览器“展示”出来，如图4-16所示。图4-16 新闻详细页面表单页面，

10、用户按照提示的内容认真填写表单，然后通过点击“提交”按钮将信息发送、添加到数据库，管理人员就可以看到用户的请求，然后安排相关的人员处理。表单提供了多个描述项，帮助用户表达出最关键的信息，一份填写中的表单如图4-17所示。图4-17 表单详细页面由于使用AngularJS编写这个应用，所以在移动端，用户也能够得到非常好的用户体验。通过滑动顶部，用户可以唤出没有默认显示的导航栏，如图4-18所示。页面会自适应调整自己的位置和大小，以在不同分辨率的终端上呈现出大小适中的图形和内容，分别如图4-19，4-20，4-21所示。图4-18 移动端导航栏图4-19 移动端首页图4-20 移动端新闻详情页面图4-21 移动端表单页面经过上述测试，智能手机接入小区管理系统的设计基本实现了所提出的要求，能够满足用户的基本需求，为用户带来良好的服务。