赞
踩
在信息化水平持续提升的今天,信息获取与分享至关重要。针对现有校园论坛系统技术落后、代码冗余高、维护难 度大等问题,设计并实现了一个基于B/S架构的校园论坛系统。该系统基于Vue + SpringBoot + MySQL搭建校园论坛系 统,使师生可以快速收集、了解以及分享相关信息,主要功能包括查看学校官网发布的通知公告、浏览用户分享的帖子和 发布个人文章。该系统使得师生可以更方便快捷获取信息,可以在某篇文章下表达想法进行讨论。另外,数据库存储模 式使得信息永久性保存,为后期维护或重构提供了便利。
关键词:B/S架构;校园论坛;Vue;SpringBoot;Web
在信息迅速扩散的时代,数字化越发普及,及时 获取信息的手段显得尤为重要 。传统的校园信息获 取方式基本上为“辅导员—班委通知—同学接收 ”架 构模式,但该传统信息传递方式效率低,已不能满足 人们需求 。因此,各学校亟须构建一个用于信息交流 平台的网络论坛。
目前,许多高校都拥有校园论坛系统,例如清华 大学的水木清华、北京大学的北大未名以及浙江大学 的梧桐树等 。但这些论坛系统建设过早,技术不够成 熟,系统界面与现在审美不符,代码冗余度高,维护困 难[1] 。另外,由于功能可以正常使用,技术人员只进行 系统的日常维护而不对系统进行技术升级,导致论坛 系统所用技术与现在主流技术不符[2]。
鉴于此,尽管现有校园论坛取得了一定成绩,但 仍存在一些问题 。针对现有校园论坛技术落后、信息 审核不严格、平台管理不到位等问题[3],本文设计并实 现一个基于B/S架构的校园论坛系统,为高校师生提 供更加便捷和高效的信息服务交流平台。
JavaScript是一种用于编写网页交互行为的脚本 语言 。它被广泛应用于网页开发中,用于实现动态和交互式的功能 。通过使用JavaScript,开发者可以实现 各种功能,例如表单验证、页面交互效果、数据处理和 展示、异步请求等 。它为网页提供了更丰富的用户体 验和动态性,使得网页变得更加生动和灵活。
Vue 是一套基于 JavaScript 开发的用于构建用户 前端页面的渐进式体系架构,核心是处理视图层,不 仅容易上手操作,并且便于与第三方库进行整合 。其 中,任何类型的应用程序接口都可以抽象为组件树, 可以使用小型、独立和通常可复用的组件构建大型应 用,从而减少重复开发。
SpringBoot 是由 Pivotal 团队提供的全新框架,它 继承了 Spring 框架原有的优秀特性 ,用来简化新 Spring应用的初始搭建和开发过程,并且使项目的配 置过程、部署过程和监控过程变得简洁高效。
MyBatis 是一种优秀的基于 Java 的持久层框架, 它可以将SQL语句和Java对象进行映射,是一个数据 访问框架 。MyBatis支持自定义SQL、存储过程以及高 级映射,可轻松地将结果集映射成Java对象,也可将 Java对象映射成表中的记录。
MySQL是一种开源的关系型数据库管理系统,广 泛用于存储和管理结构化数据,它是一种常用的数据库解决方案,适用于各种规模的应用程序和网站。
本文基于Vue 和SpringBoot 技术实现前后端分 离开发的校园论坛系统,通过MySQL 数据库将系统数 据存储至服务器端,采用B/S架构,实现用户可以随时 随地通过互联网访问论坛系统。其主要研究内容包 括:数据爬取、官方公告显示、用户发帖和用户回帖。
数据爬取,即通过Python编写的爬虫脚本,定时 向学校各个机构官网爬取通知公告信息,将通知公告 的主要信息,例如:标题、发布时间、发布内容,包含的 附件信息等数据存储至数据库中。通过爬虫算法保 证已经获取过的数据不再获取,因系统问题导致未获 取的数据在下一次爬虫工作时继续获取直到获取 成功。
将爬虫脚本获取到的数据显示在校园论坛的通 知公告板块下,用户可以便捷地访问到官网发布的不 同公告,用户可以对公告进行条件查询,例如:公告标 题、公告所属部门,公告发布时间,从而快速获取到自 己需要的数据。
用户可以在登录校园论坛系统之后,进行文章的 发布,文章包含的主要信息有文章标题、文章内容、文 章简介,文章封面图等。用户发帖是整个校园论坛系 统的关键功能之一,用户可以选择不同的板块进行文 章的发布,实现每篇文章都有类别,方便不同用户去 不同板块寻找内容。
用户可以在每一篇通知公告或文章下进行评论 和回复评论,评论功能是用户与用户之间交流的重要 功能,用户对公告的问题可以在评论区中进行评论, 其他老师或用户查看该用户的评论之后可以对该用 户的评论进行回复,同时后来者如果有相同的问题不 必再询问同样的问题,从而提升了学校与学生之间的 沟通效率。
系统可分为用户端和管理员端。其中,用户端用 于普通用户访问校园论坛系统(包括游客),管理员端 用于管理该系统的各个部分的数据显示与变更。系 统的整体流程设计如图1所示,其包含游客功能、用户 功能、管理员功能。
图 1 系统流程图
搜索栏:用户可以在搜索组件中键入需要搜索的 信息,系统将会在整个系统中检索用户输入的关键 字,然后返回相关的搜索数据;轮播公告:前台用户在 绝大多数页面可以看到后台系统发布的重要公告,用 户可以点击轮播公告进行查看;首页:首页分为轮播 图展示和最新信息以及最热信息展示;通知公告:通 知公告分为快速查看和全部公告两个子板块,快速查 看页面展示各个部门的最新十条公告信息,全部公告 页面展示所有的公告信息,同时用户可以通过筛选条 件进行数据的筛选;信息共享:用户在该板块下可以 看到其他用户发布信息共享类别有关文章;互帮互 助:用户在该板块下可以看到其他用户发布互帮互助 类别有关的文章;校园树洞:用户在该板块下可以看 到其他用户发布的跟校园树洞类别有关的文章,与其 他板块不同的是该板块下所有的文章信息均为匿名, 所有人都不知道该文章是谁发布的;发文章:用户可 以发布属于自己的文章,发布时可以选择文章的类 别,选择不同类别将会在论坛不同板块下进行展示; 个人信息:用户在该模块下可以修改个人信息,包括: 昵称、单位、简介、个人头像;账号设置:用户在该模块 下修改当前登录的账号的密码;我的帖子:用户在该 模块下可以快速浏览到自己发布的文章。
数据驾驶舱:在该模块下,通过数据可视化技术, 管理员可以清晰地观察到整个系统的数据,包括轮播 图数量、轮播公告数量、官网公告数量、信息共享文章 数量、互帮互助文章数量、校园树洞文章数量、用户登 录信息等;用户管理:在该模块下,管理员可以查看和 管理所有的用户信息,同时可以在后台进行用户的添加;板块管理:在该模块下,管理员可以启用和禁用校 园论坛系统通知公告模块下展示给前台用户浏览的 数据;公告管理:在该模块下,管理员可以启用和禁用 公告;文章管理:在该模块下,管理员可以编辑论坛文 章相关数据,启用和禁用文章;评论管理:在该模块 下,管理员可以查看和删除系统的评论数据;轮播管 理:在该模块下,管理员可以添加和修改前台系统首 页的轮播图数据,整个系统的轮播公告数据。
根据需求分析阶段和整体设计阶段的功能要求, 共设计了16个数据表,其中用户表如表1所示。
用户表用于保存前台用户账号的相关信息,通过 该表可以验证用户是否可以登录本系统,其中使用 uuid作为用户的唯一标识,通过uuid字段与其他表相 关联。
用户进入系统后,访问登录、注册页面。若已经 存在账号,直接输入账号、密码登录即可。若无账号, 点击“注册”选项卡进行注册的操作,按照顺序依次填 写用户名以及密码,注册成功后即可跳转到登录界 面,将已注册的账号密码输入后登录即可。注册、登 录流程图如图2所示。
用户在注册时,输入用户名、密码以及确认密码 即可进行注册。如果确认密码与密码输入不一致,系 统则会提示两次密码不一致,从而限制用户点击注册 按钮,输入符合要求时,点击注册按钮,则会提示注册 成功。注册成功后,点击“登录”选项卡返回登录界 面,输入已注册账号的用户名以及密码,点击“登录” 按钮后进行登录操作,操作提示成功后即可进入论坛 系统的主页,如图3所示。
图 3 注册和登录界面
点击导航栏的校内通知按钮即可展开校内通知 选择菜单栏,可选菜单为快速查看菜单和全部公告菜 单。如果对某条公告进行查阅后,系统将会记录该用 户已读该公告,此后该用户未读公告板块将不会再出 现该条公告信息,不过该条信息依旧会存在快速查看
图4公告显示界面
管理员登录后首次加载界面,主要展示了整个论坛系统的相关数据,采取数据可视化的方式,将相关 数据更友好地展示在管理员面前,使管理员可以更清 晰直观地了解论坛系统的相关数据。
针对基于B/S架构的校园论坛系统的设计与实 现,本文对其实现过程进行了详细的介绍和分析。本 文所述的校园论坛系统可以提供给在校师生一个资 源共享平台,师生可以在这个平台上进行交流与互动,有效地打破了不同专业之间的 信息壁垒,减轻相关人员的负担,提 升效率,为学生们带来便捷。在系 统设计过程中,传统系统框架设计 大多采用 MVC 模型进行设计
[1]李鹏飞.基于Web技术的校园论坛设计与实现[D].包头:内 蒙古科技大学,2019.
[2]潘梁静.基于ASP.NET的校园论坛网站的设计[J].科技信息, 2010(36):223,225.
[3]唐四化.基于ASP的校园论坛设计与实现[J].电脑编程技巧 与维护,2014(24):25,27.
[4]刘冰,贾子彦,孙华林.基于Vuejs 的高校档案管理系统[J].软 件,2022,43(9):70-73.
[5]朱启方,黄彩霞,范旭,等.基于SpringBoot和Vue 的多功能时 间管理系统的设计与实现[J].电脑知识与技术,2022,18(18):31-32,41.
[6]MATALLAHH,BELALEM G,BOUAMRANE K.Comparative study between the MySQL relational database and the Mon- goDB NoSQL database[J].International Journal of Sofrware Sci- ence and Computational Intelligence,2021,13(3):38-63.
[7]杨健,陈伟.基于Python的三种网络爬虫技术研究[J].软件工 程,2023,26(2):24-27,19.
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。