[JAVA卒業設計|コース設計] SpringBoot+vueをベースにしたオンライン試験システム - コンピュータネットワークを例として、自分で問題バンクに入力できます - ダウンロードアドレス付き

1. プロジェクトの紹介

情報技術の急速な発展に伴い、教育業界は大きな変化と課題に直面しています。現在の時代のニーズに適応するために、私たちは効率的で便利で安全な試験環境を提供し、学生と教師により良い試験体験と指導管理を提供することを目的として、最新のオンライン試験システムを開発しました。

当社のオンライン試験システムは、バックエンドに Spring Boot、フロントエンドに Vue2 と ElementUI を使用する高度な技術アーキテクチャを採用しています。同時に、データの信頼性と安定性を確保するために、データベースとして MySQL を選択しました。

このシステムは、生徒管理、教師管理、質問バンク管理、試験管理、メッセージ、オンライン試験、成績統計をカバーする包括的な機能モジュールを提供します。学生管理モジュールには学生情報の入力、照会、および変更の機能が含まれます 教師管理モジュールには教師情報の追加および削除機能が含まれます 問題バンク管理モジュールには教師が質問を追加および表示できます 試験管理モジュールには作成および問題の作成をサポートします削除やその他の操作と同様に、メッセージ機能により生徒と教師間のコミュニケーションが容易になり、オンライン試験モジュールにより、生徒はオンラインで質問に答えたりレポートを提出したり、自動採点を行うことができる便利な方法が提供されます。成績統計モジュールは、教師が生徒のテスト得点の包括的な統計と分析を行うのに役立ち、指導に効果的な参考資料を提供します。

2. 開発環境

開発環境	バージョン/ツール
基本的な環境	Jdk1.8、node.js14
開発ツール	IntelliJ IDEA、WebStorm
オペレーティング·システム	ウィンドウズ10
メモリ要件	8GB 以上
ブラウザ	Firefox (推奨)、Google Chrome (推奨)、Edge
データベース	MySQL 8.0 (推奨)
データベースツール	Navicat プレミアム 15 (推奨)
プロジェクトの枠組み	バックエンド SpringBoot、フロントエンド ElementUi

3. プロジェクト技術

バックエンド: SpringBoot、MybatisPlus、MySQL

フロントエンド：Vue2、ElementUi、vue-router、vuex、JavaScript

4. 機能構造

学生管理機能: 学生管理モジュールを使用すると、学生は個人情報を変更および追加して、学生情報をタイムリーに更新できます。学生ログイン機能は学生に便利なアクセスを提供し、いつでも試験計画を簡単に表示したり、オンライン試験を受けたり、個人の試験結果を確認したりすることができます。

教師管理機能: 教師管理モジュールは教師の個人情報管理機能を提供し、教師はいつでも自分の情報を変更および追加できます。教師は、教師ログイン機能により、試験や担当授業の閲覧、試験の修正・削除など、教務の総合管理を実現します。

質問バンク管理機能: 質問バンク管理モジュールは、教師にテスト用紙を質問バンクに追加する便利で迅速な機能を提供し、複数の問題タイプの入力をサポートします。教師は論文作成時の参考として既存の問題バンクを表示できます。同時に、オンラインテスト用紙作成機能により、必要に応じてテスト用紙を自動生成することができ、教師の負担を軽減します。

テスト管理機能：テスト管理モジュールはテスト計画の追加、変更、削除をサポートし、教師は学習の進捗状況やコースのニーズに応じて柔軟に手配できます。また、試験変更機能により、教師は変更が発生した場合に試験の手配をタイムリーに調整して、指導をスムーズに進めることができます。

スコアクエリ機能：スコアクエリ機能を使用すると、生徒はテストのスコアを簡単にクエリでき、テストスコア統計機能は教師に生徒のスコアのより包括的な分析を提供し、教育の改善と個別指導を支援します。

オンライン試験クライアント: オンライン試験クライアントは、学生に便利なオンライン試験体験を提供します。学生はクライアント上で試験計画を確認し、時間通りにオンライン試験を受け、自動採点機能を通じて試験結果を迅速に得ることができます。クライアントはメッセージ機能もサポートしており、生徒が教師に質問したりフィードバックを提供したりして、教師と生徒間の効果的なコミュニケーションを促進できます。

5. 実行中のスクリーンショット

試験スケジュールの表示:

オンライン試験:

試験を提出します。

試験結果の確認:

掲示板:

