1.1 演示視頻： 詳細設計
https://www.bilibili.com/video/BV1av421r7Dp/1.2 系統運行平臺設置

1.硬件環境

臺式計算機（PC）一臺,如表5-1所示。

表5-1　運行環境硬件配置

2.軟件環境

Windows XP和Windows 2003操作系統,SQL Server 2005和ASP.NET2.0。

1.3 系統開發平臺和技術簡介

采用Microsoft SQL Server數據庫管理系統作為開發平臺來架構網站及其動態網頁,因為它建立網站容易、方便、快捷,是當今開發中小型網站的主流,對比起PHP等有著許多優點,又同屬Microsoft產品,與Windows系統有著很好的兼容。[8]

1.ASP.NET2.0作為網站開發工具的優勢

ASP.NET是一種服務器端動態網頁開發技術。目前,存在許多動態網頁的開發技術,ASP.NET的前身ASP以其簡單的語法、嵌入HTML方式等特性,在動態WEB技術領域取得了成功,成為Windows平臺上的霸主。

ASP.NET從1.X升級到2.0,技術增加了大量方便、實用的新特性。總體來說,ASP.NET 2.0的新特征主要體現在新的服務器控件、頁面框架、服務與接口3個方面。

更豐富的服務器控件：ASP.NET 2.0新增了數十個服務器控件,包括數據控件、登錄系列控件、WEB部件、站點導航控件和其它控件等。這些服務器控件對于提高工作效率,降低開發成本有著重要作用。

頁面框架：ASP.NET 2.0新特征在頁面上的體現包括：母版面、主題和皮膚、編譯機制和本地化。

母版頁特性能夠幫助用戶建立具有統一布局和外觀的頁面。主題和皮膚使ASP.NET可以一次性設置一種類型的服務器控件外觀樣式。在應用程序編譯方面,ASP.NET2.0提供了幾種替代方案,從而擴大了編譯的選擇范圍,開發人員可以根據特定需要進行選擇。服務與接口包括成員資格管理、角色管理、用戶設置、數據緩存、配置與管理工具等。利用這些功能,可以快速實現用戶和角色管理、個性化用戶配置、數據緩存、應用程序可視化配置等任務。

為了實現更高的開發效率,ASP.NET 2.0還增加了一些新的控件。這些專門的數據控件分為兩組：數據源控件和數據綁定控件。數據源控件是創建與數據庫的鏈接。數據綁定控件則從數據源控件中獲取信息,并在頁面上創建呈現。這種簡單的雙控件模式可用于多種情況。對于多種數據庫類型,甚至是非關系型數據源,都有相應的數據源控件。對于WEB應用設計和開發人員而言,ASP.NET2.0具有可以支持動態頁面的虛擬機,可以說,ASP.NET 2.0是WEB開發史上一個重要的里程碑。

ASP.NET的優越性：

(1)性能大幅度提高

(2)強大的開發環境

(3)強大的功能和適應性

(4)簡單性和易用性

(5)高效可管理性

(6)可移植性和良好的適用性

(7)可擴展性

2.SQL Server 作為網站數據庫設計的優勢

(1)SQL是一個非過程化的語言。因為它一次處理一個記錄,對數據提供自動導航。SQL允許用戶在高層的數據結構上工作,而不對單個記錄進行操作,可操作記錄集。所有SQL 語句接受集合作為輸入,返回集合作為輸出。SQL的集合特性允許一條SQL語句的結果作為另一條SQL語句的輸入。SQL不要求用戶指定對數據的存放方法。

(2)SQL是統一的語言。它為許多任務提供了命令,包括：查詢數據、在表中插入、修改和刪除記錄；建立、修改和刪除數據對象；控制對數據和數據對象的存??；保證數據庫一致性和完整性。以前的數據庫管理系統為上述各類操作提供單獨的語言,而SQL將全部任務統一在一種語言中。

(3)SQL是所有關系數據庫的公共語言。由于所有主要的關系數據庫管理系統都支持SQL語言,用戶可將使用SQL的技能從一個RDBMS轉到另一個。所有用SQL編寫的程序都是可以移植的。

3.ADO.NET技術簡介

ADO.NET(ActiveX Data Objects For .NET Framework),是一種新的數據訪問技術,是.NET Framework提供給.NET開發人員的一組類,其功能全面且靈活。

