利用nodejs讀取資料庫數據生成樹結構的json數據

来源:https://www.cnblogs.com/Immortal-brother/archive/2018/01/23/8336572.html
-Advertisement-
Play Games

在做後臺管理界面的時候,幾乎少不了的一個結構就是樹形結構,用來做菜單導航; 那麼,最希望的就是樹結構的所有數據都是讀取的資料庫,而不是直接代碼當中寫死,那我們就一步一步來看: 一,建表 欄位通常包括: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);

 

自己是這麼做的,有問題或者不足的地方,希望各位大牛指正!
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • classList屬性的方法:add();remove();toggle(); 描述,在一些頁面我們需要使用兩個按鈕來回切換,如圖: 我們要使用到add()和remove()方法 html部分: <div class="login-title"> <a href="javascript:void(0 ...
  • 2017年npm上最熱門的項目之一——Pkg,可以直接將node.js項目打包成windows可以直接執行的exe文件(也支持FreeBSD、linux、macos、arm系統),並且無須修改你項目中的任何代碼。本文對該項目作了簡要說明與教程,並提供了一個簡單示例來說明其使用場景。 ...
  • CreateJS介紹請看CreateJS中文網或者官方網站 一.使用EaselJS 先到官網下載easeljs,也可以點這裡 1.得到easeljs-0.8.1.min.js後,新建一個HTML5文件並導入: 2.入口函數和創建canvas標簽: 3.創建舞臺: 二.使用EaselJS創建圖形和文字 ...
  • css代碼: html代碼: JS調用: ...
  • jquery的綠色拖動驗證功能 在網上看到了一個這樣的問題:那種像拖動滑塊匹配圖形的驗證方式是怎麼實現的?。 突然想到實現一個簡單綠色拖動驗證碼的功能,在網上搜了下,有一個用jquery實現的該功能代碼。 體驗地址:http://yanshi.sucaihuo.com/jquery/8/897/de ...
  • 最近在做的一個後臺管理系統,發現一個bug: 問題描述:如果其他列表項都用類為col-xs-12的div包裹,而引入UEditor的部分不用類為col-xs-12的div包裹,那麼其他列表項將無法顯示,UEditor編輯框也顯示不完全; 解決辦法:將引入UEditor的部分也用類為col-xs-12 ...
  • Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。 在 Vue 之後引入 vuex 會進行自動安裝: 可以通過 https://unpkg.com/[email protected] 這樣的方式指定特定的版本 ...
  • 其實json格式化沒想象中的那麼複雜,難點就是json格式化的工作流程。 正好工作上需要,於是就搞了一套json格式化+json著色的方法,原生的方法,可以直接使用。json數據格式化前後對比圖,如下: 下麵是源碼,可以根據個人需求適當修改: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...