姚明

摘要：隨著人們的生活水平日益增高，婚禮的個(gè)性化已成為人們時(shí)尚生活中的一部分，構(gòu)建一個(gè)以婚慶為主題的門戶網(wǎng)站，為用戶提供各種婚慶資訊以及婚慶服務(wù)，有著巨大的發(fā)展?jié)摿?。網(wǎng)站基于Java語言和MySQL數(shù)據(jù)庫(kù)管理系統(tǒng)開發(fā)，引入了熱門的前端技術(shù)bootstrap與angularJS，使頁(yè)面更加友好并支持響應(yīng)式布局，用戶可以使用電腦、手機(jī)或平板訪問網(wǎng)站。網(wǎng)站為用戶提供大量婚慶資訊，為婚慶公司提供一個(gè)發(fā)布產(chǎn)品的平臺(tái)，注冊(cè)用戶可以通過平臺(tái)預(yù)約購(gòu)買所需產(chǎn)品，并獲得較國(guó)內(nèi)其他婚慶主題網(wǎng)站更好的婚慶服務(wù)體驗(yàn)，具有較好的應(yīng)用前景。

關(guān)鍵詞：婚慶網(wǎng)站；門戶網(wǎng)站；Java Web

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）25-0204-03

Design and Implementation of Wedding Subject Portal Site Based on Java Web

YAO Ming

（Department of Computer Science and Technology， Guangdong University of Petrochemical Technology， Maoming 525000， China）

Abstract： With the increase of people's living standard， personalized wedding has become a part of people's fashion lifestyle， building a portal site with wedding as the theme to provide various wedding information and wedding services for users has a great potential development. The development of website is based on Java language and MySQL database management system， the popular front-end bootstrap technique and angularJS are introduced， which makes the page more friendly and support response type layout， user can use computers， mobile phones or tablet to access the site. The wedding website can provide much wedding information for users and provide a platform for wedding company to release product， registered users can through the platform to make an appointment to buy the necessary products and can get better wedding service experience compared to other domestic theme wedding website， it has good application prospects.

Key words： wedding site； portal site； Java Web

婚慶是婚禮慶典的簡(jiǎn)稱。婚禮策劃是指為客人量身打造的婚禮而進(jìn)行的策劃。目前，新婚人群對(duì)于結(jié)婚的消費(fèi)需求已由過去的模式化、單一化需求逐漸轉(zhuǎn)變?yōu)閭€(gè)性化、多樣化需求，越來越多的人傾向于浪漫溫馨的婚慶方式，專業(yè)婚慶公司也相應(yīng)大量產(chǎn)生。調(diào)查分析多個(gè)國(guó)內(nèi)的婚慶主題網(wǎng)站，其傾向于提供各種婚慶服務(wù)但并沒有給用戶提供一個(gè)良好的婚慶指導(dǎo)與咨詢，對(duì)于新婚用戶而言難以得到好的用戶體驗(yàn)。本文針對(duì)此現(xiàn)狀，設(shè)計(jì)開發(fā)一個(gè)能夠提供婚慶導(dǎo)航服務(wù)的網(wǎng)站，讓用戶自主地獲得其所需的資訊與服務(wù)，有條不紊地操辦結(jié)婚過程中的各個(gè)事情，并獲得更好的婚慶服務(wù)體驗(yàn)。

1 系統(tǒng)分析

1.1 用例建模

通過業(yè)務(wù)分析，分別繪制系統(tǒng)前臺(tái)用例圖與系統(tǒng)后臺(tái)用例圖如圖1、圖2所示。

[用例名＼&婚慶導(dǎo)航＼&簡(jiǎn)要描述＼&用戶通過該用例快速找到自己需要的婚慶資訊＼&參與者＼&前臺(tái)用戶＼&涉眾＼&前臺(tái)用戶＼&相關(guān)用例＼&無＼&前置條件＼&用戶進(jìn)入網(wǎng)站＼&后置條件＼&顯示需要了解的婚慶資訊列表＼&基本事件流

用例起始于前臺(tái)用戶需要快速獲取需要的婚慶資訊

1. 前臺(tái)用戶在菜單欄點(diǎn)擊婚慶導(dǎo)航

2. 系統(tǒng)查詢數(shù)據(jù)獲取婚慶導(dǎo)航模板（A-1）

3. 系統(tǒng)根據(jù)獲取的模板加載導(dǎo)航圖，顯示婚慶導(dǎo)航頁(yè)面（A-2）

4. 用戶從導(dǎo)航圖中選擇需要了解的活動(dòng)

5. 系統(tǒng)根據(jù)用戶選擇的活動(dòng)查詢數(shù)據(jù)庫(kù)獲取相關(guān)資訊（A-1）

6. 系統(tǒng)顯示查詢的資訊列表＼&備選事件流

A-*前臺(tái)用戶在操作提交之前，隨時(shí)都能結(jié)束

1. 前臺(tái)用戶可以結(jié)束子流程返回主頁(yè)面

A-1數(shù)據(jù)查詢操作失敗

1. 數(shù)據(jù)庫(kù)查詢出錯(cuò)，提示數(shù)據(jù)丟失

2. 前臺(tái)用戶可以結(jié)束流程，返回主頁(yè)面

A-2顯示婚慶導(dǎo)航頁(yè)面失敗

1. 系統(tǒng)解釋模板出錯(cuò)，提示導(dǎo)航加載失敗

2. 前臺(tái)用戶可以重新加載頁(yè)面，也可以結(jié)束子流程返回主頁(yè)面＼&補(bǔ)充約束-數(shù)據(jù)需求：無

補(bǔ)充約束-業(yè)務(wù)規(guī)則：無＼&待解決問題：無＼&相關(guān)圖：無＼&]

