清風(fēng)電子相冊(cè)的設(shè)計(jì)與實(shí)現(xiàn)

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

目錄

1引言1

1.1項(xiàng)目開(kāi)發(fā)背景1

1.2開(kāi)發(fā)技術(shù)簡(jiǎn)介1

1.2.1vue簡(jiǎn)介1

1.2.2Springboot簡(jiǎn)介2

1.3開(kāi)發(fā)工具簡(jiǎn)介2

2需求分析2

2.1功能需求描述2

2.2非功能需求描述3

2.3需求用例建模3

2.3.1登錄模塊的用例3

2.3.2我的相冊(cè)模塊的用例5

2.3.3評(píng)論模塊的用例7

2.3.4共享相冊(cè)模塊的用例9

3系統(tǒng)概要設(shè)計(jì)10

3.1系統(tǒng)設(shè)計(jì)原則10

3.2系統(tǒng)功能設(shè)計(jì)10

3.2.1登錄模塊功能設(shè)計(jì)11

3.2.2我的相冊(cè)模塊功能設(shè)計(jì)13

3.2.3評(píng)論模塊功能設(shè)計(jì)14

3.2.4共享相冊(cè)功能設(shè)計(jì)16

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

3.3.1設(shè)計(jì)原則19

3.3.2概念設(shè)計(jì)19

3.3.3邏輯設(shè)計(jì)20

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

II

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

4系統(tǒng)詳細(xì)設(shè)計(jì)22

4.1用戶(hù)登錄管理子模塊設(shè)計(jì)22

4.1.1用戶(hù)登錄子模塊詳細(xì)設(shè)計(jì)22

4.2我的相冊(cè)管理子模塊設(shè)計(jì)23

4.2.1文檔相冊(cè)管理子模塊詳細(xì)設(shè)計(jì)23

4.3評(píng)論管理子模塊設(shè)計(jì)24

4.3.1評(píng)論管理子模塊詳細(xì)設(shè)計(jì)24

4.4共享相冊(cè)管理子模塊設(shè)計(jì)25

4.4.1共享相冊(cè)管理子模塊詳細(xì)設(shè)計(jì)25

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

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

5.1.1登錄模塊界面設(shè)計(jì)27

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

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

5.2.1我的相冊(cè)模塊界面設(shè)計(jì)31

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

5.3評(píng)論子模塊實(shí)現(xiàn)34

5.3.1評(píng)理模塊界面設(shè)計(jì)34

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

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

5.4.1共享相冊(cè)子模塊界面設(shè)計(jì)38

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

6系統(tǒng)測(cè)試41

6.1登錄功能測(cè)試41

6.2我的相冊(cè)管理功能測(cè)試42

6.3評(píng)論管理功能測(cè)試42

6.4共享相冊(cè)功能測(cè)試43

7設(shè)計(jì)小結(jié)44

III

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

清風(fēng)電子相冊(cè)的設(shè)計(jì)與實(shí)現(xiàn)

1引言

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

普及到了社會(huì)生活的各個(gè)角落。計(jì)算機(jī)與人類(lèi)的關(guān)系愈來(lái)愈密切，使得計(jì)算機(jī)

的應(yīng)用也深入到人們?nèi)粘５纳町?dāng)中。使用電腦的人們現(xiàn)在都已經(jīng)習(xí)慣將自己

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

電子相片帶來(lái)了極大的方便。

1.1項(xiàng)目開(kāi)發(fā)背景

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

和喜歡收集電子圖片的用戶(hù)帶來(lái)了諸多不便，他們?nèi)鄙倭艘环N完善的圖片管理

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

電子相冊(cè)目前已有完善的管理與使用功能。開(kāi)發(fā)電子相冊(cè)是為了滿(mǎn)足電腦用戶(hù)

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

1.2開(kāi)發(fā)技術(shù)簡(jiǎn)介

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

SpringBoot。

1.2.1vue簡(jiǎn)介

Vue.js是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架。和其他的重量級(jí)框架有所不同，

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

關(guān)注視圖層就行了，而且vue框架非常的容易學(xué)習(xí)，非常容易和其它庫(kù)或已有

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

支持的庫(kù)開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。

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

合的視圖組件。

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

非常的容易學(xué)習(xí)，非常容易的和其它庫(kù)或已有項(xiàng)目整合。另一方面，在與相關(guān)

