前言

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

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

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

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

另外，以下內(nèi)容不涉及代碼分析，整體代碼結(jié)構(gòu)比較清晰，熟悉了基本功能之后會很容易看明白。

介紹

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

uexam 界面設(shè)計美觀，代碼整體結(jié)構(gòu)清晰，表設(shè)計比較規(guī)范。

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

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

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

軟件架構(gòu)

使用效果

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

管理端

添加學(xué)科

在創(chuàng)建題目之前，你需要首要創(chuàng)建學(xué)科。這里我們創(chuàng)建的學(xué)科是編程，年級是三年級。

添加學(xué)科

添加題目

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

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

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

題目創(chuàng)建成功

添加試卷

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

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

添加學(xué)生

注意：這里的學(xué)生要和我們前面創(chuàng)建的學(xué)科對應(yīng)的年級對應(yīng)上。

學(xué)生端

使用我們剛剛創(chuàng)建的學(xué)生賬號登錄，你會發(fā)現(xiàn)主頁多了一個試卷。這個試卷就是我們剛剛在管理端創(chuàng)建的。

試卷答題界面如下。

啟動

后端

我們這里以 PostgreSQL 數(shù)據(jù)庫版本來演示。

安裝 PostgreSQL

這里我們使用 Docker 下載最近版的 PostgreSQL 鏡像 ，默認(rèn)大家已經(jīng)安裝了 Docker。

$ docker pull postgres 

查看 PostgreSQL 鏡像：

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

運(yùn)行 PostgreSQL：

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

安裝 Redis

這里我們使用 Docker 下載最近版的 Redis 鏡像 ，默認(rèn)大家已經(jīng)安裝了 Docker。

$ docker pull redis 

查看 Redis 鏡像：

$ docker images |grep redis 

運(yùn)行 Redis：

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

創(chuàng)建數(shù)據(jù)庫并執(zhí)行數(shù)據(jù)庫腳本

首先創(chuàng)建一個名字叫做xzs 的數(shù)據(jù)庫，然后執(zhí)行相應(yīng)的數(shù)據(jù)庫腳本即可(數(shù)據(jù)庫腳本在 uexam/source/xzs/sql 目錄下。)。

配置文件修改

使用 IntelliJ IDEA 打開 uexam/source/xzs (后臺代碼)，修改 application-dev.yml ，將 postgesql/mysql、redis 的服務(wù)地址改為自己本地的。

啟動項目

直接運(yùn)行 XzsApplication 即可。

啟動成功后，打開下面的鏈接即可跳轉(zhuǎn)到對應(yīng)的端：

• 學(xué)生系統(tǒng)地址：http://localhost:8000/student
• 管理端地址：http://localhost:8000/admin

注意：這種方式，前端雖然也啟動了，也能訪問，不過是內(nèi)嵌在后端項目中。如果如果我們需要前后端分離的話，需要單獨(dú)運(yùn)行前端項目

前端

小程序端的就不演示了，我這里只演示一下 web 端的。

web 端代碼在 uexam/source/vue 下，我們需要首先進(jìn)入這個目錄,然后分別對 xzs-admin (管理端) 和 xzs-student (學(xué)生端)執(zhí)行下面兩個命令。

1.下載相關(guān)依賴

$ npm install 

2.啟動項目

$ npm run serve 

啟動完成之后，打開下面的鏈接即可跳轉(zhuǎn)到對應(yīng)的端：

• 學(xué)生系統(tǒng)地址：http://localhost:8001
• 管理端地址：http://localhost:8002