一、考試系統簡介

新鮮出爐的一款SpringBoot +Vue的考試系統，支援多種題型：選擇題、多選題、判斷題、填空題、綜合題以及數學公式。支援線上考試，教師線上批改試卷。

二、專案架構

後端技術棧

• SpringBoot: SpringBoot是由Pivotal團隊提供的全新框架，其設計目的是用來簡化Spring應用的建立、執行、除錯、部署等。
• Mybatis: 一個持久層的框架,與資料庫進行互動,將資料持久化到關係型資料庫中
• Shiro: 一個功能強大且易於使用的Java安全框架，進行身份驗證，授權，加密和會話管理，可用於保護任何應用程式- 從命令列應用程式，移動應用程式到大型的Web應用和企業應用。
• mysql: 一個輕量級關係型資料庫管理系統，由瑞典MySQL AB公司開發，目前屬於Oracle公司。
• redis: 一個完全開源免費的，遵守BSD協議，是一個高效能的key-value資料庫。

前端技術

• Vue: 一套用於構建使用者介面的漸進式框架。 與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。
• Vuex: 一個專為Vue.js 應用程式開發的狀態管理模式。 它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
• Element-UI: 一套為開發者、設計師和產品經理準備的基於Vue 2.0 的桌面端元件庫。
• vue-router: Vue.js 官方的路由管理器。
• axios: 一個基於Promise 的HTTP 庫，可以用在瀏覽器和node.js 中。

專案說明

考試系統整體為前後端分離專案，作者又在這基礎上，將後端拆分成兩個管理員後端和學生考試後端，後端的程式碼是在一起。前端也做了類似的拆分，所以其實是兩個後端專案，兩個前端專案。本篇先講一下學生考試部分的前後端環境搭建。功能包括：學員線上做課程試題、線上考試、錯題本功能記錄、考試記錄、個人中心。

後端專案地址

後端專案地址: https://gitee.com/zhuimengshaonian/wisdom-education

• 管理員後臺: education-admin-api
• 學生考試後臺: education-student-api

前端專案地址

• 管理員前端: https://gitee.com/zhuimengshaonian/wisdom-education-admin-front
• 學生考試前端: https://gitee.com/zhuimengshaonian/wisdom-education-front

三、實戰

3.1 後端服務

下載專案

git clone https://gitee.com/zhuimengshaonian/wisdom-education.git

初始化資料庫
建立資料庫education,執行資料庫指令碼。這裡資料庫指令碼在專案的db目錄下。

init-data.sql #初始化資料
init-region.sql #初始化system_region
init-table.sql #初始化表結構

注意:system_log表少一個欄位request_url,型別為varchar(100)。
修改配置
閱讀專案配置檔案可知，專案使用的prod的配置檔案，所以我們直接看application-prod.yml檔案即可。這裡主要關注資料庫連線，再新增一下redis的配置。

server:
 port: 8001 #伺服器埠
 servlet:
 context-path: /
#spring jdbc配置
spring:
#redis相關配置
 redis:
 jedis:
 pool:
 max-active: 8
 max-wait: 30
 max-idle: 8
 min-idle: 0
 port: 6379
 host: localhost
 password: 123456
#資料庫連線
 datasource:
 url: jdbc:mysql://localhost:3306/education?serverTimezone=GMT%2B8&useSSL=true&useUnicode=true&characterEncoding=utf8
 username: root
 password: 123456
 driver-class-name: com.mysql.cj.jdbc.Driver

執行Application
執行EducationStudentApiApplication類，即可本地啟動後端服務。

3.2 前端服務

下載專案

git clone https://gitee.com/zhuimengshaonian/wisdom-education-front.git

修改配置

用開發工具開啟前端專案,這裡我用的VSCode，開啟config/index.js,這裡主要修改一下proxyTable的內容:

proxyTable: {
 '/proxyApi': {
 target: 'http://localhost:8001',changeOrigin: true,pathRewrite: {
 '/proxyApi': 'http://localhost:8001'
 }
 }
 }

執行專案
在命令列視窗，或者VSCode的終端執行下面命令就可以本地執行專案。

npm install #安裝依賴
npm run dev #開發環境啟動，預設http://localhost:8080/

要在服務端部署專案，執行下面打包命令，然後使用web容器部署即可。

npm run build #專案打包
npm run build --report #專案打包並輸出分析報告

3.3 執行效果

瀏覽器訪問http://localhost:8080,預設使用者密碼: student 123456,就可以直接登入了。

執行效果:

四、最後

專案具備了考試系統基本功能，本篇講了學生考試部分的前後端的搭建。另外比較重要的一部分就是管理員前端專案，本人不是專業搞前端的，還沒搞定管理員前端專案，嘗試過程中也遇到了很多問題，FAQ做個記錄。遇到問題其實也不可怕，合理利用搜索引擎 + 開啟大腦思考功能，辦法總比困難多嘛！我相信問題一定可以解決的。下篇講考試系統的管理員部分的前後端搭建。

FAQ

1.npm install 報錯：Error: Can't find Python executable "python",you can set the PYTHON env variable。
解決版方法：執行 npm install -g windows-build-tools命令
2.window環境下npm install node-sass報錯的解決方法。
解決方法：https://www.jb51.net/article/129081.htm
3.Windows下安裝前端專案，node-sass報錯。
解決方法：npm install [email protected] --save
4.Vue packages version mismatch:[email protected],[email protected]。
解決辦法：保持版本一致：npm install [email protected] --save
5.How to fix ReferenceError: primordials is not defined in node。
解決方法：npm -g install gulp-cli

總結

到此這篇關於SpringBoot +Vue開發考試系統的文章就介紹到這了,更多相關springboot vue 考試系統內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！