清風電子相冊的設計與實現(xiàn)

湖南商務職業(yè)技術學院畢業(yè)設計

目錄

1引言1

1.1項目開發(fā)背景1

1.2開發(fā)技術簡介1

1.2.1vue簡介1

1.2.2Springboot簡介2

1.3開發(fā)工具簡介2

2需求分析2

2.1功能需求描述2

2.2非功能需求描述3

2.3需求用例建模3

2.3.1登錄模塊的用例3

2.3.2我的相冊模塊的用例5

2.3.3評論模塊的用例7

2.3.4共享相冊模塊的用例9

3系統(tǒng)概要設計10

3.1系統(tǒng)設計原則10

3.2系統(tǒng)功能設計10

3.2.1登錄模塊功能設計11

3.2.2我的相冊模塊功能設計13

3.2.3評論模塊功能設計14

3.2.4共享相冊功能設計16

3.3數(shù)據(jù)庫設計18

3.3.1設計原則19

3.3.2概念設計19

3.3.3邏輯設計20

3.3.4數(shù)據(jù)字典20

II

湖南商務職業(yè)技術學院畢業(yè)設計

4系統(tǒng)詳細設計22

4.1用戶登錄管理子模塊設計22

4.1.1用戶登錄子模塊詳細設計22

4.2我的相冊管理子模塊設計23

4.2.1文檔相冊管理子模塊詳細設計23

4.3評論管理子模塊設計24

4.3.1評論管理子模塊詳細設計24

4.4共享相冊管理子模塊設計25

4.4.1共享相冊管理子模塊詳細設計25

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

5.1登錄子模塊實現(xiàn)27

5.1.1登錄模塊界面設計27

5.1.2登錄模塊核心代碼實現(xiàn)：27

5.2我的相冊子模塊實現(xiàn)31

5.2.1我的相冊模塊界面設計31

5.2.2我的相冊模塊核心代碼實現(xiàn)31

5.3評論子模塊實現(xiàn)34

5.3.1評理模塊界面設計34

5.3.2評論模塊核心代碼實現(xiàn)35

5.4共享相冊子模塊實現(xiàn)38

5.4.1共享相冊子模塊界面設計38

5.4.2共享相冊子模塊代碼實現(xiàn)38

6系統(tǒng)測試41

6.1登錄功能測試41

6.2我的相冊管理功能測試42

6.3評論管理功能測試42

6.4共享相冊功能測試43

7設計小結44

III

湖南商務職業(yè)技術學院畢業(yè)設計

清風電子相冊的設計與實現(xiàn)

1引言

如今信息化的社會，讓商品經(jīng)濟化產生了高效益，使得計算機的應用已經(jīng)

普及到了社會生活的各個角落。計算機與人類的關系愈來愈密切，使得計算機

的應用也深入到人們日常的生活當中。使用電腦的人們現(xiàn)在都已經(jīng)習慣將自己

的照片或是喜歡的圖片以電子格式保存于電腦中，電子相冊為人們管理自己的

電子相片帶來了極大的方便。

1.1項目開發(fā)背景

如今隨著電腦的使用越來越廣泛，大量的電子圖片給擁有較多的電子相片

和喜歡收集電子圖片的用戶帶來了諸多不便，他們缺少了一種完善的圖片管理

軟件，為了對電子圖片的管理方便，因此開發(fā)了名為清風電子相冊的系統(tǒng)。該

電子相冊目前已有完善的管理與使用功能。開發(fā)電子相冊是為了滿足電腦用戶

對個人電子圖片進行管理的方便，以現(xiàn)代化創(chuàng)新思維的模式去工作。

1.2開發(fā)技術簡介

該基于ssm的清風相冊管理系統(tǒng)前端使用的框架是Vue，后端使用的是

SpringBoot。

1.2.1vue簡介

Vue.js是一套構建用戶界面的漸進式框架。和其他的重量級框架有所不同，

不同點在于Vue采用的是自底向上增量開發(fā)的設計。Vue中的核心庫現(xiàn)在只需要

關注視圖層就行了，而且vue框架非常的容易學習，非常容易和其它庫或已有

項目整合。另一方面，Vue有著完全有能力驅動采用單文件組件和Vue生態(tài)系統(tǒng)

支持的庫開發(fā)的復雜單頁應用。

如今Vue.js的目標已經(jīng)是通過盡可能簡單的API實現(xiàn)響應的數(shù)據(jù)綁定和組

合的視圖組件。

