python工業網際網路應用實戰8—django-simpleui
筆者也使用過一段時間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逐步的完成和豐富這個原型的功