递归方式获取动态菜单

之前写了几次动态树形结构，因为不太懂递归写法，所以，实现起来特别麻烦，当时最多手动写了4层for循环，代码冗余不说，而且出错很难排查。
最近有机会又写了一次动态菜单的数据获取，前端使用的是vue+elementUI，里面的结构就是标准的可以递归的json数据。后端使用的是ssm，因为mybatis可以嵌套调用，结果集可以封装到javaBean中，所以，这次很容易的就实现了递归获取菜单的功能。
个人觉得重要的是需要定义一个好的javaBean。

具体步骤如下：

1.定义一个实体类Menu
菜单实体类Menu如下：

public class Menu implements Serializable{
    private Integer id;
    private String name; // 菜单名称
    private String linkUrl; // 访问路径
    private String path;//菜单项所对应的路径
    private Integer priority; // 优先级（用于排序）
    private String description; // 描述
    private String icon;//图标
    private String level;//级别
    private Set<Role> roles = new HashSet<Role>(0);//角色集合
    private List<Menu> children = new ArrayList<>();//子菜单集合
    private Integer parentMenuId;//父菜单id
    // get和set略。。。
    }

2.mybatis注解方式编写相关语句，并返回：（当然xml配置方式也是一样的）
本人为了简洁写的select *，工作中一定要写具体列名。
如果只是为了获取动态菜单，第一个方法可以去掉，但是@Results需要保留。

public interface MenuDao {
    //菜单管理页，展示菜单以及子菜单。
    // 根据查询条件动态获取一级菜单，再根据结果集中的id，动态查询到子菜单放入children中。
    // 因为是自关联，所以子菜单中的返回结果集可以共用父菜单中的结果集
    @Select("")
    @Results(id = "results",value = {
            @Result(id = true,column = "id",property = "id"),
            @Result(column = "id",property = "children",
            many = @Many(select = "com.jesse.dao.MenuDao.findByParentId")
            )
    })
    Page<Menu> findByCondition(@Param("queryString") String queryString);

    //根据传过来的id，自动获取相关子菜单中的相关数据。
    @Select("select * from t_menu where parentMenuId = #{id} order by priority asc")
    @ResultMap("results")
    List<Menu> findByParentId(Integer id);

    //左侧菜单展示，根据用户名动态查询菜单
    @Select("select m.* from t_menu m ,t_role_menu rm ,t_user_role ur,t_user u " +
            "where u.id = ur.user_id and ur.role_id = rm.role_id and rm.menu_id = m.id " +
            "and u.username = #{username} and level = 1 order by priority")
    @ResultMap("results")
    List<Menu> getMenuList(String username);
}

这样，递归获取数据就写完了，然后只需要将数据返回给前端，前端接收到数据，填充到页面中即可。

以下代码为前端实现部分，如果只是后端实现，可以不看。

前端中左侧根据用户以及角色获取动态菜单部分 代码如下：

  <el-container>
                <el-aside width="200px">
                    <el-menu>
                        <el-submenu v-for="menu in menuList" :index="menu.path">
                            <template slot="title">
                                <i class="fa" :class="menu.icon">i>
                                {{menu.name}}
                            template>
                            <template v-for="child in menu.children">
                                <el-menu-item :index="child.path">
                                    <a :href="child.linkUrl" target="right">{{child.name}}a>
                                el-menu-item>
                            template>
                        el-submenu>
                    el-menu>
                el-aside>
                <el-container>
                    <iframe name="right" class="el-main" src="index.html" width="100%" height="700px" frameborder="0">iframe>
                el-container>
            el-container>

2.菜单页面，树形数据与懒加载部分：

      <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row
                        row-key="id"   border
                              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                        <el-table-column  prop="name" label="菜单名称" >el-table-column>
                        <el-table-column prop="linkUrl" label="访问路径">el-table-column>
                        <el-table-column prop="path" label="路径级别">el-table-column>
                        <el-table-column prop="parentMenuId" label="自关联Id">el-table-column>
                        <el-table-column prop="level" label="菜单级别">el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除el-button>
                            template>
                        el-table-column>
                    el-table>