Vue.js的本身并不是一個全能框架：它如今只聚焦在視圖層。所以它現(xiàn)在

非常的容易學習，非常容易的和其它庫或已有項目整合。另一方面，在與相關

工具和支持庫一起使用時，Vue.js也能驅動復雜的單頁應用。

1

湖南商務職業(yè)技術學院畢業(yè)設計

1.2.2Springboot簡介

（1）創(chuàng)建獨立的Springapplications。

（2）能夠使用內嵌的Tomcat,JettyorUndertow，不需要部署war。

（3）提供定制化的starterpoms來簡化maven配置（gradle相同）。

（4）追求極致的自動配置Spring。

（5）提供一些生產環(huán)境的特性，比如特征指標，健康檢查和外部配置。

（6）零代碼生成和零XML配置。

1.3開發(fā)工具簡介

工具的使用：采用idea+tomcat+mysql。

idea集成的插件足夠多,基本可以實現(xiàn)畢業(yè)設計開發(fā)方面的所有開發(fā)功能

tomcat作為小型服務期有著很多的優(yōu)點，安裝和部署都方便,第三是

TOMCAT適合做一些中小型的項目。

mysql其優(yōu)點非正常多，比如：高度非過程化，綜合統(tǒng)一，易學易用，以一

種語法結構提供了很多種的使用方法，語言簡潔，面向集合的操作方式。

該程序采用了mvc的設計模式：

（1）視圖（View）：負責界面的顯示，以及與用戶的交互功能，例如表單、

網(wǎng)頁等。

（2）控制器（Controller）：可以理解為一個分發(fā)器，用來決定對于視圖

發(fā)來的請求，需要用哪一個模型來處理，以及處理完以后需要跳回到哪一個視

圖。即用來連接視圖和模型。

實際開發(fā)中，通常用控制器對客戶端的請求數(shù)據(jù)進行封裝（如將form表單

發(fā)來的若干個表單字段值，封裝到一個實體對象中），然后調用某一個模型來處

理此請求，最后再轉發(fā)請求（或重定向）到視圖（或另一個控制器）。

（3）模型（Model）：模型持有所有的數(shù)據(jù)、狀態(tài)和程序邏輯。模型接受

視圖數(shù)據(jù)的請求，并返回最終的處理結果。

2需求分析

2.1功能需求描述

（1）功能1用戶管理：管理員可以對用戶進行添加，修改，刪除操作

（2）功能2相冊管理：用戶可以自行添加相冊，可以對相冊添加照片，刪

2

湖南商務職業(yè)技術學院畢業(yè)設計

除照片,可以將相冊發(fā)布出去，通過管理員的審核，別人就可以看見你的相冊了

（3）功能3評論管理：用戶可以對別人的相冊的照片進行評價，通過管理

員的審核，就可以展現(xiàn)出來了。

2.2非功能需求描述

（1）高效性：頁面展示要快，響應時間要短。

（2）安全性：用戶相冊的私密性，用戶密碼的私密性。

（3）可擴展性：功能可擴展。

2.3需求用例建模

通過對功能需求的分析，創(chuàng)建以下總體用例模型，如圖2-1所示。

圖2-1清風電子相冊系統(tǒng)的總體用例模型

與用戶進行了溝通，發(fā)現(xiàn)存放相片的方式不夠簡便，與用戶提出清風電子

相冊系統(tǒng)的設計構想，了解到了自己設計的清風電子相冊系統(tǒng)存在的系統(tǒng)問題，

希望通過系統(tǒng)改進滿足用戶的需求。

2.3.1登錄模塊的用例

面向對象的需求分析階段通過用例圖和活動圖進行了梳理分析。登錄模塊

3

湖南商務職業(yè)技術學院畢業(yè)設計

具體的用例描述如圖2-2所示，分別具有登錄、注冊等操作功能。采用這樣的

架構，讓用戶界面層甚至可以不知道數(shù)據(jù)庫的結構，當要對數(shù)據(jù)進行維護的時

候，它只要維護與業(yè)務層之間的接口即可。

圖2-2登錄用例圖

通過對圖2-2用例圖進一步的細化分析，得到每個用例的描述表。登錄模

塊用例描述如表2-1所示，可以進行登錄等操作。

表2-1登錄模塊用例描述

項目描述

用例名稱用戶登錄

用例標識號01

參與者管理員、普通用戶

參與者輸入用戶名、密碼，系統(tǒng)進行驗證后合法者登錄

簡要說明

