1、基于 MVCl 勺訂餐系統(tǒng)的設(shè)計與實現(xiàn)摘 要：本文分析了傳統(tǒng)餐飲現(xiàn)狀和面臨的問題， 發(fā)現(xiàn)傳統(tǒng)的服務(wù)模式已經(jīng)不能適應(yīng) 市場發(fā)展的需求。隨著網(wǎng)絡(luò)技術(shù)的普及，方便、快捷的網(wǎng)上訂餐服務(wù)正在進(jìn)入人們的生活。 針對這類問題， 本文規(guī)劃了一套最貼切的服務(wù)模式， 為餐飲店鋪提供區(qū)域網(wǎng)絡(luò)門戶， 適應(yīng)不 同的客戶群。本設(shè)計是一個基于MVC莫式的網(wǎng)上訂餐系統(tǒng)，能提供網(wǎng)絡(luò)選擇瀏覽菜品、點菜訂餐等服 務(wù)。為管理員提供一個智能的服務(wù)平臺實現(xiàn)顧客信息與顧客訂單的管理，從而提高了服務(wù)的1、目的與意義現(xiàn)代社會， 人們生活節(jié)奏加快， 有些甚至連外出吃飯的時間都抽不出來，本系統(tǒng)的設(shè)計目的是為了滿足消費者只要通過互聯(lián)網(wǎng)就可以足不出戶

2、的訂購自己喜歡的菜品，改變傳統(tǒng)商業(yè)交易，在互聯(lián)網(wǎng)上進(jìn)行交易， 實現(xiàn)網(wǎng)上購買食物。在訂餐系統(tǒng)中，除了用戶注冊和用戶登 錄功能， 最為核心的功能就是訂餐部分的功能。訂餐模塊的特點是：用戶通過簡單的輸入數(shù) 量和點擊確認(rèn)按鈕操作完成點餐，并能在購物車中查看自己的購物信息。 本系統(tǒng)在此模塊的 運行方式： 在頁面上顯示食物的信息，包括食物名稱、食物價格和食物圖片等，當(dāng)用戶找到 自己喜歡的食物時， 通過輸入自己訂購的數(shù)量后， 點擊確定按鈕后訂餐。 然后在購物車中可 以查看到自己當(dāng)前訂餐的情況， 可以刪除不想要的食物， 或者修改訂餐的數(shù)量。另外， 本系 統(tǒng)中還開發(fā)了管理員的管理功能，如對用戶的查詢、刪除、修改

3、、增加，對事物的查詢、刪 除、修改、增加，對訂單的查詢刪除和修改。2、理論基礎(chǔ)及技術(shù)路線本系統(tǒng)應(yīng)用了MVC勺開發(fā)模式，結(jié)合JSP和少量AJAX技術(shù)實現(xiàn)的。MVC(model、view、controller)模式，實現(xiàn)了業(yè)務(wù)模型和用戶視圖的分離。在本系統(tǒng)中，MVC的處理流程：首先通過點擊視圖表單中的submit按鈕，再通過表單中的method值獲取傳輸?shù)姆椒ǎㄟ^action值在web.xml中找到對應(yīng)servlet，再到servlet中調(diào)用business處理數(shù)據(jù)，最后將數(shù)據(jù)返回視圖。這種視圖層和業(yè)務(wù)層分離，允許更改視圖層代 碼而不用重新編譯模型和控制器代碼， 同樣業(yè)務(wù)流程或者業(yè)務(wù)規(guī)則的改變只

