springboot+mybatis-plus+vue+element+vant2实现短视频网站，模拟西瓜视频移动端

目录

一、前言

二、管理后台

1.登录

2.登录成功，进入欢迎页

​编辑

 3.视频分类管理

4. 视频标签管理

5.视频管理 

6.评论管理

​编辑 7.用户管理

8.字典管理 （类似于后端的枚举）

 9.参数管理（富文本录入）

 10.管理员管理

 三、移动端

 1.首页

 2.视频详情

3.视频评论 

 4.我的

 5.编辑资料

6.我的关注

​编辑 

7.我的粉丝 

8.我的视频

​编辑

9.登录、注册

​编辑 

 四、关键代码实现

1.后端项目结构图，idea开发工具

2.数据库表脚本设计实现

3.视频controller层

4.后端开发文档访问

5.项目端口号配置

 6.移动端项目截图

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

五、 总结

---

一、前言

项目包含管理后台、移动端以及后端实现，即是两个前端项目加后端实现，数据库采用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.数据库表脚本设计实现

-- 系统管理员
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 = InnoDBDEFAULT 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 = InnoDBDEFAULT 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 = InnoDBDEFAULT 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 = InnoDBDEFAULT 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层

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 {@Resourceprivate 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.管理后台前端项目截图

 

五、 总结

项目功能完整，后续可能将不断升级。

关注作者，及时了解更多好项目！

作者主页也有更多好项目分享！

获取源码或如需帮助，可通过博客后面名片+作者即可！

 

 其他作品集合

1. 《vue+vant2完美实现香奈儿移动端商城网站》
2. 《vue+elementui实现联想购物商城，样式美观大方》
3. 《vue+elementui实现英雄联盟道具城》
4. 《vue+elementui实现app布局小米商城，样式美观大方，功能完整》
5. 《vue完美模拟pc版快手，实现短视频，含短视频详情播放》
6. 《vue+element实现美观大方好看的音乐网站，仿照咪咕音乐网》     
7. 《vue实现功能完整的购物商城，商品零食、电商通用商城》
8. 《vue+element实现蔬菜、水果、电商商城》
9. 《vue+element简单实现电商商城网站，模仿小米电商商城》
10. 《vue实现美观大方的动漫、cos、帖子类型网站》
11. 《vue实现好看的相册、图片网站》
12. 《高度仿PC版《微信读书》，好看的小说、读书网站》
13. 《vue+element实现非常好看的鲜花网站商城，页面完整，样式美观》
14. 《vue+elementui+springboot前后端分离实现通用商城管理后台》
15. 《微信小程序日记、微信小程序个人空间、个人日记》
16. 《vue+element模仿腾讯视频电影网站》
17. 《vue+element高度仿照QQ音乐，完美实现PC端QQ音乐》
18. 《vue+element详细完整实现个人博客、个人网站》
19. 《vue+elementui+springboot前后端分离实现学校帖子网站，学校大作业》
20. 《vue+elementui实现U袋网-完整版》
21. 《vue+element+electron仿微信实现》
22. 《vue+element模仿电商商城，前后端分离实现，下单微信扫码支付》
23. 《electron+vue+elementui实现类似QQ窗口靠边自动边缘隐藏》
24. 《微信小程序仿唯聚时代，微信小程序商城》
25. 《jquery+bootstrap完整丰富样式开发框架源码，各种现成样式简单易用》
26. 《html+css响应式旅游主题网站模板，旅游网站，企业文化新闻类网站》
27. 《css+html各种动态、动画、3D相册等7件套》
28. 《仿华为电商商城，官网，华为超级新品日demo,大屏霸气且简洁》
29. 《vue+element简单实现商城网站首页，模仿电商商城》
30. 《vue+elementui实现非常好看的博客、网站首页，网站模板》
31. 《elementui+vue实现经典管理系统布局框架，拿来即用》
32. 《简系统登录页模板html+vue+elementui》
33. 《vue+elementui完美实现博客、网站、个人网站，高仿“张凯博客”》
34. 《vue+elementui完美实现后台管理系统的左、右、顶部菜单布局》
35. 《html5+css3实现3D正方体动画相册2种+3D旋转木马立体动画相册+表白文字加动画爱心+炫酷万花筒五件套含音乐》
36. 《后端使用springboot+maven+shiro+mybatis+mysql，前端使用H-ui.admin_v3.1.3.1，快速实现管理后台功能》
37. 《springboot+thymeleaf+maven+html+css实现精美大方好看官网模板完整源码》
38. 《html+css实现好友列表，类似QQ群聊成员列表》