基于虛擬社區(qū)的下沙商貿(mào)網(wǎng)設(shè)計(jì) 第二屆XX省大學(xué)生電子商務(wù)競賽參賽作品

1、基于虛擬社區(qū)的下沙商貿(mào)網(wǎng)設(shè)計(jì)目錄1 作品應(yīng)用背景22 系統(tǒng)功能介紹2.1 總體功能介紹22.2 詳細(xì)功能介紹2.2.1用戶功能3 2.2.2 商家功能4 2.2.3 管理員43 技術(shù)方案實(shí)現(xiàn)3.1技術(shù)框架3.1.1 ASP簡介43.1.2 ASP的特點(diǎn)43.1.3 ASP運(yùn)行環(huán)境5 3.2代碼設(shè)計(jì)63.3 數(shù)據(jù)庫設(shè)計(jì)163.4頁面設(shè)計(jì)3.4.1 重點(diǎn)推薦方式173.4.2鼠標(biāo)經(jīng)過方式174 作品價(jià)值181. 作品應(yīng)用背景杭州下沙地處杭州東部，隨著這幾年國家級開發(fā)區(qū)杭州經(jīng)濟(jì)技術(shù)開發(fā)區(qū)、全國最大的高教園區(qū)浙江省高教園區(qū)、浙江杭州出口加工區(qū)等落戶下沙，充分帶動(dòng)了下沙地區(qū)的經(jīng)濟(jì)發(fā)展。流動(dòng)人口數(shù)量不斷上

2、升，越來越多的人選擇入住下沙。各種飯店、游樂場所、大型購物商城也紛紛在下沙出現(xiàn)，滿足了人們多方面的物質(zhì)需求?？墒切聛硐律车淖?、新生、上班族卻對此地區(qū)不勝了解，并且有越來越多的新商鋪將落戶下沙。由此，我們想到了有必要做一個(gè)專門針對下沙地區(qū)商貿(mào)的網(wǎng)站，以方便在下沙生活、工作學(xué)習(xí)的人能找到自己想要購物娛樂場所。目前已有一些網(wǎng)站的提供相似的信息，比如下沙網(wǎng)（），下沙大學(xué)生生網(wǎng)（）等。這些網(wǎng)站的大都涉及下沙的方方面面，內(nèi)容多卻并不是很具體，針對性不強(qiáng)。比如某人聽說一家飯店不錯(cuò)想去那吃飯，但他不知道此飯店的具體位置在哪里，上網(wǎng)搜索基本都是一些文字介紹，諸如某飯店在*路*號(hào)，這個(gè)時(shí)候用戶就需要再去找一張地

3、圖，才能確認(rèn)比較具體的方位，因此十分不方便。基于這樣的需求，我們考慮將電子地圖與商貿(mào)信息介紹相結(jié)合， 使用戶只要上本網(wǎng)站就能很快找到自己想去的地方，并知道它的具體地理位置。根據(jù)此思路，我們開發(fā)了本網(wǎng)站。2. 系統(tǒng)功能介紹2.1. 總體功能用戶的對信息的需求都有各自具體情況以及喜好，一般的簡答查詢往往不能滿足用戶他們。由此本站為用戶提供多種查詢方式以及詳細(xì)的商家分布和經(jīng)營內(nèi)容信息。+2.2. 詳細(xì)功能2.2.1 用戶模糊搜索：當(dāng)用戶對自己所要的信息不能有一個(gè)明確的搜索關(guān)鍵字的時(shí)候，如：某用戶想要找個(gè)地方吃飯，可他又不知道在下沙有哪個(gè)好的飯店，或是他想換換口味，這個(gè)時(shí)候模糊搜索就是他最好的選擇。使

4、用模糊搜索可以自動(dòng)搜索關(guān)鍵字的同義詞,提高搜索的精確性。首先在模糊搜索頁面搜索框中輸入搜索關(guān)鍵字以后點(diǎn)擊模糊搜索按鈕，然后進(jìn)入同義詞選擇頁面,從關(guān)鍵字的同義詞中選擇自己想要查看的信息。精確搜索：當(dāng)然精確搜索自然必不可少，如知道下沙有肯德基的分店卻不知道它的具體位置，用精確搜索就能讓你馬上得到自己想要的信息。地圖搜索：為什么人們不論是外出還是去旅游，地圖是必備品之一，就是因?yàn)樗芙o人以比較直觀認(rèn)識(shí)，讓人能在大腦中形成一個(gè)現(xiàn)實(shí)立體的形象?；谶@個(gè)原因，我們想到了為什么不把電子地圖與商貿(mào)信息相結(jié)合，使用戶在了解商家經(jīng)營內(nèi)容和特色的同時(shí)，又能對之地理分布有一個(gè)直觀的印象呢。地圖搜索正是解決了以上的問題

