目录
[4. 视频标签管理](#4. 视频标签管理)
[编辑 7.用户管理](#编辑 7.用户管理)
[8.字典管理 (类似于后端的枚举)](#8.字典管理 (类似于后端的枚举))
[五、 总结](#五、 总结)
一、前言
项目包含管理后台、移动端以及后端实现,即是两个前端项目加后端实现,数据库采用mysql5.8,使用redis缓存,spring oauth2、security、token登录等。管理后台前端采用vue+element实现,移动端使用vue+vant2实现。后端使用java springboot实现。
以下是项目在线访问预览地址:
管理后台:点击访问
移动端:点击访问
element官网:点击访问
vant2官网:点击访问
二、管理后台
1.登录

2.登录成功,进入欢迎页
3.视频分类管理


4. 视频标签管理

5.视频管理

6.评论管理
7.用户管理

8.字典管理 (类似于后端的枚举)


9.参数管理(富文本录入)


10.管理员管理

三、移动端
1.首页

2.视频详情

3.视频评论

4.我的

5.编辑资料


6.我的关注
7.我的粉丝

8.我的视频
9.登录、注册

四、关键代码实现
1.后端项目结构图,idea开发工具

2.数据库表脚本设计实现
sql
-- 系统管理员
CREATE TABLE `admin` (
`id` bigint NOT NULL COMMENT '主键',
`username` varchar(60) NOT NULL COMMENT '用户名',
`password` varchar(100) NOT NULL COMMENT '登录密码',
`real_name` varchar(32) DEFAULT NULL COMMENT '姓名',
`gender` tinyint(1) DEFAULT 0 COMMENT '用户性别 0保密 1男 2女',
`avatar` varchar(300) DEFAULT NULL COMMENT '头像',
`phone` varchar(20) DEFAULT NULL COMMENT '手机',
`email` varchar(60) DEFAULT NULL COMMENT '邮箱',
`remark` varchar(200) DEFAULT NULL COMMENT '备注',
`status` tinyint(1) DEFAULT 0 COMMENT '是否禁用 0否 1是',
`deleted` tinyint(1) DEFAULT 0 COMMENT '逻辑删除标记 是否已删除: 0否 1是',
`create_system_time` datetime DEFAULT NULL COMMENT '创建时间',
`create_system_admin_id` bigint DEFAULT NULL COMMENT '创建人ID',
`update_system_time` datetime DEFAULT NULL COMMENT '更新时间',
`update_system_admin_id` bigint DEFAULT NULL COMMENT '修改人ID',
`admin_type` tinyint(1) DEFAULT '1' COMMENT '管理员类型 0超级管理员 1普通管理员',
PRIMARY KEY (`id`) USING BTREE,
UNIQUE KEY `admin_key_username` (`username`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='系统管理员';
-- 2022-10-19 用户信息
CREATE TABLE `user_info`
(
`id` bigint NOT NULL COMMENT '主键',
`nickname` varchar(10) NOT NULL COMMENT '用户名称',
`phone` varchar(20) NOT NULL COMMENT '手机号',
`password` varchar(255) NOT NULL COMMENT '登录密码 加密',
`avatar` varchar(225) DEFAULT NULL COMMENT '头像',
`gender` TINYINT(1) DEFAULT 0 COMMENT '性别 0保密 1男 2女',
`signature` varchar(225) DEFAULT NULL COMMENT '个性签名',
`remark` varchar(225) DEFAULT NULL COMMENT '备注',
`status` TINYINT(1) DEFAULT 0 COMMENT '是否禁用 0否 1是',
`deleted` tinyint(1) DEFAULT '0' COMMENT '逻辑删除标记 是否已删除: 0否 1是',
`create_time` datetime(0) COMMENT '创建时间',
`update_time` datetime(0) COMMENT '更新时间',
`update_system_time` datetime DEFAULT NULL COMMENT '更新时间-管理员',
`update_system_admin_id` bigint DEFAULT NULL COMMENT '修改人ID-管理员',
PRIMARY KEY (`id`) USING BTREE,
UNIQUE KEY `phone` (`phone`) USING BTREE
) ENGINE = InnoDB
DEFAULT CHARSET = utf8mb4 COMMENT ='用户信息';
-- 视频分类
CREATE TABLE `video_type` (
`id` bigint NOT NULL COMMENT '主键',
`type_name` varchar(255) NOT NULL COMMENT '分类名称',
`sort` int NOT NULL DEFAULT 0 COMMENT '排序,越小越靠前',
`remark` varchar(255) DEFAULT NULL COMMENT '备注',
`status` tinyint(1) DEFAULT 0 COMMENT '是否禁用 0否 1是',
`deleted` tinyint(1) DEFAULT 0 COMMENT '逻辑删除标记 是否已删除: 0否 1是',
`create_system_time` datetime DEFAULT NULL COMMENT '创建时间',
`create_system_admin_id` bigint DEFAULT NULL COMMENT '创建人ID',
`update_system_time` datetime DEFAULT NULL COMMENT '更新时间',
`update_system_admin_id` bigint DEFAULT NULL COMMENT '修改人ID',
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='视频分类';
-- 商品所属分类
CREATE TABLE `video_type_item` (
`id` bigint NOT NULL COMMENT '主键',
`video_id` bigint NOT NULL DEFAULT 0 COMMENT '视频主键',
`video_type_id` bigint NOT NULL DEFAULT 0 COMMENT '分类主键',
`deleted` tinyint(1) DEFAULT '0' COMMENT '逻辑删除标记 是否已删除: 0否 1是',
`create_time` datetime NOT NULL COMMENT '创建时间',
`update_time` datetime NOT NULL COMMENT '修改时间',
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品所属分类';
-- 视频标签
CREATE TABLE `video_label` (
`id` bigint NOT NULL COMMENT '主键',
`label_name` varchar(255) NOT NULL COMMENT '分类名称',
`sort` int NOT NULL DEFAULT 0 COMMENT '排序,越小越靠前',
`remark` varchar(255) DEFAULT NULL COMMENT '备注',
`status` tinyint(1) DEFAULT 0 COMMENT '是否禁用 0否 1是',
`deleted` tinyint(1) DEFAULT 0 COMMENT '逻辑删除标记 是否已删除: 0否 1是',
`create_system_time` datetime DEFAULT NULL COMMENT '创建时间',
`create_system_admin_id` bigint DEFAULT NULL COMMENT '创建人ID',
`update_system_time` datetime DEFAULT NULL COMMENT '更新时间',
`update_system_admin_id` bigint DEFAULT NULL COMMENT '修改人ID',
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='视频标签';
-- 商品所属标签
CREATE TABLE `video_label_item` (
`id` bigint NOT NULL COMMENT '主键',
`video_id` bigint NOT NULL DEFAULT 0 COMMENT '视频主键',
`video_label_id` bigint NOT NULL DEFAULT 0 COMMENT '标签主键',
`deleted` tinyint(1) DEFAULT '0' COMMENT '逻辑删除标记 是否已删除: 0否 1是',
`create_time` datetime NOT NULL COMMENT '创建时间',
`update_time` datetime NOT NULL COMMENT '修改时间',
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品所属标签';
-- 视频
CREATE TABLE `video`
(
`id` bigint NOT NULL COMMENT '主键',
`user_id` bigint NOT NULL COMMENT '所属用户主键',
`video_name` varchar(500) NOT NULL COMMENT '视频名称',
`video_des` varchar(1000) DEFAULT NULL COMMENT '视频简介',
`cover_path` varchar(500) DEFAULT NULL COMMENT '封面图片',
`upload_type` tinyint(1) DEFAULT 1 COMMENT '上传类型 1文件上传 2录入路径',
`video_path` varchar(2000) DEFAULT NULL COMMENT '视频路径',
`browse_num` int NOT NULL DEFAULT 0 COMMENT '观看数量',
`status` tinyint(1) DEFAULT 0 COMMENT '是否上架 0否 1是',
`deleted` tinyint(1) DEFAULT 0 COMMENT '逻辑删除标记 是否已删除: 0否 1是',
`create_system_time` datetime DEFAULT NULL COMMENT '创建时间',
`create_system_admin_id` bigint DEFAULT NULL COMMENT '创建人ID',
`update_system_time` datetime DEFAULT NULL COMMENT '更新时间',
`update_system_admin_id` bigint DEFAULT NULL COMMENT '修改人ID',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB
DEFAULT CHARSET = utf8mb4 COMMENT ='视频';
-- 系统字典
CREATE TABLE `system_dict` (
`id` bigint NOT NULL COMMENT '主键',
`parent_id` bigint NOT NULL DEFAULT '0' COMMENT '父主键',
`code` varchar(255) NOT NULL COMMENT '字典编码',
`dict_key` int DEFAULT NULL COMMENT '字典值',
`dict_name` varchar(255) NOT NULL COMMENT '字典名称',
`sort` int NOT NULL DEFAULT 0 COMMENT '排序,越小越靠前',
`remark` varchar(255) DEFAULT NULL COMMENT '字典备注',
`status` tinyint(1) DEFAULT 0 COMMENT '是否禁用 0否 1是',
`deleted` tinyint(1) DEFAULT 0 COMMENT '逻辑删除标记 是否已删除: 0否 1是',
`create_system_time` datetime DEFAULT NULL COMMENT '创建时间',
`create_system_admin_id` bigint DEFAULT NULL COMMENT '创建人ID',
`update_system_time` datetime DEFAULT NULL COMMENT '更新时间',
`update_system_admin_id` bigint DEFAULT NULL COMMENT '修改人ID',
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='系统字典';
-- 系统参数
CREATE TABLE `system_param` (
`id` bigint NOT NULL COMMENT '主键',
`code` varchar(255) NOT NULL COMMENT '参数编码,唯一',
`title` varchar(255) NOT NULL COMMENT '标题',
`content` longtext NOT NULL COMMENT '内容',
`sort` int NOT NULL DEFAULT 0 COMMENT '排序,越小越靠前',
`remark` varchar(255) DEFAULT NULL COMMENT '备注',
`status` tinyint(1) DEFAULT 0 COMMENT '是否禁用 0否 1是',
`deleted` tinyint(1) DEFAULT 0 COMMENT '逻辑删除标记 是否已删除: 0否 1是',
`create_system_time` datetime DEFAULT NULL COMMENT '创建时间',
`create_system_admin_id` bigint DEFAULT NULL COMMENT '创建人ID',
`update_system_time` datetime DEFAULT NULL COMMENT '更新时间',
`update_system_admin_id` bigint DEFAULT NULL COMMENT '修改人ID',
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='系统参数';
-- 视频评论
CREATE TABLE `video_comment`
(
`id` bigint NOT NULL COMMENT '主键',
`user_id` bigint NOT NULL COMMENT '用户主键',
`video_id` bigint NOT NULL COMMENT '视频主键',
`content` varchar(1000) DEFAULT NULL COMMENT '评论内容',
`like_num` int NOT NULL DEFAULT 0 COMMENT '点赞数量',
`status` TINYINT(1) NOT NULL DEFAULT 0 COMMENT '是否禁用 0否 1是',
`deleted` tinyint(1) DEFAULT 0 COMMENT '逻辑删除标记 是否已删除: 0否 1是',
`create_time` datetime(0) COMMENT '创建时间',
`update_time` datetime(0) COMMENT '更新时间',
`update_system_time` datetime DEFAULT NULL COMMENT '更新时间-管理员',
`update_system_admin_id` bigint DEFAULT NULL COMMENT '修改人ID-管理员',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB
DEFAULT CHARSET = utf8mb4 COMMENT ='视频评论';
-- 视频评论点赞
CREATE TABLE `video_comment_like`
(
`id` bigint NOT NULL COMMENT '主键',
`user_id` bigint NOT NULL COMMENT '用户主键',
`comment_id` bigint NOT NULL COMMENT '评论主键',
`deleted` tinyint(1) DEFAULT 0 COMMENT '逻辑删除标记 是否已删除: 0否 1是',
`create_time` datetime(0) COMMENT '创建时间',
`update_time` datetime(0) COMMENT '更新时间',
PRIMARY KEY (`id`) USING BTREE,
UNIQUE KEY `user_id_comment_id` (`user_id`,`comment_id`) USING BTREE
) ENGINE = InnoDB
DEFAULT CHARSET = utf8mb4 COMMENT ='视频评论点赞';
-- 用户关注记录
CREATE TABLE `user_follow` (
`id` bigint NOT NULL COMMENT '主键',
`user_id` bigint NOT NULL COMMENT '登录用户主键',
`be_followed_user_id` bigint NOT NULL COMMENT '被关注用户id',
`deleted` tinyint(1) DEFAULT '0' COMMENT '逻辑删除标记 是否已删除: 0否 1是',
`create_time` datetime NOT NULL COMMENT '创建时间',
`update_time` datetime NOT NULL COMMENT '修改时间',
PRIMARY KEY (`id`) USING BTREE,
UNIQUE KEY `user_id_be_followed_user_id` (`user_id`,`be_followed_user_id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户关注记录';
3.视频controller层
java
package com.product.controller;
import com.product.entity.base.PageQuery;
import com.product.entity.base.Result;
import com.product.entity.base.ResultPage;
import com.product.entity.req.VideoReq;
import com.product.entity.vo.VideoVO;
import com.product.service.VideoService;
import com.product.util.CommonUtil;
import com.product.util.JwtUtil;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiImplicitParams;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.annotation.Resource;
import java.util.List;
/**
* @author hjf
* @date 2023-03-21 10:26
* @describe 视频管理controller
*/
@Api(tags = "视频管理")
@Slf4j
@RestController
@RequestMapping("/video")
public class VideoController {
@Resource
private VideoService videoService;
@PostMapping("/add")
@ApiOperation(value = "添加", notes = "添加")
@ApiImplicitParams({
@ApiImplicitParam(name = "id", value = "ID", required = false, dataType = "Long", paramType = "query"),
@ApiImplicitParam(name = "videoName", value = "视频名称", required = true, dataType = "String", paramType = "query"),
@ApiImplicitParam(name = "userId", value = "发布用户", required = true, dataType = "Long", paramType = "query"),
@ApiImplicitParam(name = "videoTypeIdList", value = "分类", required = true, dataType = "List<Long>", paramType = "query"),
@ApiImplicitParam(name = "videoLabelIdList", value = "标签", required = true, dataType = "List<Long>", paramType = "query"),
@ApiImplicitParam(name = "videoDes", value = "视频描述", required = false, dataType = "String", paramType = "query"),
@ApiImplicitParam(name = "uploadType", value = "上传类型", required = true, dataType = "Integer", paramType = "query"),
@ApiImplicitParam(name = "videoPath", value = "视频路径", required = false, dataType = "String", paramType = "query"),
@ApiImplicitParam(name = "status", value = "状态", required = true, dataType = "Integer", paramType = "query"),
@ApiImplicitParam(name = "coverFile", value = "封面图片", required = false, dataType = "MultipartFile", paramType = "query"),
@ApiImplicitParam(name = "videoFile", value = "视频文件", required = false, dataType = "MultipartFile", paramType = "query")
})
public Result<?> add(
@RequestParam(value = "id",required = false) Long id,
@RequestParam("videoName") String videoName,
@RequestParam("userId") Long userId,
@RequestParam("videoTypeIdList") List<Long> videoTypeIdList,
@RequestParam("videoLabelIdList") List<Long> videoLabelIdList,
@RequestParam(value = "videoDes",required = false) String videoDes,
@RequestParam("uploadType") Integer uploadType,
@RequestParam(value = "videoPath",required = false) String videoPath,
@RequestParam("status") Integer status,
@RequestParam(value = "coverFile",required = false) MultipartFile coverFile,
@RequestParam(value = "videoFile",required = false) MultipartFile videoFile
) {
VideoReq videoReq = new VideoReq();
videoReq.setId(id);
videoReq.setVideoName(videoName);
videoReq.setUserId(userId);
videoReq.setVideoTypeIdList(videoTypeIdList);
videoReq.setVideoLabelIdList(videoLabelIdList);
videoReq.setVideoDes(videoDes);
videoReq.setUploadType(uploadType);
videoReq.setVideoPath(videoPath);
videoReq.setStatus(status);
videoReq.setCoverFile(coverFile);
videoReq.setVideoFile(videoFile);
return videoService.add(JwtUtil.getUserId(),videoReq);
}
@ApiOperation("分页")
@PostMapping("/getPage")
public ResultPage<VideoVO> getPage(@RequestBody PageQuery pageQuery) {
return videoService.getPage(JwtUtil.getUserId(),pageQuery);
}
@ApiOperation("详情")
@GetMapping("/getDetailById")
public Result<VideoVO> getDetail(@RequestParam("id") Long id) {
return videoService.getDetailById(id);
}
@ApiOperation("更新状态")
@PostMapping("/updateStatus")
public Result<?> updateStatus(@RequestParam("ids") String ids, @RequestParam("status") Integer status) {
List<Long> idList = CommonUtil.stringToLongList(ids);
return videoService.updateStatus(JwtUtil.getUserId(),idList,status);
}
@ApiOperation("删除")
@PostMapping("/del")
public Result<?> del(@RequestParam("ids") String ids) {
List<Long> idList = CommonUtil.stringToLongList(ids);
return videoService.del(JwtUtil.getUserId(),idList);
}
@ApiOperation("更新浏览数")
@PostMapping("/updateBrowseNum")
public Result<?> updateBrowseNum(@RequestParam("videoId") Long videoId) {
return videoService.updateBrowseNum(JwtUtil.getUserId(),videoId);
}
@ApiOperation("分页")
@GetMapping("/getPageByVideoTypeId")
@ApiImplicitParams({
@ApiImplicitParam(name = "videoTypeId", value = "视频分类ID", required = false, dataType = "Long", paramType = "query"),
@ApiImplicitParam(name = "currentPage", value = "当前页", required = true, dataType = "Integer", paramType = "query"),
@ApiImplicitParam(name = "pageSize", value = "当前页", required = false, dataType = "Integer", paramType = "query")
})
public ResultPage<VideoVO> getPageByVideoTypeId(
@RequestParam(value = "videoTypeId",required = false) Long videoTypeId,
@RequestParam("currentPage") Integer currentPage,
@RequestParam(value = "pageSize",required = false,defaultValue = "10") Integer pageSize
) {
return videoService.getPageByVideoTypeId(JwtUtil.getUserId(),videoTypeId,currentPage,pageSize);
}
@ApiOperation("视频详情-推荐列表")
@GetMapping("/getRecommendListForDetail")
@ApiImplicitParam(name = "videoId", value = "视频详情ID", required = true, dataType = "Long", paramType = "query")
public Result<List<VideoVO>> getRecommendListForDetail(@RequestParam(value = "videoId") Long videoId) {
return videoService.getRecommendListForDetail(JwtUtil.getUserId(),videoId,false);
}
@ApiOperation("获取用户发布视频数量")
@GetMapping("/getVideoNumByUserId")
public Result<Integer> getVideoNumByUserId(@RequestParam("userId") Long userId) {
return videoService.getVideoNumByUserId(userId);
}
@ApiOperation("分页-根据用户")
@GetMapping("/getPageByUserId")
@ApiImplicitParams({
@ApiImplicitParam(name = "currentPage", value = "当前页", required = true, dataType = "Integer", paramType = "query"),
@ApiImplicitParam(name = "pageSize", value = "当前页", required = false, dataType = "Integer", paramType = "query")
})
public ResultPage<VideoVO> getPageByUserId(
@RequestParam("currentPage") Integer currentPage,
@RequestParam(value = "pageSize",required = false,defaultValue = "10") Integer pageSize
) {
return videoService.getPageByUserId(JwtUtil.getUserId(),currentPage,pageSize);
}
}
4.后端开发文档访问
访问地址格式:后端项目地址+后端项目端口号+/doc.html
如:http://localhost:9002/doc.html

5.项目端口号配置

6.移动端项目截图

7.管理后台前端项目截图

五、 总结
项目功能完整,后续可能将不断升级。
关注作者,及时了解更多好项目!
作者主页也有更多好项目分享!
获取源码或如需帮助,可通过博客后面名片+作者即可!
其他作品集合
- 《vue+vant2完美实现香奈儿移动端商城网站》
- 《vue+elementui实现联想购物商城,样式美观大方》
- 《vue+elementui实现英雄联盟道具城》
- 《vue+elementui实现app布局小米商城,样式美观大方,功能完整》
- 《vue完美模拟pc版快手,实现短视频,含短视频详情播放》
- 《vue+element实现美观大方好看的音乐网站,仿照咪咕音乐网》
- 《vue实现功能完整的购物商城,商品零食、电商通用商城》
- 《vue+element实现蔬菜、水果、电商商城》
- 《vue+element简单实现电商商城网站,模仿小米电商商城》
- 《vue实现美观大方的动漫、cos、帖子类型网站》
- 《vue实现好看的相册、图片网站》
- 《高度仿PC版《微信读书》,好看的小说、读书网站》
- 《vue+element实现非常好看的鲜花网站商城,页面完整,样式美观》
- 《vue+elementui+springboot前后端分离实现通用商城管理后台》
- 《微信小程序日记、微信小程序个人空间、个人日记》
- 《vue+element模仿腾讯视频电影网站》
- 《vue+element高度仿照QQ音乐,完美实现PC端QQ音乐》
- 《vue+element详细完整实现个人博客、个人网站》
- 《vue+elementui+springboot前后端分离实现学校帖子网站,学校大作业》
- 《vue+elementui实现U袋网-完整版》
- 《vue+element+electron仿微信实现》
- 《vue+element模仿电商商城,前后端分离实现,下单微信扫码支付》
- 《electron+vue+elementui实现类似QQ窗口靠边自动边缘隐藏》
- 《微信小程序仿唯聚时代,微信小程序商城》
- 《jquery+bootstrap完整丰富样式开发框架源码,各种现成样式简单易用》
- 《html+css响应式旅游主题网站模板,旅游网站,企业文化新闻类网站》
- 《css+html各种动态、动画、3D相册等7件套》
- 《仿华为电商商城,官网,华为超级新品日demo,大屏霸气且简洁》
- 《vue+element简单实现商城网站首页,模仿电商商城》
- 《vue+elementui实现非常好看的博客、网站首页,网站模板》
- 《elementui+vue实现经典管理系统布局框架,拿来即用》
- 《简系统登录页模板html+vue+elementui》
- 《vue+elementui完美实现博客、网站、个人网站,高仿"张凯博客"》
- 《vue+elementui完美实现后台管理系统的左、右、顶部菜单布局》
- 《html5+css3实现3D正方体动画相册2种+3D旋转木马立体动画相册+表白文字加动画爱心+炫酷万花筒五件套含音乐》
- 《后端使用springboot+maven+shiro+mybatis+mysql,前端使用H-ui.admin_v3.1.3.1,快速实现管理后台功能》
- 《springboot+thymeleaf+maven+html+css实现精美大方好看官网模板完整源码》
- 《html+css实现好友列表,类似QQ群聊成员列表》