原創(chuàng)】電子商務(wù)網(wǎng)站原型設(shè)計(jì)畢業(yè)論文設(shè)計(jì)

1、電子商務(wù)網(wǎng)站原型設(shè)計(jì)Prototypi ng Desig n of E-commerce Website學(xué)生姓名謝道賢學(xué)號(hào) 201011611122所在學(xué)院信息學(xué)院班級(jí)電子1113所在專業(yè)電子信息工程申請(qǐng)學(xué)位工學(xué)學(xué)士指導(dǎo)教師李小立職稱講師副指導(dǎo)教師職稱答辯時(shí)間2015年6月6日設(shè)計(jì)總說(shuō)明I.INTRODUCTION III第1章緒論11.1網(wǎng)站打印機(jī)產(chǎn)生的背景11.2設(shè)計(jì)電子商務(wù)網(wǎng)站原型系統(tǒng)的目的及意義 21.3課題引入21.4課題研究的內(nèi)容31.5本章小結(jié)3第2章系統(tǒng)總設(shè)計(jì)32.1系統(tǒng)需求分析32.1.1總體結(jié)構(gòu)框圖32.2本章小結(jié)4第3章場(chǎng)景應(yīng)用43.1電腦版和手機(jī)版43.2場(chǎng)景演示63.

2、2.1場(chǎng)景A演示介紹 63.2.2場(chǎng)景B演示介紹 123.3菜單搜索功能163.4電腦版場(chǎng)景A173.5企業(yè)簡(jiǎn)介、聯(lián)系我們 173.6本章小結(jié)17第4章系統(tǒng)設(shè)計(jì)開發(fā)過(guò)程 174.1總體思路174.2需求分析174.3確定網(wǎng)站風(fēng)格184.4設(shè)計(jì)功能模塊184.5 確定 目錄結(jié)構(gòu)和主頁(yè)欄目 184.6數(shù)據(jù)庫(kù)鏈接184.7 Div和表格布局、CSS美化界面194.8 javascript特效和部分功能 204.9系統(tǒng)調(diào)試過(guò)程224.10 完工22第5章后臺(tái)管理功能225.1登錄介紹 235.2產(chǎn)品排序介紹 245.3產(chǎn)品增刪改功能介紹、產(chǎn)品詳細(xì)編輯功能介紹 275.4優(yōu)惠推薦功能介紹325.5訂單搜

3、索功能介紹345.6訂單刪除功能、訂單備注功能 355.7企業(yè)簡(jiǎn)介欄目、聯(lián)系方式欄目的編輯功能 365.8平臺(tái)注冊(cè)功能365.9本章小結(jié)37第6章總結(jié)38鳴謝39參考文獻(xiàn)40設(shè)計(jì)總說(shuō)明移動(dòng)互聯(lián)網(wǎng)，是指將手機(jī)載體和互聯(lián)網(wǎng)二者結(jié)合起來(lái)成為一體，各種互聯(lián)網(wǎng)技術(shù)、平臺(tái)、商業(yè)模式和應(yīng)用在這個(gè)手機(jī)載體上運(yùn)行以產(chǎn)生各種信息交互的總稱。隨著4G時(shí)代的開啟以及移動(dòng)終端設(shè)備的凸顯，我國(guó)移動(dòng)互聯(lián)網(wǎng)的發(fā)展越發(fā)越烈。未來(lái)，是一個(gè)以手機(jī)為載體去控制各種各樣的智能終 端電子設(shè)備的物聯(lián)網(wǎng)世界。物聯(lián)網(wǎng)就是物物相連的互聯(lián)網(wǎng)。這有兩層意思：其一，物聯(lián)網(wǎng)的核心和 基礎(chǔ)仍然是互聯(lián)網(wǎng)，是在互聯(lián)網(wǎng)基礎(chǔ)上的延伸和擴(kuò)展的網(wǎng)絡(luò)；其二，其用戶端延