工具和支持庫(kù)一起使用時(shí)，Vue.js也能驅(qū)動(dòng)復(fù)雜的單頁(yè)應(yīng)用。

1

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

1.2.2Springboot簡(jiǎn)介

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

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

（3）提供定制化的starterpoms來(lái)簡(jiǎn)化maven配置（gradle相同）。

（4）追求極致的自動(dòng)配置Spring。

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

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

1.3開(kāi)發(fā)工具簡(jiǎn)介

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

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

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

TOMCAT適合做一些中小型的項(xiàng)目。

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

種語(yǔ)法結(jié)構(gòu)提供了很多種的使用方法，語(yǔ)言簡(jiǎn)潔，面向集合的操作方式。

該程序采用了mvc的設(shè)計(jì)模式：

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

網(wǎng)頁(yè)等。

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

發(fā)來(lái)的請(qǐng)求，需要用哪一個(gè)模型來(lái)處理，以及處理完以后需要跳回到哪一個(gè)視

圖。即用來(lái)連接視圖和模型。

實(shí)際開(kāi)發(fā)中，通常用控制器對(duì)客戶(hù)端的請(qǐng)求數(shù)據(jù)進(jìn)行封裝（如將form表單

發(fā)來(lái)的若干個(gè)表單字段值，封裝到一個(gè)實(shí)體對(duì)象中），然后調(diào)用某一個(gè)模型來(lái)處

理此請(qǐng)求，最后再轉(zhuǎn)發(fā)請(qǐng)求（或重定向）到視圖（或另一個(gè)控制器）。

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

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

2需求分析

2.1功能需求描述

（1）功能1用戶(hù)管理：管理員可以對(duì)用戶(hù)進(jìn)行添加，修改，刪除操作

（2）功能2相冊(cè)管理：用戶(hù)可以自行添加相冊(cè)，可以對(duì)相冊(cè)添加照片，刪

2

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

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

（3）功能3評(píng)論管理：用戶(hù)可以對(duì)別人的相冊(cè)的照片進(jìn)行評(píng)價(jià)，通過(guò)管理

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

2.2非功能需求描述

（1）高效性：頁(yè)面展示要快，響應(yīng)時(shí)間要短。

（2）安全性：用戶(hù)相冊(cè)的私密性，用戶(hù)密碼的私密性。

（3）可擴(kuò)展性：功能可擴(kuò)展。

2.3需求用例建模

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

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

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

相冊(cè)系統(tǒng)的設(shè)計(jì)構(gòu)想，了解到了自己設(shè)計(jì)的清風(fēng)電子相冊(cè)系統(tǒng)存在的系統(tǒng)問(wèn)題，

希望通過(guò)系統(tǒng)改進(jìn)滿(mǎn)足用戶(hù)的需求。

2.3.1登錄模塊的用例

面向?qū)ο蟮男枨蠓治鲭A段通過(guò)用例圖和活動(dòng)圖進(jìn)行了梳理分析。登錄模塊

3

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

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

架構(gòu)，讓用戶(hù)界面層甚至可以不知道數(shù)據(jù)庫(kù)的結(jié)構(gòu)，當(dāng)要對(duì)數(shù)據(jù)進(jìn)行維護(hù)的時(shí)

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

圖2-2登錄用例圖

通過(guò)對(duì)圖2-2用例圖進(jìn)一步的細(xì)化分析，得到每個(gè)用例的描述表。登錄模

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

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

項(xiàng)目描述

用例名稱(chēng)用戶(hù)登錄

用例標(biāo)識(shí)號(hào)01

參與者管理員、普通用戶(hù)

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

簡(jiǎn)要說(shuō)明

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

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

1.參與者在用戶(hù)名輸入框里輸入用戶(hù)名

2.在密碼框里輸入密碼

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

4.有效則進(jìn)入系統(tǒng)的主界面。無(wú)效則提示相應(yīng)錯(cuò)誤給用戶(hù)。

5.用例終止

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

其他事件流

閉”按鈕。

異常事件流提示錯(cuò)誤信息，參與人確認(rèn)

4

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

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

注冊(cè)模塊用例描述如表2-2所示，可以進(jìn)行注冊(cè)等操作。

表2-2用戶(hù)注冊(cè)模塊用例描述

項(xiàng)目描述

用例名稱(chēng)用戶(hù)注冊(cè)

