基於SqlSugar的開發框架循序漸進介紹（19）-- 基於UniApp+Vue的移動前端的功能介紹

在之前的SqlSugar系列隨筆中，介紹了很多我們關於SqlSugar的開發框架的內容，SqlSugar的開發框架的目的是多前端應用場景，因此其中會包含各種不同的前端應用，前面介紹了基於DevExpress的Winform的前端應用，以及基於Vue3+TypeScript+ElementPlus的BS前端應用，本篇隨筆繼續介紹SqlSugar的開發框架的另一個前端應用，基於UniApp+Vue+ThorUI的移動前端。

1、基於UniApp+Vue+ThorUI的移動前端

前端開發，可以是基於Vue&Element的管理後臺的前端開發，也可以是Vue + UniApp+手機端組件庫的開發H5或者App應用，技術路線都是基於Vue的，我們這裡主要介紹UniApp+HBuliderX+Vue+ThorUI來開發H5端的應用。

UniApp 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發佈到iOS、Android、Web（響應式）、以及各種小程式（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平臺。

使用UniApp的主要原因是它的生態比較完善，而且提供了不同平臺的統一的介面調用方法，因此非常方便使用它來統一構建多端應用。

使用UniApp，為了集成方便，一般也會使用HBuilderX開發工具來進行前端的開發。HBuilderX 編輯器是DCloud全新推出的一款HTML5的Web開發工具。HBuilder目前有兩個版本，一個是windows版，一個是mac版。下載的時候根據自己的電腦選擇適合自己的版本即可。如果不考慮深度集成的原因，還可以考慮使用更加廣泛的VS Code編輯器，畢竟VS Code可是前端界的開發標準工具了。

另外UniApp也有自己的組件庫，同時也做的很不錯，不過由於參照模板的問題，我們這裡使用了會員版的Thor UI，可以參考的案例更多，方便做出更好的界面效果。

Thor UI 是一款開發移動端網頁應用、小程式的前端 UI 組件庫，uni-app 版本還可以編譯成為安卓/ iOS APP 應用，特點是輕量、簡潔，組件覆蓋比較全面，使開發更高效。Thor UI目前有微信小程式原生版本 (opens new window)和uni-app版本。

SqlSugar開發框架主要的設計模塊場景如下所示。

1）其中一些常用的類庫，以及SqlSugar框架的基類放在框架公用模塊裡面。

2）Winform開發相關的基礎界面以及通用組件內容，放在基礎Winform界面庫BaseUIDx項目中。

3）基礎核心數據模塊SugarProjectCore，主要就是開發業務所需的數據處理和業務邏輯的項目，為了方便，我們區分Interface、Modal、Service三個目錄來放置不同的內容，其中Modal是SqlSugar的映射實體，Interface是定義訪問介面，Service是提供具體的數據操作實現。其中Service裡面一些框架基類和介面定義，統一也放在公用類庫裡面。

4）Winform應用模塊，主要就是針對業務開發的Winform界面應用，而Winform開發為了方便，也會將一些基礎組件和基類放在了BaseUIDx的Winform專用的界面庫裡面。

5）WebAPI項目採用基於.net Core 的項目開發，通過調用SugarProjectCore實現相關控制器API的發佈，並整合Swagger發佈介面，供其他前端界面應用進行調用。

6）純前端通過API進行調用Web API的介面，純前端模塊可以包含Vue3&Element項目，以及基於EelectronJS應用，發佈跨平臺的基於瀏覽器的應用界面，以及其他H5應用、App應用或者小程式應用模塊，整合Web API進行業務數據的處理或者展示。

其中Web API的Swagger介面管理界面如下。

Winform端的前端界面如下所示。

Vue3+Typescript+ElementPlus的前端界面如下所示。