4、伸和擴(kuò)展到了任何 物品與物品之間，進(jìn)行信息交換和通信，也就是物物相息。物聯(lián)網(wǎng)通過(guò)智能感知、識(shí)別技術(shù)與普適 計(jì)算等通信感知技術(shù)，廣泛應(yīng)用于網(wǎng)絡(luò)的融合中，也因此被稱為繼計(jì)算機(jī)、互聯(lián)網(wǎng)之后世界信息產(chǎn) 業(yè)發(fā)展的第三次浪潮。物聯(lián)網(wǎng)是互聯(lián)網(wǎng)的應(yīng)用拓展，與其說(shuō)物聯(lián)網(wǎng)是網(wǎng)絡(luò)，不如說(shuō)物聯(lián)網(wǎng)是業(yè)務(wù)和 應(yīng)用。因此，應(yīng)用創(chuàng)新是物聯(lián)網(wǎng)發(fā)展的核心，以用戶體驗(yàn)為核心的創(chuàng)新2.0是物聯(lián)網(wǎng)發(fā)展的靈魂，即移動(dòng)互聯(lián)網(wǎng)。以手機(jī)為載體，在其上運(yùn)行的各種應(yīng)用程序的技術(shù)，現(xiàn)在已經(jīng)深入人心，它滲透入了我們生活 的方方面面。比如現(xiàn)在最流行線下OTO網(wǎng)絡(luò)購(gòu)物。這也是本課題的設(shè)計(jì)任務(wù)來(lái)源，將手機(jī)網(wǎng)站、電腦網(wǎng)站分別和網(wǎng)站打印機(jī)連接起來(lái)，這就是物 物

5、相聯(lián)了，是物聯(lián)網(wǎng)物物相聯(lián)的基本特征。只不過(guò)這些物更多的是以手機(jī)為終端載體，但它仍然是 屬于移動(dòng)互聯(lián)網(wǎng)。物聯(lián)網(wǎng)和移動(dòng)互聯(lián)網(wǎng)的關(guān)系，是父集和子集的關(guān)系，移動(dòng)互聯(lián)網(wǎng)是物聯(lián)網(wǎng)的很重 要的一部分，未來(lái)的物聯(lián)網(wǎng)更多的也體現(xiàn)在移動(dòng)互聯(lián)網(wǎng)上。本課題主要是圍繞移動(dòng)互聯(lián)網(wǎng)和線下OTO具體使用場(chǎng)景，來(lái)開發(fā)設(shè)計(jì)一套電子商務(wù)網(wǎng)站原型系統(tǒng)，將互聯(lián)網(wǎng)技術(shù)融入餐飲行業(yè)，實(shí)現(xiàn)用戶在 手機(jī)上或者電腦上都可以瀏覽餐飲商家的全部菜單、挑選菜單。當(dāng)用戶挑選好菜單后完成下單，餐 飲商家后臺(tái)鏈接的網(wǎng)站打印機(jī)會(huì)立刻將該用戶的下單信息打印出來(lái)。那么根據(jù)哪種標(biāo)準(zhǔn)把這個(gè)課題做好呢？要實(shí)現(xiàn)這種場(chǎng)景應(yīng)用，本課題主要以asp技術(shù)為標(biāo)準(zhǔn)，將asp作為后臺(tái)

6、技術(shù)開發(fā)語(yǔ)言，將各種信息通過(guò)asp程序和javascript 程序處理，匯總傳送到與之配套的網(wǎng)站打印機(jī)，然后打印出來(lái)；以access數(shù)據(jù)庫(kù)為后臺(tái)開發(fā)數(shù)據(jù)庫(kù)，將各種信息通過(guò)asp程序和javascript程序處理，匯總插入到access數(shù)據(jù)庫(kù)中保存起來(lái)，在需要時(shí)調(diào)用；以 html、css和javascript布局和美化界面效果，生成非常怡人友好的人機(jī)交互界面。采用Dreamweaver CS6作為開發(fā)工具。程序運(yùn)行環(huán)境為windows操作系統(tǒng)環(huán)境。這套開發(fā)出來(lái)的能在手機(jī)上和電腦上瀏覽和下單并觸發(fā)打印機(jī)立即打印的程序，實(shí)用性強(qiáng)，功能完善，可以方便快捷幫助用戶下單，幫助餐飲商 家接單和統(tǒng)計(jì)數(shù)據(jù)，是餐

7、飲行業(yè)必不可少的運(yùn)營(yíng)必備工具之一。在人民追求盡善盡美的今天，UI界面設(shè)計(jì)的重要性越來(lái)越凸顯。本系統(tǒng)的設(shè)計(jì)原則就是圍繞 UI設(shè)計(jì)與程序設(shè)計(jì)進(jìn)行的，界面上要簡(jiǎn)潔明朗大方，操作上要方便流暢。UI的本意是用戶界面，是英文User和in terface的縮寫。從字面上看是用戶與界面2個(gè)組成部分，但實(shí)際上還包括用戶與界面之間的交互關(guān)系。界面設(shè)計(jì)，在漫長(zhǎng)的軟件發(fā)展中，界面設(shè)計(jì)工作一直沒有被重視起來(lái)。做界面設(shè)計(jì)的人也被貶義的稱為“美工”。其實(shí)軟件界面設(shè)計(jì)就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計(jì)一樣，是產(chǎn)品的 重要賣點(diǎn)。一個(gè)友好美觀的界面會(huì)給人帶來(lái)舒適的視覺享受，拉近人與電腦的距離，為商家創(chuàng)造賣 點(diǎn)。界面設(shè)計(jì)不是單純的美術(shù)

