本文介绍长视频前端控制台的源码集成操作步骤。
项目说明
本项目是长视频管理后台web
前端项目,用于直观地查看和管理视频。包括播放视频,查看截图,人工审核,推荐视频等功能。使用vue-cli 3
构建,vue-cli
选择的是babel
和scss
配置,打包之后轻量快速。
环境说明
- 需要
node
,很多依赖需要node
环境,例如用于编译sass
的node-sass
。 - 需要
npm
,这是node
的包管理器用于安装、更新、删除node
依赖。可以到node官网下载对应系统的node
安装包,npm
会随着node
安装而安装。
主要技术栈
- vue:前端MVVM框架
- vue-router:前端vue路由框架
- element:UI框架
- axios:基于promise的HTTP库
- Aliplayer:Web播放器SDK
源码下载
长视频控制台源码和长视频AppServer
源码在同一个文件夹中,所以要先下载长视频AppServer源码,下载完源码之后,长视频控制台前端代码在video-admin
文件夹中,video-admin
便是长视频控制台前端代码的工作目录,以下的命令都要进入到video-admin
目录执行。
功能说明
登录
- 登录以及登录过期时, 设置请求拦截器以重新登录,拦截器的作用是拦截控制台发出的每一个请求,当请求的response提示需要登录时,跳转到登录界面。
长视频
- 全部视频列表
- 根据视频ID、标签、视频标题、审核状态、创建日期查询视频。
- 查看视频信息(视频标题、时长、视频大小、视频ID、剧集、剧集号)。
- 显示截图。
- 审核状态、转码状态、标签、推荐状态、是否为vip视频的查看。
- 操作主要有推荐、审核,更多里面有删除、修改、设置剧集、设置标签、视频打点、取消推荐位推荐、设置vip。
- 首页推荐视频列表
- 根据视频ID、标签、视频标题、审核状态、创建日期查询视频。
- 查看视频信息(视频标题、时长、视频大小、视频ID、剧集、剧集号)。
- 显示截图。
- 审核状态、转码状态、标签、推荐状态、是否为vip视频的查看。
- 操作主要有推荐、审核,更多里面有删除、修改、设置剧集、设置标签、视频打点、取消推荐位推荐、设置vip。
- 推荐位推荐视频列表
- 根据视频ID、标签、视频标题、审核状态、创建日期查询视频。
- 查看视频信息(视频标题、时长、视频大小、视频ID、剧集、剧集号)。
- 显示截图。
- 审核状态、转码状态、标签、推荐状态、是否为vip视频的查看。
- 操作主要有推荐、审核,更多里面有删除、修改、设置剧集、设置标签、视频打点、取消推荐位推荐、设置vip。
- vip视频列表
- 根据视频ID、标签、视频标题、审核状态、创建日期查询视频。
- 查看视频信息(视频标题、时长、视频大小、视频ID、剧集、剧集号)。
- 显示截图。
- 审核状态、转码状态、标签、推荐状态、是否为vip视频的查看。
- 操作主要有推荐、审核,更多里面有删除、修改、设置剧集、设置标签、视频打点、取消推荐位推荐、设置vip。
- 添加
- 单击可以添加长视频文件,可以输入长视频标题,选择上传的长视频文件。
电视剧集
- 全部视频列表
- 根据视频ID、视频标题、创建日期查询剧集。
- 查看剧集信息(标题、剧集ID、剧集描述、创建时间)。
- 资源名称、标签、剧集名称、上架状态、推荐状态的查看。
- 操作主要有推荐,可以选择推荐为首页或者推荐位,更多里面有下架、删除、修改、设置标签。
- 上架状态可以选择全部、已上架、未上架。
- 首页推荐视频列表
- 根据视频ID、视频标题、创建日期查询剧集。
- 查看剧集信息(标题、剧集ID、剧集描述、创建时间)。
- 资源名称、标签、剧集名称、上架状态、推荐状态的查看。
- 操作主要有推荐,可以选择推荐为首页或者推荐位,更多里面有下架、删除、修改、设置标签。
- 上架状态可以选择全部、已上架、未上架。
- 推荐位推荐视频列表
- 根据视频ID、视频标题、创建日期查询剧集。
- 查看剧集信息(标题、剧集ID、剧集描述、创建时间)。
- 资源名称、标签、剧集名称、上架状态、推荐状态的查看。
- 操作主要有推荐,可以选择推荐为首页或者推荐位,更多里面有下架、删除、修改、设置标签。
- 上架状态可以选择全部、已上架、未上架。
- 添加
- 单击添加,可以添加剧集,输入剧集标题、剧集名称、剧集描述,选择上传剧集封面。
目录结构说明
下载源码之后,打开
video-admin
文件夹,video-admin
便是长视频控制台前端的工作目录。以下是video-admin
的目录结构:├── node_modules // node 依赖安装目录, 执行 npm install 之后各种依赖会安装在这儿
├── dist // 打包之后的文件目录
├── public
│ ├── favicon.ico
│ └── index.html // 网页主入口, 在这儿引用 cdn 等在线 js 和 css
├── src // 业务逻辑以及 Vue 组件目录
│ ├── assets // 放置一些静态资源 css, images, fonts 放置在这儿
│ │ ├── images
│ │ └── scss
│ ├── components // vue 组件目录
│ │ ├── RecommendVideo.vue // 推荐视频弹框组件
│ │ └── VodPlayer.vue // 播放器组件
| | |___Tags.vue // 视频标签
| | |___VideoDot.vue // 视频打点
| | |___VideoSort.vue // 设置剧集
│ ├── mixin // vue mixin 目录
│ │ └── index.js
| ├── router-long //路由表配置
| | |___index.js
| ├── utils
| | |___service.js
│ ├── views // vue-router 对应的渲染组件所在目录
│ │ ├── long-video // 长视频路由对应渲染组件
│ │ │ └── index.vue
│ │ ├── login // 登录路由对应渲染组件
│ │ │ └── index.vue
│ │ ├── tv-list // 电视剧集列表对应渲染组件
│ │ │ └── index.vue
│ │ └── long // 主界面侧边栏头部渲染组件
│ │ └── index.vue
│ ├── App.vue // 渲染主组件
│ ├── main.js // 主入口文件
│ └── router.js // vue-router 路由配置文件
├── .browserslistrc // 浏览器兼容列表
├── .gitignore
├── babel.config.js // babel 配置文件
├── package-lock.json
├── package.json // 包说明文件, 包括各种依赖, 作者, 描述等
├── postcss.config.js // postcss 配置文件, 加上 css 的厂商前缀
├── README.md
├── README_zh.md
└── vue.config.js // vue 配置文件
编译发布
编译
- 安装好环境之后,打开命令行工具,切换到项目目录即
video-admin
下,安装项目依赖,执行以下命令。npm install
- 修改
vue.config.js
中的配置,将proxy设置成你的后端接口地址,完整的配置如下:module.exports = { // 设置前端开发时的代理 devServer: { proxy: 'https://example.com', // 替换成你的接口域名地址, 后面不要加 '/' }, productionSourceMap: false, // 设置生产环境和开发环境时的静态资源路径 publicPath: process.env.NODE_ENV === 'production' ? 'https://example.com/resource/' : '/', }
- 安装依赖完毕并修改配置之后,执行如下命令。
npm run serve
这个命令会在本地开启一个服务,默认地址为http://localhost:8080/,在浏览器中打开,就能预览项目。
发布
- 切换到项目目录即
video-admin
下,执行打包命令。npm run build
生产环境即发布时vue.config.js
中publicPath
要设置成为你放置静态资源的地址,例如本项目后端使用的spring boot框架,静态资源目录为webapp/resource/
,那么vue.config.js
中的publicPath
配置如下:
中设置, 配置文档可以查看vue-cli 配置参考vue.config.js的个性化设置可以在webpack来进行打包,webpack封装的vue-cli实际上就是执行module.exports = { // 设置前端开发时的代理 devServer: { proxy: 'https://example.com', // 替换成你的接口域名地址, 后面不要加 '/' }, productionSourceMap: false, // 设置生产环境和开发环境时的静态资源路径 publicPath: process.env.NODE_ENV === 'production' ? 'https://example.com/resource/' : '/', }
- 执行完打包命令之后,项目根目录会生成打包文件,全部放置在
dist/
目录中,这个目录下的文件就是需要放置到webapp/resource
中的文件,其中的文件目录结构如下:├──dist ├── css │ ├── app.[hash].css // vue 组件中的 css, 以及自定义的 css │ └── chunk-vendors.[hash].css // 依赖中所引入的 css ├── fonts ├── img ├── js │ ├── app.[hash].js // vue 组件中的 js, 以及自定义的 js │ └── chunk-vendors.[hash].js // 依赖中所引入的 js ├── favicon.ico └── index.html
其 webpack已经帮我们把依赖中的
css
、js
和自己写的css
、js
抽离并拆分成了不同的文件,这样不仅能加快页面响应速度,另外在迭代时,如果依赖没有更改,那我们只需要更新app.[hash].js
和app.[hash].css
。 - 将
dist
中的文件放置到服务器中。
服务器发布
实质上就是在服务器中放置静态资源,例如本项目后端使用的是spring boot框架,后端要修改pom
文件中<resources>
标签下的targetPath
配置,详细内容,请参见 Server集成文档。