用例標(biāo)識(shí)號(hào)02

參與者普通用戶(hù)

簡(jiǎn)要說(shuō)明參與者可以進(jìn)行賬號(hào)注冊(cè)使用改網(wǎng)站。

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

1.參與者點(diǎn)擊注冊(cè)在用戶(hù)名輸入框里輸入用戶(hù)名

2.在密碼框里輸入密碼

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

4.有效則進(jìn)入系統(tǒng)的主界面。無(wú)效則提示相應(yīng)錯(cuò)誤給用戶(hù)。

5.用例終止

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

其他事件流

閉”按鈕。

異常事件流提示錯(cuò)誤信息，參與人確認(rèn)

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

2.3.2我的相冊(cè)模塊的用例

面向?qū)ο蟮男枨蠓治鲭A段通過(guò)用例圖和活動(dòng)圖進(jìn)行了梳理分析。我的相冊(cè)

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

功能。采用這樣的架構(gòu)，讓用戶(hù)界面層甚至可以不知道數(shù)據(jù)庫(kù)的結(jié)構(gòu)，當(dāng)要對(duì)

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

5

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖2-3我的相冊(cè)用例圖

通過(guò)對(duì)圖2-3用例圖進(jìn)一步的細(xì)化分析，得到每個(gè)用例的描述表。登錄模

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

表2-3我的相冊(cè)模塊用例描述

項(xiàng)目描述

用例名稱(chēng)我的相冊(cè)

用例標(biāo)識(shí)號(hào)03

參與者普通用戶(hù)

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

前置條件參與者登錄了用戶(hù)的賬號(hào)

1.參與者點(diǎn)擊我的相冊(cè)

2.選擇相冊(cè)

基本事件流3.點(diǎn)擊上傳相片

4.上傳成功提示。無(wú)效則提示相應(yīng)錯(cuò)誤給用戶(hù)。

5.用例終止

其他事件流無(wú)

異常事件流提示錯(cuò)誤信息，參與人確認(rèn)

后置條件進(jìn)入相冊(cè)，裝載相應(yīng)的數(shù)據(jù)

注冊(cè)模塊用例描述如表2-4所示，可以進(jìn)行注冊(cè)等操作。

6

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

表2-4相冊(cè)模塊用例描述

項(xiàng)目描述

用例名稱(chēng)相冊(cè)

用例標(biāo)識(shí)號(hào)04

參與者普通用戶(hù)

簡(jiǎn)要說(shuō)明參與者可以管理自己的相冊(cè)。

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

1.參與者點(diǎn)擊我的相冊(cè)

2.添加相冊(cè)

基本事件流3.輸入相冊(cè)名

4.有效則添加成功。無(wú)效則提示相應(yīng)錯(cuò)誤給用戶(hù)。

5.用例終止

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

其他事件流

閉”按鈕。

異常事件流提示錯(cuò)誤信息，參與人確認(rèn)

后置條件進(jìn)入的相冊(cè)頁(yè)面，裝載相應(yīng)的數(shù)據(jù)

2.3.3評(píng)論模塊的用例

面向?qū)ο蟮男枨蠓治鲭A段通過(guò)用例圖和活動(dòng)圖進(jìn)行了梳理分析。評(píng)論功能

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

樣的架構(gòu)，讓用戶(hù)界面層甚至可以不知道數(shù)據(jù)庫(kù)的結(jié)構(gòu)，當(dāng)要對(duì)數(shù)據(jù)進(jìn)行維護(hù)

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

圖2-4評(píng)論用例圖

通過(guò)對(duì)圖2-4用例圖進(jìn)一步的細(xì)化分析，得到每個(gè)用例的描述表。評(píng)論模

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

表2-4評(píng)論模塊用例描述

項(xiàng)目描述

7

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

用例名稱(chēng)評(píng)論

用例標(biāo)識(shí)號(hào)05

參與者普通用戶(hù)

簡(jiǎn)要說(shuō)明參與者可以對(duì)別人分享的相冊(cè)進(jìn)行評(píng)論。

前置條件參與者登錄了用戶(hù)的賬號(hào)

1.參與者點(diǎn)擊相冊(cè)

2.輸入評(píng)論

基本事件流3.點(diǎn)擊評(píng)論

4.評(píng)論成功提示。無(wú)效則提示相應(yīng)錯(cuò)誤給用戶(hù)。

5.用例終止

