計算機畢業(yè)論文----基于bs模式的智能數字相冊的實現

1、<p><b>　　摘 要</b></p><p>　　隨著計算機和數碼設備的普及，數字圖片資源已成為我們日常生活中的一個重要部分，對于日益增多的圖片資源，如何更好的存儲和有效檢索已成為人們面臨的一個新的課題，于是電子相冊應運而生。該系統(tǒng)和一般的數字相冊系統(tǒng)相比，更具有一定的智能性。例如：當用戶需要某幅相片時，可以通過簡單的人機交互，或者根據用戶的使用記錄，自動推薦出用戶可能需要

2、的圖像。</p><p>　　本文介紹基于.NET平臺開發(fā)的基于B/S模式的智能數字相冊的具體實現。系統(tǒng)的主要開發(fā)語言為C#，應用了XML、Ajax等技術，結合了目錄管理與SQL Server數據庫管理。同時采用基于文件方式的圖像存儲，即圖像文件以文件形式存放于指定的計算機目錄下，在數據庫表中只反映圖像數據文件的存儲路徑及各種屬性，這種存儲方式縮小了數據庫的容量，對圖像的操作和使用都十分方便。對于數字相片的錄入，

3、檢索等功能的實現，系統(tǒng)采用了當今流行的Ajax技術，其改變了傳統(tǒng)的客戶端與服務器端交互的方式，使得用戶無需等待數據刷新，即可執(zhí)行其他的操作，所有的數據處理都在后臺進行，提高了用戶體驗。</p><p>　　系統(tǒng)的主要功能包括：用戶登錄與用戶管理、圖像的導入和顯示，根據關鍵字檢索圖像，根據圖像的分類瀏覽相冊及改變相冊的風格。</p><p>　　關鍵詞： Ajax； .NET； 電子相冊&l

4、t;/p><p><b>　　Abstract</b></p><p>　　With the popularity of computers and numeral devices, the resources of digital photos have become important parts of our daily life. As for the growi

5、ng number of images, how to keep and retrieval them effectively is the facing problem. As a result, e-album came into being. Compared with other e-albums, this new system attend to be more intellect. For example, if you

6、 want to find out one picture from the album, you could choose to contact with your computer. Also, you could wait the system to re</p><p>　　This paper will introduce you the intelligent e-album, which is de

7、veloped with B/S model and is based on .NET platform .The e-album is developed in C# language, applied with XML and Ajax technology, combined with the management of catalogue and SQL Server. Pictures in the e-album are s

8、toraged based on files, that is pictures are storaged at the given catalogue as files not images. At the same time, only the storage location and attributes of pictures are written in the database, which makes the </p

9、><p>　　The e-album includes the login and management of users, the import and display of images, searching images according to some key words. Looking though pictures of diffirent catalogy is also included.<

10、/p><p>　　Key words: Ajax; .NET; E-album</p><p><b>　　目 錄</b></p><p><b>　　1 緒論1</b></p><p>　　1.1 研究的意義及目的1</p><p>　　1.2 國內外文獻綜述

11、1</p><p>　　1.3 研究內容1</p><p><b>　　2 相關技術2</b></p><p>　　2.1 Ajax技術概述2</p><p>　　2.1.1 Ajax技術的含義2</p><p>　　2.1.2 Ajax技術的特點2</p>&l

12、t;p>　　2.1.3 Ajax開發(fā)的關鍵技術2</p><p>　　2.2 .NET Framework4</p><p>　　2.2.1 .NET框架結構4</p><p>　　2.2.2 ASP.NET技術4</p><p>　　2.2.3 ASP.NET命名空間5</p><p>　　

13、2.2.4 ADO.NET技術6</p><p>　　2.3 本章小結8</p><p>　　3 智能數字相冊系統(tǒng)的設計9</p><p>　　3.1 總的設計目標9</p><p>　　3.2 需要解決的重點問題9</p><p>　　3.3 系統(tǒng)數據結構的設計10</p>&l

14、t;p>　　3.4 系統(tǒng)功能設計10</p><p>　　3.4.1 圖片管理11</p><p>　　3.4.2 圖片檢索12</p><p>　　3.4.3 圖片瀏覽16</p><p>　　3.5 本章小結19</p><p>　　4系統(tǒng)實現與測試20</p><

15、p>　　4.1 系統(tǒng)開發(fā)環(huán)境與工具20</p><p>　　4.1.1 Visual Studio 200820</p><p>　　4.1.2 SQL Server 200521</p><p>　　4.2 系統(tǒng)運行環(huán)境21</p><p>　　4.3 實驗結果22</p><p>　　4.

16、3.1 用戶登錄22</p><p>　　4.3.2 用戶注冊22</p><p>　　4.3.3 更改用戶信息23</p><p>　　4.3.4 瀏覽相片24</p><p>　　4.3.5檢索相片24</p><p>　　4.3.6 上傳相片26</p><p>　

17、　4.4 本章小結26</p><p><b>　　5 結論27</b></p><p>　　5.1 總結27</p><p>　　5.2 展望27</p><p><b>　　參考文獻28</b></p><p><b>　　致 謝29<

18、/b></p><p><b>　　1 緒論</b></p><p>　　1.1 研究的意義及目的</p><p>　　隨著人們生活水平的逐步提高，旅游成了大家必不可少的放松方式，每當筆者走到一個美麗的景點，就會忍不住拿起數碼相機照上幾張留做回憶。雖然照片最后會存入到自己的電腦里，但是時間一長、照片一多，這些有著勾起回憶的資料，就會顯

19、得雜亂無章，即不方便欣賞，也不方便管理。而電子相冊具有欣賞、傳播方便，界面美觀等特點，可以很好的管理所存入的照片，不失為欣賞、保存照片的最佳工具。</p><p>　　1.2 國內外文獻綜述</p><p>　　智能數字相冊是一種應用性較強的圖像管理軟件，也是時下最流行的一種網絡元素，它可以應該在很多的領域，例如時下最流行的空間及博客就應用到了這一技術，而且受到大多數網友的認可和追捧。其

