APP 簡介

公司使用的請假及寫周報系統一直都是網頁版的，之前我們也有想過出一個移動端版本，但因為一些原因沒有付諸行動。剛好最近 LeanCloud 新發布了 Flutter SDK，就決定用 Flutter 來開發這款應用。

之所以選擇 Flutter，主要原因是一份代碼可以同時滿足 iOS 和 Android 兩大平臺，這樣所有同事都可以享受到這款 APP 帶來的便利。

APP 的后端數據全部存放在 LeanCloud?[1]，不用擔心后端系統的開發維護，實現起來也很簡單。

APP 效果預覽

App Store下載鏈接?[2]，或者 App Store 搜索?LeanCN?下載。

開發環境搭建

Flutter 安裝和環境搭建直接查看：Flutter 文檔?[3]。

編輯器可以選擇 Android Studio、Visual Studio Code 或者 Emacs，編輯器就根據個人喜好和開發習慣選擇了。

Flutter 開發環境配置好以后，再來創建 LeanCloud 應用。

• 首先登錄 LeanCloud 控制臺?[4]，創建一個新應用；

• 在控制臺 > 應用 > 設置 >域名綁定頁面綁定 API 訪問域名。暫時沒有域名可以略過這一步，LeanCloud 也提供了短期有效的免費體驗域名；或者注冊 LeanCloud 國際版?[5]，國際版不要求綁定域名。

在控制臺 > 應用 > 設置 > 應用 Keys 頁面記錄 AppID、AppKey 與服務器地址備用，這里的服務器地址就是 REST API 服務器地址。如果未綁定域名，控制臺相同的位置可以獲取到免費的共享域名。

使用到的第三方庫

在 pubspec.yaml 中，將 LeanCloud Flutter SDK：leancloud_storage 添加到依賴項列表:

dependencies:flutter:sdk:?fluttercupertino_icons:?^0.1.2leancloud_storage:?^0.4.0?http:?^0.12.0+4date_format:?^1.0.8?flutter_localizations:sdk:?flutterfluttertoast:?^4.0.1shared_preferences:?^0.5.7+3flutter_markdown:?^0.4.2

其他第三方插件的說明：

date_format: 請假頁面用到的日期相關格式化插件

flutter_localizations：用于設置時間選擇器的中文顯示

fluttertoast：類似 Android 中的 Toast 小插件

shared_preferences：本地數據存儲

flutter_markdown：展示周報內容時支持 markdown 格式

APP 初始化設置

初始化 SDK

執行下面的代碼連接到在 LeanCloud 創建好的應用。

導入如下包：

import?'package:leancloud_storage/leancloud.dart';

初始化配置代碼：

