首页 > 其他分享 >基于SpringBoot+Vue技术的宇宙动漫网站

基于SpringBoot+Vue技术的宇宙动漫网站

时间:2024-09-04 09:53:48浏览次数:10  
标签:Vue varchar SpringBoot 用户 信息 动漫 主键 页面

基于SpringBoot+Vue技术的宇宙动漫网站(源码+L文+ppt)4-022

图片

系统设计    

4.1 总体功能设计

一般个人用户和管理者都需要登录才能进入宇宙动漫网站,使用者登录时会在后台判断使用的权限类型,包括一般使用者和管理者,一般使用者只能对动漫信息提供查阅和个别使用信息内容的查看,而管理者则能对多个信息内容提供使用。

整体系统的主要功能模块如图4-1:

图片

图4-1 宇宙动漫网站功能图

              

4.3 数据库设计

管理静止网站时是由WEB客户端向Web传送静态页面,而Web客户端直接对所传送的静态页面进行管理。

实现动态网页数据库信息查询请求的最基本处理流程概括为:当一个WEB用户成功向动态网页服务器数据库发送信息请求成功后,对其动态页面库的一种主要的处理实现方法之一是,屏蔽掉其中所有动态HTML代码,只须使用一个动态的动态网页文件,由动态Web浏览器程序直接地在该数据库服务器上进行传递动态信息,然后再通过该数据库服务器的处理程序返回到信息集,由该Web应用服务器处理程序再一次将包含动态程序代码在内的动态页面,转化为一个静态页面信息并自动返回到网页浏览器。也就是网站在这个动态页里对网页信息自动进行检索并最终把这些信息自动返回传递到网站用户处的这个全自动化过程。

数据库查询示意图如图4-3:

图片

图4-3 数据库查询示意图

数据库设计阶段目标表见表4-4:    

阶段

目标

概念设计

了解功能需求,通过分析系统功能定义出系统有哪些实体联系图(即E-R图)

逻辑设计

把E-R图转换成能处理的逻辑模型,检查是否满足第三范式的要求

物理设计

基于基本数据模型,生成适用于应用系统的物理结构

表4-4 数据库设计阶段目标表

4.3.1 E-R图设计

根据以上分析,本系统中包含多个实体,根据他们以及他们的关系绘制出E-R图如下:

(1)用户信息E-R图如下图4-5:

图片

图4-5用户信息E-R图

(5)宇宙动漫网站总体E-R图如下图4-9:

图片

图4-9宇宙动漫网站总体E-R图

4.3.2  数据库关系表设计(共32张表)

数据库关系表如下:

表4-1:动漫信息评论表

字段名称

类型

长度

字段说明

主键

默认值

id        

bigint

                  

主键

    主键 

                  

addtime

timestamp

                  

创建时间

                  

CURRENT_TIMESTAMP

refid

bigint

                  

关联表id

                  

                  

userid

bigint

                  

用户id

                  

                  

avatarurl

longtext

4294967295

头像

                  

                  

nickname

varchar

200

用户名

                  

                  

content

longtext

4294967295

评论内容

                  

                  

score

double

                  

评分

                  

                  

reply

longtext

4294967295

回复内容

                  

                  

表4-2:动漫信息评论表

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

                  

主键

    主键 

                  

addtime

timestamp

                  

创建时间

                  

CURRENT_TIMESTAMP

refid

bigint

                  

关联表id

                  

                  

userid

bigint

                  

用户id

                  

                  

avatarurl

longtext

4294967295

头像

                  

                  

nickname

varchar

200

用户名

                  

                  

content        

longtext

4294967295

评论内容

                  

                  

score

double

                  

评分

                  

                  

reply

longtext

4294967295

回复内容

                  

                  

表4-3:用户表

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

                  

主键

    主键 

                  

username

varchar

100

用户名

                  

                  

password

varchar

100

密码

                  

                  

image

varchar

200

头像

                  

                  

role

varchar

100

角色

                  

管理员

addtime

timestamp

                  

新增时间

                  

CURRENT_TIMESTAMP

此处省略28张表。。。

表4-31:动漫分类

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

                  

主键

    主键 

                  

addtime

timestamp

                  

创建时间

                  

CURRENT_TIMESTAMP

dongmanfenlei

varchar

200

动漫分类

                  

                  

image

longtext

4294967295

image

                  

                  

表4-32:用户

字段名称

类型

长度

字段说明

主键

默认值

id

bigint

                  

主键

    主键 

                  

addtime

timestamp

                  

创建时间

                  

CURRENT_TIMESTAMP        

yonghuming

varchar

200

用户名

                  

                  

mima

varchar

200

密码

                  

                  

xingming

varchar

200

姓名

                  

                  

xingbie

varchar

200

性别

                  

                  

touxiang

longtext

4294967295

头像

                  

                  

shouji

