基于bootstrap響應(yīng)式電子菜單系統(tǒng)設(shè)計與實現(xiàn)

【】伴隨移動智能終端的普及，我國移動互聯(lián)網(wǎng)應(yīng)用服務(wù)形成巨大的規(guī)模。餐飲行業(yè)作為與人類生活關(guān)的永續(xù)產(chǎn)業(yè)也在做著重大的改變電子菜單作為響應(yīng)餐飲行基于此本根據(jù)對市場數(shù)據(jù)的大量分析以及實地基本確定了項目目標(biāo)和功能需 】點餐系統(tǒng)，響應(yīng)式，用戶體DesignandImplementationofResponsive SystemBasedonBootstrap 】Withtherapiddevelopmentandpopularizationofmobileinligentterminals,Chinesemobileinternetapplicationservicesquicklytoformahugescale.Asasustainableindustrythatcateringtopeople’slivesisalsongalotofmajorchanges.Foodindustryisundergoingtheinformatizationreform,electronic isasignofthisinformatizationreform，whichisgoodatuserexperienceandresourceconservation.Currently,themobileterminalorderingsystemhasattractedalotofbusiness,buttherearestillsomeproblemsanddeficiencies.Accordingtothemarket ysisandthefieldtrips,thethesisdeterminestheprojectgoalandfunctionalrequirements.Inviewofthesitetobeusedinavarietyofcross-platformterminalequipment,theresponsiveordersystemappliedthecurrentrelativelypopularfront-endframework.Itwillachievetheorderingservice,thekitchenservice,thecustomerreviewsserviceandtheshopcartservice.Finally,cross-platformfunctionaltestingcanprovethefunctionofthesystemtomeetthemostcurrentbusinessandcustomer 】orderingsystem,responsive,user目緒 項目背 國內(nèi)外研究現(xiàn) 主要研究內(nèi) 本文的組織結(jié) 基本技術(shù)介 技術(shù)概 B/S結(jié)構(gòu)與C/S結(jié)構(gòu)簡 SQLSERVER數(shù)據(jù) .NET服務(wù)端框架簡 IIS服務(wù)器簡 AJAX簡 NHIBERNATE技 本章小 系統(tǒng)的分 項目可行性分 項目需求分 數(shù)據(jù)模型分 本章小 系統(tǒng)設(shè)計與實 數(shù)據(jù)庫設(shè) 系統(tǒng)設(shè) 系統(tǒng)重點模塊實 本章小 系統(tǒng)測 測試計 管理員登陸賬號測 系統(tǒng)功能測 測試用 系統(tǒng)兼容性測 對功能測試的結(jié) 本章小 總結(jié)與展 總 進一步工作展 參考文 緒伴隨特色新發(fā)展中國的經(jīng)濟體制越來越完善經(jīng)濟的急速發(fā)展導(dǎo)致?lián)涿娑贿m應(yīng)和不平衡經(jīng)濟增長的下行壓力與產(chǎn)能相對而言過剩的有所加劇各行各們生活關(guān)的永續(xù)產(chǎn)業(yè)同樣著這些。于是創(chuàng)新中求發(fā)展的行動就此展的問題繁瑣的等待以及紙質(zhì)菜單的資源浪費餐廳的導(dǎo)致的諸多不便，持所以餐廳需要事先昂貴的硬件設(shè)備和支持另外一些電子菜單則需要顧客使用自己的移動設(shè)備一些應(yīng)用，這就導(dǎo)致顧客排斥這種電子菜單的應(yīng)用。如果將電子菜單制作成網(wǎng)頁形式供給顧客就是傳統(tǒng)的B/S結(jié)構(gòu)顧客只需要掃描餐廳提供的前需要針對不同顯示設(shè)備設(shè)計不同系統(tǒng)的繁縟操作輕松解決用戶不愿意各種應(yīng)用的、可以做到從顧客選擇菜品、添加購物車菜品制作詳情、支付訂單等等功能的、單的及時更新僅僅需要管理員上傳或者選擇顏色就可以做到一鍵換膚的效果這是4做出什么新穎的改變用戶可以通過服務(wù)手中的觸屏設(shè)備進行選擇菜品這種方式便無線PDA點餐：它是較早出現(xiàn)的無線連接設(shè)備，需要通過PDA顯示命令的API，讓ISM物進行波段的覆蓋。IPad平板和安卓平板設(shè)備。它很好的實現(xiàn)了電子點提前點餐讓顧客未進入餐廳即可開始選擇菜品大大解決了選擇癥顧客的尷尬。有效的節(jié)約了點餐時間，還可以節(jié)約服務(wù)的資源為顧客提供的服務(wù)。服務(wù)溝通交流菜品的時間。準(zhǔn)確性：避免了傳統(tǒng)手抄式點餐的本文主要研究的是基于bootstrap的響應(yīng)式點餐系統(tǒng)。該系統(tǒng)的是一個 隊，顧客掃 后，不僅可以得知自己需要等待的時間，還可以自主進行預(yù)點餐bootstrapbootstrap框架。具體一些餐廳的業(yè)務(wù)流程，對點餐系統(tǒng)進行需求分析，然后完成基本的功能需6bootstrap的響應(yīng)式點第二章：技術(shù)綜述。本章對bootstrap技術(shù)和 基本技術(shù)介本點餐系統(tǒng)是基于Bootstrap技術(shù)開發(fā)設(shè)計的，現(xiàn)在介紹本系統(tǒng)開發(fā)過用到的相關(guān)技術(shù)和理論。其中包括技術(shù)、B/S結(jié)構(gòu)、SQLsever數(shù)據(jù)庫系統(tǒng)以及.net服務(wù)端開發(fā)框架、IISAjaxNHibernate技術(shù)。 來一些信息。然而，它實際上上是由許多幾何的畫面拼湊在一起組成的當(dāng)然存在著特定的機制體現(xiàn)出來的就是大家常常看到的黑白色的一個個小方格組成的其實它的邏輯與計算機基礎(chǔ)的邏輯結(jié)構(gòu)相同， 的四個角上的方塊的二維

