前言
Layui對於沒有太多前端基礎的我來說，第一次接觸還是有點困難，不過文檔還算詳細，摸索着的逐漸的了解了，這次來說下后台布局。
Layui后台布局
一、后台布局之頂邊欄
1 <div class="layui-header"> 2 <div class="layui-logo">layui 后台布局</div> 3 <!-- 頭部區域（可配合layui已有的水平導航） --> 4 <ul class="layui-nav layui-layout-left"> 5 <li class="layui-nav-item"><a href="">控制台</a></li> 6 <li class="layui-nav-item"><a href="">商品管理</a></li> 7 <li class="layui-nav-item"><a href="">用戶</a></li> 8 <li class="layui-nav-item"> 9 <a href="javascript:;">其它系統</a> 10 <dl class="layui-nav-child"> 11 <dd><a href="">郵件管理</a></dd> 12 <dd><a href="">消息管理</a></dd> 13 <dd><a href="">授權管理</a></dd> 14 </dl> 15 </li> 16 </ul> 17 <ul class="layui-nav layui-layout-right"> 18 <li class="layui-nav-item"> 19 <a href="javascript:;"> 20 <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 21 {{request.user.username}} 22 </a> 23 <dl class="layui-nav-child"> 24 <dd><a href="">基本資料</a></dd> 25 <dd><a href="">安全設置</a></dd> 26 </dl> 27 </li> 28 <li class="layui-nav-item"><a href="">退了</a></li> 29 </ul> 30 </div>
代碼中橙色背景的一行為Django中傳入的當前登錄用戶的用戶名。
最終效果如下：
二、后台布局之側邊欄
側邊欄由於需要動態加載節點和子節點，所以需要先在Django中建立節點和子節點的model，model代碼如下：
1 # 節點類 2 class NavigationProfile(models.Model): 3 name=models.CharField(max_length=20,verbose_name='節點名稱') 4 url=models.CharField(max_length=50,verbose_name='鏈接地址') 5 iconCls=models.CharField(max_length=50,verbose_name='圖標icon') 6 7 class Meta: 8 verbose_name='節點名稱' 9 verbose_name_plural=verbose_name 10 11 def __str__(self): 12 return self.name 13 14 # 子節點類 15 class NavigationSubProfile(models.Model): 16 name=models.CharField(max_length=20,verbose_name='子節點名稱') 17 url=models.CharField(max_length=50,verbose_name='鏈接地址') 18 iconCls=models.CharField(max_length=50,verbose_name='圖標icon') 19 parent=models.ForeignKey(NavigationProfile,on_delete=models.CASCADE,verbose_name='父節點') 20 21 class Meta: 22 verbose_name='子節點名稱' 23 verbose_name_plural=verbose_name 24 25 def __str__(self): 26 return self.name
在Django views中代碼如下：
1 def open_index(request): 2 if request.user.is_authenticated == False: 3 return HttpResponseRedirect('/account/login/') 4 else: 5 navigation = NavigationProfile.objects.all() 6 dict = [] 7 8 for nav in navigation: 9 dic = {} 10 id = nav.id 11 dic['id'] = nav.id 12 dic['text'] = nav.name 13 dic['url'] = nav.url 14 dic['iconCls'] = nav.iconCls 15 dic['nid'] = 0 16 sub_navigation = NavigationSubProfile.objects.filter(parent_id=id) 17 18 sub_dict = [] 19 for sub_nav in sub_navigation: 20 sub_dic = {} 21 sub_dic['id'] = sub_nav.id 22 sub_dic['text'] = sub_nav.name 23 sub_dic['url'] = sub_nav.url 24 sub_dic['iconCls'] = sub_nav.iconCls 25 sub_dic['nid'] = sub_nav.parent_id 26 sub_dict.append(sub_dic) 27 28 dic["children"] = sub_dict 29 dict.append(dic)30 return render(request,'index.html',{'dict':dict})
Django urls代碼如下：
1 urlpatterns = [ 2 path('get-navigationProfile/',views.get_navigationProfile,name='get_navigationProfile'), 3 ]
Html側邊欄代碼如下：
1 <div class="layui-side layui-bg-black"> 2 <div class="layui-side-scroll"> 3 <!-- 左側導航區域（可配合layui已有的垂直導航） --> 4 <ul class="layui-nav layui-nav-tree" lay-filter="test"> 5 6 {% for dic in dict %} 7 <li class="layui-nav-item"> 8 <a class="" href="javascript:;">{{ dic.text }}</a> 9 <dl class="layui-nav-child"> 10 {% for child in dic.children %} 11 <dd><a href="javascript:;" data-id="{{ child.id }}" 12 data-url="{{ child.url }}">{{ child.text }}</a></dd> 13 {% endfor %} 14 15 </dl> 16 </li> 17 {% endfor %} 18 19 </ul> 20 </div> 21 </div>
最終效果圖
