基于SSH+jQuery框架的餐飲Web App的設(shè)計與實現(xiàn)

張佳佳，王 楊，韓力英

（河北工業(yè)大學(xué) 天津　300401）

基于SSH+jQuery框架的餐飲Web App的設(shè)計與實現(xiàn)

張佳佳，王 楊，韓力英

（河北工業(yè)大學(xué) 天津300401）

針對傳統(tǒng)方式開發(fā)的餐飲Web App平臺難以維護(hù)和擴展、用戶體驗不夠好等問題，本文提出一種以Windows為開發(fā)環(huán)境，Eclipse為開發(fā)工具，Oracle為數(shù)據(jù)庫，將SSH和jQuery這兩種框架整合應(yīng)用于系統(tǒng)開發(fā)的方案。該方案包括視圖層、業(yè)務(wù)邏輯層和數(shù)據(jù)持久層，分別由SSH+jQuery框架組合實現(xiàn)相應(yīng)功能。結(jié)果表明，該方案將SSH和jQuery這2個框架整合應(yīng)用于系統(tǒng)開發(fā)中，實現(xiàn)了注冊登錄、訂餐、外賣等主要功能，實現(xiàn)了上述三個層面的完全分離，提高了用戶體驗度。

Struts；Spring；Hibermate；jQuery；餐飲Web App平臺

隨著互聯(lián)網(wǎng)的日益普及和社會服務(wù)業(yè)的崛起，網(wǎng)絡(luò)信息呈爆炸式增長，我國餐飲業(yè)也得到了迅猛發(fā)展。餐飲業(yè)傳統(tǒng)的管理思想和模式受計算機及通信技術(shù)的快速發(fā)展，發(fā)生了極大地改變。基于餐飲的Web App應(yīng)用在最近幾年中顯得越來越重要，未來的發(fā)展方向是大量的Web應(yīng)用逐漸取代PC應(yīng)用，信息管理系統(tǒng)由C/S（Client/Server，客戶端/服務(wù)器）模式向B/S（Browser/Server，瀏覽器/服務(wù)器）模式發(fā)展，基于B/S結(jié)構(gòu)的Web應(yīng)用程序?qū)絹碓绞艿饺藗兊臍g迎［1］。目前互聯(lián)網(wǎng)領(lǐng)域研究的熱點課題是如何利用成熟的J2EE平臺開發(fā)Web應(yīng)用系統(tǒng)。本文的Web App以某餐飲行業(yè)的要求為基礎(chǔ)進(jìn)行設(shè)計，實現(xiàn)了注冊登錄、訂座、外賣等功能。架。用戶可以采用點滑頁面的方法去觸發(fā)后臺程序；利用提高系統(tǒng)性能的連接復(fù)用的方法調(diào)用數(shù)據(jù)庫中的數(shù)據(jù)；利用點擊操作界面的方法來重置和更換數(shù)據(jù)庫中的表以實現(xiàn)點餐、外賣、支付等功能。

本文的Web應(yīng)用系統(tǒng)根據(jù)餐飲行業(yè)的實際需要，大致被分為如下3層：視圖層、業(yè)務(wù)層、數(shù)據(jù)持久層［2-3］。系統(tǒng)框架結(jié)構(gòu)如圖1所示。

1　研究方法

本論文研究的餐飲Web App采用Windows開發(fā)環(huán)境和Oracle數(shù)據(jù)庫，使用css3、html5、javascript作為前端開發(fā)語言，以實現(xiàn)頁面信息的結(jié)構(gòu)化和交互化；使用java作為后端開發(fā)語言，并使用了SSH（Struts+Spring+Hibemate）+jQuery框

圖1　系統(tǒng)框架結(jié)構(gòu)圖Fig.1　Structure diagrame of the system

