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