5、。這是本站最吸引用戶瀏覽的功能之一?；?dòng)區(qū)：網(wǎng)絡(luò)的發(fā)展已越來越向互動(dòng)方向發(fā)展。無論是網(wǎng)站于商家，網(wǎng)站與用戶，還是商家通過本站與用戶，通過互動(dòng)，都能對自身的發(fā)展及利益帶來巨大的益處。本站可以及時(shí)更新信息，商家則能盡快知道用戶的需求，而用戶則能結(jié)識(shí)好友，以及信息反饋。2.2.2 商家注冊會(huì)員：只有成為本站的注冊會(huì)員才有權(quán)益本站提供的各種服務(wù)，并有義務(wù)遵守本站的規(guī)定。信息發(fā)布：當(dāng)商家在某段時(shí)間要推出優(yōu)惠措施，或是有新產(chǎn)品推出的時(shí)候都可以將信息發(fā)給本站，在本站發(fā)布。2.2.3 管理員添加刪除會(huì)員：添加新會(huì)員，刪除已不存在會(huì)員，這是管理員所擁有的基本權(quán)利之一。消息更新：及時(shí)對商家發(fā)來的商品信息加以處理，

6、并對已有信息加以更新。信息反饋：對用戶對商家的意見及投訴及時(shí)反饋給商家，讓商家能及時(shí)與顧客取得聯(lián)系。3. 技術(shù)方案實(shí)現(xiàn)3.1. 技術(shù)框架本站采用ASP+SQL SERVER 2000的技術(shù)架構(gòu)。之所以采用這種技術(shù)結(jié)構(gòu)是因?yàn)锳SP所有程序都將在服務(wù)器端實(shí)現(xiàn)的特點(diǎn)以及SQL SERVER 2000的功能強(qiáng)大、操作簡便性。3.1.1 ASP簡介Microsoft Active Server Pages 即我們所稱的 ASP ，其實(shí)是一套微軟開發(fā)的服務(wù)器端腳本環(huán)境， ASP 內(nèi)含于 IIS 3.0 和 4.0 之中 , 通過 ASP 我們可以結(jié)合 HTML 網(wǎng)頁、 ASP 指令和 ActiveX 元件

7、建立動(dòng)態(tài)、交互且高效的 WEB 服務(wù)器應(yīng)用程序。有了 ASP 你就不必?fù)?dān)心客戶的瀏覽器是否能運(yùn)行你所編寫的代碼，因?yàn)樗械某绦蚨紝⒃诜?wù)器端執(zhí)行，包括所有嵌在普通 HTML 中的腳本程序。當(dāng)程序執(zhí)行完畢后，服務(wù)器僅將執(zhí)行的結(jié)果返回給客戶瀏覽器，這樣也就減輕了客戶端瀏覽器的負(fù)擔(dān)，大大提高了交互的速度。3.1.2 ASP的特點(diǎn)1. 使用 VBScript 、 JScript 等簡單易懂的腳本語言，結(jié)合 HTML 代碼，即可快速地完成網(wǎng)站的應(yīng)用程序。 2. 無須 compile 編譯，容易編寫，可在服務(wù)器端直接執(zhí)行。 3. 使用普通的文本編輯器，如 Windows 的記事本，即可進(jìn)行編輯設(shè)計(jì)。 4.

8、 與瀏覽器無關(guān) (Browser Independence), 用戶端只要使用可執(zhí)行 HTML 碼的瀏覽器，即可瀏覽 Active Server Pages 所設(shè)計(jì)的網(wǎng)頁內(nèi)容。 Active Server Pages 所使用的腳本語言 (VBScript 、 Jscript) 均在 WEB 服務(wù)器端執(zhí)行，用戶端的瀏覽器不需要能夠執(zhí)行這些腳本語言。 5.Active Server Pages 能與任何 ActiveX scripting 語言相容。除了可使用 VBScript 或 JScript 語言來設(shè)計(jì)外，還通過 plug-in 的方式，使用由第三方所提供的其他腳本語言，譬如 REXX 、