其他事件流可以點(diǎn)擊取消評(píng)論

異常事件流提示錯(cuò)誤信息，參與人確認(rèn)

后置條件進(jìn)入相冊(cè)，裝載相應(yīng)的數(shù)據(jù)

評(píng)論審核模塊用例描述如表2-5所示，可以進(jìn)行注冊(cè)等操作。

表2-5評(píng)論審核模塊用例描述

項(xiàng)目描述

用例名稱(chēng)評(píng)論審核

用例標(biāo)識(shí)號(hào)06

參與者管理員

簡(jiǎn)要說(shuō)明參與者可以管理自己的相冊(cè)。

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

1.管理員點(diǎn)擊評(píng)論管理

2.查看評(píng)論列表

基本事件流3.點(diǎn)擊審核

4.有效則審核成功。無(wú)效則提示相應(yīng)錯(cuò)誤給用戶(hù)。

5.用例終止

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

其他事件流

閉”按鈕。

異常事件流提示錯(cuò)誤信息，參與人確認(rèn)

后置條件進(jìn)入的評(píng)論，裝載相應(yīng)的數(shù)據(jù)

8

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.3.4共享相冊(cè)模塊的用例

面向?qū)ο蟮男枨蠓治鲭A段通過(guò)用例圖和活動(dòng)圖進(jìn)行了梳理分析。評(píng)論功能

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

功能。采用這樣的架構(gòu)，讓用戶(hù)界面層甚至可以不知道數(shù)據(jù)庫(kù)的結(jié)構(gòu)，當(dāng)要對(duì)

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

圖2-6共享相冊(cè)用例圖

通過(guò)對(duì)圖2-5用例圖進(jìn)一步的細(xì)化分析，得到每個(gè)用例的描述表。共享相

冊(cè)模塊用例描述如表2-5所示，可以進(jìn)行登錄等操作。

表2-6共享相冊(cè)模塊用例描述

項(xiàng)目描述

用例名稱(chēng)共享相冊(cè)

用例標(biāo)識(shí)號(hào)06

參與者普通用戶(hù)

簡(jiǎn)要說(shuō)明參與者可以將自己的相冊(cè)設(shè)置私密和共享的狀態(tài)

前置條件參與者登錄了用戶(hù)的賬號(hào)

1.參與者點(diǎn)擊相冊(cè)

2.點(diǎn)擊相冊(cè)狀態(tài)的按鈕

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

4.更改成功提示。無(wú)效則提示相應(yīng)錯(cuò)誤給用戶(hù)。

5.用例終止

其他事件流五

異常事件流提示錯(cuò)誤信息，參與人確認(rèn)

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

9

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3系統(tǒng)概要設(shè)計(jì)

3.1系統(tǒng)設(shè)計(jì)原則

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

子相冊(cè)系統(tǒng)的設(shè)計(jì)理論，了解到了自己設(shè)計(jì)的清風(fēng)電子相冊(cè)系統(tǒng)存在的系統(tǒng)問(wèn)

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

3.2系統(tǒng)功能設(shè)計(jì)

系統(tǒng)模塊化結(jié)構(gòu)設(shè)計(jì)工作是在系統(tǒng)分析階段對(duì)子系統(tǒng)劃分的基礎(chǔ)上，在進(jìn)

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

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

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

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

能模塊、共享相冊(cè)功能模塊等四大功能看模塊。清風(fēng)電子相冊(cè)系統(tǒng)的功能結(jié)構(gòu)

圖如圖3-1所示。

圖3-1清風(fēng)電子相冊(cè)系統(tǒng)功能結(jié)構(gòu)圖

10

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3.2.1登錄模塊功能設(shè)計(jì)

針對(duì)系統(tǒng)功能結(jié)構(gòu)圖進(jìn)行進(jìn)一步細(xì)化分析，得到各子模塊相關(guān)功能描述，

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

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

表3-1登錄功能模塊相關(guān)功能描述

功能名稱(chēng)借閱卡類(lèi)別管理

功能概述用戶(hù)通過(guò)賬號(hào)和密碼進(jìn)行登錄操作

輸入內(nèi)容用戶(hù)的賬號(hào)和密碼

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

輸出內(nèi)容操作成功或者失敗的提示

11

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖3-3注冊(cè)功能模塊流程圖

表3-2注冊(cè)功能模塊相關(guān)功能描述