20、以靜態(tài)照片為素材(獲得源方式為掃描儀掃描、數碼相機拍攝等)，配合動感的背景、前景和字幕等視頻處理的特殊效果，配上音樂就可制作成電子相冊。</p><p>　　制作好的電子相冊可以在電腦上，各類影碟機上，以及手機和MP4里觀看，這是數字相冊技術發(fā)展到今天的一個新的突破，即不再像傳統(tǒng)那樣，只能在電腦上或在影碟機上觀看了。并且還可以通過手機將自己的個性化MTV發(fā)送給遠方的親朋好友們分享。當然，如果考慮到長期保存的話，制

21、作成電子相冊光盤那是最好的選擇，它可保存100多年之久，標準VCD、SVCD、DVD格式，兼容性好，通過影碟機即可與家人、朋友、客戶觀賞，若保存在硬盤上，也便于隨時調閱、欣賞，永久保存。</p><p><b>　　1.3 研究內容</b></p><p>　　該系統(tǒng)比一般的數字相冊系統(tǒng)而言，更具有一定的智能性，例如：當用戶需要某幅相片時，可以通過簡單的人機交互，或

22、者根據用戶使用記錄，自動推薦出用戶可能需要的圖像。該智能數字相冊系統(tǒng)是一種基于B/S架構的系統(tǒng)，它采用ASP.NET開發(fā)，采用Ajax技術縮短了網絡的延遲，節(jié)約了用戶的時間。</p><p>　　本系統(tǒng)所研究的是從數字相冊的管理到相冊的生成等一系列的問題，大致分為：</p><p>　　圖像的導入和顯示、數據庫索引的建立、根據關鍵字檢索圖像、圖像的分類等。</p><p

23、><b>　　2 相關技術</b></p><p>　　2.1 Ajax技術概述</p><p>　　2.1.1 Ajax技術的含義</p><p>　　Ajax 技術是Asynchronous JavaScript And XML（異步 JavaScript和 XML）的英文縮寫，它不是一種單獨的技術，而是一種融合了多項現有的成熟

24、的技術集合。這種技術集合發(fā)揮了其中每一種技術的獨特之處，糅合起來便形成了一種功能強大的新技術[1]。Ajax使用通信技術發(fā)送和接收對服務器的異步請求/響應，然后利用顯示技術處理響應。Ajax技術主要是一種客戶端技術，是一種以瀏覽器為中心的開發(fā)框架，是一種新的Web體系結構，是Web 2.0的核心技術[2]。Ajax的工作原理相當于在客戶和服務器之間加了—個中間層，使用戶操作與服務器響應異步化。這樣把以前的一些服務器負擔的工作轉嫁到客戶端

25、，利于客戶端閑置的處理能力來處理，減輕服務器和帶寬的負擔。</p><p>　　2.1.2 Ajax技術的特點</p><p>　　Ajax技術的核心理念在于使用XMLHttpRequest對象發(fā)送異步請求。它使XHTML和 CSS實現基于各種標準的頁面呈現，使用文檔對象模型(Document Object Model)實現動態(tài)顯示和交互，使用XML和XSLT操作數據和實現數據交換，使用

26、XMLHttpRequest實現異步數據檢索和讀取，最后使用JavaScript將所有數據進行綁定和處理。與傳統(tǒng)Web頁面需刷新的“瘦客戶端”不同，Ajax提供的是無需完全刷新頁面、近乎桌面應用、豐富多彩的“富客戶端”用戶體驗。</p><p>　　2.1.3 Ajax開發(fā)的關鍵技術</p><p>　　Ajax技術實際上是由JavaScript、XHTML、CSS、DOM模型、XML、

27、XSLT和XMLHttpRequest對象等七種不同技術組成的一種技術集合和綜合應用。Ajax技術開發(fā)者可以使用XHTML和CSS實現數據信息的統(tǒng)一化、標準化呈現，使用DOM模型實現瀏覽器端豐富的動態(tài)顯示效果以及與服務器端的交互，使用XML和XSLT進行瀏覽器端和服務器端的數據信息交換與處理[3]，使用 XMLHttpRequest對象進行瀏覽器端和服務器端的異步數據讀取，使用JavaScript實現對所有數據進行整合。XMLHttpR

28、equest對象和JavaScript是實現Ajax應用必不可少的核心技術，其它五項技術在每一個Ajax應用中不一定都會用到，主要依據開發(fā)的實際需要而定。</p><p>　　下面介紹本系統(tǒng)中應用到的Ajax開發(fā)的關鍵技術：JavaScript，XMLHttpRequest對象以及CSS層疊樣式表。</p><p>　　JavaScript是一種基于對象(object)和事件驅動(Even

29、t Driven)并具有安全性能的、可以與HTML標記語言混合使用的解釋性編程語言，其源代碼在發(fā)往客戶端執(zhí)行之前不需經過編譯，而是將文本格式的字符代碼發(fā)送給客戶端，由瀏覽器解釋執(zhí)行，用它編寫的程序可以在瀏覽器的支持下實現跨平臺運行[4]。</p><p>　　JavaScript在編程風格上主要具有如下特征：</p><p>　　(1) 引入for和if等控制語句使程序效率化；</p

30、><p>　　(2) 目標模塊(Document、Math、Date和文字列模塊等)的導入使程序模塊化；</p><p>　　(3) 網頁、Frame和Window的管理增強了網頁設計的技巧；</p><p>　　(4) OnClick、OnChange等事件處理的實現使網頁可以在客戶端作動態(tài)響應；</p><p>　　(5) Timer處理的實