varchar

200

手机

                  

                  

pquestion

varchar

200

密保问题

                  

                  

panswer

varchar

200

密保答案

                  

                  

status

int

                  

状态

                  

0

第5章 系统实现

5.1 用户前台系统功能模块实现

当游客打开系统的网址后,首先看到的就是首页界面。在这里,游客能够看到宇宙动漫网站的导航条显示首页、动漫信息、社区互动、公告信息、在线留言、个人中心。系统首页界面如图5-1所示:    

图片

图5-1系统首页界面

          

当用户进入前台系统进行相关操作前必须先注册登录,在注册页面填写用户账号密码等信息,前端将这些信息通过HTTP请求发送到Java后端。后端处理这些信息,检查用户名是否唯一,并将新用户数据存入MySQL数据库。完成后,后端向前端发送注册成功的确认,前端随后通知用户完成注册。这个过程实现了新用户的数据收集、验证和存储。如图5-2所示。

图片

    

图5-2用户注册界面图

          

          

用户登录,用户在登录页面通过填写账号、密码,完成登录,在登录流程中,用户首先在Vue前端界面输入用户名和密码。这些信息通过HTTP请求发送到Java后端。后端接收请求,通过与MySQL数据库交互验证用户凭证。如果认证成功,后端生成一个令牌(如JWT)并返回给前端,允许用户访问系统。这个过程涵盖了从用户输入到系统验证和响应的全过程。如图5-3所示。

图片

图5-3用户登录界面图

          

用户点击动漫信息,在动漫信息页面的搜索栏输入动漫名称、动漫分类、所属地区、动漫作者、发行年份等信息,进行查询,还可以查看动漫名称、动漫分类、封面信息、所属地区、动漫作者、演员信息、发行公司、发行年份、动漫视频、评论数、收藏数等信息,如有需要可以进行在线订阅或者收藏、评论等操作;如图5-4所示。    

图片

          

图5-4动漫信息页面

          

用户点击公告信息,在公告信息页面的搜索栏输入标题等信息,进行搜索,还可以查看标题、分类名称、发布人、点击次数、收藏数、图片等信息;如图5-5所示:

图片

图5-5公告信息页面

              

用户点击个人中心,在个人中心页面可以修改个人信息、密码修改,还可以对订阅信息、更新信息、我的发布、我的收藏进行详细操作,如图5-6所示。

图片

          

图5-6个人中心界面图

5.2管理员功能模块实现

本模块主要是使用者可以通过宇宙动漫网站的首页进入该系统。用户输入正确的账号名和密码,一旦输入信息有错,将在系统显示错误提示,同时严禁系统用户做出其他动作。如果注册信息正确无误,系统就会按照使用者的身份信息做出有关权利的判定,用户进入前台系统,管理者则进入后台系统。管理员登录主页面如图5-7所示:    

图片

图5-7 管理员登录主页面

管理员进入主页面,主要功能包括对系统首页、个人中心、用户管理、动漫分类管理、动漫信息管理、订阅信息管理、更新通知管理、在线留言、社区互动、系统管理等进行操作。管理员主页面如图5-8所示:

图片

图5-8管理员主界面

          

用户信息功能在视图层(view层)进行交互,比如点击“添加”按钮或填写用户信息表单。这些用户信息动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后,调用服务层(service层)以执行相关的业务逻辑,例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后,进一步与数据访问对象层(DAO层)交互,后者负责具体的数据操作如查询、添加、修改或删除用户信息,并将操作结果返回给控制器。最终,控制器根据这些结果更新视图层,以便用户信息功能可以看到最新的信息或相应的操作反馈。在用户信息页面的输入栏中输入用户名、姓名进行查询,可以查看到用户详细信息,并根据需要进行修改或者删除等操作;如图5-9所示:    

图片

图5-9用户管理界面

          

动漫分类功能在视图层(view层)进行交互,比如点击“添加”按钮或填写动漫分类表单。这些动漫分类动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后,调用服务层(service层)以执行相关的业务逻辑,例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后,进一步与数据访问对象层(DAO层)交互,后者负责具体的数据操作如查询、添加、修改或删除动漫分类,并将操作结果返回给控制器。最终,控制器根据这些结果更新视图层,以便动漫分类功能可以看到最新的信息或相应的操作反馈。在动漫分类页面的输入栏中输入动漫分类进行查询,可以查看到动漫分类详细信息,并根据需要进行修改或者删除等操作。如图5-10所示:    

图片

图5-10动漫分类管理界面

          

管理员点击动漫信息管理,在动漫信息管理页面输入动漫名称、动漫分类、封面信息、所属地区、动漫作者、演员信息、发行公司、发行年份、动漫视频、评论数、收藏数等信息,可以查询或者添加、删除动漫信息等操作。如图5-11所示:

图片

    

