springboot+mybatis-plus+vue+element+vant2 implements short video website and simulates Xigua Video mobile terminal

The project includes management background, mobile terminal and back-end implementation, that is, two front-end projects plus back-end implementation. The database uses mysql5.8, uses redis cache, spring oauth2, security, token login, etc. The management background front-end is implemented using vue+element, and the mobile terminal is implemented using vue+vant2. The backend is implemented using java springboot.

The following is the project online access preview address:

Management backend: click to visit

Mobile: Click to visit

element official website: click to visit

vant2 official website: click to visit

2. Management background

1. Log in

2. Log in successfully and enter the welcome page

3. Video classification management

4. Video tag management

5.Video management

6.Comment management

7.User management

8. Dictionary management (similar to back-end enumeration)

9. Parameter management (rich text entry)

10.Administrator management

3. Mobile terminal

1.Home page

2. Video details

3. Video comments

4.My

5. Edit information

6.My attention

7.My fans

8.My videos

9. Log in and register

4. Key code implementation

1. Back-end project structure chart, idea development tools

2. Database table script design and implementation

-- 系统管理员
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. Video controller layer

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. Back-end development document access

Access address format: backend project address + backend project port number +/doc.html

For example: http://localhost:9002/doc.html

5. Project port number configuration

6. Screenshots of mobile terminal projects

7. Screenshots of management backend and front-end projects

5. Summary

The project is fully functional and may be continuously upgraded in the future.

Follow the author and stay informed about more good projects!

The author's homepage also has more good projects to share!

To get the source code or if you need help, just click the business card + author at the back of the blog!

Other collections