31、現可以實現動態(tài)網頁；</p><p>　　(6) 對客戶端數據輸入輸出對話框的實現；</p><p>　　(7) Image目標模塊對應的圖像動態(tài)操作。</p><p>　　在Ajax中，JavaScript已經從默默無聞的后臺狀態(tài)完全轉移到了前臺，發(fā)揮著巨大的作用。JavaScript是整個Ajax的核心部分，它使開發(fā)人員能夠運用編程語言來控制瀏覽器客戶端的行為。

32、事實上Ajax的其它組成部分都提供了JavaScript的編程接口，例如，DOM模型將文檔結點表現為對象，并定義了這些對象具有的方法和屬性；CSS也可以作為節(jié)點的一個屬性由JavaScript進行控制。JavaScript腳本充分發(fā)揮了其腳本語言的特點，使用代碼控制著DOM模型、XML、CSS和XHTML等技術的行為，因此可以將JavaScript看作是Ajax中的黏合劑，它使Ajax的各個組成部分協同工作，一起完成需要實現的功能。&l

33、t;/p><p>　　XMLHttpRequest對象是瀏覽器中已定義好的對象,它是Ajax技術的核心組成部分，JavaScript通過它和服務器之間進行異步通信，并通過它來解析從服務器返回的XML文件。</p><p>　　Ajax應用的特點之一就是可以通過XMLHttpRequest對象發(fā)送請求向服務器傳輸或者讀寫數據，可以像桌面應用程序一樣，只同服務器進行數據層面的交換，而無需刷新頁面，

34、也不用每次都將數據處理的工作提交給服務器來做。這樣既減輕了服務器的負擔又加快了響應速度、縮短了用戶等待時間。</p><p>　　需要注意的是，在定義XMLHttpRequest對象時，IE瀏覽器和其它瀏覽器的定義方式有所不同。</p><p>　　XMLHttpRequest對象是通信的基礎。是Ajax技術開發(fā)的關鍵，它能夠提供異步通信來完成在很多傳統(tǒng)Web開發(fā)中無法完成的工作。XMLH

35、ttpRequest對象由JavaScript創(chuàng)建并使用，客戶端可以從服務器端獲取需要的信息，通過與DOM和CSS的結合，實現局部刷新；同時還可以通過XMLHttpRequest對象異步提交信息，將輸入的數據在后臺提交到服務器而無需刷新。</p><p>　　CSS層疊樣式表是為了彌補HTML超文本標記語言在格式修飾中的不足，同時也是為了能夠實現頁面格式的批量動態(tài)更新[5]。為了進一步豐富頁面的動態(tài)效果，通過使用

36、腳本語言與CSS結合，動態(tài)控制頁面元素的位置、色彩等屬性。</p><p>　　CSS提供了獨立的手段來控制頁面的表現[6]，因此可以讓Ajax開發(fā)人員更專注于開發(fā)應用邏輯的相關代碼，他們只需提供合理的文檔結構即可，而不必關注表現，這在一定程度上簡化了Ajax的開發(fā)。同時，CSS還有助于結合Ajax完成一些特殊的功能，例如，要實現樹狀菜單的折疊功能，一種方法是使用DOM模型在展開時添加所有子結點，折疊時移除所有子

37、結點。但這顯然是效率低的做法，使用CSS可以讓其變得非常簡單，只要通過CSS設置子結點是否顯示即可。</p><p>　　2.2 .NET Framework</p><p>　　微軟公司將.NET Framework(框架)定義為：支持生成和運行下一代應用程序和XML Web Services的內部Windows組件[7]。.NET框架旨在實現下列目標：提供一個統(tǒng)一的面向對象的開發(fā)環(huán)境

38、。這個開發(fā)環(huán)境支持本地代碼的開發(fā)，遠程對象程序的開發(fā)，或者在本地執(zhí)行但分布在Internet上的各種應用程序的開發(fā)；更好的解決開發(fā)應用的版本和部署版本之間的沖突；通過框架的解決方案，可以調用未知的或第三方的代碼，實現已有系統(tǒng)的移植以及代碼的可重復使用；使開發(fā)人員在開發(fā)各種不同類型應用的時候，有一樣的開發(fā)體驗，如基于Windows的應用程序和基于Web的應用程序；按照行業(yè)標準生成所有通信，以保證基于.NET Framework的代碼可與任

39、何其他代碼集成。</p><p>　　2.2.1 .NET框架結構</p><p>　　.NET Framework主要由兩個重要的組件構成：公共語言運行庫CLR和.NET類庫。</p><p>　　公共語言運行庫是.NET框架的基礎。可以將運行庫看做是一個在執(zhí)行時管理代碼的代理，它提供內存管理、線程管理和遠程處理等核心服務，并且強制實施嚴格的類型安全，可提高安全

40、性和可靠性的其他形式的代碼準確性。以運行庫為目標的代碼稱為托管代碼，而不以運行庫為目標的代碼稱為非托管代碼[8]。</p><p>　　.NET框架的另一個主要組件是類庫，它是一個綜合性的面向對象的可重用類型集合，可以使用它開發(fā)多種應用程序，這些應用程序包括傳統(tǒng)的命令行或圖形用戶界面應用程序，也包括基于ASP.NET所提供的應用程序，如Web窗體和XML Web Services。</p><

41、p>　　2.2.2 ASP.NET技術</p><p>　　ASP.NET 技術是.NET框架提供的一個統(tǒng)一Web開發(fā)模型，它使用盡可能少的代碼生成企業(yè)級Web應用程序所必須的各種服務。ASP.NET是.NET框架中的一個重要組成部分。當編寫ASP.NET應用程序的代碼時，可以訪問.NET Framework中的類，也可以使用公共語言運行庫(CLR)兼容的任何語言來編寫應用程序的代碼。</p>

