1 Introduction
Designing the final assignment, there is nowhere to start with the course design, and the total number of web pages required is too much? Don’t have the right template? Database, java, python, vue, html jobs are too complex and the workload is too large? Bi She had no clue and waited for a series of questions. Any problem you want to solve can be solved by contacting me.
2. Introduction to the work
2.1. Introduction to the work
Java and Vue video playback website systems are implemented in conventional ways and meet most requirements. There are relevant documents to explain the code configuration. If you need to learn knowledge points from the code, then this work will be your best choice.
2.2. Work secondary development tools
The code of this work is relatively simple. It is basically completed using the knowledge points learned in the class. You only need to modify the relevant introductory text and some pictures to change it to your own unique code. After downloading the web work, you can use any editing software (for example: DW , HBuilder, NotePAD, Vscode, Sublime, Webstorm all editors can be used), java, python and other related tasks can also complete related secondary development using the tools you often use.
2.3. Technical introduction to the work
Technical aspects of vue works: websites developed using vue technology, involving the use of common vue instructions, such as v-for, v-if, v-show, v-html, etc., including the development of common functions such as watch and calculated properties, and The use of components, the use of vue-related family buckets, and the use of v-router as routing are completely in line with common website development technologies.
springboot: This project uses the springboot framework to complete the overall development. springboot is a new framework provided by the Pivotal team. The emergence of spring is to solve the complexity of enterprise-level development applications. Spring manages classes by registering beans. However, with the increase of business, the method of configuring beans using xml has become quite cumbersome, so springboot is to solve the problem of spring configuration. It was born out of tedious problems and has become very popular in recent years. Fully meets the technical requirements of relevant designs.
MySQL: Also used is mysql, which is a relational database management system developed by the Swedish MySQL AB company and is a product of Oracle. MySQL is one of the most popular relational database management systems. In terms of WEB applications, MySQL is one of the best RDBMS (Relational Database Management System) application software.
3. Work demonstration
java, vue imitates video playback website
3.1. Function page 1
The homepage is the video playback interface. You can upload the video and then play it. The rendering is as follows:
The video classification interface uses the video classification function to distinguish different videos based on different tags. The relevant code is as follows:
<div class="ListContent">
<div class="unData" v-if="videoList.length===0">
<el-empty description="暂无数据"></el-empty>
</div>
<template v-if="videoList.length>0">
<div class="ListContent-list">
<div class="ListContent-liItem" v-for="video in videoList" @click="toVideoDetails(video)">
<div class="ListContent-listItem">
<div class="ListContent-itemImg">
<div class="playIcon">
<i class="el-icon-video-play"></i>
</div>
<div class="video-icon-label">
<div class="icon">
<div class="iconfont icon-tuya-"></div>
<div>{
{ video.views | numberFilter }}</div>
</div>
<div class="icon">
<div class="iconfont icon-dianzan_kuai"></div>
<div>{
{ video.likes | numberFilter }}</div>
</div>
</div>
<img :src="video.coverPath|imgSrcFormat" alt=""/>
</div>
<div class="ListContent-itemDetail">
{
{ video.title }}
</div>
</div>
</div>
</div>
</template>
</div>
Summarize
The above is the entire content of this project. Obtain the address from the public account: coding gas station.
The technologies used are java, vue, mysql, springboot