layuimini目前是开源的前端框架。目前有两种思路。第一种是用接口，让layuimini读取接口中的菜单栏初始化，一种是用model映射。
我用的模板引擎是thymeleaf。
1.（制作页面第一种方法）用model映射做导航栏和菜单栏这种适合有js基础的人，因为很多东西都要参考layuimini的基础重做js，否则无法将导航栏，菜单栏，菜单历史导航同步。先看数据库设计：
DROp TABLE IF EXISTS `sys_menu`; CREATE TABLE `sys_menu` ( `pk_menu_id` bigint(0) NOT NULL AUTO_INCREMENT COMMENT 'ID', `menu_title` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '标题', `menu_href` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '链接', `parent_id` bigint(0) NOT NULL COMMENT '父级菜单ID', `icon` varchar(10000) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '图标', `authority` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '权限标识符', `sort` smallint(0) NULL DEFAULT NULL COMMENT '排序值', `type` tinyint(0) NOT NULL COMMENT '类型[1:目录, 2:菜单, 3:按钮]', `status` bit(1) NULL DEFAULT NULL COMMENT '是否显示', `remark` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '备注', `target` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '页面跳转方式', `create_by` bigint(0) NULL DEFAULT NULL COMMENT '创建人', `create_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间', `update_by` bigint(0) NULL DEFAULT NULL COMMENT '更新人', `update_time` datetime(0) NULL DEFAULT NULL COMMENT '更新时间', PRIMARY KEY (`pk_menu_id`) USING BTREE, UNIQUE INDEX `idx_menu_title`(`menu_title`) USING BTREE, INDEX `idx_menu_pid`(`parent_id`) USING BTREE, INDEX `idx_menu_sort`(`sort`) USING BTREE, INDEX `idx_menu_href`(`menu_href`) USING BTREE, INDEX `idx_menu_authority`(`authority`) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 88 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact; SET FOREIGN_KEY_CHECKS = 1;
可用Mybatisplus，然后自己写个递归将菜单栏做成树形json数据结构，返回到前端进行接收。
JAVA代码部分：
DAO层
import com.baomidou.mybatisplus.core.mapper.baseMapper; import com.coolbusiness.coolbusiness.system.entity.Menu; import com.coolbusiness.coolbusiness.system.entity.sysMenu; import org.apache.ibatis.annotations.Mapper; import org.apache.ibatis.annotations.Param; import org.springframework.stereotype.Repository; import java.util.List; @Mapper @Repository public interface MenuDao extends baseMapper
service层：
import com.coolbusiness.coolbusiness.Constants.Constant;
import com.coolbusiness.coolbusiness.system.dao.MenuDao;
import com.coolbusiness.coolbusiness.system.entity.Menu;
import com.coolbusiness.coolbusiness.system.entity.sysMenu;
import com.coolbusiness.coolbusiness.system.service.MenuService;
import com.coolbusiness.coolbusiness.system.utils.TreeUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
@Transactional
@Service("MenuService")
public class MenuServiceImpl implements MenuService {
@Resource
private MenuDao menuDao;
@Override
public List
controller层：
import com.coolbusiness.coolbusiness.DIYException.BadRequestException;
import com.coolbusiness.coolbusiness.system.entity.Menu;
import com.coolbusiness.coolbusiness.system.service.MenuService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.List;
import java.util.Map;
@Controller
@RequestMapping("/login")
public class indexController {
@Autowired
private MenuService menuService;
@GetMapping("/index")
public String indexHTML(Model model){
List
前端页面直接在页面中用标签进行接收即可，代码如下：
index.html:
layuimini-iframe版 v2 - 基于Layui的后台管理系统前端模板
-
-
选择模块
-
-
-
-
-
admin
-
基本资料
-
修改密码
-
-
退出登录
-
-
-
-
-
-
- 关 闭 当 前
- 关 闭 其 他
- 关 闭 全 部
js部分：
layui.use(['jquery', 'layer'], function () {
var $ = layui.jquery,
layer = layui.layer;
$('body').on('click', '[data-menu]', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
var menuId = $(this).attr('data-menu');
// header
$(".layuimini-header-menu .layui-nav-item.layui-this").removeClass('layui-this');
$(this).addClass('layui-this');
// left
$(".layuimini-menu-left .layui-nav.layui-nav-tree").addClass('layui-hide');
$(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-hide").removeClass('layui-this');
$("#" + menuId).removeClass('layui-hide');
$("#" + menuId).addClass('layui-this');
layer.close(loading);
});
$('body').on('click', '.layuimini-site-mobile', function () {
var loading = layer.load(0, {shade: false, time: 1 * 10});
var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
if (isShow == 1) { // 缩放
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0);
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-indent');
$('.layui-layout-body').removeClass('layuimini-all');
$('.layui-layout-body').addClass('layuimini-mini');
} else { // 正常
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1);
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-outdent');
$('.layui-layout-body').removeClass('layuimini-mini');
$('.layui-layout-body').addClass('layuimini-all');
layer.close(window.openTips);
}
element.init();
layer.close(loading);
});
$('body').on('click', '[data-side-fold]', function () {
var loading = layer.load(0, {shade: false, time: 1 * 10});
var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
if (isShow == 1) { // 缩放
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0);
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-indent');
$('.layui-layout-body').removeClass('layuimini-all');
$('.layui-layout-body').addClass('layuimini-mini');
// $(".menu-li").each(function (idx,el) {
// $(el).addClass("hidden-sub-menu");
// });
} else { // 正常
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1);
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-outdent');
$('.layui-layout-body').removeClass('layuimini-mini');
$('.layui-layout-body').addClass('layuimini-all');
// $(".menu-li").each(function (idx,el) {
// $(el).removeClass("hidden-sub-menu");
// });
layer.close(window.openTips);
}
element.init();
layer.close(loading);
});
$('body').on('click', '.layuimini-header-menu.layuimini-mobile-show dd', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
var check = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
if(check === "1"){
$('.layuimini-site-mobile').trigger("click");
element.init();
}
layer.close(loading);
});
});
然后就会形成大家看到页面效果：
2.LAYUImini制作导航栏和菜单栏（LAYUIMINI文档是有案例可以参考的）
官方写菜单接口的案例，亲测是可用的：点击这里查看即可
本着简单就可的原则，我是不希望所有的东西都要自己写js，真的很累，直接在后端传所有数据到前端即可。我在测试官方文档给我的案例后，改改代码就可以用了，看这里
框框中的方法如下，你直接黏贴使用即可。
function getProjectUrl() {
var layuiDir = layui.cache.dir;
if (!layuiDir) {
var js = document.scripts, last = js.length - 1, src;
for (var i = last; i > 0; i--) {
if (js[i].readyState === 'interactive') {
src = js[i].src;
break;
}
}
var jsPath = src || js[last].src;
layuiDir = jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
}
return layuiDir.substring(0, layuiDir.indexOf('assets'));
}
然后就会得到一下的结果：
