基于Spring Boot+VUE的新闻管理系统的设计与实现
目 录
随着互联网技术的飞速发展,信息传播速度不断加快,新闻媒体行业面临着机遇与挑战。在这样的背景下,传统新闻媒体逐渐向数字化转型,而新闻管理系统作为数字化新闻媒体的核心组成部分,其研发和应用显得尤为重要。为此,本文提出了一种基于Spring Boot+VUE的新闻管理系统,系统前端采用VUE框架,可以实现动态页面的生成、数据展示和交互功能,通过与后端Spring Boot框架的配合,可以提供更加友好、易用、交互性强的用户界面。
本文首先阐述了系统的研究背景和意义;然后对系统进行了可行性、功能性等分析;接着详细介绍了系统的设计原理和实现细节,主要包括系统架构、主要功能模块和数据库设计;最后对系统进行了部署和测试。通过本系统的的成功实施,有助于新闻媒体行业适应数字化时代的发展需求,也为其他类似系统的设计和实现提供了有益的参考。
关键词:新闻媒体;新闻管理系统;Spring Boot+VUE
Abstract
With the rapid development of Internet technology and the acceleration of information dissemination, the news media industry is facing opportunities and challenges. In this context, traditional news media is gradually transitioning towards digitization, and news management systems, as the core component of digital news media, are particularly important for their research and application. Therefore, this article proposes a news management system based on Spring Boot+VUE. The front-end of the system adopts the VUE framework, which can achieve dynamic page generation, data display, and interaction functions. By cooperating with the back-end Spring Boot framework, it can provide a more friendly, user-friendly, and highly interactive user interface.
This article first elaborates on the research background and significance of the system; Then, feasibility and functionality analyses were conducted on the system; Then, the design principles and implementation details of the system were introduced in detail, mainly including the system architecture, main functional modules, and database design; Finally, the system was deployed and tested. The successful implementation of this system helps the news media industry adapt to the development needs of the digital age, and also provides useful references for the design and implementation of other similar systems.
Keywords: News media; News management system; Spring Boot+VUE
1 绪论
1.1 研究背景
随着数字化时代的来临,新闻行业正面临着从传统纸质媒体向数字媒体的转型。这种转型要求新闻机构能够快速、准确地处理、发布和存储大量的新闻信息。随着Web技术的不断发展,如Java、Spring Boot和VUE等技术的成熟和广泛应用,为开发高效、稳定的新闻管理系统提供了技术支持。
Spring Boot是一个开源的Java框架,它提供了丰富的功能和工具,使得开发人员能够更快速、更简单地构建Web应用程序。VUE框架提供了丰富的组件和便捷的路由管理,使得用户界面更加友好,用户体验更加流畅。通过前端路由,可以实现单页面应用的效果,提高用户的使用便捷性。因此,采用Spring Boot框架和VUE框架开发新闻管理系统,可以大大提高开发效率,缩短开发周期,同时也保证了系统的稳定性和可靠性。
随着互联网技术的飞速发展,信息传播速度不断加快,新闻媒体行业面临着机遇与挑战。因此研究基于Spring Boot+VUE的新闻管理系统具有重要的意义,其意义主要体现在以下几个方面:
首先,可以满足多渠道新闻发布需求。现代化的新闻发布需要支持多种渠道,如网站、移动应用、社交媒体等。新闻管理系统可以很好地满足这些多样化的发布需求。
其次,可以提高新闻工作效率。通过新闻管理系统,新闻机构可以实现新闻稿件的在线编辑、审稿、发布和归档等工作,大大提高新闻工作的效率和准确性。
再次,可以提高新闻发布效率和质量。该系统可以实现新闻信息的快速发布和分类管理有效提高新闻的传播效果和覆盖范围。同时,通过自动化管理和数据分析,也可以提高新闻发布的质量和针对性。
最后,可以促进新闻行业的数字化转型。新闻管理系统的应用将推动新闻行业进一步向数字化转型,使新闻机构能够更好地适应数字化时代的挑战和机遇。
论文将分层次进行编排,除去论文摘要致谢文献参考部分,论文主要架构如下:
第一章:绪论。主要介绍了课题研究的背景,研究意义和论文结构与章节安排。
第二章:系统分析。主要从系统的用户、功能等方面进行需求分析。
第三章:系统总体设计。主要对系统框架、系统功能模块、数据库进行功能设计。
第四章:系统详细设计与实现。主要介绍了系统功能界面的实现。
第五章:系统测试。主要对系统的部分界面进行测试并对主要功能进行测试。
第六章:总结。主要对系统的设计工作进行总结。
2系统分析
系统分析是开发一个项目的先决条件,通过系统分析可以很好的了解系统的主体用户的基本需求情况,同时这也是项目的开发的原因。进而对系统开发进行可行性分析,通常包括技术可行性、经济可行性等,可行性分析同时也是从项目整体角度进行的分析。然后就是对项目的具体需求进行分析,分析的手段一般都是通过用户的用例图来实现。下面是详细的介绍。
2.1 可行性分析
(1)技术可行性
Spring Boot作为一种成熟的Java框架,具有丰富的功能和广泛的社区支持,使得开发过程更为简便和高效。VUE用于前端框架,能实现双向数据绑定,可以让开发者更轻松地管理和更新页面上的数据,同时具有可扩展性和良好的兼容性。因此,从技术层面分析是可行的。
(2)经济可行性
Spring Boot的自动配置功能可以根据应用程序的依赖和环境来进行自动配置,减少了大量的手动配置工作,可以降低开发成本;另外,Spring Boot的代码质量和可维护性较高,可以降低后期维护成本。因此,从经济角度分析是可行的。
基于Spring Boot+VUE的新闻管理系统可以为用户提供友好的用户界面,使得用户能够方便快捷地进行操作。同时,系统也可以为管理员提供强大的管理功能,使得管理员能够轻松地管理新闻资源,提高管理效率。因此,从操作角度分析是可行的。
系统流程是用一些特定的符合和线条来进行演示用户在使用系统时的过程,在进行系统分析的时候,业务流程可以帮助开发人员更好的理解业务,发现错误,完善系统。
用户通过登录才能访问系统及权限以内的功能,对此将实现各种应用及管理等功能,用户登录流程图如下图2-1所示。
![](https://i-blog.csdnimg.cn/direct/01eb98d884e54525ba83934e6bd33cff.png)
图2-1 登录流程图
2.2.2数据删除流程
如果系统里面存在一些没有用的数据,相关的管理人员还可以对这些数据进行删除,数据删除时流程图如下图2-3所示。
![](https://i-blog.csdnimg.cn/direct/9e3a5a381b084d7bacee5c93fe4f7faa.png)
图2-2 数据删除流程图
按照基于Spring Boot+VUE的新闻管理系统的角色,主要包括普用户和管理员这两大功能模块,各模块功能如下。
- 普通用户功能
- 注册登录:新用户可以通过注册成为系统用户,注册后可以用账号密码登录系统。
- 首页:首页界面是用户访问系统的入口页面,用户可以查看首页展示的轮播图,新闻资讯等信息。
- 交流论坛:用户可以发布论坛内容,可以查看交流论坛列表中某个论坛的详情并可以进行点赞、收藏和评论。
- 通知公告:用户可以查看系统发布的网站公告、关于我们、联系方式、网站介绍等信息。
- 新闻资讯:用户可以查看新闻资讯列表中某个新闻的详情并可以点赞、收藏和评论
- 我的:用户点击我的头像的下拉菜单“我的账户”进入页面可以修改个人资料和登录密码;点击“个人中心”进入页面可以查看和管理个人首页和收藏信息;点击“退出”即可退出系统登录。
- 管理员功能
- 登录:管理员可以通过在后台输入正确的账号和密码进行登录。
- 后台首页:管理员可以查看后台首页展示的相关信息。
- 系统用户:管理员可以查看系统用户(管理员、普通用户)列表中某个用户的详情,可以对系统用户信息进行查询、添加和删除操作。
- 系统管理:管理人员在“系统管理”这一菜单下对轮播图进行管控,可以对轮播图信息进行查询、添加和删除操作。
- 通知公告管理:管理员可以查看通知公告列表中某一通知公告的详情;可以对通知公告信息进行查询、添加和删除操作。
- 资源管理:管理员可以查看新闻资讯列表中某一资讯的详情和评论信息,可以查看新闻分类列表中某一分类的详情,可以对新闻资讯、新闻分类信息进行查询、添加和删除操作。
- 交流管理:管理员可以查看交流论坛列表中某一论坛的详情和评论信息,可以查看论坛分类列表中某一分类的详情,可以对交流论坛、论坛分类信息进行查询、添加和删除操作。
- 我的:管理员可以修改个人信息和登录密码;可以浏览网站首页;点击“退出”即可退出系统的登录。
2.4 系统用例分析
通过2.3功能的分析,得出了本系统的用例图:
普通用户用例图如下图2-3所示。
![](https://i-blog.csdnimg.cn/direct/a3f0d88577004389981619a7b6362105.png)
图2-3普通用户用例图
管理员用例图如下图2-4所示。
![](https://i-blog.csdnimg.cn/direct/faec15ded78c43de817a22c1ddacd26d.png)
图2-4 管理员用例图
本章主要通过对基于Spring Boot+VUE的新闻管理系统的可行性分析、流程分析、功能需求分析、系统用例分析,确定整个系统要实现的功能。同时也为系统的代码实现和测试提供了标准。
本章主要讨论的内容包括基于Spring Boot+VUE的新闻管理系统的架构设计、功能模块设计、数据库系统设计。
3.1 系统架构设计
本系统从架构上分为三层:表现层(UI)、业务逻辑层(BLL)以及数据层(DL)。
![](https://i-blog.csdnimg.cn/direct/622cf0693f6a4e6a9210761043f34046.png)
图3-1系统架构设计图
表现层(UI):又称UI层,主要完成本系统的UI交互功能,一个良好的UI可以打打提高用户的用户体验,增强用户使用本系统时的舒适度。UI的界面设计也要适应不同版本的系统以及不同尺寸的分辨率,以做到良好的兼容性。UI交互功能要求合理,用户进行交互操作时必须要得到与之相符的交互结果,这就要求表现层要与业务逻辑层进行良好的对接。
业务逻辑层(BLL):主要完成本系统的数据处理功能。用户从表现层传输过来的数据经过业务逻辑层进行处理交付给数据层,系统从数据层读取的数据经过业务逻辑层进行处理交付给表现层。
数据层(DL):由于本系统的数据是放在服务端的MySQL数据库中,因此本属于服务层的部分可以直接整合在业务逻辑层中,所以数据层中只有数据库,其主要完成本系统的数据存储和管理功能。
3.2 系统功能模块设计
3.2.1整体功能模块设计
在上一章节中主要对系统的功能性需求和非功能性需求进行分析,并且根据需求分析了系统中的用例。那么接下来就要开始对本系统的主要功能和数据库开始进行设计。基于根据前面章节的需求分析得出,其总体设计模块图如图3-1所示。
![](https://i-blog.csdnimg.cn/direct/945fb1a23cc44e8b9cfb2218105d9557.png)
图3-2 系统功能模块图
3.2.2系统用户模块设计
用户模块是系统中一个重要的功能模块,它涉及用户的注册、登录、个人信息管理等操作。在用户模块设计中,我们将定义用户数据的结构和属性,包括用户名、密码、邮箱等。同时,还需要实现用户注册、登录、修改密码等功能,并对用户输入进行验证和处理。用户模块的结构图如下图所示。如下图:
![](https://i-blog.csdnimg.cn/direct/03c87f3f757d4e6a84295b139a9fc751.png)
图3-3系统用户模块结构图
3.2.3资源管理模块设计
资源管理模块是本系统中的重要功能之一。该模块的设计旨在提供对新闻资讯的发布、编辑、删除和查看等管理功能,以便及时、准确地向系统用户发布相关的新闻资讯。其模块功能结构,具体的结构图如下:
![](https://i-blog.csdnimg.cn/direct/d81248ea88b54bc29910b9a859315476.png)
图3-4资源管理模块结构图
3.2.4评论管理模块设计
基于Spring Boot+VUE的新闻管理系统是一个交流性质的公开平台,用户可以对新闻资讯、论坛信息进行评论,增加用户之间的互动性。但是同时也为了更好的规范评论的内容,管理员可以删除不合适的评论,其模块功能结构图如下图3-4所示:
![](https://i-blog.csdnimg.cn/direct/2b92c9bee6dc414dbea0ff3d3f48cd9d.png)
图3-5评论管理模块结构图
3.3 数据库设计
数据库设计一般包括需求分析、概念模型设计、数据库表建立三大过程,其中需求分析前面章节已经阐述,概念模型设计有概念模型和逻辑结构设计两部分。
3.3.1 数据库概念结构设计
下面是整个基于Spring Boot+VUE的新闻管理系统中主要的数据库表总E-R实体关系图。
![](https://i-blog.csdnimg.cn/direct/80b15fe38c494990a3418599defb2756.png)
图3-6 系统总E-R关系图
3.3.2 数据库逻辑结构设计
通过上一小节中基于Spring Boot+VUE的新闻管理系统中总E-R关系图上得出一共需要创建很多个数据表。在此主要罗列几个主要的数据库表结构设计。
表access_token (登陆访问时长)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | token_id | int | 10 | 0 | N | Y | 临时访问牌ID | |
2 | token | varchar | 64 | 0 | Y | N | 临时访问牌 | |
3 | info | text | 65535 | 0 | Y | N | ||
4 | maxage | int | 10 | 0 | N | N | 2 | 最大寿命:默认2小时 |
5 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
6 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
7 | user_id | int | 10 | 0 | N | N | 0 | 用户编号: |
表article (文章:用于内容管理系统的文章)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | article_id | mediumint | 8 | 0 | N | Y | 文章id:[0,8388607] | |
2 | title | varchar | 125 | 0 | N | Y | 标题:[0,125]用于文章和html的title标签中 | |
3 | type | varchar | 64 | 0 | N | N | 0 | 文章分类:[0,1000]用来搜索指定类型的文章 |
4 | hits | int | 10 | 0 | N | N | 0 | 点击数:[0,1000000000]访问这篇文章的人次 |
5 | praise_len | int | 10 | 0 | N | N | 0 | 点赞数 |
6 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
7 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
8 | source | varchar | 255 | 0 | Y | N | 来源:[0,255]文章的出处 | |
9 | url | varchar | 255 | 0 | Y | N | 来源地址:[0,255]用于跳转到发布该文章的网站 | |
10 | tag | varchar | 255 | 0 | Y | N | 标签:[0,255]用于标注文章所属相关内容,多个标签用空格隔开 | |
11 | content | longtext | 2147483647 | 0 | Y | N | 正文:文章的主体内容 | |
12 | img | varchar | 255 | 0 | Y | N | 封面图 | |
13 | description | text | 65535 | 0 | Y | N | 文章描述 |
表article_type (文章分类)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | type_id | smallint | 5 | 0 | N | Y | 分类ID:[0,10000] | |
2 | display | smallint | 5 | 0 | N | N | 100 | 显示顺序:[0,1000]决定分类显示的先后顺序 |
3 | name | varchar | 16 | 0 | N | N | 分类名称:[2,16] | |
4 | father_id | smallint | 5 | 0 | N | N | 0 | 上级分类ID:[0,32767] |
5 | description | varchar | 255 | 0 | Y | N | 描述:[0,255]描述该分类的作用 | |
6 | icon | text | 65535 | 0 | Y | N | 分类图标: | |
7 | url | varchar | 255 | 0 | Y | N | 外链地址:[0,255]如果该分类是跳转到其他网站的情况下,就在该URL上设置 | |
8 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
9 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
表auth (用户权限管理)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | auth_id | int | 10 | 0 | N | Y | 授权ID: | |
2 | user_group | varchar | 64 | 0 | Y | N | 用户组: | |
3 | mod_name | varchar | 64 | 0 | Y | N | 模块名: | |
4 | table_name | varchar | 64 | 0 | Y | N | 表名: | |
5 | page_title | varchar | 255 | 0 | Y | N | 页面标题: | |
6 | path | varchar | 255 | 0 | Y | N | 路由路径: | |
7 | position | varchar | 32 | 0 | Y | N | 位置: | |
8 | mode | varchar | 32 | 0 | N | N | _blank | 跳转方式: |
9 | add | tinyint | 3 | 0 | N | N | 1 | 是否可增加: |
10 | del | tinyint | 3 | 0 | N | N | 1 | 是否可删除: |
11 | set | tinyint | 3 | 0 | N | N | 1 | 是否可修改: |
12 | get | tinyint | 3 | 0 | N | N | 1 | 是否可查看: |
13 | field_add | text | 65535 | 0 | Y | N | 添加字段: | |
14 | field_set | text | 65535 | 0 | Y | N | 修改字段: | |
15 | field_get | text | 65535 | 0 | Y | N | 查询字段: | |
16 | table_nav_name | varchar | 500 | 0 | Y | N | 跨表导航名称: | |
17 | table_nav | varchar | 500 | 0 | Y | N | 跨表导航: | |
18 | option | text | 65535 | 0 | Y | N | 配置: | |
19 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
20 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
表collect (收藏)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | collect_id | int | 10 | 0 | N | Y | 收藏ID: | |
2 | user_id | int | 10 | 0 | N | N | 0 | 收藏人ID: |
3 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
4 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
5 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
6 | title | varchar | 255 | 0 | Y | N | 标题: | |
7 | img | varchar | 255 | 0 | Y | N | 封面: | |
8 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
9 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
表comment (评论)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | comment_id | int | 10 | 0 | N | Y | 评论ID: | |
2 | user_id | int | 10 | 0 | N | N | 0 | 评论人ID: |
3 | reply_to_id | int | 10 | 0 | N | N | 0 | 回复评论ID:空为0 |
4 | content | longtext | 2147483647 | 0 | Y | N | 内容: | |
5 | nickname | varchar | 255 | 0 | Y | N | 昵称: | |
6 | avatar | varchar | 255 | 0 | Y | N | 头像地址:[0,255] | |
7 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
8 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
9 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
10 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
11 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
表forum (论坛)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | forum_id | mediumint | 8 | 0 | N | Y | 论坛id | |
2 | display | smallint | 5 | 0 | N | N | 100 | 排序 |
3 | user_id | mediumint | 8 | 0 | N | N | 0 | 用户ID |
4 | nickname | varchar | 16 | 0 | Y | N | 昵称:[0,16] | |
5 | praise_len | int | 10 | 0 | Y | N | 0 | 点赞数 |
6 | hits | int | 10 | 0 | N | N | 0 | 访问数 |
7 | title | varchar | 125 | 0 | N | N | 标题 | |
8 | keywords | varchar | 125 | 0 | Y | N | 关键词 | |
9 | description | varchar | 255 | 0 | Y | N | 描述 | |
10 | url | varchar | 255 | 0 | Y | N | 来源地址 | |
11 | tag | varchar | 255 | 0 | Y | N | 标签 | |
12 | img | text | 65535 | 0 | Y | N | 封面图 | |
13 | content | longtext | 2147483647 | 0 | Y | N | 正文 | |
14 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
15 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
16 | avatar | varchar | 255 | 0 | Y | N | 发帖人头像: | |
17 | type | varchar | 64 | 0 | N | N | 0 | 论坛分类:[0,1000]用来搜索指定类型的论坛帖 |
表forum_type (论坛分类)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | type_id | smallint | 5 | 0 | N | Y | 分类ID:[0,10000] | |
2 | name | varchar | 16 | 0 | N | N | 分类名称:[2,16] | |
3 | description | varchar | 255 | 0 | Y | N | 描述:[0,255]描述该分类的作用 | |
4 | url | varchar | 255 | 0 | Y | N | 外链地址:[0,255]如果该分类是跳转到其他网站的情况下,就在该URL上设置 | |
5 | father_id | smallint | 5 | 0 | N | N | 0 | 上级分类ID:[0,32767] |
6 | icon | varchar | 255 | 0 | Y | N | 分类图标: | |
7 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
8 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
表hits (用户点击)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | hits_id | int | 10 | 0 | N | Y | 点赞ID: | |
2 | user_id | int | 10 | 0 | N | N | 0 | 点赞人: |
3 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
4 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
5 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
6 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
7 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
表notice (公告)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | notice_id | mediumint | 8 | 0 | N | Y | 公告id: | |
2 | title | varchar | 125 | 0 | N | N | 标题: | |
3 | content | longtext | 2147483647 | 0 | Y | N | 正文: | |
4 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
5 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
表praise (点赞)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | praise_id | int | 10 | 0 | N | Y | 点赞ID: | |
2 | user_id | int | 10 | 0 | N | N | 0 | 点赞人: |
3 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
4 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
5 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
6 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
7 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
8 | status | bit | 1 | 0 | N | N | 1 | 点赞状态:1为点赞,0已取消 |
表regular_users (普通用户)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | regular_users_id | int | 10 | 0 | N | Y | 普通用户ID | |
2 | user_name | varchar | 64 | 0 | Y | N | 用户姓名 | |
3 | user_gender | varchar | 64 | 0 | Y | N | 用户性别 | |
4 | contact_phone_number | varchar | 16 | 0 | Y | N | 联系电话 | |
5 | examine_state | varchar | 16 | 0 | N | N | 已通过 | 审核状态 |
6 | user_id | int | 10 | 0 | N | N | 0 | 用户ID |
7 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
8 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表slides (轮播图)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | slides_id | int | 10 | 0 | N | Y | 轮播图ID: | |
2 | title | varchar | 64 | 0 | Y | N | 标题: | |
3 | content | varchar | 255 | 0 | Y | N | 内容: | |
4 | url | varchar | 255 | 0 | Y | N | 链接: | |
5 | img | varchar | 255 | 0 | Y | N | 轮播图: | |
6 | hits | int | 10 | 0 | N | N | 0 | 点击量: |
7 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
8 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
表upload (文件上传)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | upload_id | int | 10 | 0 | N | Y | 上传ID | |
2 | name | varchar | 64 | 0 | Y | N | 文件名 | |
3 | path | varchar | 255 | 0 | Y | N | 访问路径 | |
4 | file | varchar | 255 | 0 | Y | N | 文件路径 | |
5 | display | varchar | 255 | 0 | Y | N | 显示顺序 | |
6 | father_id | int | 10 | 0 | Y | N | 0 | 父级ID |
7 | dir | varchar | 255 | 0 | Y | N | 文件夹 | |
8 | type | varchar | 32 | 0 | Y | N | 文件类型 |
表user (用户账户:用于保存用户登录信息)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | user_id | mediumint | 8 | 0 | N | Y | 用户ID:[0,8388607]用户获取其他与用户相关的数据 | |
2 | state | smallint | 5 | 0 | N | N | 1 | 账户状态:[0,10](1可用|2异常|3已冻结|4已注销) |
3 | user_group | varchar | 32 | 0 | Y | N | 所在用户组:[0,32767]决定用户身份和权限 | |
4 | login_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 上次登录时间: |
5 | phone | varchar | 11 | 0 | Y | N | 手机号码:[0,11]用户的手机号码,用于找回密码时或登录时 | |
6 | phone_state | smallint | 5 | 0 | N | N | 0 | 手机认证:[0,1](0未认证|1审核中|2已认证) |
7 | username | varchar | 16 | 0 | N | N | 用户名:[0,16]用户登录时所用的账户名称 | |
8 | nickname | varchar | 16 | 0 | Y | N | 昵称:[0,16] | |
9 | password | varchar | 64 | 0 | N | N | 密码:[0,32]用户登录所需的密码,由6-16位数字或英文组成 | |
10 | | varchar | 64 | 0 | Y | N | 邮箱:[0,64]用户的邮箱,用于找回密码时或登录时 | |
11 | email_state | smallint | 5 | 0 | N | N | 0 | 邮箱认证:[0,1](0未认证|1审核中|2已认证) |
12 | avatar | varchar | 255 | 0 | Y | N | 头像地址:[0,255] | |
13 | open_id | varchar | 255 | 0 | Y | N | 针对获取用户信息字段 | |
14 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
15 | vip_level | varchar | 255 | 0 | Y | N | 会员等级 | |
16 | vip_discount | double | 11 | 2 | Y | N | 0.00 | 会员折扣 |
表user_group (用户组:用于用户前端身份和鉴权)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | group_id | mediumint | 8 | 0 | N | Y | 用户组ID:[0,8388607] | |
2 | display | smallint | 5 | 0 | N | N | 100 | 显示顺序:[0,1000] |
3 | name | varchar | 16 | 0 | N | N | 名称:[0,16] | |
4 | description | varchar | 255 | 0 | Y | N | 描述:[0,255]描述该用户组的特点或权限范围 | |
5 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
6 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
7 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
8 | register | smallint | 5 | 0 | Y | N | 0 | 注册位置: |
9 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
10 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
3.4本章小结
整个基于Spring Boot+VUE的新闻管理系统的需求分析主要对系统总体架构以及功能模块的设计,通过建立E-R模型和数据库逻辑系统设计完成了数据库系统设计。
4 系统详细设计与实现
4.1普通用户功能模块
4.1.1用户注册界面
用户注册界面用于新用户进行账号注册,用户需要填写必要的个人信息并选择合适的用户名和密码。注册界面应该进行输入验证和数据格式检查,确保用户提供有效的信息。系统会对输入的信息进行验证,验证通过后即可完成注册。其界面展示如下图4-1所示。
![](https://i-blog.csdnimg.cn/direct/f36dde4be9124e80bf996727bc79ae51.png)
图4-1用户注册界面图
注册代码如下:
/**
* 注册
* @param user
* @return
*/
@PostMapping("register")
public Map<String, Object> signUp(@RequestBody User user) {
// 查询用户
Map<String, String> query = new HashMap<>();
Map<String,Object> map = JSON.parseObject(JSON.toJSONString(user));
query.put("username",user.getUsername());
List list = service.selectBaseList(service.select(query, new HashMap<>()));
if (list.size()>0){
return error(30000, "用户已存在");
}
map.put("password",service.encryption(String.valueOf(map.get("password"))));
service.insert(map);
return success(1);
}
用户登录界面用于已注册用户进行账号登录,用户需要输入正确的用户名和密码才能成功登录系统。登录界面应对用户的输入进行验证,并提供密码找回的选项。其界面如下图4-2所示。
![](https://i-blog.csdnimg.cn/direct/f0e87df8cdd64735b871a362a8bf1d9e.png)
图4-2用户登录界面图
登录代码如下:
/**
* 登录
* @param data
* @param httpServletRequest
* @return
*/
@PostMapping("login")
public Map<String, Object> login(@RequestBody Map<String, String> data, HttpServletRequest httpServletRequest) {
log.info("[执行登录接口]");
String username = data.get("username");
String email = data.get("email");
String phone = data.get("phone");
String password = data.get("password");
List resultList = null;
Map<String, String> map = new HashMap<>();
if(username != null && "".equals(username) == false){
map.put("username", username);
resultList = service.selectBaseList(service.select(map, new HashMap<>()));
}
else if(email != null && "".equals(email) == false){
map.put("email", email);
resultList = service.selectBaseList(service.select(map, new HashMap<>()));
}
else if(phone != null && "".equals(phone) == false){
map.put("phone", phone);
resultList = service.selectBaseList(service.select(map, new HashMap<>()));
}else{
return error(30000, "账号或密码不能为空");
}
if (resultList == null || password == null) {
return error(30000, "账号或密码不能为空");
}
//判断是否有这个用户
if (resultList.size()<=0){
return error(30000,"用户不存在");
}
User byUsername = (User) resultList.get(0);
Map<String, String> groupMap = new HashMap<>();
groupMap.put("name",byUsername.getUserGroup());
List groupList = userGroupService.selectBaseList(userGroupService.select(groupMap, new HashMap<>()));
if (groupList.size()<1){
return error(30000,"用户组不存在");
}
UserGroup userGroup = (UserGroup) groupList.get(0);
//查询用户审核状态
if (!StringUtils.isEmpty(userGroup.getSourceTable())){
String res = service.selectExamineState(userGroup.getSourceTable(),byUsername.getUserId());
if (res==null){
return error(30000,"用户不存在");
}
if (!res.equals("已通过")){
return error(30000,"该用户审核未通过");
}
}
//查询用户状态
if (byUsername.getState()!=1){
return error(30000,"用户非可用状态,不能登录");
}
String md5password = service.encryption(password);
if (byUsername.getPassword().equals(md5password)) {
// 存储Token到数据库
AccessToken accessToken = new AccessToken();
accessToken.setToken(UUID.randomUUID().toString().replaceAll("-", ""));
accessToken.setUser_id(byUsername.getUserId());
Duration duration = Duration.ofSeconds(7200L);
redisTemplate.opsForValue().set(accessToken.getToken(), accessToken,duration);
// 返回用户信息
JSONObject user = JSONObject.parseObject(JSONObject.toJSONString(byUsername));
user.put("token", accessToken.getToken());
JSONObject ret = new JSONObject();
ret.put("obj",user);
return success(ret);
} else {
return error(30000, "账号或密码不正确");
}
}
4.1.3首页界面
首页界面是用户访问系统的入口页面,它应该展示平台的主要功能和特色。系统首页以上中下的布局进行展示,上方是系统的导航栏,中间是轮播图,下面是新闻资讯等信息。其界面展示如下图4-3所示。
![](https://i-blog.csdnimg.cn/direct/99ec52af0d60403c8a37bd8a96bf7aa8.png)
图4-3 首页界面图
用户可以查看交流论坛列表中某个论坛的详情并可以进行点赞、收藏和评论;点击“发布内容”进入页面填写标题、分类、正文等信息后点击“发表内容”即可完成论坛的发布。其界面如下图4-4所示。
![](https://i-blog.csdnimg.cn/direct/137685f52d994e2e94df1c1e9d72b9a5.png)
图4-4 交流论坛界面图
用户点击导航栏的“通知公告”进入页面可以查看系统发布的网站公告、关于我们、联系方式、网站介绍等信息。点击网站公告进入页面可以查看该公告的详细信息。其界面如下图4-5所示。
![](https://i-blog.csdnimg.cn/direct/87a57b95f7754697a97bfc6e471c7816.png)
图4-5 通知公告界面图
用户可以查看新闻资讯列表中某个新闻的详情并可以点赞、收藏和评论;支持通过关键字搜索、局部搜索等方式查找新闻资讯信息。其界面如下图4-6所示。
![](https://i-blog.csdnimg.cn/direct/122e1347a9414541bf4861496682c5dc.png)
图4-6 新闻资讯界面图
用户点击我的头像的下拉菜单“个人中心”进入页面可以查看和管理个人首页和收藏信息。点击“收藏”进入页面可以查看或删除收藏列表信息。其界面如下图4-7所示。
![](https://i-blog.csdnimg.cn/direct/c39810fd4ac449bb91124c7a63564a08.png)
图4-7个人中心界面图
4.2管理员功能模块
管理员点击我的头像的下拉菜单“修改密码”进入页面填写原密码、新密码、确认新密码信息后点击“提交”,系统会对输入的信息进行验证,验证通过后即可完成修改,修改后可以用新密码登录系统。其界面如下图4-8所示。
![](https://i-blog.csdnimg.cn/direct/85468da4a24e4301a40fb989ccf40a0a.png)
图4-8修改密码界面图
管理员可以查看系统用户(管理员、普通用户)列表中某个用户的详情,可以对系统用户信息进行查询、添加和删除操作。其界面如下图4-9所示。
![](https://i-blog.csdnimg.cn/direct/ef1296a707fb486fad660ad989c2011a.png)
图4-9系统用户界面图
添加的代码如下:
@PostMapping("/add")
@Transactional
public Map<String, Object> add(HttpServletRequest request) throws IOException {
service.insert(service.readBody(request.getReader()));
return success(1);
}
public Map<String, Object> addMap(Map<String,Object> map){
service.insert(map);
return success(1);
}
删除的代码如下:
@RequestMapping(value = "/del")
@Transactional
public Map<String, Object> del(HttpServletRequest request) {
service.delete(service.readQuery(request), service.readConfig(request));
return success(1);
}
public void delete(Map<String,String> query,Map<String,String> config){
QueryWrapper wrapper = new QueryWrapper<E>();
toWhereWrapper(query, "0".equals(config.get(FindConfig.GROUP_BY)),wrapper);
baseMapper.delete(wrapper);
log.info("[{}] - 删除操作:{}",wrapper.getSqlSelect());
}
管理人员在“系统管理”这一菜单下对轮播图进行管控,可以对轮播图信息进行查询、添加和删除操作。其界面如下图4-10所示。
![](https://i-blog.csdnimg.cn/direct/0a4caa735d3b4535964472b9c4a64791.png)
图4-13系统管理界面图
图片上传的代码如下:
@PostMapping("/upload")
public Map<String, Object> upload(@RequestParam("file") MultipartFile file) {
log.info("进入方法");
if (file.isEmpty()) {
return error(30000, "没有选择文件");
}
try {
//判断有没路径,没有则创建
String filePath = System.getProperty("user.dir") + "/src/main/resources/static/";
File targetDir = new File(filePath);
if (!targetDir.exists() && !targetDir.isDirectory()) {
if (targetDir.mkdirs()) {
log.info("创建目录成功");
} else {
log.error("创建目录失败");
}
}
String fileName = file.getOriginalFilename();
File dest = new File(filePath + fileName);
log.info("文件路径:{}", dest.getPath());
log.info("文件名:{}", dest.getName());
file.transferTo(dest);
JSONObject jsonObject = new JSONObject();
jsonObject.put("url", "/api/upload/" + fileName);
return success(jsonObject);
} catch (IOException e) {
log.info("上传失败:{}", e.getMessage());
}
return error(30000, "上传失败");
}
管理员可以查看通知公告列表中某一通知公告的详情;可以对通知公告信息进行查询、添加和删除操作。其界面如下图4-11所示。
![](https://i-blog.csdnimg.cn/direct/5db85816cc3948aa878b737fef16b1c6.png)
图4-11通知公告管理界面图
管理员可以查看新闻资讯列表中某一资讯的详情和评论信息,可以查看新闻分类列表中某一分类的详情,可以对新闻资讯、新闻分类信息进行查询、添加和删除操作。其界面如下图4-12所示。
![](https://i-blog.csdnimg.cn/direct/4e14fb02bfd745679102ca33283bc9c4.png)
图4-12资源管理界面图
管理员可以查看交流论坛列表中某一论坛的详情和评论信息,可以查看论坛分类列表中某一分类的详情,可以对交流论坛、论坛分类信息进行查询、添加和删除操作。其界面如下图4-13所示。
![](https://i-blog.csdnimg.cn/direct/8e85cf2b14bd43908b15102fbf321941.png)
图4-13交流管理界面图
5系统测试
系统测试的目的是确保系统的功能完整、性能稳定,并验证系统是否符合预期的设计和需求。通过系统测试,可以发现和修复潜在的错误和缺陷,提高系统的质量和可靠性。同时,系统测试还可以评估系统在不同条件下的性能表现,包括并发性能、响应时间和容错能力等。通过全面的系统测试,可以确保系统在正式上线前达到高品质的状态。
5.2 测试用例
系统测试包括:用户登录功能测试、新闻资讯查看功能测试、轮播图添加功能测试、密码修改功能测试,如表5-1、5-2、5-3、5-4所示:
用户登录功能测试:
表5-1 用户登录功能测试表
测试用例编号 | 测试描述 | 预期结果 | 实际结果 | 是否通过 |
TC001 | 使用正确的用户名和密码进行登录 | 成功登录系统,跳转到用户首页 | 登录成功,跳转到用户首页 | 通过 |
TC002 | 使用不存在的用户名进行登录 | 显示错误提示信息:用户名不存在 | 显示错误提示信息:用户名不存在 | 通过 |
TC003 | 使用正确的用户名和错误的密码进行登录 | 显示错误提示信息:密码错误 | 显示错误提示信息:密码错误 | 通过 |
TC004 | 不输入用户名和密码直接点击登录按钮 | 显示错误提示信息:用户名和密码不能为空 | 显示错误提示信息:用户名和密码不能为空 | 通过 |
新闻资讯查看功能测试:
表5-2 新闻资讯查看功能测试表
测试用例编号 | 测试描述 | 预期结果 | 实际结果 | 是否通过 |
TC001 | 打开新闻资讯页面,检查是否能够正确展示新闻资讯列表信息 | 新闻资讯列表显示正确 | 新闻资讯列表显示正确 | 通过 |
TC002 | 点击新闻资讯查看按钮,检查是否能正常打开页面 | 新闻资讯详情页面显示正确 | 新闻资讯详情页面显示正确 | 通过 |
TC003 | 检查新闻资讯搜索功能 | 根据关键字搜索到相关新闻资讯并正确展示 | 根据关键字搜索到相关新闻资讯并正确展示 | 通过 |
管理员添加轮播图信息界面测试:
表5-3 管理员添加轮播图信息界面测试表
测试用例编号 | 测试描述 | 预期结果 | 实际结果 | 是否通过 |
TC001 | 使用合法的信息添加一个新的轮播图信息 | 轮播图信息成功添加到系统 | 轮播图信息成功添加到系统 | 通过 |
TC002 | 使用已存在的轮播图名称添加一个轮播图信息 | 显示错误提示信息:轮播图名称已存在 | 显示错误提示信息:轮播图名称已存在 | 通过 |
TC003 | 添加轮播图信息时不输入必填信息 | 显示错误提示信息:必填字段不能为空 | 显示错误提示信息:必填字段不能为空 | 通过 |
TC004 | 使用不存在的关键字进行搜索 | 搜索结果为空 | 搜索结果为空 | 通过 |
表5-4密码修改功能测试表
测试用例编号 | 测试描述 | 预期结果 | 实际结果 | 是否通过 |
TC001 | 输入正确的原密码和新密码进行修改 | 密码成功修改 | 密码成功修改 | 通过 |
TC002 | 输入错误的原密码和新密码进行修改 | 显示错误提示信息:原密码错误 | 显示错误提示信息:原密码错误 | 通过 |
TC003 | 不输入原密码和新密码直接点击修改按钮 | 显示错误提示信息:密码不能为空 | 显示错误提示信息:密码不能为空 | 通过 |
5.3 测试结果
通过编写基于Spring Boot+VUE的新闻管理系统的测试用例,已经检测完毕系统测试包括:用户登录功能测试、新闻资讯查看功能测试、轮播图添加功能测试、密码修改功能测试,通过这四大模块为基于Spring Boot+VUE的新闻管理系统的设计与实现的后期推广运营提供了强力的技术支撑。
在基于Spring Boot+VUE的新闻管理系统开发之前,需要先对用户的具体需求进行分析。包括系统的可行性分析、功能需求分析以及其他需求等。在可行性分析过程中,对系统实现的技术性、经济性等方面进行了分析。总体上证明了系统实施的可行性。
本文总结了基于Spring Boot+VUE的新闻管理系统开发背景与意义,然后阐述了系统的具体业务需求,并根据系统需求对系统结构以及功能模块等进行了详细地设计,将整个系统划分为多个不同的功能模块。在分析系统功能需求时,对整个系统的总体架构以及功能模块等进行了分析,并选择合适的系统开发技术完成了对各个模块的开发工作。系统开发完成之后进行了部署,同时进行了系统的测试过程,通过测试证明了系统在功能以及性能等方面都达到了预期的要求,具有较高的稳定性与可靠性。
[1]修健.智慧交通管理信息系统的设计[J].集成电路应用,2024,41(02):298-299.
[2]姜一波.基于SpringBoot+Vue的在线考试系统设计与实现[J].无线互联科技,2023,20(23):68-71.
[3]张豪,朱石磊,胡建华等.基于B/S架构的校园论坛系统的设计与实现[J].电脑知识与技术,2023,19(33):32-35.
[4]傅婷婷.全媒体新闻生产管理系统的设计与实现[J].广播与电视技术,2023,50(09):77-81.
[5]银莉,杜啸楠.基于SpringBoot和Vue的校园积分系统的设计与实现[J].集成电路应用,2023,40(07):414-415.
[6]蒋先梅.基于MVC模式的新闻管理系统的设计与实现[J].无线互联科技,2023,20(11):77-79.
[7]梁宽宏.基于MVC架构的校园新闻发布管理系统[J].电子世界,2021,(18):182-183.
[8]闫慧珍.基于数据爬取的新闻宣传信息系统的设计与实现[D].中北大学,2021.
[9]牛怀岗,林关成.基于SSM框架的新闻发布管理系统设计与实现[J].现代电子技术,2020,43(21):127-131.
[10]黄赛英.基于Springboot的医院档案管理系统设计[J].集成电路应用,2023,40(11):384-385.
[11]刘佳乐,赵雨,厚露露等.基于Java Web的学生信息管理系统[J].现代信息科技,2023,7(19):21-24.
[12]戴建成,王华,范玉婷.基于SpringBoot+VUE的高校廉政档案管理系统设计与实现[J].产业与科技论坛,2023,22(21):58-60.
[13]张晨.基于Java Web的反序列化信息安全漏洞挖掘研究[J].成都航空职业技术学院学报,2022,38(03):50-53.
[14]任健,兰全祥.类型转换在JavaWeb中的应用浅析[J].信息技术与信息化,2022,(07):125-128.
[15]黄丽萍.基于Java的Web软件程序框架分层设计探讨[J].信息记录材料,2022,23(07):74-76.
[16]金斗.Web应用高并发下的负载均衡研究与优化[D].长江大学,2022.
[17]Liang C .School Vehicle Management System Based on JAVA Language[J].Academic Journal of Computing Information Science,2023,6(9):
[18]Yang Y .Design and Implementation of Student Information Management System Based on Springboot[J].Advances in Computer, Signals and Systems,2022,6(6):
[19]Sunday O B ,Nduka O S . MySQL Database Server: Deploying Software Application to Enhance Visibility and Accountability [J]. Current Journal of Applied Science and Technology, 2023, 42 (4): 16-23.
[20]崔臣,宋甲旭.基于Spring Boot的校园二手交易系统研究[J].无线互联科技,2023,20(18):31-34.
首先,我要感谢我的论文指导老师。在论文完成的整个过程中,指导老师始终给予我无微不至的关爱与指导。在论文写作的过程中,导师那耐心细致的指导,以及提出的具有建设性的意见,都给予了我极大的帮助,让我受益匪浅。导师严谨的治学态度、敬业精神以及高水平的教学能力,都给我树立了追求卓越的典范,这对我以后的人生道路和学业成就都产生了极大的积极影响。
此外,我还要感谢我班的同学们,他们既是我的同窗好友,又是我的良师益友。正是由于你们的支持和关怀,使得我在大学期间的学习和生活都变得异常充实。感谢那些在大学期间给予我帮助的所有老师和同学们,是你们给予了我在学业道路上的前进动力。
当然,我也不能忘记我的父母,是他们用无私的爱抚养我成人。你们的养育之恩我将永生难忘,将来我一定会用我的成绩回报你们。在成长的道路上,我会不断努力,不负众望,用实际行动来回报你们对我的期望。
请关注点赞+私信博主,免费领取项目源码