ログインページ:

試験管理:

質問バンク管理:

教師の管理:

学生管理:

メッセージ：

試験スコアの統計:

6. 機能実現

フロントエンドは現在の試験情報を取得します

    getExamData() {
    
     //获取当前试卷所有信息
      let date = new Date()
      this.startTime = this.getTime(date)
      let examCode = this.$route.query.examCode //获取路由传递过来的试卷编号
      this.$axios(`/api/exam/${
      
      examCode}`).then(res => {
    
      //通过examCode请求试卷详细信息
        this.examData = {
    
     ...res.data.data} //获取考试详情
        this.index = 0
        this.time = this.examData.totalScore //获取分钟数
        let paperId = this.examData.paperId
        this.$axios(`/api/paper/${
      
      paperId}`).then(res => {
    
      //通过paperId获取试题题目信息
          this.topic = {
    
    ...res.data}
          let reduceAnswer = this.topic[1][this.index]
          this.reduceAnswer = reduceAnswer
          let keys = Object.keys(this.topic) //对象转数组
          keys.forEach(e => {
    
    
            let data = this.topic[e]
            this.topicCount.push(data.length)
            let currentScore = 0
            for(let i = 0; i< data.length; i++) {
    
     //循环每种题型,计算出总分
              currentScore += data[i].score
            }
            this.score.push(currentScore) //把每种题型总分存入score
          })
          let len = this.topicCount[1]
          let father = []
          for(let i = 0; i < len; i++) {
    
     //根据填空题数量创建二维空数组存放每道题答案
            let children = [null,null,null,null]
            father.push(children)
          }
          this.fillAnswer = father
          let dataInit = this.topic[1]
          this.number = 1
          this.showQuestion = dataInit[0].question
          this.showAnswer = dataInit[0]
        })
      })
    }

自動採点方式のコアコード

   commit() {
    
     //答案提交计算分数
      /* 计算选择题总分 */
      let topic1Answer = this.topic1Answer
      let finalScore = 0
      topic1Answer.forEach((element,index) => {
    
     //循环每道选择题根据选项计算分数
        let right = null
        if(element != null) {
    
    
          switch(element) {
    
     //选项1,2,3,4 转换为 "A","B","C","D"
            case 1:
              right = "A"
              break
            case 2:
              right = "B"
              break
            case 3:
              right = "C"
              break
            case 4:
              right = "D"
          }
          if(right == this.topic[1][index].rightAnswer) {
    
     // 当前选项与正确答案对比
            finalScore += this.topic[1][index].score // 计算总分数
          }
          console.log(right,this.topic[1][index].rightAnswer)
        }
        // console.log(topic1Answer)
      })
      /**计算判断题总分 */
      // console.log(`this.fillAnswer${this.fillAnswer}`)
      // console.log(this.topic[2][this.index])
      let fillAnswer = this.fillAnswer
      fillAnswer.forEach((element,index) => {
    
     //此处index和 this.index数据不一致，注意
        element.forEach((inner) => {
    
    
          if(this.topic[2][index].answer.includes(inner)) {
    
     //判断填空答案是否与数据库一致
            console.log("正确")
            finalScore += this.topic[2][this.index].score
          }
        })
      });
      /** 计算判断题总分 */
      let topic3Answer = this.judgeAnswer
      topic3Answer.forEach((element,index) => {
    
    
        let right = null
        switch(element) {
    
    
          case 1:
            right = "T"
            break
          case 2:
            right = "F"
        }
        if(right == this.topic[3][index].answer) {
    
     // 当前选项与正确答案对比
            finalScore += this.topic[3][index].score // 计算总分数
          }
      })
      if(this.time != 0) {
    
    
        this.$confirm("考试结束时间未到,是否提前交卷","友情提示",{
    
    
          confirmButtonText: '立即交卷',
          cancelButtonText: '再检查一下',
          type: 'warning'
        }).then(() => {
    
    
          console.log("交卷")
          let date = new Date()
          this.endTime = this.getTime(date)
          let answerDate = this.endTime.substr(0,10)
          //提交成绩信息
          this.$axios({
    
    
            url: '/api/score',
            method: 'post',
            data: {
    
    
              examCode: this.examData.examCode, //考试编号
              studentId: this.userInfo.id, //学号
              subject: this.examData.source, //课程名称
              etScore: finalScore, //答题成绩
              answerDate: answerDate, //答题日期
            }
          }).then(res => {
    
    
            if(res.data.code == 200) {
    
    
              this.$router.push({
    
    path:'/studentScore',query: {
    
    
                score: finalScore,
                startTime: this.startTime,
                endTime: this.endTime
              }})
            }
          })
        }).catch(() => {
    
    
          console.log("继续答题")
        })
      }
    },

