【《一款移动端论坛系统设计》12000字（论文）】

、引言1.1课题背景与意义在世界的快速发展下，人们短时间内渡过了农业时代和工业时代，信息化是当今世界的主流趋势，信息时代主要以其信息技术为主体，能否快速获取信息并消化转化为实质性的利益成为了重中之重。Pc端能更好的观看操作，因其较为笨重与不便利。虽然现在笔记本正在往轻便、小巧的方向前进，但远没有达到移动端手机app的程度。Pc端与移动端都必不可少，移动端更应注重的是客户的观看体验和使用体验。以更简洁易懂的方式展现在用户面前，界面美观、简约大方、条理清晰。与传统PC端页面不一样的是，手机屏幕的尺寸更加小巧，在设计时要保证app的功能的完整性和合理性，又要保证功能性和实用性，更加注重人机交互。1.2国内外研究现状社区又被称为BBS论坛，是电子商务网站中的一种常见的功能，它为上网用户提供了一个自由的讨论区。用户可以根据需要在论坛上发表文章，提出问题并表达自己的观点，俗称为发帖子或者灌水。与此同时，上网的用户也可以在论坛中看到他人发表的文章，并能够对该文章进行回复[1]。最开始的时候，论坛也叫电子公告板(BulletinBoardSystem简称BBS)，在20世纪80年代到90年代中期，BBS是一种流行的潮流。最早的BBS系统出现在1978年的美国芝加哥的一套基于8080芯片的CBBS/Chicago(ComputerizedBulletinBoardSystem/Chicago)。国内在计算机方向发展较慢，在1992年出现了中国第一个BBS，北京的“长城”站，以此为起点，陆续出现惠多网、新华龙讯网、天堂资讯站。但是中国第一个真正意义上的互联网BBS是国家智能计算机中心的“曙光站”，建于1994年。随着硬件技术的进步，计算机价格下降，网民蜂拥进入互联网，论坛的发展也如同网络，迅速的发展壮大。各式各样的人都能找到自己感兴趣的论坛，在现如今短视频app的火热的背景下使得论坛的热度下降不少，但还有不少专业问题需要上论坛、问答社区平台来寻求答案，闲聊、灌水类的论坛已经不适应时代的发展无法生存下去。唯有持续创造高质量问答，可解决实际问题的论坛和问答社区平台才有可持续发展性。对于问答社区平台来说，简洁、实用、快捷的特点应该重点突出，也应当有着自己的个性化，突出自己的文化主题，可参照市面上已成功的案例，成为如知乎和CSDN一样的高质量问答社区平台。2、开发环境以及系统框架概述2.1系统开发环境以及使用工具概述基于vue的社区app和后台管理系统的开发整体采用vue+nodejs进行开发，nodejs使用的JavaScript对于前端开发人员更为熟悉，不必过多的学习另一种语言来支持开发。NodeJS 作为后端JavaScript的运行平台，所以并没有改变语言本身的任何特性，依旧是弱类型，基于作用域和原型链的。同时又将web前端中大家熟悉的思想，比如事件机制等迁移到了服务端的环境中。相较于其他的服务端编程语言，nodejs的主要特点如：异步非阻塞I/O、单线程、事件机制、跨平台[2]。Node.js是一个开源与跨平台的JavaScript运行时的环境，基于ChromeV8引擎，使得代码的运行速度有着极大的提升，因为V8引擎本身就做了很大的优化，又节约了开发成本。并提供了异步的I/O功能和一系列非阻塞库来支持事件循环（eventloop）的方式。让JavaScript可以运行在服务端，使得前端工程师们不但可以编写客户端的代码也可以编写服务端的代码，不被浏览器束缚住的编程语言将完成服务器和愈加复杂的浏览器客户端共享代码的想法。Nodejs被设计成单线程运行，这与现在比较常见的才用操作系统线程的并发模型形成鲜明对比，基于线程的网络效率相对低并且更难以使用。因为是单线程，所以不需要担心死锁的问题，几乎没有函数直接执行I/O操作，进程不会被阻塞。在其他系统中，总是有一个阻塞调用来启动时间循环。而在nodejs中，没有这种启动事件循环的调用，将事件循环当做一个运行时的结构而不是一个库，在执行时就进入事件循环，当没有更多操作时，退出事件循环。Webpack因为有着功能的强大与极强的用户体验，所以成为了最为优秀的打包工具之一，也是web开发者必须掌握的技能。前端技术发展极快，各种用以提高开发效率的新框架和新技术不断涌现，但是有一个共同的缺点--需要通过编译转换才可以正常运行。构建就是把源码转换成可发布到线上的js、css、HTML代码，在软件工程中属于自动化、工程化的思想在前端开发的体现，将构建流程化，自动执行一系列复杂的过，大幅度解放了前端开发者的生产力。Webpack通过loader转换文件，一切文件在webpack中都被视为模块，转换打包之后输出多个模块组合成的文件。图1-1webpack打包示意图Webpack专注于处理模块化的项目，可以做到开箱即用一步到位，但这也同样是它的缺点，只能用于模块化的项目。另一个优点在于活跃积极的社区，一个拥有活力的社区总是可以找到更为优异的开源扩展，为开发者提供方便。在模块化+新语言+新框架的时代趋势下，更多的团队在开发项目时会选择构建模块化项目，webpack只能用于模块化的缺点也将不算是缺点。Webpack的构建流程可分为三个阶段：初始化：开始构建，解析配置参数，加载plugin，初始化compiler对象，并开始执行编译。编译：从入口（entry）发出，针对每个module串行调用相应的loader转换内容，找到依赖的module，执行递归编译处理输出：对编译后的module组合成块（chunk），把chunk转换成文件，输出到文件系统开启监听模式之后流程将变成图1-2webpack监听构建流程图Vue-cli是一个基于vue.js进行快速开发的完整系统，又称vue脚手架。顾名思义，是一个用来快速搭建项目基础架构的工具，简化创建vue的过程。在vue-cli@3.0之后想要配置webpack需要在根目录下创建一个名为vue.config.js的文件，并且webpack里面的loader的配置已经默认配置完成，做出了极大的优化，方便了开发者。在开发工具上选择的vscode（VisualStudioCode），本款软件是一个免费开源的现代化轻量级代码编辑器，支持几乎所有主流语言，支持使用插件进行扩展，快捷键的合理设计。2.2系统开发框架概述koa2是继Express之后，node的又一个主流的web框架，由Express幕后的原班人马打造，相比于express，koa只保留了核心的中间件处理逻辑，去掉了路由、模版以及一些其他的功能，是一个基于node实现的web框架。使用async函数，将用户从“回调地狱”中解放出来，避免了异步嵌套。koa并没有自带、捆绑中间件，只是提供了一个更加优雅轻量的函数库。koa是一个基于node实现的web框架，koa通过封装原生的nodehttp模块，并暴露给中间件等调用函数。其最主要的核心是中间件机制洋葱模型。图2-1koa中间件洋葱模型从外层开始往内层执行，遇到next()后进入下一个中间件，当所有都执行完成后，开始返回，一次性执行中间件剩余部分，整体流程就是递归操作。相比Express使用的es5的语法规范，koa2采用了es6,7的新特性，最吸引人的地方就在于async/await的使用。async定义函数为异步操作，await后面放置的就是返回promise对象的一个表达式，当在async定义的函数里遇到await时，就像同步函数一样等待后面的promise对象执行完，拿到了promiseresolve的值并进行返回后，才会继续向下执行。写一个更像同步代码的异步代码，解决了promise的回调地狱。在多个异步函数的使用下，基本消失的回调函数，语法足够简洁提高了可读性。后台管理系统和webapp采用的都是基于MVVM的设计模式的vue框架进行开发。所谓的MVVM设计模式，就是model-view-viewModel的简称，本质上是对MVC的改良，由微软架构师KenCooper和TedPeters开发。图2-2MVVM设计模式Model层：请求的原始数据，就是从服务器返回回来的json数据，持久化抽象模型暂时放在model层。View层：视图展示，页面的展示，主要为了更方便ViewModel和model层的数据。ViewModel层：负责业务处理和数据转化，把view需要的数据处理，并对view层进行数据绑定、指令声明、事件绑定声明。在viewModel中数据变化，view层也会变化，声明了数据双向绑定之后，会动态监听数据的变化，值发生了改变，相应的viewModel中的数据也会自动更新。基于MVVM模式下的轻量级响应式框架结构的vue.js设计与应用研究，技术人员通过对vue.js框架的设计来实现对mvc模式的简化设计。这也是一种典型的设计方案，对软件开发的项目工程进行逻辑层次划分，将具体的项目数据、功能视图和逻辑思维操作进行合理化的分层划分设计[3]。使用MVVM可以做到分离视图（view）和模型（model），降低了代码耦合，提高了复用性。自动更新DOM，更加专注视图层的研发，View绑定到ViewModel，然后执行一些命令在向它请求一个动作。而反过来，ViewModel跟Model通讯，告诉它更新来响应UI。这样便使得为应用构建UI非常的容易。尝试获得MVC提供的功能性开发分离的两个优点，同时利用数据绑定的优势和通过绑定数据的框架尽可能接近纯应用程序模型。Vue是一个渐进式框架，主要表现在：声明式渲染--组件系统--客户端路由--大数据状态管理--构建工具，核心库只关心视图层的变化。其中数据双向绑定的基本原理是根据es6规范中的Object.defineProperty()函数实现数据劫持监听，在设置set和get函数之后，当属性被赋值的时候，被此属性绑定的DOM元素发生动态改变。这里的DOM元素发生改变并不是jQuery的手动获取DOM然后修改之后再度渲染，这样频繁的DOM元素的渲染，浏览器会从开始到结束的把DOM树执行一遍流程。即使计算机硬件一直在更新进步，操作DOM的代价依旧昂贵，难以避免出现页面卡顿，用户体验差。Vue中改用虚拟DOM（VirtualDOM），所谓的VirtualDOM就是为了避免大量了操作的DOM而把所有需要更新的diff内容保存在本地一个JS对象中，用对象属性来描述节点，最终映射到真实环境下。为了避免不必要的DOM操作，在映射过程中，会将虚拟节点与旧节点做对比，找到真正需要更新的节点，从而避免了操作其他不需要更新的DOM节点。构建单页面应用（singlepageapplication，简称：SPA）的核心就在于vue全家桶里面的vue-router。Vue的单页面应用是基于组件和路由，通过把组件映射到路由定义的路由路径上，通过访问不同的路由切换不同的组件，并且切换时只更新指定的容器中的组件而不是重新请求页面。Vue-router包含动态路由、路由嵌套和传递参数的功能，在开发中妥善使用可以构建单页面应用，很方便的完成组件间的传值。Vuex是vue的一种状态管理模式。这是vue对于vuex的官方定义，里面包括了数据源（state）、计算属性（getter）、同步方法（mutation）和异步方法（actions）。通常在中大型项目中使用，在小型项目中使用略显繁琐冗余。图2-2vuex运行原理图基于promise的HTTP客户端axios对vue官方推荐的HTTP库，可以用在浏览器和nodejs中，本质上就是对原生XHR的符合es6标准的promis的实现封装。其设计简洁、API简单、支持面广的优点使得axios在前端大受欢迎。JSONWebToken(JWT)isacompactclaimsrepresentationformatintendedforspaceconstrainedenvironmentssuchasHTTPAuthorizationheadersandURIqueryparameters.JWTsencodeclaimstobetransmittedasaJSON[RFC7159]objectthatisusedasthepayloadofaJSONWebSignature(JWS)[JWS]structureorastheplaintextofaJSONWebEncryption(JWE)[JWE]structure,enablingtheclaimstobedigitallysignedorintegrityprotectedwithaMessageAuthenticationCode(MAC)and/orencrypted.JWTsarealwaysrepresentedusingtheJWSCompactSerializationortheJWECompactSerialization.ThesuggestedpronunciationofJWTisthesameastheEnglishword"jot"[4].登陆使用JWT（JSONwebtoken）鉴权机制，由头部（header）、载荷（payload）和签证（signature）三部分组成。在每次登陆成功后向客户端返回一个可以用作身份验证的令牌（token），每次请求时在请求头带上token可以验证这次的请求是否是在登陆情况下发送的，不用反复向数据库对比验证密码是否正确。3.可行性分析可行性分析是每一个完善、成功的软件必不可少的一部分，在前期对项目进行考察与鉴定，根据市场的数据、同款产品的经营策略和未来的发展进行综合调查研究，判断项目的可行性和可行性的依据是否存在。应从技术、经济、操作和法律四个要点着手出发，务必研究点全面且详细，以便于明确开发时的方向和重要功能，减少弯路、错路的出现。3.1技术可行性交流社区app和后台管理系统都是基于前端最火热的vue框架开发。社区活跃、周边生态完善，官方文档明确，根据这些不用担心在开发时遇到bug找不到解决办法。用户量巨大的vue框架在前辈不断踩坑与开发者们写了众多的插件，稳定性得到了的保证。在前端不断发展的前提下，nodejs的出现让前端工作者不再依赖后端语言如：java、php就可通过本身就很熟悉的JavaScript来编写后端程序代码，MongoDB等非关系数据库更是进一步让前端可以自己创建后端代码。在中小型项目中，使用vue+node.js的配合能让前端工程师独立构建一个完整的程序，并且通过大厂如阿里、腾讯在此方向进行了不断尝试验证下，性能方面也有很好的保障，不必担心在高数据量下软件出现卡顿甚至的卡死的场面。3.2经济可行性此次项目的开发因为是个人毕业设计，人工费暂且不记。使用的工具和技术因为或开源或免费的关系，在技术方面使用的费用寥寥无几，并且是以非盈利的目的进行开发，运行也是在自己的笔记本上，所以在经济可行性上不做过多的说明。3.3操作可行性单页面应用在app上可以很好的展现和使用，导入mint的ui库可以提高用户的体验度，参照市场上现有app的界面操作或可实现与用户的良好交互，在开发时尽可能的从一个用户的角度去使用、改进交互。3.3法律可行性因为时非盈利性质，不会发生侵犯他人、集体、国家的利益，并没有侵权的问题。综上所述，本项目在要求不高的情况下，可行性可以得到保证。4、需求分析4.1系统功能模块分析本项目角色分为用户（user）和管理员（admin）两种，都可登陆后台管理系统和app。主要区别在于管理员登陆后台管理系统，可使用所有菜单内的功能，用户在登录后台管理系统时只拥有查看的权限，对于修改和删除方面做了相应的限制。在app方面只有登陆与未登录的区别，app总共拥有首页、消息、热门排行、个人中心四大模块。在未登录时，消息界面无法进入，个人中心的相应功能也无法使用，只有在登陆后才可以查看用户对应的信息。4.2数据流图及用例图根据前期定义，后台管理系统分为两个角色，在登陆验证后返回相应的角色信息，根据角色信息动态加载该角色拥有权限的菜单。管理员默认拥有所有菜单的操作权限，也可以通过菜单管理设置用户角色的权限。图4-1后台管理系统数据流图（顶层）而相应的每个角色在菜单中的操作权限也有不同，用户（user）默认只拥有查看的权限，在文章管理中多了一个修改的权限。如果要拥有更多的权限可以通过管理员（admin）在菜单管理上添加或者减少。根据数据流图，将后台管理系统分为用户，管理员，不同的角色用例图。以用户（user）登陆时的用例图：图4-2后台管理系统用户用例图以管理员身份进入后台管理系统时拥有所有菜单的操作权限，用例图：图4-3后台管理系统管理员用例图App只有登陆与未登录的区别，未做更多的角色判断，在未登录的情况下无法使用帖子操作功能，只有查看的功能。在登陆后可以进入消息界面，并且个人中心的相关功能也可以进行使用。5、软件设计与实现5.1软件前端功能设计后台管理系统前端采用的惯用的界面展示，主要的在于app的前端设计。App更多的是面向用户，干净简洁的界面、交互良好的操作更能吸引用户。做好前端功能设计是非常必要的。(1)首页模块：未登录也可以查看的首页模块，在基本上所有app的设计中，把首页展示给新用户看更加能吸引新用户的注册与加入。需要强制登陆才能查看的软件难以让人看到软件的好与不好，让用户产生不好的情绪，首先要做的就是将网站优秀的一面展示。首页模块包含了五个可供选择的分类，分别是：首页、提问、分享、建议、动态。默认进入的就是首页选项卡，显示的是所有类型数据的集合，其余的分别对应的是四个类型的数据，点击选项卡就可以切换到显示该类型帖子的页面，对于首页的初步设计，在以后功能增加会考虑是否增加显示数据。(2)登陆注册模块：由于存在非登录也可以查看数据，所以第一次进入并不是登陆界面。可以通过个人中心点击登陆按钮进入登陆界面，登陆界面除了必要的登陆表单以外，还有第三方登录的按钮，不过本次并没有将功能实现。如果没有账号的用户可以点击注册按钮进入注册页面进行用户注册，在注册成功后会跳转回登陆页面以便于登陆，无需再多点一步，优化了用户的操作体验，减少不必要的操作。(3)帖子详情模块：在首页点击帖子之后可以进入帖子详情，展示了该帖子的具体内容和其他用户的评论，对于没有登录的用户，无法进行评论、点赞和收藏功能，只有在登陆后这些功能才能使用。发帖者可以将满意的评论设为最佳答案，每个帖子只能拥有一个最佳答案，设置成功后本帖将不会显示设为最佳的按钮。当然发帖者也可以删除相应的恶意评论，使平台环境可以得到进一步的提升。每个用户也可以对自己满意的评论点赞，在热门模块会将获赞更多的一些评论进行排行展示。(4)发帖模块：在一个交流社区平台，发帖是一个最必要的功能。进入发帖模块的按钮会固定在首页的底部切换按钮的右上方，会对未登录的用户进行隐藏，无法点击进入发帖模块。登陆之后可以点击进入发帖页面，考虑到移动端比较难以进行复杂的发帖，目前发帖内容仅限于纯文字。对于一个完整的发帖功能来说，至少还需要图片的保存，功能会在之后慢慢完善。(5)分页功能：过多的数据一起加载会拖慢软件的运行速度，所以分页功能必不可少。在移动端上，下拉刷新和上拉加载是分页的一个很好的解决方案，使用mint-ui中的插件可以轻松实现，在下拉的时候进行数据的重新加载，上拉到底部的再次请求下一页的数据，并通过JavaScript代码加入数组通过vue的双向数据绑定更新视图展示数据。当没有数据可以加载时，在底部出现提示，告诉用户没有更多数据，优化用户体验，在没有数据可以展示的时候，显示空数据的页面。(6)热门排行榜：对很多年轻人来说，排行榜的排名不仅仅是单纯的排名，而是一种潮流趋势，设置一个热门排行榜可以有助于用户找到更好的文章，排行也可以帮助上榜的发贴者快速增长阅读量。排名的顺序本身提供了曝光率，同时也相应提高了用户的信任度。排行榜的出现也是用户希望平台提供一个权威的榜单，可以获取更为真实的数据，所以榜单的显示方式也要紧跟潮流。排行榜主要分为帖子、评论的相应数据最高的排序。图5-1帖子操作流程图5.2后台管理系统功能设计本项目的后台管理系统实现功能相对简单，仅完成文章内容管理、文章标签管理、用户管理、角色管理、菜单管理。文章内容管理和文章标签管理都属于文章管理模块内的子模块，内容管理可以修改或是删除帖子的相关信息。每个帖子可以添加相应的标签，标签可以在标签管理添加、删除和修改，用户（user）和管理员（admin）都可以进行查看，但是只有管理员（admin）有操作的权限，防止用户（user）的误操作和恶意操作。用户管理是对所有用户的管理操作，可以在这个模块修改、新增、删除每个用户，因为修改用户的角色信息会改变该用户的权限，用户（user）同样也只有查看的权限。角色管理可以创建一个角色。菜单管理主要做的就是为每个角色赋予相应的操作权限，此菜单只能由管理员（admin）进行操作，赋予另外用户菜单操作权限。角色管理和菜单管理只对管理员（admin）开放，其他用户无法查看。5.3系统数据库设计数据库是数据管理的有效技术，抽象来看就是一个电子化的文件柜，电子数据在里面分类存放，当需要时，按照相应的分类规则拿出数据。以统一的方式存储在一起，却又相互独立，可供多个用户同时使用。本项目使用的是非关系型数据库MongoDB，数据被分组存储在数据集里，称为一个集合（collection）。集合相当于关系型数据中的表（table），不同的是存储在集合里的数据不需要按照特定的数据结构来定义保存，可以将不同数据结构的数据保存在同一个集合内。集合内的一条数据被称为文档（document），文档是MongoDB里的基本数据单位，对应的是关系型数据库中的行，以键值对的方式存储。图5-2数据库E-R图下表是用户的基本属性信息，用户注册后生成一个文档存储在users的集合内，密码已经经过加密处理，不会明文存储在数据库中。表5-1users字段类型空默认注释_idObjectid否默认产生的idusernameString否用户名passwordstring否密码namestring否昵称reg_timestring否Now（）注册时间favsNumber否0积分GenderString否男性别RolesString否User角色PicString否头像MobileNumber否手机号码Reg_markString否‘这个用户并不个性’个性签名Is_vipstring否0是否VIP：0-否，1-是CountNumber否0签到次数StatusString否0账号状态：0-正常，1-禁言，2-封禁下表是发帖之后保存的帖子相关信息，通过uid保存发帖人的_id并关联user表，在查询的时候会将发帖人的信息一起返回显示。表5-2发帖信息表(post)字段类型空默认注释_idObjectid否默认产生的idUidString否用户idTitlestring否标题Contentstring否正文内容reg_timestring否Now（）发帖时间CatalogString否‘’帖子分类：‘’-全部、ask-提问、advise-建议，discuss-交流，share-分享，news-动态Is_endString否0是否结贴ReadsNumber否0阅读量AnswerNumber否0回复数下表为签到记录表，在第一次签到时创建，每次签到会更新数据，根据签到时间判断是否连续签到，或是今日是否签到。表5-3签到表(sign)字段类型空默认注释_idObjectid否默认产生的idUidString否用户idFavNumber否0积分reg_timestring否Now（）最后签到时间下表为菜单表，后台管理系统管理的菜单，保存所有菜单的信息。表5-4菜单表(menu)字段类型空默认注释_idObjectid否默认产生的idnamestring否菜单名pathstring否资源路径componentstring否前端组件hideInBreadNumber否在面包屑中是否隐藏，0-否1-是hideInMenuNumber否在菜单中是否隐藏，0-否1-是notCacheNumber否00-缓存1-不缓存iconstring是图标sortNumber是排列位置redirectstring是路由重定向childrenarray是子路由typestring是menumenu-菜单resource-资源->api接口operationsarray是[]资源目录，资源访问信息children为子路由信息，支持的属性与主路由一致下表为菜单表的嵌入表，保存该菜单所有的可以进行的操作和资源。表5-5资源表(operations)字段类型空默认注释opidstring否操作ID->uuidnamestring否资源名称typestring否资源类型，btn-按钮，api-资源类型pathstring否资源路径->api的请求路径regmarkstring否资源描述下表是权限表，menu字段保存了可以访问的菜单信息，登陆之后返回角色信息查询可以访问菜单信息，前端动态显示菜单。表5-6权限表(roles)字段类型空默认注释_idObjectId否默认产生的idnamestring否角色名descstring否角色描述menuarray是菜单操作权限->menu信息，menuIDmenu为子菜单信息，与菜单表对应一致5.4app界面各模块的实现5.4.1首页模块的功能实现进入app时，无论是否登陆都直接进入首页，未登录时发帖按钮不显示，在登陆之后右下角的发帖按钮才会出现。切换标签分类时将标签名传入后端查询到相关数据后进行展示。图5-3首页展示图数据查询主要逻辑代码，根据catalog的不同返回不同的数据给前端，做到分类展示的效果：图5-4首页MongoDB查询逻辑5.4.2帖子详情模块的功能实现当点击帖子进入可以查看帖子详情，并且在登陆后可以进行评论，发帖人可以对评论进行删除或设置为最佳答案。图5-5帖子详情查询帖子详情的主要代码如下，在每次请求该帖子的时候，需要给该帖子的阅读量加1，并且判断是否已经设置过最佳答案，最佳答案一个帖子只能有一个存在：图5-6帖子详情后端代码5.4.3发帖模块的功能实现通过点击首页的发帖按钮进入发帖页面，在输入标题后并选择了分类信息之后可以通过富文本编辑器编辑正文内容，点击发帖之后将正文通过处理后保存到MongoDB中。图5-7发帖界面主要代码如下，使用了quill-editor富文本插件，将内容通过双向绑定，点击发帖按钮触发click事件submit()，发送数据到后端进行保存：图5-8发帖界面前端代码5.4.4消息模块的功能实现当用户给帖子评论之后，会在消息界面通知用户，并展示出来。根据用户id查询到所有帖子id，再通过相应的评论表找到所有评论信息。MongoDB的populate可以将用户信息和帖子信息一起返回。图5-9评论消息通知主要代码如下：图5-10获取对当前用户发帖评论列表5.4.5发帖模块的功能实现通过开发热门排行榜可以有助于用户找到更好的文章，激起用户的胜负欲，更加积极的参与评论和发帖。在实际项目中是很有必要的一个功能。图5-11签到排行榜主要代码如下：图5-11获取签到次数最多用户5.4.2主页模块的功能实现未登录但是需要登录的用户可以进入主页点击登陆跳转至登陆页，没有账号的新用户也可以在登录页找到注册按钮点击跳转进行注册。在注册成功之后会回到登录页，减少了一步返回操作。图5-12个人主页（登陆状态）主要代码如下，因为在登录时已经将用户信息保存在localstorage内，在主页就可以直接从localstorage内拿去数据显示，在没有登录的情况下显示默认名称与头像：图5-12获取用户信息6、系统测试6.1测试概述在项目开发过程中，程序可能会出现一些问题，有些问题能够得到及时解决，有些问题则可能不易被发觉。因此，在开发过程中，需要对项目进行不断的测试工作，以便后续用户使用过程中能够拥有较好的体验感。测试的目的不是为了证明项目没有问题，与之相反，测试恰恰是为了找到尽可能多的错误。在社区APP的开发过程中，我根据用户需求分析对APP功能进行测试，尤其针对APP中代码逻辑复杂以及出错较多的部分反复进行测试，保证社区APP在项目使用过程中尽量减少报错，提升用户使用感。本项目主要采用的是黑盒测试，与关注软件逻辑的白盒测试相比，黑盒测试将软件看成一个黑色盒子，不注重软件的内部结构，根据软件的输入与输出结果来判断是否出错。它主要通过接口进行测试，能够检查不正确或者软件遗漏的功能。通过黑盒测试，测试者能够直观感受到项目中存在的不足并及时改正。但黑盒测试也有其局限性，不可能通过穷举的方式来验证软件功能是否完全正确，因此在测试过程中要尽可能选择易出错的数据对系统进行测试，提高测试效率。6.2可用性测试(1)游客登录使用：未登录用户能够正常浏览该项目的各个模块，能够对文章、评论、用户信息等进行查看，同时也能够查看热门排行榜。本项目力求在用户不登录的情况下也能够向用户提供尽可能多的权限，帮助用户发现更多优质文章，提高数据的真实性。除此之外，未登录用户也随时可以进行登录注册操作，实现登录用户可操作的其他功能。在项目测试过程中，主要对游客的浏览功能、登录注册功能进行测试，功能均能够实现，测试通过。(2)用户登录使用：登录用户除了可以实现与未登录用户相同的浏览查看功能外，还可以对文章信息进行修改、评论、点赞和收藏。同时，发布帖子的用户可以将自身所发布帖子中最满意的评论设置为最佳答案，也可以将恶意评论删除，在很大程度上减轻了管理员的负担。在测试中，主要针对登录用户的修改操作功能以及退出登录功能进行了测试。经测试，这些功能均能得到实现，测试通过。(3)管理员登录使用：本项目将管理员模块独立出来，管理员登录后，能够对所有帖子进行修改、删除，也能够对用户角色进行新增、修改、删除，赋予用户菜单操作权限。在管理员模块中，主要针对管理员特有的操作功能进行测试，在测试中，管理员的权限操作均能够实现，测试通过。表6-1测试用例用例名称测试用例预期结果测试结果游客浏览浏览项目中的文章、评论、用户信息、热门排行榜等能够对文章、评论、用户信息等进行查看，同时也能够查看热门排行榜。与预期结果一致游客注册只填写用户名/只填写密码/填写用户名已经存在注册失败与预期结果一致用户登录输入未注册的用户名和密码提示“用户名或密码错误”，登录失败与预期结果一致管理员登录输入普通用户的用户名和密码提示“用户名或密码错误”与预期结果一致管理员操作添加、修改和删除用户/帖子，对用户角色进行修改能够对用户/帖子进行添加、修改和删除操作，同时能够修改用户角色，为普通用户授权与预期结果一致6.3安全性测试安全性测试主要是为了保证管理员权限的唯一性，保证除管理员外，其他普通用户以及游客不能对本项目的用户进行添加、删除、修改操作，也不能随意修改其他用户的管理权限。通过对三个角色的权限操作进行测试，发现只有管理员能够实现这一系列操作，测试通过。6.4系统测试结果总结通过对本项目的不断测试，发现了许多之前没有注意过的问题，并对这些问题进行解决完善。随着测试次数的增加，测试的结果与预期结果的契合度不断提升，项目也在经历了不断地更新迭代后得到完善。虽然通过不断的测试，项目已经基本不存在明显缺陷，但代码的内部逻辑还不够清晰。在之后的开发及维护过程中，将会对项目进行更加细节的测试，尽可能多的找出项目中潜在的问题，加以解决，在最大程度上提高项目的准确性。7、结论以及展望7.1总结毕业设计作为检验学生大学四年的综合能力的一个考验，其重要性也可想而知。我认为毕业设计作为毕业前的最后一个需求项目，检验的是我们将大学中所学的理论知识融入到社会需要中的能力。因此，在前期选题工作上，我尤为谨慎。在确定了开发社区APP的选题之后，我认真查阅了许多资料，对当下热门的开发工具进行深入了解，最终选择采用vue+node.js对项目进行开发。在项目设计前期，我就对项目的需求功能进行了详细的分析，搭建了大体的界面框架，将用户角色大致分为游客、普通用户及管理员三类。尽管前期准备较为充足，但在项目开发的过程中，还是遇到了不少的困难。由于对node.js了解得不够深入全面，在前期的配置过程中遇到了不小的问题