“This is the fifth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

1, the preface

Because I got a new job some time ago. The new project team requires both front and back ends to be written, and the front end is to use Layui. Although it is popular to separate the front and back ends, and modular frameworks such as VUE and React are mostly used in the front end, there are still many public projects that integrate the front and back ends or write the front and back ends together due to historical reasons and personnel factors. Layui, the jQuery framework, is also relatively friendly for back-end development. (PS: Although the official website of Layui has been removed, there is still a mirror website of related documents on the issue of Gitee, such as layui.itze.cn/. Although there are documents for reference, there are still many problems and many pits in the actual development process. Mainly because of the different versions, I am using the V2.2.5 version, the reference document is V2.5, many functions and features are not supported. But layui source code or most can understand, do not know how to look at the source code also solved.

Let’s take a detailed look at how to implement the left tree menu based on Layui.

2. Back-end code

The first step is to build a tree structure of menu data at the back end. The parent_id of the root node is set to null or 000-000. It is recommended to implement the parent level structure in code instead of checking the parent level and then checking the child level in the for loop, which can be a waste of time if the menu number is too deep. Here is the code to specify:

1. Query menu data

This section describes how to find the role of a user and the role permission based on the role information

	select cm.* from com_menu cm
            inner join com_role_menu crm on crm.com_menu_id = cm.com_menu_id
                inner join com_user_role cur on crm.com_role_id = cur.com_role_id
        where cur.com_user_id = #{comUserId}
Copy the code

2, build the tree structure information here I use the double-layer loop to achieve, the overall idea is to traverse to find the upper level of each element, add the sub-menu to the parent element, finally remove all the sub-menu to get a tree menu structure.

private static List<MenuTreeNode> getTreeMenu(List<MenuTreeNode> menuList) {
        List<MenuTreeNode> removeMenus = new ArrayList<MenuTreeNode>();
        for (int i = 0; i < menuList.size(); i ++) {
            try {
                MenuTreeNode currMenu = menuList.get(i);
                String upperValue = currMenu.getUpperid();
                if (StringUtils.isBlank(upperValue)) {
                   continue;
                }
                for (int j = 0; j < menuList.size(); j++) {
                    // Find the superior from the traversal
                    try {
                        MenuTreeNode upperMenu = menuList.get(j);
                        String baseValue = upperMenu.getCom_menu_id();
                        if (baseValue.equals(upperValue)) {
                            // Find the parent and add it to the parent's Childrens
                            if (null == upperMenu.getChildren()) {
                                upperMenu.setChildren(new ArrayList<>());
                            }
                            upperMenu.getChildren().add(currMenu);
                            // Save the rows to be removed from menuList, which will be removed uniformly later
                            removeMenus.add(currMenu);
                            break; }}catch(Exception e) { log.error(e.getMessage(), e); }}}catch (Exception e1) {
                log.error(e1.getMessage(), e1);
            }
        }
        menuList.removeAll(removeMenus);
        return menuList;
    }
Copy the code

Well, this time to share here first, next time for you to introduce the recursive implementation of the tree structure and the implementation of the front-end code.