8、繪畫，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶而設(shè) 計(jì)，是純粹的科學(xué)性的藝術(shù)設(shè)計(jì)。檢驗(yàn)一個(gè)界面的標(biāo)準(zhǔn)既不是某個(gè)項(xiàng)目開發(fā)組領(lǐng)導(dǎo)的意見也不是項(xiàng) 目成員投票的結(jié)果，而是最終用戶的感受。所以界面設(shè)計(jì)要和用戶研究緊密結(jié)合，是一個(gè)不斷為最 終用戶設(shè)計(jì)滿意視覺效果的過(guò)程。在人和機(jī)器的互動(dòng)過(guò)程(HumanMachine Interaction )中，有個(gè)層面，即我們所說(shuō)的界面(in terface )。從心理學(xué)意義來(lái)分，界面可分為感覺(視覺、觸覺、聽 覺等)和情感兩個(gè)層次。用戶界面設(shè)計(jì)是屏幕產(chǎn)品的重要組成部分。界面設(shè)計(jì)是一個(gè)復(fù)雜的有不同 學(xué)科參與的工程，認(rèn)知心理學(xué)、設(shè)計(jì)學(xué)、語(yǔ)言學(xué)等在此都扮演著重要的

9、角色。用戶界面設(shè)計(jì)的三大 原則是：置界面于用戶的控制之下；減少用戶的記憶負(fù)擔(dān)；保持界面的一致性。本次設(shè)計(jì)的參考資料很多，可供查閱的條件也很多，從知網(wǎng)上，網(wǎng)絡(luò)中，都可以找到參考的資料。本次設(shè)計(jì)著重參考了Dreamweaver設(shè)計(jì)和asp構(gòu)架，并且查閱了一部分?jǐn)?shù)據(jù)庫(kù)書籍，參考了商業(yè)網(wǎng)站綜合案例，對(duì)于本次設(shè)計(jì)的幫助極大，而且能夠?qū)τ谶@個(gè)設(shè)計(jì)的構(gòu)架細(xì)節(jié)都做出足夠的支持 和幫助。關(guān)鍵詞：網(wǎng)站打印機(jī)；互聯(lián)網(wǎng)打印機(jī)；0T 0;點(diǎn)餐系統(tǒng)INTRODUCTIONMobile Internet, it refers to the phone and the Internet combine the two car

10、riers become collectively one, a variety of Internet tech no logies, platforms, bus in ess models and applications running on the phone carrier to produce a variety of information exchange. As well as mobile termi nal equipme nt, the developme nt of Chi nas mobile Internet in creas in gly more in te

11、n se. The future is a mobile pho ne for the carrier to con trol a wide variety of intelligent terminal electronic device networking world. Things that material objects connected to the Internet. This of things is still the Internet, is based on the Internet exte nsion and expa nsion of the n etwork;

12、 sec ond, to exte nd and expa nd its clie nt to any goods and items of in formati on excha nge and com muni cati on, that is, physical objects in terest. Things through In telliSe nse, ide ntificati ontech no logy and pervasive comput ing,com muni catio ns sensing tech no logy, widely used in conv e

13、rged n etworks, called the sec ond computer, the Internet world information industry development of the third wave. Things is an applicati on to expa nd the Internet of Things is not so much a n etwork as it is a bus in ess and networking applications. Therefore, the application of innovation is the

14、 core of the developme nt of thi ngs, to the user experie nee as the core of inno vatio n 2.0 is the soul of the developme nt of thi ngs, that the mobile Intern et.Mobile phone carrier, various applicati ons of tech no logy to run on it, and now is also the subject of the origin of the tasks, the mo

15、bile phone sites, computer website and printers are connected together, and this is linked to the physical objects, is the basic characteristic of things associated with physical objects. But these things are based more on the pho ne for the terminal carrier, but it still belongsto the mobile Intern

16、et. Relationship Things and mobile Intern et, is the relati on ship betwee n a pare nt and a subset of the set, the mobile Internet is a very importa nt part of thi ngs, more thi ngs future is also reflected in the mobile In ternet. This paper mainly around mobile internet and cable OTO specific usa

