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