基于NodeJS的开发者交流社区

基于NodeJS的开发者交流社区平台设计与实现DesignandImplementationofaDeveloperCommunicationCommunityPlatformBasedonNodeJS摘要本论文旨在解决现有的技术交流社区网站的不完善问题，以现有的各类社区作为主要研究对象。基于主流的开发语言和工具，包括React、Antd、NodeJS、MongoDB等框架和数据库，设计并实现一款运行于PC端浏览器上的技术交流社区，给程序员等其他技术人员提供一个全面的交流平台。本系统基于MVVM设计模式，在前后端架构上选取流行的模式（分离前后台），选用React作为前台的主要技术栈，而后端则选用Node.js，数据库则选取非关系型数据库MongoDB，各类编程语言结合VSCode编辑器使得本系统具有较高的实用性、拓展性。系统主要功能包含发表技术文章、发表沸点动态、在线加好友、在线聊天等。关键词：React；NodeJS；MongoDB；SPA；技术社区；开发者AbstractThisthesisaimstosolvetheimperfectproblemoftheexistingtechnicalcommunicationcommunitywebsite,andtakesvariousexistingcommunitiesasthemainresearchobject.Thetechnologyusedisbasedonmainstreamdevelopmentlanguagesandtools,includingReact,Antd,NodeJS,MongoDBandotherframeworks.Anddatabase,designandimplementaPC-basedbrowsertechnologycommunicationcommunity，provideprogrammersandothertechnicalpersonnelwithacomprehensivecommunicationplatform.MVVMisthecornerstoneofthissystem,usingacompletelyseparatefrontandbackendform,thefrontendusesFiberReactisanarchitecture.ThebackendusesNodeJStobuildasingleapplication.Thedatabaseusesanon-relationaldatabaseMongoDB.Variousprogramminglanguages​​combinedwiththeVSCodeeditormakethissystemhighlypracticalandscalable.Themainfunctionsofthesystemincludepublishingtechnicalarticles,publishingboilingpointdynamics,addingfriendsonline,onlinechat,etc.Keywords：React;NodeJS;MongoDB;SPA;Technologycommunity;Developer

