1. 程式人生 > 實用技巧 >SpringBoot開源線上考試系統!解決我的燃眉之急

SpringBoot開源線上考試系統!解決我的燃眉之急

前言

最近看到了一個考試系統,感覺做的挺不錯,並且也比較成熟,所以我就簡單玩了一下。另外,考試系統應用場景還挺多的,不論是對於在校大學生還是已經工作的小夥伴,並且,類似的私活也有很多。

線上考試系統後臺管理主頁

下面我就把這個專案分享給小夥伴們,非常值得學習,拿來即用!

為了一步一步演示,讓小夥伴們都能成功部署/執行專案, Guide 哥自己本地搭建了專案環境,並將專案成功跑了起來,並使用了其基本的功能。

照著我的步驟,新手也能成功把專案跑起來!

如果你“感動”的話,點個贊/在看,就是對我最大的支援!

另外,以下內容不涉及程式碼分析,整體程式碼結構比較清晰,熟悉了基本功能之後會很容易看明白。

介紹

uexam 是一款前後端分離的線上考試系統。這款線上考試系統,不光支援 web 端,同時還支援微信小程式端。

uexam 介面設計美觀,程式碼整體結構清晰,表設計比較規範。

uexam 後端基於 Spring Boot 2.0+MySQL/PostgreSQL+Redis+MyBatis,前端基於 Vue,採用前端後端分離開發!

另外,這個專案提供了 MySQL 和 PostgreSQL 兩種不同的資料庫版本,下面我以 PostgreSQL 資料庫版本的來演示(建議大家使用和體驗 PostgreSQL 版本)。

專案地址:


軟體架構

軟體架構圖

使用效果

樣式以及操作體驗都是非常不錯的,這也是我推薦這個專案很重要的一個原因。

管理端

新增學科

在建立題目之前,你需要首要建立學科。這裡我們建立的學科是程式設計,年級是三年級。

新增題目

可以看到這裡可以新增多種題型: 單選題、多選題、判斷題、填空題、簡答題。

我們以單選題為例,新增題目介面如下。

新增成功之後,題目列表就會出現我們剛剛新增的題目。

新增試卷

有了學科和題目之後才能新增試卷。

新增試卷

新增成功之後,試卷列表就會出現我們剛剛新增的試卷。

試卷建立成功

新增學生

注意:這裡的學生要和我們前面建立的學科對應的年級對應上。

新增學生

學生端

使用我們剛剛建立的學生賬號登入,你會發現主頁多了一個試卷。這個試卷就是我們剛剛在管理端建立的。

學生端-主頁

試卷答題介面如下。

學生端-試卷

啟動

後端

我們這裡以 PostgreSQL 資料庫版本來演示。

安裝 PostgreSQL

這裡我們使用 Docker 下載最近版的 PostgreSQL 映象 ,預設大家已經安裝了 Docker。

$dockerpullpostgres

檢視 PostgreSQL 映象:


  1. $dockerimages|greppostgres

  2. postgreslatest62473370e7ee2weeksago314MB

執行 PostgreSQL:

$dockerrun-d-p5432:5432--namepostgresql-ePOSTGRES_PASSWORD=123456postgres

安裝 Redis

這裡我們使用 Docker 下載最近版的 Redis 映象 ,預設大家已經安裝了 Docker。

$dockerpullredis

檢視 Redis 映象:


  1. $dockerimages|grepredis

執行 Redis:

$dockerrun-itd--nameredis-test-p6379:6379redis

建立資料庫並執行資料庫指令碼

首先建立一個名字叫做xzs的資料庫,然後執行相應的資料庫指令碼即可(資料庫指令碼在uexam/source/xzs/sql目錄下。)。

配置檔案修改

使用 IntelliJ IDEA 開啟uexam/source/xzs(後臺程式碼),修改application-dev.yml,將 postgesql/mysql、redis 的服務地址改為自己本地的。

啟動專案

直接執行XzsApplication即可。

啟動成功後,開啟下面的連結即可跳轉到對應的端:

  • 學生系統地址:http://localhost:8000/student
  • 管理端地址:http://localhost:8000/admin

注意:這種方式,前端雖然也啟動了,也能訪問,不過是內嵌在後端專案中。如果如果我們需要前後端分離的話,需要單獨執行前端專案

前端

小程式端的就不演示了,我這裡只演示一下 web 端的。

web 端程式碼在uexam/source/vue下,我們需要首先進入這個目錄,然後分別對xzs-admin(管理端) 和xzs-student(學生端)執行下面兩個命令。

1.下載相關依賴

$npminstall

2.啟動專案

$npmrunserve

啟動完成之後,開啟下面的連結即可跳轉到對應的端:

  • 學生系統地址:http://localhost:8001
  • 管理端地址:http://localhost:8002