互动网站如何做,郑州网站开发汉狮,招聘网站数据分析怎么做,做网站要看什么书目录 一、前言
二、管理后台
1.登录
2.登录成功#xff0c;进入欢迎页
编辑 3.视频分类管理
4. 视频标签管理
5.视频管理
6.评论管理
编辑 7.用户管理
8.字典管理 #xff08;类似于后端的枚举#xff09; 9.参数管理#xff08;富文本录入#xff09; 10.管…目录 一、前言
二、管理后台
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登录等。管理后台前端采用vueelement实现移动端使用vuevant2实现。后端使用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
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 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
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 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
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 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
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 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
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 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
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 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
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 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
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 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 ListLong, paramType query),ApiImplicitParam(name videoLabelIdList, value 标签, required true, dataType ListLong, 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) ListLong videoTypeIdList,RequestParam(videoLabelIdList) ListLong 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 ResultPageVideoVO getPage(RequestBody PageQuery pageQuery) {return videoService.getPage(JwtUtil.getUserId(),pageQuery);}ApiOperation(详情)GetMapping(/getDetailById)public ResultVideoVO getDetail(RequestParam(id) Long id) {return videoService.getDetailById(id);}ApiOperation(更新状态)PostMapping(/updateStatus)public Result? updateStatus(RequestParam(ids) String ids, RequestParam(status) Integer status) {ListLong idList CommonUtil.stringToLongList(ids);return videoService.updateStatus(JwtUtil.getUserId(),idList,status);}ApiOperation(删除)PostMapping(/del)public Result? del(RequestParam(ids) String ids) {ListLong 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 ResultPageVideoVO 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 ResultListVideoVO getRecommendListForDetail(RequestParam(value videoId) Long videoId) {return videoService.getRecommendListForDetail(JwtUtil.getUserId(),videoId,false);}ApiOperation(获取用户发布视频数量)GetMapping(/getVideoNumByUserId)public ResultInteger 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 ResultPageVideoVO 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.管理后台前端项目截图 五、 总结
项目功能完整后续可能将不断升级。
关注作者及时了解更多好项目
作者主页也有更多好项目分享
获取源码或如需帮助可通过博客后面名片作者即可 其他作品集合
《vuevant2完美实现香奈儿移动端商城网站》《vueelementui实现联想购物商城样式美观大方》《vueelementui实现英雄联盟道具城》《vueelementui实现app布局小米商城样式美观大方功能完整》《vue完美模拟pc版快手实现短视频含短视频详情播放》《vueelement实现美观大方好看的音乐网站仿照咪咕音乐网》 《vue实现功能完整的购物商城商品零食、电商通用商城》《vueelement实现蔬菜、水果、电商商城》《vueelement简单实现电商商城网站模仿小米电商商城》《vue实现美观大方的动漫、cos、帖子类型网站》《vue实现好看的相册、图片网站》《高度仿PC版《微信读书》好看的小说、读书网站》《vueelement实现非常好看的鲜花网站商城页面完整样式美观》《vueelementuispringboot前后端分离实现通用商城管理后台》《微信小程序日记、微信小程序个人空间、个人日记》《vueelement模仿腾讯视频电影网站》《vueelement高度仿照QQ音乐完美实现PC端QQ音乐》《vueelement详细完整实现个人博客、个人网站》《vueelementuispringboot前后端分离实现学校帖子网站学校大作业》《vueelementui实现U袋网-完整版》《vueelementelectron仿微信实现》《vueelement模仿电商商城前后端分离实现下单微信扫码支付》《electronvueelementui实现类似QQ窗口靠边自动边缘隐藏》《微信小程序仿唯聚时代微信小程序商城》《jquerybootstrap完整丰富样式开发框架源码各种现成样式简单易用》《htmlcss响应式旅游主题网站模板旅游网站企业文化新闻类网站》《csshtml各种动态、动画、3D相册等7件套》《仿华为电商商城官网华为超级新品日demo,大屏霸气且简洁》《vueelement简单实现商城网站首页模仿电商商城》《vueelementui实现非常好看的博客、网站首页网站模板》《elementuivue实现经典管理系统布局框架拿来即用》《简系统登录页模板htmlvueelementui》《vueelementui完美实现博客、网站、个人网站高仿“张凯博客”》《vueelementui完美实现后台管理系统的左、右、顶部菜单布局》《html5css3实现3D正方体动画相册2种3D旋转木马立体动画相册表白文字加动画爱心炫酷万花筒五件套含音乐》《后端使用springbootmavenshiromybatismysql前端使用H-ui.admin_v3.1.3.1快速实现管理后台功能》《springbootthymeleafmavenhtmlcss实现精美大方好看官网模板完整源码》《htmlcss实现好友列表类似QQ群聊成员列表》
