Layui后台布局:
一、后台布局之顶边栏
<div class="layui-header"> <div class="layui-logo">layui 后台布局</div> <!-- 头部区域(可配合layui已有的水平导航) --> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item"><a href="">控制台</a></li> <li class="layui-nav-item"><a href="">商品管理</a></li> <li class="layui-nav-item"><a href="">用户</a></li> <li class="layui-nav-item"> <a href="javascript:;">其它系统</a> <dl class="layui-nav-child"> <dd><a href="">邮件管理</a></dd> <dd><a href="">消息管理</a></dd> <dd><a href="">授权管理</a></dd> </dl> </li> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="javascript:;"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> {{request.user.username}} </a> <dl class="layui-nav-child"> <dd><a href="">基本资料</a></dd> <dd><a href="">安全设置</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">退了</a></li> </ul> </div>
代码中橙色背景的一行为Django中传入的当前登录用户的用户名。
最终效果如下:
二、后台布局之侧边栏
侧边栏由于需要动态加载节点和子节点,所以需要先在Django中建立节点和子节点的model,model代码如下:
# 节点类 class NavigationProfile(models.Model): name=models.CharField(max_length=20,verbose_name='节点名称') url=models.CharField(max_length=50,verbose_name='链接地址') iconCls=models.CharField(max_length=50,verbose_name='图标icon') class Meta: verbose_name='节点名称' verbose_name_plural=verbose_name def __str__(self): return self.name # 子节点类 class NavigationSubProfile(models.Model): name=models.CharField(max_length=20,verbose_name='子节点名称') url=models.CharField(max_length=50,verbose_name='链接地址') iconCls=models.CharField(max_length=50,verbose_name='图标icon') parent=models.ForeignKey(NavigationProfile,on_delete=models.CASCADE,verbose_name='父节点') class Meta: verbose_name='子节点名称' verbose_name_plural=verbose_name def __str__(self): return self.name
在Django views中代码如下:
def open_index(request): if request.user.is_authenticated == False: return HttpResponseRedirect('/account/login/') else: navigation = NavigationProfile.objects.all() dict = [] for nav in navigation: dic = {} id = nav.id dic['id'] = nav.id dic['text'] = nav.name dic['url'] = nav.url dic['iconCls'] = nav.iconCls dic['nid'] = 0 sub_navigation = NavigationSubProfile.objects.filter(parent_id=id) sub_dict = [] for sub_nav in sub_navigation: sub_dic = {} sub_dic['id'] = sub_nav.id sub_dic['text'] = sub_nav.name sub_dic['url'] = sub_nav.url sub_dic['iconCls'] = sub_nav.iconCls sub_dic['nid'] = sub_nav.parent_id sub_dict.append(sub_dic) dic["children"] = sub_dict dict.append(dic)30 return render(request,'index.html',{'dict':dict})
Django urls代码如下:
urlpatterns = [ path('get-navigationProfile/',views.get_navigationProfile,name='get_navigationProfile'), ]
Html侧边栏代码如下:
<div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域(可配合layui已有的垂直导航) --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> {% for dic in dict %} <li class="layui-nav-item"> <a class="" href="javascript:;">{{ dic.text }}</a> <dl class="layui-nav-child"> {% for child in dic.children %} <dd><a href="javascript:;" data-id="{{ child.id }}" data-url="{{ child.url }}">{{ child.text }}</a></dd> {% endfor %} </dl> </li> {% endfor %} </ul> </div> </div>
最终效果图
更多layui知识请关注layui使用教程栏目。
以上是Django+Layui后台布局介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

以下为大家整理了前端UI框架 — layui的视频教程,不需要从迅雷、百度云之类的第三方网盘平台下载,全部在线免费观看。教程由浅入深,有前端基础的人就能学习,从安装到案例讲解,全面详细,帮助你更快更好的掌握layui框架!

如何利用Layui实现图片轮播图功能现如今,图片轮播图已经成为了网页设计中常见的元素之一。它可以使网页更加生动活泼,吸引用户的眼球,提升用户体验。在本文中,我们将介绍如何利用Layui框架来实现一个简单的图片轮播图功能。首先,我们需要在HTML页面中引入Layui的核心文件和样式文件:<linkrel="stylesheet"h

如何利用Layui开发一个具有分页功能的数据展示页面Layui是一个轻量级的前端UI框架,提供了简洁美观的界面组件和丰富的交互体验。在开发中,我们经常会遇到需要展示大量数据并进行分页的情况。以下是一个利用Layui开发的具有分页功能的数据展示页面的示例。首先,我们需要引入Layui的相关文件和依赖。在html页面的<head>标签中加入以下代

如何利用Layui实现图片拖拽和缩放效果在现代网页设计中,图片的交互效果成为增加网页活力和用户体验的重要手段。其中,图片拖拽和缩放效果是常见且受欢迎的交互方式之一。本文将介绍如何使用Layui框架实现图片拖拽和缩放效果,并提供具体的代码示例。一、引入Layui框架和相关依赖:首先,我们需要在HTML文件中引入Layui框架和相关依赖。可以通过以下代码示例引入

如何利用Layui实现图片反色和亮度调节功能引言:在前端开发中,经常会遇到需要对图片进行特效处理的情况。本文将介绍如何利用Layui框架实现图片反色和亮度调节功能,并提供具体代码实例供参考。一、Layui简介:Layui是一款优秀的前端UI框架,具有简洁、美观、易用等特点。它提供了丰富的前端组件,让开发者能够轻松搭建出精美的网站。二、准备工作:在开始之前,我

如何使用Layui开发一个支持图片放大缩小的相册功能相册功能在现代的网页应用中非常常见,通过展示用户上传的图片,让用户能够方便地浏览和管理图片。为了提供更好的用户体验,一种常见的需求是支持图片的放大和缩小功能。本文章将介绍如何使用Layui框架开发一个支持图片放大缩小的相册功能,同时提供具体的代码示例。首先,确保您已经引入Layui框架的CSS和JS文件。您

如何使用Layui开发一个支持文件上传和下载的资源管理系统引言:随着互联网的发展,数据资源的管理已经成为一项重要的任务。无论是企业内部的文档管理,还是个人的文件存储,都需要一个高效且易于使用的资源管理系统。Layui是一款轻量级的前端框架,具有简洁明了的设计以及丰富的组件库,非常适合用来进行资源管理系统的开发。本文将介绍如何使用Layui开发一个支持文

如何使用Layui框架开发一个支持实时通讯的在线客服系统概述:在线客服系统是现代企业提供与客户交流的重要渠道之一,而实时通讯是在线客服系统的关键技术之一。本文将介绍如何使用Layui框架开发一个支持实时通讯的在线客服系统,并提供具体的代码示例。一、准备工作安装Node.js:在开发环境中安装Node.js,并配置好相关环境。安装Layui:在项目中引入Lay


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

SublimeText3汉化版
中文版,非常好用

螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

禅工作室 13.0.1
功能强大的PHP集成开发环境

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)