42、<p>　　可以使用ASP.NET網頁作為Web應用程序的用戶界面及后臺邏輯部分。ASP.NET網頁在任何時候瀏覽器或者客戶端設備中向用戶提供信息，并使用服務器端代碼來實現應用程序邏輯。ASP.NET有下列特點[9]：</p><p>　　(1) 基于Microsoft ASP.NET技術。在該技術中，服務器上運行的代碼動態(tài)的生成到瀏覽器或客戶端設備的網頁輸出；</p><p&g

43、t;　　(2) 兼容所有瀏覽器或移動設備。ASP.NET網頁自動為樣式、布局等功能呈現正確的、符合瀏覽器的HTML。此外，還可以將ASP.NET網頁設計為在特定瀏覽器（如IE7.0）上運行并利用瀏覽器特定的功能；</p><p>　　(3) 兼容.NET公共語言運行庫所支持的任何語言，其中包括Microsoft Visual Basic、Microsoft Visual C#、Microsoft J#和Micro

44、soft Jscript .NET；</p><p>　　(4) 基于Microsoft .NET Framework平臺，它提供了Framework的所有優(yōu)點，包括托管環(huán)境、類型安全性和繼承；</p><p>　　(5) 具有靈活性，可以在開發(fā)的時候向頁面添加用戶創(chuàng)建的控件和第三方控件。</p><p>　　在ASP.NET網頁中，用戶界面編程分為兩個部分：可視組

45、件和邏輯。可視組件由一個包含靜態(tài)標記（如HTML或 ASP.NET服務器控件或兩者）的文件組成。ASP.NET可視組件用來顯示網頁中的靜態(tài)文本和控件。ASP.NET網頁的邏輯由代碼組成，這些代碼與頁面可視組件進行交互。代碼可以駐留在頁的標記腳本塊或者單獨的類中。如果代碼在單獨的類文件中，則該文件稱為“代碼隱藏”文件。代碼隱藏文件中的代碼可以使用Visual Basic、Visual C#、Visual J# 或 Jscript .NET

46、編寫。</p><p>　　在ASP.NET中，改變了ASP的腳本編程的概念，在Web 應用的開發(fā)中引入的對象化的概念，使得WebForm的開發(fā)更接近于WinForm的開發(fā)，同時ASP.NET中還提供大量的服務端控件。各種控件的使用大大的簡化及規(guī)范了各種功能的實現，使得開發(fā)人員得以從腳本的編寫中擺脫出來，去完善Web頁面的業(yè)務邏輯的開發(fā)。</p><p>　　2.2.3 ASP.NET命

47、名空間</p><p>　　ASP.NET命名空間全部位于System.Web下，它一共包含了七個命名空間。這些命名空間提供了頁面開發(fā)中的頁面對象、緩存、配置、安全以及Web控件等幾方面的類。 </p><p>　　(1) System.Web</p><p>　　該命名空間包含頁面基本操作的類，可以利用這些類完成瀏覽器和Web服務

48、器之間的通信。</p><p>　　(2) System.Web.UI.HtmlControls</p><p>　　該命名空間包含的類用于使用服務器代碼控制HTML元素。</p><p>　　(3) System.Web.UI.WebControls</p><p>　　該命名空間下包含的類可用于在網頁上常見Web 服務器控件。Web控件在

49、服務器上運行，并包含窗體控件（如按鈕和文本框）以及特殊用途的控件（如Calendar控件）。這些類能夠以編程方式控制網頁上的元素。</p><p>　　(4) System.Web.Caching</p><p>　　該命名空間提供用于在服務器上緩存常用資源的類。ASP.NET緩存技術可以將頁面信息存儲到服務器的內存中，無論是數據對對象還是頁面的某些部分，通過使用緩存技術，使得用戶在重新訪

50、問頁面的時候，對這些資源進行重復使用，從而提供了網站的訪問性能。</p><p>　　(5) System.Web.Configuration</p><p>　　該命名空間包含用于配置ASP.NET的類。配置文件是程序中的一個重要組成部分，它用來描述程序中的一些特定屬性，由于這些屬性的變化性比較強，所以可以通過配置文件的更改來使程序的結果發(fā)生變化。在.NET框架中，配置文件就是一個XML

51、文件，開發(fā)人員可以通過配置文件接口來獲取相關的配置文件信息，系統(tǒng)管理員可以通過更改配置文件來改變應用程序的控制策略，使用配置文件最根本的好處是它的靈活性，不會因為修改了配置文件而需要重新編譯程序。</p><p>　　(6) System.Web.Security</p><p>　　該命名空間包含的類用于在Web服務器應用程序中實現ASP.NET安全性。</p><p

52、>　　ASP.NET的安全是指保護網站的安全性，防止非法用戶進行惡意的破壞。對于Web開發(fā)人員來說，保護網站的安全是一個關鍵而又復雜的問題。</p><p>　　(7) System.Web.Services</p><p>　　該命名空間包含可用于ASP.NET創(chuàng)建XML Web Services 的類。</p><p>　　2.2.4 ADO.NET技術

53、</p><p>　　ADO.NET是一組向 .NET程序員公開數據訪問服務的類。ADO.NET為創(chuàng)建分布式數據共享應用程序提供了一組豐富的組件。它提供了對關系數據、XML和應用程序數據的訪問，因此是 .NET Framework中不可缺少的一部分。ADO.NET支持多種開發(fā)需求，包括創(chuàng)建由應用程序、工具、語言或Internet瀏覽器使用的前端數據庫客戶端和中間層業(yè)務對象。</p><p>

54、;　　ADO.NET對Microsoft SQL Server和XML等數據源以及通過OLE DB和XML公開的數據源提供一致的訪問。數據共享使用者應用程序可以使用ADO.NET來連接到這些數據源，并檢索、處理和更新所包含的數據。</p><p>　　ADO.NET通過數據處理將數據訪問分解為多個可以單獨使用或一前一后使用的不連續(xù)組件。ADO.NET包含用于連接到數據庫、執(zhí)行命令和檢索結果的.NET Framew

