本期精彩:
1、使用LayUI中提供的后台布局代码,结合MySQL数据库,制作出左侧导航菜单栏
2、使用LayUI提供的选项卡组件,运用到左侧菜单栏中(通过点击左侧菜单实现动态打开选项卡Tab)
目录
1、左侧导航菜单栏的制作
前台界面的搭建
数据库中对应的表结构
后台代码
2、动态选项卡的制作
参考实现步骤
使用LayUI中提供的后台布局框架搭建出的界面
对应代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/common/head.jsp" %>
<%@include file="/common/head.jsp" %>对应的代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setAttribute("ctx", request.getContextPath());
%>
对应的SQL代码
CREATE TABLE t_module(
id INT NOT NULL PRIMARY KEY COMMENT '模块ID',
pid INT NOT NULL COMMENT '模块PID',
NAME VARCHAR(20) NOT NULL COMMENT '模块名称',
icon VARCHAR(20) NULL COMMENT '模块图标',
url VARCHAR(50) NULL COMMENT 'URL地址',
sort INT DEFAULT 0 COMMENT '模块顺序'
) COMMENT '模块信息表';
测试数据(树表/自关联表/无限级分类表)
注:Pid为-1代表没有父节点,是根节点,icon代表对应的图标,url代表跳转的链接,sort代表菜单的先后顺序
1、对应实体类
public class Module {
private Integer id;
private Integer pid;
private String name;
private String icon;
private String url;
private int sort;
//用于在Java中存放根目录的子目录
private List children = new ArrayList<>();
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public int getSort() {
return sort;
}
public void setSort(int sort) {
this.sort = sort;
}
public List getChildren() {
return children;
}
public void setChildren(List children) {
this.children = children;
}
@Override
public String toString() {
return "Module [id=" + id + ", pid=" + pid + ", name=" + name + ", icon=" + icon + ", url=" + url + ", sort="
+ sort + "]";
}
}
2、对应dao层
IModuleDao
public interface IModuleDao {
List getModules(int pid);
}
ModuleDao
public class ModuleDao implements IModuleDao {
@Override
public List getModules(int pid) {
String sql = "select * from t_module where pid=?";
return DbTemplate.query(sql, new Object[] {pid}, Module.class);
}
}
3、对应biz层
IModuleService
public interface IModuleService {
List getModules(int pid);
}
ModuleService
public class ModuleService implements IModuleService {
private IModuleDao dao = new ModuleDao();
@Override
public List getModules(int pid) {
List list = dao.getModules(pid);
for(Module m: list) {
if(null == m.getUrl() || "".equals(m.getUrl())) {
//递归
m.setChildren(getModules(m.getId()));
}
}
return list;
}
}
最终效果(左侧导航栏的显示文字都来自于上面建立好了的数据库表中了)
Tab广泛应用于Web页面,因此我们也对其进行了良好的支持(简约风格、卡片风格、响应式Tab以及带删除的Tab等等)。Layui内置多种Tab风格,支持删除选项卡、并提供响应式支持
先去官方文档中找到选项卡组件
再使用LayUI提供的选项卡组件的代码(根据提示找到你想要的选项卡的样式对应的代码)
结合使用JS、Ajax来实现对选项卡的动态控制
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/common/head.jsp" %>
将选项卡运用到上期的左侧菜单栏中(最终效果)