生成技術(shù)主要通過引入ThoughtWorks.QRCode.dll文件來實現(xiàn)。它是一個生 B/SC/SB/SB/S結(jié)構(gòu)的全稱叫做瀏覽器/服務(wù)器結(jié)rowser/Server）。這個結(jié)構(gòu)的就是常說的部分邏輯代碼寫臺頁面上。其實就是實現(xiàn)三層模式，其中包括客戶應(yīng)用端、服務(wù)器、和數(shù)據(jù)庫面的結(jié)合。B/S結(jié)構(gòu)的系統(tǒng)最大的優(yōu)點就是可以通過瀏覽器直接，而不需要安裝各種客戶端應(yīng)用。覽器的解析，而復(fù)雜的邏輯處理則全部放在了服務(wù)器上。C/SC/SSocketC/S結(jié)構(gòu)就是通過這兩種方式與異地的客戶端進行數(shù)據(jù)傳輸和Socket連接C/S結(jié)構(gòu)之所以現(xiàn)在不如B/S結(jié)構(gòu)受歡迎的B/SB/S輕客戶端：用戶無需安裝龐大的客戶端應(yīng)用程序，只要有瀏覽器就可以進行SQLserverSQLserver數(shù)據(jù)庫是公司推出的一款關(guān)系型數(shù)據(jù)庫。其中SQL是結(jié)構(gòu)化查詢語言（StructuredQueryLanguage）的簡稱。它是一種簡單實用卻應(yīng)用廣泛的查詢語言，目前大多數(shù)數(shù)據(jù)庫都在使用這種語言。它也引申設(shè)計到一些其他開發(fā)語言中等等。SQLSQLserver20002014SQLserver2012，就是一個大的改進，它將各個功能集成在一個service里，方便用戶安裝使用。其中的增強的PowerS支持可以看出微軟對開發(fā)服務(wù)端產(chǎn)品對PowerS的支持。SQLserver數(shù)據(jù)庫中自帶的系統(tǒng)數(shù)據(jù)庫一直是開發(fā)所必須要了解到的東西接下來一次對其進行簡單介紹：首先是Master數(shù)據(jù)庫。Master顧名思義，它是這個數(shù)configMastermaster中創(chuàng)建用戶對象，否則就必須更加頻繁的對他據(jù)庫時所需要的信息。因此，如果新的數(shù)據(jù)庫被創(chuàng)建時，服務(wù)器就會通過Model數(shù)據(jù)的內(nèi)容來建立新數(shù)據(jù)庫的部分內(nèi)容固定模板建立好后剩余部分則有用戶自己填Tempdb數(shù)據(jù)庫。Temp顧名思義，它是用來臨時一些信息的。應(yīng)用程序和數(shù)據(jù)庫都需要通過它來臨時數(shù)據(jù)但需要注意的是一個實例的所有用戶都僅僅共個Tempdb。而且tempdb只有一個filegroup，不能再額外添加文件組。Tempdb會保存SQLSERVER的優(yōu)化配置起著重要的作用。MSdb數(shù)據(jù)庫。MSdb顧名思義，它主要是用來調(diào)度任務(wù)排除故障。也可以作為數(shù)據(jù).net.NET是微軟設(shè)計的獨立于操作系統(tǒng)之上的一個平臺。也就是.NETXMLWebServicesXMLWebServices提供了應(yīng)用程序連接網(wǎng)絡(luò)便可進行數(shù)據(jù)通信的功能，才使的任何操作系統(tǒng)都可以安裝.net框架，運行.net首先，XML是一種可擴展性標(biāo)記語言。它是專門用來數(shù)據(jù)使用的，具有良好的UI（表現(xiàn)層）、BLL（業(yè)務(wù)邏輯戶提供的數(shù)據(jù)和反饋結(jié)果。BLLUI層和DAL層的交互作用。對數(shù)據(jù)進行一些業(yè)務(wù)邏輯上的處理。DAL層是直接和數(shù)據(jù)庫進行交DAL層來處理的。值得注意的是各層之間的依賴：UIBLL,BLLDALIISWindows的互聯(lián)網(wǎng)基本服務(wù)。件就可以使用。IIS的全稱是互聯(lián)網(wǎng)信息服務(wù)。它最主要的功能就是通過互聯(lián)網(wǎng)發(fā)布發(fā)布IIS對于系統(tǒng)硬件的消耗。IIS發(fā)布web時，包含了多種服務(wù)器，其中有web服務(wù)器、FTP服務(wù)器、NNTPSMTP服務(wù)器。針對不同的需求可以選擇不同功能的服務(wù)器進行發(fā)布。它使得AJAX（synchronousat）sript。首ttpRequestAJAX終于走上了舞臺。AJAX具體工作原理則是，javascriptXMLHttpRequest對象來保存一個頁面，這AJAXWEB應(yīng)用程序。NHibernateNHibernate的是.NET平臺的對象關(guān)系（ORM）解決方案。它提供了用于一個面象的域模型來傳統(tǒng)的關(guān)系數(shù)據(jù)庫的框架其目的是為了從關(guān)系數(shù)據(jù)持久性相關(guān)的編程任務(wù)顯著部分緩解的顯影劑。NHibernateGNU寬通用公共證下發(fā)布的開源。NHibernate的僅僅是是Hibernate中的一個端口。 的相關(guān)概念通過類庫系統(tǒng)集成到 進入菜單頁面方便快捷然后我們闡述了B/S和C/S結(jié)構(gòu)的區(qū)別以及為什么本系統(tǒng)采用B/S結(jié)構(gòu)和B/S結(jié)構(gòu)的優(yōu)缺點等等接著我們介紹了系統(tǒng)所用到的SQLSEVER數(shù)據(jù)庫，以及制作本系統(tǒng)時采用的基本框架。還有IIS服務(wù)器來幫助本系統(tǒng)完成想要達(dá)到的目的。最后介紹了一些的技術(shù)，例如AJAX技術(shù)來異步獲取數(shù)據(jù)，通過NHibernate來連接系統(tǒng)的分項目系統(tǒng)成本費用主要有這個項目系統(tǒng)所需要的配套的硬件以及的成本費用等在經(jīng)過分析和考慮不管從哪方面來說都是非商業(yè)的系統(tǒng)開發(fā)和本系統(tǒng)相關(guān)的都可以在網(wǎng)上免費的和安裝至于開發(fā)的費用以及數(shù)據(jù)錄入的分析和整理所產(chǎn)生的費用也都是可以忽系統(tǒng)安裝、運行和費，非常的復(fù)雜在一般的情況下本系統(tǒng)的升級和的工作也是非常的方便和升級的，計，做了流程圖的分析中可以得知，本項目系統(tǒng)開發(fā)的風(fēng)險比較的小，具有可行性。內(nèi)存：2G100G其他：服務(wù)器（筆記本代替操作系統(tǒng)：Windows10系統(tǒng)數(shù)據(jù)庫：SQLsever數(shù)據(jù)庫開發(fā)環(huán)境：visualstudio2015瀏覽器：chromeB/SIEWEB服務(wù)器發(fā)送請求，WEB服務(wù)器在接收到請求后進行處理，如果用戶的請求涉及到需要數(shù)據(jù)庫的話，WEB服務(wù)器就確定要的是哪一個數(shù)據(jù)庫，然后就會操作數(shù)據(jù)庫，從數(shù)據(jù)庫能夠有效的保護數(shù)據(jù)平臺和系統(tǒng)的管理權(quán)限服務(wù)器上的數(shù)據(jù)庫中的數(shù)據(jù)也是相對比有觸犯在知識方面對他人的勞動成果也沒有任何的地方因此本系統(tǒng)在法律上需求的分析在的開發(fā)過起著非常重要的可以說是決策性的作用為的開發(fā)指明了方向并且也為開發(fā)者致命了開發(fā)帶的策略在開發(fā)以及后期的的過都起了舉足輕重的作用需要開發(fā)付出足夠的重視程度需求分析的結(jié)果是不是完整和沒有錯誤將影響整個開發(fā)的后的過程環(huán)節(jié)也最終的決定了項目時候能夠滿足客戶的需求。所以需求的分析直接決定和奠定了工程和項目的管理的基礎(chǔ)。準(zhǔn)確性和及時性及時和正確無誤的處理是系統(tǒng)必須要考慮的系統(tǒng)應(yīng)該確保，對于用戶的輸入的信息能夠的及時的響應(yīng)。易用性和安全性本系統(tǒng)面對公司普通的操作由于每個員工的水平不一樣，電子菜單系統(tǒng)分為用戶和管理員兩個角色。分別進行各自的操作。管理員在，對用戶、菜品、訂單記錄等進行管理，包括增加、刪除、修改等基本操作。用戶登錄用戶的主線包括、登錄、用戶功能模塊及頁面，管理員的主線包括登錄、管理員功能模塊及頁面，兩者共同的操作是在業(yè)務(wù)層，都對業(yè)務(wù)層進行，業(yè)務(wù)層再調(diào)用DAO層對數(shù)據(jù)庫進行操作。兩者，在系統(tǒng)中都進行各自的操作，互不。本系統(tǒng)的架構(gòu)設(shè)計圖3-2-2

