spring boot二极循环案例，导航下拉

平时看网页都会有导航栏，导航内容从数据库里提出的，常见的这种子导航，现在实现它

思路：
1.数据库建表 类似如下表
2.在控制器分别储存父级和子级 返回
3.在html页面 两层v-for循环输出

控制器 代码：

//无限极
	@RequestMapping("wj")
	@ResponseBody
	public List<Map<String, Object>> menu(){
		//SELECT * FROM daohang WHERE fid=0 ORDER BY pai asc
		List<Map<String, Object>> menuData=qTdaohangService.men();//先取出fid为0 的
		List<Map<String, Object>> Data=new ArrayList<Map<String,Object>>();
		for (int i = 0; i < menuData.size(); i++) {
			//定义父级 集合
			Map<String, Object> mpsheng=new HashMap<>();//定义省
			//存入 名+值
			mpsheng.put("inde",menuData.get(i).get("inde"));//取出省
			mpsheng.put("href", menuData.get(i).get("hreff"));//取出地址
			//select * from daohang where fid=?1 ORDER BY pai asc
			//查询fid对应的did
			List<Map<String, Object>> subData=qTdaohangService.men2((int)menuData.get(i).get("did"));
			List<Map<String, Object>> city=new ArrayList<Map<String,Object>>();
			for (int j = 0; j < subData.size(); j++) {
				//定义子集 集合
				Map<String, Object> mp=new HashedMap();//定义地级市
				mp.put("name", subData.get(j).get("inde"));
				mp.put("href", subData.get(j).get("hreff"));
				city.add(mp);
			}
			mpsheng.put("cityList", city);
			Data.add(mpsheng);
		}
		return Data;
	}

html 代码：

<li class="fl" v-for="arr in arrin">
     <a>{{arr.inde}}</a> <!--导航 -->
     	<div class="nav-news" ><!--子导航 -->
           <a :href="arr2.href" v-for="arr2 in arr.cityList">{{arr2.name</a>
 		</div>  
</li>

vue 代码:
data里面定义 arrin：[] 第二次v-for循环 不用定义

check2:function(){
	$.post("/qt/wj",{},function(data){
		var len=data.length;
		for(var i=0;i<len;i++)
			vm.arrin.push(data[i]);
		alert(JSON.stringify(data));
	})
},