17、ge sce narios, to develop a suitable food in dustry convenient meal service applicati ons, Internet tech no logy will be integrated into the food and beverage industry, to achieve a user on the phone or computer can browse cateri ng All menu bus in esses, the select ion menu. Upon completi on of the

18、 user menu selecti on of good order, food bus in esses lin ked site prin ter back immediately the n ext sin gle user to print out in formati on.So depending on which standard to this issue to do it? To achieve this scenario applicati on, the subject mainly asp tech no logy as the sta ndard, the asp

19、as a back-e ndtech no logy developme nt la nguage, all kinds of in formati on through the asp and javascript program process ing program, a summary is tran smitted to the accompa nying website prin ter, then print it out; to access back-end database development database, all kinds of information thr

20、ough the asp program and javascript program processed, summarized into the access databasesaved, only whe n n eeded; inbe viewed on the pho ne and computer and prin terorders and trigger immediate prin ti ng, practical, function al, easy and quick to pursuit of perfect people, the importa nee of UI

21、in terface desig n more and more prominent. The system is desig ned around the prin ciple that UI desig n and program desig n, and the in terface to be simple and clear appeara nee, to facilitate smooth operati on. UI was inten ded user in terface is in En glish and User in terface abbreviati ons. L

22、iterally user in terface with two part, but in fact also in cludes the in teractive relati on ship betwee n the user and the in terface. In terface desig n, in the long software development, interface design work seriously. People who do the in terface desig n were derogatory called art. In fact, so

23、ftware in terface desig n as in dustrial products, in dustrial desig n, is an importa nt selli ng point of the product. A frie ndly and beautiful in terface will bring a comfortable visual enjo yme nt, to n arrow the dista nee betwee n people and computers to create a selli ng point for bus in esses

24、. In terface desig n is not simply the art of pain ti ng, . A sta ndard test in terface is n either a project developme nt team led by the results of the project are not the views of members voted, but the end-user experienee. Therefore, it should be closely in tegrated in terface desig n and user r

25、esearch is a con ti nu ous design satisfactory visual effects process for the end user. Man and machine interaction process (Huma n Mach ine In teract ion) in, there is a dime nsion that we call in terface (in terface). From a psychological sense to poi nts, the in terface can be divided in to sen s

26、ory (visual, tactile, auditory, etc.) and two levels of emoti on. User in terface desig n is an importa nt part of the scree n product. In terface desig n is a complex there are differe nt discipli nes invo lved in the engineering, cognitive psychology, design, linguistics and so on in this play an

27、important role. Three user in terface desig n prin ciples: set un der the con trol of a user in terface to; reduce the burde n on the users memory; con siste nt in terface.The referenee design is a lot, there are many conditions are available for inspection from known on li ne n etwork, you can find

28、 refere nee in formati on. The refere nee desig n focuses on the desig n and asp Dreamweaver architecture, and access to a part of the database of books, referenee is made to commercial websites integrated case, for , but also the details of the architecture of this design. Web Site Assist Die Casti

