(Vue.jsベースのオンライン教育プラットフォーム) ソースコード+データベーステーブル Vue.js+Node.js+MySQLソースコード無料共有

1. はじめに

卒業して約1年が経ち、就職して約1年半が経ちました。今は卒業シーズンなので、灰の中に眠るよりも、昨年書いた卒業制作をみんなで共有して参考にしてもらった方が良いのではないかと思いました。幸せ ~ もちろん、このプロジェクトは実際には非常に単純です (偉い人たち、忘れないでください) (潮吹き)、テクノロジーも単純で、最も基本的な vue2、最も基本的なノードでの表現、最も基本的な mysql の追加、削除、修正、クエリはその時に考えたのであまり複雑に書く必要はないと思います笑、私も当時インターンだったので仕事後にたまにやってます。単純ではありますが、幸運にも昨年は守備に合格しました（もちろん点数はあまり高くありません笑）。。
ソースコードをみんなと共有して、Gitee 倉庫から取り出してください~ https://gitee.com/aurora-in-Winter/vuejiaoxueここをクリックしてジャンプしてください

2. 需要分析

ここに画像の説明を挿入します
Vue.js オンライン教育プラットフォームに基づいており、次のモジュールで構成されています。
(1) 学生モジュール:
学生はプラットフォームに登録してログインし、ホームページ、すべてのコースページ、選択したコースなどのプラットフォーム上の関連情報を表示します。ページ、コースランキングページ、ブログ記事ページ、チャットルームページ、パーソナルセンターページ、その他のホームページ、およびコース詳細ページ、ブログ投稿詳細ページ、クエリページ、学生試験ページなどのサブページ。
(2) 教師モジュール:
教師はプラットフォームに登録してログインし、コースおよびビデオ公開ページ、ブログ公開ページ、チャットルームページ、パーソナルセンターページ、授業ビデオなどのホームページを含む関連情報をプラットフォーム上に表示します。アップロードページ、質問バンク管理ページ、コース選択学生ページ、コースウェア管理ページ、ブログ詳細ページなどのサブページ。
(3) 管理者モジュール:
管理者はプラットフォームにログインし、ユーザー管理ページ、コースレビューページ、授業レビューページ、ブログレビューページの 4 つのホームページモジュールを含むプラットフォーム上の関連情報を表示します。先生のキャラクターページ。