ADO.NET是.NET Framework中用以操作數據庫的類庫的總稱,提供對Microsoft SQL Server等數據庫,以太OLE DB和XML數據源的一致訪問。ADO.NET包含了所有允許數據處理的類,是一個典型的數據庫操作（如索引、排序和視圖）容器。具體來說,通過ADO.NET,應用程序不但能夠連接到指定數據庫的數據源,檢索、操作和更新數據,而且還能實現對其他數據格式的訪問。

ADO.NET主要包括“DataSet”和“.NET數據提供程序”兩個核心組件,用來完成數據訪問操作。

(1)NET數據提供程序，專門為數據處理以及快速地只進、只讀訪問數據而設計的組件,可以單獨使用或按順序組合使用,包括Connection、Command、DataReader和DataAdapter對象,用于連接到數據庫、執行命令和檢索結果等。

(2)DataSet，數據集對象DataSet的結構類似于關系數據庫的表,包括表、行、列等數據對象模型的類,還包含為數據集定義的約束和關系。

1.4 系統開發架構

在Internet/Intranet領域,目前“瀏覽器—Web 服務器—數據庫服務器” 結構是一種非常流行的客戶機/服務器結構。這種結構Zui大的優點是：客戶機統一采用瀏覽器,這不僅讓用戶使用方便,而且使得客戶機端不存在維護的問題。當然,軟件開發布和維護的工作不是自動消失了,而是轉移到了Web 服務器端。在Web 服務器端,程序員要用腳本語言編寫響應頁面。例如用Microsoft的ASP語言查詢數據庫服務器,將結果保存在Web 頁面中,再由瀏覽器顯示出來。

B/S結構,即Browser/Server（瀏覽器/服務器）結構,是隨著Internet技術的興起,對C/S結構的一種變化或者改進的結構,在這種結構下,用戶界面完全通過WWW瀏覽器實現,一部分事務邏輯在前端實現,但是主要事務處理邏輯在服務器端實現,形成所謂的三層結構。B/S結構主要是利用了不斷成熟的WWW瀏覽器技術,結合瀏覽器的多種Script語言（VBScript JavaScript等）和ActiveX技術,用戶通過瀏覽器就實現了原來需要復雜專用軟件才能實現的強大功能,并節約了開發成本,是一種全新的軟件系統構造技術。

三層的(Browser/Server)體系結構是把二層(Client/Server)結構的事務處理邏輯模塊從客戶機的任務中分離出來,由單獨組成的一層來負擔其任務,這樣客戶機的負擔大大減輕了,把負荷均衡地分配給了Web 服務器,于是原來的兩層的(Client/Server)結構轉變成三層的(Browser/Server)結構?；?Browser/Server)結構的系統不需安裝專用的前端應用程序,各種平臺上的用戶只需通過瀏覽器使用便可訪問并處理相應信息,操作更加簡單。

軟件系統的改進和升級越來越頻繁,B/S架構的產品明顯體現其方便的特性。無論用戶的規模有多大,有多少分支機構都不會增加任何維護升級的工作量,所有的操作只需要針對服務器進行,如果是異地只需要把服務器連接上網即可立即進行維護和升級,這對人力、時間、費用的節省是相當驚人的。

無論是辦公自動化管理系統,人力資源管理系統,客戶關系管理系統,ERP等等,發展的趨勢是不斷融合,采用統一的B/S結構開發的產品無論是現在還是將來都是zuihao的選擇。

1.5 系統登錄流程設計

系統登錄程序流程圖說明了用戶登錄系統時的整個流程走向。

1.6 界面的詳細設計

本網站分為前臺和后臺兩大功能模塊。前臺是會員交易模塊主要以淡藍色為基本色,因為系統本身屬于購物網站,一些圖片上傳后,本身就有美化頁面的效果,所以不需要再選用太過夸張的顏色,所以選擇淡藍色,純凈、明亮、清晰、明朗,使網站具有親和力給人眼前一亮的感覺。后臺管理員模塊主要還是以很流行的淡藍色為基本色,藍白搭配已經成為網站的經典搭配色。

圖5-1　系統登錄流程圖

1.7  前臺功能模塊設計詳細說明

1.首頁模塊

(1)首頁界面功能是將該網站的主要功能都顯示在上面,主要有首頁、商品列表、退出登陸、會員登陸、會員注冊、修改個人資料、我的購物車、我的訂單、我的收藏夾、訂單查詢、用戶留言、后臺登陸、商品查詢、客戶服務等等。只要點擊相關的鏈接就可以進入相關的網頁。用戶可通過按類查詢,查找自己想要的商品,點擊圖片進入瀏覽。在主頁面上顯示商品的分類,管理員推薦的商品,本網站熱賣的商品和Zui新上架的商品,還顯示本月銷售前五名的商品名稱供用戶參考。只要點擊商品圖片就可以顯示該商品的詳細信息。                                                      

