基于AngularJS和Btstrap聊天室的设计与实现.docVIP

基于AnguladS和Bootstrap聊天室的设计与实现 摘要：随着互联网和信息技术的发如何快 摘要：随着互联网和信息技术的发 如何快 速构建高效、强大的动态网站成为很多人研究的热点。 该文将结合AnguladS和Bootstrap构建一个 5聊 天室，体现AngularJs和Bootstrp整合的优点。 关键词：AngularJS； Bootstrap；聊天室 TP311 A : 1009-3044 (2015) 09-0091-02 Abstract： With the development of Internet and information technology， how to construct efficient， powerfuldynamic website has become the focus of many peoples research. This paper will construct a 5 chat room with AngularJS and Bootstrap， AngularJs and Bootstrp integration advantage. Key words： AngularJS； Bootstrap； chat room 1 AngularJS 简介 AngularJS是一款由Google公司开发的基于 JavaSript的MVC框架，主要用于动态应用程序开发工 作，能有效的简化开发过程的复杂度，提高测试和开 发效率［1］。AngularsJS使用Javascript语言进行开发， 大大降低了前端开发人员的学习曲线，使得程序的开 发、维护和测试更好的简洁。 AnglarJS 的特点 1）数据双向绑定：可以实现View层与model层 数据的同步，一方的改变会影响另一方［2］。2）代码 模块化。3）提供依赖注入，可以大大降低模块之间的 耦合度。4）支持测试驱动开发。 2 Bootstrap 简介 Bootstrap是一款由Twitter公司开发的前端框架， 其主要目的在于提高Web开发的速度，它基于 、 CSS、jAVASCRIPT，可以灵活、快速的构建Web应用［3］。 Bootstrap 特点 1）对移动设备的良好支持：Bootstrap的设计之 初，就考虑到移动设备上的应用，对于不同分辨率的 移动设备都有良好的支持［4］。2）栅格布局：Bootstrap 支持栅格系统，使得布局效果更加灵活方便，能够满 足各种需求。3）响应式设计：针对不同设备和不同分 辨率能够良好的支持，并具有一致的用户体验。4）全 面支持 5 和 CSS3［5］。 3技术框架 3.1服务端技术 考虑到聊天室的功能相对比较简单，且数据处理 的密度也不大。所以考虑使用目前比较流行的nodejs 来完成服务端的基本功能，服务端整体的设计框架如 下: 在nodejs基础上使用express插件可以高效的开 发web应用，目前也是nodejs下非常重要的一个插件。 数据库选择了 mongoDB, mongoDB是目前比较流行的 非关系型数据库，具有灵活，稳定特性，且符合00 思想。为何更好的对数据库进行建模，本项目还选择 mongoose0 3.2客户端技术 客户端将利用Bootstrap来对页面进行构建，利用 AngularJS实现数据的访问，整体结构如下： 3聊天室整体设计 聊天室整体设计包括需求设计、用例设计和模块 设计三个部分，其中需求设计主要是对聊天室基本功 能进行分析，用例设计使用UML语言描述需求的信息 最后模块设计从整体角度对聊天室的功能进行模块划 分。 3.1需求分析 3.1.1用户登录 该模块主要实现用户身份认证，通过对用户名和 密码的验证，判断用户所具有的权限，并对后面的操 作进行控制和管理。 3.1.2用户注册 该模块主要实现新用户的创建，任意使用者可以 通过该模块注册一个用户帐号，后面可以通过登录模 块，进行聊天室的其他操作。 3.1.3网上聊天 该模块是整个系统的核心模块，实现聊天信息的 发布和浏览，任意注册用户都可以在该模块中发布聊 天信息，并且可以对自己的聊天信息进行编辑和管理。 3.1.4聊天记录 该模块主要实现对聊天记录的管理，聊天内容发 布者可以编辑自己的发布的聊天信息，并且可以实现 导出功能。 3.1.5后台管理 该模块主要实现对聊天室的管理和维护，包括用 户管理，聊天数据管理等，是聊天室管理员操作的主 要模块。 3.2用例设计 整个聊天室系统包括两类使用者，一类是普通用 户，一类是管理员。 3.2.1用户用例图 通过用例图可以看出用户能够完成注册、登录、 聊天等基本功能，其中聊天过程可以建立聊天群，进 行群聊或者进行私聊。 3.2.2用户用例图 通过用例