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