功能名稱(chēng)用戶(hù)注冊(cè)賬號(hào)

功能概述沒(méi)有賬號(hào)的用戶(hù)可以通過(guò)注冊(cè)賬號(hào)來(lái)進(jìn)行登錄網(wǎng)站

輸入內(nèi)容新的賬號(hào)和密碼

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

輸出內(nèi)容操作成功或者失敗的提示

登錄功能模塊相關(guān)功能文字描述：多個(gè)大小相同、功能單一、具有一定獨(dú)

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

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

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

評(píng)論功能模塊、共享相冊(cè)功能模塊等四大功能看模塊。

12

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3.2.2我的相冊(cè)模塊功能設(shè)計(jì)

針對(duì)系統(tǒng)功能結(jié)構(gòu)圖進(jìn)行進(jìn)一步細(xì)化分析，得到各子模塊相關(guān)功能描述，

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

圖3-4添加相冊(cè)功能模塊流程圖

表3-3添加相冊(cè)功能模塊相關(guān)功能描述

功能名稱(chēng)添加相冊(cè)

功能概述用戶(hù)輸入相冊(cè)名和相冊(cè)介紹和照片添加自己需要的相冊(cè)

輸入內(nèi)容用戶(hù)輸入相冊(cè)名和相冊(cè)介紹和照片

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

輸出內(nèi)容操作成功或者失敗的提示

13

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖3-5添加相冊(cè)功能模塊流程圖

表3-4添加相冊(cè)功能模塊相關(guān)功能描述

功能名稱(chēng)添加相片

功能概述向相冊(cè)中添加相片

輸入內(nèi)容選擇圖片

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

輸出內(nèi)容操作成功或者失敗的提示

我的相冊(cè)功能模塊相關(guān)功能文字描述：多個(gè)大小相同、功能單一、具有一

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

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

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

塊、評(píng)論功能模塊、共享相冊(cè)功能模塊等四大功能看模塊。

3.2.3評(píng)論模塊功能設(shè)計(jì)

針對(duì)系統(tǒng)功能結(jié)構(gòu)圖進(jìn)行進(jìn)一步細(xì)化分析，得到各子模塊相關(guān)功能描述，

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

14

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖3-6用戶(hù)評(píng)論功能模塊流程圖

表3-5用戶(hù)評(píng)論功能模塊相關(guān)功能描述

功能名稱(chēng)用戶(hù)評(píng)論

功能概述用戶(hù)評(píng)論喜歡的共享相冊(cè)

輸入內(nèi)容評(píng)論內(nèi)容

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

輸出內(nèi)容操作成功或者失敗的提示

15

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖3-7審核評(píng)論功能模塊流程圖

表3-6審核評(píng)論功能模塊相關(guān)功能描述

功能名稱(chēng)管理員審核評(píng)論

功能概述管理員對(duì)評(píng)論進(jìn)行審核

輸入內(nèi)容審核內(nèi)容

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

輸出內(nèi)容操作成功或者失敗的提示

評(píng)論功能模塊相關(guān)功能文字描述：多個(gè)大小相同、功能單一、具有一定獨(dú)

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

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

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

評(píng)論功能模塊、共享相冊(cè)功能模塊等四大功能看模塊。

3.2.4共享相冊(cè)功能設(shè)計(jì)

針對(duì)系統(tǒng)功能結(jié)構(gòu)圖進(jìn)行進(jìn)一步細(xì)化分析，得到各子模塊相關(guān)功能描述，

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

16

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

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

表3-7共享功能模塊相關(guān)功能描述

功能名稱(chēng)共享相冊(cè)

功能概述用戶(hù)將自己喜歡的相冊(cè)進(jìn)行分享

輸入內(nèi)容分享的相冊(cè)

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

輸出內(nèi)容操作成功或者失敗的提示

17

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

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

表3-8審核功能模塊相關(guān)功能描述

功能名稱(chēng)管理員審核共享相冊(cè)

功能概述管理員對(duì)共享相冊(cè)進(jìn)行審核

輸入內(nèi)容審核內(nèi)容

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

輸出內(nèi)容操作成功或者失敗的提示

評(píng)論功能模塊相關(guān)功能文字描述：多個(gè)大小相同、功能單一、具有一定獨(dú)

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

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

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

評(píng)論功能模塊、共享相冊(cè)功能模塊等四大功能看模塊。

