筆者也使用過一段時間adminx組件，后來由於adminx停更，又遇到更簡單的django-simpleui后，現在基本上只使用simpleui了，使用simpleui的幾個好處，筆者認為排在第一位的是於原生admin的兼容性非常高，大量的原生配置基本可以直接用。adminx擴展就需要改很多地方，配置文件也是變成不一樣的adminx.py。試用之后，比較喜歡simpleui思路，不知道以后功能多了寫復雜了會不會也得走adminx的老路。不過adminx和simpleui等第三方組件都是可以讓我們快速的把admin改造成支持主流web ui控件的方式。
1.1. 零成本遷移
安裝simpleui命令：pip install django-simpleui==4.0.2，然后settings.py INSTALLED_APPS里添加simpleui即可，admin馬上就能神奇的華麗轉身。
... # Application references # https://docs.djangoproject.com/en/2.1/ref/settings/#std:setting-INSTALLED_APPS INSTALLED_APPS = [ 'simpleui', 'app', 'Task', # Add your apps here to enable them 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ] ...
Before
After
好神奇吧！更關鍵的是前面的代碼都兼容執行，呵呵、呵呵、呵呵。
這里筆者致敬一下'django-simpleui'原作者，兼容性是一個非常好的路子，遷移成本低就能提高遷移的效率啊。現在一個代碼沒改，我們的admin變成ElementUI風格了。
1.2. 集成監控畫面
simpleui非常方便的支持自定義菜單的擴展，接下來我們演示如何把早期的監控畫面集成到這個管理后台菜單里。
1.2.1. 監控APP遷移
VS 2019 IDE有一個很方便的操作就是直接到原來的目錄下復制Collector目錄，到IndDemo項目下粘貼即可，遷移也是非常的方便。
settings.py文件注冊一下Collector app，然后在工程的urls.py文件里發布url即可，這里需要注意的是：由於每個app都有views.py文件，from Collector import views as Collector_views.
... # Application references # https://docs.djangoproject.com/en/2.1/ref/settings/#std:setting-INSTALLED_APPS INSTALLED_APPS = [ 'simpleui', 'app', 'Task', 'Collector', # Add your apps here to enable them 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ] ...
文件urls.py代碼，為了便於統一url的路徑，代碼稍微改了一下：path('admin/tank4C9/', Collector_views.tank4C9)。django url的發布也是非常方便。
""" Definition of urls for IndDemo. """ from datetime import datetime from django.urls import path,re_path from django.contrib import admin from django.contrib.auth.views import LoginView, LogoutView from app import forms, views from Task import views as Task_views from Collector import views as Collector_views urlpatterns = [ path('', views.home, name='home'), path('contact/', views.contact, name='contact'), path('about/', views.about, name='about'), path('login/', LoginView.as_view ( template_name='app/login.html', authentication_form=forms.BootstrapAuthenticationForm, extra_context= { 'title': 'Log in', 'year' : datetime.now().year, } ), name='login'), path('logout/', LogoutView.as_view(next_page='/'), name='logout'), path('admin/', admin.site.urls), path('admin/tank4C9/', Collector_views.tank4C9), path('getTank4C9Data/', Collector_views.getTank4C9Data), ]
1.2.2. 自定義菜單
最后一個步驟就是simpleui 自定義菜單配置項了，通過這個配置項，我們能方便的添加自定義的菜單。詳細請參考鏈接：
https://simpleui.72wo.com/docs/simpleui/QUICK.html#%E4%BE%8B%E5%AD%90
... #simpleui 自定義菜單配置項 SIMPLEUI_CONFIG = { 'system_keep': True, 'menu_display': ['監控','任務', '授權'], # 開啟排序和過濾功能, 不填此字段為默認排序和全部顯示, 空列表[] 為全部不顯示. 'dynamic': False, # 設置是否開啟動態菜單, 默認為False. 如果開啟, 則會在每次用戶登陸時動態展示菜單內容 'menus': [ { 'name': '監控', 'icon': 'fa el-icon-monitor', 'models': [{ 'name': '現場監控', 'url': 'tank4C9/', 'icon': 'fa el-icon-s-platform' }] }, { 'name': '任務', 'icon': 'far fa-bookmark', 'models': [{ 'name': '任務管理', 'url': 'Task/task/', 'icon': 'far fa-file-excel' }] }, { 'name': '授權', 'icon': 'fa fa-shield-alt', 'models': [{ 'name': '用戶', 'url': 'auth/user/', 'icon': 'fa fa-user' },{ 'name': '角色', 'url': 'auth/group/', 'icon': 'fa fa-users-cog' }] }] }
下圖就是監控界面集成好后的效果。另外使用simpleui還是實現了多tab頁的主流方式，而不是原生django admin但頁面瀏覽模式，更符合當前主流的方式。
1.3. 小結
本章我們把admin遷移到了django-simpleui，組件很好的兼容性，遷移非常簡單方便就完成了，然后，完成了監控界面的集成，這樣在基於django-admin就實現了一個簡單的管理軟件原型出現。后面我們會演示通過django-admin和django-simpleui逐步的完成和豐富這個原型的功能。