Spring Boot + Vue实现二级菜单

从数据读取二级菜单减少了前太代码的改动，更方便回护人员维护

首先DAO层：

这里DAO层的方法分两步，一是先查询出一级菜单，然后根据一级菜单的id查询出一级菜单所对应的的子菜单，这样思路就更清晰了。

	//查询一级菜单
	@Query(value = "SELECT * FROM lead WHERE fid=0",nativeQuery = true)
	List<Map<String, Object>> findByFid();
	//按一级菜单id查询一级菜单下的子菜单
	@Query(value = "SELECT * FROM lead WHERE fid=:fid",nativeQuery = true)
	List<Map<String, Object>> findByFidList(Integer fid);
	

Service层：

	public List<Map<String, Object>> findByFid(){
		return leadDAO.findByFid();//调用DAO层findByFid方法
	}
	
	public List<Map<String, Object>> findByFidList(Integer fid){
		return leadDAO.findByFidList(fid);//调用DAO层findByFidList方法
	}

Controller层：

这里利用两次循环，将查询结果放到集合里面
第一层for循环，调用findByFid方法，查询出第一层菜单的id，赋给findByFidList方法，查询出所对应的子菜单，然后用第二层for循环赋值到集合里，

@RequestMapping("findByFid")
	@ResponseBody
	public List<Map<String, Object>> findBy(){
		//return leadService.findByFid();
		List<Map<String, Object>> leadData = leadService.findByFid();
		List<Map<String, Object>> dataList =new ArrayList<Map<String,Object>>();
		for (int i = 0; i < leadData.size(); i++) {
			Map<String, Object> one = new  HashMap<>();
			one.put("lname", leadData.get(i).get("lname"));
			one.put("lhref",leadData.get(i).get("lhref"));
			List<Map<String, Object>> thisLead=leadService.findByFidList(Integer.parseInt(leadData.get(i).get("lid").toString()));
			List<Map<String, Object>> date = new ArrayList<Map<String,Object>>();
			for (int j = 0; j < thisLead.size(); j++) {
				Map<String, Object> mp = new HashMap<String, Object>();
				mp.put("name", thisLead.get(j).get("lname"));
				mp.put("lhref",thisLead.get(j).get("lhref"));
				date.add(mp);
			}
			one.put("dataList", date);
			dataList.add(one);
		}
		return dataList;
	}

这里要注意，findByFidList（）方法，里面传值传的是第一层菜单的id，而不是第一层菜单的fid，因为在数据库里子菜单的fid字段是对应着第一层菜单的id的

数据库：

html代码：
因为集合维度高于二维，所以这里循环的时候也要用双层for循环才可以

<li class="fl" v-for="lists in list">
	<span class="shouye"></span>
	<a v-bind:href="lists.lhref" class="action">{{lists.lname}}</a>
	<div class="nav-news">
		<a v-bind:href="son.lhref" v-for="son in lists.dataList">{{son.name}}</a>
	</div>     
</li>

vue:

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

效果：