結(jié)合SqlSugar Web API+UniApp+Vue+ThorUI來構(gòu)建BS的前端解決方案，通過Vue+ThorUI實(shí)現(xiàn)的移動端前端界面展示，界面美觀大方；現(xiàn)在的很多程序應(yīng)用，基本上都是需要多端覆蓋，因此基于一個Web API的后端接口，來構(gòu)建多端應(yīng)用，如微信、H5、APP、WInForm、BS的Web管理端等都是常見的應(yīng)用。
前端開發(fā)，可以是基于Vue&Element的管理后臺的前端開發(fā)，也可以是Vue + UniApp+手機(jī)端組件庫的開發(fā)H5或者App應(yīng)用，技術(shù)路線都是基于Vue的，我們這里主要介紹UniApp + HBuliderX + Vue + ThorUI 來開發(fā)H5端的應(yīng)用。
UniApp 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個平臺。
使用UniApp的主要原因是它的生態(tài)比較完善，而且提供了不同平臺的統(tǒng)一的接口調(diào)用方法，因此非常方便使用它來統(tǒng)一構(gòu)建多端應(yīng)用。
使用UniApp，為了集成方便，一般也會使用HBuilderX開發(fā)工具來進(jìn)行前端的開發(fā)。
HBuilderX 編輯器是DCloud全新推出的一款HTML5的Web開發(fā)工具。HBuilder目前有兩個版本，一個是windows版，一個是mac版。下載的時候根據(jù)自己的電腦選擇適合自己的版本即可。如果不考慮深度集成的原因，還可以考慮使用更加廣泛的VS Code編輯器，畢竟VS Code可是前端界的開發(fā)標(biāo)準(zhǔn)工具了。
另外UniApp也有自己的組件庫，同時也做的很不錯，不過由于參照模板的問題，我們這里使用了會員版的Thor UI，可以參考的案例更多，方便做出更好的界面效果。
Thor UI 是一款開發(fā)移動端網(wǎng)頁應(yīng)用、小程序的前端 UI 組件庫，uni-app 版本還可以編譯成為安卓/ iOS APP 應(yīng)用，特點(diǎn)是輕量、簡潔，組件覆蓋比較全面，使開發(fā)更高效。Thor UI目前有微信小程序原生版本 (opens new window)和uni-app版本。
基于Web API的移動端UniApp應(yīng)用(HbuilderX開發(fā)工具）的開發(fā)項(xiàng)目界面效果如下所示。
用戶登錄
移動前端用戶通過賬號密碼進(jìn)行登錄（也可以選擇短信驗(yàn)證碼方式登錄）后臺管理系統(tǒng)，登錄界面如下所示。
用戶輸入系統(tǒng)正確的賬號、密碼，即可順利登錄系統(tǒng)，系統(tǒng)根據(jù)用戶所屬角色和分組信息，展示用戶能夠管理的功能頁面。系統(tǒng)默認(rèn)展示首頁視圖。
忘記密碼
如果用戶忘記自己的賬號密碼，可以通過手機(jī)驗(yàn)證碼方式進(jìn)行重置密碼操作。
重設(shè)密碼、修改用戶資料
登錄系統(tǒng)成功后，在系統(tǒng)右上角的圖像按鈕中，可以進(jìn)行用戶密碼修改，也可以在編輯按鈕或者圖標(biāo)中進(jìn)入用戶信息編輯處理界面，界面效果如下所示。
如需修改用戶頭像，單擊頭像圖片，圖片選擇確認(rèn)后上傳圖片進(jìn)行頭像修改。
修改手機(jī)號碼
如需修改手機(jī)號碼，單擊手機(jī)號欄目，可以進(jìn)行手機(jī)號碼的修改調(diào)整，手機(jī)修改需要接受短信驗(yàn)證碼，輸入成功后才能更新該用戶的手機(jī)號碼。
注冊賬號
由使用人員使用手機(jī)和手機(jī)驗(yàn)證碼自己申請注冊用戶，由系統(tǒng)管理員審核同意后，創(chuàng)建并分配系統(tǒng)用戶，一個手機(jī)號碼只能申請一次。注冊賬號的界面如下所示。
注冊用戶審核
系統(tǒng)管理員登錄后，可以在管理功能中進(jìn)行注冊用戶的管理操作，如下界面所示。
單擊用戶列表，彈出審核對話框，審核通過后，系統(tǒng)將創(chuàng)建指定相關(guān)信息的用戶賬號，可以使用該賬號和初始密碼進(jìn)行登錄。拒絕申請則不再接收該用戶的注冊，系統(tǒng)不創(chuàng)建賬號。
字典管理
字典管理是一個通用的字典大項(xiàng)、字典項(xiàng)目的維護(hù)管理，便于系統(tǒng)下拉列表以及相關(guān)參考值的維護(hù)，字典管理界面如下所示。
這樣在具體頁面中就可以直接使用字典項(xiàng)目信息了，如下樹形列表和下拉項(xiàng)目所示。為了方便，在手機(jī)前端為管理員提供一個維護(hù)常規(guī)字典類型和字典項(xiàng)目的入口，在【管理工具】【字典維護(hù)】入口進(jìn)入，如下所示。
單擊其中字典大類，可以進(jìn)行查看或者編輯對應(yīng)字典大類下的項(xiàng)目信息，如下界面所示。
我的地址簿
為了方便管理一些地址信息，系統(tǒng)提供了一個通用的地址簿進(jìn)行管理，可以錄入常見的地址信息，如下界面所示。
新增或者對已有記錄進(jìn)行編輯，可以進(jìn)入界面如下所示。
系統(tǒng)用戶維護(hù)
系統(tǒng)管理員用戶可以登錄后，進(jìn)行系統(tǒng)用戶的維護(hù)，包括對用戶進(jìn)行查詢，以及用戶密碼重置、用戶過期/用戶恢復(fù)的設(shè)置處理。
在管理工具入口，單擊系統(tǒng)用戶即可進(jìn)行用戶的搜索處理。
滑動用戶列表，可以對用戶進(jìn)行密碼重置、設(shè)置過期、用戶恢復(fù)操作。
或者單擊用戶記錄，可以對指定用戶進(jìn)行相關(guān)的用戶密碼重置、用戶過期/用戶恢復(fù)的設(shè)置處理。
組織機(jī)構(gòu)管理
在管理面板中找到【組織機(jī)構(gòu)】入口，如下圖所示。
頁面分層列出整個公司部門的組織機(jī)構(gòu)，示例組織機(jī)構(gòu)如下所示，實(shí)際根據(jù)自己的系統(tǒng)進(jìn)行創(chuàng)建。
單擊特定的機(jī)構(gòu)節(jié)點(diǎn)，可以展開詳細(xì)的機(jī)構(gòu)信息，如下界面所示，管理員可以刪除機(jī)構(gòu)處理。
另外在底部有【新增機(jī)構(gòu)】功能，單擊可以進(jìn)行創(chuàng)建機(jī)構(gòu)信息。
角色管理
系角色管理包括角色查看、角色創(chuàng)建、以及分配角色用戶幾個功能。 在管理面板中找到【角色管理】入口，如下圖所示。
角色是以公司進(jìn)行劃分的，因此查看角色需要選擇特定的公司節(jié)點(diǎn)，如下所示。
單擊公司節(jié)點(diǎn)，可以查看任一公司的角色列表，如下界面所示。
也可以在底部【新增角色】，彈出如下界面，錄入提交即可創(chuàng)建新角色。
業(yè)務(wù)數(shù)據(jù)管理
不同的業(yè)務(wù)系統(tǒng)，我們需要創(chuàng)建一些不同的業(yè)務(wù)表單數(shù)據(jù)進(jìn)行錄入、查詢等操作。
業(yè)務(wù)數(shù)據(jù)，可以在管理列表中根據(jù)關(guān)鍵字進(jìn)行查詢，列表界面下所示。
