All Products
Search

This Product

    :Console source code integration

    Document Center

    :Console source code integration

    Last Updated:Oct 12, 2019

    Project description

    The LongVideo console project develops the front-end webpage of the AppServer for you to graphically view and manage videos. For example, you can play videos, view snapshots, manually audit videos, and recommend videos. This project is built based on @vue/cli 3. Using the Babel and Scss configuration of @vue/cli, you can quickly create a lightweight project.

    Environment requirements

    You need to install Node.js. Most dependencies of this project require the Node.js environment, such as the node-sass library used to compile Sass. You also need to install npm, which is a package manager for Node.js. It is used to install, update, and delete dependencies in the Node.js environment. You can visit the Node.js official website to download an appropriate Node.js installation package. When you install Node.js, npm is also installed.

    Major technology stacks

    The involved technology stacks include:

    Source code download

    The LongVideo console source code is in the same directory as the LongVideo AppServer source code. You need to download and decompress the LongVideo AppServer source code package, and then find the LongVideo console source code in the video-admin directory. The video-admin directory is the working directory of the LongVideo console source code. You need to run commands in the video-admin directory to compile and publish console source code files.

    Features

    The LongVideo console provides the following features:

    Logon

    • The LongVideo console sets a request interceptor to process logon requests or request users whose logon expires to log on again.

    Video

    • The LongVideo console lists all videos and allows you to:
      • Query videos based on the video ID, tag, video title, audit status, and creation time.
      • View video information, including the video title, video duration, video size, video ID, TV play, and episode ID.
      • Display snapshots.
      • Check the audit status, transcoding status, tag, whether the video is displayed in the recommendation section, and whether the video is exclusive for VIPs.
      • Recommend, audit, delete, and modify videos, set TV plays, tags, markers, and VIP property, and remove videos from the recommendation section.
    • The LongVideo console lists recommended videos on the homepage and allows you to:
      • Query videos based on the video ID, tag, video title, audit status, and creation time.
      • View video information, including the video title, video duration, video size, video ID, TV play, and episode ID.
      • Display snapshots.
      • Check the audit status, transcoding status, tag, whether the video is displayed in the recommendation section, and whether the video is exclusive for VIPs.
      • Recommend, audit, delete, and modify videos, set TV plays, tags, markers, and VIP property, and remove videos from the recommendation section.
    • The LongVideo console lists videos displayed in the recommendation section and allows you to:
      • Query videos based on the video ID, tag, video title, audit status, and creation time.
      • View video information, including the video title, video duration, video size, video ID, TV play, and episode ID.
      • Display snapshots.
      • Check the audit status, transcoding status, tag, whether the video is displayed in the recommendation section, and whether the video is exclusive for VIPs.
      • Recommend, audit, delete, and modify videos, set TV plays, tags, markers, and VIP property, and remove videos from the recommendation section.
    • The LongVideo console lists videos exclusive for VIPs and allows you to:
      • Query videos based on the video ID, tag, video title, audit status, and creation time.
      • View video information, including the video title, video duration, video size, video ID, TV play, and episode ID.
      • Display snapshots.
      • Check the audit status, transcoding status, tag, whether the video is displayed in the recommendation section, and whether the video is exclusive for VIPs.
      • Recommend, audit, delete, and modify videos, set TV plays, tags, markers, and VIP property, and remove videos from the recommendation section.
    • The LongVideo console allows you to:
      • Upload a video file and set the video title.

    TV play

    • The LongVideo console lists all TV plays and allows you to:
      • Query TV plays based on the video ID, video title, and creation time.
      • View information about a TV play, including its title, ID, description, and creation time.
      • Check the resource name, TV play name, tag, publish status, and whether the TV play is displayed in the recommendation section.
      • Recommend a TV play on the homepage or in the recommendation section, unpublish, delete, and modify a TV play, and set tags for a TV play.
      • Query all videos or videos in the published or unpublished state.
    • The LongVideo console lists recommended videos on the homepage and allows you to:
      • Query TV plays based on the video ID, video title, and creation time.
      • View information about a TV play, including its title, ID, description, and creation time.
      • Check the resource name, TV play name, tag, publish status, and whether the TV play is displayed in the recommendation section.
      • Recommend a TV play on the homepage or in the recommendation section, unpublish, delete, and modify a TV play, and set tags for a TV play.
      • Query all videos or videos in the published or unpublished state.
    • The LongVideo console lists videos displayed in the recommendation section and allows you to:
      • Query TV plays based on the video ID, video title, and creation time.
      • View information about a TV play, including its title, ID, description, and creation time.
      • Check the resource name, TV play name, tag, publish status, and whether the TV play is displayed in the recommendation section.
      • Recommend a TV play on the homepage or in the recommendation section, unpublish, delete, and modify a TV play, and set tags for a TV play.
      • Query all videos or videos in the published or unpublished state.
    • The LongVideo console allows you to:
      • Upload a TV play and set the title, name, description, and thumbnail for the TV play.

    Directory structure

    After decompressing the downloaded source code package, you can find the LongVideo console source code in the video-admin directory. The video-admin directory is the working directory of the LongVideo console source code. The directory structure of the video-admin directory is shown as follows:

    1. ├── node_modules                  // The dependencies in the Node.js environment. After you run the npm install command, all dependencies are installed in this directory.
    2. ├── dist                          // The packaged project files.  
    3. ├── public                        
    4. │   ├── favicon.ico               
    5. │   └── index.html                // The webpage entry, where you can reference content from a Content Delivery Network (CDN), such as online JS and CSS files.
    6. ├── src                           // The business logic and Vue components.
    7. │   ├── assets                    // The static resources, such as CSS files, images, and fonts.
    8. │   │   ├── images
    9. │   │   └── scss
    10. │   ├── components                // The Vue components.
    11. │   │   ├── RecommendVideo.vue    // The pop-up box for recommended videos.
    12. │   │   └── VodPlayer.vue         // The player.
    13. |   |   |___Tags.vue              // The video tags.
    14. |   |   |___VideoDot.vue          // The video markers.
    15. |   |   |___VideoSort.vue         // The TV play settings.
    16. │   ├── mixin                     // The Vue mixin directory.
    17. │   │   └── index.js
    18. |   ├── router-long               // The routing table configuration.
    19. |   |   |___index.js
    20. |   ├── utils
    21. |   |   |___service.js      
    22. │   ├── views                     // The rendering components of Vue Router.
    23. │   │   ├── long-video            // The rendering component of the video router.
    24. │   │   │  └── index.vue
    25. │   │   ├── login                 // The rendering component of the logon router.
    26. │   │   │   └── index.vue
    27. │   │   ├── tv-list               // The rendering component of the TV play list router.
    28. │   │   │   └── index.vue
    29. │   │   └── long                  // The rendering component of the side navigation pane and main page.
    30. │   │       └── index.vue
    31. │   ├── App.vue                   // The main rendering component.
    32. │   ├── main.js                   // The main entry files.
    33. │   └── router.js                 // The configuration file of Vue Router.
    34. ├── .browserslistrc               // The browser compatibility list.
    35. ├── .gitignore
    36. ├── babel.config.js               // The configuration file of Babel.
    37. ├── package-lock.json
    38. ├── package.json                  // The package description files, including dependencies, authors, and description.
    39. ├── postcss.config.js             // The configuration files of PostCSS, with CCS vendor prefixes added.
    40. ├── README.md
    41. ├── README_zh.md
    42. └── vue.config.js                 // The configuration file of Vue.js.

    ![ # Compilation and publish

    Compilation

    Set up the environment. Use the command-line tool to go to the project directory video-admin. Run the following command to install the dependencies of the project:

    1. npm install

    Modify the configuration in the vue.config.js file to set the proxy parameter to your back-end domain name. The sample code is as follows:

    1. module.exports = {
    2.   // Specify the proxy for front-end development.
    3.   devServer: {
    4.     proxy: 'https://example.com',    // The back-end domain name, without a backslash (/) at the end.
    5.   },
    6.   productionSourceMap: false,
    7.   // Specify the path of static resources for the production environment and development environment.
    8.   publicPath: process.env.NODE_ENV === 'production'
    9.     ? 'https://example.com/resource/'
    10.     : '/',
    11. }

    After installing dependencies and modifying the configuration, run the following command:

    1. npm run serve

    This command starts a service on your computer with the default URL of http://localhost:8080/. You can open this URL in a browser to preview the project.

    Publish

    Go to the project directory video-admin and run the following command to package project files:

    1. npm run build

    When you publish the project in the production environment, set the publicPath parameter in the vue.config.js file to the path of static resources. For example, this project uses the Spring Boot framework at the back end and its static resources are stored in the webapp/resource/ directory. In this case, set the publicPath parameter in the vue.config.js file as follows:

    1. module.exports = {
    2.   // Specify the proxy for front-end development.
    3.   devServer: {
    4.     proxy: 'https://example.com',    // The back-end domain name, without a backslash (/) at the end.
    5.   },
    6.   productionSourceMap: false,
    7.   // Specify the path of static resources for the production environment and development environment.
    8.   publicPath: process.env.NODE_ENV === 'production'
    9.     ? 'https://example.com/resource/'
    10.     : '/',
    11. }

    Actually, you are using webpack in @vue/cli to package project files. You can customize the webpack configuration in the vue.config.js file. For more information, see @vue/cli Configuration Reference.

    After you run the packaging command, packaged project files are generated in the root directory of the project: dist/. You need to copy all files in this directory to the webapp/resource directory. The structure of the dist/ directory is as follows:

    1. ├──dist
    2.    ├── css
    3.    │   ├── app.[hash].css             // The CSS file of Vue components and the custom CSS file.
    4.    │   └── chunk-vendors.[hash].css   // The CSS file imported by dependencies.
    5.    ├── fonts
    6.    ├── img
    7.    ├── js
    8.    │   ├── app.[hash].js             // The JS file of Vue components and the custom JS file.
    9.    │   └── chunk-vendors.[hash].js   // The JS file imported by dependencies.
    10.    ├── favicon.ico
    11.    └── index.html

    In this directory, webpack has separated dependent CSS and JS files from custom CSS and JS files. This not only speeds up the webpage response, but also allows you to update only the app.[hash].js and app.[hash].css files during iteration if dependencies are not changed.

    Finally, store the files in the dist directory on the AppServer.

    AppServer deployment

    To deploy the AppServer, you need to store static resources on it. For example, this project uses the Spring Boot framework at the back end. You need to change the targetPath setting of the <resources> tag in the pom.xml file. For more information, see Server integration. Finally, copy the files in the dist/ directory to the webapp/resource directory. Enter <Your domain name>/resource/index.html in a browser. If you can visit this URL, the AppServer is deployed.