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:
- Vue.js: the front-end
MVVM
framework. - Vue Router: the front-end
vue
router framework. - Element: the
UI
framework. - Axios: the
promise
-basedHTTP
library. - Aliplayer: the
web
playerSDK.
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:
├── node_modules // The dependencies in the Node.js environment. After you run the npm install command, all dependencies are installed in this directory.
├── dist // The packaged project files.
├── public
│ ├── favicon.ico
│ └── index.html // The webpage entry, where you can reference content from a Content Delivery Network (CDN), such as online JS and CSS files.
├── src // The business logic and Vue components.
│ ├── assets // The static resources, such as CSS files, images, and fonts.
│ │ ├── images
│ │ └── scss
│ ├── components // The Vue components.
│ │ ├── RecommendVideo.vue // The pop-up box for recommended videos.
│ │ └── VodPlayer.vue // The player.
| | |___Tags.vue // The video tags.
| | |___VideoDot.vue // The video markers.
| | |___VideoSort.vue // The TV play settings.
│ ├── mixin // The Vue mixin directory.
│ │ └── index.js
| ├── router-long // The routing table configuration.
| | |___index.js
| ├── utils
| | |___service.js
│ ├── views // The rendering components of Vue Router.
│ │ ├── long-video // The rendering component of the video router.
│ │ │ └── index.vue
│ │ ├── login // The rendering component of the logon router.
│ │ │ └── index.vue
│ │ ├── tv-list // The rendering component of the TV play list router.
│ │ │ └── index.vue
│ │ └── long // The rendering component of the side navigation pane and main page.
│ │ └── index.vue
│ ├── App.vue // The main rendering component.
│ ├── main.js // The main entry files.
│ └── router.js // The configuration file of Vue Router.
├── .browserslistrc // The browser compatibility list.
├── .gitignore
├── babel.config.js // The configuration file of Babel.
├── package-lock.json
├── package.json // The package description files, including dependencies, authors, and description.
├── postcss.config.js // The configuration files of PostCSS, with CCS vendor prefixes added.
├── README.md
├── README_zh.md
└── 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:
npm install
Modify the configuration in the
vue.config.js
file to set theproxy
parameter to your back-end domain name. The sample code is as follows:
module.exports = {
// Specify the proxy for front-end development.
devServer: {
proxy: 'https://example.com', // The back-end domain name, without a backslash (/) at the end.
},
productionSourceMap: false,
// Specify the path of static resources for the production environment and development environment.
publicPath: process.env.NODE_ENV === 'production'
? 'https://example.com/resource/'
: '/',
}
After installing dependencies and modifying the configuration, run the following command:
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:
npm run build
When you publish the project in the production environment, set the
publicPath
parameter in thevue.config.js
file to the path of static resources. For example, this project uses theSpring Boot
framework at the back end and its static resources are stored in thewebapp/resource/
directory. In this case, set thepublicPath
parameter in thevue.config.js
file as follows:
module.exports = {
// Specify the proxy for front-end development.
devServer: {
proxy: 'https://example.com', // The back-end domain name, without a backslash (/) at the end.
},
productionSourceMap: false,
// Specify the path of static resources for the production environment and development environment.
publicPath: process.env.NODE_ENV === 'production'
? 'https://example.com/resource/'
: '/',
}
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:
├──dist
├── css
│ ├── app.[hash].css // The CSS file of Vue components and the custom CSS file.
│ └── chunk-vendors.[hash].css // The CSS file imported by dependencies.
├── fonts
├── img
├── js
│ ├── app.[hash].js // The JS file of Vue components and the custom JS file.
│ └── chunk-vendors.[hash].js // The JS file imported by dependencies.
├── favicon.ico
└── 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.