3-1 3-2餐 管理員可以通過賬號登 管理界面， 系統(tǒng)進行相

3-3E-R圖將現(xiàn)實4111對多還有多對多的關(guān)系等等。3-4E-R顧客ID、用戶名、、聯(lián)系郵箱等等。管理員實體主要用來對用戶訂單進行處理，對3-53-6

3-73-8本章的主要內(nèi)容介紹了系統(tǒng)的整個分析過程。首先從項目制作的可行性角度進行分最后進行項目的功能性需求分析。詳細(xì)的對本項目的需求進行分析。系統(tǒng)設(shè)計與實重要的可以把大批量的數(shù)據(jù)按照既定的數(shù)據(jù)格式進行組織和管理起來很方便對用戶的數(shù)據(jù)進行起來進行查找數(shù)據(jù)和這些大批量的數(shù)據(jù)的能夠讓系統(tǒng)的管理非E-R圖模型的結(jié)構(gòu)圖表，基本確定數(shù)據(jù)庫的結(jié)構(gòu)。圖下如是數(shù)據(jù)庫表的設(shè)計圖。根據(jù)E-RTable_UserID字段、UserNamePassWord字段以及Contact字段等字段4-1Table_User1423用戶4的登陸賬號和。4-2Table_Admin14234用戶5Table_MealOrder表主要記錄每一筆訂單的詳細(xì)內(nèi)容。其中會包括有訂單的創(chuàng)建者和4-3Table_MealOrder1423456菜品的原材料和菜品的展示等等。讓顧客可以輕松的瀏覽各種菜品。4-4Table_Dish142434567Table_Cusine表是存放餐廳的菜系信息。它是菜品信息的一個分類列表。其中同樣4-5Table_Cusine1424345Table_Cart表是存放顧客的購物車信息。它是訂單列表的一個雛形列表。其中同樣4-5Table_Cart14243455本系統(tǒng)采用所提供的法連接數(shù)據(jù)庫NHibernate技術(shù)面向.netjavaHibernate關(guān)系型持久化工具。NHibernate不僅僅是管理.net類到數(shù)據(jù)庫表的還是供給數(shù)據(jù)的尋查和獲得數(shù)據(jù)的方法這樣就極力的減少了手工SQLADO.NET來處理數(shù)據(jù)的時間。4-1NHibernateXML在將來的更新過要求系統(tǒng)能夠不用費多大耗費的情況下就能夠完成系統(tǒng)的升級和系統(tǒng)的所以在設(shè)計過盡可能的需要對系統(tǒng)的各個模塊都有很好的劃夠針對不同的環(huán)境進行靈活的搭配，也能夠使先前的系統(tǒng)進行更好的升級和。 顧客登錄模塊顧客在此即進行登錄操作必須在此模塊登錄且用戶名和正確無入此模塊，在此模塊進行管理員的功能操作，包括菜品管理，管理等功能操作。系選擇、菜品選擇，包括瀏覽菜品和菜品制作原料等等。4-2管理員功能模塊管理員在登錄成功后管理員功能模塊在此模塊管理可以進行管理、菜品管理、訂單管理、評論管理、系統(tǒng)管理等等功能操作。管理功能模塊：管理員在此功能模塊對信息進行管理操作。4-3

