目 录
随着互联网技术的飞速发展,Web应用已经成为人们日常生活中不可或缺的一部分。在动漫日益繁荣的背景下,如何利用现代信息技术手段,提高动漫作品的传播效率和用户体验,成为了一个亟待解决的问题。本文针对这一问题,提出基于SSM+VUE架构的动漫展示系统。本文提出的动漫展示系统采用SSM+VUE架构,其中SSM框架负责后端数据处理和业务逻辑,实现对动漫作品的增删改查分类管理、评论发布等功能。VUE.js框架负责界面展示和用户交互。系统采用前后端分离的设计模式,有利于降低系统复杂度,提高开发效率。
本文首先阐述了系统的研究背景和意义;然后对系统进行了可行性、功能性等分析;接着详细介绍了系统的设计原理和实现细节,包括系统架构设计、数据库设计、主要功能模块设计等;最后对系统进行了部署和测试。通过本系统的的成功开发,不仅我国动漫产业的发展提供了有力支持,也为其他类似系统的设计和实现提供了有益的参考。
关键词:动漫展示系统;SSM;VUE
Abstract
With the rapid development of Internet technology, Web applications have become an indispensable part of people's daily life. In the context of the increasing prosperity of anime, how to use modern information technology to improve the dissemination efficiency and user experience of anime works has become an urgent problem to be solved. This article proposes an anime display system based on SSM+VUE architecture to address this issue. The anime display system proposed in this article adopts the SSM+VUE architecture, where the SSM framework is responsible for backend data processing and business logic, achieving functions such as adding, deleting, modifying, querying, classifying, managing, and publishing comments on anime works. The VUE.js framework is responsible for interface display and user interaction. The system adopts a design pattern of front-end and back-end separation, which is conducive to reducing system complexity and improving development efficiency.
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, including system architecture design, database design, and main functional module design; Finally, the system was deployed and tested. The successful development of this system not only provides strong support for the development of China's animation industry, but also provides useful references for the design and implementation of other similar systems.
Keywords: Animation display system; SSM; VUE
1 绪论
1.1 研究背景
动漫产业是一个快速发展的行业,对于动漫展示系统的需求也在不断增加。传统的动漫展示系统往往存在界面不够友好、功能不够完善等问题。随着互联网技术的不断进步,前端技术和后端技术也在不断发展。SSM(Spring、SpringMVC、MyBatis)作为Java开发的主流框架,具有强大的功能和灵活性,能够满足复杂的业务需求。而VUE作为一种前端框架,具有高效的数据处理和界面渲染能力,能够提供更好的用户体验。将SSM与VUE结合,可以充分发挥两者的优势,提高系统的性能和可维护性。因此,开发一种基于SSM+VUE的动漫展示系统,可以更好地满足行业需求,提供更加优质的服务。
随着二次元市场的不断扩大,越来越多的人开始关注动漫产业。开发设计一个基于SSM+VUE动漫展示系统具有重要的意义。
首先,可以用户体验优化:VUE是一个优秀的UI框架,能构建用户友好的界面,通过基于SSM+VUE的动漫展示系统,能够提升用户在浏览、选择、欣赏动漫作品时的体验,为观众带来更便捷的观赏方式。
其次,系统管理便利:SSM框架能实现分层管理,使得动漫展示系统的业务逻辑处理、数据持久层、数据访问层等分离,有助于系统管理和维护。
再次,数据统计与分析:通过该系统,可以对大量的动漫资源进行数据统计,分析观众的观看行为和喜好,从而为动漫创作和推广提供有价值的参考。
最后,有助于促进产业发展:通过研究基于SSM+VUE的动漫展示系统,能够推动动漫产业的数字化转型和创新发展,有助于提升产业的竞争力和市场占有率。
1.3论文结构与章节安排
论文将分层次进行编排,除去论文摘要致谢文献参考部分,正文部分主要结构如下:
第一章:绪论,主要介绍系统的研究背景和意义、论文整体框架的结构。
第二章:系统分析,主要对系统进行可行性技术、系统功能分析、用例分析。
第三章:系统总体设计,主要是对系统的架构、功能结构、系统数据库进行分析。
第四章:系统详细设计与实现,根据系统功能的划分,主要对系统的部分界面进行展示。
第五章:系统测试,主要对系统的主要功能进行测试。
第六章:结论,主要对系统的开发设计工作进行总结。
2系统分析
系统分析是开发一个项目的先决条件,通过系统分析可以很好的了解系统的主体用户的基本需求情况,同时这也是项目的开发的原因。进而对系统开发进行可行性分析,通常包括技术可行性、经济可行性等,可行性分析同时也是从项目整体角度进行的分析。然后就是对项目的具体需求进行分析,分析的手段一般都是通过用户的用例图来实现。下面是详细的介绍。
2.1 可行性分析
(1)技术可行性:
SSM 是一种常用的Java Web开发框架,能够实现分层架构,提高开发效率和代码复用性。VUE是一种流行的前端框架,用于构建用户友好的界面和交互功能。结合SSM和VUE,可以快速搭建一个功能强大、性能稳定的动漫展示系统。因此,从技术层面分析是可行的。
(2)经济可行性:
SSM框架是开源的,拥有大量的社区支持和丰富的学习资源。使用SSM框架进行开发可以降低开发成本,缩短开发周期。此外,SSM框架具备良好的性能和稳定性,可以降低系统的运行成本和维护成本。因此,从经济角度分析是可行的。
- 市场可行性:
随着互联网技术的飞速发展,动漫产业在我国逐渐呈现出蓬勃发展的态势。作为一种新兴产业,动漫具有广泛的市场前景和巨大的经济效益。动漫展示系统可以满足用户对动漫展示、分享、互动的需求,因此在市场上具有较大的需求空间。因此,从市场角度分析是可行的。
2.2 系统流程分析
系统流程是用一些特定的符合和线条来进行演示用户在使用系统时的过程,在进行系统分析的时候,业务流程可以帮助开发人员更好的理解业务,发现错误,完善系统。
2.2.1 数据新增流程
用户成功登入系统后就能够实现增加数据的操作,增加数据的编号由系统生成,用户不能随意填写,除了编号以外,其他增加信息用户自己填写,填写后的信息需经过系统验证,验证通过后即可完成数据新增,数据新增的流程图如下图2-1所示。
图2-1 数据新增流程图
3.2.2 数据删除流程
如果系统里面存在一些没有用的数据,相关的管理人员还可以对这些数据进行删除,数据删除时流程图如下图2-2所示。
图2-2 数据删除流程图
2.3.1 功能性分析
按照基于SSM+VUE动漫展示系统的角色,主要包括注册用户模块和管理员这两大功能模块,各模块功能内容如下:
- 注册用户功能:
- 首页:用户可以查看首页展示的轮播图、动漫资讯、动漫作品推荐等内容。
- 注册登录:访客可以通过注册成为系统用户,注册后可以用账号密码登录。
- 社交互动:用户可以查看社交互动列表中某一信息详情并可以点赞、收藏和发表评论,也可以自行发布内容。
- 网站公告:用户可以查看网站公告列表中某一信息详情。
- 动漫资讯:用户可以查看动漫资讯列表中某一资讯详情并可以进行点赞、收藏和发表评论操作。
- 动漫作品:用户可以查看动漫作品列表中某一作品详情并可以进行点赞、收藏、发表评论和提交评分操作。
- 我的:用户可以修改个人信息和登录密码,可以查看和管理个人中心中的动漫评分、社交互动和收藏信息
2. 管理员功能:
- 后台首页:管理员可以管理员可以查看后台主页展示的数据分析和动漫评分统计图。
- 系统用户:管理员可以对系统用户进行查询、重置、添加和删除操作。
- 动漫分类管理:管理员可以对查看动漫分类列表中某一分类详情,可以对动漫分类信息进行查询、重置、添加和删除操作。
- 动漫作品管理:管理员可以查看动漫作品列表中某一作品详情和评分信息,可以对动漫作品信息进行查询、重置、添加和删除操作。
- 动漫评分管理:管理员可以查看动漫评分列表中某一动漫评分详情,可以对动漫评分信息进行查询、重置和删除操作。
- 数据分析管理:管理员可以查看数据分析列表中某一数据详情,可以对数据分析信息进行查询、重置、添加和删除操作。
- 系统管理:管理员可以对系统轮播图信息进行查询、重置、添加和删除操作。
- 网站公告管理:管理员可以网站公告信息进行查询、重置、添加和删除操作。
- 资源管理:管理员可以对动漫资讯、资讯分类信息进行查询、重置、添加和删除操作。
- 交流管理:管理员可以对社交互动、互动分类信息进行查询、重置、添加和删除操作。
- 我的:管理员可以修改个人信息和登录密码。
基于SSM+VUE动漫展示系统的非功能性需求比如基于SSM+VUE动漫展示系统的安全性怎么样,可靠性怎么样,性能怎么样,可拓展性怎么样等。具体可以表示在如下2-1表格中:
表2-1基于SSM+VUE动漫展示系统非功能需求表
安全性 | 主要指基于SSM+VUE动漫展示系统数据库的安装,数据库的使用和密码的设定必须合乎规范。 |
可靠性 | 可靠性是指基于SSM+VUE动漫展示系统能够安装用户的指示进行操作,经过测试,可靠性90%以上。 |
性能 | 性能是影响基于SSM+VUE动漫展示系统占据市场的必要条件,所以性能最好要佳才好。 |
可扩展性 | 比如数据库预留多个属性,比如接口的使用等确保了系统的非功能性需求。 |
易用性 | 用户只要跟着基于SSM+VUE动漫展示系统的页面展示内容进行操作,就可以了。 |
可维护性 | 基于SSM+VUE动漫展示系统开发的可维护性是非常重要的,经过测试,可维护性没有问题 |
2.4 系统用例分析
通过2.3功能的分析,得出了本基于SSM+VUE动漫展示系统的角色用例图:
注册用户角色用例图如下图2-3所示。
图2-3 注册用户角色用例图
管理员角色用例图如下图2-4所示。
图2-4 管理员角色用例图
2.5本章小结
本章主要通过对基于SSM+VUE动漫展示系统的可行性分析、流程分析、功能需求分析、系统用例分析,确定整个基于SSM+VUE动漫展示系统要实现的功能。同时也为基于SSM+VUE动漫展示系统的代码实现和测试提供了标准。
本章主要讨论的内容包括基于SSM+VUE动漫展示系统的架构设计、功能模块设计、数据库系统设计。
3.1 系统架构设计
本基于SSM+VUE动漫展示系统从架构上分为三层:表现层(UI)、业务逻辑层(BLL)以及数据层(DL)。
图3-1系统架构设计图
表现层(UI):又称UI层,主要完成本基于SSM+VUE动漫展示系统的UI交互功能,一个良好的UI可以打打提高用户的用户体验,增强用户使用本基于SSM+VUE动漫展示系统时的舒适度。UI的界面设计也要适应不同版本的基于SSM+VUE动漫展示系统以及不同尺寸的分辨率,以做到良好的兼容性。UI交互功能要求合理,用户进行交互操作时必须要得到与之相符的交互结果,这就要求表现层要与业务逻辑层进行良好的对接。
业务逻辑层(BLL):主要完成本基于SSM+VUE动漫展示系统的数据处理功能。用户从表现层传输过来的数据经过业务逻辑层进行处理交付给数据层,系统从数据层读取的数据经过业务逻辑层进行处理交付给表现层。
数据层(DL):由于本基于SSM+VUE动漫展示系统的数据是放在服务端的MySQL数据库中,因此本属于服务层的部分可以直接整合在业务逻辑层中,所以数据层中只有数据库,其主要完成本基于SSM+VUE动漫展示系统的数据存储和管理功能。
3.2 系统功能模块设计
在上一章节中主要对系统的功能性需求和非功能性需求进行分析,并且根据需求分析了本基于SSM+VUE动漫展示系统中的用例。那么接下来就要开始对本基于SSM+VUE动漫展示系统的架构、主要功能和数据库开始进行设计。基于SSM+VUE动漫展示系统根据前面章节的需求分析得出,其总体功能模块图如图3-2所示。
图3-2 系统功能模块图
3.3 数据库设计
数据库设计一般包括需求分析、概念模型设计、数据库表建立三大过程,其中需求分析前面章节已经阐述,概念模型设计有概念模型和逻辑结构设计两部分。
3.3.1 数据库概念结构设计
下面是整个基于SSM+VUE动漫展示系统中主要的数据库表总E-R实体关系图。
图3-3 系统总E-R关系图
3.3.2 数据库逻辑结构设计
通过上一小节中基于SSM+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 | 用户编号: |
表anime_classification (动漫分类)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | anime_classification_id | int | 10 | 0 | N | Y | 动漫分类ID | |
2 | anime_genre | varchar | 64 | 0 | Y | N | 动漫类型 | |
3 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
4 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表anime_rating (动漫评分)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | anime_rating_id | int | 10 | 0 | N | Y | 动漫评分ID | |
2 | anime_name | varchar | 64 | 0 | Y | N | 动漫名称 | |
3 | anime_genre | varchar | 64 | 0 | Y | N | 动漫类型 | |
4 | cover | varchar | 255 | 0 | Y | N | 封面 | |
5 | author | varchar | 64 | 0 | Y | N | 作者 | |
6 | rating_users | int | 10 | 0 | Y | N | 0 | 评分用户 |
7 | score | varchar | 64 | 0 | Y | N | 评分 | |
8 | evaluation_content | text | 65535 | 0 | Y | N | 评价内容 | |
9 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
10 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表anime_works (动漫作品)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | anime_works_id | int | 10 | 0 | N | Y | 动漫作品ID | |
2 | anime_name | varchar | 64 | 0 | Y | N | 动漫名称 | |
3 | anime_genre | varchar | 64 | 0 | Y | N | 动漫类型 | |
4 | cover | varchar | 255 | 0 | Y | N | 封面 | |
5 | author | varchar | 64 | 0 | Y | N | 作者 | |
6 | drama_series | varchar | 64 | 0 | Y | N | 剧集 | |
7 | fraction | varchar | 64 | 0 | Y | N | 分数 | |
8 | brief_introduction | text | 65535 | 0 | Y | N | 简介 | |
9 | details | longtext | 2147483647 | 0 | Y | N | 详情 | |
10 | hits | int | 10 | 0 | N | N | 0 | 点击数 |
11 | praise_len | int | 10 | 0 | N | N | 0 | 点赞数 |
12 | recommend | int | 10 | 0 | N | N | 0 | 智能推荐 |
13 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
14 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表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: |
表data_analysis (数据分析)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | data_analysis_id | int | 10 | 0 | N | Y | 数据分析ID | |
2 | data_name | varchar | 64 | 0 | Y | N | 数据名称 | |
3 | month | varchar | 64 | 0 | Y | N | 月份 | |
4 | quantity | int | 10 | 0 | Y | N | 0 | 数量 |
5 | remarks | text | 65535 | 0 | Y | N | 备注 | |
6 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
7 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表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已取消 |
表registered_users (注册用户)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | registered_users_id | int | 10 | 0 | N | Y | 注册用户ID | |
2 | name | varchar | 64 | 0 | Y | N | 姓名 | |
3 | gender | varchar | 64 | 0 | Y | N | 性别 | |
4 | examine_state | varchar | 16 | 0 | N | N | 已通过 | 审核状态 |
5 | user_id | int | 10 | 0 | N | N | 0 | 用户ID |
6 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
7 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表sensitive_vocabulary (敏感词汇)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | sensitive_vocabulary_id | int | 10 | 0 | N | Y | 敏感词汇ID | |
2 | sensitive_vocabulary | varchar | 64 | 0 | Y | N | 敏感词汇 | |
3 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
4 | 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本章小结
整个基于SSM+VUE动漫展示系统的需求分析主要对系统总体架构以及功能模块的设计,通过建立E-R模型和数据库逻辑系统设计完成了数据库系统设计。
4 系统详细设计与实现
4.1注册用户功能模块
4.1.1 前台首页界面
系统首页以上中下的布局进行展示,正上方是系统的导航栏,中间是轮播图,下面是动漫资讯、动漫作品推荐等内容,其主界面展示如下图4-1所示。
![](https://i-blog.csdnimg.cn/direct/961d45c9db4c45168fb1af01237816f6.png)
图4-1 前台首页界面图
4.1.2 用户注册界面
用户点击右上角的“注册”进入注册页面填写账号、密码、确认密码、昵称、邮箱、身份等信息后点击“立即注册”按钮,系统会对输入的信息进行验证,验证通过后即可完成注册,其界面展示如下图4-2所示。
![](https://i-blog.csdnimg.cn/direct/4a233c9b9e4d4105bda3a823bc49f0d8.png)
图4-2 用户注册界面图
用户注册的关键代码如下:
@PostMapping("register")
public Map<String, Object> signUp(HttpServletRequest request) throws IOException {
Map<String, String> query = new HashMap<>();
Map<String,Object> map = service.readBody(request.getReader());
query.put("username",String.valueOf(map.get("username")));
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.1.3 用户登录界面
用户注册后可以通过自己的账户名和密码进行登录的,当用户输入完整的自己的账户名和密码信息和验证信息后点击“立即登录”按钮后,系统会对输入的信息进行验证,验证通过后即可完成登录,其界面如下图4-3所示。
![](https://i-blog.csdnimg.cn/direct/9c36caf8b70e4ae18d8576e066f49423.png)
图4-3用户登录界面图
用户登录关键代码如下:
@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;
QueryWrapper wrapper = new QueryWrapper<User>();
Map<String, String> map = new HashMap<>();
4.1.4社交互动界面
用户可以查看社交互动列表中某一信息详情并可以点赞、收藏和发表评论,也可以自行发布内容,其界面如下图4-4所示。
![](https://i-blog.csdnimg.cn/direct/a4a59f65c60049ccbedd5f35f622912d.png)
图4-4设计互动界面图
4.1.5 网站公告界面
用户可以查看网站公告列表中某一信息详情,其界面如下图4-5所示。
![](https://i-blog.csdnimg.cn/direct/e2487ff85b7643b98c7b0c179bfc0a16.png)
图5-5网站公告界面图
用户可以查看动漫资讯列表中某一资讯详情并可以进行点赞、收藏和发表评论操作,其界面如下图4-6所示。
![](https://i-blog.csdnimg.cn/direct/f442dc14ccb34a0782787109276a42e0.png)
图4-6动漫资讯界面图
4.1.7 动漫作品界面
用户可以查看动漫作品列表中某一作品详情并可以进行点赞、收藏、发表评论和提交评分操作,其界面如图4-7所示。
![](https://i-blog.csdnimg.cn/direct/6ff970a9901a4c188e6ea2a948f51b90.png)
图4-7 动漫作品界面图
4.1.8个人中心界面
用户可以查看和管理个人中心中的动漫评分、社交互动和收藏信息,例如对动漫评分信息进行查询和重置操作;对社交互动进行查询和重置和删除操作等,其界面如下图4-8所示:
![](https://i-blog.csdnimg.cn/direct/9f2ba92058fc4dc5851b3101130582ce.png)
图4-8 个人中心界面图
4.2管理员功能模块
4.2.1 后台首页界面
管理员可以管理员可以查看后台主页展示的数据分析和动漫评分统计图,其界面如下图4-9所示。
![](https://i-blog.csdnimg.cn/direct/a8855fc95c554afea3e0d022b4e0aa0a.png)
图4-9后台首页界面图
管理员可以对查看动漫分类列表中某一分类详情,可以对动漫分类信息进行查询、重置、添加和删除操作,其界面如下图4-10所示。
![](https://i-blog.csdnimg.cn/direct/15dfaf2289e14a50b437319dd5213167.png)
图4-10动漫分类管理界面图
添加的关键代码如下:
@PostMapping("/add")
@Transactional
public Map<String, Object> add(HttpServletRequest request) throws IOException {
service.insert(service.readBody(request.getReader()));
return success(1);
}
@Transactional
public Map<String, Object> addMap(Map<String,Object> map){
service.insert(map);
return success(1);
}
删除的关键代码如下:
@PostMapping("/set")
@Transactional
public Map<String, Object> set(HttpServletRequest request) throws IOException {
service.update(service.readQuery(request), service.readConfig(request), service.readBody(request.getReader()));
return success(1);
}
管理员可以查看动漫作品列表中某一作品详情和评分信息,可以对动漫作品信息进行查询、重置、添加和删除操作,其界面如下图4-11所示。
![](https://i-blog.csdnimg.cn/direct/448850b090dd4bf1ac3af9f529d93ae8.png)
图4-11动漫作品管理界面图
管理员可以查看动漫评分列表中某一动漫评分详情,可以对动漫评分信息进行查询、重置和删除操作,其界面如下图4-12所示。
![](https://i-blog.csdnimg.cn/direct/dce75b31e9eb439b82f509607fb9b2dc.png)
图4-12动漫评分管理界面图
管理员可以查看数据分析列表中某一数据详情,可以对数据分析信息进行查询、重置、添加和删除操作,其界面如下图4-13所示。
![](https://i-blog.csdnimg.cn/direct/403a57e1a3794bbe93feee96a17549b8.png)
图4-13数据分析管理界面图
4.2.6系统管理界面
管理员可以对系统轮播图信息进行查询、重置、添加和删除操作,其界面如下图4-14所示。
![](https://i-blog.csdnimg.cn/direct/841398a888414b888282331935d4ac57.png)
图4-14系统管理界面图
图片/上传的关键代码如下:
@PostMapping("/upload")
public Map<String, Object> upload(@RequestParam(value = "file",required=false) MultipartFile file,HttpServletRequest request) {
log.info("进入方法");
if (file.isEmpty()) {
return error(30000, "没有选择文件");
}
try {
//判断有没路径,没有则创建
String filePath = request.getSession().getServletContext().getRealPath("\\") +"upload\\";
File targetDir = new File(filePath);
if (!targetDir.exists() && !targetDir.isDirectory()) {
if (targetDir.mkdirs()) {
log.info("创建目录成功");
} else {
log.error("创建目录失败");
}
}
String fileName = file.getOriginalFilename();
int lastIndexOf = fileName.lastIndexOf(".");
String suffix = fileName.substring(lastIndexOf);
fileName = IdWorker.getId()+suffix;
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-15所示。
![](https://i-blog.csdnimg.cn/direct/edc39351d5624caf85640a7fcc3bc87f.png)
图4-15资源管理界面图
管理员可以对社交互动、互动分类信息进行查询、重置、添加和删除操作,其界面如下图4-16所示。
![](https://i-blog.csdnimg.cn/direct/a352993c3337487c941ca408676faf6d.png)
图4-16交流管理界面图
5系统测试
5.1 系统测试目的
无论什么样的系统,测试都至关重要,通过测试可以检查出潜藏的缺陷,从而确保系统的性能和稳定性,避免Bug的出现,并确保系统的功能和性价比达到预期的要求。
系统测试包括:用户登录功能测试、网站公告查看功能、轮播图信息添加功能、密码修改功能测试,如表5-1、5-2、5-3、5-4所示:
表5-1 用户登录功能测试表
用例名称 | 用户登录系统 |
目的 | 测试用户通过正确的用户名和密码可否登录功能 |
前提 | 未登录的情况下 |
测试流程 | 1) 进入登录页面 2) 输入正确的用户名和密码 |
预期结果 | 用户名和密码正确的时候,跳转到登录成功界面,反之则显示错误信息,提示重新输入 |
实际结果 | 实际结果与预期结果一致 |
网站公告查看功能测试:
表5-2 网站公告查看功能测试表
用例名称 | 网站公告查看 |
目的 | 测试校运资讯查看功能 |
前提 | 注册用户登录 |
测试流程 | 点击网站公告讯 |
预期结果 | 可以查看到所有网站公告信息 |
实际结果 | 实际结果与预期结果一致 |
实际结果 | 实际结果与预期结果一致 |
轮播图信息添加界面测试:
表5-3 轮播图信息添加界面测试表
用例名称 | 轮播图信息添加测试用例 |
目的 | 测试轮播图信息添加功能 |
前提 | 管理员用户正常登录情况下 |
测试流程 | 1)管理员点击公共管理下方的轮播图,点击新增进入新增页面填写信息。 2)填写完毕后点击进行提交。 |
预期结果 | 提交以后,页面首页会显示新的轮播图信息 |
实际结果 | 实际结果与预期结果一致 |
密码修改功能测试:
表5-4 密码修改功能测试表
用例名称 | 密码修改测试用例 |
目的 | 测试管理员密码修改功能 |
前提 | 普通用户正常登录情况下 |
测试流程 | 1)普通密码修改并完成填写。 2)点击进行提交。 |
预期结果 | 使用新的密码可以登录 |
实际结果 | 实际结果与预期结果一致 |
通过编写基于SSM+VUE动漫展示系统的测试用例,已经检测完毕用户登录功能测试、网站公告查看功能、轮播图信息添加功能、密码修改功能测试,通过这四大模块的测试为基于SSM+VUE动漫展示系统的后期推广运营提供了强力的技术支撑。
在基于SSM+VUE动漫展示系统开发之前,需要先对用户的具体需求进行分析。包括系统的可行性分析、功能需求分析以及其他需求等。在可行性分析过程中,对系统实现的技术性、经济性等方面进行了分析。总体上证明了系统实施的可行性。
本文总结了基于SSM+VUE动漫展示系统开发背景与意义,然后阐述了系统的具体业务需求,并根据系统需求对系统结构以及功能模块等进行了详细地设计,将整个系统划分为多个不同的功能模块。在分析系统功能需求时,对整个系统的总体架构以及功能模块等进行了分析,并选择合适的系统开发技术完成了对各个模块的开发工作。系统开发完成之后进行了部署,同时进行了系统的测试过程,通过测试证明了系统在功能以及性能等方面都达到了预期的要求,具有较高的稳定性与可靠性。
[1]刘茜,张娟,段婷婷.智媒时代动漫产业发展主要影响因素及作用机理实证研究[J].中国广播电视学刊,2023,(12):64-70.
[2]郑妍妍.数字动漫媒体资源共享系统的设计和实现[J].数字通信世界,2023,(08):55-57.
[3]Li L ,Yao D .Liaoning Red Culture Animation Product Design and Communication Practice[J].Journal of Sociology and Ethnology,2023,5(7):
[4]马凯航.新媒体环境下国产动漫发展路径探究[J].大众文艺,2023,(14):89-92.
[5]王健,杨笛.湖南动漫产业发展中的问题及对策——文化元素在动漫品牌中的运用[J].湘潭大学学报(哲学社会科学版),2023,47(04):188-192.
[6]郭家玮.基于深度学习的动漫推荐系统[D].电子科技大学,2023.
[7]杜赫男.中美日体育动漫艺术创作对比研究及对我国体育动漫产业发展的启示[D].首都体育学院,2023.
[8]胡明航.日本动漫产业的空间集聚及创新模式研究[D].上海师范大学,2023.
[9]王麒森.基于深度学习的动漫游戏(电竞)产业分析及预测系统的研究与实现[D].辽宁大学,2023.
[10]王春培.新媒体环境下动漫在新闻传播中的应用[J].中国报业,2023,(08):222-223.
[11]路露,刘千硕,康程.元宇宙背景下国产动漫的发展研究[J].玩具世界,2023,(02):55-57.
[12]赵静.基于SSM+VUE架构的校企融合教学实践[J].集成电路应用,2023,40(04):56-57.
[13]郭明超.新型动漫图像转换系统的设计与实现[D].华东师范大学,2023.
[14]韩雨辰,路阳,孙海江.住院医师规范化培训考核在线评分系统设计与应用[J].中国卫生信息管理杂志,2022,19(03):377-383.
[15]刘昱萌.基于大数据的在线教育视频评分系统设计[D].陕西科技大学,2022.
[16]刘广.智能客服教练评分系统的设计与实现[D].华中科技大学,2021.
[17]刘红霞.基于语音交互的荆楚建筑展示系统研究与实现[D].华中师范大学,2020.
[18]Hongying Z .A Study on the Design of English Speaking Examination System Based on SSM Framework[J].Journal of Sensors,2022,2022
[19]Liang C .School Vehicle Management System Based on JAVA Language[J].Academic Journal of Computing Information Science,2023,6(9):
[20]Jessica E L ,Sanoussi M A Y ,Mehdi E C , et al.A comprehensive review of State-of-The-Art methods for Java code generation from Natural Language Text[J].Natural Language Processing Journal,2023,3
首先,我要感谢我的论文指导老师。在论文完成的整个过程中,指导老师始终给予我无微不至的关爱与指导。在论文写作的过程中,导师那耐心细致的指导,以及提出的具有建设性的意见,都给予了我极大的帮助,让我受益匪浅。导师严谨的治学态度、敬业精神以及高水平的教学能力,都给我树立了追求卓越的典范,这对我以后的人生道路和学业成就都产生了极大的积极影响。
此外,我还要感谢我班的同学们,他们既是我的同窗好友,又是我的良师益友。正是由于你们的支持和关怀,使得我在大学期间的学习和生活都变得异常充实。感谢那些在大学期间给予我帮助的所有老师和同学们,是你们给予了我在学业道路上的前进动力。
当然,我也不能忘记我的父母,是他们用无私的爱抚养我成人。你们的养育之恩我将永生难忘,将来我一定会用我的成绩回报你们。在成长的道路上,我会不断努力,不负众望,用实际行动来回报你们对我的期望。
免费领取项目源码,请关注❥点赞收藏并私信博主,谢谢~