Layui菜单模块

柔情只为你懂 2024-03-17 18:35 61阅读 0赞

>  **今天继续有我给大家layui菜单在web中的应用**

## 一.介绍 ##

### 1.什么是菜单模块？ ###

Layui是一个轻量级的前端框架，提供了丰富的UI组件和便捷的开发方式，而菜单模块是Layui中的一个核心组件之一，用于创建和管理网页导航菜单。

### 2.layui菜单模块有什么用？ ###

> Layui菜单模块是一种用于创建网页导航菜单的前端组件。具体而言，Layui菜单模块的作用包括：
> 
> **1. 导航网页页面**：可以使用Layui菜单模块创建网页的主导航菜单，使用户能够快速浏览和访问不同页面或功能模块。
> 
> **2. 多级菜单支持**：Layui菜单模块支持创建多级菜单，你可以通过嵌套菜单的方式来构建层级结构的菜单，便于组织和管理大量的菜单项。
> 
> **3. 菜单事件响应**：你可以利用Layui的事件监听机制，为菜单添加自定义的点击事件或其他交互行为，比如弹出窗口、执行相关操作等，以实现更丰富的用户交互效果。
> 
> **4. 动态菜单生成**：Layui菜单模块支持通过异步请求或动态数据生成菜单项，这意味着你可以根据需要动态地生成菜单，灵活地控制菜单的内容和显示。
> 
> **5. 样式自定义**：Layui菜单模块提供了多种样式和主题可供选择，你可以根据自己的需求自定义菜单的外观和样式，以适应不同的应用场景和界面设计。
> 
> 总结而言**，Layui菜单模块可以帮助前端开发人员快速构建出具备良好用户体验的网页导航菜单，实现页面间的导航和功能访问，并且提供了灵活的样式和事件配置，让开发者可以根据项目需求定制需求。**

### 3.为什么layui现在仍然有企业在使用？ ###

> Layui作为一个简洁、易用且功能丰富的前端框架，仍然被一些企业所使用，主要有以下几个原因：
> 
> **1. 轻量级和易用性**：Layui的核心理念是“模块化”，它以轻量级、简单易用为设计目标，提供了丰富的UI组件和简洁的API，使得开发人员可以快速上手并进行快速开发。
> 
> **2. 成熟稳定**：Layui发布于2016年，已经经过多年的发展与迭代，拥有一定规模的用户群体和活跃的社区支持。由于其稳定性和成熟性，许多企业选择继续使用Layui来维护和改进他们现有的项目。
> 
> **3. 兼容性强：**Layui在设计和开发过程中考虑了兼容性问题，能够良好地运行在各种浏览器上，包括常见的Chrome、Firefox、Safari等主流浏览器，以及IE10+的版本。
> 
> **4. 性能表现**：Layui经过优化，具有良好的性能表现。它提供了按需加载和异步加载等机制，可以提升页面加载速度，避免资源浪费，提升用户体验。
> 
> **5. 社区支持和插件丰富**：Layui拥有活跃的社区和丰富的第三方插件，你可以从社区获取到各种实用的扩展和解决方案，帮助完成更复杂的功能需求。
> 
> 综上所述，尽管前端技术发展迅速，Layui仍然有企业在使用，主要是因为它**具备易用性、稳定性、兼容性和良好的性能表现等诸多优点，并且拥有社区的支持和插件生态系统**。对于一些已有的项目或中小型企业来说，Layui提供了一种成熟、实用的解决方案，能够满足项目的需求。

--------------------

## 二.将layui菜单栏部署在web中 ##

### 1.思路 ###

> **通过sql语句获得所有数据，在将原来的数据关系有平级，变成父子关系，最后在将数据放在jsp中！**

### 2.实操 ###

#### 2.1查看数据库数据，编写实体![77a1e106fc0143a2bce6b30174b49f65.png][] ####