9、Perl 、 Tcl 等。腳本引擎是處理腳本程序的 COM(Component Object Model) 物件。 6.Active Server Pages 的源程序，不會(huì)被傳到客戶瀏覽器，因而可以避免所寫的源程序被他人剽竊，也提高了程序的安全性。 7. 可使用服務(wù)器端的腳本來產(chǎn)生客戶端的腳本。 8. 物件導(dǎo)向（ Object-oriented ）。 9.ActiveX Server Components(ActiveX 服務(wù)器元件 ) 具有無限可擴(kuò)充性?？梢允褂?Visual Basic 、 Java 、 Visual C+ 、 COBOL 等編程語言來編寫你所需要的 ActiveX Se

10、rver Component 。3.1.3 ASP運(yùn)行環(huán)境·Microsoft Internet Information Server version 3.0/4.0 on Windows NT Server ·Microsoft Peer Web Services Version 3.0 on Windows NT Workstation ·Microsoft Personal Web Server on Windows 95/98 asp 程序無須編譯， ASP 程序的控制部份，是使用 VBScript 、 JScript 等腳本語言來設(shè)計(jì)的，當(dāng)執(zhí)行 ASP

11、程序時(shí)，腳本程序?qū)⒁徽酌畎l(fā)送給腳本解釋器 ( 即腳本引擎 )，由腳本解釋器進(jìn)行翻譯并將其轉(zhuǎn)換成服務(wù)器所能執(zhí)行的命令。當(dāng)然，同其他編程語言一樣， ASP 程序的編寫也遵循一定的規(guī)則，如果你想使用你所喜愛的腳本語言編寫 ASP 程序，那么你的服務(wù)器上必須要有能解釋這種腳本語言的腳本解釋器。當(dāng)你安裝 ASP 時(shí)，系統(tǒng)提供了兩種腳本語言： VBsrcipt 和 JScript ，而 VBscript 則被作為系統(tǒng)默認(rèn)的腳本語言。3.2. 代碼設(shè)計(jì)（部分）<HTML><HEAD><TITLE>會(huì)員注冊 </TITLE><META HTTP-EQU

12、IV="Content-Type" CONTENT="text/html; charset=gb2312"><link rel="stylesheet" href="css/pub20040831.css"></HEAD><BODY BGCOLOR=#FFFFFF leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><

13、script language=JavaScript>function chkname() var k = document.memberform.login.value.length; if ( k >= 3 ) if ( k <= 16) document.ckname.login.value = document.memberform.login.value; document.ckname.submit();else alert("會(huì)員名長度不得大于16位！");else alert("會(huì)員名長度不得小于3位！");</s

14、cript><script language="JavaScript">function checkdata() if(memberform.login.value.length < 3 | memberform.login.value.length > 16) memberform.login.focus(); memberform.login.select(); alert("請您輸入用戶名（3至16位） ！"); else if(memberform.login.value.charAt(0)=1 &&

15、 memberform.login.value.charAt(1)=3) memberform.login.focus(); memberform.login.select(); alert("用戶名不能以13開頭 ！"); else if(memberform.login.value.charAt(0)='_') memberform.login.focus(); memberform.login.select(); alert("用戶名不能以_開頭 ！"); else if(checkerr(memberform.login.valu

16、e)=1) memberform.login.focus(); memberform.login.select(); alert("請用0-9的數(shù)字和a-z的字母，不允許怪字符（如!#$%等） ！"); else if(memberform.passwd.value.length < 4 | memberform.passwd.value.length > 16) memberform.passwd.focus(); memberform.passwd.select(); alert("請您輸入密碼（4至16位） ！"); else if(m

17、emberform.pass2.value.length=0) memberform.pass2.focus(); memberform.pass2.select(); alert("請您確認(rèn)您輸入的密碼 ！"); else if(memberform.passwd.value!=memberform.pass2.value) memberform.pass2.focus(); memberform.pass2.select(); alert("確認(rèn)密碼不一樣 !"); else if(memberform.question.value.length=0

18、) memberform.question.focus(); memberform.question.select(); alert("密碼提示問題不能為空 ！"); else if(memberform.answer.value.length=0) memberform.answer.focus(); memberform.answer.select(); alert("密碼提示答案不能為空 ！"); else if(memberform.mail.value.length=0) alert("郵箱地址不能為空 !") member

