LeanCloud + Ionic3 迅速重構應用

做者：李宜棟

【 玩轉 LeanCloud 】開發者經驗分享：

學校有一個高考志願填報的應用須要重構，以前的實現是經過構建 Laravel RESTful API + Ionic2 實現院校和分數線信息的檢索，可是一我的先後端聯調太麻煩了，加上平時課多，交活兒日期又近在眼前，因此考慮再三決定換成 Ionic3 + 後端雲的方式來構建應用，這樣不用花心思去搞後端的 CRUD，速度上應該能快很多。

在 Ionic 中應用的每一個頁面均可以作成封裝好的組件，在 Page 中負責調用 Service (Provider) 進行數據請求與更新，獲取到的數據注入到組件當中刷新顯示數據或者冒泡到 Page 當中進行處理。主要的需求包括後端的數據存儲、地圖展現和繪製折線圖表。

後兩項需求並不難，正好之前接觸過，顯示地圖用 Baidu Map SDK，繪製折線圖用 Echarts 的 JavaScript SDK，在這個項目中主要就是在 TypeScript 的調用上注意一下。數據存儲的後端雲，其實最開始我沒用 LeanCloud，用的別的。我本想把本地數據庫的數據上傳到雲端，但發現那個雲端的數據遷移功能根本不 work，我是免費用戶，去給人家提個 issue 吧也不見得能多快就給修復，因此仍是另闢蹊徑吧。找着找着就看到了 LeanCloud，它家的數據遷移好用，這事兒也就這麼定了。

數據遷移我從 DataGrip 導出數據到 CSV 格式，注意要設置選擇用引號包圍字段值來解決空值的問題，作好字段類型標註，導好的文件在 LeanCloud 控制檯裏一鍵上傳就全 OK 啦。另外以前使用的別人家的 JavaScript SDK，如今換成 LeanCloud 的 SDK，要在 Ionic 項目的 www 目錄下將 index.html 文件加入對應的 CDN 的 script 引用，代碼中全部要調用 LeanCloud SDK 的地方都要加上 declare var AV; 對強迫症來講實在不友好，因此仍是要 npm 一下以後配置一下 TypeScript 好。

初始化 SDK，設置 ID 和 Key：

而後就能夠在 Service 中使用了，也能在 Page 中以 Promise 的方式調用了。

以後就能夠開心地堆組件啦。

踩過一些坑，在這裏提個醒：

1.contains 和 containedIn 不是一碼事，contains 是字符串包含，containedIn 是數組包含，並且 contains 作模糊查詢的時候條件關係要用 or。

2. Ionic 的數據強制刷新：因爲 Ionic 的數據綁定與更新策略，有時取回數據時數據並不能引發頁面的變動，這時候就須要強制刷新頁面綁定的數據了。

3. 數字型數據：最初數據導入的時候爲了方便，所有用的 string 類型，因此數字字段排序的時候…….你懂的。

此次重構差很少就用了四天的時間，寫了 16 個 Page、17 個 Component、5 個 Provider，按時交活兒！但願本文能夠在小應用的快速構建上給你們一個參考~