公共工程品質管理系統／教育訓練管理系統
目錄
一、技術
二、開發功能特色介紹
三、結論
一、技術
前端：Vue2, Vee-validate, vue-awesome, Vuex, ElementUI, Vue-router, Axios, Moment.js, Snow-calendar, V-charts
後端：Laravel5, Jwt-auth, Tinybutstrong(匯出文件用), Laravel-cors
資料庫繪製：ERD 圖繪製（使用 Vertabelo 軟體，詳細請至該篇文章查閱
環境：Apache, MsSQL
版控：Git
爬蟲：Python, Requests, BeautifulSoup, Pymssql, datetime, re
設計規範：
後端：以 PSR1, PSR2 為主
前端：JavaScript Standard Style
二、開發功能特色介紹
撰寫爬蟲，並透過排程方式定期撈取資料＆回寫資料
實踐思路
當初在考慮要使用 Selenium 或者 單純的 Requests 來實作，後來因為網站設計方式較單純就用 Requests 來實踐，透過選擇 tag 方式並用正則方式，將爬取到的資料進行清洗（格式正規化），再將清洗後的資料匯入資料庫。
除此之外，當網頁資料更新時，也透過爬蟲方式將我方系統資料回寫到對方系統上，並透過 Windows.open 去彈出回寫後對方網站的訊息是否成功（因為對方全部都是 Html 呈現，沒有接口，故用該方法去實踐）
困難點：
- 網站時常更新，再加上網站的 Tag 基本沒有 id 之類可以去進行定位，會時常需要調整。
- 要爬的資料多，且規格有機會不一致，例如以為是數字突然變成中文，導致 Python 錯誤，後來再擷取資料過程中，陸續修正直至完善。
- 要注意同時間不要大量請求，以免被封鎖 IP，還需要聯繫對方已便恢復。
透過 JWT 實踐登入
實踐思路
【前端】
前端負責接 Token，這邊採用 Axios，並且可以寫一個 js 去封裝 Axios，裡面透過 Interceptors 去設定 Headers 永遠會代 Token，並且在每次請求時前端只需要關注參數即可，若 Token 失效則請求無效並且頁面登出。
【後端】
專案過往使用 PHP 的 Session 來紀錄使用者的登錄資訊，本系統我選擇實踐 JWT 方式來 完成驗證，會選擇 JWT 這個技術是因為（一）可以減少伺服器記憶體存取的負擔（二）可以在 Payload 中保存一些使用者的基本資料，方便前端直接取用（三）有發認證信的需求。
該專案主要使用 Jwt-auth 來完成該驗證功能。
行事曆功能
實踐思路
【前端】
針對 Github 撰寫的 Snow-calendar 進行實踐，但比較值得一提的是裡面有一些功能是沒有的，例如顏色的選擇等，故後來個人有拆解該原始碼去進行修正（詳細點我）
統計圖表實踐
實踐思路
【前端】
透過 v-charts 實踐各種圖表以及下載，這邊僅部分，圖表類型至少十種以上（包含單純表格的統計亦有）
權限管理設計
實踐思路：
【後端】
系統從 ACL（Access Control List）一路進步到 RBAC（Role-Based Access Control）的設計，上圖便是單一角色的權限設計，前端透過登入成功取得後端給予的 Token，前端在透過 Token 呼叫後端權限的 API，後端將回傳最新的權限配置一覽，讓前端進行設定。
查核人員推薦功能
實踐思路：
【後端】
該部分是該系統最複雜的區塊，主要集中在後端，首先要透過名稱（這邊由客戶給予關鍵字）去進行專長匹配，並且匹配過程中有包含主要專長及次要專長，以及不能同時存在的人等，整個功能最後做出來會有點類似 AI（實際上不是 AI，也沒有自主學習的功能，還是由程式去進行大量的判斷），然後進行人員的推薦。
並且為了完成這個功能，也在 DB 端先行創建好數張 View 表（否則程式會寫很多的 Where Join 可讀性差…），以便順利進行開發！
查詢與即時運算
實踐思路：
【後端】
這部分列出來是因為如圖紅框，當設定很多條件後，系統會自動算出權重分數，原本是打算每次查詢時就進行即時的運算，後來因效能及頻率考量與規劃，改至會分成手動與排程兩種權重計算，並存在另外一張表再透過關聯的方式去產出查詢資料。
報名功能模組
實踐思路
【前端】
上圖中左下部分，透過 Vee-validate 實踐 Key in 時如不符合格式會跳出訊息提醒使用者（這個設計符合 Jakob Nielsen 十大原則中的預防性錯誤）。
右下部分，前端開發一個讓使用者透過上傳 Excel 報名資料，上傳後可以直接把報名人員擷取到報名單中，再讓使用者確認（不必一個一個報名填寫），前端解析部分使用 xlsx 套件，解析完畢後，將人員資料填至介面，無問題後請求後端，由後端進行新增。
【後端】
在前端尚無報名人員資料時，為了測試多資料呈現在在前端的效果，這邊使用 Seeding 去建立假資料；以及在這個專案中，並且大多數 DB 使用了 Eloquent 方式進行新增及查找，除非一些特殊的 SQL 語句才會另外用 DB::raw 去進行實踐（PS 在路燈中都是使用 DB::table…）。
三、結論
本案結合個人推廣到公司的所有技術，包含 Git、Vue 、 Laravel，同時結合過往在家為了擷取評論去進行統計，而學習到的爬蟲技能，並且對於框架的使用與模組的封裝（例如後端就封裝 SqlConfing ＆ Api response ＆ 及部分常用的 Function 像是格式轉換宣告為 Trait）也更熟練。
在這個專案後，我還有去支援其它案子，同時也借鏡這個專案，將新技術推導進去，現今公司所有專案都是採用這兩個框架以及當初我寫好的一些封裝至今。