19、form.mail.focus(); memberform.mail.select(); else if( memberform.mail.value.length<6 | memberform.mail.value.length>36 | !validateEmail() ) alert("請您輸入正確的郵箱地址 !"); memberform.mail.focus(); memberform.mail.select(); else if( !(memberform.gender0.checked | memberform.gender1.checked) )

20、 alert("請選擇性別 !");else if( memberform.state.value = "" ) alert("請選擇地區(qū) !");<!-else if(memberform.verify.value="" | memberform.verify.value.length < 6 | memberform.verify.value.length > 6)-><!- alert("驗(yàn)證碼出錯(cuò) ！"); -> else return true; r

21、eturn false;function validateEmail()var re=/w-+(.*w-+)*(0-9a-z+0-9a-z-*0-9a-z+.)+a-z2,3$/i;if(re.test(memberform.mail.value)return true;elsereturn false;function checkerr(string)var i=0;for (i=0; i<string.length; i+)if(string.charAt(i) < '0' | string.charAt(i) > '9') &&a

22、mp; (string.charAt(i) < 'a' | string.charAt(i) > 'z') && (string.charAt(i) < 'A' | string.charAt(i) > 'Z') && (string.charAt(i)!='_') return 1;return 0;/pass</script><table width="760" border="0" align=&

23、quot;center" cellpadding="0" cellspacing="0"></table><table width="760" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="53" ><table width="760" bor

24、der="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="30"><div align="right">注冊步驟：1.確認(rèn)服務(wù)條款 - 2.<font color="#FF0000">選擇用戶名</font> - 3.完成注冊</div></td> </tr> <

25、/table></td> </tr></table><table height="1" width="760" border=0 cellspacing=0 cellpadding=0> <form name=ckname method=POST action="findmember.asp" target="check_name"><input type="hidden" name="login" va

26、lue=""><tr><td></td></tr></form></table><table width="760" border="0" align="center" cellpadding="0" cellspacing="1"><form name=memberform action="addRecord.asp" method="POST&qu

27、ot; onsubmit="return checkdata()"><input type="hidden" name="t" size="40" value="minfo"><input type="hidden" name="f" size="40" value="adding"><input type="hidden" name="v"

28、 size="40" value=""> <tr> <td width="500" height="65" bgcolor="B8DDFE"> <table width="440" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="

29、;120" height="20"><div align="right"><font color="#FF0000">*</font> 會(huì)員名：</div></td> <td><span class="12"> </span> <table width="100%" border="0" cellspacing="0" cellpaddin

30、g="0"> <tr> <td><span class="12"> <input tabindex=1 name="login" type="text" style="font-size: 12px; border: 1 solid #29A1E6; background-color:#ffffff" value="" size="20"> </span></td> <td

31、 width="5"><span class="12"> </span></td> <td><span class="12"> <input type=button name=Submit value="查看用戶名是否可用" onClick="javascript:chkname();"> </span></td> </tr> </table></td> &l

32、t;/tr> <tr> <td></td> <td>合法的會(huì)員帳號(hào)應(yīng)該由a-z的小寫英文字母、0-9的數(shù)字或下劃線組成，帳號(hào)長度應(yīng)在3-16個(gè)字符之間請勿使用空白鍵。</td> </tr> </table> </td> <td rowspan="3" valign="top" bgcolor="DFEFFD"><br> <table width="90%" border="0

33、" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <iframe id=check_name name=check_name src="findmember.asp" style='height:80px;width:200px' Frameborder=No Border=0 Marginwidth=0 Marginheight=0 Scrolling=No></ifra

34、me></td></tr></table> <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><p></p> </td> </tr> </table> </td> </tr> <tr> <td b

35、gcolor="B8DDFE"><table width="440" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="120" height="20"><div align="right"><font color="#FF0000">

36、;*</font> 密碼：</div></td> <td><span class="12"> <input tabindex=2 type="password" name=passwd size=20 value="" style="font-size: 12px; border: 1 solid #29A1E6; background-color:#ffffff"> </span></td> </tr> &

37、lt;tr> <td height="20"></td> <td>密碼可使用長度為6-14的任何字符，并區(qū)分英文字母大小寫</td> </tr> <tr height="5"> <td></td> <td></td> </tr> </table></td> </tr> <tr> <td bgcolor="B8DDFE"><table

38、width="440" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="120" height="20"><div align="right"><font color="#FF0000">*</font> 確認(rèn)密碼：</div></t

39、d> <td><span class="12"> <input tabindex=3 type="password" name=pass2 size=20 value="" style="font-size: 12px; border: 1 solid #29A1E6; background-color:#ffffff"> </span></td> </tr> </table></td> </tr> &

40、lt;tr> <td bgcolor="B8DDFE"><table width="440" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="120" height="20"><div align="right"><font color=&quo

41、t;#FF0000">*</font> 提示問題：</div></td> <td><span class="12"> <input tabindex=4 name="question" type="text" value="" size=35 maxlength=80 style="font-size: 12px; border: 1 solid #29A1E6; background-color:#ffffff"

42、> </span></td> </tr> <tr height="8"> <td></td> <td></td> </tr> </table></td> <td rowspan="3" bgcolor="DFEFFD"><table width="90%" border="0" align="center" cellpad

43、ding="0" cellspacing="0"> <tr> <td><strong>密碼查詢設(shè)置</strong><br> 當(dāng)您忘記密碼時(shí)，我們將通過此信息驗(yàn)證您的身份，幫助您找回密碼。</td> </tr> </table></td> </tr> <tr> <td bgcolor="B8DDFE"><table width="440" border=&quo

44、t;0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="120" height="20"><div align="right"><font color="#FF0000">*</font> 提示答案：</div></td> <td><span class=&q

45、uot;12"> <input tabindex=5 name=answer type=text value="" size=35 maxlength=80 style="font-size: 12px; border: 1 solid #29A1E6; background-color:#ffffff"> </span></td> </tr> <tr> <td height="20"></td> <td>密碼提示答案請?jiān)冢?/p>

46、8個(gè)字母、數(shù)字或8個(gè)漢字以上。</td> </tr> </table></td> </tr> <tr> <td height="20" bgcolor="B8DDFE"><table width="440" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td w

47、idth="120" height="20"><div align="right"> <font color="#FF0000">*</font> E-mail：</div></td> <td><span class="12"> <input tabindex=6 name=mail type=text id="mail" size=35 value="" st

48、yle="font-size: 12px; border: 1 solid #29A1E6; background-color:#ffffff"> </span></td> </tr> <tr> <td height="20"></td> <td>當(dāng)您忘記密碼時(shí)，用于取回密碼。</td> </tr> </table></td> </tr> <tr> <td height="16&

49、quot; bgcolor="B8DDFE"><table width="440" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="120" height="20"><div align="right"><font color="#FF0000&q

50、uot;>*</font> 真實(shí)姓名： </div></td> <td><span class="12"> <input tabindex=7 name="realname" value="張三"> </span></td> </tr> <tr> <td width="120" height="20"><div align="right&quo

51、t;><font color="#FF0000">*</font> 性別： </div></td> <td><span class="12"> <input tabindex=8 type=radio name="gender" value="男"> 男 <input type=radio name="gender" value="女"> 女</span><

52、/td> </tr> <tr> <td width="120" height="20"><div align="right"><font color="#FF0000">*</font> 聯(lián)系地址： </div></td> <td><span class="12"> <input tabindex=9 name="address" size=35

53、 value=""> </span></td> </tr> <tr> <td width="120" height="20"><div align="right"><font color="#FF0000">*</font> 郵政編碼： </div></td> <td><span class="12"> <input ta

54、bindex=10 name="postcode" size=10 value=""> </span></td> </tr> <tr> <td width="120" height="20"><div align="right"><font color="#FF0000">*</font> 聯(lián)系方法： </div></td> <td><

55、;span class="12"> 電話：<input tabindex=11 size=11 name="telphone" > 手機(jī)：<input size=11 name="cellphone" > </span></td> </tr> <tr> <td width="120" height="20"><div align="right"><font color=

56、"#FF0000">*</font> 出生日期： </div></td> <td><span class="12"> <input tabindex=12 name="birth" size=10 value="1981-1-1"> </span></td> </tr> <tr> <td width="120" height="20"><div align="right"><font color="#FF0000">*</font> 身份證號(hào)碼： </div></td> <td><span class="12"> <input tabindex=12 name="idCard" size=18 value=""> </span></td> </tr> &