需要分析:
Vue.js ベースのオンライン教育プラットフォームは生徒端末、教師端末、管理者端末に分かれており、すべて PC の Web ページの形式で表示されます。3 つの端すべてにログインページと登録ページがあります。学生端末は、ホームページ、すべてのコース、選択されたコース、コースランキング、ブログ投稿、チャットルーム、パーソナルセンターの 7 つのホームページモジュールに分かれており、コース詳細ページ、ブログ投稿詳細ページ、クエリページ、学生試験ページなど教師側は、コースとビデオの公開、ブログの公開、チャットルーム、パーソナルセンターの 4 つのホームページモジュールに分かれており、クラスビデオのアップロードページ、質問バンク管理ページ、コース選択の学生ページ、コースウェア管理ページ、ブログ投稿、詳細ページなど管理者側には、ユーザー管理、コースレビュー、クラスレビュー、ブログ投稿レビューの 4 つのホームページモジュールがあり、ユーザー管理には学生ロールページと教師ロールページが含まれます。
ログインページには、アカウントとパスワードの入力、ロール ID の選択、グラフィック検証コードの入力検証操作などのユーザーログイン機能が実装され、トークン認証や入力内容のリセットボタンも含まれる必要があります。
登録ページにはユーザー登録機能が実装されており、学生ユーザーと教師ユーザーのみが登録可能です。同時に、ユーザーはアバターをアップロードし、ユーザー名、パスワード、名前、署名、役割、性別などの情報を入力します。同時に、登録時にメールアドレスを認証し、ユーザーが入力したメールアドレスに認証コードを送信する必要があり、認証コードが通過した後でのみ登録できます。一部のフィールドの長さについてもフォーム検証が必要です。長すぎたり短すぎたりすることはできません。また、不正なデータを入力する必要があります。リセット入力ボタンも含める必要があります。
学生端末のホームページには、まずコースの写真を表示するカルーセル画像が含まれています。新しくて良いコースや、必ず学ばなければならないコースのおすすめも紹介します。新しい良いコースとは、おすすめの4つのコースのうち、特定の先生がリリースした最新のコースです。「入局時の必修」では、学生がよく学習する4科目を推奨しています。同時に、コース情報には、コース名、公開時間、コース表示画面情報、コース詳細ページへジャンプするためのハイパーリンクやジャンプボタンが含まれる。ページのヘッダーに入力ボックスが設置されており、ユーザーは曖昧な入力を通じてコースを問い合わせることができます。
学生側のすべてのコースページにはコース検索機能が付いています。検索条件として選択して検索します。条件には、コースの難易度選択（すべて、簡単、普通、難しい）とコースカテゴリの選択（すべて、フロントエンド分野、バックエンド分野、ビッグデータ分野、その他）が含まれます。同時に、データ量が多い場合のページング切り替えクエリ機能もあります。
学生側の選択科目ページには、学生が現在選択している科目を閲覧する機能が含まれています。コースリストには、コースに関する基本情報が表示されると同時に、コースをキャンセルしてコース詳細ページに移動するボタンが表示されます。
学生側コースランキングページでは主にEchartsのグラフデータを表示し、学生評価の高い4コースと学生数の多い4コースを棒グラフで表示します。
生徒側のブログ記事ページには、ブログタイトル、紹介文、発行教師などのフィールドを含むブログ記事のリストが表示されます。ブログ投稿の詳細ページにジャンプするボタンも含まれています。データ量が多い場合にはページング切り替えクエリ機能があります。
生徒側のチャットルームページと教師側のチャットルームページを共有し、生徒と教師全員でインスタントチャット機能を実現します。具体的な機能には、チャットルームのコンテンツや現在のオンラインメンバーの表示などが含まれます。ユーザーはテキスト入力フィールドにコンテンツを入力し、送信する絵文字を選択できます。送信されたチャットの内容は、すべてのユーザーのアバター、ユーザーの画面名、入力内容の表示など、コンテンツ領域に表示されます。ユーザーがチャットルームを退出または入室すると、アナウンステキストプロンプト機能が表示されます。オンライン会員には、現在のオンライン人数や特定のオンラインユーザー情報を表示する機能が含まれます。
生徒側のパーソナルセンターページは教師側のパーソナルセンターページと同じページを共有しており、ユーザーの基本情報欄が表示され、個人情報の修正機能も含まれています。
学生側のコース詳細ページはコースの詳細を表示する機能です。コース学習・受験機能やコース案内の音声放送機能を追加するボタンがあります。コースの基本的なフィールドが表示され、4 つのサブモジュールも含まれています。1つ目はコース学習モジュールで、さまざまな授業のビデオを再生したり、授業ビデオを切り替えたり、授業ビデオを保存して視聴したりする機能があります。2 番目のモジュールはコースレビューモジュールで、学生はコースをレビューして評価できます。3 番目のモジュールはコースウェアダウンロードモジュールで、学生はコースのコースウェアをダウンロードすることを選択できます。4 番目のモジュールはブレインストーミングモジュールで、学生はブレインストーミングの質問に答えることを選択できます。
学生側のブログ投稿詳細ページには、特定のブログ投稿の詳細な内容が表示されます。
学生側のクエリページでは、内容を入力するとあいまい検索の授業結果が表示されます。
学生側試験ページでは、選択問題や正誤問題への解答、タイミング機能、解答内容提出後すぐに試験結果を表示する機能などの試験機能を実装しています。
教師側のコース・動画公開ページには、追加されたコースの一覧表示や新規コースの追加機能が含まれています。同時に、コース選択学生の表示、問題バンクの管理、授業時間の追加、情報の変更、コースの削除などの機能ボタンが含まれています。新規コース追加は、新規コースを追加し、コース表示写真やタイトルなどの基本情報を編集する機能です。同時に、追加したコースの変更や削除も可能です。次に、次の機能サブページが含まれています。コース選択学生の表示ページには、コースを選択した学生のリストが表示され、学生の基本情報、テストのスコア、経験値などが表示され、Excel ファイルをエクスポートできます。問題バンク管理ページでは、問題の追加・削除機能が追加され、新たに選択問題と正誤問題の2種類の問題が追加されました。授業追加ページには授業動画の追加、授業動画の変更、削除の機能があり、タイトルなどの授業の基本情報も表示されます。新しく追加したコースは管理者の承認後にのみ公開できます。
教師側のブログ記事を公開するためのブログページには、ブログ記事の追加、変更、削除の機能が含まれています。新しいブログ投稿の追加には、タイトル、本文コンテンツなどの情報の編集が含まれます。本文コンテンツは Markdown 形式であり、画像、ハイパーリンク、タイトルなどを編集できます。新しく追加したブログは、公開する前に管理者の承認を受ける必要があります。
管理者ユーザー管理ページには、生徒ユーザー管理モジュールと教師ユーザー管理モジュールの 2 つのモジュールが含まれています。これらにはすべて、生徒または教師の情報を変更したり、ユーザーを削除したりするための機能操作が含まれています。コースレビューページには、教師が提出したコースの一覧を表示する機能があり、レビュー済み、レビュー保留中、レビュー失敗の絞り込み条件もあり、コースをレビューして合否を判定することができます。同時に、データが多い場合、ページング切り替えクエリ機能があります。授業レビューページはコースレビューページに似ていますが、授業ビデオの視聴と復習機能に変更されています。ブログレビューページはコースレビューページに似ていますが、ブログ投稿の表示およびレビュー機能に変更されています。