图5-11动漫信息管理界面

          

管理员点击订阅信息管理,在订阅信息管理页面对订阅单号、动漫名称、封面消息、订阅日期、信息备注、用户名、回复内容、回复等信息,可以查询或删除订阅信息等操作。如图5-12所示:

图片

图5-12订阅信息管理界面

          

管理员点击更新通知管理,在更新通知管理页面对通知名称、动漫名称、封面信息、通知内容、通知日期、用户名等信息,可以查询或删除更新通知等操作。如图5-13所示:    

图片

图5-13更新通知管理界面

          

管理员点击在线留言,在在线留言页面对用户名、留言内容、留言图片、回复内容、回复图片等信息,可以查询或删除在线留言等操作。如图5-14所示:

图片

图5-14在线留言界面    

点击领取源码

标签:Vue,varchar,SpringBoot,用户,信息,动漫,主键,页面
From: https://blog.csdn.net/2401_83475123/article/details/141862578

相关文章

  • springboot名著阅读网站
     基于springboot+vue实现的名著阅读网站(源码+L文+ppt)4-0354系统设计  4.1系统概述  名著阅读网站的设计与开发是指对该系统的各个功能模块进行详细设计,力求每个模块都能够满足用户的要求,系统开发完成后还需对系统进行单元测试和系统测试,发现系统中存在的问题并解......
  • springboot博客系统
    基于springboot+vue实现的博客系统 (源码+L文+ppt)4-0314系统设计    博客系统的整体结构设计主要分为两大部分:管理员和博主。他们的权限不同,于是操作功能也有所不同。整体结构设计如图4-2所示。图4-2 系统结构图4.3数据库设计  该系统基于MySQL数据库来管......
  • Vue3组件通信详解
    Vue3中的组件通讯是Vue应用开发中非常重要的一环,它允许组件之间传递数据和方法,从而实现数据的共享和功能的调用。下面将分别介绍父子组件、孙子组件(祖孙组件)、兄弟组件之间的通讯方式,并给出示例代码和总结表格。一、父子组件通讯1.父传子(props)父组件通过props向子组......
  • 【开题报告】基于Springboot+vue基于Vue的交通管理系统的设计与实现(程序+源码+论文)
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着城市化进程的加速,交通问题日益成为制约城市发展的重要因素。交通拥堵、事故频发、管理效率低下等问题不仅影响了市民的出行体验,也对城市的经济社......
  • 【开题报告】基于Springboot+vue基于Web的高校工会信息管理系统的设计与实现(程序+源码
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着高校规模的不断扩大和教职工队伍的日益壮大,高校工会作为连接学校与教职工的重要桥梁,其管理工作面临着前所未有的挑战。传统的手工管理模式已难以......
  • (附论文)基于Springboot和Vue的旅游出行指南系统(615)
    获取源码请滑到最底部访问官网项目配套调试视频和相对应的软件安装包1、项目描述该系统包括个人管理员和用户两部分。同时还能为用户提供一个方便实用的旅游出行指南,使得用户能够及时地找到合适自己的旅游出行信息。个人用户在使用本系统时,可以浏览景点信息,酒店信息,餐厅信息......
  • 基于Springboot和Vue的个性化图书推荐系统(609)
    获取源码请滑到最底部访问官网项目配套调试视频和相对应的软件安装包1、项目描述具体请看视频演示 2、项目开发工具开发工具:Idea或Eclipse数据库:MysqlJar包仓库:Maven前端框架:Vue2后端框架:Springboot3、项目图片4、演示视频基于Springboot和Vue的个性化图书推......
  • (附论文)基于Springboot和Vue的电子产品销售系统(607)
    获取源码请滑到最底部访问官网项目配套调试视频和相对应的软件安装包1、项目描述包含管理员和用户两个层级的用户角色,系统管理员可以对个人中心、用户管理、产品类别管理、电子产品管理、留言板管理、系统管理、订单管理等功能进行详情,修改和删除操作;具体请看视频演示 2......
  • (附论文)基于Springboot和Vue的雪具销售系统(601)
    获取源码请滑到最底部访问官网项目配套调试视频和相对应的软件安装包1、项目描述系统使用过程主要涉及到管理员、用户和销售员三种角色,主要包含个人中心、销售员管理、用户管理、雪具分类管理、雪具商品管理、进货记录管理、退货记录管理、系统管理、订单管理等功能。具体请......
  • 基于VUE2-dataV和echarts实现的可视化大屏,百分比适配PC端
    可视化平台中,数据分别通过仪表盘、环状图、柱形图、曲线图、滚动表格等多种形式展示数据变化。可视化平台大致分为左、中、右三部分,左侧由能耗总览、耗能占比、库存预警构成,中间由数据总览、销售计划完成率构成,右侧由销售统计、销售排名(TOP8)、生产统计构成。平台右上角动态......