55、ork 數據提供程序。您可以直接處理檢索到的結果，或將其放入ADO.NET DataSet對象，以便與來自多個源的數據或在層之間進行遠程處理的數據組合在一起，以特殊方式向用戶公開。ADO.NET DataSet對象也可以獨立于.NET Framework數據提供程序使用，以管理應用程序本地的數據或源自XML的數據。</p><p>　　ADO.NET類在System.Data.dll中，并且與System.Xml

56、.dll中的XML類集成。當編譯使用System.Data命名空間的代碼時，請引用System.Data.dll和System.Xml.dll。ADO.NET向編寫托管代碼的開發(fā)人員提供了類似于ActiveX數據對象(ADO)為本機組件對象模塊(COM)開發(fā)人員提供的功能。</p><p>　　(1) ADO.NET設計目標</p><p>　　隨著應用程序開發(fā)的發(fā)展演變，新的應用程序越來

57、越松散地耦合，通?；赪eb應用程序模型。如今，越來越多的應用程序使用XML來編碼要通過網絡連接傳遞的數據。Web應用程序將HTTP用作在層間進行通信的結構，必須顯式處理請求之間的維護狀態(tài)。這一新模型大大不同于連接、緊耦合的編程風格，此風格曾是客戶端/服務器時代的標志。在此編程風格中，連接會在程序的整個生存期中保持打開，而不需要對狀態(tài)進行特殊處理。</p><p>　　在設計符合當今開發(fā)人員需要的工具和技術時，M

58、icrosoft認識到需要為數據訪問提供全新的編程模型，此模型是基于.NET Framework生成的。基于.NET Framework這一點將確保數據訪問技術的一致性，因為組件將共享通用的類型系統(tǒng)、設計模式和命名約定。</p><p>　　設計ADO.NET的目的是為了滿足這一新編程模型的以下要求：具有斷開式數據結構；能夠與XML緊密集成；具有能夠組合來自多個不同數據源的數據的通用數據表示形式；以及具有為與數據

59、庫交互而優(yōu)化的功能，這些要求都是.NET Framework固有的內容。</p><p>　　在創(chuàng)建ADO.NET時，Microsoft具有以下設計目標：利用當前的ActiveX數據類型(ADO)知識；支持N層編程模型；集成XML支持。</p><p>　　(2) 在ADO.NET中連接和檢索數據庫</p><p>　　任何數據庫應用程序的一項主要功能是連接數據源并

60、檢索數據源中包含的數據。ADO.NET 的 .NET Framework數據提供程序充當應用程序和數據源之間的橋梁，使您可以執(zhí)行命令以及使用 DataReader 或 DataAdapter檢索數據。</p><p>　　在 ADO.NET中，通過在連接字符串中提供必要的身份驗證信息，使用Connection 對象連接到特定的數據源。您使用的Connection對象取決于數據源的類型。.NET Framework

61、 提供的每個.NET Framework數據提供程序包含一個Connection對象：OLE DB .NET Framework 數據提供程序包括一個 OleDbConnection對象，SQL Server .NET Framework 數據提供程序包括一個SqlConnection對象、ODBC .NET Framework數據提供程序包括一個 OdbcConnection對象，Oracle .NET Framework數據提供程序

62、包括一個OracleConnection對象。</p><p>　　當建立與數據源的連接后，可以使用Command對象來執(zhí)行命令并從數據源中返回結果。您可以使用Command構造函數來創(chuàng)建命令，該構造函數采用在數據源、Connection對象和Transaction對象中執(zhí)行的SQL語句的可選參數。也可以使用Connection的 CreateCommand方法來創(chuàng)建用于特定連接的命令。您可以使用CommandT

63、ext屬性來查詢和修改Command對象的SQL語句。</p><p>　　(3) 使用SQL Server .NET Framework數據提供程序</p><p>　　通過 SQL Server .NET Framework數據提供程序，可以使用自己的內部協議訪問 SQL Server 7.0 版或更高版本的數據庫。該數據提供程序設計的功能與OLE DB、ODBC 和 Oracle的.

64、NET Framework數據提供程序的功能類似。</p><p>　　需要注意的是，要使用 SQL Server .NET Framework數據提供程序，應用程序必須引用 System.Data.SqlClient命名空間。</p><p><b>　　2.3 本章小結</b></p><p>　　本章主要介紹了開發(fā)系統(tǒng)所需了解的背景知識

65、，主要包括Ajax技術，.NET Framework。它們對下一章系統(tǒng)的整體設計起到了一定的參考作用，只有在充分熟悉了本章內容的基礎上才能輕松地進入下一章的閱讀。</p><p>　　3 智能數字相冊系統(tǒng)的設計</p><p>　　3.1 總的設計目標</p><p>　　本次設計的總體目標是用高效、靈活的C#語言設計出操作性、實用性好的電子相冊軟件，并能夠實現

66、圖像的導入和顯示、數據庫索引的建立、根據關鍵字檢索圖像、圖像的分類等功能。該系統(tǒng)比一般的數字相冊系統(tǒng)而言，更具有一定的智能性，例如：當用戶需要某幅相片時，可以通過簡單的人機交互，或者根據用戶使用記錄，自動推薦出用戶可能需要的圖像，使得用戶可以獲得一款理想的圖像管理軟件。</p><p>　　3.2 需要解決的重點問題</p><p>　　智能數字相冊系統(tǒng)的特殊性使得軟件的設計并不容易，主

67、要表現在：</p><p>　　(1) 圖像數據的存儲問題</p><p>　　圖片文件不同于文本文件,它以二進制方式存放于電腦中，因此實現圖片管理主要有以下兩種方式：第一種是將圖片直接放入數據庫對應的表中，這種方式的優(yōu)點是實現了圖庫合一，但這種存儲方式對數據庫的容量和性能要求較高；另一種方式是將圖片以文件方式存放到服務器上，并將與圖片相關的信息和路徑存入對應的數據表中，這種方式縮小了表的