(2)商品查詢功能是根據分類進行商品查詢。如圖5-2所示。

圖5-2 商品查詢模塊

(3)左側導航欄功能是起到為用戶導航的作用,它包括三大方面,商品分類模塊,商品精品推薦模塊,客戶服務模塊。點擊商品分類模塊,商品精品推薦模塊中的某一項,都會在首頁的右側顯示該類型的全部商品和某款商品的詳細信息,客戶服務模塊的設計幫助了用戶在瀏覽或是購買商品時,一旦出現什么問題,可以及時的與管理員溝通。分為三個部分：客服熱線、QQ、Email。如圖5-3所示。

圖5-3　商品分類界面

(4)后臺登陸導航模塊是前臺與后臺的銜接,管理員可在瀏覽過主頁后再進入后臺進行操作,起到前臺與后臺的鏈接的作用。如圖5-4所示。

圖5-4　后臺登錄導航界面

2.會員管理模塊

(1)用戶管理模塊分為用戶登錄和用戶注冊兩個方面。點擊首頁的“用戶注冊”按鈕就可以進入會員注冊界面。[10]

填寫會員基本信息,完成后點擊“注冊”按鈕就可以進入會員登錄界面。用戶名不可以與之前注冊過的用戶重名,如果輸入一樣的用戶名,系統會自動提示“用戶名已存在,請重新輸入用戶名”,如圖5-5所示。

圖5-5　用戶注冊界面

(2)注冊成功,則返回到登錄頁面。在登錄頁面中,輸入用戶名和密碼,點擊“登錄”按鈕,系統自動核實用戶名和密碼是否存在和是否正確,如果正確直接跳到首頁界面,并在導航欄上顯示“用戶admin已經登錄”字樣,當用戶登陸時,系統會自動分配一個ID,這個ID是不會重復的,用來標志每一個不同的用戶；否則系統會自動提示信息“用戶名或密碼不正確,請重新輸入”。如圖5-6所示。

圖5-6　用戶登錄界面

3.我的購物車模塊

(1)在填寫訂單界面點擊“放入購物車”按鈕即可將選購的商品放入購物車中。如圖5-7所示。

圖5-7　放入購物車界面

(2)購物車與填寫訂單界面

在我的購物車界面中,點擊“取消購買”即可將選中的商品從購物車中刪除,點擊“詳細信息”即可打開該商品的詳細信息介紹界面,在下面的“填寫訂單”項中有此次購物的“總價格”,是對購物車中所有商品價格的總計。由于本系統采用“網銀支付”原則,會員在填寫訂單時,認真填寫電話號碼和郵遞方式以便溝通,我們會根據會員選擇的方式進行送貨上門服務。將所有信息填寫完整后,點“提交”即可進入確認訂單界面。如圖5-8所示。

   

圖5-8　購物車與填寫訂單界面

(3)確認訂單界面

若在購物車中填寫訂單,訂單按批量購買生成,如下圖所示,單價和數量都不顯示,只顯示總價,單擊所購商品信息后的“查看批量購買的產品詳情”,即可查看批量購買商品的詳細信息包括單價和數量都會有所體現。由于會員通過“網銀支付”的,所以在確認訂單時會顯示會員賬戶的余額。如圖5-9所示。

  

圖5-9　確認訂單界面

4.查看商品詳情模塊

在查看商品詳情時,點擊“收藏該商品”按鈕即可將自己喜歡的商品放入收藏夾中。在收藏該商品的下面有一個“評論該商品”,點擊它即可對該商品進行評論,評論信息會在當前頁的Zui下方顯示,以供其它用戶在購買時當作參考。在此按鈕的旁邊還有一個“在線購買”按鈕,會員點擊它可直接跳入“填寫訂單”界面,實現是對單件商品的購買。如圖5-10所示。

  

圖5-10　查看商品詳情界面

5.訂單查詢模塊

該模塊會員將自己記錄的訂單編號,姓名和電子郵件等信息輸入后,點擊“訂單查詢”按鈕,即可查看訂單的詳細信息。如圖5-11所示。

圖5-11　訂單查詢界面

6.訂單查詢結果模塊

點擊“訂單查詢”按鈕后,即可跳轉到訂單查詢結果界面。如圖5-12所示。

圖5-12　訂單查詢結果界面

7.留言板模塊

