張佳佳，王 楊，韓力英

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

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

張佳佳，王 楊，韓力英

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

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

Struts；Spring；Hibermate；jQuery；餐飲Web App平臺(tái)

隨著互聯(lián)網(wǎng)的日益普及和社會(huì)服務(wù)業(yè)的崛起，網(wǎng)絡(luò)信息呈爆炸式增長，我國餐飲業(yè)也得到了迅猛發(fā)展。餐飲業(yè)傳統(tǒng)的管理思想和模式受計(jì)算機(jī)及通信技術(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ū)?huì)越來越受到人們的歡迎［1］。目前互聯(lián)網(wǎng)領(lǐng)域研究的熱點(diǎn)課題是如何利用成熟的J2EE平臺(tái)開發(fā)Web應(yīng)用系統(tǒng)。本文的Web App以某餐飲行業(yè)的要求為基礎(chǔ)進(jìn)行設(shè)計(jì)，實(shí)現(xiàn)了注冊(cè)登錄、訂座、外賣等功能。架。用戶可以采用點(diǎn)滑頁面的方法去觸發(fā)后臺(tái)程序；利用提高系統(tǒng)性能的連接復(fù)用的方法調(diào)用數(shù)據(jù)庫中的數(shù)據(jù)；利用點(diǎn)擊操作界面的方法來重置和更換數(shù)據(jù)庫中的表以實(shí)現(xiàn)點(diǎn)餐、外賣、支付等功能。

本文的Web應(yīng)用系統(tǒng)根據(jù)餐飲行業(yè)的實(shí)際需要，大致被分為如下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ā)語言，以實(shí)現(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實(shí)現(xiàn)了視圖層，JSP用于獲取用戶的需求，jQuery用于實(shí)現(xiàn)和用戶的異步交互；Struts+Spring實(shí)現(xiàn)業(yè)務(wù)層，Struts根據(jù)JSP從用戶級(jí)獲取到的不同的需求，調(diào)用不同Action控制器，為了解決業(yè)務(wù)之間的邏輯問題，Action再調(diào)用Service；Spring+Hibemate實(shí)現(xiàn)數(shù)據(jù)持久層，Service通過調(diào)用DAO（Data Access Objects）接口實(shí)現(xiàn)對(duì)數(shù)據(jù)庫中函數(shù)和數(shù)據(jù)的控制，DAO通過調(diào)用Hibermate API對(duì)持久化的對(duì)象進(jìn)行控制，Hibeimate將DAO對(duì)持久化對(duì)象的控制看作是對(duì)數(shù)據(jù)庫中數(shù)據(jù)的控制，最終實(shí)現(xiàn)對(duì)數(shù)據(jù)庫中數(shù)據(jù)的重置和更改［3］。其中，業(yè)務(wù)邏輯層和數(shù)據(jù)持久層中所有的類對(duì)象均由Spring負(fù)責(zé)創(chuàng)建和維護(hù)。

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

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

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

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

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

此款餐飲Web App數(shù)據(jù)庫中包括多個(gè)表，用來存儲(chǔ)系統(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對(duì)象、DAO都由Spring的IOC容器生成和維護(hù)，Hibemate不再有配置文件，Hibemate的數(shù)據(jù)源信息、Hibemate對(duì)象、DAO接口都被整合到Spring的配置文件Bean工廠配置文件中［7］。

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

此款餐飲Web App主要實(shí)現(xiàn)的功能包括：注冊(cè)登錄模塊、個(gè)人中心、預(yù)訂餐位、外賣、活動(dòng)及游戲模塊。系統(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注冊(cè)登錄和個(gè)人中心模塊

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

2.2預(yù)訂餐位模塊

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

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

2.3外賣模塊

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

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

2.4活動(dòng)和游戲模塊

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

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

3　結(jié)束語

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

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

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

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

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

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

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

［7］胡凌云.基于SSH框架的銷售管理系統(tǒng)的設(shè)計(jì)與實(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稿件編號(hào)：201504213

河北省高等學(xué)校科學(xué)研究項(xiàng)目（Z2014088）

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