摘要：隨著網(wǎng)絡(luò)技術(shù)和數(shù)碼科技的快速發(fā)展，更多的人喜歡使用相機(jī)進(jìn)行記錄美好生活，現(xiàn)在的攝影技術(shù)越來越發(fā)達(dá)，很多功能智能化，讓普通人也可以隨時(shí)隨地拿起手機(jī)，相機(jī)進(jìn)行攝影，越來越多的人愛好攝影，講攝影作為一種職業(yè)，很多用戶拍了照片卻無法分享，所以需要一種可以實(shí)時(shí)上傳自己拍攝照片的分享網(wǎng)站，讓用戶可以對(duì)自己的作品進(jìn)行分享。本系統(tǒng)經(jīng)過設(shè)計(jì)，無論用戶的數(shù)碼產(chǎn)品優(yōu)劣都可以上傳，取消了大多數(shù)平臺(tái)的限制，作為小眾平臺(tái)的特色亮點(diǎn)，本系統(tǒng)采用htm15和css3技術(shù)完成了對(duì)頁(yè)面的設(shè)計(jì)與優(yōu)化，使用Photoshop進(jìn)行設(shè)計(jì)圖設(shè)計(jì)，后臺(tái)采用java語言編寫，使用ssm框架進(jìn)行開發(fā)，數(shù)據(jù)庫(kù)用mysql進(jìn)行保存用戶數(shù)據(jù)，可以讓用戶的數(shù)據(jù)不丟失，同時(shí)承諾用戶數(shù)據(jù)不會(huì)泄露，保護(hù)用戶的隱私安全。如今世界，互聯(lián)網(wǎng)高速發(fā)展，而且計(jì)算機(jī)早就已經(jīng)進(jìn)入到了家家戶戶，很多人在網(wǎng)上傳遞著屬于自己的精彩，本系統(tǒng)應(yīng)發(fā)展的大潮流，改變傳統(tǒng)的傳播方式，運(yùn)行成本低廉，且頁(yè)面多彩繽紛，富有創(chuàng)作性，使得攝影愛好者更容易與其他人分享自己的作品，更容易從他人作品中找到靈感來源，應(yīng)用前景十分樂觀，相信未來也一定會(huì)成為一種主流的攝影網(wǎng)站方式。關(guān)鍵詞：分層開發(fā)；Mysql數(shù)據(jù)庫(kù)；攝影在線網(wǎng)站；Html5CSS3技術(shù)目錄1前言 1 11.2開發(fā)目的 12設(shè)計(jì)技術(shù)與開發(fā)環(huán)境簡(jiǎn)介 22.1HTML5簡(jiǎn)介 22.2CSS簡(jiǎn)介 22.3Mysql數(shù)據(jù)庫(kù)簡(jiǎn)介 22.4BootStrap框架簡(jiǎn)介 2 32.6Tomcat技術(shù)簡(jiǎn)介 33可行性與需求分析 33.1操作可行性 33.2經(jīng)濟(jì)可行性 33.3技術(shù)可行性 3.4系統(tǒng)功能設(shè)計(jì) 43.5用例模型 53.6性能需求 64系統(tǒng)設(shè)計(jì) 74.1系統(tǒng)功能設(shè)計(jì) 74.2數(shù)據(jù)庫(kù)設(shè)計(jì) 4.3系統(tǒng)核心業(yè)務(wù)時(shí)序圖 5.1網(wǎng)頁(yè)的首頁(yè) 5.2登錄注冊(cè)功能 5.3作品上傳功能 5.4攝影作品及攝影故事 5.5咨詢功能 5.6HTML5&CSS3的新特性設(shè)計(jì)代碼部分展示 24 6.1軟件測(cè)試的概述 276.3測(cè)試用例 27 28 291本系統(tǒng)是基于java語言，HTML+CSS輔助語言開發(fā)的一款在線攝影網(wǎng)站，本系統(tǒng)的開發(fā)主要是幫助用戶可以在線分享自己的攝影作品，為大家提供欣賞素材，其次用戶可以在本網(wǎng)站中學(xué)習(xí)到相關(guān)的攝影知識(shí)，提升自己的攝影技巧，豐富自己的攝影知識(shí)，讓越來越多的人喜歡攝影，每一張照片背后都有一個(gè)故事，我們搭建網(wǎng)站的初衷就是讓越來越多的用戶可以對(duì)自己的攝影作品進(jìn)行分享，分享每一張照片背后的故事，讓用戶既能學(xué)到知識(shí)，又能增添生活的樂趣，本軟件還設(shè)置了管理員功能，可以對(duì)用戶進(jìn)行管理，對(duì)違規(guī)用戶經(jīng)封禁，保證了網(wǎng)站的健康性。隨著電子產(chǎn)品的信息化，手機(jī)越來越智能化，手機(jī)的相機(jī)拍照質(zhì)量也在提升，所以越來越多的用戶會(huì)記錄生活的美好瞬間，本網(wǎng)站可以讓用戶將拍攝的照片進(jìn)行上傳，保存在數(shù)據(jù)庫(kù)中，為用戶的美好瞬間進(jìn)行留存，在分享作品的同時(shí)，也可以在線學(xué)習(xí)到攝影知識(shí)，培養(yǎng)用戶的攝影興趣，本系統(tǒng)設(shè)置了對(duì)管理員反饋的功能，即攝影咨詢，管理員可以幫助用戶對(duì)攝影問題進(jìn)行解答，實(shí)時(shí)與用戶溝通，增加了網(wǎng)站的實(shí)用性。在當(dāng)今互聯(lián)網(wǎng)發(fā)展迅速，人們對(duì)于攝影的需求日益增高，但是有很多人拍攝的作品無法讓更多的人看到，本網(wǎng)站可以幫助用戶去分享自己的攝影作品，對(duì)軟件的攝影作品進(jìn)行更新，在軟件的攝影作品中用戶可以對(duì)自己的作品進(jìn)行說明，讓其他用戶了解照片背后的故事。此外本軟件還有攝影技巧學(xué)習(xí)資料，幫助攝影小白對(duì)自己的攝影作品進(jìn)行了解，攝影咨詢可以實(shí)時(shí)更新，給用戶推送最新的攝影技巧，幫助用戶學(xué)習(xí)進(jìn)步。22設(shè)計(jì)技術(shù)與開發(fā)環(huán)境簡(jiǎn)介術(shù)進(jìn)行開發(fā)。2.1HTML5簡(jiǎn)介Html5是網(wǎng)頁(yè)超文本技術(shù)工作小組以及萬維網(wǎng)聯(lián)盟合作發(fā)展的的結(jié)果，在2004年6月，Mozilla基金會(huì)和Opera軟件公司在萬維網(wǎng)聯(lián)盟主辦的研討會(huì)上提出的草案，并最終行形成HTML5,其相比之前添加了一些新的元素和屬性，反應(yīng)現(xiàn)代典型的現(xiàn)代用法網(wǎng)絡(luò)，它的出現(xiàn)使得AdobeFlash不在是必須，但對(duì)于不同的瀏覽器還是存在相應(yīng)的差異。CSS被稱之為層疊樣式表，是一種結(jié)構(gòu)化文檔，用來添加樣式的一種計(jì)算機(jī)語言，CSS1現(xiàn)在已經(jīng)廢棄，CSS2.1目前是推薦的版本，CSS3分成多個(gè)小模塊并且正在逐漸標(biāo)準(zhǔn)化，CSS4正在努力開發(fā)中。CSS可以在頁(yè)面上任何布局的任何像素級(jí)別準(zhǔn)確顯示，總是可一準(zhǔn)確的展現(xiàn)出網(wǎng)站設(shè)計(jì)想要的效果，在CSS3當(dāng)中，相較于之前版本，又增加了許多新的功能的表現(xiàn)，使得頁(yè)面設(shè)計(jì)更加簡(jiǎn)單，且更加美觀大方。Mysql支持多種語言，數(shù)據(jù)庫(kù)是一個(gè)免費(fèi)的數(shù)據(jù)庫(kù)，可以支持java,C,C++,Python,PHP和Ruby。Mysql數(shù)據(jù)庫(kù)使用表的方式來呈現(xiàn)數(shù)據(jù)，便于用戶對(duì)于數(shù)據(jù)的管理。其支持大型數(shù)據(jù)庫(kù)和數(shù)千萬條信息記錄，系統(tǒng)表的容量是4GB,在x32系統(tǒng)中，x64操作系統(tǒng)甚至可以支持8TB信息儲(chǔ)存。BootStrap框架是前端所運(yùn)用的框架，它基于高級(jí)技術(shù)(HTML,CSS,3JavaScript等)重新打包框架。響應(yīng)式布局解決方案使開發(fā)人員能夠使他們的系統(tǒng)擁有更為良好的適配性。強(qiáng)大的柵格化布局可以幫助開發(fā)人員快速進(jìn)行發(fā)布于各種設(shè)備。2.5Ajax技術(shù)簡(jiǎn)介開發(fā)人員最經(jīng)常使用Ajax這種方法用于數(shù)據(jù)傳輸，它使您可以在內(nèi)部更新數(shù)據(jù)并在頁(yè)面無法恢復(fù)時(shí)與后端服務(wù)器交換少量信息。由于其性質(zhì)，用戶感覺頁(yè)面幾乎沒有變化。改善客戶體驗(yàn)。tomcat服務(wù)器屬于輕量級(jí)應(yīng)用服務(wù)器，對(duì)于開發(fā)和調(diào)試JSP程序是首選，其實(shí)也可以將其簡(jiǎn)單的視為一個(gè)web服務(wù)器。3可行性與需求分析本網(wǎng)站功能簡(jiǎn)潔，界面友好大方，支持設(shè)備比較廣，如手機(jī)，平板，電腦都可以訪問，讓用戶可以方便使用，網(wǎng)站的圖標(biāo)扁平化設(shè)計(jì)，有相應(yīng)的文字說明，讓用戶快速理解其用法，使用起來簡(jiǎn)單輕松，并不不復(fù)雜，短時(shí)間內(nèi)就可以做到對(duì)軟件完全掌握。本網(wǎng)站開發(fā)成本低，由于測(cè)試階段沒有用到服務(wù)器，所以省去了大部分服務(wù)器資金，服務(wù)器采用本地tomcat服務(wù)器，沒有成本，數(shù)據(jù)庫(kù)采用mysql數(shù)據(jù)庫(kù)，mysql是一款開源免費(fèi)的數(shù)據(jù)庫(kù)，不需要成本，網(wǎng)站搭建后期可以采用內(nèi)網(wǎng)穿透技術(shù)，讓本機(jī)電腦作為服務(wù)器，可以節(jié)約大部分資金。所以經(jīng)濟(jì)可行性通過。軟件采用的html+css技術(shù)，是前段開發(fā)基礎(chǔ)語言，后臺(tái)采用java,開發(fā)簡(jiǎn)單4方便.有利干后期項(xiàng)月的拓展.難點(diǎn)在干圖上上傳.以及圖片儲(chǔ)存問題.可以通3.4系統(tǒng)功能設(shè)計(jì)(1)幫助用戶搭建作品分享(2)為攝影知識(shí)提供課堂(3)提供管理平臺(tái)(4)提供用戶反饋功能(1)管理員模塊(2)用戶模塊5題咨詢。理修改用戶戶品圖3.1系統(tǒng)功能模塊分析圖用戶具有登錄，查詢攝影技巧，咨詢管理員，上傳作品，查詢作品等功能，用戶上傳的作品管理員具有刪除的權(quán)限，可以對(duì)數(shù)據(jù)進(jìn)行刪除操作，下面展示的是用戶的用例圖：6登錄用戶圖3.2用戶用例圖管理員可以對(duì)用戶進(jìn)行管理，對(duì)用戶的作品進(jìn)行管理，對(duì)用戶咨詢進(jìn)行管理，下圖為超級(jí)管理員的用例圖：圖3.3管理員用例圖3.6性能需求因?yàn)楸鞠到y(tǒng)所涉及到項(xiàng)目業(yè)務(wù)并不大，所以對(duì)硬件配置的要求相對(duì)比較低，7統(tǒng)，顯卡：無要求，硬盤：500G及以上，網(wǎng)卡：百兆網(wǎng)卡以上。顯示系統(tǒng)環(huán)境需win10,數(shù)據(jù)庫(kù)mysql版本號(hào)為5.5,服務(wù)器Tomcat8.0,開發(fā)工具4系統(tǒng)設(shè)計(jì)8品戶品戶戶圖4.2管理員模塊設(shè)計(jì)圖理，對(duì)用戶的賬戶進(jìn)行添加，修改，封禁，對(duì)作品進(jìn)行刪除，對(duì)用戶咨詢進(jìn)行刪除等操作。9本系統(tǒng)設(shè)計(jì)的數(shù)據(jù)庫(kù)有三個(gè)表，用戶表用于存放用戶的數(shù)據(jù)，反饋表用于保存用戶反饋的信息，作品表用于保存用戶的作品信息，系統(tǒng)的數(shù)據(jù)庫(kù)模型如下圖5-5所示：works_author:varchar(2works_namevarchar(255)photographyvarchworks_position:varcharworks_picture:varchar(2圖4.3數(shù)據(jù)庫(kù)物理數(shù)據(jù)模型a.用戶表用戶表用于存放用戶數(shù)據(jù)，其中user_status代表用戶狀態(tài)，根據(jù)0代表正常用戶，1代表被封禁用戶，具體如表4-1所示：表4-1用戶數(shù)據(jù)庫(kù)表user說明數(shù)據(jù)類型1否是2否3否4電話號(hào)碼否5否6性別否7用戶類型否8否9否否b.作品表作品表主要存放用戶的上傳數(shù)據(jù)，如攝影故事，攝影類型，作品，上傳時(shí)間等等，具體如表4-2所示：表4-2作品表works說明數(shù)據(jù)類型1否是2否3r否4否5否06否7攝影地點(diǎn)否8作品圖否9上傳時(shí)間否0c.反饋表反饋表主要包含用戶的反饋信息，以及咨詢信息，管理員有權(quán)限查看。具體如表4-3所示：表4-3供應(yīng)商與銷售商表feedback說明型1否是2否3用戶名否4否5否6否7否8反饋時(shí)間否04.3系統(tǒng)核心業(yè)務(wù)時(shí)序圖用戶登錄用戶登錄驗(yàn)證信息主頁(yè)面圖4.4登錄模塊時(shí)序圖如管理員主頁(yè)面，不成功返回登錄頁(yè)面，模塊時(shí)序圖如下圖5-7所示：用戶登錄驗(yàn)證信息主頁(yè)面圖4.5管理員登錄模塊時(shí)序圖用戶登錄成功后可以對(duì)數(shù)據(jù)進(jìn)行操作，用戶可以作品欣賞，作品上傳，查看攝影技巧，查看作品故事，咨詢攝影問題，模塊時(shí)序圖如下圖5-8所示：攝影咨攝影咨詢，反饋系統(tǒng)管理員可以對(duì)已有的作品進(jìn)行查詢，刪除操作，對(duì)違規(guī)的作品進(jìn)行永久刪除操作，模塊時(shí)序圖如下圖5-9所示：查詢查詢一5系統(tǒng)實(shí)現(xiàn)網(wǎng)站的首頁(yè)可以進(jìn)行各種其他功能的跳轉(zhuǎn)，如：登錄，注冊(cè)，上傳等。在瀏覽首頁(yè)時(shí)您可以大體的對(duì)本系統(tǒng)進(jìn)行了解，并一目了然的對(duì)自己想要完成的功能進(jìn)行搜尋，方便省力，首頁(yè)就如同本系統(tǒng)的窗戶，充滿了與用戶的交互性。在首頁(yè)的設(shè)計(jì)中，采取上方導(dǎo)航欄，下方分布模塊的方式進(jìn)行設(shè)計(jì)，使得頁(yè)面簡(jiǎn)單明了，用戶更加容易接受和找到自己的所需功能。在這里您可以將攝影作品分享給他人5.2登錄注冊(cè)功能用戶在不登錄的情況下只能使用網(wǎng)站的預(yù)覽類功能，而無法實(shí)現(xiàn)作品上傳和攝影咨詢反饋，在注冊(cè)功能中，用戶需要填寫姓名、電話、密碼、年齡和工作等信息，后臺(tái)會(huì)對(duì)填寫的信息進(jìn)行校驗(yàn)，校驗(yàn)不通過會(huì)對(duì)用戶進(jìn)行提示，校驗(yàn)通過完成注冊(cè)，進(jìn)入登錄界面，用戶成功登錄后可以使用上傳作品功能和攝影咨詢反在注冊(cè)功能中，為了保證能夠通過字段值唯一的數(shù)據(jù)來完成查詢等操作，需要用戶提供手機(jī)號(hào)碼，當(dāng)用戶提價(jià)注冊(cè)信息后，后臺(tái)會(huì)通過手機(jī)號(hào)碼查詢是否當(dāng)前輸入的手機(jī)號(hào)碼注冊(cè)過，若注冊(cè)過提示用戶當(dāng)前手機(jī)號(hào)碼已被占用，需要用戶使用另一個(gè)手機(jī)號(hào)碼完成注冊(cè)。當(dāng)您第一次登錄我們網(wǎng)站的時(shí)候，需要進(jìn)行相應(yīng)的注冊(cè)與登錄才能有效的使用網(wǎng)站的功能。登陸系統(tǒng)后注冊(cè)界面設(shè)計(jì)如下： 性別*男▼注鼎注鼎圖5.2注冊(cè)界面登錄界面設(shè)計(jì)如下： 登錄登錄圖5.3登錄界面}publicStringregist(Useruser,Stringre_pwd,HttpServletRequestrq,HttpSessionsession,MultipartFilepiuser4.setUser_phone(user.getList<User>queryUser2=userService.QueryUser(System.out.println("查詢?nèi)诵畔ⅲ?+queryUser2);rq.getSession().setAttribute("regist_msg","兩次密碼不一致!");UUIDuuid=UUID.randomUUIDUpLoadPic.UpLoad(pic,user.setlcon(Pic_src);return"user/regist";用戶通過圖片上傳功能將本地圖片和作品信息添加至數(shù)據(jù)庫(kù)，tomcat配置本地存儲(chǔ)路徑后會(huì)將圖片存儲(chǔ)至本地文件夾內(nèi)。您可以在網(wǎng)站上隨時(shí)隨地的上傳您的精彩作品，只需完善相應(yīng)的信息填寫即作品上傳界面設(shè)計(jì)如下：攝影類型圖5.4作品上傳//上傳作品關(guān)鍵代碼@RequestMapping(value="/InsertItem.do",producepublicStringInsertItem(Workswork,HttpServletRequestrq,Htif(login_user==null){//上傳圖片UUIDuuid=UUID.randwork.setWorks_picture(Pic_src);if(insertworks>0){用戶可以在攝影作品中查看其他用戶上傳的作品，并且點(diǎn)擊攝影圖片可以跳轉(zhuǎn)至詳細(xì)頁(yè)面查看照片詳情。在攝影作品頁(yè)和攝影故事頁(yè)添加查詢，將攝影信息查詢出來，然后在攝影作品頁(yè)將信息展示出來，在a標(biāo)簽中添加作品的id,點(diǎn)擊圖片才能跳轉(zhuǎn)至對(duì)應(yīng)的詳情頁(yè)面。您的相應(yīng)作品將會(huì)在攝影作品的專欄中體現(xiàn)，其中，您所添加的攝影故事也會(huì)被一并展示給他人，圖文并茂，更能觸動(dòng)人心。攝影作品查看頁(yè)面設(shè)計(jì)圖如下：攝影作品攝影作品故事頁(yè)面設(shè)計(jì)圖如下：james2021-05-0310:55:52拍攝故事：暫無james2021-05-0310:57:01拍攝故事：暫無圖5.6攝影故事查看//作品展示頁(yè)面關(guān)鍵代碼publicStringblog(HttpSerList<Works>queryWorkStringreplace=works.getCreatt}return"user/blog";用戶可以在完成登陸后進(jìn)行對(duì)于攝影技巧和設(shè)備相關(guān)的功能咨詢，咨詢內(nèi)容將會(huì)提交到后臺(tái)進(jìn)行管理。在登錄后，進(jìn)入到咨詢頁(yè)面，選擇相應(yīng)的咨詢事項(xiàng)，完成姓名與電話的填寫，即可將咨詢的內(nèi)容發(fā)送到后臺(tái)數(shù)據(jù)庫(kù)。溫影蔬5咨詢內(nèi)容已反饋給后臺(tái)!圖5.7咨詢頁(yè)面5.5.4咨詢功能的關(guān)鍵代碼及其設(shè)計(jì)5.6HTML5&CSS3的新特性設(shè)計(jì)代碼部分展示//部分基于CSS3和HTML5的新樣式設(shè)計(jì)如：攝影工作室CSS3效果部分新特性代碼如下：閱讀更多閱讀更多<ahref="#"class="button-w3lsbtnmt-4">閱讀更CSS3效果部分新特性代碼如下：CSS3效果部分新特性代碼如下：-webkit-tap-highligh一張好照片的四個(gè)要素：主體突出，田面簡(jiǎn)潔·造型類膜，有思想性·<spanclass="accordion-iteCSS3效果部分新特性代碼如下：CSS3效果部分新特性代碼如下：-webkit-tap-highligh6程序測(cè)試與評(píng)價(jià)6.1軟件測(cè)試的概述在開發(fā)完所有功能后，開發(fā)人員需對(duì)軟件進(jìn)行測(cè)試，然后才能成功使用它。測(cè)試應(yīng)包括測(cè)試用例，以限制軟件的可用性。程序以指定狀態(tài)運(yùn)行。運(yùn)行測(cè)試以查找軟件中的錯(cuò)誤，檢查軟件性能的質(zhì)量，并查看當(dāng)前軟件響應(yīng)是否符合您的預(yù)期假設(shè)。將系統(tǒng)分成較小的區(qū)塊并測(cè)試每個(gè)區(qū)塊的過程稱之為單元測(cè)試。在所有單元測(cè)試都通過之后，可以認(rèn)為單元測(cè)試沒有問題。該系統(tǒng)的單元測(cè)試的要點(diǎn)是：a.管理員的登錄測(cè)試管理員登陸系統(tǒng)時(shí)需要輸入管理員所需的賬號(hào)和密碼，這保證了對(duì)于整個(gè)系統(tǒng)的最佳管理與控制。測(cè)試管理員登錄時(shí)，需要使用其他管理員的帳戶密碼登錄，以驗(yàn)證可以在后臺(tái)正確掃描系統(tǒng)以及登錄軟件是否正確。例如，如果您以管理員身份登錄時(shí)輸入了不正確的帳戶密碼，則無法進(jìn)入管理員界面，相反，輸入正確的賬號(hào)密碼后才可以登錄。b.用戶管理的測(cè)試用戶需要輸入正確的賬號(hào)/用戶名密碼才可以登錄，每次登錄時(shí)，系統(tǒng)都會(huì)去數(shù)據(jù)庫(kù)中查詢是否符合當(dāng)前輸入信息字段的數(shù)據(jù)，用當(dāng)前輸入的賬號(hào)和密碼作為查詢條件到數(shù)據(jù)庫(kù)進(jìn)行查詢，并反饋給用戶信息，如果找到了則返回成功。c.用戶發(fā)布作品測(cè)試在用戶發(fā)布作品時(shí)，可以對(duì)發(fā)布功能進(jìn)行測(cè)試，通過上傳不同格式的圖片文字，空值，觀測(cè)系統(tǒng)的反應(yīng)，是否報(bào)錯(cuò)，也可以同時(shí)上傳多張圖片進(jìn)行測(cè)試。開發(fā)系統(tǒng)后，檢查其操作。性能測(cè)試的目的是校驗(yàn)軟件是否您的應(yīng)用程序指標(biāo)，用來反映系統(tǒng)的缺陷并優(yōu)化系統(tǒng)。確保軟件準(zhǔn)確，流暢地運(yùn)行，以最大程度地減少軟件錯(cuò)誤。該軟件所需要的性能較低，非常便于測(cè)試。該系統(tǒng)已經(jīng)經(jīng)歷過黑盒測(cè)試和白盒測(cè)試。黑盒測(cè)試主要