Future?initLeanCloud()?async?{LeanCloud.initialize('AppID',?'AppKey',//AppID?與?AppKey?在控制臺設置?>?應用?Keys?頁面獲取server:?'https://e36trlaa.lc-cn-n1-shared.com',//這里填控制臺綁定的域名或共享?API?域名queryCache:?new?LCQueryCache()); }

設計數據結構

在 LeanCloud 控制臺 > 存儲 > 結構化數據中創建需要的 Class，并添加相關字段，比如請假表（Leave）中，需要有請假人姓名，請假時長，請假原因，開始請假日期等。

客戶端保存數據時，如果 Class 不存在，系統也會自動生成對應的 Class。

登錄與注冊模塊

LeanCloud 提供了?LCUser?類來方便使用用戶管理的功能，在控制臺對應 _User 表。注冊與登錄選擇了 用戶名+密碼 的方式。實現用戶注冊只需要執行以下代碼，就會在 _User 表新增一條用戶數據：

LCUser?user?=?LCUser(); user.username?=?'Tom'; user.password?=?'cat!@#123'; await?user.signUp();

用戶登錄也只需要傳入用戶名與密碼：

LCUser?user?=?await?LCUser.login('Tom',?'cat!@#123');

在應用中如果想要獲取當前登錄用戶，可以用：

LCUser?currentUser?=?await?LCUser.getCurrent();

LCUser 還支持手機號 + 驗證碼注冊，更多登錄注冊方式可以查看 LeanCloud 用戶文檔?[6]。

請假模塊的實現

請假部分包含「提交一條請假記錄」、「查詢我的歷史請假記錄」與「查詢今日請假同事」這三個部分。

提交一條請假記錄

保存一條數據到 LeanCloud 后臺也很簡單，一條數據可以看成一個?LCObject?對象，直接給?LCObject?對象賦值，save?成功以后可以在?Leave?表中看到新增了一行數據。

//創建?Class?并保存一條數據，Leave?表用來存放請假員工數據 LCObject?leave?=?LCObject('Leave'); leave['startTime']?=?startTime;//請假的開始時間(AM/PM) leave['endTime']?=?endTime;//請假結束時間(AM/PM) LCUser?user?=?await?LCUser.getCurrent(); leave['username']?=?user.username;//請假員工用戶名 leave['startDate']?=?startDate;//請假開始日期 leave['type']?=?leaveType;//請假類型，病假、年假或產假等 leave['duration']?=?duration;//請假時長 leave['note']?=?note;//請假原因 leave['endDate']?=?endDate;//請假結束日期 await?leave.save();//保存到?LeanCloud?后臺

查詢我的歷史請假記錄

查詢數據使用?LCQuery，query.find()?返回符合條件的?List：

LCUser?user?=?await?LCUser.getCurrent(); //查詢?Leave?表 LCQuery<LCObject>?query?=?LCQuery('Leave'); query.whereEqualTo('username',?user.username); //按照創建時間排序 query.orderByDescending('createdAt'); //leaves?是當前登錄用戶的全部請假記錄 List<LCObject>?leaves?=?await?query.find();

查詢今日請假同事

LCQuery<LCObject>?query?=?LCQuery('Leave'); //查找?DateTime.now()?在請假開始日期與結束日期之間的數據 query.whereGreaterThanOrEqualTo('endDate',?DateTime.now()); query.whereLessThanOrEqualTo('startDate',?DateTime.now()); query.orderByDescending('createdAt'); List<LCObject>?leaves?=?await?query.find();

周報模塊實現

周報模塊分兩部分，保存一條周報和查詢歷史周報。展示周報支持 markdown 格式，所以在提交周報的時候，可以設置默認周報格式，用三個單引號?'''?包起來的文本可以保留原文本格式展示：

String?text?=?''' ###?This?week *?done1 *?done2###?Next?week *?todo1 *?todo2''';

保存周報

為了區分提交周報的員工，創建一個 Pointer 類型字段指向 _User 表，字段名稱是 user，保存數據時把當前用戶賦值給?user?即可。（Leave 表同理也可以創建 Pointer 類型字段記錄請假員工）。

LCUser?user?=?await?LCUser.getCurrent(); //WeeklyPub?是存儲周報數據的表 LCObject?obj?=?LCObject('WeeklyPub'); obj['content']?=?text; //?user?字段是?pointer?類型，指向?_User?表 obj['user']?=?user; LCObject?object?=?await?obj.save();

查詢周報

查詢周報時，想要一并獲取員工信息，可以使用?include，這樣一次查詢就可以查到這條周報的數據和員工（_User 表）的數據：

LCQuery<LCObject>?query?=?LCQuery('WeeklyPub'); //?查詢結果同時包含用戶信息 query.include('user'); query.orderByDescending('createdAt'); query.whereGreaterThanOrEqualTo('createdAt',?DateTime.parse('2020-06-01?00:00:00Z')); List<LCObject>?weekly?=?await?query.find();

聯系人列表

聯系人列表可以通過查詢 _User 表獲取，但這里會有一個問題。

為了安全起見，LeanCloud 新創建的應用的 _User 表默認關閉了 find 權限。用戶只能查詢到自己在 _User 表中的數據，無法查詢其他用戶的數據。

解決辦法可以是單獨創建一張表來保存這類數據，并開放這張表的 find 查詢權限。或者可以在 云引擎?[7] 里封裝用戶查詢的方法，這樣就無需開放 _User 表的 find 權限。

本 APP 采用的辦法是結合云引擎，設置了查詢用戶表的云函數，來保證數據安全。

• 第一步參考 在線編寫云函數?[8] 文檔，在 LeanCloud 控制臺 > 云引擎 > 部署 > 在線編輯?標簽頁創建云函數。例如我的云函數名是?queryUsers? ：? ??

AV.Cloud.define('queryUsers',?async?function?(request)?{if?(request.currentUser)?{const?userQuery?=?new?AV.Query('_User');userQuery.addDescending('createdAt');return?await?userQuery.find();}?else?{throw?new?AV.Cloud.Error('用戶未登錄');} })

• 然后點擊「部署」按鈕，部署到生產環境。

部署成功后，在移動端可以直接調用云函數，Flutter 代碼中可以這樣調用云函數：

Map<String,?dynamic>?userMap?=?await?LCCloud.run('queryUsers'); //users?就是云函數返回的用戶列表 List<dynamic>?users?=?userMap['result'];

APP 項目地址

APP 項目完整代碼見 Github-FlutterLeaveDemo?[9]。

參考內容鏈接：

[1] LeanCloud：https://www.leancloud.cn/

[2] App Store下載鏈接：https://apps.apple.com/us/app/id1518553843

[3] Flutter 文檔：https://flutter.dev/docs/get-started/install

[4] LeanCloud 控制臺：https://leancloud.cn/dashboard/login.html#/signin

[5] LeanCloud 國際版：https://console.leancloud.app/login.html#/signin

[6] LeanCloud 用戶文檔：https://url.leanapp.cn/yOu9hYI

[7] 云引擎：https://url.leanapp.cn/C0ldZfx

[8]?在線編寫云函數：https://url.leanapp.cn/ae8QoY6

[9]FlutterLeaveDemo：https://url.leanapp.cn/QgF6XV1

LeanCloud ?- 數據存儲開發指南 · Flutter：https://url.leanapp.cn/Sz0gJPj

Flutter 文檔：https://flutter.dev/docs

end

LeanCloud，領先的 BaaS 提供商，為移動開發提供強有力的后端支持。更多內容請關注「LeanCloud 通訊」

總結

以上是生活随笔為你收集整理的使用 Flutter 快速实现请假与写周报应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。