2023.03.16
偶然發現同事在做資料整理時，需要將特定 key加入大筆資料的 JSON 中，並透過查詢資料庫輸入對應的數值。
而這些動作不但非常繁瑣還很容易遺漏資料，因此我想可以透過 Vue 做了簡單的頁面工具，來加快整個流程的速度。
目標
- 大量資料需要處理，不適合在手機板瀏覽操作
- 原始資料因為中文需從 .mdb 轉至 .xlsx 檔，因此此動作適合在電腦處理(不適合在手機板呈現)
- 現有的 JSON 提取並顯示用來比對資料的資料即可
- 快速輸入對應的值
- 可在資料比對完成後，自動產生新的 JSON
過程
一開始想得很簡單，就依照我們常用的 JSON Editor 網站，再做一些改版就可以了。不過在製作時發現一些問題：
- 左右排版，會壓縮使用者比對資料庫選擇的空間
- 左側貼上舊有的內容，在使用者處已完資料後，會干擾使用者判斷資料新舊
- 使用者不需要知道原有 JSON 的樣貌，僅需最後產生出正確的 JSON 即可
因此重新規劃完成了目前的小工具。
介紹
這個工具分三個部分：
Step 1. 資料上傳
將需要處理的 JSON 上傳至左邊的欄位中，需要比對的 Excel 則上傳至右側欄位
Step 2. 比對資料
資料上傳完畢後，會呈現二種結果：
- 白底 → 已填寫的資料
- 紅底 → 尚未填寫的資料
而資料分四種類型的：
- 左上：當名稱與資料庫只有一筆資料相符時，自動選擇 (1 對 1 )
- 右下：當名稱與資料庫對應的有多筆結果，自動選擇第一筆 (1對多)
- 左上：當名稱與資料庫有些許差別時，可透過編輯文字找尋對應的結果
- 右下：當名稱與資料庫沒有配對時，可直接在左側欄中輸入想要的結果
Step 3. 輸出 JSON
點選下載，即可得到已經編輯完成的 JSON 檔，完成！
學習
透過這次的製作，讓我有機會練習不太常用到的 <input type=”file”> 以及讀取 Excel 資料的 packages ─ xlsx
最讓我驚訝的是，原來 Javascript 本身就有可以下載 JSON 的語法，真的是發現新大陸！
最後也獲得同事回饋工具很好用，讓我很有成就感。
參考網址
整理一下開發此工具所查找的資料
- vue download json file
- Vue.js — Write JSON object to local file - upload and process excel file in vue
- upload and process excel file in vue
- read-excel-file - How to Import and Export Excel XLSX Using Vue
- JS FileReader
- FileReader — Web APIs | MDN
- DAY15 — 處理/讀取檔案不可或缺的FileReader — iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 - How to Read Files with Vue
- js read database .mdb file (嘗試直接讀取 .mdb 但目前卡在中文亂碼
- How to retrieve data from database using Vue
- 3 Ways To Use MS Access (MDB) Files With NodeJS (JavaScript and Typ…
- mdb-reader
