首页 > 分享 > 后台框架

后台框架

花匠小妙招
2024-12-07 19:05

后台框架--AdminLTE-2.3.0（系统菜单从后端动态加载）源码下载链接（https://download.csdn.net/download/hgq0916/11117488）

从网上找一个不错的后台框架，先来张截图：

只可惜这个框架的菜单是写死的，如果想要从后端动态加载系统菜单的话，还需要进行一番改造，今天花了半天时间对它进行改造，终于成功了，目前改造的框架可以从后端动态加载，后端只需要提供菜单列表的json数据即可。

下面是改造后的系统菜单效果：

下面是后端的json数据：

[

{

"id":1,

"name":"一级菜单1",

"url":"/AdminLTE-2.3.0/pages/examples/lockscreen.html"

{

"id":2,

"name":"一级菜单2",

"url":null,

"children":[

{

"id":3,

"name":"二级菜单1",

"url":"http://www.jd.com"

{

"id":4,

"name":"二级菜单2",

"url":"http://www.taobao.com"

}

]

{

"id":5,

"name":"一级菜单3",

"url":"http://www.baidu.com",

"icon":"dist/img/icon/chart.png",

"label":{

"name":"new",

"bgColor":"#5a3cbc"

}

{

"id":6,

"name":"一级菜单4",

"url":null,

"label":{

"name":"4",

"bgColor":"#f6153f"

"icon":"dist/img/icon/message.png",

"children":[

{

"id":7,

"name":"二级菜单1",

"url":"http://www.jd.com",

"children":[

{

"id":9,

"name":"三级菜单1",

"url":"http://www.jd.com"

{

"id":10,

"name":"三级菜单2",

"url":"http://www.taobao.com"

}

]

{

"id":8,

"name":"二级菜单2",

"url":"http://www.taobao.com"

}

]

}

]

下面是实现代码：

index.html页面代码：

<!DOCTYPE html>

<html>

<head>

<title>AdminLTE 2 | Dashboard</title>

</head>

<span class="logo-lg"><b>Admin</b>LTE</span>

</a>

<span class="sr-only">Toggle navigation</span>

</a>

</a>

<li class="header">You have 4 messages</li>

<li>

<li>

</div>

<h4>

Support Team

</h4>

<p>Why not buy a new awesome theme?</p>

</a>

</li>

<li>

</div>

<h4>

AdminLTE Design Team

<small><i class="fa fa-clock-o"></i> 2 hours</small>

</h4>

<p>Why not buy a new awesome theme?</p>

</a>

</li>

<li>

</div>

<h4>

Developers

<small><i class="fa fa-clock-o"></i> Today</small>

</h4>

<p>Why not buy a new awesome theme?</p>

</a>

</li>

<li>

</div>

<h4>

Sales Department

<small><i class="fa fa-clock-o"></i> Yesterday</small>

</h4>

<p>Why not buy a new awesome theme?</p>

</a>

</li>

<li>

</div>

<h4>

Reviewers

</h4>

<p>Why not buy a new awesome theme?</p>

</a>

</li>

</ul>

</li>

<li class="footer"><a href="#">See All Messages</a></li>

</ul>

</li>

</a>

<li class="header">You have 10 notifications</li>

<li>

<li>

<i class="fa fa-users text-aqua"></i> 5 new members joined today

</a>

</li>

<li>

<i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems

</a>

</li>

<li>

<i class="fa fa-users text-red"></i> 5 new members joined

</a>

</li>

<li>

<i class="fa fa-shopping-cart text-green"></i> 25 sales made

</a>

</li>

<li>

<i class="fa fa-user text-red"></i> You changed your username

</a>

</li>

</ul>

</li>

</ul>

</li>

</a>

<li class="header">You have 9 tasks</li>

<li>

<li>

<h3>

Design some buttons

</h3>

<span class="sr-only">20% Complete</span>

</div>

</a>

</li>

<li>

<h3>

Create a nice theme

</h3>

<span class="sr-only">40% Complete</span>

</div>

</a>

</li>

<li>

<h3>

Some task I need to do

</h3>

<span class="sr-only">60% Complete</span>

</div>

</a>

</li>

<li>

<h3>

Make beautiful transitions

</h3>

<span class="sr-only">80% Complete</span>

</div>

</a>

</li>

</ul>

</li>

<a href="#">View all tasks</a>

</li>

</ul>

</li>

<span class="hidden-xs">Alexander Pierce</span>

</a>

<p>

Alexander Pierce - Web Developer

<small>Member since Nov. 2012</small>

</p>

</li>

<a href="#">Followers</a>

</div>

<a href="#">Sales</a>

</div>

<a href="#">Friends</a>

</div>

</li>

<a href="#" class="btn btn-default btn-flat">Profile</a>

</div>

</div>

</li>

</ul>

</li>

<li>

</li>

</ul>

</div>

</nav>

</header>

</div>

<p>Alexander Pierce</p>

<a href="#"><i class="fa fa-circle text-success"></i> Online</a>

</div>

</span>

</div>

</form>

</ul>

</section>

</aside>

</div>

<b>Version</b> 2.3.0

</div>

</footer>

</ul>

<h3 class="control-sidebar-heading">Recent Activity</h3>

<li>

<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

<p>Will be 23 on April 24th</p>

</div>

</a>

</li>

<li>

<h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>

<p>New phone +1(800)555-1234</p>

</div>

</a>

</li>

<li>

<h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>

<p>nora@example.com</p>

</div>

</a>

</li>

<li>

<h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>

<p>Execution time 5 seconds</p>

</div>

</a>

</li>

</ul>

<h3 class="control-sidebar-heading">Tasks Progress</h3>

<li>

Custom Template Design

</h4>

</div>

</a>

</li>

<li>

Update Resume

</h4>

</div>

</a>

</li>

<li>

Laravel Integration

</h4>

</div>

</a>

</li>

<li>

Back End Framework

</h4>

</div>

</a>

</li>

</ul>

</div>

<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>

<h3 class="control-sidebar-heading">General Settings</h3>

Report panel usage

</label>

<p>

Some information about this general settings option

</p>

</div>

Allow mail redirect

</label>

<p>

Other sets of options are available

</p>

</div>

Expose author name in posts

</label>

<p>

Allow the user to show his name in blog posts

</p>

</div>

<h3 class="control-sidebar-heading">Chat Settings</h3>

Show me as online

</label>

</div>

Turn off notifications

</label>

</div>

Delete chat history

</label>

</div>

</form>

</div>

</aside>

</div>

$.widget.bridge('uibutton', $.ui.button);

</script>

</body>

</html>

这个index.html需要很多js和css文件的配合才能正常显示，文件太多，在此不一一列出，源码项目链接（https://download.csdn.net/download/hgq0916/11117488）。

接下来是前端js代码，负责将后端的json格式菜单列表渲染。

menu.js代码：

var menuObj = {

menuList:[],

config:{

pmenu_icon_class:"fa",

lmenu_icon_class:"fa",

pmenu_expand_class:"fa fa-angle-left pull-right",

label_icon_class:"label pull-right"

getMenuList:function () {

return this.menuList;

setMenuList:function (menuList) {

this.menuList = menuList;

this.showMenuList();

showMenuList:function () {

if(this.menuList!=null&&this.menuList.length>0){

var menuList = this.menuList;

var menuContainer = $(".sidebar-menu");

menuContainer.html("");

for(var i=0;i<menuList.length;i++){

var menu = menuList[i];

var mHtml = this.generateMenuHtml(menu);

menuContainer.append(mHtml);

}

generateMenuHtml:function (menu) {

var m_html = null;

if(menu.children==null||menu.children.length==0){

var li = $("<li></li>");

m_html = li;

li.prop("data-menuid",menu.id);

var a = $("<a></a>");

a.attr("href","javascript:;");

var menu_str = JSON.stringify(menu);

a.attr("onclick","navigateTo('"+menu_str+"')");

var i = $("<i></i>");

i.css("margin-right","8px");

i.css("width","14px");

i.css("height","14px");

if(menu.icon!=null&&menu.icon!=''){

i.addClass(this.config.lmenu_icon_class);

i.css("background","url("+menu.icon+") no-repeat");

i.css("background-size","14px 14px");

i.css("background-position","center center");

}else {

i.addClass(this.config.lmenu_icon_class);

i.addClass("fa-circle-o");

}

a.append(i);

var span = $("<span></span>");

span.html(menu.name);

a.append(span);

if(menu.label!=null&&menu.label.name!=null&&menu.label.name!=''){

var label = menu.label;

var small = $("<small></small>");

small.html(label.name);

if(label.bgColor!=null&&label.bgColor!=''){

small.addClass(this.config.label_icon_class);

small.css("background-color",label.bgColor+" !important");

}else {

small.addClass(this.config.label_icon_class);

small.addClass("bg-green");

}

a.append(small);

}

li.append(a);

}else{

var li = $("<li></li>");

m_html = li;

li.addClass("treeview");

var a = $("<a></a>");

a.attr("href","javascript:;");

li.append(a);

var i = $("<i></i>");

i.css("margin-right","8px");

i.css("width","14px");

i.css("height","14px");

if(menu.icon!=null&&menu.icon!=''){

i.addClass(this.config.lmenu_icon_class);

i.css("background","url("+menu.icon+") no-repeat");

i.css("background-size","14px 14px");

i.css("background-position","center center");

}else {

i.addClass(this.config.pmenu_icon_class);

i.addClass("fa-files-o");

}

a.append(i);

var span = $("<span></span>");

span.html(menu.name);

a.append(span);

if(menu.label!=null&&menu.label.name!=null&&menu.label.name!=''){

var label = menu.label;

var span = $("<span></span>");

span.html(label.name);

if(label.bgColor!=null&&label.bgColor!=''){

span.addClass(this.config.label_icon_class);

span.css("background-color",label.bgColor+" !important");

}else {

span.addClass(this.config.label_icon_class);

span.addClass("bg-green");

}

a.append(span);

}else{

var i = $("<i></i>");

i.addClass(this.config.pmenu_expand_class);

a.append(i);

}

var ul = $("<ul></ul>");

ul.addClass("treeview-menu");

li.append(ul);

var mchidren = menu.children;

for(var k=0;k<mchidren.length;k++){

var childHtml = this.generateMenuHtml(mchidren[k]);

ul.append(childHtml);

}

return m_html;

loadMenuList:function (url) {

$.ajax({

url:url,

method:"GET",

asyn:true,

dataType:"json",

success:(response)=>{

this.setMenuList(response);

}

});

}

};

menuObj.loadMenuList("dist/json/menuList.json");

function navigateTo(menu) {

var menu = JSON.parse(menu);

document.getElementById("mainFrame").src = menu.url;

}

源码包下载链接：https://download.csdn.net/download/hgq0916/11117488

欢迎大家批评指正，有兴趣可以一起交流学习，Java成长交流学习群：184998348

文竹有什么象征吗

文竹的寓意,柔柔的竹子祝你们永远幸福

热点分享

家庭养花知识大全(家庭养花知识大全与技巧)

养花常识养花技巧 1.浇花 ①残茶浇花残茶用来浇花,既能保持土...

养花知识大全,养花技巧大全

养花知识绿萝是一种很常见的盆栽植物，因为四季翠绿、养护简单...

推荐分享

家庭养花风水知识家庭养花“五行说”

许多人喜欢在家庭里面养花，但不是很了解家庭养花风水知识。居家...

家庭养花知识大全家庭养花有什么好处

家庭养花知识大全家庭养花有什么好处爱花之人总是喜欢在家里...

热门点击排行

君子兰什么品种最名贵十大名贵君子兰排名

世界上最名贵的10种兰花图片，莲瓣兰价值高达1500万

分享分类导航

花卉

每日分享

花卉图片

养花生活

后台框架

文竹有什么象征吗

文竹的寓意,柔柔的竹子祝你们永远幸福

家庭养花知识大全(家庭养花知识大全与技巧)

养花知识大全,养花技巧大全

家庭养花风水知识 家庭养花“五行说”

家庭养花知识大全 家庭养花有什么好处

家庭养花风水知识家庭养花“五行说”

家庭养花知识大全家庭养花有什么好处