而基於Web API的移動端UniApp應用(HbuilderX開發工具）的開發項目界面效果如下所示。

 2、UniApp+Vue+ThorUI的移動前端功能介紹

瞭解了大概的項目架構和技術路線後，我們來看看移動端的功能介紹。

和其他前端的功能配套，那麼我們移動前端也可以管理一些系統的數據，如用戶、機構、角色、字典等等信息，以及一些額外的業務數據處理，如一些業務基礎數據的錄入，業務的審核，業務統計報表等功能。

1）用戶登錄

移動前端用戶通過賬號密碼進行登錄（也可以選擇簡訊驗證碼方式登錄）後臺管理系統，登錄界面如下所示。

 用戶輸入系統正確的賬號、密碼，即可順利登錄系統，系統根據用戶所屬角色和分組信息，展示用戶能夠管理的功能頁面。系統預設展示首頁視圖。

2）忘記密碼

如果用戶忘記自己的賬號密碼，可以通過手機驗證碼方式進行重置密碼操作。

3）重設密碼、修改用戶資料

登錄系統成功後，在系統右上角的圖像按鈕中，可以進行用戶密碼修改，也可以在編輯按鈕或者圖標中進入用戶信息編輯處理界面，界面效果如下所示。

如需修改用戶頭像，單擊頭像圖片，圖片選擇確認後上傳圖片進行頭像修改。

4）修改手機號碼

如需修改手機號碼，單擊手機號欄目，可以進行手機號碼的修改調整，手機修改需要接受簡訊驗證碼，輸入成功後才能更新該用戶的手機號碼。

 5）註冊賬號

由使用人員使用手機和手機驗證碼自己申請註冊用戶，由系統管理員審核同意後，創建並分配系統用戶，一個手機號碼只能申請一次。

註冊賬號的界面如下所示。

6）註冊用戶審核

 系統管理員登錄後，可以在管理功能中進行註冊用戶的管理操作，如下界面所示。

單擊用戶列表，彈出審核對話框，審核通過後，系統將創建指定相關信息的用戶賬號，可以使用該賬號和初始密碼進行登錄。拒絕申請則不再接收該用戶的註冊，系統不創建賬號。

7）字典管理

字典管理是一個通用的字典大項、字典項目的維護管理，便於系統下拉列表以及相關參考值的維護，字典管理界面如下所示。

 這樣在具體頁面中就可以直接使用字典項目信息了，如下樹形列表和下拉項目所示。

為了方便，在手機前端為管理員提供一個維護常規字典類型和字典項目的入口，在【管理工具】【字典維護】入口進入，如下所示。 

 單擊其中字典大類，可以進行查看或者編輯對應字典大類下的項目信息，如下界面所示。

 如需要對字典大類的信息進行維護，可以單擊頂部修改的按鈕，對字典大類的信息進行編輯處理，如下編輯界面所示。

 8）我的地址簿

為了方便管理一些地址信息，系統提供了一個通用的地址簿進行管理，可以錄入常見的地址信息，如下界面所示。

新增或者對已有記錄進行編輯，可以進入界面如下所示。

 9）新聞資訊

在個人信息頁面中，裡面有一個資訊中心，展示一些新聞資訊，如下所示。

單擊可以或查看更多的列表，可以查看詳細的新聞咨詢信息，詳細信息頁面如下所示。

10）系統用戶維護

系統管理員用戶可以登錄後，進行系統用戶的維護，包括對用戶進行查詢，以及用戶密碼重置、用戶過期/用戶恢復的設置處理。

 在管理工具入口，單擊系統用戶即可進行用戶的搜索處理。

 滑動用戶列表，可以對用戶進行密碼重置、設置過期、用戶恢復操作。

 或者單擊用戶記錄，可以對指定用戶進行相關的用戶密碼重置、用戶過期/用戶恢復的設置處理。

11）組織機構管理

在管理面板中找到【組織機構】入口，如下圖所示。

頁面分層列出整個公司部門的組織機構，示例組織機構如下所示，實際根據自己的系統進行創建。

單擊特定的機構節點，可以展開詳細的機構信息，如下界面所示，管理員可以刪除機構處理。

 另外在底部有【新增機構】功能，單擊可以進行創建機構信息。

在彈出的界面中，單擊【父級機構】，可以展示當前機構的節點，選擇機構作為父級，然後錄入其他信息即可。

 12）角色管理

角色管理包括角色查看、角色創建、以及分配角色用戶幾個功能。

在管理面板中找到【角色管理】入口，如下圖所示。

 角色是以公司進行劃分的，因此查看角色需要選擇特定的公司節點，如下所示。

單擊公司節點，可以查看任一公司的角色列表，如下界面所示。

 單擊角色節點，可以查看角色的詳細信息，或者刪除角色，如下所示。

 也可以在底部【新增角色】，彈出如下界面，錄入提交即可創建新角色。

 或者在角色包含的用戶列表中，可以選擇【移除角色用戶】，或者【添加新用戶】到角色中。

 選擇【添加】按鈕，會彈出新的選擇用戶列表界面，選擇加入用戶即可完成角色用戶的添加。

 13）業務數據管理

不同的業務系統，我們需要創建一些不同的業務表單數據進行錄入、查詢等操作。

業務數據，可以在管理列表中根據關鍵字進行查詢，列表界面下所示。

 以上就是一個移動端的業務應用的系統界面，主要的目的是能夠快捷的收集或者處理常規的業務數據，也便於後臺管理系統的數據維護。

系列文章：

《基於SqlSugar的開發框架的循序漸進介紹（1）--框架基礎類的設計和使用》

《基於SqlSugar的開發框架循序漸進介紹（2）-- 基於中間表的查詢處理》

《基於SqlSugar的開發框架循序漸進介紹（3）-- 實現代碼生成工具Database2Sharp的整合開發》

《基於SqlSugar的開發框架循序漸進介紹（4）-- 在數據訪問基類中對GUID主鍵進行自動賦值處理 》

《基於SqlSugar的開發框架循序漸進介紹（5）-- 在服務層使用介面註入方式實現IOC控制反轉》

《基於SqlSugar的開發框架循序漸進介紹（6）-- 在基類介面中註入用戶身份信息介面 》

《基於SqlSugar的開發框架循序漸進介紹（7）-- 在文件上傳模塊中採用選項模式【Options】處理常規上傳和FTP文件上傳》

 《基於SqlSugar的開發框架循序漸進介紹（8）-- 在基類函數封裝實現用戶操作日誌記錄》

《基於SqlSugar的開發框架循序漸進介紹（9）-- 結合Winform控制項實現欄位的許可權控制》

《基於SqlSugar的開發框架循序漸進介紹（10）-- 利用axios組件的封裝，實現對後端API數據的訪問和基類的統一封裝處理》

《基於SqlSugar的開發框架循序漸進介紹（11）-- 使用TypeScript和Vue3的Setup語法糖編寫頁面和組件的總結》

《基於SqlSugar的開發框架循序漸進介紹（12）-- 拆分頁面模塊內容為組件，實現分而治之的處理》

《基於SqlSugar的開發框架循序漸進介紹（13）-- 基於ElementPlus的上傳組件進行封裝，便於項目使用》

《基於SqlSugar的開發框架循序漸進介紹（14）-- 基於Vue3+TypeScript的全局對象的註入和使用》

 《基於SqlSugar的開發框架循序漸進介紹（15）-- 整合代碼生成工具進行前端界面的生成》

《基於SqlSugar的開發框架循序漸進介紹（16）-- 工作流模塊的功能介紹》

《基於SqlSugar的開發框架循序漸進介紹（17）-- 基於CSRedis實現緩存的處理》

《基於SqlSugar的開發框架循序漸進介紹（18）-- 基於代碼生成工具Database2Sharp，快速生成Vue3+TypeScript的前端界面和Winform端界面》

《基於SqlSugar的開發框架循序漸進介紹（19）-- 基於UniApp+Vue的移動前端的功能介紹》