系統(tǒng)，否則提供拒絕登錄系統(tǒng)。

前置條件參與者已經(jīng)打開系統(tǒng)的登錄頁面login.vue

1.參與者在用戶名輸入框里輸入用戶名

2.在密碼框里輸入密碼

基本事件流3.用戶按登錄后，系統(tǒng)驗證參與者輸入的有效性。

4.有效則進入系統(tǒng)的主界面。無效則提示相應錯誤給用戶。

5.用例終止

在按“登錄”按鈕之前，參與者可以隨按“取消”或“關

其他事件流

閉”按鈕。

異常事件流提示錯誤信息，參與人確認

4

湖南商務職業(yè)技術學院畢業(yè)設計

后置條件進入的主界面main.jsp，裝載相應的數(shù)據(jù)

注冊模塊用例描述如表2-2所示，可以進行注冊等操作。

表2-2用戶注冊模塊用例描述

項目描述

用例名稱用戶注冊

用例標識號02

參與者普通用戶

簡要說明參與者可以進行賬號注冊使用改網(wǎng)站。

前置條件參與者已經(jīng)打開系統(tǒng)的登錄頁面login.vue

1.參與者點擊注冊在用戶名輸入框里輸入用戶名

2.在密碼框里輸入密碼

基本事件流3.用戶按登錄后，系統(tǒng)驗證參與者輸入的有效性。

4.有效則進入系統(tǒng)的主界面。無效則提示相應錯誤給用戶。

5.用例終止

在按“登錄”按鈕之前，參與者可以隨按“取消”或“關

其他事件流

閉”按鈕。

異常事件流提示錯誤信息，參與人確認

后置條件進入的主界面main.jsp，裝載相應的數(shù)據(jù)

2.3.2我的相冊模塊的用例

面向對象的需求分析階段通過用例圖和活動圖進行了梳理分析。我的相冊

功能模塊具體的用例描述如圖2-3所示，分別具有管理相冊、管理相片等操作

功能。采用這樣的架構，讓用戶界面層甚至可以不知道數(shù)據(jù)庫的結構，當要對

數(shù)據(jù)進行維護的時候，它只要維護與業(yè)務層之間的接口即可。

5

湖南商務職業(yè)技術學院畢業(yè)設計

圖2-3我的相冊用例圖

通過對圖2-3用例圖進一步的細化分析，得到每個用例的描述表。登錄模

塊用例描述如表2-3所示，可以進行登錄等操作。

表2-3我的相冊模塊用例描述

項目描述

用例名稱我的相冊

用例標識號03

參與者普通用戶

簡要說明參與者可以將自己喜歡的圖片存放到自己創(chuàng)建的相冊中。

前置條件參與者登錄了用戶的賬號

1.參與者點擊我的相冊

2.選擇相冊

基本事件流3.點擊上傳相片

4.上傳成功提示。無效則提示相應錯誤給用戶。

5.用例終止

其他事件流無

異常事件流提示錯誤信息，參與人確認

后置條件進入相冊，裝載相應的數(shù)據(jù)

注冊模塊用例描述如表2-4所示，可以進行注冊等操作。

6

湖南商務職業(yè)技術學院畢業(yè)設計

表2-4相冊模塊用例描述

項目描述

用例名稱相冊

用例標識號04

參與者普通用戶

簡要說明參與者可以管理自己的相冊。

前置條件參與者已經(jīng)登錄了用戶賬號

1.參與者點擊我的相冊

2.添加相冊

基本事件流3.輸入相冊名

4.有效則添加成功。無效則提示相應錯誤給用戶。

5.用例終止

在按“添加”按鈕之前，參與者可以隨按“取消”或“關

其他事件流

閉”按鈕。

異常事件流提示錯誤信息，參與人確認

后置條件進入的相冊頁面，裝載相應的數(shù)據(jù)

2.3.3評論模塊的用例

面向對象的需求分析階段通過用例圖和活動圖進行了梳理分析。評論功能

模塊具體的用例描述如圖2-4所示，分別具有評論、審核等操作功能。采用這

樣的架構，讓用戶界面層甚至可以不知道數(shù)據(jù)庫的結構，當要對數(shù)據(jù)進行維護

的時候，它只要維護與業(yè)務層之間的接口即可。

圖2-4評論用例圖

通過對圖2-4用例圖進一步的細化分析，得到每個用例的描述表。評論模

塊用例描述如表2-4所示，可以進行登錄等操作。

表2-4評論模塊用例描述

