前言

之前我做了个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组件的更多相关文章

  1. 使用前端后台管理模板库admin-lte(转)

    使用前端后台管理模板库admin-lte 使用前端后台管理模板库admin-lte 安装 搭建环境 安装 安装admin-lte,可以通过以下几种办法安装,下图是GitHub中admin-lte的主页 ...

  2. 前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍

    今日内容概要 前台主页 后台主页轮播图接口 跨域问题详解 前后端打通 后端自定义配置 git介绍和安装 内容详细 1.前台主页 Homeviwe.vue <template> <di ...

  3. python运维开发(十九)----Django后台表单验证、session、cookie、model操作

    内容目录: Django后台表单验证 CSRF加密传输 session.cookie model数据库操作 Django后台Form表单验证 Django中Form一般有2种功能: 1.用于做用户提交 ...

  4. Django后台设置--遇到的问题与解决方案

    1. 后台如何管理项目中的models 新建的Django工程会自动引用admin 应用,新建后台可以通过 createsuperuser 命令建立后台admin超级管理员,我遇到的第一个问题,就是如 ...

  5. Django 后台支持中文方法

    今天遇到的一个问题,mark一下: django后台可以支持中文界面,一开始一直纠结于settings.py 中 LANGUAGE_CODE = 'en-us'中的'en-us'该更改成什么.zh-c ...

  6. 强大的Django后台管理

    Django 后台 django的后台我们只要加少些代码,就可以实现强大的功能.与后台相关文件:每个app中的 admin.py 文件与后台相关 下面示例是做一个后台添加博客文章的例子: 新建一个 名 ...

  7. django后台导入excel文件

    1.django 如何从后台上传excel中批量解析数据 要从django后台导入的excel中批量解析数据,举一个例子,我们向后抬批量导入svn历史数据数据格式 假设excel表中有4列,每列分别是 ...

  8. django后台获取相同name名的数据

    django后台获取相同name名的post数据html: <form method="post"> <input type="text" n ...

  9. 1.1 、Django 后台

    Django 后台 与后台相关文件:每个app中的 admin.py 文件与后台相关. 一,新建一个 名称为 HelloDjango 的项目 django-admin.py startproject ...

随机推荐

  1. golang-grpc

    目录 1. 什么是grpc和protobuf 1.1 grpc 1.2 protobuf 2.go下grpc 2.1官网下载protobuf工具 2.2 下载go的依赖包 2.3 编写proto文件 ...

  2. xss攻击和防御

    简介 XSS攻击全称跨站脚本攻击,是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS,XSS是一种在web应用中的计算机安全漏洞,它允 ...

  3. 2021.12.15 P2328 [SCOI2005]超级格雷码(找规律填空)

    2021.12.15 P2328 [SCOI2005]超级格雷码(找规律填空) https://www.luogu.com.cn/problem/P2328 题意: 输出n位B进制的格雷码. 分析: ...

  4. 攻防世界-MISC:Erik-Baleog-and-Olaf

    这是攻防世界MISC高手进阶区的题目,题目如下 点击下载附件一,解压后得到一个文件,不知道是什么格式,用010editor打开,发现其为png文件,就把它的后缀改为png,然后用stegslove打开 ...

  5. Bugku CTF练习题---MISC---这是一张单纯的图片

    Bugku CTF练习题---MISC---这是一张单纯的图片 flag:key{you are right} 解题步骤: 1.观察题目,下载附件 2.打开以后发现是一张图片,修改文件扩展名,查看属性 ...

  6. [AcWing 28] 在O(1)时间删除链表结点

    点击查看代码 /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * L ...

  7. C#语法糖系列 —— 第三篇:聊聊闭包的底层玩法

    有朋友好奇为什么将 闭包 归于语法糖,这里简单声明下,C# 中的所有闭包最终都会归结于 类 和 方法,为什么这么说,因为 C# 的基因就已经决定了,如果大家了解 CLR 的话应该知道, C#中的类最终 ...

  8. javaScript中Math内置对象基本方法入门

    概念 Math 是javaScript的内置对象,包含了部分数学常数属性和数学函数方法. Math 不是一个函数对象,用户Number类型进行使用,不支持BigInt. Math 的所有属性与方法都是 ...

  9. 面试官:BIO、NIO、AIO是什么,他们有什么区别?

    哈喽!大家好,我是小奇,一位热爱分享的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 书接上回,感觉上次的公司氛围不 ...

  10. python之装饰器补充与递归函数与二分查找

    目录 多层装饰器 有参装饰器 递归函数 基本演示 斐波那契数列 总结 小拓展 算法之二分法 简介 举例 总结 多层装饰器 我们已经知道了语法糖的作用是将装饰对象自动装饰到装饰器中,一个语法糖的应用我们 ...