3.3數(shù)據(jù)庫(kù)設(shè)計(jì)

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

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

18

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3.3.1設(shè)計(jì)原則

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

（1）標(biāo)準(zhǔn)化原則

數(shù)據(jù)庫(kù)設(shè)計(jì)務(wù)必要遵照統(tǒng)一的設(shè)計(jì)標(biāo)準(zhǔn)與命名規(guī)范。具備統(tǒng)一設(shè)計(jì)分類(lèi)與

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

后項(xiàng)目可擴(kuò)展性提供條件。

（2）冗余原則

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

運(yùn)行過(guò)程中，滿(mǎn)足3NF的數(shù)據(jù)庫(kù)設(shè)計(jì)并不能高效運(yùn)行。復(fù)雜的表間關(guān)系，會(huì)降

低訪問(wèn)數(shù)據(jù)庫(kù)執(zhí)行的效率；過(guò)低的范式標(biāo)準(zhǔn)，又會(huì)導(dǎo)致數(shù)據(jù)庫(kù)數(shù)據(jù)。所以，在

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

計(jì)），找到冗余與數(shù)據(jù)處理速度的平衡點(diǎn)，常常可以既提高速度，又能查詢(xún)準(zhǔn)確。

3.3.2概念設(shè)計(jì)

在數(shù)據(jù)庫(kù)概念設(shè)計(jì)的過(guò)程中，采用E-R圖來(lái)描述概念設(shè)計(jì)的結(jié)果。E-R圖是

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

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

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

19

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

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

3.3.3邏輯設(shè)計(jì)

針對(duì)ER模型，通過(guò)數(shù)據(jù)實(shí)體屬性、實(shí)體間關(guān)系的全面分析，結(jié)合清風(fēng)相冊(cè)

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

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

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

評(píng)論表(評(píng)論id、用戶(hù)id、評(píng)論內(nèi)容、相冊(cè)id、評(píng)論狀態(tài))

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

相冊(cè)照片表(相冊(cè)照片表id、相冊(cè)id、圖片、添加時(shí)間)

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

用戶(hù)表的表結(jié)構(gòu)如表3-9所示，該表主要用于記錄用戶(hù)信息，主要字段為

id,username,picture,password。

表3-9用戶(hù)表表結(jié)構(gòu)

字段名稱(chēng)數(shù)據(jù)類(lèi)型字段內(nèi)容主鍵設(shè)置非空

idint(11)用戶(hù)id主鍵

20

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

usernamevarchar(255)用戶(hù)名

picturevarchar(255)用戶(hù)頭像

passwordvarchar(255)用戶(hù)密碼

評(píng)論表的表結(jié)構(gòu)如表3-10所示，該表主要用于記錄評(píng)論信息，主要字段為

id,user_id,content,ph_id，status。

表3-10評(píng)論表表結(jié)構(gòu)

字段名稱(chēng)數(shù)據(jù)類(lèi)型字段內(nèi)容主鍵設(shè)置非空

idint(11)相冊(cè)的評(píng)論id主鍵

user_idint(11)評(píng)價(jià)人

contentvarchar(255)評(píng)論內(nèi)容

ph_idint(11)相冊(cè)的id

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

相冊(cè)照片表的表結(jié)構(gòu)如表3-11所示，該表主要用于記錄相冊(cè)照片信息，主

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

表3-11相冊(cè)照片表表結(jié)構(gòu)

字段名稱(chēng)數(shù)據(jù)類(lèi)型字段內(nèi)容主鍵設(shè)置非空

idint(11)相冊(cè)照片id主鍵

ph_idint(6)相冊(cè)id

picturevarchar(255)相冊(cè)里的照片

create_timedatetime添加時(shí)間

相冊(cè)照片表的表結(jié)構(gòu)如表3-12所示，該表主要用于記錄相冊(cè)照片信息，主

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

表3-12相冊(cè)表表結(jié)構(gòu)

字段名稱(chēng)數(shù)據(jù)類(lèi)型字段內(nèi)容主鍵設(shè)置非空

idint(11)相冊(cè)id主鍵

userIdint(6)用戶(hù)id外鍵

namevarchar(255)相冊(cè)名

valuevarchar(255)相冊(cè)介紹

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

21

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

數(shù)據(jù)庫(kù)設(shè)計(jì)總結(jié)：根據(jù)用戶(hù)的需求分析和用例建模分析，本文確定了清風(fēng)

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