項目描述

7

湖南商務職業(yè)技術學院畢業(yè)設計

用例名稱評論

用例標識號05

參與者普通用戶

簡要說明參與者可以對別人分享的相冊進行評論。

前置條件參與者登錄了用戶的賬號

1.參與者點擊相冊

2.輸入評論

基本事件流3.點擊評論

4.評論成功提示。無效則提示相應錯誤給用戶。

5.用例終止

其他事件流可以點擊取消評論

異常事件流提示錯誤信息，參與人確認

后置條件進入相冊，裝載相應的數(shù)據(jù)

評論審核模塊用例描述如表2-5所示，可以進行注冊等操作。

表2-5評論審核模塊用例描述

項目描述

用例名稱評論審核

用例標識號06

參與者管理員

簡要說明參與者可以管理自己的相冊。

前置條件參與者已經(jīng)登錄了用戶賬號

1.管理員點擊評論管理

2.查看評論列表

基本事件流3.點擊審核

4.有效則審核成功。無效則提示相應錯誤給用戶。

5.用例終止

在按“審核”按鈕之前，參與者可以隨按“取消”或“關

其他事件流

閉”按鈕。

異常事件流提示錯誤信息，參與人確認

后置條件進入的評論，裝載相應的數(shù)據(jù)

8

湖南商務職業(yè)技術學院畢業(yè)設計

2.3.4共享相冊模塊的用例

面向對象的需求分析階段通過用例圖和活動圖進行了梳理分析。評論功能

模塊具體的用例描述如圖2-5所示，分別具有共享相冊、查看別人相冊等操作

功能。采用這樣的架構，讓用戶界面層甚至可以不知道數(shù)據(jù)庫的結構，當要對

數(shù)據(jù)進行維護的時候，它只要維護與業(yè)務層之間的接口即可。

圖2-6共享相冊用例圖

通過對圖2-5用例圖進一步的細化分析，得到每個用例的描述表。共享相

冊模塊用例描述如表2-5所示，可以進行登錄等操作。

表2-6共享相冊模塊用例描述

項目描述

用例名稱共享相冊

用例標識號06

參與者普通用戶

簡要說明參與者可以將自己的相冊設置私密和共享的狀態(tài)

前置條件參與者登錄了用戶的賬號

1.參與者點擊相冊

2.點擊相冊狀態(tài)的按鈕

基本事件流3.選擇相冊狀態(tài)

4.更改成功提示。無效則提示相應錯誤給用戶。

5.用例終止

其他事件流五

異常事件流提示錯誤信息，參與人確認

后置條件共享相冊的區(qū)域會顯示該相冊

9

湖南商務職業(yè)技術學院畢業(yè)設計

3系統(tǒng)概要設計

3.1系統(tǒng)設計原則

與用戶進行了溝通，發(fā)現(xiàn)存放相片的方式過于不方便，與用戶提出清風電

子相冊系統(tǒng)的設計理論，了解到了自己設計的清風電子相冊系統(tǒng)存在的系統(tǒng)問

題，希望通過系統(tǒng)設作流的處理現(xiàn)給用戶。

3.2系統(tǒng)功能設計

系統(tǒng)模塊化結構設計工作是在系統(tǒng)分析階段對子系統(tǒng)劃分的基礎上，在進

一步地劃分，將它逐層的分解成多個大小相同、功能單一、具有一定獨立性的

模塊，以便程序設計工作的同時，有加強了數(shù)據(jù)庫之間的聯(lián)系，使系統(tǒng)更加的

完美。根據(jù)清風電子相冊系統(tǒng)的需求分析和用例建模分析，本文確定了清風電

子相冊系統(tǒng)的主要功能模塊，包括登錄功能模塊、我的相冊功能模塊、評論功

能模塊、共享相冊功能模塊等四大功能看模塊。清風電子相冊系統(tǒng)的功能結構

圖如圖3-1所示。

圖3-1清風電子相冊系統(tǒng)功能結構圖

10

湖南商務職業(yè)技術學院畢業(yè)設計

3.2.1登錄模塊功能設計

針對系統(tǒng)功能結構圖進行進一步細化分析，得到各子模塊相關功能描述，

功能描述使用功能流程圖描述，如下圖3-2。

圖3-2登錄功能模塊流程圖

表3-1登錄功能模塊相關功能描述

功能名稱借閱卡類別管理

功能概述用戶通過賬號和密碼進行登錄操作

輸入內容用戶的賬號和密碼

