# [JAVA] Spring boot + Vue + MySQL 簡易考試網站專案，並部屬於Heroku上【 Abby.com 線上考試系統】

###### tags: `Java` `Spring Boot` `Vue` `MySQL`

## [前情提要]
正式成為全端工程師也2年了，2022年再度受到Covid-19的襲擊，公司WFH了好一陣子、家裡又有很多高風險族群的同住家人。宅在家的時間變多了，萌生了檢驗自己運用現有的技術，寫一個簡單線上面試技術考題系統的想法，來檢驗自己2年的成果，Let's go!!

## [系統說明]
* 一個用於做技術面試的線上考試網站
* 角色權限如下表：分為考生、考官、管理員 3 種

| 權限/角色 | 考生 | 考官 | 管理員 |
| --------- | -------- | -------- | ------ |
| 首頁 | ☑ | ☑ | ☑ |
| 待考科目 | ☑ | ☑ | ☑ |
| 考題管理 | -------- | ☑(部分) | ☑ |
| 考試管理 | -------- | ☑(部分) | ☑ |
| 考試紀錄 | ☑ | ☑(部分) | ☑ |

### TODO 部分細部功能未完整開發：
* 細部權限設定未完整區隔
* 頭像、批次題目上傳功能
* 個人資料設定頁面
* 前端畫面Modal上一步/下一步bug
* 考題刪除、criteria搜尋功能
* ...etc

## [專案架構]
* 前端: Vue + Ant Design Vue (因為懶...畫面架構引用了 https://github.com/andrewgreat/antd-pro-vite-vue3)
* 後端: Spring Boot + JPA + Maven + Swaggar2
* DB: MySQL
* 架設: Heroku (免費仔的choice，介面比起3大平台親民很多，但事後發現蠻多雷QQ)

## [系統展示說明]

> 【系統網址】：https://abby-com-tech-test.herokuapp.com/
> 【系統Swaggar】：https://abby-test-heroku.herokuapp.com/swagger-ui/index.html
> 【GitHub程式碼】：https://github.com/mko123654/AbbyComTechTest

#### Swaggar畫面

#### 登入畫面

#### 待考科目&考試紀錄

#### 考題管理

#### 考試管理

## 專案啟動方式：

### 1. 線上DEMO
> 【系統網址】：https://abby-com-tech-test.herokuapp.com/
> 【系統Swaggar】：https://abby-test-heroku.herokuapp.com/swagger-ui/index.html

### 2. 全部本機執行

2.1事先安裝：
+ 本機安裝JDK8
+ 本機安裝Maven
+ 安裝MySQL，設定密碼為abby0718，建立資料庫並預設Schema為exam，將backend\src\main\java\abby\exam\sqlScript下的all.sql匯入
+ 本機安裝Node

2.2啟動後端：
+ 2.2.1 IDE打開後等Maven專案Loading下載好，可以直接啟動。
+ 2.2.2 下指令 `mvn install -DskipTests` 打包成jar檔，於生成的target資料夾內，下指令`java –jar exam-0.0.1-SNAPSHOT.jar`

2.3啟動前端：
+ 2.3.1 cd到frontend資料夾下，下指令`npm install`讓子彈飛一陣子
+ 2.3.2 安裝完成後下指令`npm run serve`
+ 2.3.3 打開 http://localhost:8000 查看