之前我做了個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基礎上進行擴展，好看又簡單易上手~
那麼就開始吧
這個頁面用到的依賴如下
直接復制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
關於在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傳入數據或者請求接口來填充真實數據~
寫完網頁模板之後保存
接下來配置一下路由就行
我把這個頁面放在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),
]
編輯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：下一篇文章介紹一下展示大屏的一些開發經驗
使用前端後台管理模板庫admin-lte 使用前端後台管理模板庫admin-lte 安裝 搭建環境 安裝 安裝admin-lte,可以通過以下幾種辦法安裝,下圖是GitHub中admin-lte的主頁 ...
今日內容概要 前台主頁 後台主頁輪播圖接口 跨域問題詳解 前後端打通 後端自定義配置 git介紹和安裝 內容詳細 1.前台主頁 Homeviwe.vue <template> <di ...
內容目錄: Django後台表單驗證 CSRF加密傳輸 session.cookie model數據庫操作 Django後台Form表單驗證 Django中Form一般有2種功能: 1.用於做用戶提交 ...
1. 後台如何管理項目中的models 新建的Django工程會自動引用admin 應用,新建後台可以通過 createsuperuser 命令建立後台admin超級管理員,我遇到的第一個問題,就是如 ...
今天遇到的一個問題,mark一下: django後台可以支持中文界面,一開始一直糾結於settings.py 中 LANGUAGE_CODE = 'en-us'中的'en-us'該更改成什麼.zh-c ...
Django 後台 django的後台我們只要加少些代碼,就可以實現強大的功能.與後台相關文件:每個app中的 admin.py 文件與後台相關 下面示例是做一個後台添加博客文章的例子: 新建一個 名 ...
1.django 如何從後台上傳excel中批量解析數據 要從django後台導入的excel中批量解析數據,舉一個例子,我們向後抬批量導入svn歷史數據數據格式 假設excel表中有4列,每列分別是 ...
django後台獲取相同name名的post數據html: <form method="post"> <input type="text" n ...
Django 後台 與後台相關文件:每個app中的 admin.py 文件與後台相關. 一,新建一個 名稱為 HelloDjango 的項目 django-admin.py startproject ...
HTML <form id="project_file_upload" enctype="multipart/form-data" > <di ...
眾數問題 時間限制:3000 ms | 內存限制:65535 KB 難度:3 描述 所謂眾數,就是對於給定的含有N個元素的多重集合,每個元素在S中出現次數最多的成為該元素的重數, 多重集合S重 ...
import java.util.concurrent.locks.Condition; import java.util.concurrent.locks.Lock; import java.uti ...
n=NPM是一個Node包管理和分發工具,已經成為了非官方的發布Node模塊(包)的標准.有了NPM,可以很快的找到特定服務要使用的包,進行下載.安裝以及管理已經安裝的包.npms安裝: 下載npm源 ...
原文:sql級聯刪除 功能:在刪除主表時,自動刪除副表(外鍵約束)相應內容 刪除包含主鍵值的行的操作,該值由其它表的現有行中的外鍵列引用.在級聯刪除中,還刪除其外鍵值引用刪除的主鍵值的所有行. 如: ...
題目鏈接:http://acm.hdu.edu.cn/showproblem.php?pid=6181 題意:給一個圖,求出次短路. 解法:我之前的模板不能解決這種圖,就是最短路和次短路相等的情況,證 ...
之前也創建過幾次maven項目,也是第一行報錯,之前直接是右鍵項目強制更新maven好像就解決了,這次遇見這個問題使用這個方法好像不起作用了,給的一堆英文報錯又看不懂,幸好在網上看見路人甲大神提示,根 ...
FileStream fs = new FileStream(@"C:\log.txt", FileMode.Truncate, FileAccess.ReadWrite); fs ...
本文來自:https://wiki.scn.sap.com/wiki/display/BOBJ/Crystal+Reports%2C+Developer+for+Visual+Studio+Downl ...
01. Move and Rotate 標准全局坐標系 Keyboard using UnityEngine; using System.Collections; public class NewBe ...
軟工 · 第十一次作業 - Alpha 事後諸葛亮(團隊) 組長本次作業鏈接 現代軟件工程 項目Postmortem 設想和目標 1.我們的軟件要解決什麼問題?是否定義得很清楚?是否對典型用戶和典型場 ...
