zdpdjango_argonadmin Django后台管理系统中的常见功能开发

本文主要是介绍zdpdjango_argonadmin Django后台管理系统中的常见功能开发,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果预览

首先,看一下这个项目最开始的样子:
在这里插入图片描述

左侧优化

将左侧优化为下面的样子:
在这里插入图片描述

代码位置:
在这里插入图片描述

代码如下:

{% load i18n static admin_argon %}<aside class="sidenav bg-white navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-4 "id="sidenav-main">{#左侧LOGO#}<div class="sidenav-header"><i class="fas fa-times p-3 cursor-pointer text-secondary opacity-5 position-absolute end-0 top-0 d-none d-xl-none"aria-hidden="true" id="iconSidenav"></i><a class="navbar-brand m-0" href="/"><img src="{% static 'img/logo-ct-dark.png' %}" class="navbar-brand-img h-100" alt="main_logo"><span class="ms-1 font-weight-bold">Django后台管理系统</span></a></div><hr class="horizontal dark mt-0"><div class="collapse navbar-collapse  w-auto " id="sidenav-collapse-main"><ul class="navbar-nav">{% admin_get_menu as app_list %}{% if app_list %}{% for app in app_list %}{% if app.has_perms and not app.pinned %}<li class="nav-item"><a class="nav-link {% if app_label != app.label and app.url not in request.path|urlencode %} collapsed{% endif %}"data-bs-toggle="collapse" data-bs-target="#submenu-{{ app.app_label }}"href="{{ app.url }}"><div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center"><i class="{{ app.icon }} text-primary text-sm opacity-10"></i></div><span class="nav-link-text ms-1">{{ app.label|slice:10 }}{% if app.label|length > 10 %}..{% endif %}</span></a>{% if app.models %}<div class="multi-level ms-5 collapse {% if 'tables-bootstrap-' in segment or app_label == app.label or app.url in request.path|urlencode %} show {% endif %}"role="list" id="submenu-{{ app.app_label }}"aria-expanded="{% if app_label == app.label or app.url in request.path|urlencode %}true{% else %}false{% endif %}"><ul class="flex-column nav">{% for model in app.models %}{% if model.url %}<li class="nav-item{% if 'bootstrap-tables' in segment or model.url in request.path|urlencode %} active {% endif %} list-unstyled"><a class="nav-link" href="{{ model.url }}"><span class="nav-link-text ms-1">{{ model.label }}</span></a></li>{% else %}<li class="nav-item list-unstyled">{{ model.label }}</li>{% endif %}{% endfor %}</ul></div>{% endif %}</li>{% endif %}{% endfor %}{% endif %}<li class="nav-item">{% if request.user.is_superuser %}<a href="{% url 'admin:index' %}" class="nav-link {% if 'index' in segment %} active {% endif %}"><div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center"><i class="ni ni-tv-2 text-primary text-sm opacity-10"></i></div><span class="nav-link-text ms-1">数据面板</span></a>{% else %}<a href="{% url 'index' %}" class="nav-link {% if 'index' in segment %} active {% endif %}"><div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center"><i class="ni ni-tv-2 text-primary text-sm opacity-10"></i></div><span class="nav-link-text ms-1">数据面板</span></a>{% endif %}</li>{% if request.user.is_authenticated and not request.user.is_superuser %}<li class="nav-item"><a class="nav-link " href="{% url 'tables' %}"><div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center"><i class="ni ni-calendar-grid-58 text-warning text-sm opacity-10"></i></div><span class="nav-link-text ms-1">Tables</span></a></li><li class="nav-item"><a class="nav-link " href="{% url 'billing' %}"><div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center"><i class="ni ni-credit-card text-success text-sm opacity-10"></i></div><span class="nav-link-text ms-1">Billing</span></a></li><li class="nav-item"><a class="nav-link " href="{% url 'vr' %}"><div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center"><i class="ni ni-app text-info text-sm opacity-10"></i></div><span class="nav-link-text ms-1">Virtual Reality</span></a></li><li class="nav-item"><a class="nav-link " href="{% url 'rtl' %}"><div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center"><i class="ni ni-world-2 text-danger text-sm opacity-10"></i></div><span class="nav-link-text ms-1">RTL</span></a></li><li class="nav-item mt-3"><h6 class="ps-4 ms-2 text-uppercase text-xs font-weight-bolder opacity-6">Account pages</h6></li><li class="nav-item"><a class="nav-link " href="{% url 'profile' %}"><div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center"><i class="ni ni-single-02 text-dark text-sm opacity-10"></i></div><span class="nav-link-text ms-1">Profile</span></a></li>{% endif %}</ul></div><div class="sidenav-footer mx-3 "><div class="card card-plain shadow-none" id="sidenavCard"><img class="w-50 mx-auto" src="{% static 'img/illustrations/icon-documentation.svg' %}"alt="sidebar_illustration"><div class="card-body text-center p-3 w-100 pt-0"><div class="docs-info"><h6 class="mb-0">需要帮助?</h6><p class="text-xs font-weight-bold mb-0">请点击链接</p></div></div></div><a href="https://github.com/zhangdapeng520" target="_blank"class="btn btn-dark btn-sm w-100 mb-3">源码下载</a><a class="btn btn-primary btn-sm mb-0 w-100" href="https://github.com/zhangdapeng520"target="_blank" type="button">旗舰版本</a></div>
</aside>

修改数据面板上方的卡片

在这里插入图片描述

代码:

<div class="row"><div class="col-xl-3 col-sm-6 mb-xl-0 mb-4"><div class="card"><div class="card-body p-3"><div class="row"><div class="col-8"><div class="numbers"><p class="text-sm mb-0 text-uppercase font-weight-bold">今日收入</p><h5 class="font-weight-bolder">$53,000</h5><p class="mb-0"><span class="text-success text-sm font-weight-bolder">+55%</span>比昨天</p></div></div><div class="col-4 text-end"><div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle"><i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i></div></div></div></div></div></div><div class="col-xl-3 col-sm-6 mb-xl-0 mb-4"><div class="card"><div class="card-body p-3"><div class="row"><div class="col-8"><div class="numbers"><p class="text-sm mb-0 text-uppercase font-weight-bold">注册用户</p><h5 class="font-weight-bolder">2,300</h5><p class="mb-0"><span class="text-success text-sm font-weight-bolder">+3%</span>比上周</p></div></div><div class="col-4 text-end"><div class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle"><i class="ni ni-world text-lg opacity-10" aria-hidden="true"></i></div></div></div></div></div></div><div class="col-xl-3 col-sm-6 mb-xl-0 mb-4"><div class="card"><div class="card-body p-3"><div class="row"><div class="col-8"><div class="numbers"><p class="text-sm mb-0 text-uppercase font-weight-bold">新订单</p><h5 class="font-weight-bolder">+3,462</h5><p class="mb-0"><span class="text-danger text-sm font-weight-bolder">-2%</span>比昨天</p></div></div><div class="col-4 text-end"><div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle"><i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i></div></div></div></div></div></div><div class="col-xl-3 col-sm-6"><div class="card"><div class="card-body p-3"><div class="row"><div class="col-8"><div class="numbers"><p class="text-sm mb-0 text-uppercase font-weight-bold">销售总额</p><h5 class="font-weight-bolder">$103,430</h5><p class="mb-0"><span class="text-success text-sm font-weight-bolder">+5%</span> 比上月</p></div></div><div class="col-4 text-end"><div class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle"><i class="ni ni-cart text-lg opacity-10" aria-hidden="true"></i></div></div></div></div></div></div></div>

这篇关于zdpdjango_argonadmin Django后台管理系统中的常见功能开发的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/885548

相关文章

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字

Python中win32包的安装及常见用途介绍

《Python中win32包的安装及常见用途介绍》在Windows环境下,PythonWin32模块通常随Python安装包一起安装,:本文主要介绍Python中win32包的安装及常见用途的相关... 目录前言主要组件安装方法常见用途1. 操作Windows注册表2. 操作Windows服务3. 窗口操作

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹

深度解析Python装饰器常见用法与进阶技巧

《深度解析Python装饰器常见用法与进阶技巧》Python装饰器(Decorator)是提升代码可读性与复用性的强大工具,本文将深入解析Python装饰器的原理,常见用法,进阶技巧与最佳实践,希望可... 目录装饰器的基本原理函数装饰器的常见用法带参数的装饰器类装饰器与方法装饰器装饰器的嵌套与组合进阶技巧

Golang如何用gorm实现分页的功能

《Golang如何用gorm实现分页的功能》:本文主要介绍Golang如何用gorm实现分页的功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录背景go库下载初始化数据【1】建表【2】插入数据【3】查看数据4、代码示例【1】gorm结构体定义【2】分页结构体

Mysql常见的SQL语句格式及实用技巧

《Mysql常见的SQL语句格式及实用技巧》本文系统梳理MySQL常见SQL语句格式,涵盖数据库与表的创建、删除、修改、查询操作,以及记录增删改查和多表关联等高级查询,同时提供索引优化、事务处理、临时... 目录一、常用语法汇总二、示例1.数据库操作2.表操作3.记录操作 4.高级查询三、实用技巧一、常用语

python 常见数学公式函数使用详解(最新推荐)

《python常见数学公式函数使用详解(最新推荐)》文章介绍了Python的数学计算工具,涵盖内置函数、math/cmath标准库及numpy/scipy/sympy第三方库,支持从基础算术到复杂数... 目录python 数学公式与函数大全1. 基本数学运算1.1 算术运算1.2 分数与小数2. 数学函数

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错?是不是同时用了.properties和.yml?二、换个位置配置就失效?搞清楚加

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.