功能模塊、共享相冊(cè)功能模塊等四大功能看模塊。

4系統(tǒng)詳細(xì)設(shè)計(jì)

4.1用戶(hù)登錄管理子模塊設(shè)計(jì)

4.1.1用戶(hù)登錄子模塊詳細(xì)設(shè)計(jì)

通過(guò)需求分析和概要設(shè)計(jì)對(duì)各子功能進(jìn)行分析與設(shè)計(jì)，得到與用戶(hù)管理子

功能模塊靜態(tài)結(jié)構(gòu)類(lèi)圖，如圖4-1所示。

圖4-1清風(fēng)用戶(hù)登錄相冊(cè)管理系統(tǒng)的類(lèi)圖

表4-1用戶(hù)管理子功能模塊相關(guān)類(lèi)及方法描述表

類(lèi)名Phuser

描述清風(fēng)相冊(cè)用戶(hù)實(shí)體類(lèi)

屬性id,username,picture,password,role

addUser()、

方法delUser()、

updUserPic()、

22

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

updpassword()、

findById()、

findByname()、

findBynamea()

4.2我的相冊(cè)管理子模塊設(shè)計(jì)

4.2.1文檔相冊(cè)管理子模塊詳細(xì)設(shè)計(jì)

通過(guò)需求分析和概要設(shè)計(jì)對(duì)各子功能進(jìn)行分析與設(shè)計(jì)，得到與我的相冊(cè)管

理子功能模塊靜態(tài)結(jié)構(gòu)類(lèi)圖，如圖4-2所示。

圖4-2清風(fēng)相冊(cè)管理系統(tǒng)的類(lèi)圖

表4-2我的相冊(cè)管理子功能模塊相關(guān)類(lèi)及方法描述表

23

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

類(lèi)名PhPhoto

描述我的相冊(cè)實(shí)體類(lèi)

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

PhPhotoController()、

addUser()、

delUser()、

方法

findAllPhoto()、

findAllPhotoByTitle()、

updPhotoTitle()、

4.3評(píng)論管理子模塊設(shè)計(jì)

4.3.1評(píng)論管理子模塊詳細(xì)設(shè)計(jì)

通過(guò)需求分析和概要設(shè)計(jì)對(duì)各子功能進(jìn)行分析與設(shè)計(jì)，得到評(píng)論管理子功

能模塊靜態(tài)結(jié)構(gòu)類(lèi)圖，如圖4-3所示。

圖4-3評(píng)論管理系統(tǒng)的類(lèi)圖

表4-3評(píng)論管理子功能模塊相關(guān)類(lèi)及方法描述表

24

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

類(lèi)名PhComment

描述用戶(hù)評(píng)論實(shí)體類(lèi)

屬性Id,userId,content,ph_id,status

FindAllPhoto(),

findAllhotoCpmment(),

方法

findAllPhotoComment()

,updStatus()

4.4共享相冊(cè)管理子模塊設(shè)計(jì)

4.4.1共享相冊(cè)管理子模塊詳細(xì)設(shè)計(jì)

通過(guò)需求分析和概要設(shè)計(jì)對(duì)各子功能進(jìn)行分析與設(shè)計(jì)，得到共享相冊(cè)子功

能模塊靜態(tài)結(jié)構(gòu)類(lèi)圖，如圖4-4所示。

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

表4-4共享相冊(cè)管理子功能模塊相關(guān)類(lèi)及方法描述表

類(lèi)名PhPhoto

描述共享相冊(cè)實(shí)體類(lèi)

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

25

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

findAllPhoto(),

findAllPhotoByTitle(),

方法findPhoto(),

updPhoto(),

updPhotoTiTle()

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

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

5.1.1登錄模塊界面設(shè)計(jì)

圖5-1登入界面

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

步驟1：登錄成功

PublicvoidonAuthenticationSuccess(HttpServletRequestrequest,HttpServletResponse

response,Authenticationauthentication)throwsIOException,ServletException{

26

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

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：用戶(hù)注冊(cè)

@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("用戶(hù)已存在");

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

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

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

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("注冊(cè)成功");

this.WriteJSON(request,response,ok);

}else{

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

this.WriteJSON(request,response,error);

}

}

}

步驟3：用戶(hù)修改信息

@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

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

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：查找用戶(hù)

@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