【文章內(nèi)容簡介】 較大，一般字色為默認(rèn)的灰色，并且用了不同的背景色條區(qū)分正文區(qū)與其他功能區(qū)。為了提高網(wǎng)頁的可讀性。首頁商品列表主要是以大圖橫向排列，簡約美觀。商品頁面采用品頁面采用商品圖片加詳細(xì)的商品屬性。在網(wǎng)站定位思想的指導(dǎo)下，考慮到上述的整改方案，擬將網(wǎng)站組織為“首頁”，“分類頁”，“商品頁”三大主體頁面。這三大頁面構(gòu)成了網(wǎng)站的主要內(nèi)容。三大頁面具體內(nèi)容如下：（1）首頁：主要包含LOGO，導(dǎo)航菜單功能，搜索功能，flash幻燈片廣告功能，以及商品信息，友情鏈接等功能，具體結(jié)構(gòu)圖如下圖11所示。圖11 首頁布局圖（2）分類頁：主要包含LOGO，導(dǎo)航菜單功能，搜索功能，分類導(dǎo)航菜單，分類廣告大圖，商品品牌篩選功能以及商品列表等，具體結(jié)構(gòu)圖如下圖12所示。圖12 分類頁布局圖（3）商品頁：主要包含LOGO，導(dǎo)航菜單功能，搜索功能，分類導(dǎo)航菜單，商品展示大圖，商品放大鏡功能以及商品相冊功能，商品包含商品屬性和商品的詳細(xì)信息調(diào)用，同時(shí)也能根據(jù)相似商品調(diào)用同類商品功能，最后包含一個(gè)功能比較簡單的留言板，具體結(jié)構(gòu)圖如下圖13所示。圖13 商品頁布局圖 網(wǎng)站模塊結(jié)構(gòu)網(wǎng)站基本結(jié)構(gòu)主要分為三大模塊，分別為網(wǎng)站前臺(tái)模塊和后臺(tái)管理模塊，結(jié)構(gòu)圖如圖14所示。資訊/評論管理模塊送貨/付款方式模塊注冊會(huì)員管理模塊訂單管理模塊商品管理模塊會(huì)員用戶中心模塊會(huì)員登陸注冊模塊積分模塊活動(dòng)模塊購物車模塊商品瀏覽模塊網(wǎng)站基本結(jié)構(gòu)圖后臺(tái)管理模塊網(wǎng)站前臺(tái)模塊圖14 網(wǎng)站模塊結(jié)構(gòu)圖 前臺(tái)主要功能前臺(tái)作為與用戶直接交互的界面，在考慮功能的同時(shí)，也考慮了操作的簡潔和方便性，目的是讓一些對電腦操作不熟悉的客戶，也能輕松的在騎行天下商城中購買，挑選自己滿意的商品。（1）用戶中心用戶注冊：每一個(gè)瀏覽該網(wǎng)站的用戶，如果想要對騎行天下商城的商品進(jìn)行收藏，購買及相關(guān)信息進(jìn)行評論，首先必須成為注冊用戶。用戶注冊成功后，網(wǎng)站將該用戶的所有注冊信息保存到數(shù)據(jù)庫中，而這些信息將作為用戶以后登錄和網(wǎng)站提供更多服務(wù)時(shí)的依據(jù)。用戶登錄：用戶在此登錄，判別身份，并且對自己的注冊信息進(jìn)行修改，更新自己的信息。用戶信息：用戶在注冊的時(shí)候輸入的信息會(huì)出現(xiàn)在該用戶登陸以后的用戶中心里，在選擇用戶中心的用戶信息可以找到注冊時(shí)用戶提交給網(wǎng)站的用戶信息，同時(shí)，用戶可以在登陸以后對用戶信息進(jìn)行修改。訂單管理：用戶通過購買自行車商城的商品生成的購物訂單會(huì)出現(xiàn)在用戶中心的訂單管理中，商城管理員對用戶的訂單的處理結(jié)果也會(huì)出現(xiàn)在訂單管理中。（2）商品信息管理熱賣商品信息瀏覽：點(diǎn)擊首頁熱賣商品，用戶可以瀏覽自行車商城銷量最好的商品。精品推薦商品信息瀏覽：點(diǎn)擊首頁推薦商品，用戶可以瀏覽最近推薦的商品。新品上架信息瀏覽：點(diǎn)擊首頁新品上架，用戶可以瀏覽最新更新的商品。（3）搜索快速搜索：在輸入欄里添加所需商品的類別或名稱，點(diǎn)擊快速搜索，在所給商品列表里選擇相應(yīng)的商品。按上架時(shí)間，價(jià)格，更新時(shí)間排序搜索。物品有價(jià)格高低之分，而且會(huì)根據(jù)上架時(shí)間顯示不同排序，這樣用戶就可以根據(jù)自己的需要鎖定更精確的商品。（4）購物車購買：用戶點(diǎn)擊購買商品，商品即添加購物車，添加到購物車的商品，可以點(diǎn)擊刪除或添加到收藏等操作，也可會(huì)到首頁繼續(xù)選擇自己心儀的商品。結(jié)算中心：確定購買后，進(jìn)入到結(jié)算，結(jié)算頁面會(huì)出現(xiàn)用戶商品信息，用戶信息，支付方式，配送方式等等，點(diǎn)擊結(jié)算進(jìn)入支付。 后臺(tái)主要功能后臺(tái)管理系統(tǒng)是管理員登陸查看網(wǎng)站中所有的數(shù)據(jù)、添加網(wǎng)站新聞、修改或刪除所有的信息，同時(shí)可以刪除本網(wǎng)站的無效的客戶信息等等。（1）管理員登陸提供管理員后臺(tái)登陸驗(yàn)證功能，采用驗(yàn)證碼技術(shù)，而且在系統(tǒng)里對管理員密碼進(jìn)行md5加密算法加密，以免非管理員權(quán)限用戶進(jìn)入后臺(tái)數(shù)據(jù)庫修改管理員密碼，進(jìn)行非正常操作。對后臺(tái)管理員進(jìn)行權(quán)限分配和添加、修改、刪除。（2）商品管理發(fā)布商品的基本信息，并能對其進(jìn)行添加、修改、刪除。（3）商品類別的管理提供商品類別添加，刪除，修改，轉(zhuǎn)移和商品大小類的添加，刪除，修改功能。（4）訂單管理對注冊用戶根據(jù)購買的商品信息所提交的訂單進(jìn)行管理，回復(fù)和支付控制功能。（5）注冊會(huì)員管理 管理該系統(tǒng)的注冊會(huì)員，包括對注冊會(huì)員的審核，刪除等功能，但為了尊重注冊會(huì)員的信息所有，不提供管理員對注冊會(huì)員信息的修改功能。（6）資訊管理在網(wǎng)站內(nèi)進(jìn)行新聞的發(fā)布和更新，提供管理員對新聞?lì)悇e的管理和新聞內(nèi)容的管理功能。（7）評論管理管理員對注冊用戶提交的留言進(jìn)行回復(fù)，和對該留言的刪除功能，同時(shí)也提供管理員發(fā)布系統(tǒng)的留言公告功能。（9）送貨/付款方式管理員根據(jù)需求對送貨方式和支付方式進(jìn)行添加、修改、刪除以及需要支付的款項(xiàng)數(shù)目。5 系統(tǒng)實(shí)現(xiàn) 首頁功能實(shí)現(xiàn)根據(jù)商城針對自行車簡明分類的定位思想，騎行天下商城采用的專注產(chǎn)品的設(shè)計(jì)思路，所以首頁的設(shè)計(jì)給人的感覺是簡單明了的。如圖15展示部分首頁截圖。圖15 首頁部分代碼如下：!DOCTYPE html PUBLIC //W3C//DTD XHTML Transitional//EN html xmlns=headmeta equiv=ContentType content=text/html。 charset=utf8 /meta name=Keywords content=自行車 /meta name=Description content=騎樂無窮 /title騎樂無窮/titlelink rel=shortcut icon href= /link rel=icon href= type=image/gif /link href=themes/ecmoban_yiguosg/ rel=stylesheet type=text/css /link rel=alternate type=application/rss+xml title=RSS|騎樂無窮 href= /script type=text/javascript src=js//scriptscript type=text/javascript src=js//script/headbody class=index_pagescript type=text/javascriptvar process_request = 正在處理您的請求...。/script搜索功能：搜索對于商城而言是很重要的一個(gè)功能，個(gè)人覺得從設(shè)計(jì)角度來說它的重要性是僅次于購物流程中的購物車功能。首頁在設(shè)計(jì)上讓頁面有明顯搜索框，搜索根據(jù)用戶操作判斷語句實(shí)現(xiàn)來檢索用戶的需求，用JavaScript判斷keywords為真或假的函數(shù)返回?cái)?shù)值，然后提交到checkSearchForm()。如圖16所示。圖16 網(wǎng)站搜索功能部分代碼如下：div class=top_search script type=text/javascript ! function checkSearchForm() { if((39。keyword39。).value) { return true。 } else { alert(請輸入搜索關(guān)鍵詞！)。 return false。 } } /script form id=searchForm name=searchForm method=get action= onSubmit=return checkSearchForm() style=_position:relative。 top:5px。input name=keywords type=text id=keyword class=keyword value= / input value= id=seachbtn type=submit /form /div產(chǎn)品列表是很重要的一個(gè)板塊，其發(fā)布功能類似于信息發(fā)布，根據(jù)后臺(tái)發(fā)布商品屬性來實(shí)現(xiàn)不同的調(diào)用，如首頁展示的新品上架，熱賣商品，精品推薦等等，是根據(jù)商品的后臺(tái)屬性來實(shí)現(xiàn)的。產(chǎn)品列表圖如圖17所示。圖17 產(chǎn)品列表部分代碼如下：div class=xmboxh4 class=titlespan熱賣商品/span a class=more href=?intro=hot更多/a/h4div class=blank/divdiv id=show_hot_area class=clearfixdiv class=goodsItema href=?id=32img src=images/201411/thumb_img/ alt=永久C 自行車復(fù)古男車 北山零壹 class=goodsimg //abr /p class=f1a href=?id=32 title=永久C 自行車復(fù)古男車 北山零壹 永久C 自行車.../a/p市場價(jià)：font class=market￥1440元 /fontbr/ 本店價(jià)：font class=f1￥1200元/font /div首先根據(jù)內(nèi)置IF語句判斷商品分類，如熱賣商品用到! {if $hot_goods} 。然后利用{foreach from=$xxx tem=xxx}：循環(huán)來實(shí)現(xiàn)商品的循環(huán)調(diào)用商品個(gè)數(shù)有后臺(tái)設(shè)置實(shí)現(xiàn)，由程序變量控制。歷史瀏覽：主要有history變量實(shí)現(xiàn)這個(gè)功能模塊是用js實(shí)現(xiàn)css存在部分瀏覽器的兼容問題，本地測試存在這方面的問題，線上瀏覽正常。歷史瀏覽記錄用戶所瀏覽的信息用戶可以選擇清除瀏覽來實(shí)現(xiàn)clear掉歷史瀏覽，(39。[1]39。， 39。act=clear_history39。，clear_history_Response， 39。GET39。，39。TEXT39。，1，1) clear_history函數(shù)表單事件，歷史瀏覽如圖18所示。 分類頁功能實(shí)現(xiàn)分類頁包含了導(dǎo)航菜單功能，搜索功能，分類導(dǎo)航菜單，分類廣告大圖，商品品牌篩選功能以及商品列表等。分類頁的部分截圖如圖19所示。圖19 分類頁部分代碼如下：div class=block boxdiv class=blank/divdiv id=ur_here當(dāng)前位置: a href=.首頁/a codeamp。gt。/code a href=?id=16復(fù)古車/a /div/divdiv class=blank/divdiv class=block clearfixdiv class=AreaLdiv id=category_tree style=margintop:8px。 div class=tit所有商品分類/div dl class=clearfix div class=box1 cate id=cate 商品篩選首先判斷是否在網(wǎng)站存在該商品的品牌屬性，如果存在，會(huì)在商品篩選的品牌列表顯示出來。品牌列表如圖20所示。圖20 品牌列表部分代碼如下： div class=box div class=box_1 h3span商品篩選/span/h3 div class=screeBox strong品牌：/strong span全部/spana href=?id=16amp。amp。brand=12amp。amp。price_m