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

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

2、2.1場景A演示介紹 63.2.2場景B演示介紹 123.3菜單搜索功能163.4電腦版場景A173.5企業(yè)簡介、聯(lián)系我們 173.6本章小結(jié)17第4章系統(tǒng)設(shè)計開發(fā)過程 174.1總體思路174.2需求分析174.3確定網(wǎng)站風(fēng)格184.4設(shè)計功能模塊184.5 確定 目錄結(jié)構(gòu)和主頁欄目 184.6數(shù)據(jù)庫鏈接184.7 Div和表格布局、CSS美化界面194.8 javascript特效和部分功能 204.9系統(tǒng)調(diào)試過程224.10 完工22第5章后臺管理功能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è)簡介欄目、聯(lián)系方式欄目的編輯功能 365.8平臺注冊功能365.9本章小結(jié)37第6章總結(jié)38鳴謝39參考文獻40設(shè)計總說明移動互聯(lián)網(wǎng)，是指將手機載體和互聯(lián)網(wǎng)二者結(jié)合起來成為一體，各種互聯(lián)網(wǎng)技術(shù)、平臺、商業(yè)模式和應(yīng)用在這個手機載體上運行以產(chǎn)生各種信息交互的總稱。隨著4G時代的開啟以及移動終端設(shè)備的凸顯，我國移動互聯(lián)網(wǎng)的發(fā)展越發(fā)越烈。未來，是一個以手機為載體去控制各種各樣的智能終 端電子設(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ǔ)上的延伸和擴展的網(wǎng)絡(luò)；其二，其用戶端延

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

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

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

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

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

9、角色。用戶界面設(shè)計的三大 原則是：置界面于用戶的控制之下；減少用戶的記憶負(fù)擔(dān)；保持界面的一致性。本次設(shè)計的參考資料很多，可供查閱的條件也很多，從知網(wǎng)上，網(wǎng)絡(luò)中，都可以找到參考的資料。本次設(shè)計著重參考了Dreamweaver設(shè)計和asp構(gòu)架，并且查閱了一部分?jǐn)?shù)據(jù)庫書籍，參考了商業(yè)網(wǎng)站綜合案例，對于本次設(shè)計的幫助極大，而且能夠?qū)τ谶@個設(shè)計的構(gòu)架細(xì)節(jié)都做出足夠的支持 和幫助。關(guān)鍵詞：網(wǎng)站打印機；互聯(lián)網(wǎng)打印機；0T 0;點餐系統(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ù)庫相關(guān)代碼%設(shè)置鏈接數(shù)據(jù)庫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，字段等號右邊的Response.Write 數(shù)據(jù)庫連接出錯，請檢查連接字串！Response.EndEnd If%顯示記錄集while(no

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

31、指針移動到下一條記錄rs.moveprevious 指針移動到前一條記錄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頁的第一行|rs.pagesize=N設(shè)置每頁為N條記錄 |rs.pagecount根據(jù)pagesize的設(shè)置返回總頁數(shù)|rs.recordcount返回記錄總數(shù)rs.bof返回記錄指

32、針是否超出數(shù)據(jù)表首端，true表示是，false為否rs.eof返回記錄指針是否超出數(shù)據(jù)表末端，true表示是，false為否rs.delete刪除當(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 = 測試打印 content = content+名稱單價數(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=加載中，請稍候xmlhttp.open(GET,gethint.asp?q=+str,true);xmlhttp.send();附錄5： javascript郵箱驗證、手機驗證代碼!DOCTYPE check_mobile()var sMobile = forml.mobile.value;if(!(A13|4|5|80-9d4,8$.test(