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

相关文章

基于 Cursor 开发 Spring Boot 项目详细攻略

《基于Cursor开发SpringBoot项目详细攻略》Cursor是集成GPT4、Claude3.5等LLM的VSCode类AI编程工具,支持SpringBoot项目开发全流程,涵盖环境配... 目录cursor是什么?基于 Cursor 开发 Spring Boot 项目完整指南1. 环境准备2. 创建

Python使用FastAPI实现大文件分片上传与断点续传功能

《Python使用FastAPI实现大文件分片上传与断点续传功能》大文件直传常遇到超时、网络抖动失败、失败后只能重传的问题,分片上传+断点续传可以把大文件拆成若干小块逐个上传,并在中断后从已完成分片继... 目录一、接口设计二、服务端实现(FastAPI)2.1 运行环境2.2 目录结构建议2.3 serv

SpringBoot 多环境开发实战(从配置、管理与控制)

《SpringBoot多环境开发实战(从配置、管理与控制)》本文详解SpringBoot多环境配置,涵盖单文件YAML、多文件模式、MavenProfile分组及激活策略,通过优先级控制灵活切换环境... 目录一、多环境开发基础(单文件 YAML 版)(一)配置原理与优势(二)实操示例二、多环境开发多文件版

使用docker搭建嵌入式Linux开发环境

《使用docker搭建嵌入式Linux开发环境》本文主要介绍了使用docker搭建嵌入式Linux开发环境,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录1、前言2、安装docker3、编写容器管理脚本4、创建容器1、前言在日常开发全志、rk等不同

深度解析Java @Serial 注解及常见错误案例

《深度解析Java@Serial注解及常见错误案例》Java14引入@Serial注解,用于编译时校验序列化成员,替代传统方式解决运行时错误,适用于Serializable类的方法/字段,需注意签... 目录Java @Serial 注解深度解析1. 注解本质2. 核心作用(1) 主要用途(2) 适用位置3

Debian 13升级后网络转发等功能异常怎么办? 并非错误而是管理机制变更

《Debian13升级后网络转发等功能异常怎么办?并非错误而是管理机制变更》很多朋友反馈,更新到Debian13后网络转发等功能异常,这并非BUG而是Debian13Trixie调整... 日前 Debian 13 Trixie 发布后已经有众多网友升级到新版本,只不过升级后发现某些功能存在异常,例如网络转

Python实战之SEO优化自动化工具开发指南

《Python实战之SEO优化自动化工具开发指南》在数字化营销时代,搜索引擎优化(SEO)已成为网站获取流量的重要手段,本文将带您使用Python开发一套完整的SEO自动化工具,需要的可以了解下... 目录前言项目概述技术栈选择核心模块实现1. 关键词研究模块2. 网站技术seo检测模块3. 内容优化分析模

基于Java开发一个极简版敏感词检测工具

《基于Java开发一个极简版敏感词检测工具》这篇文章主要为大家详细介绍了如何基于Java开发一个极简版敏感词检测工具,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下... 目录你是否还在为敏感词检测头疼一、极简版Java敏感词检测工具的3大核心优势1.1 优势1:DFA算法驱动,效率提升10

基于Java和FFmpeg实现视频压缩和剪辑功能

《基于Java和FFmpeg实现视频压缩和剪辑功能》在视频处理开发中,压缩和剪辑是常见的需求,本文将介绍如何使用Java结合FFmpeg实现视频压缩和剪辑功能,同时去除数据库操作,仅专注于视频处理,需... 目录引言1. 环境准备1.1 项目依赖1.2 安装 FFmpeg2. 视频压缩功能实现2.1 主要功

使用Python实现无损放大图片功能

《使用Python实现无损放大图片功能》本文介绍了如何使用Python的Pillow库进行无损图片放大,区分了JPEG和PNG格式在放大过程中的特点,并给出了示例代码,JPEG格式可能受压缩影响,需先... 目录一、什么是无损放大?二、实现方法步骤1:读取图片步骤2:无损放大图片步骤3:保存图片三、示php