2 系統(tǒng)設(shè)計(jì)

以系統(tǒng)架構(gòu)包圖及設(shè)計(jì)中較關(guān)鍵的婚慶導(dǎo)航構(gòu)件設(shè)計(jì)為例作相關(guān)說明，如圖4所示。

圖4 系統(tǒng)架構(gòu)包圖

User Interaces：網(wǎng)站頁(yè)面，采用JSP開發(fā)

org.gm.page.action：前臺(tái)業(yè)務(wù)控制層，根據(jù)用戶請(qǐng)求跳轉(zhuǎn)到相應(yīng)業(yè)務(wù)邏輯

org.gm.admin.action：后臺(tái)業(yè)務(wù)控制層，根據(jù)用戶請(qǐng)求跳轉(zhuǎn)到相應(yīng)業(yè)務(wù)邏輯

org.gm.page.manager：前臺(tái)業(yè)務(wù)邏輯層，根據(jù)用戶請(qǐng)求跳轉(zhuǎn)到相應(yīng)業(yè)務(wù)邏輯

org.gm.admin.manager：后臺(tái)業(yè)務(wù)邏輯層，根據(jù)用戶請(qǐng)求跳轉(zhuǎn)到相應(yīng)業(yè)務(wù)邏輯

org.gm.common.util：工具包，獲取數(shù)據(jù)庫(kù)連接，簡(jiǎn)化數(shù)據(jù)庫(kù)操作

org.gm.common.dao：對(duì)底層數(shù)據(jù)存取的操作

org.gm.common.domain：業(yè)務(wù)實(shí)體

其中，婚慶導(dǎo)航構(gòu)件的交互與類圖分別如圖5、圖6所示。

圖5 婚慶導(dǎo)航構(gòu)件的交互

圖6 婚慶導(dǎo)航類圖

3 系統(tǒng)實(shí)現(xiàn)

以核心模塊——婚慶導(dǎo)航實(shí)現(xiàn)為例作相關(guān)說明。與時(shí)下的其他婚慶網(wǎng)站相比，婚慶導(dǎo)航為本網(wǎng)站一個(gè)特色?；閼c導(dǎo)航以拓?fù)鋱D的形式展現(xiàn)婚慶過程中需要操辦的各種事項(xiàng)，用戶通過婚慶導(dǎo)航能夠迅速?gòu)暮Ａ炕閼c資訊中找到需要的信息。

在婚慶導(dǎo)航模塊的基礎(chǔ)上編輯不同的活動(dòng)拓?fù)鋱D，能夠更好地指導(dǎo)用戶在各種活動(dòng)中如何有序完成活動(dòng)。用戶也可以根據(jù)自己的需求定制活動(dòng)場(chǎng)景圖，以此為依據(jù)去置辦事情。另外婚慶導(dǎo)航還支持講拓?fù)鋱D生成為不同大小的圖片，便于往后快速查閱?；閼c導(dǎo)航實(shí)現(xiàn)如圖7所示。

實(shí)現(xiàn)的關(guān)鍵代碼：

[function initDatas（）{

//略，加載婚慶導(dǎo)航模板

//圖的廣度優(yōu)先遍歷

graph.graphModel.forEachByBreadthFirst（function（d）{

if（ d.type=="Text"）{

var name = d.name；

var data = {text： name， id： d.id， iconCls： getTreeIcon（d）}；

map[d.id] = data；

var parent = d.parent；

//parent未定義則d為根節(jié)點(diǎn)

if（！parent）{

datas.push（data）；//保存根節(jié)點(diǎn)

return；

}

parent = map[parent.id]；

var children = parent.children；

if（！children）{

children = parent.children = []；

}

children.push（data）；

}

}）；

//構(gòu)建樹

$（'#tree'）.tree（{

data： datas

}）；

syncSelectionTreeAndGraph（"tree"， graph）； //同步選擇節(jié)點(diǎn)

syncDataTreeAndGraph（"tree"， graph）； //同步數(shù)據(jù)

}）；＼&]

4 結(jié)束語

針對(duì)國(guó)內(nèi)婚慶主題網(wǎng)站存在的不足，設(shè)計(jì)實(shí)現(xiàn)了能夠提供婚慶導(dǎo)航服務(wù)的婚慶主題門戶網(wǎng)站。設(shè)計(jì)中使用了熱門的前端技術(shù)bootstrap，使用戶除了可以使用電腦進(jìn)行訪問網(wǎng)站，還可以通過手機(jī)或平板進(jìn)行訪問，符合用戶的操作習(xí)慣；引入了angularjs項(xiàng)目下的ui-route前端路由框架，極大地提高了頁(yè)面的加載速度，提升了用戶體驗(yàn)；選用了qunee組件，使婚慶導(dǎo)航模塊擁有了類似于思維導(dǎo)圖的功能。網(wǎng)站實(shí)現(xiàn)了預(yù)期的功能，具有實(shí)用價(jià)值。

參考文獻(xiàn)：

[1] 朱少民. 軟件質(zhì)量保證和管理[M]. 北京： 清華大學(xué)出版社， 2007： 26-49.

[2] 李剛. 輕量級(jí) J2EE 企業(yè)實(shí)戰(zhàn)[M]. 北京： 電子工業(yè)出版社， 2006： 34-87.

[3] bootstrap中文網(wǎng)[EB/OL]. http：//www.bootcss.