系統(tǒng)處理對于不同類別進行設計和規(guī)劃，對類別增、刪、改查功能

輸出內容操作成功或者失敗的提示

11

湖南商務職業(yè)技術學院畢業(yè)設計

圖3-3注冊功能模塊流程圖

表3-2注冊功能模塊相關功能描述

功能名稱用戶注冊賬號

功能概述沒有賬號的用戶可以通過注冊賬號來進行登錄網(wǎng)站

輸入內容新的賬號和密碼

系統(tǒng)處理對于不同類別進行設計和規(guī)劃，對類別增、刪、改查功能

輸出內容操作成功或者失敗的提示

登錄功能模塊相關功能文字描述：多個大小相同、功能單一、具有一定獨

立性的模塊，以便程序設計工作的同時，有加強了數(shù)據(jù)庫之間的聯(lián)系，使系統(tǒng)

更加的完美。根據(jù)清風電子相冊系統(tǒng)的需求分析和用例建模分析，本文確定了

清風電子相冊系統(tǒng)的主要功能模塊，包括登錄功能模塊、我的相冊功能模塊、

評論功能模塊、共享相冊功能模塊等四大功能看模塊。

12

湖南商務職業(yè)技術學院畢業(yè)設計

3.2.2我的相冊模塊功能設計

針對系統(tǒng)功能結構圖進行進一步細化分析，得到各子模塊相關功能描述，

功能描述使用功能流程圖描述，如下圖3-4。

圖3-4添加相冊功能模塊流程圖

表3-3添加相冊功能模塊相關功能描述

功能名稱添加相冊

功能概述用戶輸入相冊名和相冊介紹和照片添加自己需要的相冊

輸入內容用戶輸入相冊名和相冊介紹和照片

系統(tǒng)處理對于不同類別進行設計和規(guī)劃，對類別增、刪、改查功能

輸出內容操作成功或者失敗的提示

13

湖南商務職業(yè)技術學院畢業(yè)設計

圖3-5添加相冊功能模塊流程圖

表3-4添加相冊功能模塊相關功能描述

功能名稱添加相片

功能概述向相冊中添加相片

輸入內容選擇圖片

系統(tǒng)處理對于不同類別進行設計和規(guī)劃，對類別增、刪、改查功能

輸出內容操作成功或者失敗的提示

我的相冊功能模塊相關功能文字描述：多個大小相同、功能單一、具有一

定獨立性的模塊，以便程序設計工作的同時，有加強了數(shù)據(jù)庫之間的聯(lián)系，使

系統(tǒng)更加的完美。根據(jù)清風電子相冊系統(tǒng)的需求分析和用例建模分析，本文確

定了清風電子相冊系統(tǒng)的主要功能模塊，包括登錄功能模塊、我的相冊功能模

塊、評論功能模塊、共享相冊功能模塊等四大功能看模塊。

3.2.3評論模塊功能設計

針對系統(tǒng)功能結構圖進行進一步細化分析，得到各子模塊相關功能描述，

功能描述使用功能流程圖描述，如下圖3-7。

14

湖南商務職業(yè)技術學院畢業(yè)設計

圖3-6用戶評論功能模塊流程圖

表3-5用戶評論功能模塊相關功能描述

功能名稱用戶評論

功能概述用戶評論喜歡的共享相冊

輸入內容評論內容

系統(tǒng)處理對于不同類別進行設計和規(guī)劃，對類別增、刪、改查功能

輸出內容操作成功或者失敗的提示

15

湖南商務職業(yè)技術學院畢業(yè)設計

圖3-7審核評論功能模塊流程圖

表3-6審核評論功能模塊相關功能描述

功能名稱管理員審核評論

功能概述管理員對評論進行審核

輸入內容審核內容

系統(tǒng)處理對于不同類別進行設計和規(guī)劃，對類別增、刪、改查功能

輸出內容操作成功或者失敗的提示

評論功能模塊相關功能文字描述：多個大小相同、功能單一、具有一定獨

立性的模塊，以便程序設計工作的同時，有加強了數(shù)據(jù)庫之間的聯(lián)系，使系統(tǒng)

更加的完美。根據(jù)清風電子相冊系統(tǒng)的需求分析和用例建模分析，本文確定了

清風電子相冊系統(tǒng)的主要功能模塊，包括登錄功能模塊、我的相冊功能模塊、

評論功能模塊、共享相冊功能模塊等四大功能看模塊。

3.2.4共享相冊功能設計

