| 标题 | 基于MVC设计模式的软件开发论坛的设计与实现 |
| 范文 | 张丽 黄晨怡 摘要：随着信息技术的发展，越来越多的人选择在网上获取知识。在这样的背景下，论坛已经成为当下最流行的社交方式。文章中论坛系统面向于软件开发人员，使用MVC设计模式分离业务逻辑与表示层。业务逻辑采用Java语言与MySQL数据库进行开发，表示层使用React前端框架，为用户搭建了一个界面友好，交互优雅的论坛系统。主要实现了用户注册登录、发布话题、回复话题、搜索话题和热门话题的功能。 关键词：论坛开发；MVC设计模式；React框架 中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）27-0058-04 1 背景 信息技术的爆炸式发展为我们呈现了一个截然不同的世界，讨论问题的网络论坛也成了当下最流行的社交方式。BBS英文全称是Bulletin Board System，中文翻译为电子公告板，具有信息更新快，互动性强的特点。针对特定人群建立的特定BBS成为目前网络论坛的中流砥柱，也就是现在俗称的Forum（论坛）。 该系统设计开发的软件开发论壇针对软件开发人员以及软件开发爱好者，为其提供一个交流平台，在这里可以提出问题、发表自己的看法、观点。 2 相关技术 该系统主要采用MVC设计模式实现页面Java Web技术作为后台，提供数据处理逻辑与数据接口，配合React和Ant Design实现简洁的界面与优雅的动态效果，最后使用Webpack模块打包器将应用程序需要的每个模块打包成一个bundle。基于以上技术决定使用MyEclipse作为开发工具，MySQL作为数据库，Tomcat作为应用服务器，Node.js环境下安装的Webpack打包模块，搭建该系统完整的开发环境。下面是使用技术的概要介绍。 2.1 MVC设计模式 大部分Web 应用程序都是用像 ASP、PHP 或者 CFML 这样的过程化语言来创建的，它们混合数据层代码，如数据库查询语句和表示层代码（如HTML），通常开发速度通常更快，但很难显示业务模型的外观或模型的可重用性，产品设计的灵活性很小，很难满足用户不断变化的需求[1]。 MVC设计模式，即把一个应用按照业务逻辑分为三层：模型、视图和控制分别对应Model层、View层、Controller层。这样分层虽然会增加一些额外的代码工作，但是能够很好地复用模型，体现出业务逻辑的，使应用的结构更清晰。它从根本上强制性地将业务逻辑与表示层代码分开，产品的应用通过模型可以得到更好的体现。 2.2 Webpack模块打包器 当前的网页功能越来越丰富，通常有很多复杂的JavaScript代码和数量庞大的依赖包，为了管理这些数据，前端社区涌现了许多实践方法：例如模块化、TypeScript、CSS预处理器等。但这些方法又需要额外的处理，所以就有了Webpack这类的模块打包机。它可以分析项目结构，将浏览器不能直接运行的拓展语言，转换和打包成浏览器可识别的格式。 该系统采用的React框架结合Webpack技术可以在编辑页面时实现热更新，实时浏览页面的更新，提高开发效率。系统完成后也用Webpack打包成整体项目，让整个项目结构更加清晰。 2.3 React（JavaScript类库） JavaScript是一种面向对象的脚本语言，也是Web开发中非常受欢迎的一门语言。它是一种新的动态语言，植根于世界各地数以百万计的互联网用户使用的Web浏览器，被用来增强网站和Web应用程序的交互性[2]。 React是一个JavaScript库，它可以轻松创建交互式用户界面，为应用程序中的每个状态设计简单的视图。当数据更改时，React 会根据更改高效地渲染组件。它提供了一个轻量级的虚拟DOM，通过这个虚拟DOM更新真正的DOM，并通过这个虚拟DOM管理真实DOM的更新。通过将当前DOM描述与先前DOM进行比较，使用diff算法计算更新真实DOM的最小步骤。 React还将HTML、JS结合起来构建组件，创建好拥有各自 state（状态）的组件，再将其组合构成更加复杂的UI界面。这使得每个组件都可组合、可重用、可维护，实现模块化开发。 该系统针对PC端和移动端做了适配，正是运用了React中组件复用的概念。开发时，只要先写好PC端的逻辑，在开发移动端时，就可以复用之前已经开发好的组件。 3 系统功能分析与设计 在需求分析方案的制定中，首先要明确系统编写的目的，不但要了解系统是为了解决什么问题，还要通过各种手段调查、了解用户需求，以用户的使用目的为参考依据进行需求分析[3]。 该章将通过系统功能分析和设计总结出准确的系统模型。 3.1 系统功能分析 经过分析，系统具有如下基本功能： 1） 注册登录：游客不注册仅能浏览帖子、搜索帖子。游客通过注册，填写用户名、密码、邮箱等信息注册成为普通用户。注册完成后，可以使用用户名、密码登录系统。 2） 用户信息管理：用户使用用户名、密码登录成功后，可以通过个人中心页面对密码、个人信息进行修改，还可以查看、删除自己发布的话题与回复。 3） 发布话题：用户登录后，可以点击“发布话题”按钮进入发布页面，在页面可以选择话题的类别，填写话题的标题、内容等。 4） 回复话题：用户登录后，在浏览话题时，可以对当前查看的话题进行回复。 5） 查询话题：用户在搜索框中输入关键词，点击搜索按钮，即可显示出与关键词相关的话题，点击查看搜索出来的话题详情。 6） 用户管理：用户注册成功后默认为普通用户。管理员登录后，可以对所有话题、回复进行删除操作。超级管理员登录后可管理用户的用户组，使普通用户成为管理员，也可以删除用户，删除用户后，此用户无法再登录系统。 7） 热门话题：按照话题回复量对话题进行排序，排序显示热门前十的话题。 8） 分页显示：在数据过多时，让数据分页显示。用户可以点击下一页、上一页来切换显示信息，也可以点击页码进行信息跳转。 3.2 系统设计 3.2.1 系统结构图 经过分析，该论坛的系统结构图如下。如图2所示。 功能模块是整个系统的核心部分，清晰的功能模块可以为系统开发节省许多不必要的时间[4]。如图2系统结构图所示，系统可以划分为三个模块，用户模块、话题模块、管理模块。其中用户功能模块中又有登录功能、注册功能、个人信息管理管理功能；话题模块中又分为发布话题、回复话题、查找话题和热门话题；管理模块中有超级管理员和管理员。 3.2.2 数据库设计 数据库设计是对计算机网络中的数据进行有效的集成。程序开发人员需要根据数据库的设计要求进行编码，并根据网站开发过程中的数据与数据的关系设计数据库，使数据库的设计能够满足系統操作的要求[5]。 通过上面的模块功能分析，梳理出该系统的数据库ER图，如图3所示。 ER图是实体联系图的一种，它对信息世界进行建模，能方便、准确地表示出信息世界中的常用概念以及它们之间的联系[6]。 由ER图可以看出每个用户都属于一个用户组，每个用户可以发布多个话题，每个话题又属于一个话题分类，用户回复话题的内容既与用户相关，又与话题关联。整个系统其实就是围绕一个核心功能：用户-发帖-回复。 4.2 用户模块实现 4.2.1 登录/注册功能 未注册用户点击左上角的登录/注册按钮选择注册即可进行注册，已注册用户选择登录可进行登录。如图5、6所示。 4.3 话题模块实现 4.3.1 发布话题 用户登录系统后点击左上角发布话题按钮即可进入发布页面，在发布页面可以选择发布的话题分类，并填写话题标题与话题内容。填写完毕后点击发布按钮即跳转到系统主界面，刚才发布的话题可在最新发布中可见。如图9。 4.3.3 搜索话题 用户可以通过导航栏右上角的搜索表单进行搜索，输入关键词，点击搜索按钮即可跳转到搜索结果界面，其中关键词的检索基于文章标题与文章内容，让用户能够更加准确地找到自己所需的内容。也可以在搜索界面点击发布话题，进行发布话题的后续操作。如图11所示。 4.3.4 热门话题 热门话题是根据每个话题的回复量进行排序显示排序前十个话题，如图12。 4.4 管理模块实现 4.4.1 超级管理员 系统默认有一位超级管理员，超级管理员登录后会显示管理中心按钮。点击管理中心按钮进入用户管理界面。超级管理员可以授予普通用户管理员权限，也可以删除用户。如图13所示。用户的用户组被设置成1，即为管理员。 4.4.2 管理员 管理员登录系统后，在查看话题详情时，话题及回复的右上角即会显示删除按钮。管理员可以对所有话题与回复进行删除操作，而普通用户仅能操作自己发布话题与回复。如图14所示。 5 系统测试 该次测试主要运用黑盒测试。黑盒测试主要是测试功能部件是否满足要求。它是一种根据软件需求，设计文档，模拟客户场景随系统进行的实际测试[7]。该系统在浏览器环境下，对系统中的功能进行测试，包括链接的测试、表单的测试等。链接的测试包括点击链接是否为真实链接，是否能够正常跳转显示数据；表单的测试包括表单数据的验证，表单数据提交后的验证等。针对以上的测试内容，编写测试用例，进行测试。下面是针对发布话题模块的测试用例和测试结果。 x 经过测试，系统基本符合需求。前期测试时部分功能还未完善，测试过后，对这部分功能进行调整完善后，也已符合要求。 6 结束语 该系统使用现今较流行的框架实现了软件开发论坛的基本功能，目前在浏览器运行良好，能够适配移动端。至此，该系统实现了全部预定功能，用户登录后能够管理个人信息，也能提出问题，与其他用户进行讨论与交流；超级管理员登录后，可以对用户的用户组进行管理，给用户赋予权限。虽然完成了基本功能，但是也有部分遗留问题，比如一些表单的前端验证判断还未能达到完美，用户信息的安全性也尚未考虑，这都是以后需要再多加完善的地方。 参考文献： [1] 张秀坤. MVC设计模式在Web开发中的应用研究[J]. 长春工程学院学报： 自然科学版， 2005， 6（3）：66-68. [2] Nicholas C， Zakas. JavaScript高级程序设计[M]. 北京： 人民邮电出版社， 2012. [3] 朱晓晶. 软件工程需求分析方案的制定研究[J]. 信息通信， 2015（6）：163-164. [4] 裴博杰. 大学生学习交流论坛的设计与实现[D]. 西安： 电子科技大学， 2013. [5] 王建国. 数据库设计在网站开发中的应用[J]. 山东农业工程学院学报， 2017， 34（4）：158-159. [6] 路正佳. 基于ER图的关系模型到XML转换技术研究[D]. 大连： 大连海事大学， 2009. [7] 胡静. 浅析黑盒测试与白盒测试[J]. 衡水学院学报， 2008， 10（1）：30-32. [通联编辑：谢媛媛] |
| 随便看 |
|
科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。