目录第一章绪论 第一章绪论1.1研究背景目的和意义近几年，互联网产业飞速磅礴发展，计算机作为互联网的主要载体，发挥了重要的作用，正因为如此，计算机软件开发行业也快速崛起，从而催生出了软件开发工程师这个职业，并且程序员数量日益增多，众所周知，知识是没有国界的，那么众多的程序员如何互相交流，分享知识呢?博客（Blog），以用户联系为基础，用户可以在其上发布各种内容，包括但不限于随笔、感想、技术交流等，它是一个网络平台，用户可以在该平台上建立自己的圈子和社区，借此来分享信息。博客（Blog）是网络发展的潮流下催生的优秀产物，它的分享性强，快速传播，有效地将“你”、“我”、“他”三者结合。特别是对于软件开发人员来说，需要一个能将自己的想法、开发经验、开发心得分享给其他开发者、能汲取到其他开发者的知识的平台。博客类似于一个社交网络，每一个用户不仅仅只是一个观众（Visitor），观阅自己有兴趣的信息，同时也是一个分享者（Sharer），将自己的知识分享给他人。用一句话来概括：“人皆可听，人皆可言，人皆可写”[1]。但是，对于开发者这一专业的群体来说，仅仅依靠博客来单纯地发表文章、评论是远远不够的。进而，需要一个功能更为完善的平台，姑且称它为——社区。目前，市面上已经有很多技术交流社区，诸如CSDN、掘金、思否、开发者头条等……以上这些都是比较知名的平台。它们都在博客的基础上，添加了发表动态、发表想法等功能，这让众多开发者可以在闲暇时间去舒缓自己的心情。诸如掘金、思否、CSDN等社区，基本功能是很完善的，但是仍然存在一些欠缺的点，比如缺少私信功能。因为开发者对于代码、各类文件、图片的需求是很大的，仅仅依靠文章评论作为运输载体肯定是不够的，所以需要“私信”。什么是私信?简单来说就是在线聊天，两个开发者可以在交流平台上进行远程的在线聊天，利用本系统在线聊天室提供的发送文件、发送代码、发送图片等辅助型功能进行更深层级的交流。以下为本系统的主要特点：高交流性：在保持博客的基本功能前提下，增加的在线聊天室，使得开发者可以通过实时添加、删除好友，来进行高质量、随时随地的在线聊天。高性能：采用Redis作为缓存数据库，解决点赞、统计在线情况的需求。1.2论文总体结构本系统前端采用React，后端采用NodeJS，数据存储则选用MongoDB。React作为前端三大框架之一，以其“组件化”的思想收获了一大批开发者；NodeJS则是一个后起之秀；MongoDB作为一个非关系型数据库，其优质的特性可以与NodeJS完美融合；Redis作为数据缓存数据库，有效的解决点赞时产生的性能问题。以下为本论文的大致框架：第一章：论文绪论，简要概述本论文的研究背景、研究目的、技术架构等。第二章：介绍本系统采用的各种技术栈，包括前端、后端、数据库，以及各技术的特点。第三章：需求分析模块，以功能导向为基础，提前规划整个系统，包括需求是否可行，需求是否合理等。第四章：系统设计板块，着重对整个系统的数据库加以设计，包括字段可行性、字段拓展性等。第五章：系统实现和测试，利用编程技术，结合需求分析的结果，对系统加以实现和完善；并最终进行自测，对于明显的BUG加以解决。第六章：论文总结部分，也是整篇论文的收尾工作，包括系统的结构优化、功能优化、代码优化，以及对于整篇论文的总结和展望。

