基于SSH+jQuery框架的餐飲Web App的設計與實現

張佳佳，王 楊，韓力英

（河北工業大學 天津　300401）

基于SSH+jQuery框架的餐飲Web App的設計與實現

張佳佳，王 楊，韓力英

（河北工業大學 天津300401）

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

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

隨著互聯網的日益普及和社會服務業的崛起，網絡信息呈爆炸式增長，我國餐飲業也得到了迅猛發展。餐飲業傳統的管理思想和模式受計算機及通信技術的快速發展，發生了極大地改變。基于餐飲的Web App應用在最近幾年中顯得越來越重要，未來的發展方向是大量的Web應用逐漸取代PC應用，信息管理系統由C/S（Client/Server，客戶端/服務器）模式向B/S（Browser/Server，瀏覽器/服務器）模式發展，基于B/S結構的Web應用程序將會越來越受到人們的歡迎［1］。目前互聯網領域研究的熱點課題是如何利用成熟的J2EE平臺開發Web應用系統。本文的Web App以某餐飲行業的要求為基礎進行設計，實現了注冊登錄、訂座、外賣等功能。架。用戶可以采用點滑頁面的方法去觸發后臺程序；利用提高系統性能的連接復用的方法調用數據庫中的數據；利用點擊操作界面的方法來重置和更換數據庫中的表以實現點餐、外賣、支付等功能。

本文的Web應用系統根據餐飲行業的實際需要，大致被分為如下3層：視圖層、業務層、數據持久層［2-3］。系統框架結構如圖1所示。

1　研究方法

本論文研究的餐飲Web App采用Windows開發環境和Oracle數據庫，使用css3、html5、javascript作為前端開發語言，以實現頁面信息的結構化和交互化；使用java作為后端開發語言，并使用了SSH（Struts+Spring+Hibemate）+jQuery框

圖1　系統框架結構圖Fig.1　Structure diagrame of the system

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

1.1視圖層的實現

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

1.2業務邏輯層的實現

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

1.3數據持久層的實現

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

2　功能實現及結果

此款餐飲Web App主要實現的功能包括：注冊登錄模塊、個人中心、預訂餐位、外賣、活動及游戲模塊。系統模塊結構圖如圖2所示。

圖2　某餐飲Web App系統模塊結構圖Fig.2　Module structure diagram of a catering industry Web App

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

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

2.2預訂餐位模塊

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

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

2.3外賣模塊

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

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

2.4活動和游戲模塊

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

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

3　結束語

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

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

［2］郭廣軍，朱昭君，王劍波.基于SSH架構的課程作業與成績管理系統［J］.微電子學與計算機，2010，27（8）：157.

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

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

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

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

［7］胡凌云.基于SSH框架的銷售管理系統的設計與實現［D］.大連：大連理工大學，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

河北省高等學校科學研究項目（Z2014088）

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