基于SPA的web聊天室开发.docVIP

基于SPA的web聊天室开发 摘要：本文作者基于SPA编写了一个web聊天室应用。其视图层通过React库编写，路由通过React Router编写，数据库选用的是MongoDB，后端使用Express框架。可多人多房间聊天。整个项目前后端解耦，项目模块化，易调试，易开发。 关键词：用户体验;SPA，Web app， B/S， React 第一章 绪论 第1.1节 背景资料 随着计算机技术与网络技术的发展，Web平台以其开发快捷，更新方便，跨平台的优点吸引了越来越多的厂商推出了Web应用。在此背景下，Web前端承载了比以前更多的业务，用户体验要求也越来越高，使得前端开发得代码量呈几何倍数上升，代码逻辑也越来越复杂。而在当前较为普遍的开发模式中，为满足业务扩张的需求，开发人员将代码如同积木一样堆积起来，致使系统代码扩展性低，维护性差。为了提高网站整体的运行与开发效率，提升用户体验，需为当前的前端开发引入新的模式。 第1.2节 设计目标及技术可行性分析 本文作者理解到web开发的痛点，希望基于最新版本的JavaScript，CSS以及新的浏览器API，快速开发出模块化的，前后端低耦合，用户体验良好的web app。 优秀的JavaScript库拥有详细的文档，和代码示例。React , React Router , MongoDB , Express等库都有良好的技术支持，十分契合本系统的开发工作，技术上可行。 第二章 相关技术概述 第2.1节 SPA SPA(单页面应用)类似本地应用程序，其优点是可以减少资源的重复请求，提升页面的打开速度。对于移动3G这种弱网络环境尤为有效，有助于提升用户体验。 第2.2节 前端框架：React React起源于Facebook内部项目，市场上的JavaScript MVC框架不能满足Facebook的业务需求，决定自研一套，用于架设Instagram的网站。并于2013年5月开源。 React设计思想十分独特，虚拟DOM，组件化，单项数据流等利器给前端UI构建掀起了一波声势浩大的函数式新潮流。且生态圈完善，学习资料丰富。并且本文作者很喜欢它一切都是JS的思想。不用去记忆很多复杂的指令。 第2.3节 后端框架：Express Express是一个基于Node.js平台的极简，灵活的web应用开发框架。并且基于Express良好的扩展性，其周边的生态环境也十分的丰富。免去了本文作者重复造轮子的麻烦。并且其文档十分完整，丰富，能够让本文作者在不是特别熟悉后端的情况下，顺利完成开发。 第2.4节 数据库：MongoDB MongoDB作为典型的非关系型数据库，采用了类JSON的documents来存储数据。虽然本文作者在大学期间学习过SQL Server，对其也比较的熟悉，但是本着快速开发的原则，仍然选择了当时还只是粗略了解过的MongoDB。 MongoDB采用动态数据模型schema，不需要预先定义数据类型和字段名。在更新文档documents的时候，可以轻松的增加新的字段名或者删除旧的字段。并且documents的映射关系更加贴合了OOP的编程语言。并且JavaScript可通过Mongoose库便捷操作MongoDB。 第三章 项目总体设计 第3.1节 界面设计 用户的聊天界面分为header，content, footer三部分，为方便程序编写，将界面上的每一个小组件都标上了类名，如图1所示： 图1 聊天界面设计 用户界面由注册页，登陆页，创建房间页，房间列表页，功能面板组成，如图2所示： 图2 面板功能设计 第3.2节 数据库UML设计 用户含有属性：用户名，用户密码，GithubId，创建的房间列表，创建日期。房间含有属性：房间名，是否为公开，参与者，创建者，创建时间。用户和房间是一对多关系。如图3所示： 图3 数据库存储 第3.3节 前后端交互设计 前后端交互展示了用户在界面上进行操作，服务器后端和数据库交互并对用户的操作进行反馈的过程。 输入项目的URL打开项目，为优化用户的登陆体验，如果用户之前登陆过，通过cookie验证其身份，使其无需再次登陆。如果之前没有登陆过，让其跳转到登陆页面。具体流程如图4所示： 图4 登陆注册流程设计 对于聊天数据，前端也会保存一部分，用户发送的信息通过state变量存储并且赋值给Talkcontent进行页面渲染，并且将数据保存到后端。如图5所示： 图5 聊天界面与后端交互逻辑