結合SqlSugar Web API+UniApp+Vue+ThorUI來構建BS的前端解決方案，通過Vue+ThorUI實現的移動端前端界面展示，界面美觀大方；現在的很多程序應用，基本上都是需要多端覆蓋，因此基于一個Web API的后端接口，來構建多端應用，如微信、H5、APP、WInForm、BS的Web管理端等都是常見的應用。
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版本。
基于Web API的移動端UniApp應用(HbuilderX開發工具）的開發項目界面效果如下所示。
用戶登錄
移動前端用戶通過賬號密碼進行登錄（也可以選擇短信驗證碼方式登錄）后臺管理系統，登錄界面如下所示。
用戶輸入系統正確的賬號、密碼，即可順利登錄系統，系統根據用戶所屬角色和分組信息，展示用戶能夠管理的功能頁面。系統默認展示首頁視圖。
忘記密碼
如果用戶忘記自己的賬號密碼，可以通過手機驗證碼方式進行重置密碼操作。
重設密碼、修改用戶資料
登錄系統成功后，在系統右上角的圖像按鈕中，可以進行用戶密碼修改，也可以在編輯按鈕或者圖標中進入用戶信息編輯處理界面，界面效果如下所示。
如需修改用戶頭像，單擊頭像圖片，圖片選擇確認后上傳圖片進行頭像修改。
修改手機號碼
如需修改手機號碼，單擊手機號欄目，可以進行手機號碼的修改調整，手機修改需要接受短信驗證碼，輸入成功后才能更新該用戶的手機號碼。
注冊賬號
由使用人員使用手機和手機驗證碼自己申請注冊用戶，由系統管理員審核同意后，創建并分配系統用戶，一個手機號碼只能申請一次。注冊賬號的界面如下所示。
注冊用戶審核
系統管理員登錄后，可以在管理功能中進行注冊用戶的管理操作，如下界面所示。
單擊用戶列表，彈出審核對話框，審核通過后，系統將創建指定相關信息的用戶賬號，可以使用該賬號和初始密碼進行登錄。拒絕申請則不再接收該用戶的注冊，系統不創建賬號。
字典管理
字典管理是一個通用的字典大項、字典項目的維護管理，便于系統下拉列表以及相關參考值的維護，字典管理界面如下所示。
這樣在具體頁面中就可以直接使用字典項目信息了，如下樹形列表和下拉項目所示。為了方便，在手機前端為管理員提供一個維護常規字典類型和字典項目的入口，在【管理工具】【字典維護】入口進入，如下所示。
單擊其中字典大類，可以進行查看或者編輯對應字典大類下的項目信息，如下界面所示。
我的地址簿
為了方便管理一些地址信息，系統提供了一個通用的地址簿進行管理，可以錄入常見的地址信息，如下界面所示。
新增或者對已有記錄進行編輯，可以進入界面如下所示。
系統用戶維護
系統管理員用戶可以登錄后，進行系統用戶的維護，包括對用戶進行查詢，以及用戶密碼重置、用戶過期/用戶恢復的設置處理。
在管理工具入口，單擊系統用戶即可進行用戶的搜索處理。
滑動用戶列表，可以對用戶進行密碼重置、設置過期、用戶恢復操作。
或者單擊用戶記錄，可以對指定用戶進行相關的用戶密碼重置、用戶過期/用戶恢復的設置處理。
組織機構管理
在管理面板中找到【組織機構】入口，如下圖所示。
頁面分層列出整個公司部門的組織機構，示例組織機構如下所示，實際根據自己的系統進行創建。
單擊特定的機構節點，可以展開詳細的機構信息，如下界面所示，管理員可以刪除機構處理。
另外在底部有【新增機構】功能，單擊可以進行創建機構信息。
角色管理
系角色管理包括角色查看、角色創建、以及分配角色用戶幾個功能。 在管理面板中找到【角色管理】入口，如下圖所示。
角色是以公司進行劃分的，因此查看角色需要選擇特定的公司節點，如下所示。
單擊公司節點，可以查看任一公司的角色列表，如下界面所示。
也可以在底部【新增角色】，彈出如下界面，錄入提交即可創建新角色。
業務數據管理
不同的業務系統，我們需要創建一些不同的業務表單數據進行錄入、查詢等操作。
業務數據，可以在管理列表中根據關鍵字進行查詢，列表界面下所示。
