本文介绍长视频前端控制台的源码集成操作步骤。

项目说明

本项目是长视频管理后台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的目录结构:
├── 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 配置文件

编译发布

编译
  1. 安装好环境之后,打开命令行工具,切换到项目目录即video-admin下,安装项目依赖,执行以下命令。
    npm install
  2. 修改vue.config.js中的配置,将proxy设置成你的后端接口地址,完整的配置如下:
    module.exports = {
      // 设置前端开发时的代理
      devServer: {
        proxy: 'https://example.com',    // 替换成你的接口域名地址, 后面不要加 '/'
      },
      productionSourceMap: false,
      // 设置生产环境和开发环境时的静态资源路径
      publicPath: process.env.NODE_ENV === 'production'
        ? 'https://example.com/resource/'
        : '/',
    }
  3. 安装依赖完毕并修改配置之后,执行如下命令。
    npm run serve

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

发布
  1. 切换到项目目录即video-admin下,执行打包命令。
    npm run build
    生产环境即发布时vue.config.jspublicPath要设置成为你放置静态资源的地址,例如本项目后端使用的spring boot框架,静态资源目录为webapp/resource/,那么vue.config.js中的publicPath配置如下:
    module.exports = {
      // 设置前端开发时的代理
      devServer: {
        proxy: 'https://example.com',    // 替换成你的接口域名地址, 后面不要加 '/'
      },
      productionSourceMap: false,
      // 设置生产环境和开发环境时的静态资源路径
      publicPath: process.env.NODE_ENV === 'production'
        ? 'https://example.com/resource/'
        : '/',
    }
    中设置, 配置文档可以查看vue-cli 配置参考vue.config.js的个性化设置可以在webpack来进行打包,webpack封装的vue-cli实际上就是执行
  2. 执行完打包命令之后,项目根目录会生成打包文件,全部放置在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已经帮我们把依赖中的cssjs和自己写的cssjs抽离并拆分成了不同的文件,这样不仅能加快页面响应速度,另外在迭代时,如果依赖没有更改,那我们只需要更新app.[hash].jsapp.[hash].css

  3. dist中的文件放置到服务器中。

服务器发布

实质上就是在服务器中放置静态资源,例如本项目后端使用的是spring boot框架,后端要修改pom文件中<resources>标签下的targetPath配置,详细内容,请参见 Server集成文档