68、大小,同時提高數據庫操作速度，故通常被基于B/S的系統(tǒng)所廣泛采用[10]。本文以第二種方式為基礎，詳細描述如何使用ASP.NET來構建智能數字相冊系統(tǒng)。</p><p><b>　　(2) 圖像的檢索</b></p><p>　　圖像的檢索包括基于關鍵詞的檢索和基于內容的檢索兩種方式。</p><p>　　基于關鍵詞的檢索是傳統(tǒng)的圖像檢索方式。

69、對圖像信息用關鍵詞或文本方式來進行相應的描述是不精確的，因為不同的人對同一幅圖像或同一個人在不同的時間對同一幅圖像會有不同的理解，對不同的圖像的描述也很難遵循相同的標準。因此當用戶輸入的檢索關鍵詞與系統(tǒng)中對圖像的描述信息不一致時，就檢索不到需要的圖像，從而導致檢索的失敗，同時隨著圖像信息的劇增，其查找效率也迅速降低。</p><p>　　基于內容的檢索式近年來研究的重點，也提出了基于圖像紋理、基于圖像直方圖、基于

70、圖像色彩控件等多種檢索方式。但是，基于內容的圖像檢索系統(tǒng)具有相當的難度，目前還沒有開發(fā)出可以針對任意圖像的，真正實用的基于內容的圖像檢索系統(tǒng)，有的基于內容的圖像檢索系統(tǒng)只是針對某一類特殊的圖像有效。隨著技術的進步，基于內容的圖像檢索是發(fā)展趨勢[11]。開發(fā)本系統(tǒng)的目的是管理珍貴的歷史資料圖片，每幅圖像的背景資料或相關信息也是需要保存和進行圖像檢索的重要依據，而且需要管理的圖像五花八門，各種類別、格式、質量、大小的圖像的存在使得在短時間內

71、開發(fā)出基于內容的圖像檢索系統(tǒng)幾乎是不可能的，所以本系統(tǒng)采用基于關鍵詞的檢索方式。</p><p>　　3.3 系統(tǒng)數據結構的設計</p><p>　　數據庫結構設計是在完成了描述系統(tǒng)各種數據之間的依賴關系和信息分類的基礎上，將各種信息轉換成相應的數據項定義表。數據項定義表的作用主要是定義每個表的表名、表中各字段的名稱、數據類型長度和是否允許空，但在不同的數據庫，數據類型的表示符號和長度有

72、所差別。本系統(tǒng)的數據庫建表如下：</p><p>　　(1) 圖片信息表，用于存放與圖片相關的信息，包括圖片的編號、圖片的上傳用戶、圖片的分類、圖片名稱、圖片的存放路徑、上傳時間以及圖片的描述信息等。</p><p>　　表3.1 圖片信息表</p><p>　　(2) 用戶信息表，用于存放用戶的信息，包括用戶名、用戶密碼、最近一次的登錄時間、允許登錄時間、是否鎖

73、定、聯系郵箱、是否公開以及身份證號碼（可選字段）。</p><p>　　表3.2 用戶信息表</p><p>　　3.4 系統(tǒng)功能設計</p><p>　　智能數字相冊系統(tǒng)需要實現的功能包括用戶的管理，以及圖片的管理和使用等。具體來講，它包含用戶管理中常見的注冊、登錄、修改用戶信息；圖片的管理和使用功能主要包括圖片的上傳、瀏覽、搜索、查看圖片詳細信息等操作。其總

74、體結構如下圖3.1所示。</p><p>　　圖3.1 智能數字相冊系統(tǒng)功能結構圖</p><p>　　3.4.1 圖片管理</p><p>　　圖片管理實現的關鍵是將圖片上傳到服務器，這涉及到原始圖片的上傳、生成原始圖片的縮略圖以及將與圖片相關的信息保存到數據庫等重要細節(jié)。</p><p>　　隨著互聯網的發(fā)展，各網站特別是一些BBS站

75、點為豐富資源，通常會提供圖像文件的上傳及顯示的功能。由于用戶提供的文件在格式及大小方面都不一致，尤其是圖像的大小。不合適的圖像大小可能會改變網頁的排版格式，使網頁變得不雅觀，而較大的文件長度又會減慢網頁的響應。另外，在Web開發(fā)中需要對用戶上傳的圖像文件建立相應的縮略圖，這些功能的實現需要對圖像文件進行處理，主要是圖像文件的格式及尺寸的調整。雖然在HTML標記語言中可以在〈img〉標記中加入width及height屬性來控制圖像的顯示大

76、小，但HTML語言不能對圖像大小進行判斷，只能將所有的圖像以相對固定的格式來顯示，不能靈活的滿足多方面的要求。傳統(tǒng)方式對于這種情況的判斷處理通常是用JavaScript 或VBScript 來實現，ASP.NET的使用為靈活實現圖像的處理提供了新的途徑。ASP.NET的面向對象編程的開發(fā)方式相對于傳統(tǒng)的腳本編程方式比較適合Web站點功能模塊化的需要[12]。本節(jié)針對在ASP.NET環(huán)境下實現圖像文件上傳進行初步的探討。</p>

77、;<p>　　在模塊的實現過程中，用戶首先打開文件夾，選擇準備上傳的圖片文件，系統(tǒng)提供預覽原始圖片的功能。然后點擊上傳按鈕，系統(tǒng)調用上傳過程并將生成的縮略圖保存到服務器上相應的目錄中?？s略圖保持原始圖片的縱橫比并設定最大邊長為100像素。圖片的名稱從URL中提取文件名，圖片的后綴保持原有后綴不變。同時，系統(tǒng)自動將與該圖片相關的信息保存到數據庫中，圖片本身則保存在程序指定的文件夾中。在圖片上傳成功后，圖片的信息(如文件類型、

78、客戶端文件地址、文件名、擴展名) 將會在上傳圖片頁面顯示出來。</p><p>　　在ASP.NET中可以使用HTML控件和標準控件：打開文件按鈕( file類型input ,屬于HtmlInputFile 類) 和提交按鈕（Button類型）來實現文件的上傳功能。</p><p><b>　　具體的用法如下：</b></p><p>　　&l

