綜合WebShop電子商城系統(tǒng)的分析與設(shè)計

WebShop電子商城教學(xué)案例

1/102學(xué)習(xí)重點職業(yè)崗位能力需求分析WebShop電子商城介紹

2/102任務(wù)1—職業(yè)崗位能力需求分析通過對各類招聘信息分析，理解軟件開發(fā)有關(guān)崗位對UML能力需求現(xiàn)狀。任務(wù)目標3/102職業(yè)崗位能力需求分析

軟件開發(fā)工程師對UML能力需求4/102職業(yè)崗位能力需求分析

高級開發(fā)人員對UML能力需求5/102職業(yè)崗位能力需求分析

Java高級程序員對UML能力需求6/102職業(yè)崗位能力需求分析

ASP.NET網(wǎng)絡(luò)程序員對UML能力需求7/102職業(yè)崗位能力需求分析

VC開發(fā)工程師對UML能力需求系統(tǒng)分析員對UML能力需求8/102職業(yè)崗位能力需求分析

BREW高級軟件工程師對UML能力需求軟件項目經(jīng)理對UML能力需求9/102任務(wù)2理解案例系統(tǒng)“WebShop電子商城”分析和設(shè)計情況。任務(wù)目標10/102任務(wù)2WebShop電子商城需求分析—前臺購物顧客11/102任務(wù)2WebShop電子商城需求分析—后臺管理員12/102任務(wù)2WebShop電子商城系統(tǒng)設(shè)計—頁面構(gòu)造圖13/102任務(wù)2WebShop電子商城系統(tǒng)設(shè)計—前臺主頁面14/102任務(wù)2WebShop電子商城系統(tǒng)設(shè)計—會員注冊15/102任務(wù)2WebShop電子商城系統(tǒng)設(shè)計—會員中心16/102任務(wù)2WebShop電子商城系統(tǒng)設(shè)計—查看/購買商品17/102任務(wù)2WebShop電子商城系統(tǒng)設(shè)計—生成訂單18/102任務(wù)2WebShop電子商城系統(tǒng)設(shè)計—商品管理19/102任務(wù)2WebShop電子商城系統(tǒng)設(shè)計—訂單管理20/102任務(wù)2數(shù)據(jù)庫設(shè)計—會員信息表21/102任務(wù)2數(shù)據(jù)庫設(shè)計—商品類別表和支付表22/102任務(wù)2數(shù)據(jù)庫設(shè)計—商品信息表23/102任務(wù)2數(shù)據(jù)庫設(shè)計—員工信息表24/102任務(wù)2數(shù)據(jù)庫設(shè)計—訂單信息表25/102任務(wù)2數(shù)據(jù)庫設(shè)計—訂單詳情信息表和管理員表26/10227/102用例圖類圖活動圖次序圖協(xié)作圖構(gòu)件圖布署圖28/102用例圖組成

購物顧客注冊帳號購物顧客登錄系統(tǒng)購物顧客查看個人資料購物顧客查看歷史訂單購物顧客查看目前訂單購物顧客關(guān)閉帳號系統(tǒng)管理員刪除顧客

WebShop用例圖29/102參與者

確定WebShop電子商城中參與者主要是顧客，而顧客又包括前臺購物顧客和后臺管理員兩大類；后臺管理員又包括一般管理員和系統(tǒng)管理員兩大類。

確定WebShop參與者30/102任務(wù)確定WebShop電子商城中用例，繪制WebShop電子商城用例圖，并對用例進行描述。任務(wù)目標31/102識別用例購物顧客有關(guān)用例32/102識別用例一般管理員有關(guān)用例33/102識別用例系統(tǒng)管理員有關(guān)用例34/102繪制WebShop用例圖1．新建工程依次選擇【File】

【New】菜單，新建一種模型（缺省名稱為untitled）35/102繪制WebShop用例圖2．新建用例圖在視圖區(qū)域中右鍵單擊用例視圖（UseCaseView）節(jié)點，依次選擇【New】

【UseCaseDiagram】，新建一種用例圖。

36/102繪制WebShop用例圖2．新建用例圖在視圖區(qū)域中右鍵單擊用例視圖（UseCaseView）節(jié)點，依次選擇【New】

【UseCaseDiagram】，新建一種用例圖。

37/102繪制WebShop用例圖3．添加參與者和用例