針對系統(tǒng)功能結構圖進行進一步細化分析，得到各子模塊相關功能描述，

功能描述使用功能流程圖描述，如下圖3-9。

16

湖南商務職業(yè)技術學院畢業(yè)設計

圖3-8共享功能模塊流程圖

表3-7共享功能模塊相關功能描述

功能名稱共享相冊

功能概述用戶將自己喜歡的相冊進行分享

輸入內容分享的相冊

系統(tǒng)處理對于不同類別進行設計和規(guī)劃，對類別增、刪、改查功能

輸出內容操作成功或者失敗的提示

17

湖南商務職業(yè)技術學院畢業(yè)設計

圖3-9審核功能模塊流程圖

表3-8審核功能模塊相關功能描述

功能名稱管理員審核共享相冊

功能概述管理員對共享相冊進行審核

輸入內容審核內容

系統(tǒng)處理對于不同類別進行設計和規(guī)劃，對類別增、刪、改查功能

輸出內容操作成功或者失敗的提示

評論功能模塊相關功能文字描述：多個大小相同、功能單一、具有一定獨

立性的模塊，以便程序設計工作的同時，有加強了數(shù)據(jù)庫之間的聯(lián)系，使系統(tǒng)

更加的完美。根據(jù)清風電子相冊系統(tǒng)的需求分析和用例建模分析，本文確定了

清風電子相冊系統(tǒng)的主要功能模塊，包括登錄功能模塊、我的相冊功能模塊、

評論功能模塊、共享相冊功能模塊等四大功能看模塊。

3.3數(shù)據(jù)庫設計

數(shù)據(jù)庫設計往往是系統(tǒng)設計中最為核心的一個步驟。其設計的優(yōu)良程度直

接影響系統(tǒng)的性能以及執(zhí)行效率。

18

湖南商務職業(yè)技術學院畢業(yè)設計

3.3.1設計原則

為取得較好的設計效果，進行數(shù)據(jù)庫設計需要遵從以下原則：

（1）標準化原則

數(shù)據(jù)庫設計務必要遵照統(tǒng)一的設計標準與命名規(guī)范。具備統(tǒng)一設計分類與

編碼規(guī)范的數(shù)據(jù)庫不僅設計清晰直觀,更有利于后期數(shù)據(jù)庫及程序的維護，為以

后項目可擴展性提供條件。

（2）冗余原則

以往數(shù)據(jù)庫的設計要求不允許有冗余，要盡可能的滿足3NF。然而，在系統(tǒng)

運行過程中，滿足3NF的數(shù)據(jù)庫設計并不能高效運行。復雜的表間關系，會降

低訪問數(shù)據(jù)庫執(zhí)行的效率；過低的范式標準，又會導致數(shù)據(jù)庫數(shù)據(jù)。所以，在

數(shù)據(jù)庫設計中，適當?shù)娜哂嘣O計（允許派生性冗余設計，杜絕重復性冗余設

計），找到冗余與數(shù)據(jù)處理速度的平衡點，常?？梢约忍岣咚俣?，又能查詢準確。

3.3.2概念設計

在數(shù)據(jù)庫概念設計的過程中，采用E-R圖來描述概念設計的結果。E-R圖是

概念數(shù)據(jù)模型的高層描述所使用的數(shù)據(jù)模型或模式圖，它為表述實體聯(lián)系模式

圖形式的數(shù)據(jù)模型提供了圖形符號。根據(jù)清風電子相冊管理系統(tǒng)數(shù)據(jù)進行分析，

其E-R圖如下圖3-11所示。

19

湖南商務職業(yè)技術學院畢業(yè)設計

圖3-10清風相冊管理系統(tǒng)E-R圖

3.3.3邏輯設計

針對ER模型，通過數(shù)據(jù)實體屬性、實體間關系的全面分析，結合清風相冊

管理系統(tǒng)的實際需求，根據(jù)E-R圖轉化為關系模式的轉換方法，建立起了本系

統(tǒng)的關系模式，具體轉化后的關系模式如下：

用戶表(用戶id、用戶姓名、用戶頭像、用戶密碼)

評論表(評論id、用戶id、評論內容、相冊id、評論狀態(tài))

相冊表(相冊id、用戶id、相冊名、相冊介紹、相冊狀態(tài))

相冊照片表(相冊照片表id、相冊id、圖片、添加時間)

3.3.4數(shù)據(jù)字典

用戶表的表結構如表3-9所示，該表主要用于記錄用戶信息，主要字段為

