一、考試系統(tǒng)簡(jiǎn)介

新鮮出爐的一款SpringBoot +Vue的考試系統(tǒng)，支持多種題型：選擇題、多選題、判斷題、填空題、綜合題以及數(shù)學(xué)公式。支持在線考試，教師在線批改試卷。

二、項(xiàng)目架構(gòu)

后端技術(shù)棧

SpringBoot: SpringBoot是由Pivotal團(tuán)隊(duì)提供的全新框架，其設(shè)計(jì)目的是用來簡(jiǎn)化Spring應(yīng)用的創(chuàng)建、運(yùn)行、調(diào)試、部署等。 Mybatis: 一個(gè)持久層的框架,與數(shù)據(jù)庫進(jìn)行交互,將數(shù)據(jù)持久化到關(guān)系型數(shù)據(jù)庫中 Shiro: 一個(gè)功能強(qiáng)大且易于使用的Java安全框架，進(jìn)行身份驗(yàn)證，授權(quán)，加密和會(huì)話管理，可用于保護(hù)任何應(yīng)用程序- 從命令行應(yīng)用程序，移動(dòng)應(yīng)用程序到大型的Web應(yīng)用和企業(yè)應(yīng)用。 mysql: 一個(gè)輕量級(jí)關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，由瑞典MySQL AB公司開發(fā)，目前屬于Oracle公司。 redis: 一個(gè)完全開源免費(fèi)的，遵守BSD協(xié)議，是一個(gè)高性能的key-value數(shù)據(jù)庫。

前端技術(shù)

Vue: 一套用于構(gòu)建用戶界面的漸進(jìn)式框架。 與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。 Vuex: 一個(gè)專為Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。 它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。 Element-UI: 一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于Vue 2.0 的桌面端組件庫。 vue-router: Vue.js 官方的路由管理器。 axios: 一個(gè)基于Promise 的HTTP 庫，可以用在瀏覽器和node.js 中。

項(xiàng)目說明

考試系統(tǒng)整體為前后端分離項(xiàng)目，作者又在這基礎(chǔ)上，將后端拆分成兩個(gè)管理員后端和學(xué)生考試后端，后端的代碼是在一起。前端也做了類似的拆分，所以其實(shí)是兩個(gè)后端項(xiàng)目，兩個(gè)前端項(xiàng)目。本篇先講一下學(xué)生考試部分的前后端環(huán)境搭建。功能包括：學(xué)員在線做課程試題、在線考試、錯(cuò)題本功能記錄、考試記錄、個(gè)人中心。

后端項(xiàng)目地址

后端項(xiàng)目地址: https://gitee.com/zhuimengshaonian/wisdom-education

管理員后臺(tái): education-admin-api 學(xué)生考試后臺(tái): education-student-api

前端項(xiàng)目地址

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

三、實(shí)戰(zhàn)

3.1 后端服務(wù)

下載項(xiàng)目

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

初始化數(shù)據(jù)庫創(chuàng)建數(shù)據(jù)庫education,執(zhí)行數(shù)據(jù)庫腳本。這里數(shù)據(jù)庫腳本在項(xiàng)目的db目錄下。

init-data.sql #初始化數(shù)據(jù)init-region.sql #初始化system_regioninit-table.sql #初始化表結(jié)構(gòu)

注意:system_log表少一個(gè)字段request_url,類型為varchar(100)。修改配置閱讀項(xiàng)目配置文件可知，項(xiàng)目使用的prod的配置文件，所以我們直接看application-prod.yml文件即可。這里主要關(guān)注數(shù)據(jù)庫連接，再添加一下redis的配置。

server: port: 8001 #服務(wù)器端口 servlet: context-path: /#spring jdbc配置spring:#redis相關(guān)配置 redis: jedis: pool: max-active: 8 max-wait: 30 max-idle: 8 min-idle: 0 port: 6379 host: localhost password: 123456#數(shù)據(jù)庫連接 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

運(yùn)行Application運(yùn)行EducationStudentApiApplication類，即可本地啟動(dòng)后端服務(wù)。

3.2 前端服務(wù)

下載項(xiàng)目

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

修改配置

用開發(fā)工具打開前端項(xiàng)目,這里我用的VSCode，打開config/index.js,這里主要修改一下proxyTable的內(nèi)容:

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

運(yùn)行項(xiàng)目在命令行窗口，或者VSCode的終端執(zhí)行下面命令就可以本地運(yùn)行項(xiàng)目。

npm install #安裝依賴npm run dev #開發(fā)環(huán)境啟動(dòng)，默認(rèn)http://localhost:8080/

要在服務(wù)端部署項(xiàng)目，執(zhí)行下面打包命令，然后使用web容器部署即可。

npm run build #項(xiàng)目打包npm run build --report #項(xiàng)目打包并輸出分析報(bào)告

3.3 運(yùn)行效果

瀏覽器訪問http://localhost:8080,默認(rèn)用戶密碼: student 123456,就可以直接登錄了。

運(yùn)行效果:

四、最后

項(xiàng)目具備了考試系統(tǒng)基本功能，本篇講了學(xué)生考試部分的前后端的搭建。另外比較重要的一部分就是管理員前端項(xiàng)目，本人不是專業(yè)搞前端的，還沒搞定管理員前端項(xiàng)目，嘗試過程中也遇到了很多問題，F(xiàn)AQ做個(gè)記錄。遇到問題其實(shí)也不可怕，合理利用搜索引擎 + 開啟大腦思考功能，辦法總比困難多嘛！我相信問題一定可以解決的。下篇講考試系統(tǒng)的管理員部分的前后端搭建。

FAQ

1.npm install 報(bào)錯(cuò)：Error: Can’t find Python executable 'python', you can set the PYTHON env variable。解決版方法：執(zhí)行 npm install -g windows-build-tools命令2.window環(huán)境下npm install node-sass報(bào)錯(cuò)的解決方法。解決方法：https://www.jb51.net/article/129081.htm3.Windows下安裝前端項(xiàng)目，node-sass報(bào)錯(cuò)。解決方法：npm install [email protected] --save4.Vue packages version mismatch:[email protected], [email protected]。解決辦法：保持版本一致：npm install [email protected] --save5.How to fix ReferenceError: primordials is not defined in node。解決方法：npm -g install gulp-cli

總結(jié)

到此這篇關(guān)于SpringBoot +Vue開發(fā)考試系統(tǒng)的文章就介紹到這了,更多相關(guān)springboot vue 考試系統(tǒng)內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！