3. ユースケース図とシーケンス図

ユースケース図:
ここに画像の説明を挿入します

シーケンス図

データベーステーブル:

データベーステーブルの概要
: このプラットフォームは、第 3 パラダイムのニーズに応じて、学生情報を記録する学生テーブル、教師情報を記録する教師テーブル、管理者情報を記録する管理者テーブル、および公開コースを含む 14 のテーブルを設計しました。情報用のコーススケジュール、教師が投稿したブログ投稿を記録するためのブログテーブル、教師が投稿した授業ビデオを記録するためのクラスビデオテーブル、学生のコース選択情報を記録するための学生授業スケジュール、学生が視聴した授業情報を記録するための学生授業ビデオテーブル、グローバルピクチャーテーブル、チャットルームのチャットデータを記録するチャットテーブル、教師が公開したコーステストの質問を記録する質問テーブル、教師が公開したコースファイルを記録するコースファイルテーブル、公開されたブレインストーミングの質問を記録するブレインストーミングテーブルブレーンストーミング情報に対する生徒の反応を記録するブレーンストーミングシート。テーブル設計の具体的なルールは次のとおりです。
表 3-1 データベーステーブル
シリアル番号テーブル名説明
1 記事ブログデータの保存
2 チャットチャットデータの保存
3 コースコースデータの保存
4 ファイルファイルデータの保存
5 管理管理者データ
の保存 6 マインドブレーンストーミングデータ
の保存 7 写真画像データの保存
8 学生学生の保存data
9 Student_course コース選択データの保存
10 Student_mind 嵐コメントデータの保存
11 Student_video 視聴ビデオデータの保存
12 subject テスト問題データの保存
13 Teacher 教師データの保存
14 video ビデオデータの保存

(1) 以下に示すように、学生テーブルは学生ユーザーテーブルです。
表 3-2 学生ユーザーテーブル
シリアル番号カラム名フィールドタイプ null を許可する長さ主キー
1 id int 10 No Yes
2 username varchar 50 No No
3 pass varchar 50 No No
4 create_time varchar 50 Yes no
5 icon varchar 255 Yes no
6 net_name varchar 50 Yes no
7 sex varchar 10 Yes no
8 des varchar 255 Yes no
9 role varchar 10 no
no10 Phone varchar 50 Yes no
11 qq_email varchar 50 Yesいいえ

