一個基於 SpringBoot + Vue 的線上考試系統

Java陈序员發表於2024-09-26
Spring BootVue

大家好，我是 Java陳序員。

今天，給大家介紹一個前後端分離的線上考試系統。

關注微信公眾號：【Java陳序員】，獲取開源專案分享、AI副業分享、超200本經典計算機電子書籍等。

專案介紹

spring-boot-online-exam —— 一個基於 Spring Boot + Vue 實現的線上考試系統，支援學生、教師、管理員三種角色。

功能特色：

  • 支援單選題、多選題、判斷題
  • 支援學生、教師、管理員三種角色
    • 學生：參加考試和檢視我的考試
    • 教師：學生的所有許可權 + 建立/編輯題目 + 建立/編輯考試
    • 管理員：教師的所有許可權 + 管理使用者

技術棧：

  • 前後端分離，前段元件化，方便二次開發
  • 前端：Vue + AntDesign
  • 後端：SpringBoot + JPA + Swagger2 + JWT

功能圖示

考試卡片

問題管理

考試管理

我的考試

快速上手

1、下載程式碼

git clone https://github.com/19920625lsg/spring-boot-online-exam.git

2、初始化資料庫

  • 建立資料庫
CREATE DATABASE `exam` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_bin;
  • 執行指令碼 spring-boot-online-exam/doc/sql/exam.sql，初始化資料

3、啟動後端

  • 將專案以 Maven 專案的形式匯入到 IDEA
  • 修改配置檔案 spring-boot-online-exam/backend/src/main/resources/application.yml 中的資料庫連線資訊
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: aA111111
    url: jdbc:mysql://localhost:3306/exam?characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai

  • 執行主啟動類 lsgwr.exam.ExamApplication，啟動後端服務

  • 瀏覽器訪問 Swagger 文件地址 http://localhost:9527/swagger-ui.html 說明啟動成功

4、啟動前端

  • 進入前端程式碼
cd spring-boot-online-exam/frontend/exam/
  • 安裝依賴
npm install
  • 啟動前端
npm run serve

5、瀏覽器訪問 http://localhost:8000

預設登入使用者名稱：admin、teacher、student，密碼：admin123

專案地址：https://github.com/lsgwr/spring-boot-online-exam

最後

推薦的開源專案已經收錄到 GitHub 專案，歡迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者訪問網站，進行線上瀏覽：

https://chencoding.top:8090/#/

大家的點贊、收藏和評論都是對作者的支援，如文章對你有幫助還請點贊轉發支援下，謝謝！

相關文章