新北市路燈系統（民眾報修模組）開發技術思維分析
網站連結
目錄
一、技術
二、開發功能特色介紹
三、與三級品管 WebApp 相比，進步了什麼？
四、結論
一、技術
前端：Vue2, Vee-validate, Vuex, Vue-router, Lodash, Leaflet, Axios, Moment.js
後端：Laravel5（初步導入使用），設計結構採取 Restful
環境：Apache, MsSQL
版控：Git
備註：
緊急協助支援的開發的需需求，耗時約 2-3 週完善（先前已有開發過類似模組經驗，詳細請看三級品管 WebApp），在本模組中導入 Laravel 以及更熟識 Vue 的使用。
二、開發功能特色介紹
整合新北市會員系統介接
實踐思路
【前端】
串接第三方提供 API 方式進行單一登入，第三方登入成功後，會重定向到民眾路燈報修網址，網址中會多一組 Token，由前端去確認 Token 是否有效，若有效則取回使用者的資料，讓使用者在下次報修路燈的時候不需要重複填寫自己的個人資料。
選擇地區進行定位
實踐思路：
【前端】
頁面載入時，首先會透過 API 取得新北市全地區名稱，點擊任一地區名字，會向 API 請求，這邊請求分成兩個部分，一個是第三方的地址資料、一個是系統中資料庫的路燈的座標資料，若有座標資料則優先定位到該區路燈位置上。
【後端】
地址部分針對第三方進行串接（主要方便資料格式化，可以再後端拉一個格式的 Adapter，並統一輸出格式給前端），座標部分則根據地址去查詢，若有路燈資料則回傳座標資料，沒有路燈資料回傳區域座標資料。
清單定位
實踐思路：
【前端】
首先前端會請求後端，並載入資料，
後端撰寫 API，取得傳入條件，每次回傳筆數為六（初次透過 Laravel 封裝好的 function 來進行實踐），前端則是透過 Leaflet 再清單接受到 Click 指令後，去取得該項目的座標，並進行地圖的定位及彈出訊息框。
【後端】
透過 Laravel 封裝好的 Pagination 進行實作，中間因為回傳的資料需要在進行格式化，所以需要在資料查詢後再透過 trasnform 方式去把需要的資料進行格式化（例如日期的格式）。
報修單功能
實踐思路：
【前端】
透過 Vue 進行表單的切換與處理（主要為新增與查詢），並整合 Leaflet 定位等功能（開發時另行封裝，Client 只需呼叫 Function 即可），這邊值得一提的是，如上述 GIF 圖看到的，輸入路燈編號時，停頓 N 秒後會自動在地圖上定位，這邊透過 Lodash 的 debounce 進行實踐，定位過程需考慮到地圖縮放尺度問題（若地圖過小，打點數量過多會造成網頁卡當），以及同一筆路燈不同時間點報修要如何查詢的問題。
【後端】
Laravel 實現查詢與新增功能，首先是前端參數傳入時會透過 Validator 進行判斷是否傳入正確的數值，若無問題則新增或查詢，其中這邊回傳的值都開始進行封裝，例如會有 Code、Status、Data，封裝概念來自於《現代 PHP：新的特點及良好習慣》一書學後的實踐。
三、與三級品管 WebApp 相比，進步了什麼？
前端
Vuex 架構整合
常用模組封裝
後端
- 於專案中導入 Laravel 的框架並實際運用與開發（在這之前都是原生 PHP 進行開發，有許多輪子需要自己造，例如 額外自行封裝 SQL 的 PDO（否則可能引發 XSS 等問題））
四、結論
這個系統我負責功能部分較小，故嘗試將 Laravel 導入（現在全公司基本都採用該框架開發），Vue 也是在這個時期逐步建立（全公司後來所有專案也同樣都採用該框架，在那之前都是 Jquery；並且整合 Leaflet 這套地圖的利器，在那之前都是 Arcgis.js，詳細可參考土地資產管理系統開發一文。
接下來是我接手的最後一個系統一一公共工程品質管理系統。
完美結合兩大框架，實現前後端分離，並同時因應需求透過 Python 開發爬蟲，以排程方式定期取得資料至資料庫，最終完善的案子（該案共有兩個系統），詳細請看下一篇！