79、t;input type="file" size="50" name="File" onchange="Preview(this.value)"> </p><p>　　<asp:Button Runat="server" Text="開始上傳" ID="UploadBu

80、tton"></asp:Button></p><p>　　在打開文件按鈕中增加了響應事件Preview(this.value)，用來實現上傳圖片的預覽功能。</p><p>　　在提交按鈕（Button類型）中增加runat =″server″，用以標記為在服務器端運行。</p><p>　　為將上傳的文件在服務器上進行保存，可以使用：

81、</p><p>　　String fileName = System.IO.Path.GetFileName(postedFile.FileName);</p><p>　　postedFile.SaveAs(System.Web.HttpContext.Current.Request.MapPath("Files/") + fileName);</p>

82、<p>　　HtmlInputFile的成員PostedFile屬于HttpPostedFile類,該成員提供對上傳文件的操作接口，本例使用HttpPostedFile的成員函數SaveAs對上傳文件進行保存，同時將上傳圖片的信息寫入數據庫。</p><p>　　本系統(tǒng)的上傳文件頁面可以實現多個文件同時上傳，</p><p>　　<input type="but

83、ton" value="增加(Add)" onclick="addFile()"></p><p>　　其中addFile()的函數處理流程如下：</p><p>　　1) 增加打開文件按鈕( file類型input，屬于HtmlInputFile類)和提交按鈕（Button類型）</p><p>　　var

84、str = '<INPUT type="file" size="50" NAME="File">' </p><p><b>　　2) 預覽圖片</b></p><p>　　onchange="Preview(this.value)"; </p>

85、<p>　　document.getElementById('MyFile').insertAdjacentHTML("beforeEnd", str);</p><p>　　3) 圖片描述部分的內容</p><p>　　document.getElementById('txtAlbumDesc').nodeValue=&quo

86、t;";</p><p>　　同時，若在上傳過程中需要臨時改變上傳文件，還可以點擊重置按鈕，即將頁面數據恢復到原始狀態(tài)。</p><p>　　<input onclick="this.form.reset()" type="button" value="重置(ReSet)"></p><p

87、>　　3.4.2 圖片檢索 </p><p>　　本節(jié)將仿照Google Suggest，使用Ajax技術實現動態(tài)獲取搜索提示的功能。與傳統(tǒng)的搜索相比，使用Ajax技術的搜索提示，能及時地給用戶提供參考的關鍵字。對用戶來說，無需提交頁面就可以獲得提示，節(jié)省了大量的時間。</p><p>　　當用戶需要查看數據庫服務器中的某些特定圖片時,可以通過圖片檢索模塊快速定位到需要查找的圖片。

88、本模塊提供按圖片名稱作為關鍵字的圖片查詢，系統(tǒng)在圖片記錄數據表中進行關鍵字模糊匹配檢索，并返回檢索到的所有縮略圖，進行分頁顯示?？紤]到用戶在檢索圖片時更關注圖片本身的內容，系統(tǒng)采用可分頁的DataList控件來顯示查詢結果(包括縮略圖)，同時使用新頁面來顯示原始圖片及其相關信息，新頁面中采用的是DetailsView控件綁定數據實現的。</p><p>　　(1) 基本原理分析</p><p&

89、gt;　　搜索提示的基本原理是：當用戶每輸入完一個關鍵字時，便向服務器發(fā)送請求，服務器端根據用戶當前輸入的關鍵字，在數據庫中搜索相關的關鍵字信息，并返回給客戶端[13]。在實現搜索時需要注意以下幾點：</p><p>　　1) 當鍵盤釋放時，也就是使觸發(fā)onkeyup事件時，需要向服務器發(fā)送請求；</p><p>　　2) 需要關閉文本框瀏覽器自帶的提示，以免影響搜索提示，也就是要將文本框

90、</p><p>　　屬性設置為：autocomplete=”off”；</p><p>　　3) 當出現搜索提示后，將選中的搜索提示突出顯示，以示區(qū)別。這種效果可以通過改變CSS來實現。</p><p>　　圖3.2 搜索提示基本原理示意圖</p><p>　　(2) 客戶端原理分析</p><p>　　在搜索提示

91、的界面文件上，包括一個輸入框和一個提交按鈕。其中輸入框用來輸入關鍵字。</p><p>　　<input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest();" autocompl

92、ete="off" /></p><p>　　<input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" runat="server" /><

93、;/p><p>　　在以上的方法中可以發(fā)現，當輸入框觸發(fā)onkeyup事件時會調用searchSuggest()方法，該方法取回所需要的數據，客戶端獲取數據的流程如圖3.3所示。</p><p>　　圖3.3 客戶端處理數據流程圖</p><p>　　searchSuggest()方法的作用是向服務器發(fā)送請求。使用該方法前，要先定義一個XMLHttpRequest對象

94、，然后創(chuàng)建該對象。需要注意的是，該方法要根據不同瀏覽器返回不同的XMLHttpRequest對象。</p><p>　　返回后的數據通過handleSearchSuggest()方法來處理。該方法首先將返回的數據分割成數組，然后將數組中的數據組織成HTML代碼的格式，最后顯示到搜索結果的圖層中。整個方法的邏輯處理流程如圖3.4所示。</p><p>　　圖3.4 handleSearch

95、Suggest()方法邏輯處理流程圖</p><p>　　suggestOver()和suggestOut()方法是改變鼠標移動和移出該選項時的CSS樣式表。當用戶輸入“L”時，客戶端如下圖所示：</p><p>　　圖3.5 輸入關鍵字后的客戶端</p><p>　　服務器端返回的字符串如下：</p><p>　　Landscape fi