package com.zking.entity;
    
    public class Permission {
    /*
    *lz
    **
    /
     private  long id;
     private   String  name;
     private    String   description;
     private    String   url;
     private  long pid;
     private    int ismenu;
     private   long   displayno;
    public Permission(long id, String name, String description, String url, long pid, int ismenu, long displayno) {
    	super();
    	this.id = id;
    	this.name = name;
    	this.description = description;
    	this.url = url;
    	this.pid = pid;
    	this.ismenu = ismenu;
    	this.displayno = displayno;
    }
    /**
     * @return the id
     */
    public long getId() {
    	return id;
    }
    /* (non-Javadoc)
     * @see java.lang.Object#toString()
     */
    @Override
    public String toString() {
    	return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid=" + pid
    			+ ", ismenu=" + ismenu + ", displayno=" + displayno + "]";
    }
    public Permission() {
    	super();
    }
    /**
     * @param id the id to set
     */
    public void setId(long id) {
    	this.id = id;
    }
    /**
     * @return the name
     */
    public String getName() {
    	return name;
    }
    /**
     * @param name the name to set
     */
    public void setName(String name) {
    	this.name = name;
    }
    /**
     * @return the description
     */
    public String getDescription() {
    	return description;
    }
    /**
     * @param description the description to set
     */
    public void setDescription(String description) {
    	this.description = description;
    }
    /**
     * @return the url
     */
    public String getUrl() {
    	return url;
    }
    /**
     * @param url the url to set
     */
    public void setUrl(String url) {
    	this.url = url;
    }
    /**
     * @return the pid
     */
    public long getPid() {
    	return pid;
    }
    /**
     * @param pid the pid to set
     */
    public void setPid(long pid) {
    	this.pid = pid;
    }
    /**
     * @return the ismenu
     */
    public int getIsmenu() {
    	return ismenu;
    }
    /**
     * @param ismenu the ismenu to set
     */
    public void setIsmenu(int ismenu) {
    	this.ismenu = ismenu;
    }
    /**
     * @return the displayno
     */
    public long getdisplayno() {
    	return displayno;
    }
    /**
     * @param displayno the displayno to set
     */
    public void setdisplayno(long displayno) {
    	this.displayno = displayno;
    }
     
     
    }

#### 2.2编写dao方法 ####

package com.zking.dao;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import com.sun.org.apache.bcel.internal.generic.RETURN;
    import com.zking.entity.Permission;
    import com.zking.util.BaseDao;
    import com.zking.util.BuildTree;
    import com.zking.util.PageBean;
    import com.zking.util.TreeVo;
    
    public class PermissionDao extends BaseDao<Permission> {
    
    	public List<Permission> list(Permission permission, PageBean pageBean) throws Exception {
    		String sql = "select *from  t_oa_permission  ";
    		return super.executeQuery(sql, Permission.class, pageBean);
    	}
    
    	/**
    	 * 将平级转换成父子关系
    	 * 
    	 * @throws Exception
    	 * 
    	 */
    	public List<TreeVo<Permission>> menus(Permission permission, PageBean pageBean) throws Exception {
    		List<TreeVo<Permission>>lst=new ArrayList<TreeVo<Permission>>();
    		List<Permission> list = this.list(permission, pageBean);
            for (Permission p : list) {
            	TreeVo<Permission>vo=new TreeVo<>();
            	vo.setId(p.getId()+"");
            	vo.setText(p.getName());
            	vo.setParentId(p.getPid()+"");
            	lst.add(vo);
    		}
    		return   BuildTree.buildList(lst, "-1");
    	}
    
    
    }

#### 2.3TreeVo构建父子关系 ####

> **通过这个类，可以将同级关系，转化成为父子关系**