29、ng ProdJ.lndustry Week,2008:63附錄1數(shù)據(jù)庫(kù)相關(guān)代碼%設(shè)置鏈接數(shù)據(jù)庫(kù)On Error Resume NextSet conn = Server.CreateObject(ADODB.Connection)conn.OpenProvider=Microsoft .J et.OLEDB.4.0;Data Source= & Server.MapPath()If Err ThenErr.ClearSet conn = Nothing，字段等號(hào)右邊的Response.Write 數(shù)據(jù)庫(kù)連接出錯(cuò)，請(qǐng)檢查連接字串！Response.EndEnd If%顯示記錄集while(no

30、t(rs.eof)response.Write rs(xin)response.Write() |rs.movenext()wend%根據(jù)數(shù)據(jù)庫(kù)某個(gè)字段值是否空來(lái)輸岀不同的值V%lf (Not isNull(rs(address) Then %數(shù)據(jù)庫(kù)中不空時(shí)，在這里輸岀數(shù)據(jù)庫(kù)空時(shí)，在這里輸岀添加一條記錄rs.movefirst 移動(dòng)到第一條記錄rs.movelast 移動(dòng)到最后一條記錄rs.move 3 移動(dòng)到第四條記錄，從 0開始算的，數(shù)字表示要移動(dòng)到數(shù)字+1條記錄rs.eof 通常用來(lái)判斷指針是不是到最后一條記錄了rs.bof 通常用來(lái)判斷指針是不是移動(dòng)到最開始記錄了rs.movenext

31、指針移動(dòng)到下一條記錄rs.moveprevious 指針移動(dòng)到前一條記錄rs.movenext將記錄指針從當(dāng)前的位置向下移一行rs.moveprevious將記錄指針從當(dāng)前的位置向上移一行|rs.movefirst將記錄指針移到數(shù)據(jù)表第一行|rs.movelast將記錄指針移到數(shù)據(jù)表最后一行rs.absoluteposition=N將記錄指針移到數(shù)據(jù)表第N行|rs.absolutepage=N將記錄指針移到第 N頁(yè)的第一行|rs.pagesize=N設(shè)置每頁(yè)為N條記錄 |rs.pagecount根據(jù)pagesize的設(shè)置返回總頁(yè)數(shù)|rs.recordcount返回記錄總數(shù)rs.bof返回記錄指

32、針是否超出數(shù)據(jù)表首端，true表示是，false為否rs.eof返回記錄指針是否超出數(shù)據(jù)表末端，true表示是，false為否rs.delete刪除當(dāng)前記錄，但記錄指針不會(huì)向下移動(dòng)rs.addnew添加記錄到數(shù)據(jù)表末端rs.update更新數(shù)據(jù)表記錄|附錄2郵件發(fā)送代碼%發(fā)送代碼Const cdoSendUsingMethod=sendusingConst cdoSendUsingPort=2Const cdoSMTPServer=smtpserverConst cdoSMTPServerPort=smtpserverportConst cdoSMTPConnectionTimeout=smt

33、pconnectiontimeoutConst cdoSMTPAuthenticate=smtpauthenticateConst cdoBasic=1Const cdoSendUserName=sendusernameConst cdoSendPassword=sendpasswordDim objConfig,objMessage,FieldsSet objConfig = Server.CreateObject(CDO.Configuration)Set Fields = objConfig.FieldsWith Fields.Item(cdoSendUsingMethod) = cdo

34、SendUsingPorttem(cdoSMTPServer) = smtp.qq外部郵件服務(wù)器域名.Item(cdoSendUserName)=郵箱用戶名.Item(cdoSendPassword)=郵箱密碼.Item(cdoSMTPServerPort) = 25tem(cdoSMTPConnectionTimeout) = 10tem(cdoSMTPAuthenticate) = cdoBasic.UpdateEnd WithSet objMessage = Server.CreateObject(CDO.Message)Set objMessage.Configuration = ob

35、jConfigWith objMessage.To =接收者郵件完整地址.From =發(fā)送人完整郵件地址.Subject = sfsdfs郵件標(biāo)題.print(strcontent)Set Post, WPServerprintOrderAction, False.setRequestHeader Content-Type,applicationx-www-form-urlencoded.Send sn=&key=×=1 &printContent=+contentGetBody = .ResponseBodyEnd WithGetBody = BytesToBstr(GetBody

36、,UTF-8)print = GetBodySetFunction BytesToBstr(body,charset)Dim objstreamSet objstream = Server.CreateObject(adodb.stream)objstream.Type = 1objstream.Mode =3objstream.Openobjstream.Write bodyobjstream.Position = 0objstream.Type = 2objstream.Charset = charsetBytesToBstr = objstream.ReadTextobjstream.C

37、loseSet objstream = NothingEnd Function以下是函數(shù)調(diào)用，content是要打印的內(nèi)容Dim contentcontent = 測(cè)試打印 content = content+名稱單價(jià)數(shù)量金額content = content+-content = content+飯1.011.0content = content+炒飯10.01010.0content = content+蛋炒飯10.010100.0content = content+雞蛋炒飯100.01100.0content = content+番茄蛋炒飯1000.0 1100.0content = c

38、ontent+西紅柿蛋炒飯1000.0 1100.0content = content+西紅柿雞蛋炒飯100.010100.0content = content+ showHint(str)var xmlhttp;if (str.length=O)document.getElementByld(txtHint).innerHTML=;return;if (window.XMLHttpRequest) code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();else code for IE6, IE5x

39、mlhttp=new ActiveXObject(Microsoft.XMLHTTP);xmlhttp.onreadystatechange=function()if (xmlhttp.readyState=4 & xmlhttp.status=200)document.getElementByld(txtHint).innerHTML=xmlhttp.responseText;if (xmlhttp.readyState=1)document.getElementByld(txtHint).innerHTML=加載中，請(qǐng)稍候xmlhttp.open(GET,gethint.asp?q=+str,true);xmlhttp.send();附錄5： javascript郵箱驗(yàn)證、手機(jī)驗(yàn)證代碼!DOCTYPE check_mobile()var sMobile = forml.mobile.value;if(!(A13|4|5|80-9d4,8$.test(