springboot 实现二级菜单

水深无声 2023-05-30 06:15 17阅读 0赞

效果图

![20191107203646482.png][]

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

dao层

@Query(value = "select * from nav where fid=0 order by sorts asc",nativeQuery = true)
    	List<Map<String,Object>> findMaps();
    	
    	@Query(value = "select * from nav where fid=:fid order by sorts asc",nativeQuery = true)
    	List<Map<String,Object>> findMapsWhere(Integer fid);

service层

/**
    	 * findMaps
    	 * @return 
    	 */
    	public List<Map<String, Object>> findMaps() {
    		return navDao.findMaps();
    	}
    	/**
    	 * @return 
    	 * 
    	 */
    	public List<Map<String, Object>> findMapsWhere(Integer fid) {
    		return navDao.findMapsWhere(fid);
    	}

**controller层**

**在这边主要是先进行查处一级菜单的类集**

**然后定义一个存放空数据的类集**

**然后去循环查出来的那个类集在这个循环里面定义好一个一级菜单的空类集**

**去给这个类集存放名字和地址这两个属性**

**然后去通过id去查出来一级菜单对应的每个二级菜单**

**然后去循环二级菜单，循环方法如一级菜单一样**

**定义空的类集存放数据添加到类集**

## **是先添加到for循环中的一级菜单的空数据，然后在for循环的结束的时候回分好类** ##

## **最终都添加到空数据类集中！** ##

@RequestMapping("findAll2")
    	@ResponseBody
    	public List<Map<String, Object>> findAll2() {
    		List<Map<String,Object>> listData = navService.findMaps();//查出一级菜单的类集
    		List<Map<String,Object>> Data = new ArrayList<Map<String,Object>>();//定义好存放数据的类集
    		for (int i = 0; i < listData.size(); i++) {
    			Map<String,Object> mpMenu = new HashMap<String, Object>();//定义一级菜单
    			mpMenu.put("nname", listData.get(i).get("nname"));//给一级菜单添加名字
    			mpMenu.put("href", listData.get(i).get("href"));//给一级菜单添加地址
    			List<Map<String,Object>> twoData = navService.findMapsWhere((Integer) listData.get(i).get("navid"));//查出一级菜单地下的二级菜单
    			List<Map<String,Object>> two = new ArrayList<Map<String,Object>>();//定义二级菜单
    			for (int j = 0; j < twoData.size(); j++) {
    				Map<String,Object> mp = new HashMap<String, Object>();//定义二级菜单存放
    				mp.put("nname",twoData.get(j).get("nname"));//给二级菜单添加名字
    				mp.put("href",twoData.get(j).get("href"));//给二级菜单添加地址
    				two.add(mp);//添加到大的二级菜单中
    			}
    			mpMenu.put("twoData", two);//给二级菜单起名字添加到类集中
    			Data.add(mpMenu);
    		}
    		return Data;
    	}

vue部分

<Script>
    	var vm = new Vue({
    		el:"#app",
    		data:{
    			nav:[],
    		},
    		mounted(){
    			this.show();
    		},
    		methods:{
    			show:function(){
    				$.post("/nav/findAll2",{},function(data){
    					//alert(JSON.stringify(data));
    					var len = data.length;
    					for(var i=0; i< len; i++){
    						vm.nav.push(data[i]);
    					}
    					alert(JSON.stringify(vm.nav));
    					
    				});
    			}
    		},
    	});
    </Script>

html部分

<li class="fl" v-for="nav in nav">
                                <span class="xinwenzixun"></span> 
                                <a href="/system/45.html">{
       {nav.nname}}</a> 
                                <div class="nav-news">
                                    <a href="" v-for="two in nav.twoData">{
       {two.nname}}</a>
                                </div>                           
    </li>

最后的数据库

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70][]

![20191107203209707.png][]

[20191107203646482.png]: https://img-blog.csdnimg.cn/20191107203646482.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191107203158193.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0,size_16,color_FFFFFF,t_70
[20191107203209707.png]: https://img-blog.csdnimg.cn/20191107203209707.png