Django的圖片搜索網(wǎng)站設(shè)計

...wd...Django的圖片搜索網(wǎng)站設(shè)計摘要：基于用戶對圖片查找的需求所設(shè)計的一個網(wǎng)站。該網(wǎng)站可以進展一系列的查詢，方便用戶查找到自己感興趣的圖片。并通過上傳可以增加圖庫里的圖片，各個用戶均可以分享整個圖庫里的所有圖片，并通過收藏按鈕可以在自己的圖集中看到所喜歡的圖片。方便用戶收集喜歡的圖片。另外，結(jié)合Django這個python的web框架，搭建的平臺簡單安全，可移植性好。實現(xiàn)一系列的功能，例如登陸、注冊、上傳等。涉及圖片搜索的功能有按關(guān)鍵字搜索，按色系搜索，按大小搜索等。對于用戶來說，可以收藏喜歡的圖片，并下載。各個用戶的上傳可以共享。此外，整個頁面簡單大方，使用Bootstrap風(fēng)格，加上特有的輪播效果，展示圖片效果更好，用戶體驗效果對比好。關(guān)鍵詞：PythonDjango圖片搜索Bootstrap圖像處理目錄第一章系統(tǒng)概述51.1總體概述51.2開發(fā)背景61.3開發(fā)目的7第二章系統(tǒng)分析82.1技術(shù)可行性分析82.1.1開發(fā)技術(shù)綜述82.1.2MySQL數(shù)據(jù)庫的選用122.1.3技術(shù)可行性綜述132.2時間可行性132.3系統(tǒng)需求分析132.3.1系統(tǒng)開發(fā)運行環(huán)境132.3.2系統(tǒng)功能概述132.3.3系統(tǒng)數(shù)據(jù)流圖142.4系統(tǒng)總體構(gòu)造分析結(jié)論15第三章系統(tǒng)設(shè)計163.1數(shù)據(jù)庫設(shè)計163.1.1數(shù)據(jù)模型〔ER圖〕163.1.2數(shù)據(jù)庫表及關(guān)系建設(shè)173.1.3詳細數(shù)據(jù)庫構(gòu)造設(shè)計183.2系統(tǒng)概要設(shè)計203.2.1功能模塊設(shè)計203.2.2系統(tǒng)界面設(shè)計22第四章系統(tǒng)的詳細設(shè)計與實現(xiàn)234.1系統(tǒng)框架實現(xiàn)234.1.1Model層244.1.2Template層264.1.3View層的實現(xiàn)324.2系統(tǒng)功能模塊實現(xiàn)334.2.1用戶模塊334.2.2搜索模塊364.2.3隨便看看模塊374.3系統(tǒng)設(shè)計與實現(xiàn)總結(jié)375.1測試概述385.1.1軟件測試的目的385.1.2測試環(huán)境385.2系統(tǒng)測試38結(jié)論40當(dāng)今世界，互聯(lián)網(wǎng)技術(shù)快速開展，人們對互聯(lián)網(wǎng)的要求越來越多，衍生出了一系列適應(yīng)人們需求的網(wǎng)站。隨著電子行業(yè)的快速開展，首當(dāng)其沖的就是視覺上的另類感受。人們可以通過一系列的圖像處理軟件繪制自己想要的圖片，可以通過圖片表達一些情緒。比方，冷色調(diào)給人以沉穩(wěn)，冷靜的感覺，暖色調(diào)則給人一種熱情，開朗的心情?？v觀網(wǎng)絡(luò)上，形形色色的圖片數(shù)不勝數(shù)，若何分享它們，若何更快速地查找到自己所需要的圖片是一個很龐大的問題。因此，在此問題上，本人采用python的django框架搭建了一個圖片搜索網(wǎng)站的系統(tǒng)，可以使用戶將自己收藏的圖片和他人分享，還可以搜索自己喜歡的圖片并收藏，降低用戶查找圖片的難度，以到達更好的用戶體驗。系統(tǒng)概述總體概述當(dāng)前高速開展的互聯(lián)網(wǎng)技術(shù)已經(jīng)成為人們快速獲取，發(fā)布和傳遞消息的重要渠道，顛覆了傳統(tǒng)的信息傳播方式，突破了傳統(tǒng)交流方式中的時間空間壁壘，極大的改變了人類從物質(zhì)到精神，從形式到內(nèi)容的種種活動?；ヂ?lián)網(wǎng)上發(fā)布和獲取信息都是通過網(wǎng)站來實現(xiàn)的。因而網(wǎng)站日益成為企事業(yè)單位信息化建設(shè)中不可防止的重要組成局部，越來越多的收到人們的重視。現(xiàn)在很多大學(xué)及其眾多部門都建設(shè)了自己的網(wǎng)站，希望通過互聯(lián)網(wǎng)來實現(xiàn)宣傳，交流以及資源的整合?；诰W(wǎng)站的理念，本人設(shè)計并實現(xiàn)了這一圖片搜索網(wǎng)站，該網(wǎng)站可以進展一系列的查詢，方便用戶查找到自己感興趣的圖片。并通過上傳可以增加圖庫里的圖片，各個用戶均可以分享整個圖庫里的所有圖片。而且學(xué)習(xí)python可以掌握一門腳本語言并結(jié)合Django這個python的web框架，搭建的平臺簡單安全，可移植性好。在國內(nèi)外研究系統(tǒng)中：國內(nèi)類似的網(wǎng)站有百度的圖片搜索，搜狗圖片搜索，topit.me的網(wǎng)站等；國外的類似網(wǎng)站有谷歌圖片搜索；還有基于圖片內(nèi)容的搜索基于文本的圖片搜索。1.2開發(fā)背景網(wǎng)站是一種通訊工具，就像布告欄一樣，人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊信息，或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務(wù)。下面介紹幾種目前頗受關(guān)注的新技術(shù)：1.PHPPHP即HypertextPreprocessor(超文本預(yù)處理器)，它是當(dāng)今Internet上最為熾熱的腳本語言，其語法借鑒了C、Java、PERL等語言，但只需要很少的編程知識你就能使用PHP建設(shè)一個真正交互的Web站點。但PHP自身也存在缺點。首先，PHP缺乏規(guī)模支持。其次，缺乏多層構(gòu)造支持。對于大負荷站點，解決方法只有一個：分布計算。數(shù)據(jù)庫、應(yīng)用邏輯層、表示邏輯層彼此分開，而且同層也可以根據(jù)流量分開，群組成二維數(shù)組。而PHP則缺乏這種支持。再加上PHP提供的數(shù)據(jù)庫接口支持不統(tǒng)一，這就使得它不適合運用在電子商務(wù)中。2.ASPASP即ActiveServerPages，它是微軟開發(fā)的一種類似HTML(超文本標(biāo)識語言)、Script(腳本)與CGI(公用網(wǎng)關(guān)接口)的結(jié)合體，它允許用戶使用許多已有的腳本語言編寫ASP的應(yīng)用程序。ASP的最大好處是可以包含HTML標(biāo)簽，也可以直接存取數(shù)據(jù)庫及使用無限擴大的ActiveX控件。通過使用ASP的組件和對象技術(shù)，用戶可以直接使用ActiveX控件，調(diào)用對象方法和屬性，以簡單的方式實現(xiàn)強大的交互功能。但ASP技術(shù)也非完美無缺，由于它基本上是局限于微軟的操作系統(tǒng)平臺之上，主要工作環(huán)境是微軟的IIS應(yīng)用程序構(gòu)造，又因ActiveX對象具有平臺特性，所以ASP技術(shù)不能很容易地實現(xiàn)在跨平臺Web服務(wù)器上工作。3.JSPJSP即JavaServerPages，它是由SunMicrosystem公司于1999年6月推出的新技術(shù)，是基于JavaServlet以及整個Java體系的Web開發(fā)技術(shù)。JSP和ASP在技術(shù)方面有許多相似之處，不過兩者來源于不同的技術(shù)標(biāo)準(zhǔn)組織，以至ASP一般只應(yīng)用于Windows平臺，而JSP則可以在85%以上的服務(wù)器上運行，而且基于JSP技術(shù)的應(yīng)用程序比基于ASP的應(yīng)用程序易于維護和管理，所以被許多人認為是未來最有開展前途的動態(tài)網(wǎng)站技術(shù)。4.PythonWeb框架簡單介紹兩種框架：Django完美的文檔，Django的成功，我覺得很大一局部原因要歸功于Django近乎完美的官方文檔〔包括Djangobook〕。全套的解決方案，Django象Rails一樣，提供全套的解決方案〔full-stackframework+batteriesincluded〕，基本要什么有什么〔比方：cache、session、feed、orm、geo、auth〕，而且全部Django自己造，開發(fā)網(wǎng)站應(yīng)手的工具Django基本都給你做好了，因此開發(fā)效率是不用說的，出了問題也算好找，不在你的代碼里就在Django的源碼里。強大的URL路由配置，Django讓你可以設(shè)計出非常優(yōu)雅的URL，在Django里你基本可以跟丑陋的GET參數(shù)說拜拜。自助管理后臺，admininterface是Django里對比吸引眼球的一項contrib，讓你幾乎不用寫一行代碼就擁有一個完整的后臺管理界面。web.pyWeb.py的設(shè)計理念力求精簡〔Keepitsimpleandpowerful〕，總共就沒多少行代碼，也不像Pylons那樣依賴大量的第三方模塊，而是只提供的一個框架所必須的一些東西，如：URL路由、Template、數(shù)據(jù)庫訪問，其它的就交給用戶自己去做好了。一個框架精簡的好處在于你可以聚焦在業(yè)務(wù)邏輯上，而不用太多的去關(guān)心框架本身或受框架的干擾，同時缺點也很明顯，許多事情你得自己操刀上。1.3開發(fā)目的看到一些圖片搜索網(wǎng)站感覺非常有意思，比方百度圖片，谷歌圖片以及搜狗圖片。對里面的機制很感興趣，就想自己做一個類似的網(wǎng)站。專門的識圖網(wǎng)站來滿足一些用戶的需求。而且學(xué)習(xí)python可以掌握一門腳本語言并結(jié)合Django這個python的web框架，搭建的平臺簡單安全，可移植性好。第二章系統(tǒng)分析2.1技術(shù)可行性分析2.1.1開發(fā)技術(shù)綜述1.PythonPython是一種面向?qū)ο?、直譯式電腦編程語言，具有近二十年的開展歷史，成熟且穩(wěn)定。它包含了一組完善而且容易理解的標(biāo)準(zhǔn)庫，能夠輕松完成很多常見的任務(wù)。它的語法簡捷和清晰，盡量使用無異義的英語單詞，與其它大多數(shù)程序設(shè)計語言使用大括號不一樣，它使用縮進來定義語句塊。Python的官方解釋器是CPython,該解釋器用C語言編寫，是一個由社區(qū)驅(qū)動的自由軟件，目前由Python軟件基金會管理。Python支持命令式程序設(shè)計、面向?qū)ο蟪绦蛟O(shè)計、函數(shù)式編程、面向側(cè)面程序設(shè)計、泛型編程多種編程范式。Python的設(shè)計哲學(xué)是“優(yōu)雅〞、“明確〞、“簡單〞。Python開發(fā)者有意讓違反了縮進規(guī)則的程序不能通過編譯，以此來強制程序員養(yǎng)成良好的編程習(xí)慣。例如：>>>print"Hello,world!" Hello,world!2.DjangoDjango是一個開放源代碼的Web應(yīng)用框架，由Python寫成。采用了MVC的軟件設(shè)計模式，即模型M，視圖V和控制器C。Django的主要目標(biāo)是使得開發(fā)復(fù)雜的、數(shù)據(jù)庫驅(qū)動的網(wǎng)站變得簡單。Django注重組件的重用性和“可插拔性〞，敏捷開發(fā)和DRY法則〔Don'tRepeatYourself〕。在Django中Python被普遍使用，甚至包括配置文件和數(shù)據(jù)模型。Django使你能夠?qū)Ｗ⒂赪eb應(yīng)用上有趣的關(guān)鍵性的東西。為了到達這個目標(biāo)，Django提供了通用Web開發(fā)模式的高度抽象，提供了頻繁進展的編程作業(yè)的快速解決方法，以及為“若何解決問題〞提供了清晰明了的約定。同時，Django嘗試留下一些方法，來讓你根據(jù)需要在framework之外來開發(fā)。Django基本元素：|____Site/|______init__.py|____manage.py|____urls.py|____settings.py__init__.py：讓Python把該目錄當(dāng)成一個開發(fā)包(即一組模塊)所需的文件。這是一個空文件，一般你不需要修改它。manage.py：一種命令行工具，允許你以多種方式與該Django工程進展交互。鍵入pythonmanage.pyhelp，看一下它能做什么。你應(yīng)當(dāng)不需要編輯這個文件；在這個目錄下生成它純是為了方便。5settings.py：該Django工程的設(shè)置或配置。查看并理解這個文件中可用的設(shè)置類型及其默認值。urls.py：Django工程的URL設(shè)置?？梢暺錇槟愕膁jango網(wǎng)站的目錄。目前，它是空的。3.Django式的MVC設(shè)計模式當(dāng)前最為成功最為常用的設(shè)計架構(gòu)之一當(dāng)屬MVC-即模型-視圖-控制器設(shè)計模式了。它將應(yīng)用軟件的各類職能很好的別離開來，Django大致上遵循這一設(shè)計理念。當(dāng)然比起Java框架里的MVC，它略微有些不同。1、模型〔model〕主要負責(zé)管理數(shù)據(jù)和核心的業(yè)務(wù)邏輯2、視圖〔view〕負責(zé)將數(shù)據(jù)展示給用戶3、控制器〔Controller〕接收用戶輸入并執(zhí)行應(yīng)用程序邏輯層面的工作在很多領(lǐng)域這一思路非常高效，不過Django的設(shè)計者們不是簡單的照搬這一模式，而且試圖構(gòu)建一個更適合Web應(yīng)用程序開發(fā)的思路，因為django最初是用在新聞出版類的網(wǎng)站上，對新聞事件的快速反響要求這套框架也必須“快〞、“準(zhǔn)〞、“狠〞。于是最終一些和MVC不太一樣的設(shè)計目標(biāo)產(chǎn)生了：1、針對特定一組任務(wù)的代碼必須更加好維護2、程序開發(fā)應(yīng)該被賦予更多的靈活性，因為不同的視圖、控制器層會連接到一樣的模型層。這使得很多應(yīng)用程序能夠針對不同的客戶使用不同的方法來共享一樣的業(yè)務(wù)邏輯和數(shù)據(jù)。3、開發(fā)者只需學(xué)習(xí)與他工作相關(guān)的那局部系統(tǒng)功能。這種分工一方面降低難度提高效率、另一方面也使開發(fā)者可以把注意力集中到自己業(yè)務(wù)問題上。于是最終Django的架構(gòu)被設(shè)計成Model-Template-View的形式，下面仔細聊聊各個模塊。模型將模型別離出來，這和MVC架構(gòu)的M還是差不多的。Django的model提供一套簡單的數(shù)據(jù)庫交互接口用來封裝核心業(yè)務(wù)邏輯。model獨立于系統(tǒng)的其他模塊，可以被系統(tǒng)其他任意模塊訪問。比方與數(shù)據(jù)庫的交互可以直接通過python解釋器訪問，無需啟動web服務(wù)器或者業(yè)務(wù)相關(guān)的邏輯層。視圖雖然名字和MVC里的名字一樣，但是實際上他們干的事有點不同。他是MVC里的局部V和全部C的結(jié)合體。django的視圖承受用戶輸入，包括簡單的請求，然后根據(jù)特定的交互邏輯運算，然后返回用戶需要的數(shù)據(jù)。視圖通常用普通的Python函數(shù)來寫，不過Django1.3開場已經(jīng)慢慢向類轉(zhuǎn)變，所有的內(nèi)置視圖都有了類版本，這樣做就能最大限度的提升軟件的復(fù)用。嚴格來講python支持所有的Pythoncallable作為View，其中包括實例方法，callable類〔實現(xiàn)__call__方法的類實例),柯西化或者裝飾化的函數(shù)。模板view負責(zé)的是若何得到用戶需要的數(shù)據(jù)，至于若何展現(xiàn)數(shù)據(jù)那就是模板的事了。模板大約相當(dāng)于MVC里邊的View。不過django里的模板功能還是相當(dāng)強大的，比方他有叫customtag的東西，按官方文檔的說法，他是萬能的，他可以繞過視圖直接和模型交互，所以對于頁面上需要一樣的數(shù)據(jù)只是不同的展現(xiàn)方式的東西，直接用它吧。URL配置根據(jù)整個框架設(shè)計邏輯，Django還提供了一個獨立粘合層將視圖暴露出去。URL使用正則表達式將view和url完美的對接起來。正因為使用正則表達式，它的可讀性和可維護性相當(dāng)讓人身心愉悅，妙不可言。所謂，RESTful就是它了！松耦合MVC設(shè)計模式以及Django的MTV提倡不用功能的代碼不應(yīng)該也不需要知道彼此的具體操作，也就是常說的松耦合。相反，緊耦合不同功能模塊之間的依賴程度很高。緊耦合導(dǎo)致代碼維護難等一些列問題，這些問題無疑會增加程序員的工作負擔(dān)，一點小改動就會牽扯方方面面，增加了工作量也增加了成本。松耦合提倡代碼之間不能有知道彼此的具體操作。當(dāng)然實際的工程中不同模塊的代碼引用總是防止不了，關(guān)鍵就是隱藏細節(jié)。4.BootstrapBootstrap是著名的社交網(wǎng)站、微博的先驅(qū)Twitter在2011年8月推出的開源WEB前端框架，集合CSS和HTML，使用了最新的瀏覽器技術(shù)，為快速WEB開發(fā)提供了一套前端工具包，包括布局、網(wǎng)格、表格、按鈕、表單、導(dǎo)航、提示等。使用Bootstrap可以構(gòu)建出非常優(yōu)雅的前端界面，而且占用資源非常小。GitHub上這樣介紹bootstrap：簡單靈活可用于架構(gòu)流行的用戶界面和交互接口的html,css,javascript工具集?；趆tml5、css3的bootstrap，具有大量的誘人特性：友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計，12列格網(wǎng)，樣式向?qū)臋n，自定義JQuery插件，完整的類庫，基于Less等。例如，要顯示下面的格式的話，只需要引入bootstrap的CSS，調(diào)用對應(yīng)的類即可。見圖2.2.1。圖2.2.1bootstrap演示代碼如下：<form><fieldset><legend>Legend</legend><label>Labelname</label><inputtype="text"placeholder="Typesomething…"><spanclass="help-block">Exampleblock-levelhelptexthere.</span><labelclass="checkbox"><inputtype="checkbox">Checkmeout</label><buttontype="submit"class="btn">Submit</button></fieldset></form>2.1.2MySQL數(shù)據(jù)庫的選用鑒于MySQL的一系列特性以及需求選用了MySQL作為本工程的數(shù)據(jù)庫。特性如下：使用C和C++編寫，并使用了多種編譯器進展測試，保證源代碼的可移植性。支持AIX、BSDi、FreeBSD、HP-UX、Linux、MacOS、NovellNetware、NetBSD、OpenBSD、OS/2Wrap、Solaris、SunOS、Windows等多種操作系統(tǒng)。為多種編程語言提供了API。這些編程語言包括C、C++、C#、Delphi、Eiffel、Java、Perl、PHP、Python、Ruby和Tcl等。支持多線程，充分利用CPU資源，支持多用戶。優(yōu)化的SQL查詢算法，有效地提高查詢速度。既能夠作為一個單獨的應(yīng)用程序應(yīng)用在客戶端服務(wù)器網(wǎng)絡(luò)環(huán)境中，也能夠作為一個庫而嵌入到其他的軟件中。提供多語言支持，常見的編碼如中文的GB2312、BIG5，日文的Shift_JIS等都可以用作數(shù)據(jù)表名和數(shù)據(jù)列名。提供TCP/IP、ODBC和JDBC等多種數(shù)據(jù)庫連接途徑。提供用于管理、檢查、優(yōu)化數(shù)據(jù)庫操作的管理工具?？梢蕴幚頁碛猩锨f條記錄的大型數(shù)據(jù)庫。2.1.3技術(shù)可行性綜述綜上所述，這些成熟的技術(shù)和設(shè)計思想為本系統(tǒng)的開發(fā)提供了理論根基，計算機根基設(shè)施的更新?lián)Q代也為開發(fā)系統(tǒng)提供了硬件根基。故本系統(tǒng)可以實現(xiàn)。2.2時間可行性本系統(tǒng)所用到的技術(shù)都是本人現(xiàn)學(xué)的，其中Python是在寒假期間學(xué)習(xí)的，參考書目為《Python根基教程》。因為大學(xué)期間接觸過JSP編程的MVC模式，所以對于Django很容易上手。方案如下：2013.01.20-2013.02.20學(xué)習(xí)Python2013.02.21-2013.03.20學(xué)習(xí)Django并進展工程設(shè)計2013.03.21-2013.04.10進一步根據(jù)所學(xué)內(nèi)容進展詳細設(shè)計2013.04.11-2013.05.10編寫代碼2013.05.11-2013.05.15撰寫論文2.3系統(tǒng)需求分析2.3.1系統(tǒng)開發(fā)運行環(huán)境鑒于系統(tǒng)的開發(fā)語言和數(shù)據(jù)庫,采用如下的開發(fā)環(huán)境和工具：開發(fā)環(huán)境：Windows7，Python2.7，Django1.5.1開發(fā)語言:Python數(shù)據(jù)庫:Mysql開發(fā)工具:JetBrainsPyCharm.2系統(tǒng)功能概述本網(wǎng)站由用戶模塊，搜索模塊和隨便看看模塊三局部組成。其中搜索模塊是核心模塊，具有很多功能。鑒于本系統(tǒng)的性質(zhì)，系統(tǒng)應(yīng)實現(xiàn)以下功能：用戶功能實現(xiàn)(1)用戶的注冊(2)用戶的登錄(3)用戶圖片收藏(4)用戶收藏圖片刪除(5)用戶圖片的上傳2.搜索功能的實現(xiàn)(1)按圖片關(guān)鍵字搜索(2)按色系搜索(3)按圖片尺寸搜索3.隨便看看功能的實現(xiàn)(1)顯示圖片(2)圖片的畫廊式播放2.3.3系統(tǒng)數(shù)據(jù)流圖頂層數(shù)據(jù)流圖如圖2.3.3-1所示：圖2.3.3-1頂層數(shù)據(jù)流圖2.4系統(tǒng)總體構(gòu)造分析結(jié)論通過對系統(tǒng)采用技術(shù)、數(shù)據(jù)庫選擇的可行性分析和對系統(tǒng)的需求分析，完成了前期對系統(tǒng)模塊及功能的劃分。在此根基上，可以對系統(tǒng)數(shù)據(jù)庫和功能模塊進展概要設(shè)計。第三章系統(tǒng)設(shè)計在前期的系統(tǒng)構(gòu)造分析根基上，對系統(tǒng)進展概要設(shè)計。3.1數(shù)據(jù)庫設(shè)計數(shù)據(jù)庫設(shè)計是指對于一個給定的應(yīng)用環(huán)境，構(gòu)造最優(yōu)的數(shù)據(jù)庫模式,建設(shè)數(shù)據(jù)庫及其應(yīng)用系統(tǒng)，使之能夠有效地存儲數(shù)據(jù)，滿足各種用戶的應(yīng)用需求(信息要求和處理要求)。3.1.1數(shù)據(jù)模型〔ER圖〕數(shù)據(jù)模型是是數(shù)據(jù)特征的抽象，從抽象層次上描述了系統(tǒng)的靜態(tài)特征、動態(tài)行為和約束條件，為數(shù)據(jù)庫系統(tǒng)的信息表與操作提供一個抽象的框架。描述了數(shù)據(jù)構(gòu)造、數(shù)據(jù)操作及數(shù)據(jù)約束。通常，使用實體-聯(lián)系圖〔簡稱為ER圖〕來建設(shè)數(shù)據(jù)模型。ER圖中包含了實體〔即數(shù)據(jù)對象〕、關(guān)系和屬性3種基本成分，通常用矩形框代表實體，用連接相關(guān)實體的菱形框表示關(guān)系，用橢圓形或圓角矩形表示實體〔或關(guān)系〕的屬性，并用直線把實體〔或關(guān)系〕與其屬性連接起來。本系統(tǒng)的ER圖：圖3.1.1系統(tǒng)ER圖3.1.2數(shù)據(jù)庫表及關(guān)系建設(shè)根據(jù)以上步驟建設(shè)數(shù)據(jù)庫imageSearch，依次建設(shè)以下表構(gòu)造：用戶信息表使用Django自帶的用戶系統(tǒng)表auth_user圖片表image用戶和圖片關(guān)系表user_image用戶和圖片是多對多的關(guān)系可以通過用戶收藏，刪除收藏而修改標(biāo)簽表tag標(biāo)簽和圖片是多對多的關(guān)系顏色表color此表固定顏色圖片關(guān)系表color_image圖片和顏色是一對多的關(guān)系每張圖片可以對應(yīng)多個色系尺寸表size圖片和尺寸是一對一的關(guān)系，但是尺寸不存入尺寸中，存入image表中此表固定圖3.1.2數(shù)據(jù)庫關(guān)系圖圖3.1.3Django自帶數(shù)據(jù)庫模型圖3.1.3詳細數(shù)據(jù)庫構(gòu)造設(shè)計1.用戶信息表用戶信息表中存放的是用戶的基本信息，包括用戶名、密碼，其中密碼是Django自帶的PBKDF2加密方法加密。表3-1auth_user字段名稱數(shù)據(jù)類型長度允許空字段描述idint主鍵usernamevarchar50用戶名(郵箱〕passwordvarchar30用戶密碼2.圖片表存放圖片的ID以及圖片描述。表3-2image字段名稱數(shù)據(jù)類型長度允許空字段描述idint主鍵datedate參加時間descriptiontext圖片描述widthint圖片寬度heightint圖片高度用戶圖片關(guān)系表由于用戶和圖片是多對多的關(guān)系，所以表中存放圖片和用戶的關(guān)系映射。表3-3uaer_image字段名稱數(shù)據(jù)類型長度允許空字段描述idint主鍵user_idint用戶idimage_idint圖片id4.標(biāo)簽表描述標(biāo)簽的名字和該標(biāo)簽以以以下圖片的數(shù)量。表3-4tag字段名稱數(shù)據(jù)類型長度允許空字段描述idint主鍵namevarchar30標(biāo)簽名字frequencyint該標(biāo)簽以以以下圖片數(shù)量5.顏色表色系搜索的時候使用到的顏色，表中存儲顏色的中文名，英文名以及ID號。表3-5color字段名稱數(shù)據(jù)類型長度允許空字段描述idint主鍵namevarchar30顏色中文名字ennamevarchar30顏色英文名稱6.圖片與色系的關(guān)系表由于圖片與色系也是采用一對多的關(guān)系，所以這里存放圖片以及對應(yīng)色系的關(guān)系映射。另外還存儲了該圖片在此色系下所占比重。因為一張圖片計算出來的色系有差異，所以有個比重的話顯示效果會更好。表3-6color_image字段名稱數(shù)據(jù)類型長度允許空字段描述idint主鍵color_idint標(biāo)簽IDimage_idint圖片IDvaluedouble顏色值的比重7.尺寸表因為用戶查詢尺寸的時候往往是有目的的，比方想查詢壁紙，壁紙的大小都是固定的，所以這個表示固定的寫入一些常見的壁紙大小，方便生成標(biāo)簽，用戶可以直接點擊查找。表3-7size字段名稱數(shù)據(jù)類型長度允許空字段描述idint主鍵widthint寬度heightint高度3.2系統(tǒng)概要設(shè)計根據(jù)需求分析的結(jié)果，對系統(tǒng)進展具體的實現(xiàn)方案的設(shè)計。3.2.1功能模塊設(shè)計由系統(tǒng)功能描述，可將本系統(tǒng)的功能分為四大模塊，分別是用戶模塊、隨便看看模塊、搜索模塊。本系統(tǒng)的功能層次圖如圖3.2.1所示：圖3.2.1系統(tǒng)功能層次圖本系統(tǒng)實現(xiàn)了如下功能：用戶模塊(1)用戶注冊：非網(wǎng)站注冊用戶可以通過此模塊注冊成為本網(wǎng)站注冊用戶，然后享用注冊用戶的權(quán)力。(2)用戶登錄：注冊用戶通過此模塊登錄到網(wǎng)站，登錄后便可使用所有注冊用戶功能。(3)圖片上傳：注冊用戶可以通過此模塊上傳圖片。(4)收藏圖片：注冊用戶可以通過此模塊點擊自己喜歡圖片收藏到自己的圖集里。(5)刪除圖片：注冊用戶可以通過此模塊從自己的圖集中刪除不喜歡的圖片。 (6)查看我的圖集：注冊用戶可以通過此模塊查看自己喜歡過的圖片。隨便看看(1)顯示圖片：注冊用戶和游客均可點擊此模塊顯示最近上傳的一百張圖片。搜索模塊(1)按圖片關(guān)鍵字搜索：注冊用戶和游客均可點擊此模塊輸入關(guān)鍵字搜索該關(guān)鍵字下對應(yīng)的圖片。(2)按色系搜索：注冊用戶和游客均可點擊此模塊按對應(yīng)的顏色搜索圖片，并將其顯示出來。(3)按尺寸搜索：注冊用戶和游客均可點擊此模塊對應(yīng)的尺寸搜索圖片，并將其顯示出來。3.2.2系統(tǒng)界面設(shè)計界面設(shè)計的實現(xiàn)可以分為兩個局部。第一局部為站點的規(guī)劃及草圖的繪制，這一局部可以在紙上完成。第二局部為網(wǎng)頁的制作，這一過程是在計算機上完成的。設(shè)計首頁的第一步是設(shè)計版面布局。由于是圖片網(wǎng)站，所以首頁采取了畫廊似的圖片，給人以宏大的感覺。設(shè)計要遵循五個大的原則：統(tǒng)一、連貫、分割、比照及和諧。統(tǒng)一，是指設(shè)計作品的整體性，一致性。設(shè)計作品的整體效果是至關(guān)重要的，在設(shè)計中切勿將各組成局部孤立分散。連貫，是指要注意頁面的相互關(guān)系。設(shè)計中應(yīng)利用各組成局部在內(nèi)容上的內(nèi)在聯(lián)系和表現(xiàn)形式上的相互照應(yīng)，實現(xiàn)視覺上和心理上的連貫，使整個頁面的各個局部融洽。分割，是指將頁面分成假設(shè)干小塊，小塊之間有視覺上的不同。比照就是通過矛盾和沖突，使設(shè)計更加富有生氣。在使用比照的時候應(yīng)慎重，比照過強容易破壞美感，影響統(tǒng)一。和諧是指整個頁面符合美的法則，渾然一體。本系統(tǒng)采用Bootstrap風(fēng)格的界面設(shè)計，簡單大方。第四章系統(tǒng)的詳細設(shè)計與實現(xiàn)詳細設(shè)計階段的基本目標(biāo)是確定應(yīng)該若何具體地實現(xiàn)所要求的系統(tǒng)。經(jīng)過這個階段的設(shè)計工作，應(yīng)該得出對目標(biāo)系統(tǒng)的準(zhǔn)確描述，從而在編碼實現(xiàn)階段可以把這個描述直接翻譯成用某種程序設(shè)計語言書寫的程序。4.1系統(tǒng)框架實現(xiàn)在本系統(tǒng)中，我們采用Django技術(shù)進展開發(fā)。Django也是一個MVC框架。但是在Django中，控制器承受用戶輸入的局部由框架自行處理，所以Django里更關(guān)注的是模型〔Model〕、模板(Template)和視圖〔Views〕，稱為MTV模式：M代表模型〔Model〕，即數(shù)據(jù)存取層。該層處理與數(shù)據(jù)相關(guān)的所有事務(wù)：若何存取、若何驗證有效性、包含哪些行為以及數(shù)據(jù)之間的關(guān)系等。T代表模板(Template)，即表現(xiàn)層。該層處理與表現(xiàn)相關(guān)的決定：若何在頁面或其他類型文檔中進展顯示。V代表視圖〔View〕，即業(yè)務(wù)邏輯層。該層包含存取模型及調(diào)取恰當(dāng)模板的相關(guān)邏輯。你可以把它看作模型與模板之間的橋梁。在《AgileWebDevelopmentwithRails》中有這樣一張圖對MVC模式進展了很好的解釋，見圖4.1.1：圖4.1.1DjangoMVC圖需要注意的是，不能簡單的把Django視圖認為是MVC控制器，把Django模板認為MVC視圖。Django視圖不處理用戶輸入，而僅僅決定要展現(xiàn)哪些數(shù)據(jù)給用戶；Django模板僅僅決定若何展現(xiàn)Django視圖指定的數(shù)據(jù)。見圖4.1.2：圖4.1.2Django構(gòu)造圖4.1.1Model層Model描述了數(shù)據(jù)模型，通過Python的類實現(xiàn)與關(guān)系數(shù)據(jù)庫的對應(yīng)〔即著名的ORM—ObjectRelationMapping〕。通常，我們定義的每個Model對象都對于一個數(shù)據(jù)庫表。每個Model都是django.db.models.Model的子類Model對象的每個屬性都是數(shù)據(jù)表中的一個區(qū)域通過這些對應(yīng)，Django可以自動同數(shù)據(jù)庫交互一旦我們在定義好了models，我們需要告訴Django才能使用。這一步在開發(fā)過程中就是：創(chuàng)立app，設(shè)計models.py，在project的settings.py文件的INSTALLED_APPS里添加此app的加載路徑，使用./manage.pysyncdb更新數(shù)據(jù)庫。用戶#userclassUser(models.Model):user_name=models.CharField(max_length=50)nick_name=models.CharField(max_length=30)sex=models.CharField(max_length=10)password=models.CharField(max_length=30)birthday=models.DateField()register_time=models.DateTimeField()classMeta:db_table=u'user'圖片#imageclassImage(models.Model):description=models.TextField()width=models.IntegerField()height=models.IntegerField()like=models.BooleanField()classMeta:db_table=u'image'用戶圖片關(guān)系#user_imageclassUser_image(models.Model):user_id=models.IntegerField()img_id=models.IntegerField()classMeta:db_table=u'user_image'標(biāo)簽#tagclassTag(models.Model):name=models.CharField(max_length=100)frequency=models.IntegerField()classMeta:db_table=u'tag'usicMgr.#user顏色#colorclassColor(models.Model):name=models.CharField(max_length=30)enname=models.CharField(max_length=30)classMeta:db_table=u'color'顏色圖片關(guān)系#color_imageclassColor_image(models.Model):img_id=models.IntegerField()color_id=models.IntegerField()value=models.FloatField()classMeta:db_table=u'color_image'尺寸#sizeclassSize(models.Model):width=models.IntegerField()height=models.IntegerField()classMeta:4.1.2Template層想要在Python代碼中使用模板系統(tǒng)，只需遵循下面兩個步驟：可以用原始的模板代碼字符串創(chuàng)立一個Template對象，Django同樣支持用指定模板文件路徑的方式來創(chuàng)立Template對象。調(diào)用Template對象的render()方法并提供應(yīng)他變量(i.e.,內(nèi)容)。它將返回一個完整的模板字符串內(nèi)容,包含了所有標(biāo)簽塊與變量解析后的內(nèi)容。根據(jù)配置好的urls文件，確定某個請求的請求頁面。#urls.pyurlpatterns=patterns('ImageSearch.views',url(r'^$',index),url(r'^index$',index),url(r'^login$',login),url(r'^accounts/login/$'……例如上面這個url配置文件，當(dāng)發(fā)送index請求例如〔://:8000/index〕，根據(jù)url的配置，我們找到對應(yīng)的index函數(shù)，這個函數(shù)是在下面要介紹的views函數(shù)里：defindex(request):#processreturnrender_to_response('index.html',{'img_list':img_list},context_instance=RequestContext(request))上面函數(shù)的意思是，我們從process局部獲取需要的img_list，然后將它作為一個參數(shù)，傳到index.html。而index.html我們調(diào)用傳進來的參數(shù)來展示結(jié)果。例如index.html可以為如下頁面：{%extends"base.html"%}{%blocktitle%}ImageSearch{%endblock%}{%blockcontent%}{%foriteminimg_list:%}{{item.description}}{%endfor%}{%endblock%} 從外部引入base.html，然后根據(jù)Django的語法來解析這個頁面。可以認為base.html是父模板，而index.html是繼承base.html的子模板。1.主頁因為是圖片網(wǎng)站，所以主頁設(shè)計得很簡單，幾張大圖以畫廊式播放。其實現(xiàn)截圖如圖4.1.2-1-1所示：圖4.1.2-1index.html其中網(wǎng)站的每個頁面均有：top.html：頂欄以及網(wǎng)站Logofoot.html：版權(quán)base.html：結(jié)合前兩者形成的模板組成。2.注冊登陸用戶系統(tǒng)主要由注冊登陸實現(xiàn)，如圖4.1.2-1-2所示：圖4.1.2-2登陸注冊頁面3.搜索模塊搜索模塊有以下幾種搜索方式：按圖片關(guān)鍵字搜索：在數(shù)據(jù)庫查找匹配的字段，返回結(jié)果。按圖片色系搜索：在數(shù)據(jù)庫中查找該色系下的圖片，按比重從高到底排序后返回結(jié)果。按尺寸搜索：在數(shù)據(jù)庫中查找符合尺寸的圖片，返回結(jié)果。見圖4.1.2-3：圖4.1.2-3搜索頁面返回的結(jié)果按照圖4.1.2-4排列：圖4.1.2-4搜索返回頁面在這里用戶可以點擊右下角的星收藏該圖片，收藏后顯示在我的圖集里。4.隨便看看隨便看看模塊顯示用戶上傳的最新圖片以及讓這些圖片畫廊式滾動播放。圖4.1.2-5隨便看看頁面其中滾動播放可以下載，自動播放，鼠標(biāo)滑輪翻頁等功能。5.我的圖集注冊用戶可以在這里查看自己收藏的圖片以及上傳的圖片。如果不喜歡這張圖的話，可以從我的圖集中刪掉這張圖。刪圖只是接觸用戶和圖片對應(yīng)的關(guān)系，數(shù)據(jù)庫的圖片存儲還是保存這張圖的，方便其他用戶找到。點擊上傳按鈕用戶可以對圖片進展上傳操作。見圖4.1.2-7。圖4.1.2-6上傳頁面如以以下圖，頁面會顯示用戶ID，用戶相冊里有多少張圖，上傳按鈕，以及圖片。圖片左下角的’X’點擊后可以取消收藏。具體見圖4.1.2-7。圖4.1.2-7搜索返回頁面4.1.3View層的實現(xiàn)Django中將視圖定義為一種函數(shù)，我們稱其為視圖函數(shù)〔viewfunction)。當(dāng)Django框架接收到請求的時候，從定義的urlpatterns中尋找url表達式進展匹配，一旦找到匹配的項，就將Request以及匹配到的其他字符串作為參數(shù)，調(diào)用找到的視圖函數(shù)，然后根據(jù)視圖函數(shù)返回的Response對象進展響應(yīng)。所以視圖函數(shù)應(yīng)該至少接收一個django..Request對象作為參數(shù)，并返回django..Response。Views的函數(shù)調(diào)用service文件中的Python文件。如下：|____service/|______init__.py|____color_service.py|____image_service.py|____tag_service.py|____user_service.py比方image_service.py中定義了各種處理圖像的函數(shù)還有從數(shù)據(jù)庫中取出的關(guān)于圖像的數(shù)據(jù)。4.2系統(tǒng)功能模塊實現(xiàn)4.2.1用戶模塊1.用戶登錄用戶輸入用戶名和密碼提交登錄憑證，由views中的login函數(shù)進展處理，登錄成功后授予注冊用戶角色直接跳轉(zhuǎn)到主頁，否則轉(zhuǎn)向login.jsp由給出的錯誤信息改正輸入再次提交。其流程圖如圖4.2.1-1所示：圖4.2.1-1用戶登錄流程圖用戶注冊用戶在register.html上輸入數(shù)據(jù)，點擊注冊，后臺交給register的view函數(shù)，函數(shù)驗證其合法性之后存入后臺。然后自動登錄，跳轉(zhuǎn)到網(wǎng)站首頁。其流程圖如圖4.2.1-2所示：圖4.2.1-2用戶注冊流程圖3.上傳用戶查看我的圖集的右上角有上傳按鈕，必須是注冊用戶才能進展上傳。點擊上傳，進入upload.html頁面，其流程圖如圖4.2.1-3所示：圖4.2.1-3用戶上傳圖片圖片上傳之后需要有一系列的操作，比方存入后臺，分析其色系，生成縮略圖，增加用戶和圖片的關(guān)系，保存圖片大小等，具體見圖4.2.1-4.圖4.2.1-4上傳后續(xù)操作4.用戶收藏刪除 用戶可以在搜索出來的圖片點擊星星進展收藏。如果原來已經(jīng)收藏過，點擊后是刪除收藏。同樣的，在我的圖集中，用戶可以點擊叉號進展刪除收藏操作。具體流程圖見4.2.1-5。圖4.2.1-5收藏/刪除操作4.2.2搜索模塊用戶點擊search.html出現(xiàn)三種搜索