告別單調(diào)，Django后臺(tái)主頁(yè)改造 - 使用AdminLTE組件
前言
之前我做了個(gè)Django的項(xiàng)目，為了讓管理后臺(tái)更加美觀，我對(duì)Django（應(yīng)該說(shuō)是SimpleUI的）默認(rèn)的Admin后臺(tái)主頁(yè)進(jìn)行改造，具體可以看這篇文章：項(xiàng)目完成 - 基于Django3.x版本 - 開(kāi)發(fā)部署小結(jié)
之前的兩篇關(guān)于Django3.x開(kāi)發(fā)部署小結(jié)的文章介紹的都是數(shù)據(jù)庫(kù)、接口、性能方面的，看到有朋友留言對(duì)后臺(tái)主頁(yè)的改造表示有興趣，所以就寫一篇來(lái)介紹一下~
分析
改造基于我定制的 DjangoStarter 開(kāi)發(fā)模板，本文代碼會(huì)同步提交到Github，項(xiàng)目地址：https://github.com/Deali-Axy/DjangoStarter
DjangoStarter的Admin使用了SimpleUI，這是一個(gè)基于Vue、ElementUI的Admin主題，使用ElementUI的tab組件實(shí)現(xiàn)了多標(biāo)簽的功能，這個(gè)組件本身支持自定義主頁(yè)，所以我的思路就是用Django的Template寫個(gè)新的頁(yè)面，配置好路由然后替換掉SimpleUI的默認(rèn)主頁(yè)。
默認(rèn)主頁(yè)長(zhǎng)這樣，有點(diǎn)單調(diào)
改造之后是這樣
嘿，比原來(lái)好一些了，內(nèi)容豐富了~
接下來(lái)我們一步步來(lái)實(shí)現(xiàn)這個(gè)主頁(yè)的改造。
依賴
網(wǎng)上有很多后臺(tái)模板，國(guó)產(chǎn)的有ElementUI、AntDesign這些，都挺好用的，但要好看得會(huì)CSS（很遺憾我不太會(huì)）
于是我把目光投向了國(guó)外的開(kāi)源組件，其中AdminLTE就很不錯(cuò)哇，在我最熟悉的Bootstrap基礎(chǔ)上進(jìn)行擴(kuò)展，好看又簡(jiǎn)單易上手~
那么就開(kāi)始吧
這個(gè)頁(yè)面用到的依賴如下
目前AdminLTE版本是3.2，基于Bootstrap4.6 圖表使用chart.js，版本3.8 圖標(biāo)使用fontawesome，使用免費(fèi)的6.0版本
直接復(fù)制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",
}
直接復(fù)制保存，然后yarn命令安裝依賴~
PS：推薦使用yarn管理npm包，當(dāng)然也可以直接用npm
修改Gulp任務(wù)
關(guān)于在Django中使用和管理前端資源，具體可以參考這篇文章：Django項(xiàng)目引入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/**/*.*'},
]
保存之后在項(xiàng)目根目錄下執(zhí)行gulp move即可~
開(kāi)始寫頁(yè)面
我們?cè)?code style="font-size: 14px;word-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin: 0 2px;background-color: rgba(27,31,35,.05);font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;word-break: break-all;color: #9654B5;">templates/admin目錄下新建extend_home.html
具體代碼我就不貼了，已經(jīng)上傳到github上了，可以看這里：https://github.com/Deali-Axy/DjangoStarter/blob/master/templates/admin/extend_home.html
圖表我用的假數(shù)據(jù)做的餅圖，數(shù)據(jù)是這樣的
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自帶的隨機(jī)文字生成標(biāo)簽
{% lorem 6 w random %}
具體用法可以看官方文檔：https://docs.djangoproject.com/zh-hans/4.0/ref/templates/builtins/#lorem
PS：這個(gè)頁(yè)面里所有內(nèi)容都是假數(shù)據(jù)，實(shí)際使用的時(shí)候可以通過(guò)context傳入數(shù)據(jù)或者請(qǐng)求接口來(lái)填充真實(shí)數(shù)據(jù)~
寫完網(wǎng)頁(yè)模板之后保存
接下來(lái)配置一下路由就行
寫一下View
我把這個(gè)頁(yè)面放在DjangoStarter的默認(rèn)App里
編輯apps/core/views.py文件
新增一個(gè)函數(shù)
# 擴(kuò)展admin主頁(yè)，美化后臺(tái)
def extend_admin_home(request):
return render(request, 'admin/extend_home.html')
配置路由
urlpatterns = [
# ...
path('admin_home', views.extend_admin_home),
]
配置SimpleUI主頁(yè)
編輯config/settings.py
在SimpleUI配置的區(qū)域里添加這行代碼
SIMPLEUI_HOME_PAGE = f'/{URL_PREFIX}core/admin_home'
PS：因?yàn)镈jangoStarter加了個(gè)URL前綴功能，所以要把
URL_PREFIX帶上
搞定
這樣就搞定了，具體代碼比較長(zhǎng)，可以看GitHub項(xiàng)目：https://github.com/Deali-Axy/DjangoStarter
不想跟著步驟一步步來(lái)的同學(xué)可以試試我的DjangoStarter模板哈，全都整合好了，開(kāi)箱即用~
PS：下一篇文章介紹一下展示大屏的一些開(kāi)發(fā)經(jīng)