據(jù)結(jié)構(gòu)到遞歸渲染的完整實現(xiàn))
簡介這份ASP三級菜單源碼面向需要構(gòu)建多層級網(wǎng)站導航的Web開發(fā)者尤其適合電子商務類站點處理復雜產(chǎn)品分類場景可作為動態(tài)菜單生成與樣式交互的參考實現(xiàn)。壓縮包為rar格式整體約1.81MB內(nèi)含示例頁面、說明文檔與主源碼等文件涵蓋HTML頁面、文本說明及ASP程序等類型分別用于演示菜單效果、提供使用聲明與幫助入口以及承載三級菜單的核心服務端邏輯。目前已有192人學習下載可供對照參考。源碼結(jié)合HTML無序列表、CSS布局與JavaScript展開折疊效果并由ASP根據(jù)數(shù)據(jù)動態(tài)生成菜單項讀者可據(jù)此理解菜單結(jié)構(gòu)與頁面內(nèi)容的對應關(guān)系并在此基礎上按自身設計風格修改定制同時留意瀏覽器兼容、請求性能與搜索引擎抓取等實際問題。1. 從一份 ASP 三級菜單源碼說起老項目里最容易被低估的導航組件接手一套十幾年前的老后臺最先崩掉的往往不是業(yè)務邏輯而是導航。左側(cè)菜單點開二級、再點開三級刷新一下全收起來了用戶罵罵咧咧地重新找位置——這種場景在維護老系統(tǒng)時幾乎每周都遇到。這次拆的是一份 ASP 三級菜單源碼純 Classic ASP 實現(xiàn)不依賴任何前端框架靠服務端拼 HTML 加少量 JavaScript 控制展開收起數(shù)據(jù)來源可以是數(shù)據(jù)庫表也可以是配置文件里的靜態(tài)數(shù)組。它解決的就是「多層級導航在無框架環(huán)境下怎么穩(wěn)定展開、怎么記住當前選中項」這個具體問題。適合誰還在維護 ASP 老站點的開發(fā)者、需要給遺留系統(tǒng)補導航的運維、以及想搞明白無框架時代菜單邏輯的人。asp源碼這類資源網(wǎng)上不少但能直接跑通、結(jié)構(gòu)清晰的不多這份算一個。2. 三級菜單的數(shù)據(jù)結(jié)構(gòu)從扁平表到樹形渲染的完整鏈路2.1 為什么菜單數(shù)據(jù)要存成「父 ID 層級」而不是嵌套數(shù)組先看數(shù)據(jù)層。三級菜單的本質(zhì)是一棵樹但存進數(shù)據(jù)庫時幾乎沒人真去存嵌套結(jié)構(gòu)常見做法是一張扁平表每行一個菜單項用 ParentID 指向上級再用一個 SortOrder 控制同級順序。這份源碼走的就是這條路表結(jié)構(gòu)大致是 MenuID、ParentName、MenuName、MenuUrl、ParentID、MenuLevel 這么幾個字段。為什么不直接在 ASP 里寫死嵌套數(shù)組因為菜單要能后臺維護運營改個名字、加個子項總不能每次都改代碼。扁平表轉(zhuǎn)樹形渲染核心是「一次查詢、內(nèi)存分組」。ASP 里沒有現(xiàn)成的 groupBy我一般會先把整表讀進一個二維數(shù)組或 Dictionary按 ParentID 分桶然后從根節(jié)點遞歸往下拼。這份源碼用的是 Dictionary 嵌套 Dictionary 的寫法好處是查找 O(1)壞處是 Classic ASP 的 Dictionary 不支持直接存對象引用得靠字符串鍵拼路徑。下面這段是數(shù)據(jù)讀取和分桶的核心邏輯我按源碼結(jié)構(gòu)整理成了可直接對照的版本% 讀取全部菜單按 ParentID 分桶 Dim conn, rs, menuDict, sql Set menuDict Server.CreateObject(Scripting.Dictionary) sql SELECT MenuID, MenuName, MenuUrl, ParentID, MenuLevel, SortOrder _ FROM Sys_Menu ORDER BY ParentID, SortOrder Set conn Server.CreateObject(ADODB.Connection) conn.Open Application(ConnStr) Set rs conn.Execute(sql) Do While Not rs.EOF Dim pid, item pid Trim(rs(ParentID) ) If Not menuDict.Exists(pid) Then menuDict.Add pid, Server.CreateObject(Scripting.Dictionary) End If 用 MenuID 做二級鍵值為 名稱|鏈接|層級 的拼接串 menuDict(pid).Add CStr(rs(MenuID)), _ rs(MenuName) | rs(MenuUrl) | rs(MenuLevel) rs.MoveNext Loop rs.Close : conn.Close Set rs Nothing : Set conn Nothing %邏輯說明外層 Dictionary 的鍵是 ParentID內(nèi)層鍵是 MenuID值用豎線拼成字符串。這么寫是因為 Classic ASP 的 Dictionary 存不了 Recordset 行對象只能降級成字符串。參數(shù)上要注意兩點ParentID 為 0 或空串代表根節(jié)點源碼里統(tǒng)一用 0 做根鍵SortOrder 必須在 SQL 里排好ASP 端不再二次排序否則同級順序會亂。層級字段 MenuLevel 其實可以不要靠遞歸深度就能算出來但保留它有個好處——渲染時可以直接按層級套不同的 CSS class省一次判斷。2.2 遞歸渲染函數(shù)三個參數(shù)決定菜單長什么樣數(shù)據(jù)分好桶接下來是渲染。源碼里有一個 RenderMenu 函數(shù)接收父 ID、當前層級、當前選中 ID 三個參數(shù)遞歸調(diào)用自己。這三個參數(shù)就是整個菜單的「控制面板」父 ID 決定從哪一層開始拼當前層級控制縮進和樣式選中 ID 負責給當前頁面對應的菜單項加高亮。很多人改菜單改崩就是沒搞清這三個參數(shù)誰管什么。% Sub RenderMenu(parentId, level, currentId) If Not menuDict.Exists(parentId) Then Exit Sub Dim key, parts, mid, name, url, cls Response.Write ul classmenu-lv level For Each key In menuDict(parentId).Keys parts Split(menuDict(parentId)(key), |) mid key : name parts(0) : url parts(1) cls If mid currentId Then cls classactive Response.Write li cls Response.Write a href url name /a 有子項才繼續(xù)遞歸層級上限 3 If menuDict.Exists(mid) And level 3 Then RenderMenu mid, level 1, currentId End If Response.Write /li Next Response.Write /ul End Sub %邏輯說明level 3是硬上限防止數(shù)據(jù)里出現(xiàn)環(huán)導致無限遞歸——這是血淚經(jīng)驗老系統(tǒng)里 ParentID 指回自己的臟數(shù)據(jù)太常見了。currentId 從 Request.QueryString 或 Session 里取源碼默認用 QueryString 的 menuid 參數(shù)。參數(shù)怎么改想把三級擴成四級把 3 改成 4 即可但 CSS 的.menu-lv4得同步補上想默認全部展開就在ul上加內(nèi)聯(lián) style 或者去掉 JS 的折疊邏輯。注意For Each key In menuDict(parentId).Keys這里遍歷的是內(nèi)層 Dictionary 的鍵順序取決于插入順序所以 SQL 的 ORDER BY 不能省。2.3 前端折疊與選中態(tài)保持二十行 JS 解決刷新丟狀態(tài)服務端渲染完菜單默認是全部展開的三級菜單全攤開頁面會很長所以源碼配了一小段 JS 做折疊。這段 JS 不依賴 jQuery純 DOM 操作核心是給每個帶子菜單的li綁定點擊事件切換子ul的 display。真正容易翻車的是「刷新后選中態(tài)丟失」——用戶點進三級頁面F5 一下菜單全收起來當前項也找不到了。// 折疊控制 選中項自動展開 document.addEventListener(DOMContentLoaded, function () { var items document.querySelectorAll(.menu-lv1 li, .menu-lv2 li); items.forEach(function (li) { var sub li.querySelector(ul); if (!sub) return; // 點擊父項文字切換展開點擊鏈接本身不攔截 li.querySelector(a).addEventListener(click, function (e) { if (this.getAttribute(href) # || !this.getAttribute(href)) { e.preventDefault(); sub.style.display sub.style.display none ? block : none; } }); }); // 選中項的所有祖先 ul 強制展開 var active document.querySelector(li.active); if (active) { var p active.parentElement; while (p p ! document.body) { if (p.tagName UL) p.style.display block; p p.parentElement; } } });邏輯說明第一段遍歷所有可能帶子菜單的 li只在 href 為空或#時才攔截點擊做折疊避免把正常跳轉(zhuǎn)吃掉——這是最常見的誤用很多人直接e.preventDefault()導致菜單點不動。第二段從.active往上爬把沿途所有 ul 的 display 設為 block保證刷新后當前路徑可見。參數(shù)上.menu-lv1、.menu-lv2這兩個選擇器要和 RenderMenu 輸出的 class 嚴格對應改層級時兩邊一起改。這段 JS 放在/body前或 DOMContentLoaded 里都行源碼是后者。3. 把源碼跑起來IIS 配置、數(shù)據(jù)庫對接與靜態(tài)模式改造3.1 本地 IIS 跑通 Classic ASP 的四個必改項拿到 asp源碼 第一件事不是讀代碼是讓它先跑起來。Classic ASP 在現(xiàn)代 Windows 上默認是關(guān)的IIS 里要手動開。我一般按這個順序走控制面板啟用「Internet Information Services」和「ASP」兩個功能IIS 管理器里把站點物理路徑指到源碼目錄應用程序池的「托管管道模式」設為「經(jīng)典」或「集成」都行但 32 位應用要開「啟用 32 位應用程序」最后在 ASP 配置里把「啟用父路徑」打開因為老代碼里!--#include file../conn.asp--這種相對路徑很常見。# 以管理員身份在 PowerShell 里快速檢查 ASP 功能是否已裝 Get-WindowsOptionalFeature -Online -FeatureName IIS-ASP # 若 State 為 Disabled用下面這條啟用需重啟 Enable-WindowsOptionalFeature -Online -FeatureName IIS-ASP -All命令說明第一條只查狀態(tài)不改動第二條才真正安裝。裝完 IIS 要重啟W3SVC服務。常見翻車點是 64 位系統(tǒng)上老組件比如某些 Access 驅(qū)動只有 32 位版本應用池沒開 32 位就會報「未找到提供程序」。數(shù)據(jù)庫連接串在conn.asp里源碼默認給的是 SQL Server 的 OLE DB 寫法換成 Access 的話改成ProviderMicrosoft.Jet.OLEDB.4.0;Data Source...注意 Jet 引擎只認 32 位。3.2 數(shù)據(jù)庫表建好之后菜單不顯示先查這三處表建完、數(shù)據(jù)插進去頁面一片空白是最高頻的問題。按我的排查順序先看menuDict.Exists(0)成不成立也就是根節(jié)點的 ParentID 到底存的是 0、空串還是 NULL——源碼按 0 匹配數(shù)據(jù)庫里存 NULL 就永遠進不去根桶。再看 SQL 有沒有被ORDER BY ParentID, SortOrder之外的字段干擾SortOrder 有重復會導致同級順序隨機。最后看 Response 有沒有被前面的 include 文件提前Response.End掉。現(xiàn)象優(yōu)先檢查典型原因整棵菜單空白根節(jié)點 ParentID 值存了 NULL 或空串與 0 不匹配只有一級沒有二三級內(nèi)層 Dictionary 鍵類型MenuID 數(shù)字與字符串鍵混用同級順序亂SortOrder 唯一性排序字段重復或未排序中文亂碼文件編碼與 Response.Charset文件存成 UTF-8 但頁面聲明 GB2312表格里最后一條值得單獨說Classic ASP 對 UTF-8 支持很別扭源碼文件如果是 UTF-8 無 BOM中文菜單名會變問號。穩(wěn)妥做法是文件存成 ANSI/GB2312頁面頂部% CodePage936 LanguageVBScript %Response.Charset 設gb2312三處編碼一致才不會翻車。3.3 沒有數(shù)據(jù)庫也能用靜態(tài)數(shù)組模式改造很多人的場景根本不需要后臺維護菜單就是幾個固定頁面。這時候把數(shù)據(jù)庫那層抽掉直接用一個靜態(tài)二維數(shù)組喂給 RenderMenu 更省事。改造點只有一處把menuDict的構(gòu)建從 Recordset 循環(huán)換成手寫 Add。% 靜態(tài)模式id, 名稱, 鏈接, 父id Dim staticData, i, arr staticData Array( _ Array(1, 系統(tǒng)管理, #, 0), _ Array(11, 用戶管理, user_list.asp, 1), _ Array(111, 用戶列表, user_list.asp, 11), _ Array(112, 角色分配, role_assign.asp, 11), _ Array(2, 內(nèi)容管理, #, 0) _ ) For i 0 To UBound(staticData) arr staticData(i) If Not menuDict.Exists(arr(3)) Then menuDict.Add arr(3), Server.CreateObject(Scripting.Dictionary) End If menuDict(arr(3)).Add arr(0), arr(1) | arr(2) |1 Next %邏輯說明數(shù)組每行四個元素順序是 ID、名稱、鏈接、父 ID和數(shù)據(jù)庫字段一一對應改菜單就是改這個數(shù)組不用碰渲染邏輯。參數(shù)上注意父 ID 必須出現(xiàn)在子項之前因為分桶是順序執(zhí)行的父桶不存在時menuDict(arr(3))會報錯——源碼里加了 Exists 判斷兜底。這種靜態(tài)模式適合菜單不超過三四十項的場景再多就該回到數(shù)據(jù)庫了。4. 避坑與排查這份源碼最容易翻車的五個地方4.1 遞歸沒有出口IIS 直接 500 并拖垮應用池現(xiàn)象頁面轉(zhuǎn)圈十幾秒后報「Active Server Pages 錯誤 0115」應用池重啟。原因菜單表里某行的 ParentID 指向了自己的 MenuID或者兩個節(jié)點互相指向遞歸永遠到不了level 3之外的出口。解決渲染前先做一次環(huán)檢測或者在 SQL 里加WHERE MenuID ParentID過濾自環(huán)更穩(wěn)的做法是給遞歸加一個全局計數(shù)器超過 100 次直接 Exit Sub 并寫日志。我一般會在 RenderMenu 開頭加If level 5 Then Exit Sub雙保險。4.2 Dictionary 鍵大小寫敏感導致子菜單掛不上現(xiàn)象一級菜單正常二級怎么都不出現(xiàn)但數(shù)據(jù)庫里數(shù)據(jù)明明是對的。原因Classic ASP 的 Scripting.Dictionary 默認CompareMode是 BinaryCompare鍵 A1 和 a1 被當成兩個不同的鍵而數(shù)據(jù)庫里 MenuID 有時是大寫有時是小寫分桶和查找對不上。解決創(chuàng)建 Dictionary 后立刻設menuDict.CompareMode 1TextCompare或者在 Add 之前統(tǒng)一UCase()。這個坑很隱蔽因為報錯都不報就是靜默不顯示。4.3 選中態(tài)用 Session 存多標簽頁互相串現(xiàn)象用戶開了兩個標簽頁一個在用戶管理、一個在內(nèi)容管理切回來發(fā)現(xiàn)高亮跑到了另一個菜單。原因源碼默認從 Session 取 currentIdSession 是會話級的多標簽共享。解決改成優(yōu)先讀Request.QueryString(menuid)取不到再回落 Session或者在每個鏈接上帶?menuidxxx參數(shù)。參數(shù)說明menuid 要和 MenuID 字段類型一致數(shù)字型別加引號字符串型記得 Trim。4.4 中文菜單名在部分瀏覽器顯示成方塊現(xiàn)象Chrome 正常某老版本 IE 里菜單名全是方塊。原因文件編碼、CodePage、Response.Charset、meta charset 四處不一致最常見的是文件存了 UTF-8 但 CodePage 還是 65001 而數(shù)據(jù)庫連接串里沒指定字符集。解決統(tǒng)一走 GB2312 路線文件另存為 ANSI頁面頭CodePage936Response.Charsetgb2312meta charsetgb2312四處對齊。改完清一次瀏覽器緩存再驗。4.5 靜態(tài)模式下數(shù)組順序?qū)戝e父項在后導致整段不渲染現(xiàn)象靜態(tài)數(shù)組模式改造后某個二級菜單連同它的子項全部消失。原因子項在數(shù)組里排在了父項前面分桶時父桶還不存在menuDict(arr(3)).Add直接拋錯而 VBScript 默認On Error Resume Next沒開整個 Sub 中斷。解決數(shù)組嚴格按「父在前、子在后」排列或者在 Add 前加If Not menuDict.Exists(arr(3)) Then menuDict.Add arr(3), ...的兜底創(chuàng)建。后者更穩(wěn)代價是父項缺失時會生成一個空桶渲染時表現(xiàn)為一個空 ul需要額外判斷跳過。5. 進階把三級菜單做成可配置組件并驗證渲染結(jié)果源碼跑通只是起點真正省事的是把它抽成一個可復用的 include 組件。我的做法是把數(shù)據(jù)構(gòu)建、RenderMenu、JS 折疊三塊拆成menu_data.asp、menu_render.asp、menu.js頁面里只留一行!--#include filemenu_render.asp--加一次RenderMenu 0, 1, currentId調(diào)用。這樣換項目時只改數(shù)據(jù)源渲染邏輯不動。驗證渲染結(jié)果別靠肉眼數(shù)寫個簡單的自檢腳本把生成的 HTML 里li數(shù)量和數(shù)據(jù)庫 count 對一下數(shù)量對不上就是分桶漏了。驗證項方法通過標準節(jié)點總數(shù)正則數(shù)li出現(xiàn)次數(shù)等于表內(nèi)有效行數(shù)層級深度數(shù).menu-lv3是否存在有三級數(shù)據(jù)時必出現(xiàn)選中態(tài)唯一數(shù)classactive次數(shù)恰好 1 次空鏈接查href0 處這個自檢表我一般掛在測試環(huán)境的一個menu_check.asp里改完菜單跑一遍比點半天靠譜。另外提一個性能細節(jié)菜單數(shù)據(jù)每次請求都查庫其實沒必要Classic ASP 可以用Application對象緩存整個 menuDict后臺改菜單時手動Application.Contents.Remove(menuDict)刷新。緩存后首屏能省一次數(shù)據(jù)庫往返老服務器上體感很明顯。但要注意 Application 是進程級的多站點共用一個應用池時會串數(shù)據(jù)得用帶站點前綴的鍵名隔離。從那以后我每次接手老 ASP 項目第一件事就是把菜單組件單獨抽出來跑一遍自檢表確認節(jié)點數(shù)、層級、選中態(tài)三項都對再動業(yè)務代碼——菜單這種「看起來最簡單」的組件恰恰是最容易在重構(gòu)時被改崩的地方。希望幫到你。本文還有配套的精品資源點擊獲取 ASP三級菜單源碼解析：從數(shù)據(jù)結(jié)構(gòu)到遞歸渲染的完整實現(xiàn)
簡介這份ASP三級菜單源碼面向需要構(gòu)建多層級網(wǎng)站導航的Web開發(fā)者尤其適合電子商務類站點處理復雜產(chǎn)品分類場景可作為動態(tài)菜單生成與樣式交互的參考實現(xiàn)。壓縮包為rar格式整體約1.81MB內(nèi)含示例頁面、說明文檔與主源碼等文件涵蓋HTML頁面、文本說明及ASP程序等類型分別用于演示菜單效果、提供使用聲明與幫助入口以及承載三級菜單的核心服務端邏輯。目前已有192人學習下載可供對照參考。源碼結(jié)合HTML無序列表、CSS布局與JavaScript展開折疊效果并由ASP根據(jù)數(shù)據(jù)動態(tài)生成菜單項讀者可據(jù)此理解菜單結(jié)構(gòu)與頁面內(nèi)容的對應關(guān)系并在此基礎上按自身設計風格修改定制同時留意瀏覽器兼容、請求性能與搜索引擎抓取等實際問題。1. 從一份 ASP 三級菜單源碼說起老項目里最容易被低估的導航組件接手一套十幾年前的老后臺最先崩掉的往往不是業(yè)務邏輯而是導航。左側(cè)菜單點開二級、再點開三級刷新一下全收起來了用戶罵罵咧咧地重新找位置——這種場景在維護老系統(tǒng)時幾乎每周都遇到。這次拆的是一份 ASP 三級菜單源碼純 Classic ASP 實現(xiàn)不依賴任何前端框架靠服務端拼 HTML 加少量 JavaScript 控制展開收起數(shù)據(jù)來源可以是數(shù)據(jù)庫表也可以是配置文件里的靜態(tài)數(shù)組。它解決的就是「多層級導航在無框架環(huán)境下怎么穩(wěn)定展開、怎么記住當前選中項」這個具體問題。適合誰還在維護 ASP 老站點的開發(fā)者、需要給遺留系統(tǒng)補導航的運維、以及想搞明白無框架時代菜單邏輯的人。asp源碼這類資源網(wǎng)上不少但能直接跑通、結(jié)構(gòu)清晰的不多這份算一個。2. 三級菜單的數(shù)據(jù)結(jié)構(gòu)從扁平表到樹形渲染的完整鏈路2.1 為什么菜單數(shù)據(jù)要存成「父 ID 層級」而不是嵌套數(shù)組先看數(shù)據(jù)層。三級菜單的本質(zhì)是一棵樹但存進數(shù)據(jù)庫時幾乎沒人真去存嵌套結(jié)構(gòu)常見做法是一張扁平表每行一個菜單項用 ParentID 指向上級再用一個 SortOrder 控制同級順序。這份源碼走的就是這條路表結(jié)構(gòu)大致是 MenuID、ParentName、MenuName、MenuUrl、ParentID、MenuLevel 這么幾個字段。為什么不直接在 ASP 里寫死嵌套數(shù)組因為菜單要能后臺維護運營改個名字、加個子項總不能每次都改代碼。扁平表轉(zhuǎn)樹形渲染核心是「一次查詢、內(nèi)存分組」。ASP 里沒有現(xiàn)成的 groupBy我一般會先把整表讀進一個二維數(shù)組或 Dictionary按 ParentID 分桶然后從根節(jié)點遞歸往下拼。這份源碼用的是 Dictionary 嵌套 Dictionary 的寫法好處是查找 O(1)壞處是 Classic ASP 的 Dictionary 不支持直接存對象引用得靠字符串鍵拼路徑。下面這段是數(shù)據(jù)讀取和分桶的核心邏輯我按源碼結(jié)構(gòu)整理成了可直接對照的版本% 讀取全部菜單按 ParentID 分桶 Dim conn, rs, menuDict, sql Set menuDict Server.CreateObject(Scripting.Dictionary) sql SELECT MenuID, MenuName, MenuUrl, ParentID, MenuLevel, SortOrder _ FROM Sys_Menu ORDER BY ParentID, SortOrder Set conn Server.CreateObject(ADODB.Connection) conn.Open Application(ConnStr) Set rs conn.Execute(sql) Do While Not rs.EOF Dim pid, item pid Trim(rs(ParentID) ) If Not menuDict.Exists(pid) Then menuDict.Add pid, Server.CreateObject(Scripting.Dictionary) End If 用 MenuID 做二級鍵值為 名稱|鏈接|層級 的拼接串 menuDict(pid).Add CStr(rs(MenuID)), _ rs(MenuName) | rs(MenuUrl) | rs(MenuLevel) rs.MoveNext Loop rs.Close : conn.Close Set rs Nothing : Set conn Nothing %邏輯說明外層 Dictionary 的鍵是 ParentID內(nèi)層鍵是 MenuID值用豎線拼成字符串。這么寫是因為 Classic ASP 的 Dictionary 存不了 Recordset 行對象只能降級成字符串。參數(shù)上要注意兩點ParentID 為 0 或空串代表根節(jié)點源碼里統(tǒng)一用 0 做根鍵SortOrder 必須在 SQL 里排好ASP 端不再二次排序否則同級順序會亂。層級字段 MenuLevel 其實可以不要靠遞歸深度就能算出來但保留它有個好處——渲染時可以直接按層級套不同的 CSS class省一次判斷。2.2 遞歸渲染函數(shù)三個參數(shù)決定菜單長什么樣數(shù)據(jù)分好桶接下來是渲染。源碼里有一個 RenderMenu 函數(shù)接收父 ID、當前層級、當前選中 ID 三個參數(shù)遞歸調(diào)用自己。這三個參數(shù)就是整個菜單的「控制面板」父 ID 決定從哪一層開始拼當前層級控制縮進和樣式選中 ID 負責給當前頁面對應的菜單項加高亮。很多人改菜單改崩就是沒搞清這三個參數(shù)誰管什么。% Sub RenderMenu(parentId, level, currentId) If Not menuDict.Exists(parentId) Then Exit Sub Dim key, parts, mid, name, url, cls Response.Write ul classmenu-lv level For Each key In menuDict(parentId).Keys parts Split(menuDict(parentId)(key), |) mid key : name parts(0) : url parts(1) cls If mid currentId Then cls classactive Response.Write li cls Response.Write a href url name /a 有子項才繼續(xù)遞歸層級上限 3 If menuDict.Exists(mid) And level 3 Then RenderMenu mid, level 1, currentId End If Response.Write /li Next Response.Write /ul End Sub %邏輯說明level 3是硬上限防止數(shù)據(jù)里出現(xiàn)環(huán)導致無限遞歸——這是血淚經(jīng)驗老系統(tǒng)里 ParentID 指回自己的臟數(shù)據(jù)太常見了。currentId 從 Request.QueryString 或 Session 里取源碼默認用 QueryString 的 menuid 參數(shù)。參數(shù)怎么改想把三級擴成四級把 3 改成 4 即可但 CSS 的.menu-lv4得同步補上想默認全部展開就在ul上加內(nèi)聯(lián) style 或者去掉 JS 的折疊邏輯。注意For Each key In menuDict(parentId).Keys這里遍歷的是內(nèi)層 Dictionary 的鍵順序取決于插入順序所以 SQL 的 ORDER BY 不能省。2.3 前端折疊與選中態(tài)保持二十行 JS 解決刷新丟狀態(tài)服務端渲染完菜單默認是全部展開的三級菜單全攤開頁面會很長所以源碼配了一小段 JS 做折疊。這段 JS 不依賴 jQuery純 DOM 操作核心是給每個帶子菜單的li綁定點擊事件切換子ul的 display。真正容易翻車的是「刷新后選中態(tài)丟失」——用戶點進三級頁面F5 一下菜單全收起來當前項也找不到了。// 折疊控制 選中項自動展開 document.addEventListener(DOMContentLoaded, function () { var items document.querySelectorAll(.menu-lv1 li, .menu-lv2 li); items.forEach(function (li) { var sub li.querySelector(ul); if (!sub) return; // 點擊父項文字切換展開點擊鏈接本身不攔截 li.querySelector(a).addEventListener(click, function (e) { if (this.getAttribute(href) # || !this.getAttribute(href)) { e.preventDefault(); sub.style.display sub.style.display none ? block : none; } }); }); // 選中項的所有祖先 ul 強制展開 var active document.querySelector(li.active); if (active) { var p active.parentElement; while (p p ! document.body) { if (p.tagName UL) p.style.display block; p p.parentElement; } } });邏輯說明第一段遍歷所有可能帶子菜單的 li只在 href 為空或#時才攔截點擊做折疊避免把正常跳轉(zhuǎn)吃掉——這是最常見的誤用很多人直接e.preventDefault()導致菜單點不動。第二段從.active往上爬把沿途所有 ul 的 display 設為 block保證刷新后當前路徑可見。參數(shù)上.menu-lv1、.menu-lv2這兩個選擇器要和 RenderMenu 輸出的 class 嚴格對應改層級時兩邊一起改。這段 JS 放在/body前或 DOMContentLoaded 里都行源碼是后者。3. 把源碼跑起來IIS 配置、數(shù)據(jù)庫對接與靜態(tài)模式改造3.1 本地 IIS 跑通 Classic ASP 的四個必改項拿到 asp源碼 第一件事不是讀代碼是讓它先跑起來。Classic ASP 在現(xiàn)代 Windows 上默認是關(guān)的IIS 里要手動開。我一般按這個順序走控制面板啟用「Internet Information Services」和「ASP」兩個功能IIS 管理器里把站點物理路徑指到源碼目錄應用程序池的「托管管道模式」設為「經(jīng)典」或「集成」都行但 32 位應用要開「啟用 32 位應用程序」最后在 ASP 配置里把「啟用父路徑」打開因為老代碼里!--#include file../conn.asp--這種相對路徑很常見。# 以管理員身份在 PowerShell 里快速檢查 ASP 功能是否已裝 Get-WindowsOptionalFeature -Online -FeatureName IIS-ASP # 若 State 為 Disabled用下面這條啟用需重啟 Enable-WindowsOptionalFeature -Online -FeatureName IIS-ASP -All命令說明第一條只查狀態(tài)不改動第二條才真正安裝。裝完 IIS 要重啟W3SVC服務。常見翻車點是 64 位系統(tǒng)上老組件比如某些 Access 驅(qū)動只有 32 位版本應用池沒開 32 位就會報「未找到提供程序」。數(shù)據(jù)庫連接串在conn.asp里源碼默認給的是 SQL Server 的 OLE DB 寫法換成 Access 的話改成ProviderMicrosoft.Jet.OLEDB.4.0;Data Source...注意 Jet 引擎只認 32 位。3.2 數(shù)據(jù)庫表建好之后菜單不顯示先查這三處表建完、數(shù)據(jù)插進去頁面一片空白是最高頻的問題。按我的排查順序先看menuDict.Exists(0)成不成立也就是根節(jié)點的 ParentID 到底存的是 0、空串還是 NULL——源碼按 0 匹配數(shù)據(jù)庫里存 NULL 就永遠進不去根桶。再看 SQL 有沒有被ORDER BY ParentID, SortOrder之外的字段干擾SortOrder 有重復會導致同級順序隨機。最后看 Response 有沒有被前面的 include 文件提前Response.End掉。現(xiàn)象優(yōu)先檢查典型原因整棵菜單空白根節(jié)點 ParentID 值存了 NULL 或空串與 0 不匹配只有一級沒有二三級內(nèi)層 Dictionary 鍵類型MenuID 數(shù)字與字符串鍵混用同級順序亂SortOrder 唯一性排序字段重復或未排序中文亂碼文件編碼與 Response.Charset文件存成 UTF-8 但頁面聲明 GB2312表格里最后一條值得單獨說Classic ASP 對 UTF-8 支持很別扭源碼文件如果是 UTF-8 無 BOM中文菜單名會變問號。穩(wěn)妥做法是文件存成 ANSI/GB2312頁面頂部% CodePage936 LanguageVBScript %Response.Charset 設gb2312三處編碼一致才不會翻車。3.3 沒有數(shù)據(jù)庫也能用靜態(tài)數(shù)組模式改造很多人的場景根本不需要后臺維護菜單就是幾個固定頁面。這時候把數(shù)據(jù)庫那層抽掉直接用一個靜態(tài)二維數(shù)組喂給 RenderMenu 更省事。改造點只有一處把menuDict的構(gòu)建從 Recordset 循環(huán)換成手寫 Add。% 靜態(tài)模式id, 名稱, 鏈接, 父id Dim staticData, i, arr staticData Array( _ Array(1, 系統(tǒng)管理, #, 0), _ Array(11, 用戶管理, user_list.asp, 1), _ Array(111, 用戶列表, user_list.asp, 11), _ Array(112, 角色分配, role_assign.asp, 11), _ Array(2, 內(nèi)容管理, #, 0) _ ) For i 0 To UBound(staticData) arr staticData(i) If Not menuDict.Exists(arr(3)) Then menuDict.Add arr(3), Server.CreateObject(Scripting.Dictionary) End If menuDict(arr(3)).Add arr(0), arr(1) | arr(2) |1 Next %邏輯說明數(shù)組每行四個元素順序是 ID、名稱、鏈接、父 ID和數(shù)據(jù)庫字段一一對應改菜單就是改這個數(shù)組不用碰渲染邏輯。參數(shù)上注意父 ID 必須出現(xiàn)在子項之前因為分桶是順序執(zhí)行的父桶不存在時menuDict(arr(3))會報錯——源碼里加了 Exists 判斷兜底。這種靜態(tài)模式適合菜單不超過三四十項的場景再多就該回到數(shù)據(jù)庫了。4. 避坑與排查這份源碼最容易翻車的五個地方4.1 遞歸沒有出口IIS 直接 500 并拖垮應用池現(xiàn)象頁面轉(zhuǎn)圈十幾秒后報「Active Server Pages 錯誤 0115」應用池重啟。原因菜單表里某行的 ParentID 指向了自己的 MenuID或者兩個節(jié)點互相指向遞歸永遠到不了level 3之外的出口。解決渲染前先做一次環(huán)檢測或者在 SQL 里加WHERE MenuID ParentID過濾自環(huán)更穩(wěn)的做法是給遞歸加一個全局計數(shù)器超過 100 次直接 Exit Sub 并寫日志。我一般會在 RenderMenu 開頭加If level 5 Then Exit Sub雙保險。4.2 Dictionary 鍵大小寫敏感導致子菜單掛不上現(xiàn)象一級菜單正常二級怎么都不出現(xiàn)但數(shù)據(jù)庫里數(shù)據(jù)明明是對的。原因Classic ASP 的 Scripting.Dictionary 默認CompareMode是 BinaryCompare鍵 A1 和 a1 被當成兩個不同的鍵而數(shù)據(jù)庫里 MenuID 有時是大寫有時是小寫分桶和查找對不上。解決創(chuàng)建 Dictionary 后立刻設menuDict.CompareMode 1TextCompare或者在 Add 之前統(tǒng)一UCase()。這個坑很隱蔽因為報錯都不報就是靜默不顯示。4.3 選中態(tài)用 Session 存多標簽頁互相串現(xiàn)象用戶開了兩個標簽頁一個在用戶管理、一個在內(nèi)容管理切回來發(fā)現(xiàn)高亮跑到了另一個菜單。原因源碼默認從 Session 取 currentIdSession 是會話級的多標簽共享。解決改成優(yōu)先讀Request.QueryString(menuid)取不到再回落 Session或者在每個鏈接上帶?menuidxxx參數(shù)。參數(shù)說明menuid 要和 MenuID 字段類型一致數(shù)字型別加引號字符串型記得 Trim。4.4 中文菜單名在部分瀏覽器顯示成方塊現(xiàn)象Chrome 正常某老版本 IE 里菜單名全是方塊。原因文件編碼、CodePage、Response.Charset、meta charset 四處不一致最常見的是文件存了 UTF-8 但 CodePage 還是 65001 而數(shù)據(jù)庫連接串里沒指定字符集。解決統(tǒng)一走 GB2312 路線文件另存為 ANSI頁面頭CodePage936Response.Charsetgb2312meta charsetgb2312四處對齊。改完清一次瀏覽器緩存再驗。4.5 靜態(tài)模式下數(shù)組順序?qū)戝e父項在后導致整段不渲染現(xiàn)象靜態(tài)數(shù)組模式改造后某個二級菜單連同它的子項全部消失。原因子項在數(shù)組里排在了父項前面分桶時父桶還不存在menuDict(arr(3)).Add直接拋錯而 VBScript 默認On Error Resume Next沒開整個 Sub 中斷。解決數(shù)組嚴格按「父在前、子在后」排列或者在 Add 前加If Not menuDict.Exists(arr(3)) Then menuDict.Add arr(3), ...的兜底創(chuàng)建。后者更穩(wěn)代價是父項缺失時會生成一個空桶渲染時表現(xiàn)為一個空 ul需要額外判斷跳過。5. 進階把三級菜單做成可配置組件并驗證渲染結(jié)果源碼跑通只是起點真正省事的是把它抽成一個可復用的 include 組件。我的做法是把數(shù)據(jù)構(gòu)建、RenderMenu、JS 折疊三塊拆成menu_data.asp、menu_render.asp、menu.js頁面里只留一行!--#include filemenu_render.asp--加一次RenderMenu 0, 1, currentId調(diào)用。這樣換項目時只改數(shù)據(jù)源渲染邏輯不動。驗證渲染結(jié)果別靠肉眼數(shù)寫個簡單的自檢腳本把生成的 HTML 里li數(shù)量和數(shù)據(jù)庫 count 對一下數(shù)量對不上就是分桶漏了。驗證項方法通過標準節(jié)點總數(shù)正則數(shù)li出現(xiàn)次數(shù)等于表內(nèi)有效行數(shù)層級深度數(shù).menu-lv3是否存在有三級數(shù)據(jù)時必出現(xiàn)選中態(tài)唯一數(shù)classactive次數(shù)恰好 1 次空鏈接查href0 處這個自檢表我一般掛在測試環(huán)境的一個menu_check.asp里改完菜單跑一遍比點半天靠譜。另外提一個性能細節(jié)菜單數(shù)據(jù)每次請求都查庫其實沒必要Classic ASP 可以用Application對象緩存整個 menuDict后臺改菜單時手動Application.Contents.Remove(menuDict)刷新。緩存后首屏能省一次數(shù)據(jù)庫往返老服務器上體感很明顯。但要注意 Application 是進程級的多站點共用一個應用池時會串數(shù)據(jù)得用帶站點前綴的鍵名隔離。從那以后我每次接手老 ASP 項目第一件事就是把菜單組件單獨抽出來跑一遍自檢表確認節(jié)點數(shù)、層級、選中態(tài)三項都對再動業(yè)務代碼——菜單這種「看起來最簡單」的組件恰恰是最容易在重構(gòu)時被改崩的地方。希望幫到你。本文還有配套的精品資源點擊獲取