プロジェクト紹介
この号では、SpringBoot と Vue に基づいたフロントエンドとバックエンドの分離システムについて紹介します。コードは非常に標準化された方法で記述されており、学習と参照の重要性を持っています。
1. 事業紹介
名前が示すように、試験システムには問題作成者と質問作成者がいます。このシステムでも同様で、出題者の役割を教師、出題者の役割を生徒と呼びます。異なるアカウントには異なる役割を付与できます。
このシステムは次のモジュールに分かれています。
1.受験カード
テストカードは、テストの問題を集めたテスト用紙として理解できます。学生としてログインすると、テストカードと私のテストが表示されます
テスト カードをクリックして質問への回答を開始します。
質問に回答した後、[送信] をクリックして試験ページに移動できます
2. 問題管理
質問管理は、質問できる質問バンクとして理解できます。このモジュールでは教師の役割が表示される必要があり、教師のアカウントでログインできます。
[新規] をクリックして新しい質問を作成します。
[次へ] をクリックして質問の種類 (質問の種類、分類、難易度) を改善し続けます
オプションを設定します:
[完了] をクリックして追加された質問を確認します。
詳細をクリックして質問情報を表示します:
3.試験管理
試験管理はテスト カードを管理できます。テスト カードは、試験問題を作成する場所として理解できます。
スコアと質問を選択します:
[完了] をクリックして作成します張試験紙:
4.私の試験
受験した試験と解答の詳細を表示できます
クリックして開始の詳細を表示し、解答用紙と解答の詳細を表示します
2. 技術紹介
1. 技術スタック
-
バックエンド: SpringBoo2.x +JPA -
データベース: MYSQL5.x または MYSQL8.x、 -
フロントエンド: VUE + ElementUI
2. コードの紹介
-
プロジェクトの構造
3 つのクイック スタート
1. 環境の準備
-
MySQL 5.7 -
JDK1.8 -
メイブン 3 -
アイデア -
ノード16+
次の手順に進む前に、上記の環境をローカルで準備してセットアップする必要があります。
2. ソースコードをダウンロードする
-
ギットハブ:
https://github.com/panji-tech/spring-boot-online-exam
-
百度クラウド:
リンク: https://pan.baidu.com/s/1RiVFa5qt-wLa3MW2lnYrlw?pwd=5ya8 抽出コード: 5ya8
-
蘭作雲：
https://itguang.lanzoub.com/b02x6t03e パスワード: 6fjx
3. バックエンドのデプロイメント
-
ステップ1: ソースコードをダウンロードする -
ステップ 2: IDEA がプロジェクトを開く -
ステップ 3: Maven の依存関係をインストールする -
ステップ4: 構成のチェック
データベース構成: データベース初期化ステートメント: doc フォルダーの下 
データベースの作成と初期化: navicat を開いてデータベースを作成します: 試験。 (デフォルトのデータベース接続アカウントとパスワードは root であることに注意してください) SQL ステートメントを navicat などの Mysql 視覚化ツールにコピーし、実行してテーブル構造と初期化データを確認します。
-
ステップ4: バックエンドプロジェクトを開始する
Idea はバックエンド プロジェクトを実行します。次の情報が表示された場合は、操作が成功したことを意味します。
開いて
http://127.0.0.1:9527/swagger-ui.htmlプロジェクトの API ドキュメント a>
この時点で、候補プロジェクトの展開が完了します。
4. フロントエンドの展開
ターミナルを開き、フロントエンド プロジェクト ディレクトリを入力します。
画像.png
-
ステップ 1: npm の依存関係をインストールする
ターミナルからディレクトリに入った後、npm の依存関係をインストールします: npm install
-
ステップ 2: フロントエンド プロジェクトを開始する
npm runserve で次の情報が表示されたら、デプロイメントが成功したことを意味します。
エラーが発生した場合: Error: error:0308010C:digital envelope routines::unsupported ノードのバージョンをチェックして、17 より高いかどうかを確認できます。問題を解決するには、ここのブログを参照してください: https:/ /blog.csdn.net/m0_65933139/article/details/130690790
リンクをクリックするとブラウザにジャンプして開きます。
画像.png
ログイン：
学生: 学生管理者123 教師: 教師管理者123
ITSource 公式アカウントをフォローして、より多くの学習リソースを入手してください。
有料の二次開発、カスタマイズ、マンツーマン説明も可能です。ご興味がございましたら、WeChat までお問い合わせください: itguangit
この記事は mdnice 複数のプラットフォームによって公開されています。