生成代顧客通過在登陸界面進行輸入用戶名和進入進行菜品預(yù)覽如下顧客登陸界面圖：這是終端設(shè)備登錄后的界面效果圖和電腦設(shè)備上面登錄后的界面效果圖對比bootstrap框架結(jié)構(gòu)實現(xiàn)的隨著瀏覽設(shè)備的不同而做出的響應(yīng)式的效

價顧客也可以在此呼叫餐廳服務(wù)這能大大的節(jié)省了顧客和服務(wù)之間的交聊天室功能的實現(xiàn)主要依賴于ASP.NETSignalR類庫，在系統(tǒng)中該類庫后，進管理員通過登錄進入管理模塊即可開始一天的工作。首先是管理模塊的首

圖4-12首管理員通過管理系統(tǒng)可以對餐廳的服務(wù)進行管理對服務(wù)的信息進行瀏

4-13

本系統(tǒng)運用的是NHibernateHelper類對數(shù)據(jù)庫的進行封裝利用它即可避免重復(fù)SQL

圖4-15數(shù)據(jù)操E-R模型圖以及數(shù)據(jù)庫的數(shù)據(jù)表。然后介紹了系統(tǒng)的具體模塊設(shè)計，把整個系統(tǒng)測，，，在每個系統(tǒng)程序的構(gòu)建過的測試的上線準(zhǔn)備的上線都是一項非常重要和艱巨的工作不僅僅是檢查是否是按照需求進行設(shè)計的還要檢查的的相比，WEB服務(wù)有很多先進的地方，這包括和測試相關(guān)的幾個方面：，，，能夠?qū)Ψ浅６嗟挠脩舻倪M試，即同時響應(yīng)很多的用戶的，并且對用信息的發(fā)布有著舉足輕重的作用。很多以前的看中的是運算的能力，但是在總的來說，WEBB/SWEB服務(wù)和硬件之間的依賴關(guān)系不是那么的緊針對本電子菜單系統(tǒng)主要是進行了登錄界面的測試和系統(tǒng)的安全性進試功能進試，端的兼容性進試等。當(dāng)管理員輸入賬號和后便可跳轉(zhuǎn)到管理界面管理員可對管理頁面進行登出登入功能如果賬號和二者有任何一個不正確均不能達(dá)到進入管理頁面主要檢測用戶通 掃描后，是否能登陸到本系統(tǒng)5-1開發(fā)亮亮黑盒測試設(shè)計日期測試人員亮1Pc電腦一臺，可以連接動一部。IIS服務(wù)無無無2打開IIS服務(wù)器和VS2015，將準(zhǔn)備的項目IIS服務(wù)器上。通過電腦瀏覽器進行本地。移動設(shè)備需要連接內(nèi)網(wǎng)進行電腦和手機都可以正確的訪問到電腦和手機都可以準(zhǔn)確的訪問無3通過打開首頁，點擊“進入”按通過電腦打開首頁，點擊“進入”按的頁面顯示正以跳轉(zhuǎn)到的頁面顯示正常，按鈕功能正常，可以跳轉(zhuǎn)到預(yù)無4回到首頁點擊“登錄”按鈕leo頁面的顯入法可以正常輸入漢字和字確的賬號和頁面的顯示正常；輸入法可以正常輸入漢字和字母；輸入正確的賬號和密碼后可以無表5-1測試用 5涉及到的壓面顯示可以添加購物車列表與實際涉及到的壓面顯示正常，菜品可以添加到購物車；購物車列表與實際一無6可以準(zhǔn)確的進入聊可以輸入室發(fā)言狀態(tài)顯示正可以準(zhǔn)確的進入聊天室頁面；可以輸入漢字；聊天室發(fā)言狀態(tài)顯示正無7安全性測試檢測網(wǎng)站是否可以正常使用安全性測試檢測網(wǎng)站是否可以正常使用無85.51122各種顯示設(shè)備的頁面展示均各種顯示設(shè)備的頁面展示均無器、基于FireFox內(nèi)核的火狐瀏覽器中，進行兼容性檢測。將本系統(tǒng)分別在平板電腦等不同尺寸顯示屏上試用檢測的響應(yīng)式功能對功能測試的結(jié)WEBB/S模式，采用的是人性化的設(shè)計方案，簡單的操作，容易上手的設(shè)計，幫助服務(wù)能夠非常輕松的按照系統(tǒng)的操作完成業(yè)務(wù)不僅僅是節(jié)省了時間的成本也提高了本章的主要內(nèi)容就是對本系統(tǒng)進行各個方面的測試測試時開發(fā)環(huán)節(jié)中的重要的總結(jié)與展本是相對于目前一些餐飲行業(yè)的實際狀況對其進行深度的剖析發(fā)現(xiàn)就目前而言餐飲行業(yè)的點餐方式存在的諸多問題其中包括餐飲實體店的較為傳統(tǒng)的點HTML5Bootstrap的響應(yīng)式點備都可以輕松我們的系統(tǒng)而管理員也可以在隨時隨地輕松的完成工作本系統(tǒng)排隊功能：現(xiàn)在一些口碑較好的餐飲店在飲食期間一般都需要排隊等這種方式解決餐廳聊天室功能：本系統(tǒng)為了方便進入餐廳的顧客和餐廳服務(wù)之間的溝通交流，特意設(shè)置了一個聊天呼叫功能，顧客可以通過這個功能呼叫服務(wù)尋求幫助。的進入餐飲行業(yè)，的了解餐飲各個流程。對于支付流程，本系統(tǒng)暫時沒有涉及 。過，思維不甚縝密和語言相對貧乏的我，由衷的感謝導(dǎo)師—尊敬的老師。是她在忙碌的教學(xué)時間中還抽身出來幫助我、修改。正因為有指引和鼓勵，我才能如此順利的完成這次畢業(yè)設(shè)計老師本著嚴(yán)謹(jǐn)