在上圖中的基于餐飲行業(yè)的Web App系統(tǒng)架構(gòu)中，利用 JSP+jQuery實現(xiàn)了視圖層，JSP用于獲取用戶的需求，jQuery用于實現(xiàn)和用戶的異步交互；Struts+Spring實現(xiàn)業(yè)務(wù)層，Struts根據(jù)JSP從用戶級獲取到的不同的需求，調(diào)用不同Action控制器，為了解決業(yè)務(wù)之間的邏輯問題，Action再調(diào)用Service；Spring+Hibemate實現(xiàn)數(shù)據(jù)持久層，Service通過調(diào)用DAO（Data Access Objects）接口實現(xiàn)對數(shù)據(jù)庫中函數(shù)和數(shù)據(jù)的控制，DAO通過調(diào)用Hibermate API對持久化的對象進(jìn)行控制，Hibeimate將DAO對持久化對象的控制看作是對數(shù)據(jù)庫中數(shù)據(jù)的控制，最終實現(xiàn)對數(shù)據(jù)庫中數(shù)據(jù)的重置和更改［3］。其中，業(yè)務(wù)邏輯層和數(shù)據(jù)持久層中所有的類對象均由Spring負(fù)責(zé)創(chuàng)建和維護(hù)。

1.1視圖層的實現(xiàn)

視圖層使用jQuery框架實現(xiàn)注冊會員時判斷用戶名是否已注冊、生成驗證碼、輸入性別及聯(lián)系方式、上傳頭像和信息自動完成等功能。jQuery可以自動獲取用戶的需求，并向server發(fā)出此異步需求，server端接收用戶發(fā)來的異步需求后，會對其需求進(jìn)行相應(yīng)的解答，并將解決后的結(jié)果以應(yīng)答的形式回傳給用戶端，用戶接收到應(yīng)答數(shù)據(jù)后，會調(diào)用相應(yīng)的回調(diào)程序?qū)?yīng)答數(shù)據(jù)進(jìn)行處理，并使其顯示在當(dāng)前頁面上。在整個調(diào)用回傳期間，此過程與其他控制同步進(jìn)行，不會浪費用戶時間。

1.2業(yè)務(wù)邏輯層的實現(xiàn)

視圖層和業(yè)務(wù)邏輯層之間的無縫連接由Struts框架來實現(xiàn)，核心Action Fileter Dispacher獲取Web端的問題后，根據(jù)配置文件struts.xml，給對應(yīng)業(yè)務(wù)控制器發(fā)送來自Web端的不同的問題，由Action來解決Web端的問題。Action會通過調(diào)用相應(yīng)的Service對象來處理業(yè)務(wù)之間的邏輯問題，以解決來自Web端的需求。解決完Web端的需求后，Service會將此答復(fù)返回給Action，Action再將其傳給Web端。根據(jù)配置文件struts.xml和Action的返回來的結(jié)果決定將哪個視圖頁面返回給用戶，或者是把接下來的請求發(fā)送給下一個Action業(yè)務(wù)控制器來進(jìn)行解答［4］。Spring和Struts整合之后，此款基于餐飲行業(yè)的Web App中的Action和Service都由Spring中的IOC容器生成和維護(hù)，因此，二者作為Bean實體被配置到Bean工廠配置文件中。struts.xml進(jìn)行Action配置時class屬性應(yīng)為Bean工廠配置文件中相應(yīng)Action Bean的ID［5］。

1.3數(shù)據(jù)持久層的實現(xiàn)

此款餐飲Web App數(shù)據(jù)庫中包括多個表，用來存儲系統(tǒng)中所有數(shù)據(jù)信息；采用提高系統(tǒng)性能的連接復(fù)用的方法調(diào)用數(shù)據(jù)庫中的數(shù)據(jù)。Hibemate將數(shù)據(jù)庫中的表映射為相應(yīng)的POJO（plain object Java object）和映射文件［6］。Spring和Hibemate整合后，Hibemate API對象、DAO都由Spring的IOC容器生成和維護(hù)，Hibemate不再有配置文件，Hibemate的數(shù)據(jù)源信息、Hibemate對象、DAO接口都被整合到Spring的配置文件Bean工廠配置文件中［7］。

2　功能實現(xiàn)及結(jié)果

此款餐飲Web App主要實現(xiàn)的功能包括：注冊登錄模塊、個人中心、預(yù)訂餐位、外賣、活動及游戲模塊。系統(tǒng)模塊結(jié)構(gòu)圖如圖2所示。

圖2　某餐飲Web App系統(tǒng)模塊結(jié)構(gòu)圖Fig.2　Module structure diagram of a catering industry Web App

2.1注冊登錄和個人中心模塊

注冊登錄模塊包括快速注冊和登錄功能，用戶登錄后可以到個人中心里修改自己的詳細(xì)信息（密碼、昵稱、年齡等），上傳自己的頭像，還可以管理自己發(fā)表的說說和照片，查看訂單詳情和版本信息。

