全部产品
云市场

前端控制台源码集成说明

更新时间:2019-10-15 14:52:06

项目说明

本项目是长视频管理后台web前端项目, 用于直观地查看和管理视频。包括播放视频, 查看截图, 人工审核, 推荐视频等功能。使用 vue-cli 3 构建, vue-cli 选择的是 babelscss 配置, 打包之后轻量快速。

环境说明

需要 node, 很多依赖需要 node 环境, 例如用于编译 sassnode-sass。需要 npm, 这是 node 的包管理器用于安装, 更新, 删除 node 依赖。可以到node官网下载对应系统的 node 安装包, npm 会随着 node 安装而安装。

主要技术栈

主要技术栈使用:

源码下载

长视频控制台源码和长视频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 的目录结构:

  1. ├── node_modules // node 依赖安装目录, 执行 npm install 之后各种依赖会安装在这儿
  2. ├── dist // 打包之后的文件目录
  3. ├── public
  4. ├── favicon.ico
  5. └── index.html // 网页主入口, 在这儿引用 cdn 等在线 js 和 css
  6. ├── src // 业务逻辑以及 Vue 组件目录
  7. ├── assets // 放置一些静态资源 css, images, fonts 放置在这儿
  8. ├── images
  9. └── scss
  10. ├── components // vue 组件目录
  11. ├── RecommendVideo.vue // 推荐视频弹框组件
  12. └── VodPlayer.vue // 播放器组件
  13. | | |___Tags.vue // 视频标签
  14. | | |___VideoDot.vue // 视频打点
  15. | | |___VideoSort.vue // 设置剧集
  16. ├── mixin // vue mixin 目录
  17. └── index.js
  18. | ├── router-long //路由表配置
  19. | | |___index.js
  20. | ├── utils
  21. | | |___service.js
  22. ├── views // vue-router 对应的渲染组件所在目录
  23. ├── long-video // 长视频路由对应渲染组件
  24. └── index.vue
  25. ├── login // 登录路由对应渲染组件
  26. └── index.vue
  27. ├── tv-list // 剧集列表对应渲染组件
  28. └── index.vue
  29. └── long // 主界面侧边栏头部渲染组件
  30. └── index.vue
  31. ├── App.vue // 渲染主组件
  32. ├── main.js // 主入口文件
  33. └── router.js // vue-router 路由配置文件
  34. ├── .browserslistrc // 浏览器兼容列表
  35. ├── .gitignore
  36. ├── babel.config.js // babel 配置文件
  37. ├── package-lock.json
  38. ├── package.json // 包说明文件, 包括各种依赖, 作者, 描述等
  39. ├── postcss.config.js // postcss 配置文件, 加上 css 的厂商前缀
  40. ├── README.md
  41. ├── README_zh.md
  42. └── vue.config.js // vue 配置文件

![# 编译发布

编译

首先安装好环境之后, 打开命令行工具, 切换到项目目录即 video-admin 下, 安装项目依赖, 执行:

  1. npm install

修改 vue.config.js 中的配置将 proxy 设置成你的后端接口地址, 完整的配置如下:

  1. module.exports = {
  2. // 设置前端开发时的代理
  3. devServer: {
  4. proxy: 'https://example.com', // 替换成你的接口域名地址, 后面不要加 '/'
  5. },
  6. productionSourceMap: false,
  7. // 设置生产环境和开发环境时的静态资源路径
  8. publicPath: process.env.NODE_ENV === 'production'
  9. ? 'https://example.com/resource/'
  10. : '/',
  11. }

安装依赖完毕并修改配置之后, 执行:

  1. npm run serve

这个命令会在本地开启一个服务, 默认地址为 http://localhost:8080/ 在浏览器中打开, 就能预览项目。

发布

切换到项目目录即 video-admin 下, 执行打包命令:

  1. npm run build

生产环境即发布时 vue.config.jspublicPath 要设置成为你放置静态资源的地址, 例如本项目后端使用的 spring boot 框架, 静态资源目录为 webapp/resource/long-video/, 那么 vue.config.js 中的配置如下:

  1. module.exports = {
  2. // 设置前端开发时的代理
  3. devServer: {
  4. proxy: 'http://127.0.0.1:8081', // 替换成你的接口域名地址, 后面不要加 '/'
  5. },
  6. productionSourceMap: false,
  7. // 设置生产环境和发布环境时的静态资源路径
  8. publicPath: process.env.NODE_ENV === 'production'
  9. ? '/resource/long-video/'
  10. : '/',
  11. }

实际上就是执行 vue-cli 封装的 webpack 来进行打包, webpack 的个性化设置可以在 vue.config.js 中设置, 配置文档可以查看vue-cli 配置参考

执行完打包命令之后, 项目根目录会生成打包文件, 全部放置在 dist/ 目录中, 这个目录下的文件就是需要放置到 webapp/resource/long-video 中的文件, 其中的文件目录结构为:

  1. ├──dist
  2. ├── css
  3. ├── app.[hash].css // vue 组件中的 css, 以及自定义的 css
  4. └── chunk-vendors.[hash].css // 依赖中所引入的 css
  5. ├── fonts
  6. ├── img
  7. ├── js
  8. ├── app.[hash].js // vue 组件中的 js, 以及自定义的 js
  9. └── chunk-vendors.[hash].js // 依赖中所引入的 js
  10. ├── favicon.ico
  11. └── index.html

其中 webpack 已经帮我们把依赖中的 css, js 和自己写的 css, js 抽离并拆分成了不通的文件, 这样不仅能加快页面响应速度, 另外在迭代时, 依赖没有更改的话我们只需要更新 app.[hash].jsapp.[hash].css

之后将 dist 中的文件放置到服务器中

服务器发布

实质上就是在服务器中放置静态资源, 例如本项目后端使用的是 spring boot 框架, 后端要修改 pom 文件中 <resources> 标签下的 targetPath 配置, 具体的可以查看 Server集成文档。最后在 dist/ 目录中的文件放到 webapp/resource/long-video 文件夹中, 输入 <你的域名地址>/resource/index.html 访问成功, 说明部署成功!