4、需要改動模型層 即可。JSP是基于JavaServlet以及整個Java體系的web開發(fā)技術(shù)。在傳統(tǒng)的網(wǎng)頁HTML文件(*.htm,*.html)中加入腳本片段和JSP標(biāo)記(Tag)，構(gòu)成JSP網(wǎng)頁(*.jsp)。JSP技術(shù)為創(chuàng)建顯示動態(tài)生成內(nèi)容的web頁面提供了簡便的方法。JSP作為Java家族的一員，承襲了Java的特點，即跨平臺的特性，也即一次編譯，到處運行。在本系統(tǒng)中，通過大量運用% %插入java代碼片段，從數(shù)據(jù)庫中讀取到信息，再巴數(shù)據(jù)顯示在頁面上。AJAX技術(shù)是一項異步數(shù)據(jù)傳輸功能，在不刷新頁面的情況下對頁面信息更新。在本系統(tǒng)中，這項技術(shù)主要運用在注冊頁面當(dāng)中。在用戶注冊的時候，通

5、過XMLHttpRequest對象向服務(wù)器端發(fā)送異步數(shù)據(jù)請求，從數(shù)據(jù)庫中檢索輸入的用戶名是否存在，如果存在就想客戶端返回已經(jīng)注冊的消息，如果沒有注冊就向客戶端返回可以注冊的消 息。3、模塊總體設(shè)計用例圖：顧客用例圖（主要對訂單的增加和修改）JavaScript的管理員用例圖（主要對用戶、訂單和食物的查增刪改）管理員用戶菅理訂里管理食牧管理修改用戶信貳）刪涂用戶増加育物修改食物信息刪涂訂卑修改訂車刪涂倉物數(shù)據(jù)流圖:模塊圖:1訂址頤瞬1ft己尸冃12mr注冊模塊圖:登錄模塊圖:系統(tǒng)總功能模塊ER圖:系統(tǒng)er圖數(shù)據(jù)庫表：customer表屬性數(shù)據(jù)類型允許空enovarchar(3)not n ull

6、Primary keycpasswordvarchar(IO)not n ullcadressvarchar(10)not n ullcphonevarchar(10)not n ullsupervarchar(1)not n ullorder表屬性數(shù)據(jù)類型允許空onovarchar(3)not n ullPrimary keyenovarchar(3)not n ullfnovarchar(3)not n ullpriceintnot n ullnu mberintnot n ullfood表屬性數(shù)據(jù)類型允許空fnamevarchar(10)not n ullPrimary keyftype

7、varchar(3)fimagevarchar(20)fpriceint(3)not n ull4、系統(tǒng)實現(xiàn)這一部分主要是截圖，包括開發(fā)環(huán)境（MyEclipse或者Eclipse J2EE的工程文件夾部 分）截圖，系統(tǒng)運行截圖，另外對于核心代碼也可以貼一兩段出來，不過凡是出現(xiàn)的代碼和截圖都必需配有文字說明。Eclipse J2EE的工程文件夾部分:運用ajax判斷用戶名是否可以注冊。JavaScript部分代碼如下:J列WebTes山芒src申b us i messJ AddFD-Od B uii i reSJavfl JAddCrderBusiness.java 7 Ad dU&e rBu

8、si n es sja J Cha n g e Foo d B ms i ress Java血Cha ng e N u m b e rBu iines 5 Java J ng eU ser B i ness j ava： 0 CopyDfDeI rteOrdBinessJava jj De Iete Foo d B u si n e s s Jo voDeleteOrd BusinessjavaiDFlptpUsprBuinp5jiiva. jjj LoginBusiness-navaJ i OderBusinessjavaJ RegisterBusineissavBUserBizBusine

9、ss JavaJAjj fle-i-vlct.Jj臉卄00出曰劃叫3日jjAddCrdprprvet.java? j AddUs&P Ser vl ecj d / a:Ch a n g e Foo d S e rvlet java.j匚卜a ng e N u mb erSc rvltj v-a jj Cha ng e U serS &rvl et.javaChee kUssr Servlet java.Jj Cc py Of De I eteO rdS e rvl et ja va：耳 HDl eteFoodServI etj avaDe I et eO r d Se rv et-a vJJ