id,username,picture,password。

表3-9用戶表表結構

字段名稱數(shù)據(jù)類型字段內容主鍵設置非空

idint(11)用戶id主鍵

20

湖南商務職業(yè)技術學院畢業(yè)設計

usernamevarchar(255)用戶名

picturevarchar(255)用戶頭像

passwordvarchar(255)用戶密碼

評論表的表結構如表3-10所示，該表主要用于記錄評論信息，主要字段為

id,user_id,content,ph_id，status。

表3-10評論表表結構

字段名稱數(shù)據(jù)類型字段內容主鍵設置非空

idint(11)相冊的評論id主鍵

user_idint(11)評價人

contentvarchar(255)評論內容

ph_idint(11)相冊的id

statusvarchar(255)狀態(tài)/通過未通過

相冊照片表的表結構如表3-11所示，該表主要用于記錄相冊照片信息，主

要字段為id,ph_id,picture,，create_time。

表3-11相冊照片表表結構

字段名稱數(shù)據(jù)類型字段內容主鍵設置非空

idint(11)相冊照片id主鍵

ph_idint(6)相冊id

picturevarchar(255)相冊里的照片

create_timedatetime添加時間

相冊照片表的表結構如表3-12所示，該表主要用于記錄相冊照片信息，主

要字段為id,status,name,userId,value。

表3-12相冊表表結構

字段名稱數(shù)據(jù)類型字段內容主鍵設置非空

idint(11)相冊id主鍵

userIdint(6)用戶id外鍵

namevarchar(255)相冊名

valuevarchar(255)相冊介紹

statusvarchar(255)相冊狀態(tài)

21

湖南商務職業(yè)技術學院畢業(yè)設計

數(shù)據(jù)庫設計總結：根據(jù)用戶的需求分析和用例建模分析，本文確定了清風

相冊管理系統(tǒng)的主要功能模塊，包括登錄功能模塊、我的相冊功能模塊、評論

功能模塊、共享相冊功能模塊等四大功能看模塊。

4系統(tǒng)詳細設計

4.1用戶登錄管理子模塊設計

4.1.1用戶登錄子模塊詳細設計

通過需求分析和概要設計對各子功能進行分析與設計，得到與用戶管理子

功能模塊靜態(tài)結構類圖，如圖4-1所示。

圖4-1清風用戶登錄相冊管理系統(tǒng)的類圖

表4-1用戶管理子功能模塊相關類及方法描述表

類名Phuser

描述清風相冊用戶實體類

屬性id,username,picture,password,role

addUser()、

方法delUser()、

updUserPic()、

22

湖南商務職業(yè)技術學院畢業(yè)設計

updpassword()、

findById()、

findByname()、

findBynamea()

4.2我的相冊管理子模塊設計

4.2.1文檔相冊管理子模塊詳細設計

通過需求分析和概要設計對各子功能進行分析與設計，得到與我的相冊管

理子功能模塊靜態(tài)結構類圖，如圖4-2所示。

圖4-2清風相冊管理系統(tǒng)的類圖

表4-2我的相冊管理子功能模塊相關類及方法描述表

23

湖南商務職業(yè)技術學院畢業(yè)設計

類名PhPhoto

描述我的相冊實體類

屬性Id,user_id,tyoe,title,picture,content

PhPhotoController()、

addUser()、

delUser()、

方法

findAllPhoto()、

findAllPhotoByTitle()、

updPhotoTitle()、

4.3評論管理子模塊設計

4.3.1評論管理子模塊詳細設計

通過需求分析和概要設計對各子功能進行分析與設計，得到評論管理子功

能模塊靜態(tài)結構類圖，如圖4-3所示。

圖4-3評論管理系統(tǒng)的類圖

表4-3評論管理子功能模塊相關類及方法描述表

24

湖南商務職業(yè)技術學院畢業(yè)設計

類名PhComment

描述用戶評論實體類

屬性Id,userId,content,ph_id,status

FindAllPhoto(),

findAllhotoCpmment(),

方法

findAllPhotoComment()

,updStatus()

4.4共享相冊管理子模塊設計

4.4.1共享相冊管理子模塊詳細設計

通過需求分析和概要設計對各子功能進行分析與設計，得到共享相冊子功

能模塊靜態(tài)結構類圖，如圖4-4所示。

圖4-4共享相冊管理系統(tǒng)的類圖

表4-4共享相冊管理子功能模塊相關類及方法描述表

類名PhPhoto