2.2預(yù)訂餐位模塊

通過點擊訂餐入口，用戶可選擇就餐的城市、門店，填寫訂座信息，訂座信息包括用戶的就餐時間、人數(shù)、姓名以及手機號。填寫完訂座信息后，將進(jìn)入點菜的環(huán)節(jié)，在此環(huán)節(jié)用戶可以選擇菜品類型，確認(rèn)訂單后即將完成訂餐功能。主要詳情如圖3所示。

圖3　訂餐原型圖Fig.3　The prototype diagram of reservation

2.3外賣模塊

用戶通過點擊外賣入口，將要填寫姓名、電話、用餐人數(shù)及外賣類型。外賣類型分為外賣派送和上門自取兩種，系統(tǒng)根據(jù)用戶所選擇的外賣類型進(jìn)行判斷，引導(dǎo)顧客選擇門店，填寫外賣送達(dá)時間或者用戶上門自取的時間以完成外賣訂單的下單。主要詳情如圖4所示。

圖4　外賣原型圖Fig.4　The prototype diagram of take-out

2.4活動和游戲模塊

用戶通過手動點擊主界面上的游戲按鈕，可進(jìn)入到根據(jù)個人的喜好選擇各類游戲的界面。點擊活動入口，可以查看最近的線上線下活動通知。主要詳情如圖5所示。

圖5　游戲原型圖Fig.5　The prototype diagram of game

3　結(jié)束語

本文根據(jù)此餐飲 Web App系統(tǒng)的需求，將 SSH和jQuery這2個框架整合應(yīng)用于系統(tǒng)的實現(xiàn)過程中，解決了用傳統(tǒng)方式開發(fā)的餐飲Web App平臺難以維護(hù)和擴展、用戶體驗不夠好等問題，事實證明此方案切實有效。另外，此方案具有很好的擴展性，可以進(jìn)一步開發(fā)，滿足餐飲企業(yè)的需求。

［1］張志峰.Web框架技術(shù)（Struts+Hibermate+Spring）教程［M］.北京：清華大學(xué)出版社，2013.

［2］郭廣軍，朱昭君，王劍波.基于SSH架構(gòu)的課程作業(yè)與成績管理系統(tǒng)［J］.微電子學(xué)與計算機，2010，27（8）：157.

［3］張建軍，劉虎，倪芳英，等.基于SSH整合架構(gòu)的研究與應(yīng)用［J］.湖南師范大學(xué)自然科學(xué)學(xué)報，2012，35（6）：39.

［4］張水芳，張晶.酒店餐飲點餐管理系統(tǒng)初探［J］.賀州學(xué)院學(xué)報，2010，26（3）：121-123.

［5］王君.基于Struts+Spring+Hibemate的企業(yè)級WEB應(yīng)用框架的研究［D］.合肥：合肥工業(yè)大學(xué)，2012.

［6］王海濤，賈宗璞.基于Struts和Hibermate的Web應(yīng)用開發(fā)［J］.計算機工程，2011（9）：118-120.

［7］胡凌云.基于SSH框架的銷售管理系統(tǒng)的設(shè)計與實現(xiàn)［D］.大連：大連理工大學(xué)，2013.

Design and implementation of a catering industry Web App based on SSH and jQuery

ZHANG Jia-jia，WANG Yang，HAN Li-ying
（Hebei University Technology，Tianjin 300401，China）

For solving the Web App platform difficult to maintain and extend and promoting the user experience，a system developing scheme based on integrating framework SSH and jQuery has been proposed in this paper.This scheme adopts Windows as development environment，Eclipse as development tool and Oracle as the database.It contains view layer，business logic layer and date persistence layer，implemented by the JSP+jQuery framework，Struts+Spring framework，and Hibermate+Spring frameworkseparately.The results shows that this scheme has achieved the main function of registration，ordering，take-out，and has realized the complete separation of theview layer，business logic layer and date persistence layer，which also will improved the user experience.

struts；spring；hibermate；jQuery；Web App platform of catering industry

TN99

A

1674-6236（2016）03-0020-03

2015-04-19稿件編號：201504213

河北省高等學(xué)?？茖W(xué)研究項目（Z2014088）

張佳佳（1988—），女，河北滄州人，碩士研究生。研究方向：多媒體信息處理。