（1）繪制參與者在用例圖繪圖工具欄上選擇圖形符號，在繪圖區(qū)域中單擊，即可繪制參與者（默認名稱為NewClass）

38/102繪制WebShop用例圖3．添加參與者和用例

（2）繪制用例在用例圖繪圖工具欄上選擇圖形符號，在繪圖區(qū)域中完成單擊，即可繪制對應(yīng)用例圖形（如：NewUseCase）

39/102繪制WebShop用例圖4．刪除參與者和用例

（1）在視圖區(qū)域中刪除對象

（2）在繪圖區(qū)域刪除對象

40/102繪制WebShop用例圖5．設(shè)置參與者屬性

在圖形繪制區(qū)域添加了有關(guān)參與者之后，能夠?qū)χ付▍⑴c者屬性進行修改。

41/102繪制WebShop用例圖6．設(shè)置用例屬性

在圖形繪制區(qū)域添加了有關(guān)用例之后，能夠?qū)χ付ㄓ美龑傩赃M行修改。

42/102繪制WebShop用例圖7．設(shè)置字體、調(diào)整位置和大小

參與者和用例都能夠進行字體大小和字體類型設(shè)置，如圖所示。對于參與者來說，“LineColor”、“FillColor”和“UseFillColor”菜單項不可用。

43/102通過包對用例進行合理規(guī)劃包圖概述

包是一種組合機制，把多種各樣模型元素通過內(nèi)在語義連在一起成為一種整體就叫做包。包一般用于對模型進行組織管理，因此有時又將包稱為子系統(tǒng)。包擁有自己模型元素，包實例沒有任何語義（含義），只有在模型執(zhí)行期間，包才故意義。44/102用例描述用例描述模板45/102用例描述用例描述實例46/102任務(wù)識別WebShop電子商城中用例間關(guān)系，并繪制其關(guān)系圖。任務(wù)目標47/102WebShop用例圖（含關(guān)系）

參與者關(guān)系48/102WebShop用例圖（含關(guān)系）

購物顧客管理用例之間關(guān)系49/102WebShop用例圖（含關(guān)系）

前臺購物用例之間關(guān)系50/102WebShop用例圖（含關(guān)系）

后臺管理用例之間關(guān)系51/102任務(wù)閱讀WebShop電子商城系統(tǒng)文檔和用例模型，確定該系統(tǒng)中類，并繪制類圖。

任務(wù)目標52/102類概述

系統(tǒng)實體類

確定WebShop電子商城中類53/102類概述

系統(tǒng)邊界類

確定WebShop電子商城中類系統(tǒng)控制類

54/102【任務(wù)】繪制WebShop商品類圖1．打開工程在視圖區(qū)域中右鍵單擊“LogicalView”節(jié)點，依次選擇【New】

【ClassDiagram】

2．新建類圖55/102【任務(wù)】繪制WebShop商品類圖3．添加類單擊類圖繪圖工具欄上，在繪圖編輯區(qū)域中單擊鼠標左鍵，就能夠繪制一種類

【提醒】直接輸入類名稱（如商品）即可替代“NewClass”，也能夠雙擊類圖打開類屬性設(shè)置對話框進行類名稱設(shè)置；假如模型中已經(jīng)存在用例圖，在創(chuàng)建類時，會將用例圖中參與者顯示供選擇創(chuàng)建對應(yīng)類。56/102【任務(wù)】繪制WebShop商品類圖4．編輯類在類圖編輯區(qū)域中右鍵單擊指定類（如商品類），選擇【OpenSpecification】菜單

57/102【任務(wù)】繪制WebShop商品類圖5．添加屬性第一種辦法：直接添加新屬性。在繪圖區(qū)域中右鍵單擊要添加屬性類（如：商品），選擇【NewAttribute】菜單

第二種辦法：通過“ClassSpecificationfor商品”對話框添加新屬性。在如圖6-14所示對話框中，選擇【Attributes】選項卡58/102【任務(wù)】繪制WebShop商品類圖6．設(shè)置屬性數(shù)據(jù)類型在添加類屬性時候，默認情況下不會要求輸入屬性數(shù)據(jù)類型，假如要設(shè)置類屬性數(shù)據(jù)類型，在如下列圖所示對話框中，在指定屬性上雙擊（如：g_Name），打開類屬性設(shè)置對話框，在【Type】下拉列表中，選擇屬性對應(yīng)數(shù)據(jù)類型（如：String）即可