(2) 以下に示すように、教師テーブルは教師ユーザーテーブルです。
表 3-3 生徒教師ユーザーテーブル
シリアル番号カラム名フィールドタイプ長さ null を許可主キー
1 id int 10 No Yes
2 username varchar 50 No No
3 pass varchar 50 No no
4 create_time varchar 50 Yes no
5 icon varchar 255 Yes no
6 net_name varchar 50 Yes no
7 sex varchar 10 Yes no
8 des varchar 255 Yes no
9 role varchar 10 no
no10 Phone varchar 50 Yes no
11 qq_email varchar 50はい・いいえ

(3) 以下に示すように、管理テーブルは管理者テーブルです。

表 3-4 管理者テーブル
シリアル番号カラム名フィールドタイプ null を許可する長さ主キー
1 id int 10 No Yes
2 username varchar 50 No No
3 pass varchar 50 No No
4 create_time varchar 50 Yes No
5 icon varchar 255 Yes No
6 net_name varchar 50 Yes No
7 sex varchar 10 Yes no
8 des varchar 255 Yes no
9 role varchar 10 no
no10 Phone varchar 50 Yes no
11 qq_email varchar 50 Yes no

(4) コーステーブルは、以下に示すように、コーススケジュールです。
表 3-5 コーススケジュール
シリアル番号列名フィールドタイプ長さは null を許可します主キー
1 id int 10 No Yes
2 Teacher_id int 10 No No
3 name varchar 50はいいいえ
4 des varchar 255 はいいいえ
5 アイコン varchar 255 はいいいえ
6 create_time varchar 50 はいいいえ
7 カテゴリ varchar 50 はいいいえ
8 難易度 varchar 50 はいいいえ
9 ロール varchar 10 いいえ no10
ステータス int 10 はいいいえ

(5) 以下に示すように、記事テーブルはブログテーブルです。

表 3-6 ブログテーブル
シリアル番号カラム名フィールドタイプ null を許可する長さ主キー
1 id int 10 No Yes
2 Teacher_id int 10 No No
3 title varchar 50 Yes No
4 des varchar 255 Yes No
5 content varchar 255 Yes No
6 create_time varchar 50 Yes No
7 Teacher_name varchar 50 Yes
8 status Int 10 Yes No

(6) ビデオテーブルは、以下に示すように、クラスビデオテーブルです。
表 3-7 クラスビデオテーブル
シリアル番号列名フィールドタイプ長さは null を許可主キー
1 id int 10 No Yes
2 Teacher_id int 10 No No
3 course_id int 10 No No
4 name varchar 255 Yes No
5 url varchar 255 Yes No
6 status Int 10 Yes No

(7) Student_course テーブルは、以下に示すように、学生のコーススケジュールです。
表 3-8 学生のコーススケジュール
シリアル番号列名フィールドタイプ長さは null を許可します主キー
1 id int 10 No Yes
2 Teacher_id int 10 No No
3 course_id int 10 No No
4 進捗 varchar 255 はいいいえ
5 スコア varchar 255 はいいいえ
6 実績 varchar 255 はいいいえ
7 経験値 int 50 はいいいえ

(8) 以下に示すように、student_video テーブルは学生クラスのビデオテーブルです。

表 3-9 学生クラスビデオテーブル
シリアル番号列名フィールドタイプ null を許可する長さ主キー
1 id int 10 No Yes
2 Teacher_id int 10 No No
3 video_id int 10 No No
4 progress varchar 255 Yes No
5 course_id int 10 Noいいえ
6 名前 varchar 50 はい
7 last_time varchar 50 はいいいえ

(9) ピクチャテーブルは、以下に示すようなピクチャテーブルです。
表 3-10 ピクチャテーブル
シリアル番号カラム名フィールドタイプ null を許可する長さ主キー
1 id int 10 No Yes
2 url varchar 255 Yes No

(10) チャットテーブルは、以下に示すチャットテーブルです。
表 3-11 チャットテーブル
シリアル番号カラム名フィールドタイプ長さは null を許可します主キー
1 id int 10 No Yes
2 progress varchar 255 Yes No
3 icon varchar 255 はいいいえ
4 ロール varchar 50 はい
5 create_time varchar 50 はいいいえ
6 uid varchar 15 はいいいえ

