<input id="ohw05"></input>
  • <table id="ohw05"><menu id="ohw05"></menu></table>
  • <var id="ohw05"></var>
  • <code id="ohw05"><cite id="ohw05"></cite></code>
    <label id="ohw05"></label>
    <var id="ohw05"></var>
  • 告別單調,Django后臺主頁改造 - 使用AdminLTE組件

    前言

    之前我做了個Django的項目,為了讓管理后臺更加美觀,我對Django(應該說是SimpleUI的)默認的Admin后臺主頁進行改造,具體可以看這篇文章:項目完成 - 基于Django3.x版本 - 開發部署小結

    之前的兩篇關于Django3.x開發部署小結的文章介紹的都是數據庫、接口、性能方面的,看到有朋友留言對后臺主頁的改造表示有興趣,所以就寫一篇來介紹一下~

    分析

    改造基于我定制的 DjangoStarter 開發模板,本文代碼會同步提交到Github,項目地址:https://github.com/Deali-Axy/DjangoStarter

    DjangoStarter的Admin使用了SimpleUI,這是一個基于Vue、ElementUI的Admin主題,使用ElementUI的tab組件實現了多標簽的功能,這個組件本身支持自定義主頁,所以我的思路就是用Django的Template寫個新的頁面,配置好路由然后替換掉SimpleUI的默認主頁。

    默認主頁長這樣,有點單調

    改造之后是這樣

    嘿,比原來好一些了,內容豐富了~

    接下來我們一步步來實現這個主頁的改造。

    依賴

    網上有很多后臺模板,國產的有ElementUI、AntDesign這些,都挺好用的,但要好看得會CSS(很遺憾我不太會)

    于是我把目光投向了國外的開源組件,其中AdminLTE就很不錯哇,在我最熟悉的Bootstrap基礎上進行擴展,好看又簡單易上手~

    那么就開始吧

    這個頁面用到的依賴如下

    • 目前AdminLTE版本是3.2,基于Bootstrap4.6
    • 圖表使用chart.js,版本3.8
    • 圖標使用fontawesome,使用免費的6.0版本

    直接復制package.json的依賴部分:

    "dependencies": {
        "@fortawesome/fontawesome-free": "^6.0.0",
        "admin-lte": "3.2",
        "bootstrap": "^4.6.1",
        "chart.js": "^3.8.0",
        "jquery": "^3.6.0",
    }
    

    直接復制保存,然后yarn命令安裝依賴~

    PS:推薦使用yarn管理npm包,當然也可以直接用npm

    修改Gulp任務

    關于在Django中使用和管理前端資源,具體可以參考這篇文章:Django項目引入NPM和gulp管理前端資源

    //使用 npm 下載的前端組件包
    const libs = [
        {name: "admin-lte", dist: "./node_modules/admin-lte/dist/**/*.*"},
        {name: "chart.js", dist: "./node_modules/chart.js/dist/**/*.*"},
        {name: "jquery", dist: "./node_modules/jquery/dist/**/*.*"},
        {name: "bootstrap", dist: "./node_modules/bootstrap/dist/**/*.*"},
    ];
    
    // 使用 npm 下載的前端組件,自定義存放位置
    const customLibs = [
        {name: 'font-awesome', dist: './node_modules/@fortawesome/fontawesome-free/**/*.*'},
    ]
    

    保存之后在項目根目錄下執行gulp move即可~

    開始寫頁面

    我們在templates/admin目錄下新建extend_home.html

    具體代碼我就不貼了,已經上傳到github上了,可以看這里:https://github.com/Deali-Axy/DjangoStarter/blob/master/templates/admin/extend_home.html

    圖表我用的假數據做的餅圖,數據是這樣的

    let exampleData = [
        {label: 'a', value: 10},
        {label: 'b', value: 10},
        {label: 'c', value: 10},
        {label: 'd', value: 10},
        {label: 'e', value: 10},
        {label: 'f', value: 10},
    ]
    

    新聞和快捷操作的文字用了Django自帶的隨機文字生成標簽

    {% lorem 6 w random %}
    

    具體用法可以看官方文檔:https://docs.djangoproject.com/zh-hans/4.0/ref/templates/builtins/#lorem

    PS:這個頁面里所有內容都是假數據,實際使用的時候可以通過context傳入數據或者請求接口來填充真實數據~

    寫完網頁模板之后保存

    接下來配置一下路由就行

    寫一下View

    我把這個頁面放在DjangoStarter的默認App里

    編輯apps/core/views.py文件

    新增一個函數

    # 擴展admin主頁,美化后臺
    def extend_admin_home(request):
        return render(request, 'admin/extend_home.html')
    

    配置路由

    urlpatterns = [
        # ...
        path('admin_home', views.extend_admin_home),
    ]
    

    配置SimpleUI主頁

    編輯config/settings.py

    在SimpleUI配置的區域里添加這行代碼

    SIMPLEUI_HOME_PAGE = f'/{URL_PREFIX}core/admin_home'
    

    PS:因為DjangoStarter加了個URL前綴功能,所以要把URL_PREFIX帶上

    搞定

    這樣就搞定了,具體代碼比較長,可以看GitHub項目:https://github.com/Deali-Axy/DjangoStarter

    不想跟著步驟一步步來的同學可以試試我的DjangoStarter模板哈,全都整合好了,開箱即用~

    PS:下一篇文章介紹一下展示大屏的一些開發經驗

    posted @ 2022-06-27 23:54  程序設計實驗室  閱讀(390)  評論(0編輯  收藏  舉報
    国产美女a做受大片观看