10、j De I eteUs e rSe irvll etj aval丄Registers endetjava& 3 utilL.：-$ Aulhcir iiyri lie r .j dvdtdlta Access Javat? j? VfllidfltorXML.jao0 ,J XmlHardleravaK database.confxmiE dldta ba s e.cof.xB d* J RE System Library J-elA-pache Tomcat v8_0 Apache Tomcat v8,0BA Web App LibrariesJWebCcntent*Ladminaddfo

11、od jp心ddduiderpM adduser.jsp童sdnnini.htrnlL oideirjspi二m弓erj/p：L二CSSb O ikgt u js?三META-INFb亡usero心WEB-INF5j aLthori?y.h：ml三pirorhtmllfa/iccrxico運用ajax判斷用戶名是否可以注冊。JavaScript部分代碼如下:II此段通過XMLHttpRequest對象的狀態(tài)對頁面中id為msg的div元素的內(nèi)容進(jìn)行設(shè)置functioncallback()var msg = document.getElementById(msg);msg.innerHTML=;

12、if (xmlHttpRequest.readyState = 4)if (xmlHttpRequest.status = 200)var data =xmlHttpRequest.responseText;if (data = true)msg.innerHTML =用戶已存在;msg.style.color=red; document.getElementById(username).select(); else msg.innerHTML = ok; msg.style.color=green;II此段創(chuàng)建XMLHttpRequest對象并傳入的user name設(shè)置參數(shù)，處理器的url

13、等。function checkUserExists()var username = document.getElementById(username);var url = checkUserServlet;var param = username= + encodeURIComponent(username.value);xmlHttpRequest = createXmlHttpRequest();xmlHttpRequest.onreadystatechange = callback;xmlHttpRequest.open(POST,url, true );xmlHttpRequest.

14、setRequestHeader(Content-type,applicationIx-www-form-urlenco ded);xmlHttpRequest.send(param);下面用正則表達(dá)式判斷用戶名是否合法：function check()var regml =/Aa-zA-Z_+a-zA-Z0-9+$/;if (form.username.value = | form.username.value=username)alert(Name is null.);form.username.focus();return false if (!form.username.value.m

15、atch(regml)alert(Name is n ot right.);form.username.focus();return false ;用戶登錄界面:用戶點餐界面:顯示食物部分代碼（其中圖片用相對路徑）/此段通過java代碼從數(shù)據(jù)庫中取岀食物表的信息，在頁面中顯示岀來。地道小吃類%Stri ng sql = select * from food ;Conn ecti on conn =dataAccess.getC onn ecti on();Stateme nt stat = conn .createStateme nt();ResultSet rs = stat.execute

16、Query(sql);while(rs. next()%vform actio n=orderServlet mothed=post n ame=form1img src=in puttype=textvalue=n ame=f noin puttype=text value=class=fnoclass=fnon ame=price 數(shù)量：vbutton type=submit onclick=return check1();v/formv/div訂購成功界面:購物車界面:序眄U車:1WfW1UHT1MMB*$mm3鼻1MMBw|231艸y干總瞬9管理員管理界面:點餐添加用戶：添加完跳轉(zhuǎn)至用

17、戶顯示信息界面:添加食物（圖片為默認(rèn)圖片）添加完成跳轉(zhuǎn)至食物信息界面:添加訂單:添加完成后跳轉(zhuǎn)至查看訂單界面:按號查找用戶:戶查找完成跳轉(zhuǎn)到用戶信息顯示頁面:對信息修改后顯示所有用戶信息（修改c01密碼為c02）:為初訓(xùn)I佇息用戶春JWtSHiimn1 hPPMm :2)awEtCdk-2 R|i9)2IK血IU1v j|Htig2 h5、總結(jié)這個系統(tǒng)是基于MVC的訂餐系統(tǒng)，其中僅僅實現(xiàn)了很少一部分功能，還有很大的完善空間，以后我也會盡量完善我的訂餐系統(tǒng)。在系統(tǒng)制作過程中， 運用了很多方面的知識，JSP、MYSQLXML HTML CSS、JAVASCRIPT等，大大的豐富了我的知識量，也是對某些已經(jīng)學(xué) 過的知識的回顧