毕业设计（论文）-基于AngularJs的自媒体富应用.doc

基于AngularJS的自媒体富应用摘 要随着web2.0应用的快速发展，可以让人看到万维网目前正在进行的一种改变从一个传统的展示型网站到一个成熟的为最终用户提供网络应用的服务平台。本文首先介绍了前端工程化的研究背景，随后着重探讨了Hybrid App的开发所需要的技术理论支持，对MVC架构设计模式做了详细的讲解。本系统以AngularJS为前端基础框架，NodeJS作为服务端，配合非关系型数据MongoDB，搭建了一个数据、功能丰富，交互响应快速，用户体验极佳的Hybrid App系统，验证了方案的可行性和高效性。关键词 ：MVC模式，AngularJS，NodeJS，非关系型数据库，MongoDB全套设计加扣 3012250582IIABSTRACTWith the rapid development of web2.0 applications, people can see the changing which is currently undergoing of the World Wide Web - from a traditional display based website to offer a sophisticated network application service platform for end users. This paper introduces the front-end engineering background at first, then focused on the technical development of the theory of Hybrid App support needed, for MVC architecture design pattern to do a detailed explanation. This system is the basis for a front end framework called AngularJS, NodeJS as a server, with the non-relational database MongoDB, data to build a feature-rich, interactive fast response, excellent user experience of Hybrid App system to verify the feasibility and efficiency.Key Words ：MVC, AngularJs, NodeJs, Nosql, MongoDB III目 录1. 绪论11.1Web富应用背景研究11.2前端工程化12.系统相关理论与技术62.1 MVC模式概述62.2 AngularJs原理和特性72.3 移动UI框架Ionic92.4 服务端的JavascriptNodeJs112.5 非关系型数据库NoSQL112.6 MongoDB133.系统分析153.1 系统目标要求153.2 功能要求153.3 性能要求163.4 数据需求173.5 设计原则173.6 系统结构183.7 数据设计204.开发环境搭建224.1 NodeJS安装224.2 模块管理NPM234.3 MongoDB安装使用245.系统实现265.1 主要页面设计265.2 日志模块265.3 通讯录模块326.结束语366.1 论文工作总结36参考文献37附录38致谢50V1. 绪论1.1 Web富应用背景研究Javascript作为web前端交互技术唯一的脚本语言，得到广泛的使用和支持，它有机的结合了HTML、XML和Java applet、flash等具有强大功能的web对象，以及后来Ajax异步应用的出现，使得web呈现出更加丰富精彩的内容。然而在上世纪90年代中期，Javascript这门语言诞生之前，大部分的Internet用户要忍受着28.8kbit/s的网络，为了让表单数据合理有效不得不与服务端进行多次的数据交互。我们可以想象当时的场景，用户枯燥的填完一张表单，在经过漫长的几十秒等待，最后服务器返回的不是“提交成功”的喜悦却是“某某字段的长度必须大于x个字符，且不能含有特殊字符”的错误提示！为了解决这一问题，1995 年Netscape 公司和Sun 公司联合开发出JavaScript 脚本语言，并在其Netscape Navigator 2 中实现了JavaScript 脚本规范的第一个版本即JavaScript 1.0 版，不久就显示了其强大的生机和发展潜力。到现在已经过去了21年，目前的javascript应用的开发已经超越了我们过去的想象，也很少有人能记起从javascript诞生之初的Netscape浏览器到如今各色竞相争艳的浏览器如chrome、Firfox、Safari和Opera等是经历了如何的变化，路途艰辛坎坷但成长飞速，如今得益于高性能的V8解析引擎，Javascript已经无孔不入了。对于Javascript的发明者来说，Javascript的今天是他不可能想象的梦。Javascript的成功和流行也推动了web应用的发展，催生了Web2.0这个概念，也让大家渐渐地了解到目前全球资讯为我们生活带来的一种改变从一系列简单展示型网站到一个最终为客户提供网络应用的服务平台 。Web2.0的忠实支持者期望Web2.0服务应用能在很多用途上取代桌面应用。Web2.0并不是一个技术标准，不过它包含了技术架构及应用软体，它的特点是鼓励资讯的后端使用者透过分享，取得更丰盛的资源；相反的，过去的各种网站分享方式则显得支离破碎。Web2.0由OReilly媒体公司创办人暨执行长Tim OReilly所提出，是由一系列网路新技术发展而来，这些技术包括Blog、RSS、WIKI、TAG、SNS等，它使网络由过去的集中化转向分散化，使用者可在网上获得更多的传播、分析、交流的自由。1.2 前端工程化Web2.0概念进入到公众的视野，引起了一股追捧Javascript应用的浪潮，很多人开始为web应用的交互而痴迷，这也为用户带来了前所未有的应用体验，这种趋势迅速的蔓延至整个互联网。Web2.0带来的前端应用的多元化和复杂化，使得前端技术也在爆发式成长，整个技术形态已经跟几年前纯做页面的时代完全迥异了。主要观念的变化总结来看在于一点，现在的前端开发面向的是web app而不是web page。这十多年的发展历经了三个阶段：1、刚开始人们为了补全各种API而忙碌着，代表着他们拥有的东西还很不够成熟，需要不断地完善语言结构和功能需求。2、开始各种架构设计模式，标志他们做的东西在向大型结构和复杂应用转变，需要更好的组织和管理。3、然后就是各种架构的分层，业务逻辑的解耦，可视化开发，自动化测试，文件管理，团队协同系统等等，说明重视生产效率了，也就是所谓工程化。今天的前端领域为了解决日益复杂的web业务需求及体量，越来越多的借鉴客户端的开发经验，导致前端的开发模式跟传统的GUI软件非常接近，再加上前端独有的特性(免安装、增量安装等)，工程复杂度早有可能超过了客户端的技术体量。前端如今已经脱离了生产力低下的原始农耕生活，开始步入了工业时代。前端工程也大致会经历四个阶段：1、库、框架的选型：前端工程建设首先需要做的就是根据项目特征进行技术选型。现在工程追求的是敏捷开发，基本上没有人会从0开始构建一个复杂web应用，合理的技术选型可以为项目有效提高生产力，节省成本。图1-1 前端框架/库2、简单构建优化：选型之后便是代码的构建，不仅仅需要解决开发效率的问题，还必须要兼顾运行性能，包括对代码的压缩，校验，之后再以页面为单位进行简单的资源合并。图1-2 前端工程管理工具3、JS/CSS模块化开发：分治是软件工程的重要思想，是复杂系统开发和维护的基石，这点放在前端开发中同样适用。JS模块化方案很多，AMD、CommonJS、UMD、ES6 Module等，对应的框架和工具也数不胜数；CSS模块化开发基本都是在less、sass、stylus等于处理器的import/mixin特性下实现 。图1-3 前端模块化管理工具4、组件化开发和静态资源管理(1)组件化开发分治是一种非常重要的工程优化方法，前端作为一种GUI软件，不仅仅需要CSS/JS的模块化开发，对于UI组件的分治也有着同样的渴求。图1-4 组件化开发上图便是前端组件化开发理念，简单解读一下：a.页面的每个独立的可交互区域/特有通用区块视为一个组件；b.每个组件对应一个目录，组件所需的各种独有依赖都在这个目录下，方便就近维护；c.组件之间相互独立，因此也可以自由组合；d.页面作为组件的容器，负责组合组件呈现给用户；e.当不需要某个组件时，或者想要替换组件时，能够将整个目录删除或替换。其中就近维护原则，为前端组件化开发提供了很好的分治手段，每个开发者都清楚的知道需要维护的功能单元，其独立代码一定存在对应的组件目录下，包括这个功能单元的所有内部js逻辑，css样式，html结构，都在那里。组件化开发有着很高的通用性，根据业务选型不同，组件HTML部分可以是静态的HTML文件，可以是前端构建的页面模板，也可以是后端输出渲染，都能满足组件化开发的概念。基于这样的工程理念，很容易将系统以独立的组件划分为单元对应开发，从而提高效率的同时，也提高了可维护性。图1-5 组件化开发结合前面提到的模块化开发概念，整个前端项目可以划分为这么几种：名称说明举例JS模块算法独立和单元数据浏览器环境检测(detect)，网络请求(ajax)，应用配置(config)，功能继承，DOM操作(dom)，工具函数(utils) CSS模块样式独立栅格系统(grid)，字体，图标(icon-fonts)，动画样式(animate) UI组件独立的可视/可交互功能单元页头(header)，页尾(footer)，导航栏(nav)，搜索框(search)页面前端这种GUI软件的界面状态，是UI组件的容器首页(index)，列表页(list)，用户管理(user)应用整个项目或整个站点被称之为应用，由多个页面组成于是，前端工程源码结构就成了这样子：图1-6 前端工程目录结构(2)静态资源管理：增量原则的应用前端应用不需要安装，它所有的程序资源都部署在远处服务器上，通过访问页面来加载对应的资源，随着页面访问的累加，有步骤的将整个程序动态下载到本地缓存、执行，“增量下载”是前端在工程上区别客户端GUI软件的根本原因。根据增量的原则，我们应该精心规划每个页面的所需资源的加载，使得用户无论访问哪个页面都能按需加载页面资源，没访问过的无需加载，访问过的可以缓存复用，最终为用户带来流畅的交互体验。前端工程其实是很大的一个话题，开发仅仅是其中的一部分。2.系统相关理论与技术2.1 MVC模式概述MVC(Model-View-Controller)全称是“模型-视图-控制器”，作为一种架构设计模式，它通过关注点分离鼓励改进应用程序组织，使逻辑和业务处理的完全分离开来实现解耦目的。在过去，MVC被大量应用于构建桌面和服务端程序，它的实用性得到了有效的验证。现在的web程序开发慢慢向传统应用软件开发靠拢，它们之间的界限也进一步模糊，设计模式的概念也融合进入了web前端开发领域。由于前端开发的环境特性，在经典MVC模式上也引申出了多种MV*模式，被实现到各个Javascript框架中都基本有些许的变化2。经典MVC包括了三类对象，将他们分离以提高灵活性和复用性：(1)数据层-model：用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听此模型。一旦模型的数据发生变化，模型将通知有关的视图。(2)展现层-view：它是在屏幕上的显示，描绘的是model的当前状态。当模型的数据发生变化，与数据相应的视图也会得到刷新自己的机会。(3)业务层-controller：定义视图对用户行为的响应方式，起到不同层面间的组织作用，用于控制应用程序的流程，主要负责处理用户行为的响应和数据model上的改变带来的视图刷新。图2-1 MVC模式(实线：方法调用 虚线：事件通知)其中涉及两种设计模式：View和model之间的观察者模式，view观察model，在此model上注册事件，当model发生变化时便及时通知相关view。 View和controller之间的策略模式，一个策略是一个表述算法的对象，MVC允许在不改变视图外观的情况下改变视图对用户输入的响应。MVC将响应方式封装在controller对象中，存在一个controller的类层次结构，使得可以方便地对原有的controller做适当的改变而创建新的controller。图2-2 JavascriptMVC模式如图所示，在javascript-MVC模式中，view承接了部分controller的功能，负责处理用户输入，但是不必了解下一步做什么。它依赖一个controller为它做决定或处理用户事件。事实上，前端的view已经具备了独立处理事件的能力，如果每个事件都要流经controller，势必增加复杂性。同时，view也可以委托controller处理model的更改。Model数据变化后通知view进行更新，显示给用户。这个过程是一个圆，一个循环的过程。2.2 AngularJs原理和特性AngularJs是一款开源的Javascript MV*(MVC、MVW、MVVM)框架，目前由google维护。AngularJs弥补了HTML在构建应用方面的不足，其通过使用标识符结构，来拓展web应用中的HTML词汇，使开发者可以是使用HTML来声明动态内容，从而使得web开发和测试工作变得更加容易。AngularJs遵循的设计理念是构建UI应该是声明式的。以下是对AngularJs的特性的一些总结： (1)方便的REST：RESTful逐渐成为了标准的服务器和客户端沟通的方式。只需要一行Javascript代码，就可以快速的从服务器得到响应数据。AngularJs将这些变成了JS对象，作为Model，遵循MVVM(model view view-model)设计模式。(2)MVVM：Model将和ViewModel互动(通过$scope对象)，将监听Model的变化。这些可以通过View来发送和渲染，由HTML来展示你的代码。View可以通过$routeProvider对象来支配(哈希路由控制)，所以你可以深度的链接和组织你的View与Controller。AngularJs同时提供了无状态的controller，可以用来初始化和控制$scope对象。(3)数据绑定和依赖注入：在MVVM设计模式中的任何东西无论发生任何事情都自动的和UI通信。这帮助我们去除了wrapper，getter/setter方法或者class定义。AngularJS将帮助我们处理所有的这些内容，内置的$watch方法能实时监听数据并触发事件，数据变化的同时，所以你可以处理数据像处理基本Javascript数据类型，例如数组，一样简单。当然你也可以通过自定义处理复杂数据。正因为所有事情的发生都是自动的，所以你不必调用一个main()来执行你的代码，而是通过依赖关系来驱动。(4)可拓展的HTML：大多数的网站都是使用非语义的标签来搭建的。你需要自己在CSS的class定义相关的DOM层次结构。而使用AngularJS，你可以操作XML一样操作HTML，给你无穷的方式来完成标签和属性的定义。AngularJs通过自己的编译器和directives来完成相关的设置。(5)使用HTML模板：如果你曾经使用过Mustache,Hogan.js或handlebars的话，你就可以快速的理解AngularJS的模板引擎语法，因为它是纯HTML的。AngularJS通过DOM浏览来完成此类功能，使用上面提到的directices。模板被作为DOM元素传递到Angular的编译器中，可以被拓展，执行或者重用。这很关键，这样一来你就拥有了DOM组件，而非字符串，允许你直接的操作拓展DOM树3。(6)企业级别的测试：AngularJS并不依赖第三方的插件或者是框架，包括测试。然而，虽然AngularJS有着许多的优点，但这些优点也为它带来了一些性能瓶颈问题：(1)动态作用域：由于AngularJS双向绑定的需要，你必须给数据指派一个域，就像Javascript的function(javascript没有块作用域，通过function来区分不同域)，会将不同域中的数据区隔开来，但不同的是，Javascript或Java等拥有完整语言特性的的语言，它们的作用域是预定义的，只有有限的几种。而scope则不然，你无法真正理解它，就无法理解ng-repeat中修改绑定的值却对应controller中的值是无效的一样困惑。但是，好的是，当你真正成为程序员，你就会豁然开朗。(2)依赖注入问题：这个问题的出现是由于AngularJS的哲学导致：依赖概念要够简单。开发者想了一个极取巧的方法利用参数的名字作为依赖注入的对象。正是因为Javascript的强大多变，才能够实现。(3)双向绑定的性能问题：双向绑定的目的是大大提高我们开发者的效率，使界面能实时反映数据的变化，却因为当今浏览器引擎的”缺陷”（无法真正理解事件影响的范围），而只能采用最笨拙的思路。AngualrJs采用的是脏检测，只要有事件触发(ng-click)，就全面执行一次所有的监听($watch)，如果监听中有新的值出现，则再次执行所有的监听，进行重新计算，反复最多10次。但经过测试，只要绑定对象不超过2000个，则每次loop都不会超出50ms，这个时间差对我们人眼是无感知的。图2-3 AngularJs执行原理2.3 移动UI框架Ionic近年来随着移动设备类型的丰富，操作系统的多样化，用户需求的增加，每个项目在启动之前，大家都会考虑到项目成本，团队成员的技术和协作能力，技术选型和成熟度，时间，需求等一堆因素。因此，App的开发方案以及变得越来越多。曾经有一段HTML5的小浪潮，无数的人参与或者看到过一个讨论：原生开发还是混合开发，又或者是web开发？在这个充满各种变数的移动互联网时代，唯有实践方能出真知。由一张图可以直观的看出Native app、Web app和Hybrid app三者的区别：图2-4 App开发形式简图(1)Native app：Native Code编程，代码编译之后以2进制或者字节码的形式运行在OS上，直接调用OS的Device API。(2)Web app：以HTML+CSS+JS等WEB技术编程，代码运行在浏览器中，通过浏览器来调用Device API(取决于HTML5未来的支持能力)(3)Hybrid app：部分代码以WEB技术编程，部分代码由某些Native Container承担(例如PhoneGap,BAE等插件)，其目的是在HTML5尚未完全支持Device API和Network API的目前阶段，承担这部分的职责。图2-5 App开发方式优缺对比总体来讲，Hybrid app是同时采用了网页语言与程序语言进行开发，在不同的应用环境分别打包，应用的特性更接近原生应用却又趋向于web应用。因为在开发过程中同时使用了网页语言，所以开发成本和难度都有所降低。也就是说Hybrid app兼具了Native app和web app两者的诸多优点。因此，Hybrid app有以下优点：(1)开发时可能不采用或者大部分不采用原生语言，但是却有所有原生应用的特性；(2)架构方案会和原生有出入，基本由工具而定；(3)具有跨平台特性；(4)一般开发相对原生开发的方式要简单。Ionic是一个强大的HTML5原生应用(native app)开发框架，能够在HTML、CSS和Javascript的基础上构建原生味道的移动应用(mobile apps)。Ionic同时也是个高级HTML5混合式移动应用开源框架，以AngularJs为基础，构建了许多酷炫的效果来满足视觉体验和用户体验。Ionic框架的目的是从web的角度开发手机应用，基于phonegap的编译平台，可以实现编译成各个平台的应用程序。Ionic的优势非常显著：(1)性能优异；(2)基于AngularJs应用；(3)漂亮的UI设计；(4)强大的命令行(基于nodejs)；(5)ngcordova，将主流的Cordova API或者Cordova插件封装为AngularJs拓展，使用非常方便；(6)近期开发的可视化工具Ionic Creator；(7)活跃的社区贡献；2.4 服务端的JavascriptNodeJs绝大部分web应用都包含客户端和服务端两部分。服务端的实现往往比较复杂、麻烦。创建一个简单的服务器都要求对多线程、伸缩性以及服务器部署有专业的知识。除此之外，由于客户端软件是用HTML和Javascript来实现的，而服务器端核心代码通常都是用静态编程语言实现的，所以，开发web应用经常会有错乱的感觉。由于这种前后端开发语言的差异，不得不让开发者使用多种编程语言，同时还要对特定的程序逻辑事先做好设计选型。几年前，要用Javascript来实现服务端应用几乎是想都不敢想的一件事情。性能糟糕、内存管理不成熟以及缺乏操作系统层面的集成，不解决这些问题，Javascript很难成为一门服务端的语言。NodeJs的作者Ryan Dahl在此之前，一直为高性能服务器的架设而努力，他尝试过用Ruby、C、Lua等语言写一些开源项目来为客户解决web服务器的高并发性能问题，但最终无法有效完成。然而多次的实践让他感觉到了问题的关键是要通过事件驱动和异步I/O来达成目的。在他快绝望的时候，作为Google chrome浏览器的一部分，V8引擎满足了他对于高性能服务器的想象：(1)没有历史的包袱，没有同步I/O，不会出现因为同步I/O导致事件循环性能急剧降低的情况。(2)V8的性能足够好，远远比python、ruby等脚本语言的引擎快，而且拥有优秀的垃圾回收机制。(3)Javascript语言的闭包特性非常方便，比C中的回调函数好用这样一个web服务器并非只是一个“玩具”，相反，它是一个高性能的web服务器，甚至，在某些场景下，比现有如Apache和Nginx这样的web服务器性能还要好。Node.js被称为是一个将设计网络应用导向正确道路的特殊工具。Node.js改变了web开发模式，今后无须再将书写部署到独立安装的web服务器区运行，如传统的LAMP模式，它通常包含了PHP环境和Apache服务器。正如前面结婚骚的，获得web服务器完全的控制权催生了另外一类基于Node.js开发的应用：实时web应用。在一个服务器端和众多客户进行快速的数据传输，在Node开发中变得越来越常见。这意味着你既可以创建更高效的程序，又能成为社区的一份子，推进理想的web开发模式8。2.5 非关系型数据库NoSQL关系型数据库是建立在关系模型基础上的数据库。关系模型是由关系数据结构、关系操作集合(是指对关系实施的各种操作，包括选择、投影、连接、并、交、差、增、删、改等，其特点是集合操作方式，也就是操作对象和结果都是集合)、关系完整性约束(实体完整性、参照完整性、用户定义完整性)三部分组成。标准数据查询语言SQL就是一种基于关系数据库的语言，这种语言执行对关系数据库中数据的检索和操作，结构类似如下：图2-6 关系型数据表结构关系型数据库中每个数据库包含一个或者多个表。表是以行和烈的形式组合起来的数据集合。关系模型就是指二维表格模型，因而一个关系型数据库就是由二维表(二维表名就是关系名。表中的第一行通常称为属性名，表中的每一个元组和属性都是不可再分的，且元组的次序是无关紧要的。简单来说就是一个只有上下左右，没有前后的一个平面。如一个Excel就是一个二维表)及其之间的联系组成的一个数据组织。然而web2.0带来的用户之间资源和信息自由共享暴露了关系型数据库面临的问题，主要包括了以下几项：(1)数据库并发负载高：我们非常熟悉的Qzone是著名的社交类web2.0网站，QQ空间用户可以自定义装扮空间，随意调整版块，随时随地发布自己的心情、日志、说说等，空间根据用户的这些个性化的操作，提供动态的页面和最新的动态信息。所以动态页面静态化无法满足需求，因此数据库并发负载非常高，往往达每秒上万次读/写请求。如果数据库承受不了那么高的负载，数据库会直接崩掉，最后导致用户数据损坏或丢失，因此关系型数据库面临高并发读/写问题。(2)海量数据存储和访问：大型的SNS网站(如人人网)每天用户产生的数据量巨大，假设按平均1000条/秒计算，用户每天产生上亿条数据，一张表可达好几亿的数据。由于每天都会产生海量的用户动态数据，所以关系型数据库面临对海量数据的高效率存储和访问的问题。(3)数据库越来越大：一个大型网站的用户量都在几百万甚至上千万，每天产生上亿数据，数据量越来越大，而关系数据困则无法像web server和app server一样简单的通过添加更多的硬件和服务节点来扩展性能和负载能力。因此关系型数据库面临数据库的高扩展性和高可用性问题。(4)事务管理的负担：比如我们在处理网上购物交易时，需要编写一个数据库事务来确保商品和金钱的顺利交易，然后数据库内的数据才会更新；否则，数据库原来的数据将保持不变。然而很多web实时系统并不要求严格的数据库事务，对读写的一致性的要求低，因此关系型数据库事务管理成为数据库高负载的一个负担。(5)关系型数据库读/写实时性的忽略：像SQL server和MySQL等数据库对数据的增、删、改、查的实时性是很强的，然而多数web应用对数据的实时性要求并不高，这样数据的读/写实时性就体现不出来了。(6)多表关联查询被弱化：有很多web2.0网站为了提高用户的点击速度和响应速度，会尽量避免使用关联查询，以及复杂的数据分析类型的SQL报表查询，更多地使用单表的主键查询，以及单表的简单分页查询。因此对复杂的SQL查询，特别是多表关联查询的功能就被极大的弱化了。关系型数据库在现今越来越多的应用场景下暴露出了许多难以克服的问题，为了解决这类问题满足提高性能体验，NoSQL数据库应运而生。NoSQL是非关系型数据存储的广义定义，此概念在2009年初得到了广泛的认同，也产生了很多种类的NoSQL数据库。相比较关系型数据库而言，NoSQL的优势有以下几点：(1)NoSQL数据种类繁多，它们都有一个共同的特点，就是都去掉了关系型数据库的关系型特性。数据库之间没有关系(面向集合存储，易于存储对象类型数据，存储不需要固定的表结构)，这样就非常容易拓展。(2)NoSQL数据库具有非常好的读/写性能，特别是在数据库量下，读/写性能同样表现得非常优秀。这是因为它没有关系性，数据库结构简单。(3)NoSQL数据库不需要提前为要存储的数据建立字段，一个集合中随时可以存入自定义的数据格式。而在非关系型数据库中，增加和删除字段是一件非常麻烦的事，特别是数据量非常大的表。而在NoSQL数据库中可以轻而易举地做到。(4)NoSQL数据库可以在不影响性能的情况下，非常方便的实现高可用的架构。例如，Cassandra、HBase模型，通过复制模型也能实现高可用性。(5)NoSQL数据库的出现，解决了关系型数据库所面临的高并发、易扩展等问题，从而弥补了关系型数据库的不足。而且还在某些方面极大地节省了开发成本和维护成本5。2.6 MongoDBMongoDB是NoSQL中的一种，当然也具有NoSQL的特性数据库的无关系型特性。数据库之间没有关系，所以MongoDB数据库非常容易拓展。图2-7 MongoDB数据结构示例MongoDB中每个数据包含一个或者多个集合。集合是以BSON(Binary Serialized Document Format，JSON数据的拓展格式)数据格式组织起来的文档对象的集合。例如，图1.4中的集合1，里面存储有4个文档对象。每个文档的数据结构都不一样，存储不需要固定的表结构，模式自由。MongoDB中的集合类似于关系型数据库中的表，文档类似关系型数据中记录。MongoDB数据库没有关系性，数据结构非常简单，所以它的读写性能非常高。根据官方文档介绍，当数据量达到50GB以上时，MongoDB的访问速度是MySQL的10倍以上。MongoDB是一种非常强大、灵活、可拓展的数据存储方式。MongoDB功能非常丰富，容易上手，便于使用。从而让我们关注编程本身，不再为存储数据而烦恼6。MongoDB最大的特点是有着非常强大的查询语言，其语法与面向对象的查询语法非常相似，可以实现关系型数据库单表查询的大部分功能，也支持对数据建立索引。MongoDB数据库的特点如下：(1)面向集合存储，易于存储对象类型的数据，如一个字段可以存入一个对象；(2)模式自由，一个集合中可以存储一个键值对的文档，也可以存储多个键值对的文档，还可以存储键不一样的文档；(3)支持动态查询，查询语句使用JSON形式作为参数，可以很方便地查询内嵌文档和对象数组；(4)支持完全索引，包含内部对象，可以对内嵌文档创建索引；(5)支持查询；(6)支持复制和故障恢复，从节点可以复制主节点的数据，主节点的所有对数据的操作都会同步到从节点，从节点的数据和主节点的数据是完全一样的，以作备份。当主节点发生故障之后，从节点可以升级为主节点，也可以通过从节点对故障的主节点进行数据恢复；(7)使用高效的二进制数据存储，包括大型对象(如视频)，可以将图片文件甚至视频转换成二进制的数据存储到数据库中；(8)自动处理碎片，以支持云计算层次的拓展性，可以水平拓展数据库集群，动态添加片(服务器)；(9)支持Python、PHP、Ruby、Java、C、C#、Javascript、Perl及C+语言的驱动程序，社区中也提供了对Erlang及.NET等平台的驱动程序；(10)文件存储格式为BSON(一种JSON的拓展)；(11)可通过网络访问；综上所述，MongoDB数据库是一个面向集合并且模式自由的文档类型数据库。3.系统分析3.1 系统目标要求自媒体富应用系统的目标是：在先进的开发平台上，利用前沿技术，配置一定的硬件基础和软件环境，开发一个具有开放体系结构的，易于拓展，易于维护的，具有良好UI界面和实时交互特性的自媒体富应用，为网络用户提供在线交流的网络平台。通过本系统网站可以实时在线记录日志，发表自己的心情和喜好，还能在某些重要场合做备忘录使用，后台自动更新数据到数据库存储。具体的要求如下：(1)为日志添加/编辑/删除分类；(2)在分类日志下新建/删除/编辑日志，日志详情；(3)通讯录模块的新建/编辑/删除功能，用户信息详情，用户搜索；(4)采用非关系型数据库，考虑大数据的快速查询和存储特性，以及对数据的拓展性要求；跨终端特性，不依赖于具体的终端平台，保证兼容性，可以在任意的浏览器中使用。3.2 功能要求前台功能实现可以分为以下几个部分：(1)用户进入首页，切换选择不同的模块使用，目前主要有日志模块和通讯录模块(保留有即时通讯模块的接口)。(2)日志模块下用户可以按个人喜好对日志创建分类，并在相应分类下创建日志，对原有日志进行编辑修改，还可以删除日志，或者是删除分类。在删除日志或分类时会有操作警告，提醒用户操作的不可逆性，防止用户误删导致数据丢失。在删除分类时，该分类下的所有日志都将会同时删除。(3)通讯录模块下可以按照用户的亲属关系来自定义分类，例如家人，朋友，同学等，有效的分类能够快速帮助用户去识别和记忆。用户可以填入的信息包括有名字、性别、手机、座机、地址、邮箱、头像和自定义分类，填入字段可以根据正则匹配对输入进行校验，防止无效数据的填写。通讯录的每位成员都由系统分配一个id值，防止信息相同产生的混乱。(4)通讯录模块配有模糊搜索功能，用户可以根据个别字段去索搜相关成员信息。对成员的数据删除操作同样具有不可逆性，将会对删除操作进行功能性警告，目的是为了提高交互体验。图3-1 系统功能架构对后台功能的实现分析如下：富应用对MVC框架中controller的前移，使得业务逻辑的实现和数据处理都由前台完成，后台主要是实现利用网络把前台系统和数据库进行连接，开放数据存取的接口供前台调用，以实现内容的管理和丰富。在未来的需求设想中，将拓展以下功能：(1)websocket技术，实现实时web应用，用户之间的即时通讯功能能有效提高用户对产品的功能认可，而且在web2.0时代，主要的就是用户的资源和信息共享；(2)日志模块添加日志的内容多元化，可以是图片、音乐、视频等，让用户更好的表达；(3)日志提供分享、评论功能，用户可自由选择需要分享的日志；一条评论下可再次评论，也可对评论进行删除。(4)用户之间可以通过搜索用户名或id来在数据库中匹配用户信息，并添加关注，关注的用户详情页为该用户分享的日志内容，可自由评论。(5)利用Hybrid app的优势，调用设备API，可以实现用户对成员的通话功能；(6)用户邮箱绑定，后台实现对用户邮箱的登录，向指定成员发送邮件；3.3 性能要求富应用的概念包含了两个方面，一个是数据模型的丰富，另一个是用户界面的丰富。传统的网站每个页面的交互独立，页面之间需要经过后端通信，如果仅仅是为了少量的数据更新而刷新页面，如果没有缓存，浏览器将从服务器重新加载资源，就会造成不必要的浪费，影响性能。但是富应用并不是排斥服务器的渲染，我们应该将富应用和服务器渲染区别对待。互联网的连接有个理论速度限制，一个灵活的系统应当多种因素的影响下均衡浏览器和服务器端的代码渲染工作，使每个交互动作尽量做到少延迟、快响应，减少网站和网络应用的差别。富应用的最大目的是简化用户行为，提高用户体验，去实现所见即所得的技术理念。自媒体网站的特性要求具备以下几点内容：(1)多态性：遵守“以用户为系统设计中心”的原则，UI设计和交互的目的都是为了提高用户体验。互联网的快速发展很大的减少了信息传递的成本和询问成本，用户可以有自由选择的权利。满足不同用户的需求，界面操作应该更简单合理，功能设置均需依照用户习惯完成，避免各种反人类的设计。(2)易维护：用户可以方便管理自己的内容。系统的升级和版本迭代都不应该对原有功能作太大的改动，子系统、新模块的设计都应该具有可扩充性，保证基本功能的稳定，避免用户在不知情的条件下误操作而导致数据丢失，影响用户对产品系统的认可度。(3)系统应充分慨率用户信息、设备、系统运行和管理的安全性，对用户信息的加密处理、数据的备份、系统的存取验证，还有对web攻击的处理，保障系统的基本功能稳定。(4)用户需求时刻都在发生变化，在为系统设计的时候应该充分考虑到多种情况的存在，以便在扩展新的业务功能时降低系统的复杂度。3.4 数据需求考虑系统的数据结构设计以及非关系型数据库的特性，数据需求包括下面几个方面：(1)数据的确切性：数据输入提交过程中的校验，避免信息的不正确，要考虑用户的一切可能性输入。因为是单页面应用，所以对数据的实时读/写性能不需要有太高的要求。(2)数据的唯一性：随着用户的增长或者是内容的增加，为了保证数据的正确性，应该为每一条数据都添加唯一的id值进行判别，避免数据混乱。(3)数据的一致性与完整性：由于用户数据可能存在共享的情况，因此，如何保障数据的一致性和完整性，是本系统需要解决的重要问题。首先，要有相关人员来维护数据的一致性，控制输入数据的去向，并且严格约束数据的输入，拒绝错误数据以保证数据的完整性。3.5 设计原则优秀的软件都拥有着共同的特性，系统遵循着一定的原则去实现。图3-2 软件设计原则(1)单一职责原则：一个代码组件(例如类或函数)应该只执行单一的预设的任务，这样可以有效的降低类的复杂度，一个类只负责一项职责，不仅简化了逻辑，还提高了类的可读性，提高了系统的可维护性。(2)开放封闭原则：程序里的实体项(类，模块，函数等)应该对拓展行为开放，对修改行为关闭。对于面向对象来说，需要的是依赖抽象，而不是实现。对拓展的开放，意味着有新的需求或变化时，可以对现有代码进行拓展，以适应新的情况。对修改的封闭，意味着类一旦设计完成，就可以独立完成其工作，而不要对类进行任何修改。(3)里氏替换原则：使用基类的指针或引用的函数，必须是在不知情的情况下，能够用派生类的对象。里氏替换原则是使代码符合开闭原则的一个重要保证，正是由于子类型的可替换性才使得父类型的模块无需修改便可以自由拓展9。(4)最少知识原则(又称笛米特法则)：程序组件应该只跟它的直系亲属有关系(例如继承类，包含的对象，通过参数入口传入的对象等)。尽量减少对象之间的交互，从而减小类之间的耦合，做到低耦合、高内聚。(5)接口隔离原则：不要暴露没有实际意义的接口，尽量保证接口的实用性，把功能实现在接口中，而不是类中，使用多个专门的接口比使用单一的总接口要好。这个原则可以提升我们“搭积木式”的软件开发。对于软件开发来说，不同的用户权限、不同的版本有不同的功能，都是这个原则的应用。(6)依赖倒置原则：高层模块不应该依赖于低层模块，应该依赖于抽象。抽象不应该依赖于细节，细节应该依赖于抽象。要保证做到这一点，一个具体的类应该只实现接口和抽象类中声明过的方法，而不应当给出多余的方法。只要一个被引用的对象存在抽象类型，就应当在任何引用此对象的地方使用抽象类型，包括参量的类型声明，属性的类型声明等。3.6 系统结构系统目前共有两个模块：日志模块和通讯录模块。为了方便系统日后自由拓展，以模块为单位对系统进行分割。图3-3 系统总目录主要结构系统后端采用的Node.js技术，是以Javascript为核心语言的服务架构。app.js为系统入口文件，包括了数据库的连接、存取API的开放等功能；图3-4 package.json文件内容npm是Node.js的模块依赖管理工具。在命令运行时会读取当前目录的package.json文件和解释这个文件，这个文件基于Packages/1.1规范。在这个文件里可以定义应用名称、应用描述、关键字、版本号、应用的配置项、主页、作者、资源仓库地址、bug的提交地址、授权方式、目录、应用入口文件、应用依赖模块和开发环境依赖模块等。写好package.json的配置内容后，可以通过npm install来初始化安装依赖的模块，依赖模块将会安装在node_modules目录下。Schemas内部存放了系统数据集合，以MongoDB为基础，在NodeJs的采用数据框架Mongoose上开发，将用户操作生成的数据集合都存储在当前目录下，日志模块和通讯录模块的在内容更新后都能手动同步或自动同步更新到数据库。Gulpfile.js为工程管理文件，采用了基于流的自动化工程构建工具Gulp，能有效的管理工程文件，提高开发效率。目前只是简单的实现文件的压缩合并，减少带宽和请求，提高前端性能。www文件包含了系统前端目录文件，主要有html模板、css样式、页面交互和业务逻辑处理。前端富应用将系统重心前移，由前端控制业务逻辑并实时更新web页面显示，后端只负责提供数据接口，保证数据的安全和稳定，有效的降低了服务器的压力，也为前端提供了更多的可能性:(1)common目录保存了全局性功能、通用的组件和样式，为了实现web组件化，对某一具有特定功能的组件进行了抽离封装，以达到有效复用。因为通用组件不归属于任一模块，且防止代码的冗余，所以将它放到了common目录下管理。(2)data目录下是全局的信息，关于通讯录模块用户的头像，以及以后系统拓展保留的功能(使日志模块支持文档附件、拍照上传、视频数据流等)。(3)lib为前端引用的框架库目录。(4)modules是系统以模块划分的总目录，主要是保证模块正常运行的业务逻辑，相当于MVC框架中的C，业务的完成会实时更新到templates目录下的视图显示。目前有日志和通讯录模块，保留有聊天室模块的部分接口(未完成)。(5)templates是html文件的集合，同样按照模块划分。每个模块都分别有列表显示页、新建页、编辑页和详情页等。(6)index.html为前端入口文件。3.7 数据设计一个设计良好的数据库，可以有效的简化系统的实现。同时，在大数据的条件下，可以提高系统的执行速度。反之，一个设计混乱的数据库，不仅增加了无谓的管理过程，同时在系统执行过程中，还需要添加额外的功能对数据进行处理，使得检索变得很慢，降低了效率。所以，数据库的设计是一个系统设计很重要的步骤。高效数据库相对来说执行效率高，维护所需的代价少，且比较不容易出问题，因此设计数据库的时候务必小心谨慎，而且考虑平台的可用性。图3-5 日志模块数据示例图3-6 通讯录模块日志示例在某些情况下，比如描述单一结构的一批属性，因为它被用来保持结构层次，因而是有意义的。但是还是应当慎重考虑，只有语义上有意义的时候才使用它，应尽量保证数据元素以扁平化方式呈现，不能为了方便而将数据任意分组。4.开发环境搭建4.1 NodeJS安装安装Nod