96、ve|Landscape four|Landscape one|Landscape six|Landscape three|Landscape two|landscape14a.jpg|</p><p>　　然后，將上述字符串以“|”將其分割成若干子串，存入數組中，循環(huán)該數組，將數組中的內容顯示到前臺的div層中。</p><p>　　由于服務器端可以實現模糊搜索，于是當用戶輸入“L”后，

97、點擊Search按鈕，數據庫圖片關鍵字中所有以字母“L”開頭的圖片將會顯示在頁面上。</p><p>　　(3) 服務器端原理分析</p><p>　　客戶端發(fā)送查詢關鍵字的請求后，服務器端使用doPost()方法處理該請求，注意需要在服務端頁面設置AutoEventWireup="false"，否則服務器端會處理兩次客戶端的請求。</p><p&g

98、t;　　服務器端接收到該請求后，首先獲得用戶輸入的關鍵字，然后查詢數據庫，并將查詢結果保存到ArrayList中，最后將ArrayList中的數據組織成客戶端所需要的格式，返回給客戶端[14]。doPost()方法處理的邏輯流程如下圖所示。</p><p>　　圖3.6 圖像檢索服務器端處理邏輯流程圖</p><p>　　當點擊某一幅圖片時或其名字說明時，將進入另一頁面，該頁面顯示圖片在

99、數據庫中的詳細信息。圖片搜索頁面運行后的效果如第四章圖4.5，圖4.6所示。</p><p>　　3.4.3 圖片瀏覽</p><p>　　本節(jié)將使用Ajax技術實現無刷新即可瀏覽圖片。瀏覽圖片時，自動向服務器端發(fā)送請求，查詢該類別下的照片，并顯示到客戶端。用戶也可以根據喜好隨時改變相冊的風格。瀏覽相片的整個過程無需刷新頁面。第四章圖4.4所示為相冊瀏覽頁面的示意圖。</p>

100、<p>　　（一） 基本原理分析</p><p>　　(1) 界面設計分析</p><p>　　在圖4.4所示的的頁面中，每個選項卡對應相片的一個分類，單擊該選項卡時可以獲得該分類的所有圖片。當單擊某個圖片時，圖片將放大顯示。選項卡是由無序列表<ul>元素來實現的，每個選項卡中的圖片是由嵌套的<ul>元素顯示的。</p><p>

101、;　　以選項卡的第二個選項為例：</p><p>　　<li><a class="hide" onmouseover="getPictures('tree')">Trees</a></p><p><b>　　<ul></b></p><p>

102、;　　<li id="tree"> </li><!- - 顯示圖片區(qū)- -></p><p><b>　　</ul></b></p><p><b>　　</li></b></p><p>　　圖3.7為未單擊選項卡時的效果，圖3.8為單擊了T

103、rees選項卡時的效果，如圖所示。</p><p>　　圖3.7 單擊之前的選項卡</p><p>　　圖3.8 單擊Trees后的選項卡</p><p>　　每一個選項卡是一個<li>元素，設置該元素的CSS可以使之呈現上圖中的效果。</p><p>　　當鼠標移動到Trees選項時，調用getPictures('t

104、ree')方法。該方法的作用是，創(chuàng)建一個XMLHttpRequest對象，并向服務器發(fā)送該請求。該方法的處理流程如下：</p><p>　　1) 首先需要定義全局變量ajaxObject，保存XMLHttpRequest對象；</p><p>　　2) 創(chuàng)建XMLHttpRequest請求：ajaxObject = createAjaxObj()；</p><p

105、>　　3) 當請求狀態(tài)變化時調用changeStateFunction方法：changStateFunction(category); 4) 將客戶端的請求發(fā)送到服務器的地址：</p><p>　　var submitURL="PhotoService.aspx?cate=" + category; </p><p>　　5) 調用XMLHttpRequest對

106、象的open方法建立連接：</p><p>　　ajaxObject.open("GET", submitURL, true)；</p><p>　　6) 調用XMLHttpRequest對象的send方法發(fā)送請求：</p><p>　　ajaxObject.send(null); </p><p>　　7) 請求未完

107、成時顯示loading狀態(tài)： </p><p>　　var elmt = document.getElementById(category)；</p><p>　　elmt.innerHTML = "Loading"；</p><p>　　(2) 圖片放大原理分析</p><p>　　當用戶單擊某個圖片時，該圖片會自動

108、放大。其原理很簡單，是通過設置圖片的CSS外觀來實現的。當鼠標移動到該圖片上時，改變圖片的大小和位置，從而呈現出放大的動態(tài)效果。</p><p><b>　　動態(tài)更換皮膚</b></p><p>　　當單擊界面中的更改外觀風格選項時，調用switchStyle方法來更改頁面的CSS外觀。該方法的原理是：首先設置好兩個不同風格的CSS文件，當調用該方法時，查找HTML代

109、碼內<head>元素中有關CSS樣式表的文件，然后更改該樣式表文件的鏈接地址，使之采用另一個樣式表文件的風格。</p><p>　　該方法的處理流程如下：</p><p>　　獲得<head>元素<link>元素：var cssfile = document.getElementsByTagName("link&quo

110、t;)[0]; </p><p>　　如果該樣式表的鏈接地址為file1，則改為file2的地址：</p><p>　　if (cssfile.getAttribute("href") == file1)</p><p>　　cssfile.setAttribute("href", file2);</p><

111、;p>　　3) 否則直接設置為file1的地址：cssfile.setAttribute("href", file1); </p><p>　　（二） 客戶端原理分析</p><p>　　如何獲取圖片并顯示在客戶端呢？這里使用了XMLHttpRequest對象來向服務器發(fā)送請求，在取回該分類下的圖片數據后，將其顯示到客戶端[15]。這是一種動態(tài)的獲取數據方法，整個