【文章內(nèi)容簡(jiǎn)介】 小。 GitHub 上這樣介紹 bootstrap：簡(jiǎn)單靈活可用于架構(gòu)流行的用戶界面和交互接口的 html,css,javascript 工具集。基于 html css3 的 bootstrap，具有大量的誘人特性 ：友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計(jì)， 12 列格網(wǎng)，樣式向?qū)臋n，自定義 JQuery 插件，完整的類(lèi)庫(kù)，基于 Less 等。 例如，要顯示下面的格式的話，只需要引入 bootstrap 的 CSS，調(diào)用對(duì)應(yīng)的類(lèi)即可。見(jiàn)圖 。 圖 bootstrap演示 12 代碼如下： form fieldset legendLegend/legend labelLabel name/label input type=text placeholder=Type something… span class=helpblockExample blocklevel help text here./span label class=checkbox input type=checkbox Check me out /label button type=submit class=btnSubmit/button /fieldset /form MySQL 數(shù)據(jù)庫(kù)的選用 鑒于 MySQL 的一系列特性以及需求選用了 MySQL 作為本項(xiàng)目的數(shù)據(jù)庫(kù)。特性如下： ? 使用 C和 C++編寫(xiě)，并使用了多種編譯器進(jìn)行測(cè)試，保證源代碼的可移植性。 ? 支持 AIX、 BSDi、 FreeBSD、 HPUX、 Linux、 Mac OS、 Novell Netware、 NetBSD、OpenBSD、 OS/2 Wrap、 Solaris、 SunOS、 Windows 等多種操作系統(tǒng)。 ? 為多種編程語(yǔ)言提供了 API。這些編程語(yǔ)言包括 C、 C++、 C、 Delphi、 Eiffel、Java、 Perl、 PHP、 Python、 Ruby 和 Tcl等。 ? 支持多線程，充分利用 CPU 資源，支持多用戶。 ? 優(yōu)化的 SQL 查詢算法，有效地提高查詢速度。 ? 既能夠作為一個(gè)單獨(dú)的應(yīng)用程序應(yīng)用在客戶端服務(wù)器網(wǎng)絡(luò)環(huán)境中，也能夠作為一個(gè)庫(kù)而嵌入到其他的軟件中。 ? 提供多語(yǔ)言支持，常見(jiàn)的編碼如中文的 GB 231 BIG5，日文的 Shift_JIS等都可以用作數(shù)據(jù)表名和數(shù)據(jù)列名。 ? 提供 TCP/IP、 ODBC 和 JDBC 等多種數(shù)據(jù)庫(kù)連接途徑。 ? 提供用于管理、檢查、優(yōu)化數(shù)據(jù)庫(kù)操作的管理工具。 ? 可以處理?yè)碛猩锨f(wàn)條記錄的大型數(shù)據(jù)庫(kù)。 13 技術(shù)可行性綜述 綜上所述，這些成熟的技術(shù)和設(shè)計(jì)思想為本系統(tǒng)的開(kāi)發(fā)提供了理論基礎(chǔ)，計(jì)算機(jī)基礎(chǔ)設(shè)施的更新?lián)Q代也為開(kāi)發(fā)系統(tǒng)提供了硬件基礎(chǔ)。故本系統(tǒng)可以實(shí)現(xiàn)。 時(shí)間可行性 本系統(tǒng)所用到的技術(shù)都是本人現(xiàn)學(xué)的，其中 Python 是在寒假期間學(xué)習(xí)的，參考書(shū)目為《 Python 基礎(chǔ)教程》。因?yàn)榇髮W(xué)期間接觸過(guò) JSP 編程的 MVC 模式，所以對(duì)于 Django 很容易上手。 計(jì)劃如下： 學(xué)習(xí) Python 學(xué)習(xí) Django 并進(jìn)行項(xiàng)目設(shè)計(jì) 進(jìn)一步根據(jù)所學(xué)內(nèi)容進(jìn)行詳細(xì)設(shè)計(jì) 編寫(xiě)代碼 撰寫(xiě)論文 系統(tǒng)需求分析 系統(tǒng)開(kāi)發(fā)運(yùn)行環(huán)境 鑒于系統(tǒng)的開(kāi)發(fā)語(yǔ)言和數(shù)據(jù)庫(kù) ,采用如下的開(kāi)發(fā)環(huán)境和工具： 開(kāi)發(fā)環(huán)境： Windows 7， Python ， Django 開(kāi)發(fā)語(yǔ)言 : Python 數(shù) 據(jù) 庫(kù) : Mysql 開(kāi)發(fā)工具 : JetBrains PyCharm 系統(tǒng)功能概述 本網(wǎng)站由用戶模塊，搜索模塊和隨便看看模塊三部分組成。其中搜索模塊是核心模塊，具有很多功能。 14 鑒于本系統(tǒng)的性質(zhì)，系統(tǒng)應(yīng)實(shí)現(xiàn)以下功能： 1. 用戶功能實(shí)現(xiàn) (1)用戶的注冊(cè) (2)用戶的登錄 (3)用戶圖片收藏 (4)用戶收藏圖片刪除 (5)用戶圖片的上傳 2. 搜索功能的實(shí)現(xiàn) (1)按圖片關(guān)鍵字搜索 (2)按色系搜索 (3)按圖片尺寸搜索 3. 隨便看看功能的實(shí)現(xiàn) (1)顯示圖片 (2)圖片的畫(huà)廊式播放 系統(tǒng)數(shù)據(jù)流圖 頂層數(shù)據(jù)流圖如圖 ： 游 客 注 冊(cè) 用 戶申 請(qǐng) 注 冊(cè)注 冊(cè) 信 息隨 便 看 看搜 索 圖 片 上 傳搜 索 結(jié) 果收 藏 圖 片刪 除 收 藏搜 索 圖 片搜 索 結(jié) 果I m a g e S e a r c h 網(wǎng) 站圖 頂層數(shù)據(jù)流圖 15 系統(tǒng)總體結(jié)構(gòu)分析結(jié)論 通過(guò)對(duì)系統(tǒng)采用技術(shù)、數(shù)據(jù)庫(kù)選擇的可行性分析和對(duì)系統(tǒng)的需求分析，完成了前期對(duì)系統(tǒng)模塊及功能的劃分。在此基礎(chǔ)上，可以對(duì)系統(tǒng)數(shù)據(jù)庫(kù)和功能模塊進(jìn)行概要設(shè)計(jì)。 16 第三章 系統(tǒng)設(shè)計(jì) 在前期的系統(tǒng)結(jié)構(gòu)分析基礎(chǔ)上，對(duì)系統(tǒng)進(jìn)行概要設(shè)計(jì)。 數(shù)據(jù)庫(kù)設(shè)計(jì) 數(shù)據(jù)庫(kù)設(shè)計(jì)是指對(duì)于一個(gè)給定的應(yīng)用環(huán)境 ， 構(gòu)造最優(yōu)的數(shù)據(jù)庫(kù)模式 ,建立數(shù)據(jù)庫(kù)及其應(yīng)用系統(tǒng) ， 使之能夠有效地存儲(chǔ)數(shù)據(jù) ， 滿足各種用戶的應(yīng)用需求 (信息要求和處理要求 )。 數(shù)據(jù)模型（ ER 圖） 數(shù)據(jù)模型 是 是數(shù)據(jù)特征的抽象，從抽象層次上描述了系統(tǒng)的靜態(tài)特征、動(dòng)態(tài) 行為和 約束條件，為數(shù)據(jù)庫(kù)系統(tǒng)的信息表與操作提供一個(gè)抽象的框架。描述了數(shù) 據(jù)結(jié)構(gòu)、數(shù)據(jù)操作及數(shù)據(jù)約束。 通常，使用實(shí)體 聯(lián)系圖（簡(jiǎn)稱(chēng)為 ER 圖）來(lái)建立數(shù)據(jù)模型。 ER 圖中包含了實(shí)體（即數(shù)據(jù)對(duì)象）、關(guān)系和屬性 3種基本成分，通常用矩形框代表實(shí)體，用連接相關(guān)實(shí)體的菱形框表示關(guān)系，用橢圓形或圓角矩形表示實(shí)體（或關(guān)系）的屬性，并用直線把實(shí)體（或關(guān)系）與其屬性連接起來(lái)。 本系統(tǒng)的 ER圖： 用 戶搜 索圖 片上 傳下 載游 客收 藏1MNM圖 冊(cè)查 看1刪 除N圖 系統(tǒng) ER圖 17 數(shù)據(jù)庫(kù)表及關(guān)系建立 根據(jù)以上步驟建立數(shù)據(jù)庫(kù) imageSearch，依次建立下列表結(jié)構(gòu)： 1. 用戶信息表使用 Django 自帶的用戶系統(tǒng)表 auth_user 2. 圖片表 image 3. 用戶和圖片關(guān)系表 user_image a) 用戶和圖片是多對(duì)多的關(guān)系 b) 可以通過(guò)用戶收藏，刪除收藏而修改 4. 標(biāo)簽表 tag a) 標(biāo)簽和圖片是多對(duì)多的關(guān)系 5. 顏色表 color a) 此表固定 6. 顏色圖片關(guān)系表 color_image a) 圖片和顏色是一對(duì)多的關(guān)系 b) 每張圖片可以對(duì)應(yīng)多個(gè)色系 7. 尺寸表 size a) 圖片和尺寸是一對(duì)一的關(guān)系，但是尺寸不存入尺寸中，存入 image表中 b) 此表固定 圖 數(shù)據(jù)庫(kù)關(guān)系圖 18 圖 Django自帶數(shù)據(jù)庫(kù)模型圖 詳細(xì)數(shù)據(jù)庫(kù)結(jié)構(gòu)設(shè)計(jì) 1. 用戶信息表 用戶信息表中存放的是用戶的基本信息，包括用戶名、密碼，其中密碼是 Django 自帶的 PBKDF2 加密方法加密。 表 31 auth_user 字段名稱(chēng) 數(shù)據(jù)類(lèi)型 長(zhǎng)度 允許空 字段描述 id int 主鍵 username varchar 50 用戶名 (郵箱） password varchar 30 用戶密碼 19 2. 圖片表 存放圖片的 ID 以及圖片描述。 表 32 image 字段名稱(chēng) 數(shù)據(jù)類(lèi)型 長(zhǎng)度 允許空 字段描述 id int 主鍵 date date 加入時(shí)間 description text 圖片描述 width int 圖片寬度 height int 圖片高度 3. 用戶圖片關(guān)系表 由于用戶和圖片是多對(duì)多的關(guān)系，所以表中存放圖片和用戶的關(guān)系映射。 表 33 uaer_image 字段名稱(chēng) 數(shù)據(jù)類(lèi)型 長(zhǎng)度 允許空 字段描述 id int 主鍵 user_id int 用戶 id image_id int 圖片 id 4. 標(biāo)簽表 描述標(biāo)簽的名字和該標(biāo)簽下圖片的數(shù)量。 表 34 tag 字段名稱(chēng) 數(shù)據(jù)類(lèi)型 長(zhǎng)度 允許空 字段描述 id int 主鍵 name varchar 30 標(biāo)簽名字 frequency int 該標(biāo)簽下圖片數(shù)量 5. 顏色表 色系搜索的時(shí)候使用到的顏色，表中存儲(chǔ)顏色的中文名，英文名以及ID 號(hào)。 表 35 color 字段名稱(chēng) 數(shù)據(jù)類(lèi)型 長(zhǎng)度 允許空 字段描述 id int 主鍵 name varchar 30 顏色中文名字 enname varchar 30 顏色英文名稱(chēng) 20 6. 圖片與色系的關(guān)系表 由于圖片與色系也是采用一對(duì)多的關(guān)系，所以這里存放圖片以及對(duì)應(yīng)色系的關(guān)系映射。另外還存儲(chǔ)了該圖片在此色系下所占比重。因?yàn)橐粡垐D片計(jì)算出來(lái)的色系有差別，所以有個(gè)比重的話顯示效果會(huì)更好。 表 36 color_image 字段名稱(chēng) 數(shù)據(jù)類(lèi)型 長(zhǎng)度 允許空 字段描述 id int 主鍵 color_id int 標(biāo)簽 ID image_id int 圖片 ID value double 顏色值的比重 7. 尺寸表 因?yàn)橛脩舨樵兂叽绲臅r(shí)候往往是有目的的，比如想查詢壁紙，壁紙的大小都是固定的，所以這個(gè)表示固定的寫(xiě)入一些常見(jiàn)的壁紙大小，方便生成標(biāo)簽，用戶可以直接點(diǎn)擊查找。 表 37 size 字段名稱(chēng) 數(shù)據(jù)類(lèi)型 長(zhǎng)度 允許空 字段描述 id int 主鍵 width int 寬度 height int 高度 系統(tǒng)概要設(shè)計(jì) 根據(jù)需求分析的結(jié)果，對(duì)系統(tǒng)進(jìn)行具體的實(shí)現(xiàn)方案的設(shè)計(jì)。 功能模塊設(shè)計(jì) 由系統(tǒng)功能描述，可將本系統(tǒng)的功能 分為四大模塊，分別是用戶模塊、隨便看看模塊、搜索模塊。本系統(tǒng)的功能層次圖如圖 所示： 21 I m a g e S e a r c h 網(wǎng) 站按圖片關(guān)鍵字搜索用 戶 模 塊 搜 索 模 塊按圖片色系搜索按圖片大小搜索隨 便 看 看顯示最近上傳的圖片登陸注冊(cè)上傳查看我的圖集刪除圖集圖片收藏圖片圖 系統(tǒng)功能層次圖 本系統(tǒng)實(shí)現(xiàn)了如下功能： 1. 用戶模塊 (1)用戶注冊(cè)：非網(wǎng)站注冊(cè)用戶可以通過(guò)此模塊注冊(cè)成為本網(wǎng)站注冊(cè)用戶，然后享用注冊(cè)用戶的權(quán)力。 (2)用戶登錄：注冊(cè)用戶通過(guò)此模塊登錄到網(wǎng)站，登錄后便可使用所有注冊(cè)用戶功能。 (3)圖片上傳：注冊(cè)用戶可以通過(guò)此模塊上傳圖片。 (4)收藏圖片：注冊(cè)用戶可以通過(guò)此模塊點(diǎn)擊自己喜歡圖片收藏到自 己的圖集里。 (5)刪除圖片：注冊(cè)用戶可以通過(guò)此模塊從自己的圖集中刪除不喜歡的圖片。 (6)查看我的圖集：注冊(cè)用戶可以通過(guò)此模塊查看自己喜歡過(guò)的圖片。 2. 隨便看看 (1)顯示圖片：注冊(cè)用戶和游客均可點(diǎn)擊此模塊顯示最近上傳的一百?gòu)垐D片。 22 3. 搜索模塊 (1)按圖片關(guān)鍵字搜索：注冊(cè)用戶和游客均可點(diǎn)擊此模塊輸入關(guān)鍵字搜索該關(guān)鍵字下對(duì)應(yīng)的圖片。 (2)按色系搜索：注冊(cè)用戶和游客均可點(diǎn)擊此模塊按對(duì)應(yīng)的顏色搜索圖片，并將其顯示出來(lái)。 (3)按尺寸搜索：注冊(cè)用戶和游客均可點(diǎn)擊此模塊對(duì)應(yīng)的尺寸搜索圖片，并將其顯示出 來(lái)。 系統(tǒng)界面設(shè)計(jì) 界面 設(shè)計(jì)的實(shí)現(xiàn)可以分為兩個(gè)部分 。 第一部分為站點(diǎn)的規(guī)劃及草圖的繪制，這一部分可以在紙上完成。第二部分為網(wǎng)頁(yè)的制作，這一過(guò)程是在計(jì)算機(jī)上完成的 。 設(shè)計(jì)首頁(yè)的第一步是設(shè)計(jì)版面布局。 由于是圖片網(wǎng)站，所以首頁(yè)采取了畫(huà)廊似的圖片，給人以宏大的感覺(jué)。 設(shè)計(jì)要遵循五個(gè)大的原則 ： 統(tǒng)一、連貫、分割、對(duì)比及和諧。 統(tǒng)一，是指設(shè)計(jì)作品的整體性，一致性。設(shè)計(jì)作品的整體效果是至關(guān)重要的 ， 在設(shè)計(jì)中切勿將各組成部分孤立分散。 連貫，是指要注意頁(yè)面的相互關(guān)系。設(shè)計(jì)中應(yīng)利用各組成部分在內(nèi)容上的內(nèi)在聯(lián)系和表現(xiàn)形式 上的相互呼應(yīng)，實(shí)現(xiàn)視覺(jué)上和心理上的連貫，使整個(gè)頁(yè)面的各個(gè)部分融洽。 分割，是指將頁(yè)面分成若干小塊，小塊之間有視覺(jué)上的不同。 對(duì)比就是通過(guò)矛盾和沖突，使設(shè)計(jì)更加富有生氣。在使用對(duì)比的時(shí)候應(yīng)慎重，對(duì)比過(guò)強(qiáng)容易破壞美感，影響統(tǒng)一。 和諧是指整個(gè)頁(yè)面符合美的法則 ， 渾然一體。 本系統(tǒng)采用 Bootstrap 風(fēng)格的界面設(shè)計(jì)，簡(jiǎn)單大方。 23 第四章 系統(tǒng)的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn) 詳細(xì)設(shè)計(jì)階段的根本目標(biāo)是確定應(yīng)該怎樣具體地實(shí)現(xiàn)所要求的系統(tǒng)。經(jīng)過(guò)這個(gè)階段的設(shè)計(jì)工作，應(yīng)該得出對(duì)目標(biāo)系統(tǒng)的精確描述，從而在編碼實(shí)現(xiàn)階段可以把這個(gè)描述直接翻譯成 用某種程序設(shè)計(jì)語(yǔ)言書(shū)寫(xiě)的程序。 系統(tǒng)框架實(shí)現(xiàn) 在本系統(tǒng)中，我們采用 Django 技術(shù)進(jìn)行開(kāi)發(fā)。 Django 也是一