結(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)用。

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

前端開發(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)行查詢,列表界面下所示。