留言板模塊是為了方便會員與管理員之間的溝通而設計的,會員將信息填寫完整后,點擊“提交”按鈕即可。如圖5-13所示。

圖5-13　留言板界面

5.6.1 后臺功能模塊設計詳細說明

網站后臺是管理員對該網站基本信息的管理與維護。這里按流程的順序一一詳細說明。

1.管理員登錄界面

點擊首頁的“后臺登錄”鏈接即可進入網站后臺管理員登錄界面,管理員輸入用戶名及密碼、驗證碼 ,系統自動核實這三項是否正確,正確即進入管理首頁。驗證碼的設計可以提高網站后臺管理的安全性。如圖5-14所示。

圖5-14　管理員登錄界面

2.管理員管理界面

后臺管理界面分為左右兩個部分。在界面的左側顯示后臺管理的主要功能目錄,目錄功能使用的都是超鏈接按鈕,分為八個大的功能,各個大的功能展開后,還包含多個小的功能。右側為各個功能的顯示、操作部分。八大功能是以鏈接的形式顯示在左側,單擊一次該項展開再單擊一次,該項收縮,如“系統”功能,點擊一下展開,里面包括兩個小的功能,前面有“·”進行標注,點擊“打開店鋪首頁”即可鏈接到首頁,點擊“退出登錄”即可返回到管理員登陸界面。后臺管理首頁界面。如圖5-15所示。

圖5-15　后臺管理首頁

3.分類管理功能

分類管理功能主要是對商品的類別進行添加、編輯和刪除操作。如圖5-16所示。

圖5-16　分類管理界面

4.盈利分析功能

商品管理功能主要包括添加商品功能,商品明細管理功能,盈利分析功能,推薦商品功能和熱賣商品功能。添加商品功能即是上傳將在網上公布的商品名,類型,價錢,圖片,詳情介紹等信息；商品明細管理功能即是對商品入貨量,銷售量等信息的統計；推薦商品功能和熱賣商品功能即是對哪些推薦的商品或是熱賣的商品要上傳到網上的設置；盈利分析功能是在指定的時間段內計算該時間段的盈利情況,是銷售網站必不可少的一項。如圖5-17所示。

圖5-17　盈利分析界面

5.整理訂單功能

是對一些無效的訂單進行整理,分四種清除情況：清除一個月前的未處理訂單,清除一個星期前的未處理訂單,清除一天前的未處理訂單,清除一小時前的未處理訂單。定時刪除無效的訂單,為服務器減少無謂的資源浪費。如圖5-18所示。

圖5-18　訂單整理界面

6.商品的訂單管理功能

是根據前臺的購物情況自動生成后臺的訂單,供管理員查看前臺的交易情況,并提供給會員反饋信息。在每一條訂單信息的后面都有四個鏈接,“詳細信息”是查看訂單的詳情,在后面還有三種狀態,“未處理”代表該訂單還未閱讀,“等待”代表訂單已閱讀,并且商品已在郵寄的途中,“完成”代表交易成功。會員有前臺查詢訂單詳情的時候,也可根據訂單狀態來判斷該訂單是否已經生效。如圖5-19所示。

7

圖5-19　訂單管理界面

7.清空訂單記錄功能

輸入管理員姓名和密碼,點擊“清空所有訂單記錄”按鈕,則會將該管理員的全部訂單全部清空。如圖5-20所示。

圖5-20　清空訂單記錄界面

8.系統雜項功能

該功能是設置系統公告和商品默認圖片信息的,屬于編輯的操作。

9.留言板信息管理功能

查看未讀留言,查看后該條留言會自動跳到已讀留言界面中。該功能下還有評論信息管理,管理員可在此界面中查閱信息或刪除不合法的評論信息。如圖5-21所示。

圖5-21　管理商品評論界面

10.管理員設置功能

包括會員管理、新增管理員、所有管理員、修改我的登錄設置。其中所有管理員頁面如圖5-22所示。

圖5-22　所有管理員界面

11.郵遞方式管理

管理員在后臺添加多種郵遞方式。會員在前臺可根據自己的需求進行選擇。如圖5-23所示。

圖5-23　郵遞方式管理界面

1.8 本章小結

綜合考慮總體設計思想,本章完成了本網站的詳細設計,具體到開發環境、工具,各個模塊的模型,前臺、后臺的模塊詳細設計以及功能的Zui終完成。這里綜合考慮用戶的需求和銷售網站獨有的特點,以及Zui大限度的為用戶提供方便。界面美觀大方、頁面布局清晰規整、功能表達力強,操作簡單,用戶一看即懂。