Django+Layui后台布局介绍

Django+Layui后台布局介绍

Layui后台布局

一、后台布局之顶边栏

        
layui 后台布局
                
                
  • 控制台
  •             
  • 商品管理
  •             
  • 用户
  •             
  •                 其它系统                
                        
    邮件管理
                        
    消息管理
                        
    授权管理
                    
                
  •         
            

登录后复制

代码中橙色背景的一行为Django中传入的当前登录用户的用户名。

最终效果如下:

Django+Layui后台布局介绍

二、后台布局之侧边栏

侧边栏由于需要动态加载节点和子节点,所以需要先在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侧边栏代码如下:

        
                        
                    {% for dic in dict %}                    
  •                         {{ dic.text }}                        
                                {% for child in dic.children %}                                
    {{ child.text }}
                                {% endfor %}                        
                        
  •                 {% endfor %}            
        
    

登录后复制

最终效果图

1.jpg

更多layui知识请关注layui使用教程栏目。

3.jpg

以上就是Django+Layui后台布局介绍的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3005809.html

(0)
上一篇 2025年3月13日 01:03:05
下一篇 2025年3月11日 03:11:53

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • layui使用iconfont的方法介绍

    layui的图标取自于阿里巴巴的矢量图标库 Iconfont,同样的,这篇教程也是基于Iconfont进行扩展。 第一步,通过浏览器打开http://iconfont.cn/ ,访问阿里巴巴矢量图标库。 第二步,通过右上角的用户图标,授权登…

    2025年3月13日
    200
  • layui文件上传、预览及修改方法

    单文件上传 1、HTML 上传客服二维码* @@##@@ 开始上传 温馨提示: 每次最多上传一张图片, 单张图片的大小不超过2MB 登录后复制 2、js部分 layui.use([‘form’, ‘element’, ‘up…

    2025年3月13日
    200
  • layui表格动态显示变换

    在使用Layui的表格组件时有时会用到可变换的操作比如显示或隐藏功能,那么就需要按钮的动态变换 实现方法在layui的barDome中加入如下代码 预览 编辑 删除 {{# if(d.img_status == “yes”){ }} 轮播隐…

    2025年3月13日
    200
  • layui表单中的inline和block介绍

    layui表单中的inline和block: block: block元素会独自占一行,多个block元素各自新起一行,默认情况下 ,block元素宽度自动填充其父元素宽度     单行输入框                      验证…

    2025年3月13日
    200
  • layui多图上传实现删除功能的方法

    在使用layui的多图上传时发现没有删除功能 在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手 下面附上代码 HTML:     多图片上传            预览图:                       …

    2025年3月13日
    200
  • layui框架的flow组件常见用法总结

    该模块包含 信息流加载 和  图片懒加载  两大核心支持,无论是对服务端、还是前端体验,都有非常大的性能帮助。下边分别给出了这两种技术的使用方法: 一、信息流加载 信息流加载的核心方法时  flow.load(options) ,下边给了一…

    2025年3月13日
    200
  • layui弹出层(open)的属性介绍

    layui.open属性如:打开一个弹出层 核心方法 var index = layer.open({        type : 2,        title : title,        maxmin : true,        …

    2025年3月13日
    200
  • Layui时间选择框介绍

    Layui中 时间格式的输入框: html代码:      选择日期:                        —     –                        登录后复制 js代码: layui.use([‘layer…

    2025年3月13日
    200
  • layui中进度条渲染介绍

    考虑静态渲染和动态渲染进度条两种情况。            登录后复制 单独上面一段代码,进度条值是无法显示的。 (1)静态渲染  进度条依赖element组件,如果未引入,进度条将无法显示。 layui.use(‘element’, f…

    2025年3月13日
    200
  • 如何使用LayUI实现网页轮播图

    本篇文章介绍了使用layui实现网页轮播图的方法,具有一定的参考价值,希望对学习layui的朋友有帮助!想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保存到那个地方就行。 如何使用LayUI实现网页轮播…

    2025年3月13日
    200

发表回复

登录后才能评论