試験情報を取得するためのバックエンド インターフェイス

    @GetMapping("/exam/{examCode}")
    public ApiResult findById(@PathVariable("examCode") Integer examCode){
    
    
        System.out.println("根据ID查找");
        ExamManage res = examManageService.findById(examCode);
        if(res == null) {
    
    
            return ApiResultHandler.buildApiResult(10000,"考试编号不存在",null);
        }
        return ApiResultHandler.buildApiResult(200,"请求成功！",res);
    }

テスト問題を取得するためのバックエンド インターフェイス

    @GetMapping("/paper/{paperId}")
    public Map<Integer, List<?>> findById(@PathVariable("paperId") Integer paperId) {
    
    
        List<MultiQuestion> multiQuestionRes = multiQuestionService.findByIdAndType(paperId);   //选择题题库 1
        List<FillQuestion> fillQuestionsRes = fillQuestionService.findByIdAndType(paperId);     //填空题题库 2
        List<JudgeQuestion> judgeQuestionRes = judgeQuestionService.findByIdAndType(paperId);   //判断题题库 3
        Map<Integer, List<?>> map = new HashMap<>();
        map.put(1,multiQuestionRes);
        map.put(2,fillQuestionsRes);
        map.put(3,judgeQuestionRes);
        return  map;
    }

7. データベース設計

テーブル名: 管理者

フィールド名	データの種類	必要ですか?	注記
管理者ID	int(11)	はい	ID番号
管理者名	varchar(20)	いいえ	名前
セックス	varchar(2)	いいえ	性別
電話番号	varchar(11)	いいえ	電話番号
Eメール	varchar(20)	いいえ	Eメール
障害者	varchar(16)	いいえ	パスワード
カードID	varchar(18)	いいえ	ID番号
役割	varchar(1)	いいえ	役割 (管理者 0 人、教師 1 人、生徒 2 人)

テーブル名: Exam_manage

フィールド名	データの種類	必要ですか?	注記
試験コード	int(11)	はい	試験番号
説明	varchar(50)	いいえ	試験の概要
ソース	varchar(20)	いいえ	コースタイトル
紙ID	int(11)	いいえ	論文番号
試験日	varchar(10)	いいえ	試験日
合計時間	int(11)	いいえ	間隔
学年	varchar(10)	いいえ	学年
学期	varchar(10)	いいえ	学期
選考科目	varchar(20)	いいえ	選考科目
研究所	varchar(20)	いいえ	カレッジ
合計スコア	int(11)	いいえ	合計スコア
タイプ	varchar(255)	いいえ	試験の種類
チップ	varchar(255)	いいえ	候補者への通知

テーブル名: fill_question

フィールド名	データの種類	必要ですか?	注記
質問ID	int(11)	はい	質問番号
主題	varchar(20)	いいえ	試験科目
質問	varchar(255)	いいえ	質問内容
答え	varchar(255)	いいえ	正解
分析	varchar(255)	いいえ	質問分析
スコア	int(11)	いいえ	分数
レベル	varchar(5)	いいえ	難易度
セクション	varchar(20)	いいえ	章

テーブル名: judge_question

フィールド名	データの種類	必要ですか?	注記
質問ID	int(11)	はい	質問番号
主題	varchar(20)	いいえ	試験科目
質問	varchar(255)	いいえ	質問内容
答え	varchar(255)	いいえ	正解
分析	varchar(255)	いいえ	質問分析
スコア	int(11)	いいえ	分数
レベル	varchar(1)	いいえ	難易度
セクション	varchar(20)	いいえ	章

テーブル名: メッセージ

フィールド名	データの種類	必要ですか?	注記
ID	int(11)	はい	メッセージ番号
タイトル	varchar(20)	いいえ	タイトル
コンテンツ	varchar(255)	いいえ	メッセージ内容
時間	日付	いいえ	メッセージ時間

8. ソースコードの取得

Yunyuan Practical Combat の公式 Web サイトには、ソース コード、インストール チュートリアル ドキュメント、プロジェクト紹介ドキュメント、およびその他の関連ドキュメントがアップロードされており、以下の公式 Web サイトからプロジェクトを入手できます。