網站動態導航的實現與研究

摘 要：本論文主要闡述在網站設計時如何實現動態導航的過程；本文所述設計是采用數據庫原理來管理導航的過程，可以實現二級或多級導航，可實現導航的后臺動態管理，從而實現導航的動態添加、修改、移動等功能。

關鍵詞：ASP 節點 導航 數據庫

中圖分類號：G4 文獻標識碼：A 文章編號：1673-9795（2013）09（b）-0148-02

當今社會是互聯網時代，網站遍布到各個領域，網站設計制作也隨之興盛起來；無論從大公司，還是個人，都可以進行網站設計或制作。對于一般的建站公司，大多采用模板式批量生產，對于個人，一般采取個人設計或制作的形式，不管是哪一種形式，都需要日后的維護和網站的更新，有時需要對原有網站版面進行重新修改，這樣經常會涉及到導航的變動。由于一般情況下，網站的導航都采用的固定的方式，從而導致修改不方便（需要修改源代碼來實現），所以本文所闡述的就是如何實現動態導航，減少日后由于某種原因而導致修改源代碼帶來的不必要的工作量。

1 分析過程

動態導航可以應用于各種Web編程語言，如ASP、PHP、JSP等。通過程序與數據庫結合，來實現動態導航的管理。其中在數據庫中存儲導航的各節點及所屬上級節點，利用程序在網頁中進行節點檢索，實現導航樹，將各節點創建在網點中。另外，也可以實現導航節點之間的新建、移動、刪除等操作，便于節點管理，對于節點的維護，通常放在后臺進行，前臺只是為普通用戶生成導航節點。

流程如下：

（1）設計數據庫和節點數據表（字段）。

（2）前臺導航節點的顯示，包括主節點（主頁中）及分支節點（子頁面中）。

（3）后臺導航節點的管理及維護（節點之間的新建、移動、刪除等操作）。

2 設計過程

（1）數據庫和節點數據表。

數據庫及數據庫名的選擇可以根據實際情況進行，如，對于大型數據庫，可以采用SQL Server或MySQL來存放數據，一般的小型網站，可以選擇相對較小的Access數據庫進行。本文所描述的數據庫采用相對較小的Access進行設計（其它數據庫設計相同）。本文描述的節點所涉及的數據表包括：navItem表，用于存放節點及子節點，上下所屬關系，可以實現N層所屬關系。navContent表，用于存放末節點相關詳細內容（節點對應的頁面文字）。

navItem節點表中字段包括：navID（節點ID）、navName（節點名稱）、Lsort（節點順序號）、UID（父節點ID）、Leaf（是否是末節點）。

navContent節點內容表字段包括：navID（節點ID）、content（節點對應內容）。

（2）前臺導航節點的顯示。

主頁面中的首節點可以采取通過濾的方式，只需要在檢索時檢索UID為0（為0代碼是頂層節點）的節點，即可得到首節點，并放置在導航條上。

子頁面中的節點檢索，是通過得到某個首節點ID后，通過遞歸算法，得到相應子節點的方式得到。例如，如果用戶點擊了某個首節點ID=5，則可以檢索UID為5的所有子節點，利用遞歸，以此類推，查找出每個子節點的下級子節點，并利用CSS樣式及HTML代碼以列表的形式顯示在對應的子頁面中即可。

（3）節點的管理及維護。

后臺節點管理最為復雜，需要實現節點新建、移動、刪除操作，具體作法如下：

新建：新建節點時，要給出新建節點名稱，以及所屬的父節點（navID），并選擇是建同級節點，還是下級節點，是否是末節點（葉子）。取到相應數據后，判斷如果是同級節點，則先獲取當前navID的父節點，將獲取到的navID作為UID（父節點ID）存放，如果是下級節點，只需要將當前節點的navID作為UID，應用節點名稱寫入navName，如果是末結點，則將Leaf字段置1，否則說明不是末節點，則置0，寫入記錄即可。

移動：

獲取源節點navID，并獲取目標節點navID，選擇移動到當前節點之前還是之后，是與目標節點同級節點，還是下級節點。取得數據后，根據所選值進行判斷，如果是同級并且是之前，則先要取得目標節點的Lsort值，將當前目標節點及以下的Lsort全部向后移動。插入當前源節點（將當前源節點的Lsort值改為原目標Lsort值），如果是之后插入，只需要將目標節點后的節點向后移動，插入當前節點即可。如果是下級，則獲取目標節點的子節點（如果沒有子節點，則將當前節點的Lsort設置為1），并將目標節點的navID設置為當前節點的UID（父節點）。

刪除：

提示用戶是否確定刪除節點（連帶刪除所有所屬子節點）。獲取到預刪除節點的navID后，利用遞歸算法，先將所屬所有下級子節點刪除后，再將當前節點刪除，同時要將navContent表中相對應的節點內容一并刪除。

3 算法代碼

移動節點：要求先獲取目標節點ID，根據移動位置，來決定源節點的移動方式。代碼如下：（其中數據庫連接代碼部分省略）

s_level=request.Form（\"s_level\"）

t_level=request.Form（\"t_level\"）

mi=request.Form（\"mi\"）

target=request.Form（\"target\"）

if s_level<>\"\" then

s_sort=1

set rs=conn.execute（\"select * from nav where nav_id=\" t_level）

if not rs.eof then

s_sort=rs（\"s_sort\"）

uplevel=rs（\"uplevel\"）

end if

if mi=\"i\" then uplevel=t_level

if target=\"b\" then sql=\"select * from nav where uplevel=\" uplevel \" and s_sort>\" s_sort \" order by s_sort DESC\"

if target=\"f\" then sql=\"select * from nav where uplevel=\" uplevel \" and s_sort>=\" s_sort \" order by s_sort DESC\"

set rs=conn.execute（sql）

if not rs.eof then

loc=rs（\"s_sort\"）

s_sort=loc+1

end if

while not rs.eof

loc=rs（\"s_sort\"）

conn.execute（\"update nav set s_sort=\" s_sort \"，uplevel=\" uplevel \" where nav_id=\" rs（\"nav_id\"））

s_sort=loc

rs.movenext

wend

conn.execute（\"update nav set s_sort=\" s_sort \"，uplevel=\" uplevel \" where nav_id=\" s_level）

rs.close

set rs=nothing

end if

刪除節點：通過遞歸的方式實現先刪除子節點后，再刪除當前節點的方式實現。

'遞歸刪除算法

function loopDel（leaf）

set rstemp=conn.execute（\"select * from nav where uplevel=\" leaf）

while not rstemp.eof

loopDel（rstemp（\"nav_id\"））

rstemp.movenext

wend

conn.execute（\"delete from nav where nav_id=\" leaf）

end function

4 結語

本設計已經通過實驗并應用，效果較好。但在設計過程中也還存在一些不足，尚需進一步改進，希望在以后的應用中得到更好的效果，也希望能夠滿足不同的場合需求。

參考文獻

[1] 佳圖文化.ASP動態網站開發案例教程[M].北京：希望電子出版社，2012.

[2] 李睦芳.Dreamweaver CS5 +ASP動態網站開發與典型實例[M].北京：清華大學出版社，2012.

[2] 史桂紅.動態網站設計制作與維護[M].北京：水利水電出版社，2011.