前言

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

 

在線考試系統后臺管理主頁

 

下面我就把這個項目分享給小伙伴們，非常值得學習，拿來即用!

為了一步一步演示，讓小伙伴們都能成功部署/運行項目， Guide 哥自己本地搭建了項目環境，并將項目成功跑了起來，并使用了其基本的功能。

照著我的步驟，新手也能成功把項目跑起來!

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

介紹

uexam 是一款前后端分離的在線考試系統。這款在線考試系統，不光支持 web 端，同時還支持微信小程序端。

uexam 界面設計美觀，代碼整體結構清晰，表設計比較規范。

uexam 后端基于 Spring Boot 2.0+MySQL/PostgreSQL+Redis+MyBatis，前端基于 Vue，采用前端后端分離開發!

另外，這個項目提供了 MySQL 和 PostgreSQL 兩種不同的數據庫版本，下面我以 PostgreSQL 數據庫版本的來演示(建議大家使用和體驗 PostgreSQL 版本)。

項目地址：https://gitee.com/SnailClimb/uexam 。

軟件架構

 

軟件架構圖

 

使用效果

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

管理端

添加學科

在創建題目之前，你需要首要創建學科。這里我們創建的學科是編程，年級是三年級。

 

添加學科

添加題目

可以看到這里可以添加多種題型: 單選題、多選題、判斷題、填空題、簡答題。

 

添加題目

 

我們以單選題為例，添加題目界面如下。

 

添加題目頁面

 

添加成功之后，題目列表就會出現我們剛剛添加的題目。

 

題目創建成功

添加試卷

有了學科和題目之后才能添加試卷。

 

添加試卷

 

添加成功之后，試卷列表就會出現我們剛剛添加的試卷。

 

試卷創建成功

 

添加學生

注意：這里的學生要和我們前面創建的學科對應的年級對應上。

 

添加學生

 

學生端

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

 

學生端-主頁

 

試卷答題界面如下。

 

學生端-試卷

 

啟動

后端

我們這里以 PostgreSQL 數據庫版本來演示。

安裝 PostgreSQL

這里我們使用 Docker 下載最近版的 PostgreSQL 鏡像 ，默認大家已經安裝了 Docker。

$ docker pull postgres 

查看 PostgreSQL 鏡像：

$ docker images |grep postgrespostgres latest 62473370e7ee 2 weeks ago 314MB 

運行 PostgreSQL：

$ docker run -d -p 5432:5432 --name postgresql -e POSTGRES_PASSWORD=123456 postgres 

安裝 Redis

這里我們使用 Docker 下載最近版的 Redis 鏡像 ，默認大家已經安裝了 Docker。

$ docker pull redis 

查看 Redis 鏡像：

$ docker images |grep redis 

運行 Redis：

$ docker run -itd --name redis-test -p 6379:6379 redis 

創建數據庫并執行數據庫腳本

首先創建一個名字叫做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.下載相關依賴

$ npm install 

2.啟動項目

$ npm run serve 

啟動完成之后，打開下面的鏈接即可跳轉到對應的端：

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