package com.zking.util;
    
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Map;
    
    
    public class TreeVo<T> {
    	/**
    	 * 节点ID
    	 */
    	private String id;
    	/**
    	 * 显示节点文本
    	 */
    	private String text;
    	/**
    	 * 节点状态，open closed
    	 */
    	private Map<String, Object> state;
    	/**
    	 * 节点是否被选中 true false
    	 */
    	private boolean checked = false;
    	/**
    	 * 节点属性
    	 */
    	private Map<String, Object> attributes;
    
    	/**
    	 * 节点的子节点
    	 */
    	private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();
    
    	/**
    	 * 父ID
    	 */
    	private String parentId;
    	/**
    	 * 是否有父节点
    	 */
    	private boolean hasParent = false;
    	/**
    	 * 是否有子节点
    	 */
    	private boolean hasChildren = false;
    
    	public String getId() {
    		return id;
    	}
    
    	public void setId(String id) {
    		this.id = id;
    	}
    
    	public String getText() {
    		return text;
    	}
    
    	public void setText(String text) {
    		this.text = text;
    	}
    
    	public Map<String, Object> getState() {
    		return state;
    	}
    
    	public void setState(Map<String, Object> state) {
    		this.state = state;
    	}
    
    	public boolean isChecked() {
    		return checked;
    	}
    
    	public void setChecked(boolean checked) {
    		this.checked = checked;
    	}
    
    	public Map<String, Object> getAttributes() {
    		return attributes;
    	}
    
    	public void setAttributes(Map<String, Object> attributes) {
    		this.attributes = attributes;
    	}
    
    	public List<TreeVo<T>> getChildren() {
    		return children;
    	}
    
    	public void setChildren(List<TreeVo<T>> children) {
    		this.children = children;
    	}
    
    	public boolean isHasParent() {
    		return hasParent;
    	}
    
    	public void setHasParent(boolean isParent) {
    		this.hasParent = isParent;
    	}
    
    	public boolean isHasChildren() {
    		return hasChildren;
    	}
    
    	public void setChildren(boolean isChildren) {
    		this.hasChildren = isChildren;
    	}
    
    	public String getParentId() {
    		return parentId;
    	}
    
    	public void setParentId(String parentId) {
    		this.parentId = parentId;
    	}
    
    	public TreeVo(String id, String text, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
                      List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {
    		super();
    		this.id = id;
    		this.text = text;
    		this.state = state;
    		this.checked = checked;
    		this.attributes = attributes;
    		this.children = children;
    		this.hasParent = isParent;
    		this.hasChildren = isChildren;
    		this.parentId = parentID;
    	}
    
    	public TreeVo() {
    		super();
    	}
    
    }

#### 2.3构建servelt ，配置xml文件 ####

package com.zking.web;
    
    import java.util.List;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.zking.dao.PermissionDao;
    import com.zking.entity.Permission;
    import com.zking.framework.ActionSupport;
    import com.zking.framework.ModelDriver;
    import com.zking.util.ResponseUtil;
    import com.zking.util.TreeVo;
    
    public class PermissionAction extends ActionSupport implements ModelDriver<Permission> {
    	private Permission permission = new Permission();
    	private PermissionDao pd = new PermissionDao();
    
    	  
    	public void menus(HttpServletRequest req, HttpServletResponse resp) {
    	try {
    		List<TreeVo<Permission>> menus = pd.menus( null, null);
    	ResponseUtil.writeJson(resp, menus);
    	} catch (Exception e) {
    		// TODO Auto-generated catch block
    		e.printStackTrace();
    	}
    		
    	}
    	
    	@Override
    	public Permission getModel() {
    		// TODO Auto-generated method stub
    		return permission;
    	}
    
    }

> 在其中的ResponseUtil.writeJson(resp, menus);是我们封装的一个方法，

> 配置xml文件

#### 2.4在web实现效果 ####

##### 1.静态界面效果 #####

![a3b92ce6a7dc42808d9a4f7528534af4.png][]

##### 2.动态界面效果 #####

![6b99101c84224ae09ad61d1196fddbad.png][]

##### 3.代码 #####

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <%@ include file="common/header.jsp"%>
    <!DOCTYPE html PUBLIC >
    <html>
    <head>
    <head>
    <meta name="viewport"
    	content="width=device-width,initial-scale=1.33,minimum-scale=1.0,maximum-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>主程序</title>
    <meta http-equiv="Content-Language" content="zh-CN">
    
    </head>
    <body>
    	<div class="layui-layout layui-layout-admin">
    		<div class="layui-header">
    			<div class="layui-logo layui-hide-xs layui-bg-black">layout
    				demo</div>
    			
    <ul class="layui-nav layui-layout-left">
    	
    <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm"
    	lay-header-event="menuLeft"><i
    	class="layui-icon layui-icon-spread-left"></i></li>
    
    	<li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
    	<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
    	<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
    	<li class="layui-nav-item"><a href="javascript:;">nav
    			groups</a>
    		<dl class="layui-nav-child">
    			<dd>
    				<a href="">menu 11</a>
    			</dd>
    			<dd>
    				<a href="">menu 22</a>
    			</dd>
    			<dd>
    				<a href="">menu 33</a>
    			</dd>
    		</dl></li>
    </ul>
    
    	<ul class="layui-nav layui-layout-right">
    		<li class="layui-nav-item layui-hide layui-show-md-inline-block">
    			<a href="javascript:;"> <img
    				src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
    				class="layui-nav-img"> tester
    		</a>
    			<dl class="layui-nav-child">
    				<dd>
    					<a href="">Your Profile</a>
    				</dd>
    				<dd>
    					<a href="">Settings</a>
    				</dd>
    				<dd>
    					<a href="login.jsp">Sign out</a>
    				</dd>
    			</dl>
    		</li>
    		<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
    			<a href="javascript:;"> <i
    				class="layui-icon layui-icon-more-vertical"></i>
    		</a>
    		</li>
    	</ul>
    </div>
    
    <div class="layui-side layui-bg-black">
    	<div class="layui-side-scroll">
    		
    		<ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
    			<li class="layui-nav-item layui-nav-itemed"><a class=""
    				href="javascript:;">menu group 1</a>
    				<dl class="layui-nav-child">
    					<dd>
    						<a href="javascript:;">menu 1</a>
    					</dd>
    					<dd>
    						<a href="javascript:;">menu 2</a>
    					</dd>
    					<dd>
    						<a href="javascript:;">menu 3</a>
    					</dd>
    					<dd>
    						<a href="">the links</a>
    					</dd>
    				</dl></li>
    			<li class="layui-nav-item"><a href="javascript:;">menu
    					group 2</a>
    				<dl class="layui-nav-child">
    					<dd>
    						<a href="javascript:;">list 1</a>
    					</dd>
    					<dd>
    						<a href="javascript:;">list 2</a>
    					</dd>
    					<dd>
    						<a href="">超链接</a>
    					</dd>
    				</dl></li>
    			<li class="layui-nav-item"><a href="javascript:;">click
    					menu item</a></li>
    			<li class="layui-nav-item"><a href="">the links</a></li>
    
    		</ul>
    	</div>
    </div>
    
    <div class="layui-body">
    	
    <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
    </div>
    
    <div class="layui-footer">
    	
    		底部固定区域
    	</div>
    </div>
    <script>
    //JS 
    layui
    		.use(
    				[ 'element', 'layer', 'util' ],
    				function() {
    					var element = layui.element, layer = layui.layer, util = layui.util, $ = layui.$;
    					$
    							.ajax({
    								url : "${pageContext.request.contextPath }/permission.action?methodName=menus",
    								dataType : 'json',
    								success : function(data) {
    									console.log(data);
    									var htmlar = '';
    									$
    											.each(
    													data,
    													function(i, n) {
    														htmlar += '<li class="layui-nav-item layui-nav-itemed">';
    														htmlar += '<a class=""  href="javascript:;">'
    																+ n.text
    																+ '</a>';
    														if (n.hasChildren) {
    															var Children = n.Children;
    															htmlar += '<dl class="layui-nav-child">';
    															$
    																	.each(
    																			data,
    																			function(
    																					idx,
    																					node) {
    																				htmlar += '<dd><a href="">'
    																						+ node.text
    																						+ '</a></dd>';
    																			})
    															htmlar += '</dl>';
    														}
    														htmlar += '</li>';
    													})
    									$("#menu").html(htmlar);
    									element.render('menu');
    								}
    							});
    				});
    </script>
    </body>
    </html>

[77a1e106fc0143a2bce6b30174b49f65.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/59ad1ce3629c41b7b04a9e9ba3a200eb.png
[a3b92ce6a7dc42808d9a4f7528534af4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/ebc7717d748141a6bf165fa03ad59490.png
[6b99101c84224ae09ad61d1196fddbad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/d68d23587f4e4e4da0b5b93ad2a3ba70.png