在做後臺管理界面的時候,幾乎少不了的一個結構就是樹形結構,用來做菜單導航; 那麼,最希望的就是樹結構的所有數據都是讀取的資料庫,而不是直接代碼當中寫死,那我們就一步一步來看: 一,建表 欄位通常包括:id,text,url,pid 二,使用nodeJS連接資料庫 三,讀取數據 四,把讀過來的數據轉成 ...
在做後臺管理界面的時候,幾乎少不了的一個結構就是樹形結構,用來做菜單導航;
那麼,最希望的就是樹結構的所有數據都是讀取的資料庫,而不是直接代碼當中寫死,那我們就一步一步來看:
一,建表
欄位通常包括:id,text,url,pid
id | text | url | pid |
1 | a | 0 | |
2 | b | test.html | 1 |
二,使用nodeJS連接資料庫
const mysql = require('mysql'); //註入MySQL模塊 const connection = mysql.createConnection({ //連接資料庫的信息 host:'', //資料庫的地址,如:localhost user:'', //登錄名 預設root password:'', //登錄密碼 database:'' //資料庫名字 });
connection.connect(); //創建連接
三,讀取數據
connection.query('SELECT*FROM 表名',function(err,rows){}); //rows為讀過來的數據
四,把讀過來的數據轉成樹結構的json數據
//舉例讀取的數據為list的數據
var list = [{"id":1,"user":"a","pid":0},{"id":2,"user":"b","pid":1},{"id":3,"user":"c","pid":0},{"id":4,"user":"d","pid":3}]; var rJson = [];
//將所有的pid的數據加到對應的id數據對象裡面去,需要添加一個屬性children for(var i=0;i<list.length;i++){ var arr = []; for(var j=0;j<list.length;j++){ if(list[i].id == list[j].pid){ list[i].children = arr; arr.push(list[j]); } } } for(var i=0;i<list.length;i++){ if(list[i].pid == 0){ rJson.push(list[i]); } } console.info(rJson);
自己是這麼做的,有問題或者不足的地方,希望各位大牛指正!