第二章系统有关技术2.1ReactJSReact.js是一个帮助前端开发者构建页面UI的库，与Vue、Angular同属前端的优秀框架之一。React会在数据流发生变化的情况下，利用内部的调和、调度机制更新组件（声明式）；声明式使得React代码更加健壮，利于开发者们去调试糅合，并且可维护性大大提高；此外，React将界面分成了独立的小块，每一块就是一个组件，这些组件之间可以相互嵌套、组合，借此可以轻松地在应用中传递数据，并使得状态与DOM分离，这就是组件化[4]。本系统前端采用React，后端采用NodeJS，数据存储则选用MongoDB。React作为前端三大框架之一，以其“组件化”的思想收获了一大批开发者，React的声明式特性，使得创建交互式的UI视图变得轻而易举，配合redux，当数据改变时能有效地更新并且正确渲染组件，通过声明式编写的UI，可以让代码更加可靠，方便调试，并且可维护性大大提高[3]。本系统采用目前主流的前后端分离的开发模式，利用SPA架构，结合较为前沿的主流编程技术栈进行开发。前后端分离模式利用其可维护性强、用户体验友好等特点，解决传统的不分离模式下存在的前后端开发人员工作不合理、代码健壮性差的问题；SPA架构则是近几年较为流行的，中文又称“单页应用”，随着用户体验标准的提高，传统的多页应用（MPA）已经无法满足用户的审美，SPA架构下，B/S类型的网站可以在不刷新页面的情况下获取后端数据，所有的路由由前端统一管理，据此可以实现各种过度动画效果，提升用户体验[2]。2.2NodeJSNode.js是一个基于ChromeV8引擎的JavaScript运行时[5]。他的目标是帮助开发者构建可伸缩且高度化的应用程序，编写能够处理上万条同时连接在一个物理机的高并发代码[6]。Node.js有很多内置的模块，比如文件（fs）、网络（http）、process（进程）等，使得开发者可以对计算机底层进行更深层次的操作；并且它的语法是以JavaScript为基础的，使得前端开发者可以快速上手；Node.js是以事件做为驱动的，这使得开发者可在不借助线程的情况下开发出一个高并发的服务器，相较于其它编程语言来说，Node.js在高并发下的性能是极好的。Node.js提出了模块化的概念，每个文件都属于一个模块，各个模块之间互不影响，这解决了遗留很久的变量重复等问题；其通过npm来进行包管理，开发者只需执行相应的命令，便可在npm包市场下载所需要的工具包。2.3SPA架构传统的B/S（Broswer/Server，浏览器/服务器）模式下的web开发存在很多问题，比如前后端工作冗杂，分工不明确，所有的工作几乎由后端独自完成，并且产出的代码无法复用，重构困难[2]。这种情况下，多页应用（MPA，multiplepagewebapplication）极为流行。但是，随着互联网的不断发展，用户对于视觉和感官体验的要求越来越高，多页应用由于要频繁的刷新整个页面，用户体验极为不好，所以应允的出现了SPA，它提倡单个html文件，也就是说所有的模块都在同一个html文件里面来展现，浏览器在首次渲染时加载所需的HTML、CSS、JavaScript资源，所有的操作都在该html中进行。单页应用具有以下特点：速度快：可以在不刷新页面的情况下发送并接收后端数据，并且可以按需请求数据，避免页面刷新之后再次请求造成的性能问题。用户体验友好：前端开发者可以控制路由，来实现各种过渡动画效果。路由：路由由前端统一控制,并且在锚点跳转之后，不会重新刷新页面。业务逻辑：偏向前端，前端利用AJAX获取数据，并负责渲染到页面。2.4模块化在Node.js时期，涌现出了“模块化”这个词汇，每个JavaScript文件都属于一个小模块，里面包含了自己的变量、自己的方法，各个模块之间互不影响，只需要将该模块想分享给其它模块的变量或者方法暴露出去就可，这解决了遗留很久的变量重复等问题；此外，一个个小的模块，通过组合的方式，可以形成npm包，npm理所当然的成为了Node.js最受喜爱的包管理，开发者只需执行相应的命令，便可在npm包市场下载所需要的工具包。现在Web3.0时代已经到来，Web2.0也早已渗透到互联网各处，前端的整个生态链深受Node.js影响，目前前端各种构建工具都基于Node.js，随着前端代码结构上的不断增大、可维护性要求越来越高，模块化会变得愈发重要。2.5MongoDBMongoDB是非关系型数据库的一种，存储的数据格式是JSON形式的，易学易用，对于本系统是非常合适的。MongoDB广泛应用于不同规模的公司和多个行业，它的数据模式不是一尘不变的，也就是说，当你的应用迭代时，它也可以很灵敏的升级更新，另外，像MySql提供的多级索引，n表查询等功能，MongoDB也有提供，由此可见，它非常适合项目周期短，快速上手的项目。同时，MongoDB具有较强的可拓展性、高性能等特点，可以部署多服务器集群，并完美解决多服务器互相依赖的情况下，机器故障的问题；再者，得益于内存计算，MongoDB可以进行高性能的数据读取与写入[7]。2.6Webpack随着大前端的兴起，以及Web、H5等应用的体积不断增大，开发难度大大提高，说明前端已经不可或缺。从复杂庞大的管理后台，到对性能要求苛刻的移动网页，再到类似于ReactNative的原生应用开发方案，通过直接编写JavaScript、CSS、HTML开发Web应用的方式已经无法应对当前Web应用的发展[8]。Webpack作为一款优秀的打包工具，可以将JavaScript、CSS代码以及各种图片，打包在一起，可以在浏览器中使用。并且，由于SPA模式的盛行，网站的功能和源代码变得愈发复杂、庞大，进而Web开发向模块化演进。同时，Webpack可以在众多的打包工具中脱颖而出，成为构建工具的首选，原因如下：一体化：Webpack将一系列能做的工作，包括打包、压缩、性能优化，统统处理了，留给开发者的只剩下专心的处理业务逻辑。生态圈：Webpack具有强大的生态圈和维护团队，以及众多的使用者，可以提供良好的保障能力。健壮性：Webpack被大量团队所使用，容错性和BUG大幅度减少，可以很轻松的于互联网上找到教程和开发经验。2.7AntDesign原始的网站开发，只需编写简单的CSS样式，但是随着Web3.0时代的到来，以及Web2.0时代的大量普及，为了保持良好的重构性，以提供最好的性能，有时多个模块，或者多个项目都需要使用同一块样式，这时候传统的方式，就会变得难以复用，捉襟见肘了。所以，为了更有效、更快速地编写健壮地CSS样式代码，就需要将样式和脚本封装起来，使用的时候直接调用其提供的接口即可，这就是UI框架。AntDesign是一款优秀的UI框架，可以与React.js完美搭配，开发出美观实用的站点，随着商业化的趋势，愈来愈多的企业级产品对更好的用户体验要求有了现象级的提升，AntDesign以自然性、确定性、意义感、生长性为基础，提供给开发者一套完美的CSS模块化解决方案，让开发者专注于更好的用户体验。2.8RedisRedis是一个以键值对作存储的缓存数据库，提供了多种数据结构，比如字符串、集合、散列等，使得开发者可以选用合适的形式进行存储。Redis基于内存，这就使得它可以进行更快速的读写操作，据此可以实现点赞等较为频繁的数据库读写操作。同时，Redis基于它优秀的拓展性以及强大的并发性，可以存储大批量的数据，并且在高并发的情景下，也能高质量的读写，这一点，相对于MySql等其它数据库来说，可以说是最大的优势所在，因此，对于开发社区这种中小站点来说，是极为合适的。第三章系统分析3.1系统市场可行性分析目前已存在的众多技术交流社区，诸如掘金、思否等并没有为众多开发者提供一个功能完善、体验优良的在线聊天系统，当开发者需要私聊或者分享资料时，就不得不去添加其它好友，是极为不便利的。因此，本系统有必要站出来，通过内置的聊天室模块，抓准市面上众多的技术社区共同的痛点，有针对性地提出一整套地解决方案。本站点实现可持续运行地道路就是与其它平台进行积极的沟通和合作，据此为众多开发者提供一个优质地交流社区，提升用户体验。3.2系统可操作性分析 本系统基于传统的B/S（Browser/Server，浏览器端/服务端）架构，旨在为广大开发者提供一个优质的社区平台，系统整体操作简洁明了，与已存在的各类平台类似。本系统设计的原则就是不仅要功能实用，更要操作方便，也要界面优美，吸引用户，本系统采用“绿色”作为主色调，绿色象征和平宁静，意义在于让开发者可以在社区内得到更大的技术提升，以及得到充分的身心放松。3.3系统MVVM架构设计分析3.3.1传统MVC架构实现视图层（View）业务逻辑层（视图层（View）业务逻辑层（Controller）数据层（Model）数据库图3-1MVC3.3.2增强型MVVM结构实现本系统采用增强型MVVM架构，如图3-2所示：图3-2MVVM架构MVVM模式相较于传统的MVC模式，消除了Controller之间的耦合性；可测试性；可移植性，由VM层则替代了传统的Controller层。View代表视图层，也就是DOM树，ViewModel代表前端的数据流管理，比如Redux，Model就是数据库层。View层的所有改变只能由ViewModel层来直接控制。3.3.3MVVM架构处理业务逻辑MVVM将业务逻辑统一放置于VM层中管理，每个系统根据功能进行区分，每个功能点又拆分为独立的子系统，各个系统互相协同，配合完成整套的业务流程，前端部分如图3-3所示：登录注册模块逻辑登录注册模块逻辑文章管理模块逻辑动态管理模块逻辑VM（ViewModel）聊天系统逻辑好友系统逻辑足迹系统逻辑图3-3MVVM架构处理业务逻辑图3-4为整套的业务流程：把一个整体的系统拆分为多个子模块，以功能作为划分的的主要依据，各子模块之间互相不干扰，各自处理逻辑功能：登录注册模块登录注册模块文章管理模块动态模块聊天模块ViewModel业务逻辑层Redis缓存数据库MongoDB数据库后端用户路由后端文章路由后端动态&足迹路由后端聊天路由图3-4整体业务流程3.4系统主要功能需求分析登陆注册功能：登录之后的权限认证，采用目前流行的JWT（jsonwebtoken）技术，jwt验证可以有效的解决传统的Cookie认证存在的可拓展性差、XSRF（跨站请求伪造）的问题。Token和Cookie尽不相同，服务端不用保存用户的登录信息，而是在每次HTTP请求的Header部分添加Authorization字段即可，并且Token还支持携带其它有用的数据。在线人数统计功能：为了更好的统计网站流量，需要对网站在线访客加以统计，由于传统的HTTP协议无法实时收发数据，属于半双工通信，故采用Websocket，用户登录本系统之后，系统自动websocket请求，后端将当前用户的ID保存至Redis缓存中。Websocket基于HTTP，是全双工通信的，也就是说，客户端和服务端分别可以接收和主动发送数据。后端采用Redis存储用户的在线状态，因为在线状态是随时变化的，此时为了服务端的性能，减少数据库的读写操作，故采用Redis。加好友功能：用户A可以在网站内添加用户B为好友，进行更近一步的私聊。用户B可以实时的接收到用户A发出的加好友请求，不需要重载页面，如何实时的接收数据呢?就需要Websocket，基于Webscoket的全双工通信机制，服务端在接收到用户A发出的加好友请求之后，可以主动的推送该消息给用户B，无需用户B主动请求。具体的流程如图3-5所示：单聊功能：如果用户A和用户B互为好友，那么在双方的好友列表中对方都是存在的。本系统采用自定义的ID作为每个单聊的唯一标识，该ID通过组合用户A和用户B的userId来实现。加好友加好友44444好友请求图STYLEREF3\s0SEQ图\*ARABIC\s31图STYLEREF3\s0SEQ图\*ARABIC\s32用户A用户B互为好友同意ss拒绝图3-5好友申请流程3.5系统流程设计由于本系统采用前后端完全分离的开发模式，所以将主要的逻辑都交予前端处理，后端部分只需要负责数据存储和读取。前端界面采用组件化的React和高度可定制的UI框架AntDesign，旨在为用户呈现出精美的网站；前端脚本采用TypeScript，TypeScript（TS）是JavaScript（JS）的超集，它可以在众多的平台上运行，TypeScript提供了一系列强大的类型声明，比如接口（Interface）、类（Class）、命名空间（Namespace）、泛型等，TypeScript始于JavaScript，归于JavaScript，并且具有强大的工具用来构建大型应用程序。本系统采用Axios作为HTTP请求的工具，用来与后端进行数据交互，Axios是一款非常优秀的Ajax请求框架，它基于Promise，可以同时在前端和后端使用，它提供了一套拦截方案，可以针对符合特定要求的HTTP请求和HTTP响应，进行拦截处理，并且在数据过滤方面，还可自行将文本转换为JSON格式的数据，非常适合本项目。本系统的总体流程，如图3-6所示：用户社区首页注册成功注册功能用户社区首页注册成功注册功能登录功能登录成功功能模块沸点个人中心话题聊天室写文章文章详情图3-6系统大体流程第四章系统设计4.1系统体系结构设计浏览器（Browser）服务端（Server）数据存储（Database）系统的主要面向用户群体，用户浏览器（Browser）服务端（Server）数据存储（Database）系统的主要面向用户群体，用户通过系统提供的UI界面，进行发表文章、聊天等各种操作，通过Ajax将数据发送给后端处理浏览器发送的HTTP请求，对数据库进行增删改查后，将数据返回给浏览器持久化保存用户数据，其中包括缓存数据库和持久化数据库两个部分图4-1系统构思图B/S（浏览器/服务器，Browser/Server）架构，相对于C/S（客户端/服务器，Client/Server）架构，有几个比较突出的优点：B/S架构下，用户只需操作浏览器，极大的降低了使用门槛，开发者不需要关注用户操作系统的差异性，因此开发者在开发过程中把所有精力投入到业务逻辑的开发而不是项目的最终部署。B/S架构下，可以在一定程度减少客户端上的资源消耗和投入，对于用户来说，他们更倾向于一个节省资源的访问方式，而不是大费周章的下载客户端安装包。B/S架构下，大大的节省了开发人员的开发周期，并且后续的可维护性也比C/S架构下的系统高。4.2系统数据关系设计（1）文章实体，如图4-2所示：文章信息已阅用户文章标题文章信息已阅用户文章标题创建时间文章模式文章类型文章ID文章评论更新时间文章描述文章内容沸点ID图片内容沸点评论沸点ID图片内容沸点评论创建时间文本内容话题ID沸点项图4-3沸点项实体图话题ID沸点列表关注用户话题ID沸点列表关注用户发表用户话题描述创建时间话题名称话题项图4-4话题项实体图（4）足迹实体，如图4-5所示：关注用户关注用户关注话题发表文章收藏文章点赞沸点发表沸点点赞文章足迹图4-5足迹实体图评论ID评论人ID评论ID评论人ID图片内容文章ID文本内容回复列表创建时间文章评论图4-6文章评论实体图单聊标识ID最后会话更新时间单聊标识ID最后会话更新时间创建时间最后会话时间消息总数消息列表接收方发起方单聊图4-7单聊实体图消息ID更新时间单聊消息ID更新时间单聊ID未读消息创建时间消息内容消息类型接收方发送方单聊图4-8单聊消息实体图4.3系统数据表设计开发者交流社区系统为了保证多个子模块的可行性以及彼此之间的互相协同配合，就需要基于实体的属性关系，制定相对完善的数据库表，如下多表为其中的几个数据表展示：（1）用户数据表，如表4-1所示。表4-1用户表名称类型空默认值其他备注_idString否auto_increment标识IDusernameString否空用户名userpwdString否空密码，加密usergenderString否空性别useravatarString是‘’头像create_timeNumber是Date.now()注册时间update_timeNumber是Date.now()更新时间articlesArray是[]文章列表attentionObject是[]关注followersArray是[]关注者列表friendsArray是[]好友列表chat_memoryArray是[]聊天历史列表notificationsArray是[]通知列表activitiesArray是[]动态列表tracksArray是[]足迹列表pinsArray是[]沸点列表collectionsArray是[]收藏夹列表profile_cover_imgString是‘’封面图片addressString是‘’地址websiteString是‘’个人站点introductionString是‘’个人介绍jobString是‘’职业educationString是‘’学历bind_third_partyObject是{}第三方绑定（2）单聊消息数据表，如表4-2所示。表4-2单聊消息表名称类型空默认值其他备注chat_idString否空所属单聊ID_idObject否空auto_increment自增IDfrom_member_idObject否空发送人IDto_member_idObject否空接收人IDcontent_typeString否空消息类型(image|files|plain|contentString否空消息内容create_timeNumber是空Date.now()创建时间update_timeNumber是空Date.now()更新时间（3）沸点数据表，如表4-3所示。表4-3沸点表名称类型空默认值其他备注_idObject否auto_increment自增IDauthor_idObject否空发布者IDtopic_idObject否空所属话题IDcontent_plainString是‘’文本内容content_imageString是‘’图片内容content_linkString是‘’链接内容commentsArray是[]评论列表create_timeNumber是Date.now()创建时间update_timeNumber是Date.now()更新时间第五章系统实现与测试5.1项目整体结构本项目整体偏向前端，由于前端利用Node.js来进行项目搭建，所以将前后端项目源码一起放置于同个项目文件夹内部，如图5-1所示：图5-1项目整体结构图前端源代码目录如图5-2所示：图5-2前端源码结构图后端源代码目录如图5-3所示：图5-3后端整体结构图5.2登录模块登录模块主要采用jwt（jsonwebtoken）技术做权限认证，并且集成了Github第三方登录，因为开发人员对于Github是很熟悉的，所以新老用户可以使用Github账号直接登录，Github登录的流程如图5-4所示：图5-4Github登录流程图前端主要逻辑：登录时，将用户输入的用户名和密码通过Ajax发送到后端，再根据后端返回的JSON信息进行路由跳转以及持久化存放用户ID等操作后端主要逻辑：后端接收到前端传递过来的用户登录数据，在判断用户信息是否合理的同时,也要进行token的更新，以及用户状态读取5.3文章模块在本系统内部，用户可以创建并发表不同类型的文章，包括但不仅仅局限于前端、后端、数据库、运维等，同时，发表文章是有明确的权限控制的，也就是说，未登录的用户不能发表文章。后端接收到前端提供的文章信息，进行数据库的读写操作，主要针对文章数据表（Posts）来进行，同时需要更新用户数据表（User），将该文章ID同步添加至用户创建的文章列表内，后端部分逻辑如图5-5所示：图5-5发表文章后端逻辑图5.4沸点模块用户可以在沸点分享自己的感想和心情，沸点可以说是一个小型的社交平台，沸点模块的前端主要代码如图5-6所示：图5-6沸点布局图沸点模块的后端逻辑,主要是进行常规的沸点增删改查,以及创建用户足迹等。5.5话题模块话题模块也是本系统的一个内置亮点功能，本系统内置了20多种话题，比如报offer、今日最佳、内推招聘等，用户可以将自己的沸点发表到对应的话题下。话题模块的后端主要工作,同样是话题的添加,但是本系统目前的设定是：暂时只能由系统管理员来创建新的话题，后续可能会开放给普通用户。5.6聊天模块这是本系统最大的亮点模块，也是本系统对于市面上已知的同类型网站的功能上的补充，用户可以在通过好友申请，添加对方为好友，进而进行私聊，并且在私聊中可以发送图片、文件、代码等，聊天模块的前端路由设计，如图5-7所示：图5-7聊天页前端路由设计图前后端的数据交互采用Websocket来传输，包括好友申请、聊天消息发送和接收等。当接收方同意好友申请方的请求时，后端的主要处理逻辑如图5-8所示：图5-8同意好友申请后端逻辑图5.7足迹模块足迹系统记录了每个用户的行为，包括用户点赞、好友申请、发表文章、收藏文章等，但是足迹功能有很多需要注意的点，以点赞文章为例，后端的主要逻辑如图5-9所示：图5-9创建足迹后端主要逻辑图5.8收藏模块收藏模块包括收藏文章和收藏沸点两部分，用户浏览到自己喜欢的文章，可以将其添加至收藏夹，以供后续阅读，后端的主要代码如图5-10所示：图5-10创建收藏夹后端逻辑图5.9各模块测试结果登录界面，前端对用户输入的账户名以及密码作是否为空和字段合理性校验，符合规范则跳转至首页部分，如图5-11所示：图5-11登录页图系统主页，如图5-12所示：图5-12系统主页图沸点主页，进入沸点首页，默认展示一个话题，并且发布沸点框位于中央,利于吸引用户的眼球，激发用户的创作欲望，此外，发布沸点时，可以选择上传图片和选择一个对应的话题，但是上传图片的数量是有限制的，前端已经做了判断处理，同时发布沸点时必须选择一个话题，便于后端作分类处理，如图5-13所示：图5-13沸点主页图话题主页，包括我关注的话题，和全部话题，用户可以在此处关注自己感兴趣地话题，当完成关注话题后，该话题图标会出现在“我关注地话题”下，如图5-14所示：图5-14话题主页图话题详情页，对于每个话题，进行详细的介绍，并展示该话题内部的沸点列表。整个话题页的布局思想与沸点页一致，采取左中右的布局形式，同时将沸点发布框置于相对中央的位置，右侧则介绍该话题并展示了该话题包括的沸点数以及关注的用户数，同时，也会将在该话题下发表过沸点的用户一一列出，如图5-15所示：图5-15话题详情页图点击关注按钮，会关注该话题，该话题会出现在“我关注的话题”列表内部，如图5-16所示：图5-16关注话题图发表沸点，创建新的沸点，并发表到对应的话题下面，前端已经做了相应的数据验证，当点击发布按钮时，前端会分别验证沸点内容是否为空、上传的图片数量是否超出限制、上传的图片大小是否符合规范、图片格式是否支持，最重要的是是否已经选择了话题，如图5-17所示：图5-17发表沸点图发表文章页，可以使用富文本编辑器来编辑文章，因为本系统主要面向的用户群体都是开发者，所以就采用了富文本作为主要语言，由于文章的数据表定义了文章类型、文章形式、文章头图、文章标签等多个字段，所以前端也根据这种思路来进行页面布局，如图5-18所示：图5-18发表文章图通知系统，当用户点击我的沸点或者文章、申请好友、好友申请状态改变、文章被收藏时，都会有实时的通知提醒，这是通过Websocket实现的，当用户进行如上操作时，前端会实时的通知后端，旨在提供更好的用户体验，如图5-19所示：图5-19点赞通知图文章控制，在文章详情页，主人和访客都可以进行点赞文章、收藏文章等操作，当看到自己喜欢的文章时，可以将其添加到自定义的文件夹里面，方面日后阅读，如图5-20所示：图5-20收藏文章图在个人中心内部，可以编辑用户的个人信息等，这里是有权限区分的，如果是主人访问，则前端控制并暴露出“编辑个人信息”和“上传头像”按钮入口，用户可以访问特定的页面；如果是访客访问，那么就隐藏上述两个入口。另外，在上传头像时，也进行了图片的格式、大小等判断，如图5-21所示：图5-21上传头像图个人中心的足迹模块，记录了当前用户所有的行为，包括发表文章、发表沸点、点赞文章、点赞沸点、收藏文章、添加好友、关注话题、关注用户等，这是本系统的附加功能，可以有效地提升用户体验，如图5-22所示：图5-22个人足迹图个人中心的文章区块，可以很清晰的查看到自己发表的文章，并且这些文章会按照时间由近到远的顺序依次排列，方便用户搜寻，其实，此处还可以添加一个搜索功能，当用户创作的文章过多时，可以很便捷的检索到想要的文章，如图5-23所示：图5-23个人文章图个人中心的收藏区块，可以很清楚的看到用户创建的收藏夹，提供了两个入口，入口一为进入该收藏夹详情页，收藏夹详情页详尽的列出了用户已收藏的文章信息、并且可以编辑收藏夹，比如添加图片等；入口二为删除收藏夹，如图5-24所示：图5-24个人收藏图如果用户想查看自己关注了哪些人和话题，可以在个人中心的关注选项卡中找到，并且还可以进行关注操作，极大的方便了用户，如图5-25所示：图5-25个人关注图在设置模块的账号管理区块，用户可以自行绑定或者解绑第三方账号，包括微信、微博、Github、邮箱、手机号等，由于开发者重度依赖Github，所以提供一个Github登录入口非常重要，如图5-26所示：图5-26账号关联区块图于文章详情页，除了正常地评论，用户还可以进行加好友和关注操作，这也是本系统设计的唯一地加好友入口，当申请好友时，也可以附带备注信息，好友申请的界面如图5-27所示：图5-27申请好友弹窗图当用户接收到好友申请时，首页通知栏会实时的提示，此时用