網(wǎng)站動態(tài)導航的實現(xiàn)與研究

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

關鍵詞：ASP 節(jié)點 導航 數(shù)據(jù)庫

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

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

1 分析過程

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

流程如下：

（1）設計數(shù)據(jù)庫和節(jié)點數(shù)據(jù)表（字段）。

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

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

2 設計過程

（1）數(shù)據(jù)庫和節(jié)點數(shù)據(jù)表。

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

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

navContent節(jié)點內(nèi)容表字段包括：navID（節(jié)點ID）、content（節(jié)點對應內(nèi)容）。

（2）前臺導航節(jié)點的顯示。

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

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

（3）節(jié)點的管理及維護。

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

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

移動：

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

刪除：

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

3 算法代碼

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

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

刪除節(jié)點：通過遞歸的方式實現(xiàn)先刪除子節(jié)點后，再刪除當前節(jié)點的方式實現(xiàn)。

'遞歸刪除算法

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 結語

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

參考文獻

[1] 佳圖文化.ASP動態(tài)網(wǎng)站開發(fā)案例教程[M].北京：希望電子出版社，2012.

[2] 李睦芳.Dreamweaver CS5 +ASP動態(tài)網(wǎng)站開發(fā)與典型實例[M].北京：清華大學出版社，2012.

[2] 史桂紅.動態(tài)網(wǎng)站設計制作與維護[M].北京：水利水電出版社，2011.