59/102繪制帶操作實體類完成步驟（1）添加辦法（2）設(shè)置辦法屬性

60/102繪制帶操作實體類完成步驟（1）添加辦法（2）設(shè)置辦法屬性

61/102繪制帶操作實體類完成步驟（3）設(shè)置抽象辦法

62/102繪制帶操作實體類完成步驟（4）完成WebShop電子商城實體類圖繪制63/102繪制邊界類圖

完成步驟（1）右鍵單擊視圖區(qū)域中“LogicalView”節(jié)點，選擇新建包，命名為“邊界類圖”。

（2）在類圖中添加名為“登錄頁面”類，右鍵單擊該類，在右鍵菜單中選擇【OpenSpecification】菜單，在打開類屬性設(shè)置對話框中選擇【Stereotype】下拉列表框，選擇【boundary】項，即可將“登錄頁面”類設(shè)置為邊界類。64/102繪制邊界類圖

完成步驟（3）依次添加WebShop電子商城中“注冊頁面”、“個人資料頁面”、“目前訂單”、“歷史訂單”、“關(guān)閉帳號頁面”、“刪除顧客頁面”等邊界類，得到WebShop電子商城邊界類圖（部分）

65/102繪制控制類圖

完成步驟（1）右鍵單擊視圖區(qū)域中“LogicalView”節(jié)點，選擇新建包，命名為“控制類圖”。

（2）在類圖中添加名為“處理登錄”類，右鍵單擊該類，在右鍵菜單中選擇【OpenSpecification】菜單，在打開類屬性設(shè)置對話框中選擇【Stereotype】下拉列表框，選擇【control】項，即可將“處理登錄”類設(shè)置為控制類。

66/102繪制控制類圖完成步驟（3）依次添加WebShop電子商城中“處理注冊”、“查詢個人資料”、“查詢目前訂單”、“查詢歷史訂單”和“處理帳號關(guān)閉”等邊界類，得到WebShop電子商城控制類圖（部分）

。67/102UML中類與語言中類完成步驟UML中類能夠使用面向?qū)ο笳Z言類構(gòu)造描述來實現(xiàn)（以Java語言為例）

68/102任務(wù)確定WebShop電子商城系統(tǒng)中類之間關(guān)系，并在類圖中體現(xiàn)這些關(guān)系。任務(wù)目標69/102【任務(wù)】確定類間關(guān)系70/102【任務(wù)】繪制類間關(guān)系71/102任務(wù)繪制WebShop電子商城系統(tǒng)中前臺購物顧客購買活動活動圖

。任務(wù)目標72/102繪制WebShop電子商城活動圖完成步驟

（1）打開工程WebShop.mdl。

（2）新建活動圖。在視圖區(qū)域中右鍵單擊“LogicalView”節(jié)點，依次選擇【New】

【ActivityDiagram】，默認狀態(tài)圖名稱為“NewDiagram”，輸入新活動圖名稱（如：前臺購物）

73/102繪制WebShop電子商城活動圖完成步驟

（3）添加購物顧客活動圖起點和終點。選擇活動圖工具欄上起點和終點圖標，在繪圖區(qū)域中單擊鼠標左鍵，即可繪制活動圖起點和終點。（4）添加動作狀態(tài)或活動狀態(tài)。基本操作方式同狀態(tài)圖。（5）增加分支與合并。在WebShop電子商城中，購物顧客通過網(wǎng)上系統(tǒng)進行購物時，假如沒有登錄系統(tǒng)，則需要進行登錄才能完成商品購買操作。74/102繪制WebShop電子商城活動圖完成步驟

（6）增加分叉與匯合。購物顧客進入網(wǎng)上系統(tǒng)后，在未登錄狀態(tài)下能夠搜索并查看商品，并查詢商品詳細情況。顧客登錄系統(tǒng)后，既能夠查看商品信息，購買商品，也能夠修改個人信息和查看個人信息。因此，查看并購買商品和修改/查看個人信息屬于并行流。75/102繪制WebShop電子商城活動圖修改泳道76/102任務(wù)繪制WebShop電子商城系統(tǒng)中購物顧客查看歷史訂單次序圖。

任務(wù)目標77/102次序圖概述

典型次序圖78/102繪制WebShop電子商城次序圖

完成步驟

（1）打開工程WebShop.mdl。

