【文章內容簡介】 例如，當要從 guest 表中注冊一條新的記錄時，可以設置 sql 語句如下： Sql=”Insert Into guest (gname,gpass,memo) VALUES (?”amp。gnameamp?！?,?”amp。gpassamp。”?,?”amp。memoamp?！?) 或者可以運用 ADDNEW 函數(shù)： () rs(“gname”)=gname rs(“gpass”)=gpass rs(“memo”)=memo () 兩種方法均可實現(xiàn)，其他的各種操作均可運用相應語句即可實現(xiàn)。其中當要查詢一個表中的全部信息時可以運用通配符“ *”，部分信息時可以運用 LIKE 語句與“ %”等通配符的搭配使用，例如；當要查詢 guest 表中的所有信息時便可以設置 sql 語句為： Sql=”select * from guest” 而當要查詢 guest 表中真名中有張姓的人的時候，可以將 sql 進行如下設置： Sql=”select * from guest where realname Like ?”amp。張 %”?” [6] 17 5 系統(tǒng)詳細設計 總體文件 本網站采用 Frontpage2021 進行網頁的 設計，總體文件分布如下圖所示： 圖 51 文件分布結構 其中 data 文件夾用于存放數(shù)據(jù)庫文件 ， images 文件夾用于存放產品相關的圖片， img 和 img2 用于存放網頁上要顯示的系 統(tǒng)圖片。 主頁部分的網頁文檔包括： 、 、 、 、 、 、 。 用戶部分的網頁文檔包括： 、 、 、 、 、 、 、 、 、 、 、 、 、 、 、。 管理員部分網頁文檔包括： 、 、 、 、 、 、 、 、 、 、 、 、 、 、 、 、 、。 還有 、 、 屬于登陸有關的網頁文檔， 是 flash 18 播放樣式文件 。 通用功能設計 通用功能網頁即 ， 這個頁面 包括了自行定義的一些過程和函數(shù)，以方便編程需要， 比如 Alert 過程， GoBack 過程都可以省去很多 代碼 ，方便省事，這個 ASP 頁面的設計是很有必要的， 其代碼見附錄部分。 主頁設計 導航條 當輸入網站地址時，進入 ，這部分通過一個導航條，將主頁分為 7個部分，導航條樣式如下圖所示： 圖 52 導航條 這個導航條的 CSS 樣式由 控制，其樣式 代碼在附錄部分。 其中的注釋清楚，無需贅述。 在主頁，主頁的副本 、 、 、 中均用以下代碼顯示導航條： div id=modernbricksmenu ul lia href= title===企業(yè)概況 ==企業(yè)概況 /a/li lia href= title===產品用途介紹 ==企業(yè)主要產品 /a/li li id=current style=marginleft: 1pxa href= title===部分產品信息 ==部分產品信息 /a/li lia href= title===走進車間 ==走進車間 /a/li lia href= title===工人生活 ==工人生活 /a/li lia href= title===用戶注冊 ==用戶注冊 /a/li lia href= target=_blank用戶登陸 /a/li /ul /div div id=modernbricksmenuline /div 這個導航條把主頁部分分成了 7 個網頁，其中前 5 個對企業(yè)進行了全面的介紹，分別從“企業(yè)概況”、“企業(yè)主要產品”、“部分產品信息”、“走進車間”和“工 19 人生活”各個方面進行介紹。這里的“企業(yè)概況”和“部分產品信息”兩頁里主要是文本和圖片的相應組 合設計；在“企業(yè)主要產品”頁面里上面部分完全是純文本信息介紹，下面用一個 幻燈片將企業(yè)主要生產的產品圖片顯示出來，新穎別致；而“走進車間”更加把這個幻燈片升級化了，在相應的幻燈片的每一張畫面底部還加上了文字說明，更加有趣生動；最后的“工人生活”用一個 iframe懸浮框架顯示圖片，超鏈接傳遞參數(shù)，這樣可以完成點擊一個超鏈接換一副圖片的效果，也是十分有效的表現(xiàn)方式。 用戶注冊 其中企業(yè)概況、企業(yè)主要產品、部分產品信息、走進車間、工人生活都是一些介紹信息，以供瀏覽者瀏覽。如果用戶需要注冊，點擊導航的 “用戶注冊”，會進入以下界面 ，上面是兩個圖片，中間部分則列出了網站的服務條款，包括一些網絡的法令法規(guī)，最下面則是兩個單選項和一個提交按鈕。選擇是否同意這項條款來決定系統(tǒng)是否讓其繼續(xù)跳轉到下一頁的注冊網頁，顯示效果圖下圖的 53所示： 圖 53 注冊條款 這是注冊條款，這種條款在企業(yè)門戶網站上是比較流行的，單選按鈕如“否”， 20 會出現(xiàn)下圖的提示，且網頁不會跳轉。 下面便是點擊了“否”以后的情況，點擊提示信息的“確定”按鈕不會跳轉，而繼續(xù)保持在這個條款頁面。相反，如果點擊了“是”則會立即跳轉到注冊頁面。 圖 54 不同意條款的提示信息 這只要在 中添加以下腳本即可實現(xiàn)測功能，該功能的實現(xiàn)過程如圖 55 所示： 圖 55 是否同意注冊條款流程 腳本的代碼就不再列舉了，只是一個 if 語句和提交表單的綜合控制。 可以看出，如果點單選按鈕的“是“的話，將會進入 頁面，這個頁面的摸樣如下圖所示： 開始 選擇 是否同意 跳轉到注冊網頁 結束 N Y 21 圖 56 用戶注冊頁面 其中有一個表單項，包括 3 個文本框和一個文本域，前面 3 個文本框的文字前面都標有“ *”附號，為必填內容，如 果不填會有提示的，備注的文本域是可填可不填的，這個不影響注冊。 這其中有一個表單項 action 項指向 ，該頁面用 于處理注冊頁面提交的信息，代碼見附錄部分。 注冊成功后出現(xiàn)如下提示的信息： 圖 57 注冊成功提示 點擊“確定”還會回到注冊頁面。 成功注冊后，會有提示框“你已成功注冊，請 登陸 ！”，便可以登陸了。 用戶登陸 登陸頁面如下圖 。最上面是一個表格的一個單元格，背景顏色設置為紅色，再在其上放置一個只有文字的圖片，文字內容為“ Wele！”。中間部分是登陸的主要部分，先放置 一個表格標題，方正舒體顯示的紅色“用戶登陸”，然后是 22 一個 4 行 2 列的表格，前一列顯示標題，分別為“用戶姓名：”“密碼：”“驗證碼：”“登陸類型：”；后一列為輸入部分，前面 3 個都是一個文本框，最后一個是個下拉列表項。其中在第三個文本框后邊還跟隨一個浮動框架 iframe，用于顯示隨機出現(xiàn)的 4 為驗證碼。最下面是一個動態(tài)圖片，配合登陸頁面，是這個頁面和諧勻稱。整個這個登陸頁面的顯示效果如下圖 58 的顯示： 圖 58 登陸頁面 其中登陸類型有 、 兩種，分別表示用戶登陸和管理員登陸。輸入用戶姓名、密碼、驗證碼 ，選擇用戶類型，點擊登陸，只要賬號、密碼和驗證碼正確，就會跳轉到相應的界面。輸入錯誤會有如下所示的一些信息：“密碼不能為空！”“用戶名不能為空！”“驗證碼輸入錯誤，請重新登陸！”“對不起，您輸入的用戶名或密碼錯誤，請查實！” 這里的驗證碼顯示設計方法如下，用一個懸浮框架 iframe，其中的 scr 屬性指向 頁面，這個頁面用隨機數(shù)隨機出四個數(shù)字，然后利用 4 個數(shù)字作為圖片的名稱將 4 個圖片顯示出來。這里的從 0 到 9 的 10 個圖片都是用數(shù)字作為名稱的，例如“ ”就是一個顯示數(shù)字 1 的一張圖片，這樣更利于驗證碼的顯示。 23 用戶模塊 菜單項 用戶界面為 ，界面如下圖所示： 圖 59 用戶界面 界面運用框架結構 frameset將此網頁分成兩個部分，左邊的部分是一個菜單項， frame的 src 屬性指向 ，其在用戶界面中始終存在，方便用戶去操作， CSS 樣式 代碼在附錄中可以找到，不在贅述。而其菜單樣式就是圖 59 中左邊部分的菜單樣式，最上邊是問候語“歡迎光臨 TDK 用戶社區(qū)”，中間部分是菜單按鈕，點擊可以分別進入各個頁面，最下面是技術 支持，即編寫網頁的團體部門或者個人所屬單位，這里選取后者。 這里運用了分頁顯示效果，有“第一頁”、“上一頁”、“下一頁”、“最后一頁”各個超鏈接可以將頁面進行移動。這里主要是運用了 RecordSet 中的 Page 有關的 PageSize、 AbsolutePage、 PageCount、MoveNext 等屬性和方法的設計來完成記錄的分頁顯示的。 瀏覽企業(yè)新聞 圖 59 就是用戶登陸用戶界面后的狀態(tài)，右邊框架指向的第一個頁面是“瀏覽企業(yè)新聞頁面，用一個表格列出了新聞的編號、類型、標題和發(fā)表時間，且記錄分頁顯示 ，點擊標題即可查看相應的新聞內容，如圖 510 所示，這里運用 SQL語句的查詢語句 SELECT 在 gongchang 表格中查詢新聞內容 gmess，并將其顯示到表格的正文部分， gctitle 的標題部分也相應顯示到標題部分中去，字體做出相應的設置，使得其中的顯示錯落有致，賞心悅目。顯示效果可以從圖中看出： 24 圖 510 新聞內容 在內容頁中設置了一個超鏈接“返回列表“，用于返回以上新聞列表。 查看產品信息 點擊菜單項的“查看產品信息“，即可進入產品介紹頁面，如圖 511 所示： 圖 511 產品介 紹 該頁面顯示一條產品信息，可以點擊下面的“第一個”、“上一個”、“下一個”、“最后一個”實現(xiàn)記錄的位置移動。 這里的圖片是可以隨著記錄的位置變化而做出相應變化的，主要是運用圖片名稱的設置和記錄的 cpname 之間的關聯(lián)實現(xiàn)這種功能的，具體的實現(xiàn)過程可以參見管理員的“添加產品信息”部分的設計。 這里的記錄的位置移動設計是利用 RecordSet 中有關 Position 的 AbsolutePosition、MoveNext、 MovePrevious、 MoveLast、 MoveFirst 等屬性和方法實現(xiàn)的。 點擊“預 25 定產品 ”超鏈接進入產品預定頁面，如圖 512 所示： 圖 512 產品預定 這個頁面分成兩個部分，用一道線 hr分割，上面部分是真名驗證，因為預定產品需要用到真實信息了，而不能僅僅靠用戶賬號就可以辦到的，點擊“驗證是否合法”會用腳本去判斷其是否符合名字規(guī)范。如果合法，點擊提交會將用戶的真實姓名保存到 guest 表的 realname 中，以備后用。沒有驗證真名就去提交訂單就會出現(xiàn)如下提示信息： 圖 513 沒有驗證真名的提示信息 點擊這里的“確定”按鈕，還會顯示圖 512 的訂購頁面， 讓用戶區(qū)驗證真名。 而驗 證過真名以后就可以提交訂單表了，如果有 不填數(shù)量會有 提示信息 “請輸入訂購數(shù)量”，輸入的產品號有誤會提示“沒有該產品，請檢查產品輸入是否 26 正確！” 該判定的流程如下： 圖 514 判定是否訂購過某產品的流程 訂單填寫無誤，便可以提交，但如果該產品已經訂購，如果想繼續(xù)訂購，就可以添加數(shù)量， 會提示“你已經預定該產品了，修改數(shù)量即可！” 并跳轉到如下頁面 ，這個頁面通過網頁的 方法得到上一頁用 get 方法傳遞過來的 cpno 參數(shù)并顯示出 來。并用數(shù)據(jù)庫查詢語句查詢到該 cpno的產品在訂單中的原來數(shù)量并顯示出來，接下來用一個表單項控制要修改的數(shù)量，利用表單的文本框將修改數(shù)量傳遞給 進行處理， 用update 語句將 dingdan 表的 mass 字段進行修改，這樣就完成了對已訂購產品的再次訂購數(shù)量的修改過程了。 開始 修改數(shù)量 輸入產品號 是否訂購過 訂單生成 結束 Y N 27 圖 515 續(xù)訂頁面 首次訂購填寫無誤或者續(xù)訂成功后會有提示 信息 “訂單已提交，請等候管理員聯(lián)系！” 出現(xiàn)此提示表明該產品的訂購數(shù)量修改成功了。 發(fā)表留言 點擊菜單項的“發(fā)表留言”，進入留 言區(qū)，如下圖 516 所示： 圖 516 留言頁面 在留言區(qū)里首先有一條歡迎語，即“歡迎 xxx 來社區(qū)交流，你在這里可以暢所欲言！”其中 xxx 為用戶賬號名，可以動態(tài)顯示登陸者的名字，實際上就是讀 28 取 Session 中的“ uname”并顯示出來。同樣可以將這個信息擴展開來，查詢到名為這個“ uname”的 guest 表中的記錄的性別、頭像顯示在下面的表格中去，這個類似于 qq 中的頭像和賬號顯示。接下來可以輸入留言信息，輸入時可以控制字體和字號大小，用于顯示。點擊提交，便可以把留言內容保存到數(shù)據(jù)庫中的liuyan 表中。 沒有輸入字體而提交會有錯誤提示“留言不能為空！” 當用戶輸入一些信息并提交后便是 留言成功了，并提示“發(fā)言成功！” 該功