初学Web端开发，今天是第一次将所学做随笔记录，肯定存在多处欠妥，望大家海涵；若有不足，望大家批评指正。
进实验室后分配到的第一个项目，需要制作一个不确定层级树形菜单的数据接口，对于从来没实战编过程的我，存在太多需要学习的地方。
开发环境：Atom;
语言：javascript;
其他：nodejs;mysql;express;
输入：通过sql语句转换出的一个个JSON对象，如：其中id为唯一编号，parent为其父级的id号。
[
{
"id": 1,
"name": "111",
"parent": null,
"icon": "555,,"
},
{
"id": 2,
"name": "极地测试菜单2",
"parent": 1,
"icon": "/img/002.png"
},
{
"id": 4,
"name": "555",
"parent": 2,
"icon": "88"
},
{
"id": 5,
"name": "ddd",
"parent": 2,
"icon": "555.png"
},
{
"id": 6,
"name": "666",
"parent": 4,
"icon": null
},
{
"id": 7,
"name": "777",
"parent": 5,
"icon": null
},
{
"id": 9,
"name": "8888",
"parent": 1,
"icon": null
},
{
"id": 10,
"name": "9999",
"parent": 9,
"icon": null
},
{
"id": 11,
"name": "10000",
"parent": 1,
"icon": null
}
]
输出：树状JSON结构
{
"id": 1,
"name": "111",
"parent": null,
"icon": "555,,",
"sub": [
{
"id": 2,
"name": "极地测试菜单2",
"parent": 1,
"icon": "/img/002.png",
"sub": [
{
"id": 4,
"name": "555",
"parent": 2,
"icon": "88",
"sub": [
{
"id": 6,
"name": "666",
"parent": 4,
"icon": null,
"sub": []
}
]
},
{
"id": 5,
"name": "ddd",
"parent": 2,
"icon": "555.png",
"sub": [
{
"id": 7,
"name": "777",
"parent": 5,
"icon": null,
"sub": []
}
]
}
]
},
{
"id": 9,
"name": "8888",
"parent": 1,
"icon": null,
"sub": [
{
"id": 10,
"name": "9999",
"parent": 9,
"icon": null,
"sub": []
}
]
},
{
"id": 11,
"name": "10000",
"parent": 1,
"icon": null,
"sub": []
}
]
}
即将从mysql中取出的一条一条JSON数据，按照parent所指向的id号，转变为树桩JSON结构，供AngularJS框架自动生成树桩菜单。
示例图：
变量声明：allMenu为初始输入的JSON数据格式，即包含一条一条JSON对象的数组。
对象的sub属性放置当前对象的所有子节点数组。
思想：利用递归/循环进行树的层级遍历。
比如输入一个根节点对象，首先应对allMenu遍历寻找parent为根节点id的所有对象（方法命名为findItemChild），并将其置入一个临时数组childlist中。然后对该childlist进行遍历，对其中每一个对象利用递归方法，返回该对象的childList并添加进当前对象的sub中，往复递归。举个例子：即当方法输入id=1的对象后，findItemChild方法通过遍历会返回一个数组[{id:2,parent:1,...},{id:9,parent:1,...},{id:11,parent:1,...}]，之后对该数组进行遍历，即将id=2的对象递归输入方法，并将获取的childlist遍历继续递归。。。。即树的层级遍历。
算法：
输入：JSON对象item
function getAllChild(res){
①获取所有父级为根节点id的子对象数组childlist
②若childlist为空，则返回[]
③若childlist不为空，遍历childlist，并对每一个childlist[k]递归调用getAllChild(childlist[k])赋予childlist[k].sub
④将childlist输入res.sub
⑤返回childlist
}
输出：以对象item为根节点的树状JSON对象
代码：
router.get('/:id', function(req, res, next) {
pool.getConnection(function(err, connection) {
if (err) return next(err);
connection.query('SELECT * from menuitems ', function(err, rows, fields) {
if (err) throw err;
//get all data
var result = [];//存放起始对象
var allMenu = rows;//获取sql出的全部json对象
for(i=0;i<allMenu.length;i++){
if(allMenu[i].id == req.params.id){
result.push(allMenu[i]) ;//根据id号获取根对象
break;
}
}
//judege result exist or not
if(result.length==0){
return res.json('Failed! id is not exist!');
}else{
result.sub=[];
result.sub=getAllChild(result);//调用
res.json(result[0]);
}
//find some item all child
function findItemChild(item){
var arrayList=[];
for(var i in allMenu){
if(allMenu[i].parent == item.id){
arrayList.push(allMenu[i]);
}
}
return arrayList;
}
//get all child
function getAllChild(array){
var childList=findItemChild(array[0]);
if(childList == null){
return [];
}
else{
for(var j in childList){
childList[j].sub=[];
childList[j].sub=getAllChild([childList[j]]);
}
array[0].sub=childList;
}
return childList;
}
});
});
});
代码执行过程：
getAllChild([id=1])
childlist=[{id:2,parent:1,...},{id:9,parent:1,...},{id:11,parent:1,...}];
for(id=2 id=9 id=11)
↓
childlist[id=2].sub=?
↓
getAllChild([id=2]);
childlist=[{id:4,parent:2,...},{id:5,parent:2,...}];
for（id=4 id=5）
↓
childlist[id=4].sub=?
↓
getAllChild([id=4]);
childlist=[{id:6,parent:4,...}];
for（id=6）
↓
childlist[id=6].sub=?
↓
getAllChild([id=6]),return [];//到底，依次往上返回，将childlist逐步扩充，直到最终返回allchild；
扩充：返回所有树状菜单，即寻找所有JSON数据构成的森林。思想是通过给森林构造一个根节点转换为树，再利用上述方法实现。
router.get('/', function(req, res, next) {
pool.getConnection(function(err, connection) {
if (err) return next(err);
connection.query('SELECT * from menuitems ', function(err, rows, fields) {
if (err) throw err;
//get all data
//create a id= null root for forest
var temp_parent={"id":null,"sub":[]};//新建id为null的对象做为森林的根
var result=[];
var allMenu = rows;
result.push(temp_parent) ;
var output = getAllChild(result);
if(output.length==0){
//if our database do note have any data
return res.json('Failed! do not have any data!');
}else {
res.json(output);
}
//find some item all child //方便阅读依然放上此方法
function findItemChild(item){
var arrayList=[];
for(var i in allMenu){
if(allMenu[i].parent == item.id){
arrayList.push(allMenu[i]);
}
}
return arrayList;
}
//get all child //方便阅读依然放上此方法
function getAllChild(array){
var childList=findItemChild(array[0]);
if(childList == null){
return [];
}
else{
for(var j in childList){
childList[j].sub=[];
childList[j].sub=getAllChild([childList[j]]);
}
array[0].sub=childList;
}
return childList;
}
});
});
});
总结：通过javascript语言利用NodeJS结合mysql可以实现从后台拿到JSON数据后，将数据构造成树状结构的形式供前端使用。这种Javascript全栈开发方式还有很多需要学习。未来的路还很长，加油！
递归的写法需要时常琢磨寻找好的返回方式，在本文的思想下，递归方法的输入与返回的形式应统一，防止程序陷入死循环或不可执行，实在无法下手时应该通过画流程图的形式判断递归的有效性。递归在树层级比较深时肯定会耗费大量计算时间，因此之后通过学习寻找更好的解决方法。
tips:由于本人菜鸟一枚，所述拙见仅供自己学习总结，第一次写博客~若对您造成错误影响请批评指正。