【コーディングガソリンスタンド】java、vue、mysql動画再生サイト完成

1 はじめに

最終課題を設計するときに、コース設計を開始する場所がなく、必要な Web ページの総数が多すぎますか? 適切なテンプレートをお持ちでない場合は、データベース、Java、Python、Vue、HTML のジョブは複雑すぎて、ワークロードが大きすぎますか? Bi 彼女は何の手がかりもなく、一連の質問を待っていました。解決したい問題はすべて私に連絡することで解決できます。

2. 作品紹介

2.1. 作品の紹介

Java および Vue ビデオ再生 Web サイトシステムは従来の方法で実装されており、ほとんどの要件を満たしています。コード構成を説明する関連ドキュメントがあり、コードから知識点を学ぶ必要がある場合は、この作品が最適です。

2.2. 二次開発ツールの作業

この作品のコードは比較的シンプルです。基本的には授業で学んだ知識を使用して完成します。関連する紹介文といくつかの画像を修正して、独自のコードに変更するだけです。Web 作品をダウンロードした後、任意の編集ソフトウェアを使用できます (例: DW、HBuilder、NotePAD、Vscode、Sublime、Webstorm のすべてのエディターを使用できます)。Java、Python およびその他の関連タスクも、よく使用するツールを使用して関連する二次開発を完了できます。

2.3. 作品の技術的紹介

vue の技術的側面: vue テクノロジーを使用して開発された Web サイト。v-for、v-if、v-show、v-html などの共通の vue 命令の使用を含み、watch などの共通機能の開発も含みます。コンポーネントの使用、vue 関連のファミリーバケットの使用、およびルーティングとしての v-router の使用は、一般的な Web サイト開発テクノロジと完全に一致しています。

springboot: このプロジェクトは、開発全体を完了するために springboot フレームワークを使用します。springboot は、Pivotal チームが提供する新しいフレームワークです。Springの登場は、エンタープライズレベルの開発アプリケーションの複雑さを解決するためです SpringではBeanを登録してクラスを管理していましたが、ビジネスの増加に伴いXMLを使ってBeanを設定する方法は非常に煩雑になってきたため、springbootはその問題を解決するために登場しました面倒な問題から生まれ、近年非常に普及しています。関連する設計の技術要件を完全に満たしています。

MySQL: mysql も使用されます。これは、スウェーデンの MySQL AB 社によって開発されたリレーショナルデータベース管理システムであり、Oracle の製品です。MySQL は最も人気のあるリレーショナルデータベース管理システムの 1 つであり、WEB アプリケーションの観点から見ると、MySQL は最高の RDBMS (リレーショナルデータベース管理システム) アプリケーションソフトウェアの 1 つです。

3. 作業デモンストレーション

java、vue はビデオ再生 Web サイトを模倣します

3.1. 機能ページ 1

ホームページはビデオ再生インターフェイスです。ビデオをアップロードして再生できます。レンダリングは次のとおりです。

ビデオ分類インターフェイスは、ビデオ分類機能を使用して、さまざまなタグに基づいてさまざまなビデオを区別します。関連するコードは次のとおりです。

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

要約する

以上が本プロジェクトの全内容ですが、公開アカウント「コーディングガソリンスタンド」からアドレスを取得します。

使用されるテクノロジーは Java、vue、mysql、springboot です。