告别单调,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:下一篇文章介绍一下展示大屏的一些开发经验
告别单调,Django后台主页改造 - 使用AdminLTE组件的更多相关文章
- 使用前端后台管理模板库admin-lte(转)
使用前端后台管理模板库admin-lte 使用前端后台管理模板库admin-lte 安装 搭建环境 安装 安装admin-lte,可以通过以下几种办法安装,下图是GitHub中admin-lte的主页 ...
- 前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍
今日内容概要 前台主页 后台主页轮播图接口 跨域问题详解 前后端打通 后端自定义配置 git介绍和安装 内容详细 1.前台主页 Homeviwe.vue <template> <di ...
- python运维开发(十九)----Django后台表单验证、session、cookie、model操作
内容目录: Django后台表单验证 CSRF加密传输 session.cookie model数据库操作 Django后台Form表单验证 Django中Form一般有2种功能: 1.用于做用户提交 ...
- Django后台设置--遇到的问题与解决方案
1. 后台如何管理项目中的models 新建的Django工程会自动引用admin 应用,新建后台可以通过 createsuperuser 命令建立后台admin超级管理员,我遇到的第一个问题,就是如 ...
- Django 后台支持中文方法
今天遇到的一个问题,mark一下: django后台可以支持中文界面,一开始一直纠结于settings.py 中 LANGUAGE_CODE = 'en-us'中的'en-us'该更改成什么.zh-c ...
- 强大的Django后台管理
Django 后台 django的后台我们只要加少些代码,就可以实现强大的功能.与后台相关文件:每个app中的 admin.py 文件与后台相关 下面示例是做一个后台添加博客文章的例子: 新建一个 名 ...
- django后台导入excel文件
1.django 如何从后台上传excel中批量解析数据 要从django后台导入的excel中批量解析数据,举一个例子,我们向后抬批量导入svn历史数据数据格式 假设excel表中有4列,每列分别是 ...
- django后台获取相同name名的数据
django后台获取相同name名的post数据html: <form method="post"> <input type="text" n ...
- 1.1 、Django 后台
Django 后台 与后台相关文件:每个app中的 admin.py 文件与后台相关. 一,新建一个 名称为 HelloDjango 的项目 django-admin.py startproject ...
随机推荐
- golang-grpc
目录 1. 什么是grpc和protobuf 1.1 grpc 1.2 protobuf 2.go下grpc 2.1官网下载protobuf工具 2.2 下载go的依赖包 2.3 编写proto文件 ...
- xss攻击和防御
简介 XSS攻击全称跨站脚本攻击,是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS,XSS是一种在web应用中的计算机安全漏洞,它允 ...
- 2021.12.15 P2328 [SCOI2005]超级格雷码(找规律填空)
2021.12.15 P2328 [SCOI2005]超级格雷码(找规律填空) https://www.luogu.com.cn/problem/P2328 题意: 输出n位B进制的格雷码. 分析: ...
- 攻防世界-MISC:Erik-Baleog-and-Olaf
这是攻防世界MISC高手进阶区的题目,题目如下 点击下载附件一,解压后得到一个文件,不知道是什么格式,用010editor打开,发现其为png文件,就把它的后缀改为png,然后用stegslove打开 ...
- Bugku CTF练习题---MISC---这是一张单纯的图片
Bugku CTF练习题---MISC---这是一张单纯的图片 flag:key{you are right} 解题步骤: 1.观察题目,下载附件 2.打开以后发现是一张图片,修改文件扩展名,查看属性 ...
- [AcWing 28] 在O(1)时间删除链表结点
点击查看代码 /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * L ...
- C#语法糖系列 —— 第三篇:聊聊闭包的底层玩法
有朋友好奇为什么将 闭包 归于语法糖,这里简单声明下,C# 中的所有闭包最终都会归结于 类 和 方法,为什么这么说,因为 C# 的基因就已经决定了,如果大家了解 CLR 的话应该知道, C#中的类最终 ...
- javaScript中Math内置对象基本方法入门
概念 Math 是javaScript的内置对象,包含了部分数学常数属性和数学函数方法. Math 不是一个函数对象,用户Number类型进行使用,不支持BigInt. Math 的所有属性与方法都是 ...
- 面试官:BIO、NIO、AIO是什么,他们有什么区别?
哈喽!大家好,我是小奇,一位热爱分享的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 书接上回,感觉上次的公司氛围不 ...
- python之装饰器补充与递归函数与二分查找
目录 多层装饰器 有参装饰器 递归函数 基本演示 斐波那契数列 总结 小拓展 算法之二分法 简介 举例 总结 多层装饰器 我们已经知道了语法糖的作用是将装饰对象自动装饰到装饰器中,一个语法糖的应用我们 ...