描述共享相冊實體類

屬性Id,user_id,tyoe,title,picture,content

25

湖南商務職業(yè)技術學院畢業(yè)設計

findAllPhoto(),

findAllPhotoByTitle(),

方法findPhoto(),

updPhoto(),

updPhotoTiTle()

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

5.1登錄子模塊實現(xiàn)

5.1.1登錄模塊界面設計

圖5-1登入界面

5.1.2登錄模塊核心代碼實現(xiàn)：

步驟1：登錄成功

PublicvoidonAuthenticationSuccess(HttpServletRequestrequest,HttpServletResponse

response,Authenticationauthentication)throwsIOException,ServletException{

26

湖南商務職業(yè)技術學院畢業(yè)設計

QueryWrapperwrapper=newQueryWrapper();

wrapper.eq("username",SecurityContextHolder.getContext().getAuthentication().getName())

;

PhUserdiUser=phUserMapper.selectOne(wrapper);

Resultresult=com.photo.response.Result.ok().message("登錄成功").data("user",diUser);

this.WriteJSON(request,response,result);

}

步驟2：用戶注冊

@PostMapping("/add")

publicvoidaddUser(@RequestParam("file")MultipartFilefile,HttpServletRequestrequest,

HttpServletResponseresponse,@RequestParam("username")Stringusername,

@RequestParam("password")Stringpassword,@RequestParam("role")Stringrole)throws

Exception{

PhUsershUser=newPhUser();

shUser.setUsername(username);

shUser.setPassword(password);

shUser.setRole(role);

QueryWrapperwrapper=newQueryWrapper();

wrapper.eq("username",username);

if(phUserMapper.selectOne(wrapper)!=null){

Resulterror=Result.error().message("用戶已存在");

this.WriteJSON(request,response,error);

}else{

byte[]bytes=file.getBytes();

StringimageFileName=file.getOriginalFilename();

StringfileName=UpPhotoNameUtils.getPhotoName("img",imageFileName);

Pathpath=Paths.get(""+fileName);

//“C:\\框架\\D4\\d4_pc_ui\\src\\assets\\images\\img\\”為本地目錄

27

湖南商務職業(yè)技術學院畢業(yè)設計

Files.write(path,bytes);//寫入文件

Stringavatar_url=fileName;

shUser.setPicture(avatar_url);

response.reset();

shUser.setPassword(new

BCryptPasswordEncoder().encode(shUser.getPassword()));

if(phUserMapper.insert(shUser)>0){

Resultok=Result.ok().message("注冊成功");

this.WriteJSON(request,response,ok);

}else{

Resulterror=Result.error().message("注冊失敗");

this.WriteJSON(request,response,error);

}

}

}

步驟3：用戶修改信息

@PostMapping("/updpassword")

publicvoidupdpassword(HttpServletRequestrequest,HttpServletResponseresponse,

@RequestParam("password")Stringpassword,@RequestParam("rpassword")String

rpassword,@RequestParam("id")intid)throwsException{

PhUseranUser1=phUserMapper.selectById(id);

BCryptPasswordEncoderencoder=newBCryptPasswordEncoder();

Stringpassword1=newBCryptPasswordEncoder().encode(rpassword);

if(encoder.matches(password,anUser1.getPassword())){

anUser1.setPassword(password1);

inti=phUserMapper.updateById(anUser1);

if(i>0){

28

湖南商務職業(yè)技術學院畢業(yè)設計

Resultok=Result.ok();

this.WriteJSON(request,response,ok);

}else{

Resulterror=Result.error();

this.WriteJSON(request,response,error);

}

}else{

Resulterror=Result.error();

error.setMessage("密碼不正確");

this.WriteJSON(request,response,error);

}

}

步驟4：查找用戶

@PostMapping("/findByname")

publicvoidfindByName(HttpServletRequestrequest,HttpServletResponseresponse,

@RequestParam("username")Stringusername,@RequestParam("size")intsize,

@RequestParam("current")intcurrent)throwsException{

QueryWrapperwrapper=newQueryWrapper();

wrapper.like("username",username);

Page<PhUser>page=newPage<>(size,current);

Page<PhUser>pages=phUserMapper.selectPage(page,wrapper);

List<PhUser>list=pages.getRecords();

inttotal=phUserMapper.selectCount(wrapper);

if(list.size()>0){

Resultok=Result.ok().data("user",list).data("total",total);

this.WriteJSON(request,response,ok);

}

Resulterror=Result.error();

29