目 录
结论 35
本项目基于 Spring Boot 框架构建漫画网站,旨在提供优质漫画阅读体验。采用前后端分离架构,前端使用Vue.js,后端采用Spring Boot,数据库为MySQL。主要功能包括漫画阅读、漫画管理、用户管理、评论互动和漫画排行。用户可注册账号,浏览不同类型漫画并进行在线阅读和评论。管理员可管理漫画信息、用户权限和网站内容。系统设计旨在打造功能丰富、用户友好的漫画平台,促进漫画文化传播与交流,提升用户阅读体验和网站互动性。通过整合Spring Boot的强大功能和前端技术,实现了一个功能完善、高效稳定的漫画网站,满足用户对漫画内容的需求,推动漫画产业发展并提升用户满意度。
关键词:Java;springboot;漫画网站;MySQL
Abstract
This project is based on the Spring Boot framework to build a comic website, aiming to provide a high-quality comic reading experience. Adopting a front-end and back-end separation architecture, Vue.js is used for the front-end, Spring Boot is used for the back-end, and MySQL is used as the database. The main functions include comic reading, comic management, user management, comment interaction, and comic ranking. Users can register an account, browse different types of comics, and read and comment online. Administrators can manage comic information, user permissions, and website content. The system design aims to create a functional and user-friendly comic platform, promote the dissemination and exchange of comic culture, enhance user reading experience and website interactivity. By integrating the powerful features and front-end technology of Spring Boot, a fully functional, efficient and stable comic website has been achieved, meeting the needs of users for comic content, promoting the development of the comic industry, and improving user satisfaction.
Keywords:Java; Springboot; Comic website; MySQL
1 绪论
随着互联网的普及和数字化娱乐的兴起,漫画在线阅读平台逐渐成为人们获取漫画作品的主要途径。用户对于漫画阅读体验的要求不断提高,包括阅读界面友好、内容丰富多样、互动交流等方面的要求。漫画作品的传播和分享需要便捷的平台,漫画网站提供了漫画作者展示作品、读者阅读评论的渠道,促进漫画内容的传播和分享。采用Spring Boot等现代化技术框架来构建漫画网站,可以提高网站的性能、稳定性和安全性,满足用户需求。漫画市场竞争激烈,为了提升用户粘性和留存率,漫画网站需要不断创新,提供更丰富多样的漫画内容和服务。漫画网站的设计与实现背景源于数字化娱乐趋势、用户体验需求、内容传播与分享、技术支持与发展以及市场竞争与需求等多方面因素的综合作用,旨在打造符合用户期待、满足市场需求的高品质漫画阅读平台。
1.2研究现状
目前,随着数字化娱乐的兴起和互联网技术的发展,漫画网站的设计与实现成为研究的热点之一。研究者致力于通过界面设计、交互体验和功能优化等方面提升用户体验,包括响应式设计、多媒体交互和个性化推荐等技术应用。倾向于采用现代化技术框架如Spring Boot、Vue.js等构建漫画网站,以提高网站的性能、稳定性和安全性,满足用户需求。研究侧重于如何通过社交分享、评论互动等功能,促进漫画作品的传播和用户之间的互动交流,提升用户参与度和留存率。关注漫画网站的安全性和隐私保护,采用权限控制、数据加密等手段,确保用户信息和交易安全。探索漫画网站的商业模式创新,包括付费阅读、广告变现、衍生品开发等方面,实现网站的可持续发展和盈利模式。当前漫画网站设计与实现的研究现状主要集中在用户体验优化、技术框架选择、内容传播与社交互动、数据分析与个性化推荐、安全与隐私保护以及商业模式创新等方面,致力于提升漫画网站的功能性、用户体验和商业化运营水平。
2 漫画网站系统分析
系统需求分析是系统开发的一个关键环节,它在系统的设计和实现上起到了一个承上启下的位置。系统需求分析是对所需要做的系统进行一个需求的挖掘,如果分析的准确可以精准的解决现实中碰到的问题。如果分析不到位会影响后期系统的实现。一个系统的优秀程度需求分析也是占据了非常大的比例,如果需求分析不到位,后面的系统设计要实现就是一个偏离导航的设计。
系统可行行分析是对系统对系统可行性进行一个探讨。在探讨系统的可行性上我们主要从技术上的可行性和经济上的可行性以及法律层面的可行性上进行分析,如果三个层面度通过,我们则认为系统是比较可行的。
2.1.1 技术可行性分析
漫画网站设计与实现是一个民宿查询预约平台,我们在实现这个系统所采用的技术方案是基于Java的 Web实现方案,系统采用springboot方案来实现。springboot框架是一个非常成熟的框架、Java从97年诞生到现在经历了野蛮的生长,Java在各个领域度是有做非常成熟的解决方案,如电信、银行、电商等。springboot又是一套快速整个项目的开箱即用的技术方案。所以采用基于springboot方式来实现本系统是一个非常成熟有简单的技术方案。技术可行性上是非常可行的。
从经济可行性上看项目在开发阶段需要一台开发PC,在生产阶段需要web服务器和数据库服务器。一台个人PC从经济上来看也不是太多问题,在后期的系统部署生产上来说,服务器的投入也不会过高,在经济层面上是一个比较可行的。
系统从法律层面上来没有对第三方有其他放有法律层面的问题,系统数据库采用的Mysql 开源社区数据库、框架采用的是开源的springboot。系统资讯和相关内容也是呵呵法律层面的。在源码的管理上采用git开源进行管理,所以在法律可行性上是成立的。
漫画网站我划分为了普通用户模块和管理员模块这两大部分。
普通用户管理模块:
(1)用户注册登录:游客可以随时进入到系统中,对系统中的信息浏览,但是想要实现地方漫画阅读的订阅、收藏评论操作,就必须有这个系统的账号,如果没有账号的话,可以注册成员用户进行相关的操作,同时用户还可以通过“我的”这以按钮对个人信息以及操作的信息进行管控。
(2)查看漫画网站的首页信息:漫画网站的首页信息包含了首页、通知公告、漫画资讯、漫画阅读、漫画排行、漫画创作、漫画活动、漫画学习等。
(3)通知公告:当用户点击“通知公告”这一菜单按钮,会显示管理员在后台发布的所有的通知公告,可以查看详情;
(4)漫画资讯:当用户点击“漫画资讯”这一菜单按钮,会显示管理员在后台发布的所有的漫画资讯,可以查看详情,进行收藏、点赞、评论等;
(5)漫画阅读:当用户点击“漫画阅读”这一菜单按钮,会显示管理员在后台发布的所有的漫画阅读,支持通过关键词对漫画阅读进行搜索,选择需要的漫画阅读点击可以进入到漫画阅读详细的介绍界面,在详细界面可以查看到漫画阅读的详细信息,同时可以进行订阅、立即阅读、点赞、收藏、评论操作;
(6)漫画创作:用户点击“漫画创作”菜单可以查看所有漫画创作,可以按照条件查看漫画创作,或者输入关键词进行查询,点击可以进入漫画创作详细展示界面,在此界面用户可以立即阅读、收藏、点赞和评论。
(7)漫画活动:用户点击“漫画活动”菜单可以查看所有漫画活动,可以按照条件查看漫画活动,或者输入关键词进行查询,点击可以进入漫画活动详细展示界面,在此界面用户可以收藏、点赞和评论。
管理员管理模块:
(1)用户管理:管理员可以对漫画网站中的管理员,以及前台注册的游客用户进行增删改查。
(2)资源管理:管理员可以对漫画网站前台展示的漫画资讯以及资讯所属的分类进行管控。
(3)通知公告管理:管理员可以对系统前台展示的通知公告进行增删改查,方便用户进行查看。
(4)漫画阅读管理:管理员可以对漫画阅读进行增删改查。
(5)私人订阅管理:管理员点击“私人订阅”菜单可以对私人订阅进行管控。
(6)漫画题材管理:管理员点击“漫画题材”菜单可以对漫画题材进行增删改查。
(7)漫画排行管理:管理员点击“漫画排行”菜单可以对漫画排行进行增删改查。
(8)漫画活动管理:管理员点击“漫画活动”菜单可以对漫画活动进行增删改查。
漫画网站的非功能性需求比如漫画网站的安全性怎么样,可靠性怎么样,性能怎么样,可拓展性怎么样等。具体可以表示在如下3-1表格中:
表3-1漫画网站非功能需求表
安全性 | 主要指漫画网站数据库的安装,数据库的使用和密码的设定必须合乎规范。 |
可靠性 | 可靠性是指漫画网站能够按照用户提交的指示进行操作,经过测试,可靠性90%以上。 |
性能 | 性能是影响漫画网站占据市场的必要条件,所以性能最好要佳才好。 |
可扩展性 | 比如数据库预留多个属性,比如接口的使用等确保了系统的非功能性需求。 |
易用性 | 用户只要跟着漫画网站的页面展示内容进行操作,就可以了。 |
可维护性 | 漫画网站开发的可维护性是非常重要的,经过测试,可维护性没有问题 |
2.3 系统用例分析
漫画网站的完整UML用例图分别是图2-1和图2-2。
图2-1就是普通用户角色的用例展示。
图2-1 漫画网站普通用户角色用例图
图2-2就是管理员角色的用例展示。
图2-2 漫画网站管理员角色用例图
2.4.1 数据流程
开发漫画网站最主要的一个目的就是实现用户对漫画阅读的订阅,图2-3就是系统的数据流图。
![](https://i-blog.csdnimg.cn/direct/28795f7f4e514e33aa43f5356f17995a.png)
图2-3漫画阅读订阅操作展开图
2.4.2 业务流程
分析完漫画网站的数据流,那么接下来我们来看系统的业务流程,图2-5就是业务流程图:
本章主要通过对漫画网站的可行性分析、功能需求分析、系统用例分析、系统流程分析,确定整个漫画网站要实现的功能。同时也为漫画网站的代码实现和测试提供了标准。
本章主要讨论的内容包括漫画网站的功能模块设计、数据库系统设计。
3.1 系统功能模块设计
在上一章节中主要对系统的功能性需求和非功能性需求进行分析,并且根据需求分析了本漫画网站中的用例。那么接下来就要开始对本漫画网站的架构、主要功能和数据库开始进行设计。漫画网站根据前面章节的需求分析得出,其总体设计模块图如图3-1所示。
![](https://i-blog.csdnimg.cn/direct/8837d96e110a4af2a3353283d3cbedfa.png)
图3-1 漫画网站功能模块图
3.1.2用户模块设计
本系统的用户包括管理员和用户两种用户模块的功能基本是相同的,用户比管理员多了一个注册功能,所以以用户模块的结构图为例进行分析,用户模块结构图为例进行分析,如下图:
![](https://i-blog.csdnimg.cn/direct/0a9c74152be44984b66026e1170abd94.png)
图3-2用户模块结构图
3.1.3 评论管理模块设计
漫画网站是一个交流性质的公开平台,用户在平台上提交评论,增加用户之间的互动性。但是同时也为了更好的规范评论的内容,给予管理员删除不合适的评论的功能,所以需要专门设计一个评论管理模块,具体的结构图如下:
图3-3评论管理模块结构图
3.1.4漫画阅读管理模块设计
漫画网站是中需要存储不少漫画阅读信息,其模块功能结构,具体的结构图如下:
图3-4漫画阅读信息模块结构图
漫画网站最重要的一个功能就是订阅,其模块功能结构,具体的结构图如下:
![](https://i-blog.csdnimg.cn/direct/cea57931103e4e11ab597721503d421c.png)
图3-5订阅信息模块结构图
数据库设计一般包括需求分析、概念模型设计、数据库表建立三大过程,其中需求分析前面章节已经阐述,概念模型设计有概念模型和逻辑结构设计两部分。
3.2.1 数据库概念结构设计
下面是整个漫画网站中主要的数据库表总E-R实体关系图。
![](https://i-blog.csdnimg.cn/direct/f7a06eea147547ae96a0df2f3869ba1e.png)
图3-6 漫画网站总E-R关系图
通过上一小节中漫画网站中总E-R关系图上得出一共需要创建很多个数据表。在此我主要罗列几个主要的数据库表结构设计。
表comic_activities (漫画活动)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | comic_activities_id | int | 10 | 0 | N | Y | 漫画活动ID | |
2 | activity_name | varchar | 64 | 0 | Y | N | 活动名称 | |
3 | event_cover | varchar | 255 | 0 | Y | N | 活动封面 | |
4 | event_address | varchar | 64 | 0 | Y | N | 活动地址 | |
5 | activity_time | datetime | 19 | 0 | Y | N | 活动时间 | |
6 | event_introduction | text | 65535 | 0 | Y | N | 活动简介 | |
7 | hits | int | 10 | 0 | N | N | 0 | 点击数 |
8 | praise_len | int | 10 | 0 | N | N | 0 | 点赞数 |
9 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
10 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表comic_genre (漫画类型)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | comic_genre_id | int | 10 | 0 | N | Y | 漫画类型ID | |
2 | comic_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 | 更新时间 |
表comic_themes (漫画题材)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | comic_themes_id | int | 10 | 0 | N | Y | 漫画题材ID | |
2 | comic_themes | 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 | 更新时间 |
表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: |
表learning_comics (漫画学习)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | learning_comics_id | int | 10 | 0 | N | Y | 漫画学习ID | |
2 | tutorial_name | varchar | 64 | 0 | Y | N | 教程名称 | |
3 | tutorial_cover | varchar | 255 | 0 | Y | N | 教程封面 | |
4 | release_time | datetime | 19 | 0 | Y | N | 发布时间 | |
5 | painting_tutorial | varchar | 255 | 0 | Y | N | 绘画教程 | |
6 | craftsmanship | text | 65535 | 0 | Y | N | 创作技巧 | |
7 | hits | int | 10 | 0 | N | N | 0 | 点击数 |
8 | praise_len | int | 10 | 0 | N | N | 0 | 点赞数 |
9 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
10 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表manga_creation (漫画创作)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | manga_creation_id | int | 10 | 0 | N | Y | 漫画创作ID | |
2 | regular_users | int | 10 | 0 | Y | N | 0 | 普通用户 |
3 | user_name | varchar | 64 | 0 | Y | N | 用户姓名 | |
4 | manga_name | varchar | 64 | 0 | Y | N | 漫画名称 | |
5 | comic_themes | varchar | 64 | 0 | Y | N | 漫画题材 | |
6 | comic_genre | varchar | 64 | 0 | Y | N | 漫画类型 | |
7 | manga_cover | varchar | 255 | 0 | Y | N | 漫画封面 | |
8 | introduction_to_comics | text | 65535 | 0 | Y | N | 漫画简介 | |
9 | hits | int | 10 | 0 | N | N | 0 | 点击数 |
10 | praise_len | int | 10 | 0 | N | N | 0 | 点赞数 |
11 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
12 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表manga_ranking (漫画排行)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | manga_ranking_id | int | 10 | 0 | N | Y | 漫画排行ID | |
2 | manga_name | varchar | 64 | 0 | Y | N | 漫画名称 | |
3 | comic_themes | varchar | 64 | 0 | Y | N | 漫画题材 | |
4 | comic_genre | varchar | 64 | 0 | Y | N | 漫画类型 | |
5 | manga_cover | varchar | 255 | 0 | Y | N | 漫画封面 | |
6 | comic_author | varchar | 64 | 0 | Y | N | 漫画作者 | |
7 | introduction_to_comics | text | 65535 | 0 | Y | N | 漫画简介 | |
8 | hits | int | 10 | 0 | N | N | 0 | 点击数 |
9 | praise_len | int | 10 | 0 | N | N | 0 | 点赞数 |
10 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
11 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表manga_reading (漫画阅读)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | manga_reading_id | int | 10 | 0 | N | Y | 漫画阅读ID | |
2 | manga_name | varchar | 64 | 0 | Y | N | 漫画名称 | |
3 | comic_themes | varchar | 64 | 0 | Y | N | 漫画题材 | |
4 | comic_genre | varchar | 64 | 0 | Y | N | 漫画类型 | |
5 | manga_cover | varchar | 255 | 0 | Y | N | 漫画封面 | |
6 | comic_author | varchar | 64 | 0 | Y | N | 漫画作者 | |
7 | introduction_to_comics | text | 65535 | 0 | Y | N | 漫画简介 | |
8 | hits | int | 10 | 0 | N | N | 0 | 点击数 |
9 | praise_len | int | 10 | 0 | N | N | 0 | 点赞数 |
10 | recommend | int | 10 | 0 | N | N | 0 | 智能推荐 |
11 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
12 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表message_push (消息推送)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | message_push_id | int | 10 | 0 | N | Y | 消息推送ID | |
2 | regular_users | int | 10 | 0 | Y | N | 0 | 普通用户 |
3 | user_name | varchar | 64 | 0 | Y | N | 用户姓名 | |
4 | push_title | varchar | 64 | 0 | Y | N | 推送标题 | |
5 | push_time | datetime | 19 | 0 | Y | N | 推送时间 | |
6 | push_content | text | 65535 | 0 | Y | N | 推送内容 | |
7 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
8 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表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 | 更新时间: |
表novel_chapters (小说章节)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | novel_chapters_id | int | 10 | 0 | N | Y | 小说章节ID | |
2 | chapter_name | varchar | 64 | 0 | Y | N | 章节名称 | |
3 | sort | int | 10 | 0 | Y | N | 0 | 排序 |
4 | chapter_content | longtext | 2147483647 | 0 | Y | N | 章节内容 | |
5 | novel_reading_id | int | 10 | 0 | Y | N | 小说id | |
6 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
7 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表private_subscription (私人订阅)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | private_subscription_id | int | 10 | 0 | N | Y | 私人订阅ID | |
2 | regular_users | int | 10 | 0 | Y | N | 0 | 普通用户 |
3 | user_name | varchar | 64 | 0 | Y | N | 用户姓名 | |
4 | manga_name | varchar | 64 | 0 | Y | N | 漫画名称 | |
5 | comic_themes | varchar | 64 | 0 | Y | N | 漫画题材 | |
6 | comic_genre | varchar | 64 | 0 | Y | N | 漫画类型 | |
7 | comic_author | varchar | 64 | 0 | Y | N | 漫画作者 | |
8 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
9 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表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_information | varchar | 64 | 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 | 更新时间 |
3.4本章小结
整个漫画网站的需求分析主要对系统总体架构以及功能模块的设计,通过建立E-R模型和数据库逻辑系统设计完成了数据库系统设计。
4 漫画网站详细设计与实现
漫画网站的详细设计与实现主要是根据前面的漫画网站的需求分析和漫画网站的总体设计来设计页面并实现业务逻辑。主要从漫画网站界面实现、业务逻辑实现这两部分进行介绍。
4.1用户功能模块
4.1.1 前台首页界面
当进入漫画网站的时候,系统以上中下的布局进行展示,首先映入眼帘的是系统的导航栏,下面是轮播图,再往下是公告信息,其主界面展示如下图4-1所示。
![](https://i-blog.csdnimg.cn/direct/629b526cf7034eab9ee06f6513afdf4a.png)
图4-1 前台首页界面图
4.1.2 用户注册界面
漫画网站的游客和时可以进行注册登录,当用户右上角“注册”按钮的时候,当填写上自己的账号+密码+确认密码+昵称+邮箱+手机号等后再点击“注册”按钮后将会先验证输入的有没有空数据,再次验证密码和确认密码是否是一样的,最后验证输入的账户名和数据库表中已经注册的账户名是否重复,只有都验证没问题后即可用户注册成功。其用用户注册界面展示如下图4-2所示。
![](https://i-blog.csdnimg.cn/direct/0f52ed87a7814a6fb537b5a577ecd206.png)
图4-2注册界面图
注册关键代码如下:
/**
* 注册
* @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.1.3 用户登录界面
漫画网站中的前台上注册后的用户是可以通过自己的账户名和密码进行登录的,当用户输入完整的自己的账户名和密码信息并点击“登录”按钮后,将会首先验证输入的有没有空数据,再次验证输入的账户名+密码和数据库中当前保存的用户信息是否一致,只有在一致后将会登录成功并自动跳转到漫画网站的首页中;否则将会提示相应错误信息,用户登录界面如下图4-3所示。
![](https://i-blog.csdnimg.cn/direct/7067f37f674b49d4b5f76ed9e3f392a2.png)
图4-3用户登录界面图
所有的用户都可以通过网页进入到漫画网站中对信息进行查看,但是要实现订阅、点赞、收藏、评论的话,就不是所有人都能操作的,必须成为漫画网站的用户,注册登录的流程图如下图4-4所示。
![](https://i-blog.csdnimg.cn/direct/d3d0dcac12be46ddbb407a6e550b279a.png)
图4-4注册登录流程图
登录的逻辑代码如下所示。
/**
* 登录
* @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.select(map, new HashMap<>()).getResultList();
}
else if(email != null && "".equals(email) == false){
map.put("email", email);
resultList = service.select(map, new HashMap<>()).getResultList();
}
else if(phone != null && "".equals(phone) == false){
map.put("phone", phone);
resultList = service.select(map, new HashMap<>()).getResultList();
}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.select(groupMap, new HashMap<>()).getResultList();
if (groupList.size()<1){
return error(30000,"用户组不存在");
}
UserGroup userGroup = (UserGroup) groupList.get(0);
//查询用户审核状态
if (!StringUtils.isEmpty(userGroup.getSourceTable())){
String sql = "select examine_state from "+ userGroup.getSourceTable() +" WHERE user_id = " + byUsername.getUserId();
String res = String.valueOf(service.runCountSql(sql).getSingleResult());
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());
tokenService.save(accessToken);
// 返回用户信息
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.4漫画阅读界面
当用户点击“漫画阅读”这一菜单按钮,会显示管理员在后台发布的所有的漫画阅读信息,支持通过关键词对漫画阅读进行搜索,选择需要的漫画阅读点击可以进入到漫画阅读详细的介绍界面,在详细界面可以查看到漫画阅读的详细信息,同时可以进行订阅、立即阅读、点赞、收藏、评论操作,漫画阅读界面如下图4-5 所示。
![](https://i-blog.csdnimg.cn/direct/1f352fbea52748b18a7b99d472cfc878.png)
图4-5漫画阅读界面图
4.1.5 漫画资讯详情界面
当访客点击漫画网站中导航栏上的“漫画资讯”后将会进入到该“漫画资讯”列表的界面,然后选择想要看的漫画资讯,点击进入到详细界面,同时可以进行点赞、收藏、评论操作,漫画资讯界面如下图4-6所示。
![](https://i-blog.csdnimg.cn/direct/a4f14499a43a480d89b6f4ad2772a1ee.png)
图4-6 漫画资讯详情界面图
4.1.6漫画排行详情界面
当用户点击“漫画排行”这一菜单按钮,会显示管理员在后台发布的所有的漫画排行信息,支持通过关键词对漫画排行进行搜索,选择需要的漫画排行点击可以进入到漫画排行详细的介绍界面,在详细界面可以查看到漫画排行的漫画名称、漫画类型、漫画题材等信息,同时可以进行订阅、立即阅读、点赞、收藏、评论操作,漫画排行详情界面如下图4-7所示。
![](https://i-blog.csdnimg.cn/direct/67e2c2b695564993a53ff4a4a4ae6423.png)
图4-7漫画排行详情界面图
在实现订阅操作的时候,没有登录的用户只能进行查看,如果想要实现订阅这个操作的话,订阅的前提必须是登录后才能进行。详见图4-8所示。
图4-8 订阅流程图
4.2管理员功能模块
4.2.1用户管理界面
管理员点击“用户管理”这一菜单会显示管理员和普通用户这两个子菜单,管理员可以对这两个角色的信息进行增删改查操作。界面如下图4-9所示。
![](https://i-blog.csdnimg.cn/direct/0ac1b5f81812491ea6dabccc75052413.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);
}
4.2.2漫画题材管理界面
管理员点击“漫画题材”按钮会显示自己添加的漫画题材,如果想要添加新的漫画题材,点击“添加”按钮根据提示输入漫画题材,点击“提交”后在漫画题材界面就可以显示了,如果信息有错可以对漫画题材进行更新维护,也可以直接删除某一漫画题材。界面如下图4-10所示。
图4-10漫画题材管理界面图
@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/b281a2e00abd4dc68448497cfba595d6.png)
图4-11漫画阅读界面图
漫画阅读管理关键代码如下:
@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-12所示。
![](https://i-blog.csdnimg.cn/direct/726ef132864e46fe9523ffbd93268c13.png)
图4-12漫画创作管理界面图
管理员点击“漫画活动”按钮会显示自己添加的漫画活动,如果想要添加新的漫画活动,点击“添加”按钮根据提示输入漫画活动,点击“提交”后在漫画活动界面就可以显示了,如果信息有错可以对漫画活动进行更新维护,也可以直接删除某一漫画活动。界面如下图4-13所示。
![](https://i-blog.csdnimg.cn/direct/57bdd8bc7b534f09b3fbfb36ba267aa0.png)
图4-13漫画活动管理界面图
5系统测试
5.1 系统测试用例
系统测试包括:用户登录功能测试、漫画资讯展示功能测试、漫画阅读添加、漫画阅读搜索、密码修改、订阅功能测试,如表5-1、5-2、5-3、5-4、5-5、5-6所示:
表5-1 用户登录功能测试表
用例名称 | 用户登录系统 |
目的 | 测试用户通过正确的用户名和密码可否登录功能 |
前提 | 未登录的情况下 |
测试流程 | 1) 进入登录页面 2) 输入正确的用户名和密码 |
预期结果 | 用户名和密码正确的时候,跳转到登录成功界面,反之则显示错误信息,提示重新输入 |
实际结果 | 实际结果与预期结果一致 |
漫画资讯查看功能测试:
表5-2 漫画资讯查看功能测试表
用例名称 | 漫画资讯查看 |
目的 | 测试漫画资讯查看功能 |
前提 | 用户登录 |
测试流程 | 点击漫画资讯列表 |
预期结果 | 可以查看到所有漫画资讯信息 |
实际结果 | 实际结果与预期结果一致 |
添加漫画阅读界面测试:
表5-3 添加漫画阅读界面测试表
用例名称 | 添加漫画阅读测试用例 |
目的 | 测试漫画阅读添加功能 |
前提 | 用户正常登录情况下 |
测试流程 | 1)点击漫画阅读,然后点击添加后并填写信息。 2)点击进行提交。 |
预期结果 | 提交以后,页面首页会显示新的漫画阅读 |
实际结果 | 实际结果与预期结果一致 |
漫画阅读搜索功能测试:
表5-4漫画阅读搜索功能测试表
用例名称 | 漫画阅读搜索测试 |
目的 | 测试漫画阅读搜索功能 |
前提 | 无 |
测试流程 | 1)在搜索框填入搜索关键字。 2)点击搜索按钮。 |
预期结果 | 页面显示包含有搜索关键字的漫画阅读 |
实际结果 | 实际结果与预期结果一致 |
密码修改搜索功能测试:
表5-5 密码修改功能测试表
用例名称 | 密码修改测试用例 |
目的 | 测试管理员密码修改功能 |
前提 | 管理员用户正常登录情况下 |
测试流程 | 1)管理员密码修改并完成填写。 2)点击进行提交。 |
预期结果 | 使用新的密码可以登录 |
实际结果 | 实际结果与预期结果一致 |
订阅功能测试:
表5-6订阅功能测试表
用例名称 | 订阅测试用例 |
目的 | 测试用户订阅功能 |
前提 | 用户正常登录情况下 |
测试流程 | 1)搜索查看漫画阅读,点击订阅。 2)填写订阅信息,点击进行提交。 |
预期结果 | 订阅成功 |
实际结果 | 实际结果与预期结果一致 |
通过编写漫画网站的测试用例,已经检测完毕用户登录模块、漫画资讯展示模块、漫画阅读添加模块、漫画阅读搜索模块、密码修改模块、订阅模块功能测试,通过这6大模块为漫画网站的后期推广运营提供了强力的技术支撑。
本文描述了漫画网站设计与实现的原理和开发过程,该系统是通过springboot框架来搭建后台,中间件使用的是Tomcat服务器,数据库管理平台采用开源的Mysql,前台使用的是JQuery框架,同时使用Validate校验框架,这样就可以减少前端代码的输入量,而且基于JQuery框架的Validat框架使用简单,是流行的前端使用框架,前端使用的主要是Java页面展示技术。
在开发前做了许多的准备,在本系统的设计和开发过程中阅览和学习了许多文献资料,从开发这个漫画网站的过程中我也收获了许许多多宝贵的方法以及设计思路,对系统的开发也起到了很重要的作用,系统的开发技术选用的都是自己比较熟悉的,比如Web、springboot、MYSQL,这些技术都是在以前的学习中学到了,其中许多的设计思路和方法都是在以前不断地学习中摸索出来的经验,其实对于我们来说工作量还是比较大的,但是正是由于之前的积累与准备,才能顺利的完成这个项目,由此看来,积累经验跟做好准备是十分重要的事情。
当然在该系统的设计与实现的过程中也离不开老师以及同学们的帮助,正是因为他们的指导与帮助,我才能够成功的在预期内完成了这个系统。同时在这个过程当中我也收获了很多东西,此系统也有需要改进的地方,但是由于专业知识的浅薄,并不能做到十分完美,希望以后有机会可以让其真正的投入到使用之中。
[1]徐少军,李宗哲,梅杰等. 基于Springboot+Vue框架的质量检验监督管理系统研发 [J]. 纺织标准与质量, 2024, (01): 11-14+21.
[2]束方鹏,张逸. 基于SpringBoot框架的数据转换系统及方法[P]. 江苏省: CN117289914B, 2024-02-02.
[3]刘畅,王陈. MySQL数据库课程的教学评价体系设计 [J]. 电子技术, 2024, 53 (01): 393-395.
[4]韩小龙,司珍,吕晓峰等. 基于面向对象编程的Java语言程序设计方法分析 [J]. 集成电路应用, 2024, 41 (01): 228-229.
[5]谭光兴,甘景,戚秋晨. 基于Java语言的远程数据采集系统设计与实现 [J]. 科技与创新, 2024, (01): 19-22.
[6]吴昊,张丹. 基于SpringBoot框架的大学生网上兼职系统设计与实现 [J]. 电脑知识与技术, 2023, 19 (35): 68-72.
[7]黄娟. 基于SpringBoot和Vue.js的医院数据提取管理平台的设计与实现 [J]. 信息与电脑(理论版), 2023, 35 (22): 91-93.
[8]李冉,杨军,宁玉富等. 基于SpringBoot框架和CNN-SVM算法的浸润性肺腺癌细胞的初步诊断筛选系统 [J]. 无线互联科技, 2023, 20 (22): 58-61.
[9]Xiao Z ,Ali Y ,Xin W , et al. Sports Work Strategy of College Counselors Based on MySQL Database Big Data Analysis [J]. International Journal of Information Technology and Web Engineering (IJITWE), 2023, 18 (1): 1-14.
[10]杨芬,宋晓燕. MySQL数据库应用的课程教学分析 [J]. 电子技术, 2023, 52 (10): 180-181.
[11]Karthik G ,Debashish M ,Jagoda C , et al. Developing a MySQL Database for the Provenance of Black Tiger Prawns (Penaeus monodon). [J]. Foods (Basel, Switzerland), 2023, 12 (14):
[12]李文杰. 基于SpringBoot与Vue框架的公益性教育咨询平台系统研发[D]. 山东大学, 2023.
[13]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.
[14]陈雅赛. 日本数字漫画版权问题与治理对策研究 [J]. 编辑之友, 2022, (02): 107-112.
[15]刘欣,李亮亮,牛聪. 基于Vue和SpringBoot框架的流域监管平台的研究和应用[C]// 《中国防汛抗旱》杂志社,中国水利学会减灾专业委员会,水利部防洪抗旱减灾工程技术研究中心(中国水利水电科学研究院防洪抗旱减灾研究中心). 第十一届防汛抗旱信息化论坛论文集. 黄河水利委员会信息中心;郑州黄河河务局;, 2021: 5.
[16]孟晓明,牛兴侦,郭文放. 日本漫画出版对我国的启示 [J]. 出版广角, 2019, (13): 22-25.
[17]李舒,杨梦帆. 新闻漫画:现状、问题与发展——兼论纸媒“内容为王”的困境及解决之道 [J]. 新闻战线, 2019, (17): 107-109.
致 谢
逝者如斯夫,不舍昼夜。转眼间,大学生活便已经接近尾声,人面对着离别与结束,总是充满着不舍与茫然,我亦如此,仍记得那年秋天,我迫不及待的提前一天到了学校,面对学校巍峨的大门,我心里充满了期待:这里,就是我新生活的起点吗?那天,阳光明媚,学校的欢迎仪式很热烈,我面对着一个个对着我微笑的同学,仿佛一缕缕阳光透过胸口照进了我心里,同时,在那天我认识可爱的室友,我们携手共同度过了这难忘的两年。如今,我望着这篇论文的致谢,不禁又要问自己:现在,我们就要说再见了吗?
感慨莫名,不知所言。遥想当初刚来学校的时候,心里总是想着工科学校会过于板正,会缺乏一些柔情,当时心里甚至有一点点排斥,但是随着我对学校的慢慢认识与了解,我才认识到了她的美丽,她的柔情,并且慢慢的喜欢上了这个校园,但是时间太快了,快到我还没有好好体会她的美丽便要离开了,但是她带给我的回忆,永远不会离开我,也许真正离开那天我的眼里会满含泪水,我不是因为难过,我只是想将她的样子映在我的泪水里,刻在我的心里。最后,感谢我的老师们,是你们教授了我们知识与做人的道理;感谢我的室友们,是你们陪伴了我如此之久;感谢每位关心与支持我的人。
少年,追风赶月莫停留,平荒尽处是春山。