【正文】 shichangjia varchar 100 huiyuanjia int 4 Buynum int 4 vipjia tinyint 1 bestproduct datetime 8 是 （ 5） 產(chǎn)品 單位 表 主鍵：類(lèi)型 ID NOT NULL 說(shuō)明：產(chǎn)品 單位表記錄產(chǎn)品單位 。其表結(jié)構(gòu)如下表 44 所示： 表 44 產(chǎn)品類(lèi)型表（ danwei） 列名 數(shù)據(jù)類(lèi)型 長(zhǎng)度 允許空 ID 自動(dòng)編號(hào) 4 danweiname varchar 4 danweiorder int 20 （ 5）訂單表 主鍵：無(wú) 說(shuō)明：訂單表記錄在客戶(hù)的一個(gè)訂單中，針對(duì)一件商品的訂貨信息。 其表結(jié)構(gòu)如表 45 所示： 表 45 訂單表（ telorder） 字段名 數(shù)據(jù)類(lèi)型 長(zhǎng)度 允許空 t_id 自動(dòng)編號(hào) 4 t_name int 4 t_add int 4 t_tel varchar 30 dates date 8 istate varchar 50 user_name varchar 50 rmb money 50 t_biaozhi int 4 （ 6） 送貨 表 主鍵： 送貨 編號(hào) NOT NULL 說(shuō)明 ： 發(fā)貨訂單表記錄針對(duì)用戶(hù)的一個(gè)訂單的詳細(xì)信息。其表結(jié)構(gòu)如下表 46 所示： 表 46 送貨 表（ shop_songhuo） 在線(xiàn)手機(jī)銷(xiāo)售網(wǎng)站 28 字段名 數(shù)據(jù)類(lèi)型 長(zhǎng)度 允許空 songid 自動(dòng)編號(hào) 4 subject varchar 20 jsmoney varchar 10 fangshi varchar 60 songidorder varchar 6 （ 7） 評(píng)論 表 主鍵： 評(píng)論 編號(hào) NOT NULL 說(shuō)明： 實(shí)現(xiàn)評(píng)論 功能。其表結(jié)構(gòu)如下表 47 所示： 表 47 評(píng)論 表（ shop_pinglun） 字段名 數(shù)據(jù)類(lèi)型 長(zhǎng)度 允許空 pinglunid 自動(dòng)編號(hào) 4 productid varchar 100 pinglunname text 16 pingluncontent varchar 200 pingluntitle varchar 50 pinglundate int 4 在線(xiàn)手機(jī)銷(xiāo)售網(wǎng)站 29 第 6 章 網(wǎng)站的風(fēng)格及頁(yè)面設(shè)計(jì) 頁(yè)面設(shè)計(jì)的原 則 設(shè)計(jì)的 3C原則：所謂 3C 原則是指簡(jiǎn)潔、一致性、好的對(duì)比度。 Web頁(yè)面設(shè)計(jì)需要遵循這三條原則。 根據(jù)以上原則網(wǎng)站頁(yè)面要做到樸素大方，線(xiàn)條輪廓要流暢、穩(wěn)重，用色要慎重不可花里胡哨。 線(xiàn)條的使用 直線(xiàn)（矩形）的應(yīng)用。直線(xiàn)條的藝術(shù)效果是流暢、挺拔、規(guī)矩、整齊，所謂有輪有廓。直線(xiàn)和矩形在頁(yè)面上的重復(fù)組合可以呈現(xiàn)井井有條、涇渭分明的視覺(jué)效果。 曲線(xiàn)（弧形）的應(yīng)用。曲線(xiàn)的效果是流動(dòng)、活躍，具有動(dòng)感。曲線(xiàn)和弧形在頁(yè)面上的重復(fù)組合可以呈現(xiàn)流暢、輕快，富有活力的視覺(jué)效果。一般應(yīng)用于青春、活潑的主頁(yè)題材。 曲、直線(xiàn) （矩形、弧形）的綜合應(yīng)用。把以上兩種線(xiàn)條和形狀結(jié)合起來(lái)運(yùn)用，可以大大豐富主頁(yè)的表現(xiàn)力，使頁(yè)面呈現(xiàn)更加豐富多彩的藝術(shù)效果。這種形式的主頁(yè)，適應(yīng)的范圍更大，各種主題的主頁(yè)都可以應(yīng)用。但是，在頁(yè)面的編排處理上，難度也會(huì)相應(yīng)大一些，處理得不好會(huì)產(chǎn)生凌亂的效果。 色彩的選擇 色彩是人的視覺(jué)最敏感的東西。主頁(yè)的色彩處理得好，可以錦上添花，達(dá)到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是 “總體協(xié)調(diào)，局部對(duì)比 ”，也就是：主頁(yè)的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對(duì)比。在色彩的運(yùn)用上，可 以根據(jù)主頁(yè)內(nèi)容的需要，分別采用不同的主色調(diào)。因?yàn)樯示哂邢笳餍?，例如：嫩綠色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標(biāo)志色，例如：軍警的橄欖綠，醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺(jué)，例如冷、暖的感覺(jué)，進(jìn)、退的效果等。另外，色彩還有民族性，各個(gè)民族由于環(huán)境、文化、傳統(tǒng)等因素的影響，對(duì)于色彩的喜好也存在著較大的差異。 所以，我以藍(lán)白色搭配為主色調(diào)其它顏色相輔，給人以寧?kù)o深遠(yuǎn)的回味，導(dǎo)航欄用七色箭頭點(diǎn)綴，彩色圖片和動(dòng)態(tài)元素的使用使頁(yè)面樸素、大方、莊重。 在線(xiàn)手機(jī)銷(xiāo)售網(wǎng)站 30 網(wǎng)站設(shè)計(jì)構(gòu)思 首先在制作一個(gè)網(wǎng)頁(yè)之前，應(yīng)該先進(jìn)行構(gòu)思。新建頁(yè)面就象一張白紙，沒(méi)有任何表格，框架和約定俗成的東西，你可以盡可能的發(fā)揮你的想象力，將你想到的 “ 景象 ” 畫(huà)上去，建議用一張白紙和一支鉛筆將初步的設(shè)想畫(huà)在紙上，當(dāng)然用作圖軟件 photoshop等也可以，免得在做了一半時(shí)發(fā)現(xiàn)頁(yè)面不和諧而重做。這屬于創(chuàng)造階段，不講究細(xì)膩工整，不必考慮細(xì)節(jié)功能，只以粗陋的線(xiàn)條勾畫(huà)出創(chuàng)意的輪廓即可。盡可能多畫(huà)幾張，最后選定一個(gè)滿(mǎn)意的作為繼續(xù)創(chuàng)作的腳本。 第一步先明確頁(yè)面主題，考慮是否有合適的圖片來(lái)襯托主題，如果有現(xiàn)成的圖片就可以了，沒(méi)有的話(huà)， 就根據(jù)情況來(lái)決定是否自己做一幅，這里我用 PHOTOSHOP軟件設(shè)計(jì)了一張簡(jiǎn)單的網(wǎng)站標(biāo)題 “ 新世紀(jì)手機(jī)商城 ” 字體顏色選用淺藍(lán)，以便協(xié)調(diào)網(wǎng)站的基色。但不管怎樣，標(biāo)題的主色調(diào)應(yīng)先定下來(lái)，這對(duì)后面幾步的版面影響很大。 第二步明確頁(yè)面上要鏈接的目錄，要將他們放在較顯眼的位置，根據(jù)頁(yè)面風(fēng)格的不同可以放在頂部、左邊、右邊、中部等較明顯的位置，主鏈接可以做成小圖標(biāo)的形式，但注意圖片不能太大、也不能過(guò)分搶眼（一般情況下不比標(biāo)題或主圖的色彩重）。 第三步是指定主圖，所謂主圖，就是放一幅較能反映頁(yè)面主題思想的圖片，他的大小可適當(dāng)超 過(guò)頁(yè)面上的其它圖片，顏色不加限制，而且位置應(yīng)盡量突出在前面搶眼處。這里要特別指出的是，網(wǎng)標(biāo)，它是一個(gè)網(wǎng)站的標(biāo)志和靈魂，在他的設(shè)計(jì)上一定要突出自己的風(fēng)格和特點(diǎn)，能反映站點(diǎn)主題，體現(xiàn)企業(yè)文化，可以結(jié)合使用企業(yè)的標(biāo)志。 以上三步確定下來(lái)后，頁(yè)面的基本風(fēng)格就出現(xiàn)了，我們?cè)诟鶕?jù)情況進(jìn)行調(diào)整，或者看是否加上背景，主要考慮主圖是否需要背景。 網(wǎng)站的風(fēng)格版面設(shè)計(jì) 在版面設(shè)計(jì)上我認(rèn)為可以說(shuō)是既繼承了傳統(tǒng)設(shè)計(jì)的優(yōu)點(diǎn)，又作了個(gè)性化創(chuàng)新作為傳統(tǒng)設(shè)計(jì)無(wú)非是用以下幾種架構(gòu)如圖 51 所示： a、 b、 c、 d、 圖 51 網(wǎng)站架構(gòu) a 型、 b 型、 c 型、 d 型 多數(shù)網(wǎng)站的設(shè)計(jì)都采用了 c型，上邊為站標(biāo)及廣告欄，左邊作為導(dǎo)航欄，底邊為版權(quán)信息及設(shè)計(jì)制作小組，中間作為內(nèi)容區(qū)。我的設(shè)計(jì)基本延用了 c型但做了一些改進(jìn)。延用了上下邊框和左邊框的設(shè)計(jì)網(wǎng)頁(yè)顯得簡(jiǎn)潔。但沒(méi)有使用共享邊框，而是單獨(dú)的設(shè)計(jì)制作了上邊框的內(nèi)容 ，下邊框的內(nèi)容 ，和作邊框的內(nèi)容 。使用 !include file=語(yǔ)句完成 對(duì)上述部分的調(diào)用，實(shí)現(xiàn)頁(yè)面共享使每層網(wǎng)頁(yè)具有相同的上下及左邊框統(tǒng)一了風(fēng)格，這樣的調(diào)用方法效地解決了導(dǎo)航欄及超鏈接在深層網(wǎng)頁(yè)的相對(duì)路徑偏差問(wèn)題，實(shí)現(xiàn)鏈接路徑完全統(tǒng)一化。 網(wǎng)站頁(yè)面結(jié)構(gòu)布局如下圖 52 所示： 網(wǎng)站購(gòu)物功能鏈接區(qū)（ ） 在線(xiàn)手機(jī)銷(xiāo)售網(wǎng)站 31 手機(jī)廠(chǎng)商等（ ） （商品顯示區(qū)） 圖 52 網(wǎng)站頁(yè)面結(jié)構(gòu)布局 商城主頁(yè)設(shè)計(jì) 主頁(yè)是一個(gè)商城的門(mén)戶(hù)，顧客一般都是首先看到此頁(yè)（也有個(gè)別從鏈接進(jìn)來(lái)者），因此大多數(shù)商家都希望在主頁(yè)上能夠顯示盡可能多的信息，而且希望將自己最希望讓別人了解的信息放 在最吸引目光的位置。 本系統(tǒng)的主頁(yè)是 文件，圖 53 是在線(xiàn)手機(jī)銷(xiāo)售系統(tǒng)的主頁(yè)面。 圖 53 在線(xiàn)手機(jī)銷(xiāo)售系統(tǒng)主頁(yè)面 客戶(hù)端界面結(jié)構(gòu)設(shè)計(jì) 在客戶(hù)端界面中，出于美觀(guān)考慮，沒(méi)有采用框架?？蛻?hù)端界面結(jié)構(gòu)是由頭（ ）、左惻快捷菜單（ ）、體和尾（ ）四部分組成。由于沒(méi)有使用框架，各個(gè)模塊的頁(yè)面需要在此的基礎(chǔ)上，在頁(yè)面結(jié)構(gòu)的 “體 ”處加入實(shí)現(xiàn)功能特點(diǎn)的頁(yè)面代碼。 界面頭、尾設(shè)計(jì) 為了提高代碼的重用性，與管理端界面類(lèi)似，把客戶(hù)端界面部分相同 的頭和尾做成兩個(gè)文件分別命名為 和 。在 中除了功能菜單以外，還集成了一個(gè)會(huì)員登陸功能，在 文件中調(diào)用 showmemberlogin()過(guò)程就是為了實(shí)現(xiàn)此功能的，其作用在線(xiàn)手機(jī)銷(xiāo)售網(wǎng)站 32 是根據(jù)會(huì)員是否登陸來(lái)顯示歡迎信息或登陸表單。 界面左惻快捷菜單設(shè)計(jì) 左惻快捷菜單包含三部分，分別是手機(jī)廠(chǎng)商、熱門(mén)商品和最優(yōu)惠商品。 文件的實(shí)現(xiàn)，它所包含的每一部分都是由一個(gè)表格（ table）構(gòu)成，由于需要頁(yè)面美化，其中每個(gè)表格都包含了一些 HTML 修飾代碼。 管理端界面結(jié)構(gòu)設(shè)計(jì) 進(jìn)行 ASP 應(yīng)用程序開(kāi)發(fā)的重要異步是設(shè)計(jì)一個(gè)一般的界面結(jié)構(gòu)，在這個(gè)結(jié)構(gòu)確定了之后，就可以將不同的內(nèi)容添加到這個(gè)框架中，這樣即便于整個(gè)網(wǎng)站統(tǒng)一風(fēng)格，也減少了界面設(shè)計(jì)的工作量。 在本系統(tǒng)中的界面結(jié)構(gòu)是由頭（ ），體（ iframe）和尾（ ）三部分組成。由于使用了框架（ iframe），于是只要將各個(gè)模塊的頁(yè)面裝入 iframe 即可，并且在這些頁(yè)面中無(wú)需包含頭和尾信息。 為了提高代碼的重用性，我把管理界面部分相同的頭和尾做成兩個(gè)文件分別命名為 和 。他們基本是純 HTML 代碼。 在線(xiàn)手機(jī)銷(xiāo)售網(wǎng)站 33 第 7 章 系統(tǒng)詳細(xì)設(shè)計(jì) 管理端界面設(shè)計(jì) 客戶(hù)端界面的大部分功能都是以管理端為前提的，因?yàn)榭蛻?hù)端所顯示的數(shù)據(jù)大部分需要通過(guò)管理端來(lái)添加。因此，先從管理端進(jìn)行開(kāi)發(fā)與設(shè)計(jì)。管理端相對(duì)客戶(hù)端要復(fù)雜一些，因?yàn)樵谶@里需要對(duì)所有信息進(jìn)行維護(hù)，包括瀏覽，增加，修改和刪除等操作。為了便于系統(tǒng)維護(hù)，頁(yè)面的命名采用 “模塊名 +功能名 ”的方式。 商品（手機(jī)） 管理設(shè)置 商品（手機(jī)） 管理設(shè)置 的主 要功能：顯示商品列表（ ），添加商品頁(yè)面（ ），保存添加的商品信息（ ），修改商品界面（ ），保存商品修改結(jié)果（ ），上傳圖片界面（ ），保存上傳圖片（ ），推薦或取消推薦商品（ ）。 商品維護(hù)模塊可以說(shuō)是在所有管理模塊中最復(fù)雜的一個(gè)，也是整個(gè)系統(tǒng)的核心，商品維護(hù)與廠(chǎng)商管理相比，難點(diǎn)在于不僅涉及數(shù)據(jù)較多，而且還涉及商品 圖片上傳，推薦或取消推薦商品等。 商品列表主要用到 這個(gè)文件，圖 61 為管理端商品列表的運(yùn)行結(jié)果，在這里可以看到它與廠(chǎng)商維護(hù)界面非常相似，這樣便于網(wǎng)站管理人員使用。 在線(xiàn)手機(jī)銷(xiāo)售網(wǎng)站 34 圖 61 管理端商品列表運(yùn)行結(jié)果 此頁(yè)的原理是每次訪(fǎng)問(wèn)此頁(yè)時(shí)，都會(huì)從 Request 對(duì)象的 QuerString 集合和 Form 集合中尋找以下三個(gè)參數(shù)： Page：當(dāng)前頁(yè)號(hào)，位于 QuerString集合中，如果找不到，默認(rèn)為 “1”。 Mykeyword：過(guò)濾產(chǎn)品的關(guān)鍵字，位于 Form 集合中，如果找不 到，默認(rèn)為空。 Producttype：產(chǎn)品類(lèi)型編號(hào)，位于 Form 集合中，如果找不到，默認(rèn)為 “0”。 然后根據(jù) mykeyword 和 producttype 的只值來(lái)組織 SQL語(yǔ)句從 product 表中檢索數(shù)據(jù)。另外，由于本頁(yè)需要在下拉列表中顯示所有的廠(chǎng)商名稱(chēng)，并且在商品列表中也有相應(yīng)的列需要顯示廠(chǎng)商名稱(chēng)，所以需要在檢索 product 表之前先從 producttype表中檢索出所有的廠(chǎng)商編號(hào)和名稱(chēng)。 添加商品用到 和 兩個(gè)文件，圖 62 為在商品列表頁(yè)面中單擊[添加 ]按鈕后所看到的添加商品頁(yè)面。從圖中可以看到，在添加商品時(shí)仍需要一個(gè)下拉列表框指定它所屬的廠(chǎng)商，在這里一定要對(duì)輸入進(jìn)行驗(yàn)證，包括輸入是否為空，所輸入的價(jià)格必須是數(shù)字，以及輸入長(zhǎng)度的限制等。這些是純 HTML 和 JavaScript 技巧。 在線(xiàn)手機(jī)銷(xiāo)售網(wǎng)站 35 圖 62 添加商品頁(yè)面 在添加商品截面中單擊 [添加 ]按鈕后，就會(huì)將數(shù)據(jù)提交到 文件中，這個(gè)文件將 文件所提交的數(shù)據(jù)寫(xiě)到數(shù)據(jù)庫(kù)中，其實(shí)原理與天家廠(chǎng)商很相似，就是將一個(gè)表單中的數(shù)據(jù)利用 ADO 對(duì)象或 SQL 語(yǔ)句寫(xiě)入到數(shù)據(jù)庫(kù)中。 在這個(gè)頁(yè)面中，仍然要注意操作完數(shù)據(jù)庫(kù)以后，要手工釋放連接。另外，這里只進(jìn)行了簡(jiǎn)單的數(shù)據(jù)驗(yàn)證，如果提交的價(jià)格不是數(shù)字的話(huà)，加工它們默認(rèn)置為 “1”，而不恩能夠直接用 CInt 轉(zhuǎn)為 “0”，否則在將來(lái)計(jì)算商品打折時(shí)由于分母為 “0”會(huì)出錯(cuò)。 修改商品用到文件 和 。修改商品與添加商品的界面非常相似，事實(shí)上也的確如此，所不同的是，在 元素中，而在 中根本不存在檢索商品數(shù)據(jù)的問(wèn)題。 商品 ID 通過(guò) URL參數(shù)傳入，因此首先要從 Request 的 QueryString集合中取出商品 ID，并需要將其兩邊的空格和可能存在的單引號(hào)去除，然后組織 SQL 語(yǔ)句刪除。這里的原理很簡(jiǎn)單，但仍然要注意的是安全問(wèn)題，在用 id 后，必須對(duì)其合法性進(jìn)行判斷。 商品管理程序流程圖如下圖 63 所示： 商