控制台集成可以提供播放视频、查看截图、人工审核、推荐视频等功能，让您更直观地查看和管理视频资源。通过阅读本文，您可以了解到趣视频控制台集成操作方法。
前提条件
- Web端环境集成需要您安装Node.js及其包管理器npm（用于编译sass的node-sass等依赖）。
说明
- Node.js版本过高或过低可能出现sass安装编译不通过的情况，建议您安装v11.15.0版本。
- 建议您使用nvm管理Node环境。使用nvm可以快速安装切换node版本，在命令行使用
node -v可以快速查看当前node版。
- 建议您在本地安装Node.js环境，完成控制台配置及运行测试，再打包上传至ECS与服务端一同发布。
- 在集成控制台源码前，您需要先完成服务端集成并保持服务端开启。服务端集成文档，请参见服务端集成。
趣视频管理控制台使用说明
控制台主要功能如下：
- 登录或登录过期时，设置请求拦截器以重新登录。
- 全部视频列表。
- 根据视频ID、用户ID、用户名称、视频标题、审核状态、创建日期查询视频。
- 查看视频信息（时长、视频大小、视频ID）。
- 视频不同清晰度的播放（同时可查看视频描述）。
- 显示截图。
- 审核状态、转码状态的查看。
- 操作主要有推荐、审核、转码、删除。
- 推荐视频列表。
- 根据视频ID、用户ID、用户名称、视频标题、创建日期查询视频。
- 查看视频信息（时长、视频大小、视频ID）。
- 视频不同清晰度的播放（同时可查看视频描述）。
- 审核状态、转码状态的查看。
- 操作主要有预热、取消推荐、窄带高清转码。
操作步骤
- 下载趣视频Demo源码。
- 控制台集成需要先下载趣视频AppSever及管理控制台Demo源码。具体信息，请参见趣视频AppSever及管理控制台Demo下载。
- 解压源码包。
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-short //路由表配置。
│ │ └── index.js
│ ├── views // vue-router对应的渲染组件所在目录。
│ │ ├── list // 视频列表路由对应渲染组件。
│ │ │ └── index.vue
│ │ ├── login // 登录路由对应渲染组件。
│ │ │ └── index.vue
│ │ ├── recommend // 推荐视频列表对应渲染组件。
│ │ │ └── index.vue
│ │ └── videos // 主界面侧边栏头部渲染组件。
│ │ └── 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下，后续命令执行都需要在video-admin下进行。
- 配置及编译。
- 修改
./video-admin/vue.config.js中的配置，将proxy设置成完成趣视频服务端集成的云服务器（ECS）的公网IP地址，并添加端口号8080。示例：http://<云服务器（ECS）公网IP地址>:8080，完整的配置如下：module.exports = {
// 设置前端开发时的代理
devServer: {
proxy: 'http://*.*.*.*:8080', // 替换成ECS服务器地址，后面不要加'/'。
},
productionSourceMap: false,
// 设置生产环境和开发环境时的静态资源路径。
publicPath: process.env.NODE_ENV === 'production'
? 'http://example.com/resource/'
: '/',
}
- 环境安装好之后。打开命令行工具，切换到
video-admin目录下，安装项目依赖，执行以下命令：
- 依赖安装完毕并修改配置之后，执行以下命令：
npm run serve
说明
- 执行该命令后，会在本地开启一个服务。在浏览器中打开默认地址http://localhost:8080，即可在本地使用控制台，对上传的视频进行审核、推荐等操作。如果是在服务器开启的此服务，可在本地浏览器打开http://服务器IP:8080。
- 服务端集成的数据库初始化步骤中默认创建了一个控制台管理员账号。用户名：admin，密码：123456，使用该账号可以登录控制台。
- 打包发布。
- 修改
./video-admin/vue.config.js中的配置。
生产环境即发布时，vue.config.js中publicPath要设置成为您放置静态资源的地址，例如本项目后端使用的spring boot框架， 静态资源目录为webapp/resource/short-video，那么vue.config.js中的publicPath配置如下：
module.exports = {
// 设置前端开发时的代理。
devServer: {
proxy: 'http://*.*.*.*:8080', // 替换成ECS服务器地址，后面不要加'/'。
},
productionSourceMap: false,
// 设置生产环境和发布环境时的静态资源路径。
publicPath: process.env.NODE_ENV === 'production'
? '/resource/short-video/'
: '/',
}
- 切换到项目目录
video-admin下，执行以下打包命令：npm run build
说明
- 该命令会压缩静态资源文件，可作为生产环境打包发布。
- 项目打包是执行
vue-cli封装的webpack来进行打包，webpack的个性化设置可以在vue.config.js中设置。详细配置，请参见vue-cli配置。
- 执行完打包命令之后，
video-admin/dist下会生成打包文件。 文件目录结构如下：├──dist
├── css
│ ├── app.[hash].css // vue组件中的css以及自定义的css。
│ └── chunk-vendors.[hash].css // 依赖中所引入的css。
├── fonts
├── img
├── js
│ ├── app.[hash].css // vue组件中的js，以及自定义的js。
│ └── chunk-vendors.[hash].css // 依赖中所引入的js。
├── favicon.ico
└── index.html
说明 打包时webpack已经帮我们把依赖中的css、 js和自己写的css、 js抽离并拆分成了不同的文件，这样不仅能加快页面响应速度，另外在迭代时，依赖没有更改的话我们只需要更新app.[hash].js和app.[hash].css。
- 服务端发布。
- 本项目后端使用的是
spring boot框架，通过配置targetPath来指定控制台Web所在目录，本Demo已将路径配置为resources，如需修改，请重新配置服务端pom.xml文件中<resources>标签下的targetPath。
- 将上个步骤打包产生的
./video-admin/dist文件夹上传至ECS服务器，并将其中的所有文件放置到服务端源码中的/src/main/webapp/resource/short-video/目录下：# 使用scp等方式上传dist文件夹至ECS服务器，把dist文件夹下文件复制（覆盖）到short-video下。
scp -rf 上传目录/dist/* 服务端源码根目录/src/main/webapp/resource/short-video/
- 将集成了控制台的服务端源码重新打包并部署到服务端，重新启动服务端。更多信息，请参见服务端集成。
# 将命令行切换到项目根目录下，执行编译打包命令（若服务端已运行，建议先停止服务再打包）。
mvn clean package -Dmaven.test.skip=true
# 打包成功后在项目根目录下的target/目录下可以找到 “sdk-api-0.0.1-SNAPSHOT.jar”文件。
# 将命令行定位到jar包所在的目录，部署jar包并启动。
nohup java -jar sdk-api-0.0.1-SNAPSHOT.jar &
说明 当购买的ECS内存较小时，请先使用jps和kill命令停止服务，再使用mvn和java命令重新打包并运行jar包，否则会出现内存不足打包失败的情况。
- 在浏览器中输入趣视频服务端地址，访问控制台页面。示例：
http://<云服务器（ECS）公网IP地址>:8080/resource/index.html或http://域名/resource/index.html。