姚明

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

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

中圖分類號：TP393 文獻標識碼：A 文章編號：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

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

1 系統(tǒng)分析

1.1 用例建模

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

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

用例起始于前臺用戶需要快速獲取需要的婚慶資訊

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

實現(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é)點

if（！parent）{

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

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é)點

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

}）；＼&]

4 結(jié)束語

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

參考文獻：

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

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

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