<meter id="mebgu"></meter>

  • <small id="mebgu"></small>
    <tr id="mebgu"></tr>
  • <noscript id="mebgu"></noscript>
    <noframes id="mebgu"></noframes>
    <ins id="mebgu"></ins>

    <tr id="mebgu"></tr>

        結合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開發工具)的開發項目界面效果如下所示。

        用戶登錄

        移動前端用戶通過賬號密碼進行登錄(也可以選擇短信驗證碼方式登錄)后臺管理系統,登錄界面如下所示。

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

        忘記密碼

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

        重設密碼、修改用戶資料

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

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

        修改手機號碼

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

        注冊賬號

        由使用人員使用手機和手機驗證碼自己申請注冊用戶,由系統管理員審核同意后,創建并分配系統用戶,一個手機號碼只能申請一次。注冊賬號的界面如下所示。

        注冊用戶審核

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

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

        字典管理

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

          這樣在具體頁面中就可以直接使用字典項目信息了,如下樹形列表和下拉項目所示。為了方便,在手機前端為管理員提供一個維護常規字典類型和字典項目的入口,在【管理工具】【字典維護】入口進入,如下所示。

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

        我的地址簿

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

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

        系統用戶維護

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

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

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

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

        組織機構管理

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

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

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

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

        角色管理

        系角色管理包括角色查看、角色創建、以及分配角色用戶幾個功能。 在管理面板中找到【角色管理】入口,如下圖所示。

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

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

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

        業務數據管理

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

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

         

        久久久久久免费无码_老师在办公室被躁在线观看_黑人刚破完处就三P_欧美动物园观看