（2）新建次序圖。在視圖區(qū)域中右鍵單擊“LogicalView”節(jié)點，依次選擇【New】

【SequenceDiagram】，默認次序圖名稱為“NewDiagram”，輸入新次序圖名稱（如查看歷史訂單）。

79/102繪制WebShop電子商城次序圖

完成步驟

（3）選擇類，創(chuàng)建對象，并指定對象名。選擇次序圖工具欄上按鈕，在繪圖區(qū)域中單擊鼠標左鍵，將指定對象添加到次序圖

80/102繪制WebShop電子商城次序圖

完成步驟

（4）添加對象間傳遞消息。選擇次序圖工具欄上按鈕，在繪圖區(qū)域中兩個對象生命線之間拖動鼠標左鍵，完成對象之間消息添加。

81/102繪制WebShop電子商城次序圖

完成步驟

設(shè)置消息屬性82/102繪制WebShop電子商城次序圖

完成步驟假如要取消消息編號或取消激活條顯示，能夠依次選擇主菜單欄下【Tools】

【Options】，選擇【Diagram】選項卡，通過取消選擇【Sequencenumbering】復(fù)選框和【Focusofcontrol】復(fù)選框完成

83/102繪制WebShop電子商城次序圖

完成步驟

（5）完成繪制。最后完成WebShop電子商城前臺購物顧客查看目前訂單次序圖如圖8-40所示

84/102任務(wù)繪制WebShop電子商城系統(tǒng)協(xié)作圖。

任務(wù)目標85/102繪制WebShop電子商城協(xié)作圖完成步驟（1）打開工程WebShop.mdl。（2）新建協(xié)作圖。在視圖區(qū)域中右鍵單擊“LogicalView”節(jié)點，依次選擇【New】

【CollaborationDiagram】，默認協(xié)作圖名稱為“NewDiagram”，輸入新次序圖名稱（如：顧客注冊協(xié)作圖）。

86/102繪制WebShop電子商城協(xié)作圖完成步驟（3）添加對象。選擇協(xié)作圖工具欄上按鈕，在繪圖區(qū)域中單擊鼠標左鍵，將指定對象添加到次序圖。（4）添加消息。在協(xié)作圖中能夠添加對象間消息，也能夠添加反身消息；既能夠添加正向消息，也能夠添加反向消息，消息類型見表8-9。（5）添加數(shù)據(jù)流。這里數(shù)據(jù)流是描述一種對象向另一種對象發(fā)送消息時返回消息。能夠添加數(shù)據(jù)流，也能夠添加反向數(shù)據(jù)流，數(shù)據(jù)流類型見表8-9。

87/102繪制WebShop電子商城協(xié)作圖完成步驟（6）完成繪制。最后完成WebShop電子商城購物顧客注冊協(xié)作圖如圖8-45所示。

88/102任務(wù)繪制WebShop電子商城系統(tǒng)組件圖。

任務(wù)目標89/102繪制WebShop電子商城組件圖完成步驟（1）打開工程WebShop.mdl。（2）新建組件圖。在視圖區(qū)域中依次選擇【ComponentView】

【main】節(jié)點，進入組件圖繪制狀態(tài)。也能夠右鍵單擊【ComponentView】，依次選擇【New】

【ComponentDigram】，新建一種組件圖

90/102繪制WebShop電子商城組件圖完成步驟（3）添加組件到組件圖。根據(jù)軟件應(yīng)用系統(tǒng)組件分布情況，選擇組件圖繪圖工具欄上對應(yīng)圖標繪制組件。

91/102繪制WebShop電子商城組件圖完成步驟（4）設(shè)置組件屬性。組件添加到組件圖后來，能夠通過右鍵單擊組件，選擇【OpenStandardSpecification】菜單，打開組件屬性設(shè)置對話框。92/102繪制WebShop電子商城組件圖完成步驟（5）設(shè)置類和組件關(guān)系。組件圖描述是系統(tǒng)實現(xiàn)，因此要指定實現(xiàn)組件功能文獻。在下列圖8所示對話框中選擇【Files】選項卡，右鍵單擊中間空白區(qū)域，選擇【InsertFile】菜單項。93/102繪制WebShop電子商城組件圖完成步驟對于在模型中已經(jīng)存在類，也能夠建立其與組件關(guān)系。辦法一：

94/102繪制WebShop電子商城組件圖完成步驟對于在模型中已經(jīng)存在類，也能夠建立其與組件