全部产品
云市场

控制台源码集成说明

更新时间:2019-03-07 09:52:37

项目说明

本项目是趣视频管理后台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 目录执行。

功能说明

主要功能有如下:

  • 登录或登录过期时,设置请求拦截器以重新登录。
  • 全部视频列表
    • 根据视频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. ├── mixin // vue mixin 目录
  14. └── index.js
  15. ├── views // vue-router 对应的渲染组件所在目录
  16. ├── list // 视频列表路由对应渲染组件
  17. └── index.vue
  18. ├── login // 登录路由对应渲染组件
  19. └── index.vue
  20. ├── recommend // 推荐视频列表对应渲染组件
  21. └── index.vue
  22. └── videos // 主界面侧边栏头部渲染组件
  23. └── index.vue
  24. ├── App.vue // 渲染主组件
  25. ├── main.js // 主入口文件
  26. └── router.js // vue-router 路由配置文件
  27. ├── .browserslistrc // 浏览器兼容列表
  28. ├── .gitignore
  29. ├── babel.config.js // babel 配置文件
  30. ├── package-lock.json
  31. ├── package.json // 包说明文件, 包括各种依赖, 作者, 描述等
  32. ├── postcss.config.js // postcss 配置文件, 加上 css 的厂商前缀
  33. ├── README.md
  34. ├── README_zh.md
  35. └── vue.config.js // vue 配置文件

编译发布

编译

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

    1. npm install
  2. 修改 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. }
  3. 安装依赖完毕并修改配置之后,执行:

    1. npm run serve

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

发布

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

  1. npm run build

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

  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. }

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

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

  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].css // vue 组件中的 js, 以及自定义的 js
  9. └── chunk-vendors.[hash].css // 依赖中所引入的 js
  10. ├── favicon.ico
  11. └── index.html

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

最后,将 dist 中的文件放置到服务器中。

服务器发布

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