(11) ファイルテーブルは、以下に示すコースファイルテーブルです。
表 3-12 コースファイルテーブル
シリアル番号カラム名フィールドタイプ長さは null を許可主キー
1 id int 10 No Yes
2 Teacher_id int 10 No No
3 course_id int 10 No No
4 name varchar 255 どうか

(12) 件名テーブルは、以下に示すコースタイトルテーブルです。
表 3-13 コースタイトルテーブル
シリアル番号カラム名フィールドタイプ長さ null 可主キー
1 id int 10 No Yes
2 course_id int 10 No No
3 type varchar 50 はいいいえ
4 a varchar 255 はいいいえ
5 b varchar 255 はいいいえ
6 c varchar 255 はいいいえ
7 d varchar 255 はいいいえ
8 件名 varchar 255 はいいいえ
9 結果 varchar 255 はいいいえ

(13) マインドテーブルは、以下に示すようにブレインストーミングテーブルです。
表 3-14 ブレーンストーミングテーブル
シリアル番号列名フィールドタイプ長さは null を許可主キー
1 id int 10 No Yes
2 course_id int 10 No No
3 question varchar 255はい・いいえ

(14) Student_mind テーブルは、以下に示すように、学生のブレインストーミングテーブルです。
表 3-15 学生のブレインストーミングテーブル
シリアル番号列名フィールドの型長さは null を許可主キー
1 id int 10 No Yes
2 Student_id int 10 No No
3 mind_id int 10 No No
4 学生名 varchar 255 Yes No
5 答え varchar 255 Yes No

4. システムインターフェース

詳細設計
4.1 プラットフォームインターフェース設計
4.1.1 ログイン登録インターフェース
ログインページのデザイン、フロントエンドはシンプルなカードスタイルのデザインを採用しており、プラットフォームユーザーがユーザー名とパスワードとグラフィック認証コードを入力してログインするためのインターフェイスです。図に示すように:

図 4-1 ログインインターフェース
2. 登録ページはシンプルなスタイルで設計されており、ユーザーはアバターをアップロードし、アカウント番号、パスワード、性別、名前などの個人情報を入力し、最後にメール認証コードを通じて登録します。図に示すように、検証プラットフォームによって送信されます。
ここに画像の説明を挿入します

図 4-2 登録インターフェイス
4.1.2 コースアップロードインターフェイスの設計

教師側で公開されるコースページのデザインは、図に示すように、コースデータがリスト形式で直感的に表示され、コースの追加、変更、削除が可能です。

図 4-3 コースアップロードインターフェイス
4.1.3 ブログインターフェイスの設計

学生側のブログ記事一覧ページのデザインもシンプルなスタイルを採用し、ページング条件でブログ記事一覧を表示します。図に示すように:

図 4-4 ブログ記事リストインターフェイス
2. 学生側のブログ投稿詳細ページのデザイン。図に示すように、さまざまなデータ型のブログ投稿が Markdown 形式で表示されます。
ここに画像の説明を挿入します

図 4-5 ブログの詳細インターフェイス
3. 教師によって公開されたブログページのデザイン。ブログの投稿がリスト形式で視覚的に表示されます。図に示すように、ブログの投稿は追加、変更、削除できます。
ここに画像の説明を挿入します

図 4-6 ブログ公開インターフェース
4.1.4 コース表示インターフェースの設計

学生側のホームページのデザインは、図に示すように、ヘッドナビゲーションバーと、プラットフォーム上のいくつかの新しいコースと推奨コースを表示するメイン領域を含む、シンプルで美しい全体的なスタイルを維持しています。

図 4-7 コースのホームページインターフェイス
2. 学生側のすべてのコースページは、図に示すように、コースフィールドの選択、コースの難易度の選択、ページングの選択、およびその他の条件を使用して、対応するコースをカードレイアウトスタイルで表示するように設計されています。
ここに画像の説明を挿入します