【文章內(nèi)容簡(jiǎn)介】 基于 B/S 結(jié)構(gòu)的食譜管理系統(tǒng) 基于 圖 38 管理員后臺(tái)功能模塊結(jié)構(gòu)設(shè)計(jì)圖 管理員模塊 食譜管理 用戶管理 添加條目 修改條目 刪除條目 管理用戶信息 管理用戶餐單歷史 基于 B/S 結(jié)構(gòu)的食譜管理系統(tǒng) 基于 4 食譜系統(tǒng)的實(shí)現(xiàn) 第三章對(duì)系統(tǒng)的功能需求進(jìn)行了詳盡的分析，并根據(jù)分析提出了設(shè)計(jì)想法。本章將根據(jù)上一章分析的分析和設(shè)計(jì)思路進(jìn)行系統(tǒng)的具體化實(shí)現(xiàn)，并實(shí)現(xiàn)過(guò)程進(jìn)行詳細(xì)介紹。 系統(tǒng)開(kāi)發(fā)及運(yùn)行環(huán)境 系統(tǒng)的開(kāi)發(fā)和運(yùn)行需要相應(yīng)的軟硬件環(huán)境支持，這是系統(tǒng)實(shí)現(xiàn)的基礎(chǔ)。本次系統(tǒng)實(shí)現(xiàn)的硬件環(huán)境是 Acer Aspire 5562 筆記本，具體硬件環(huán)境如下圖（圖 41）所示。 圖 41 系統(tǒng)實(shí)現(xiàn)硬件環(huán)境 本次系統(tǒng)的實(shí)現(xiàn)使用的是 Web 開(kāi)發(fā)技術(shù)，軟件環(huán)境主要使用Microsoft Visual Web Developer 2021 Express Edition 作為網(wǎng)站開(kāi)發(fā)工具，用控件以及 HTML語(yǔ)言建立前臺(tái)頁(yè)面，主要用到的控件包括了：標(biāo)準(zhǔn)控件組中的 Button、 基于 B/S 結(jié)構(gòu)的食譜管理系統(tǒng) 基于 DropDownList、 Image、 Panel、 Table、 TextBox 等控件；數(shù)據(jù)控件組中的 GridView、ListView 等 控 件 ； 驗(yàn) 證 控 件 組 中 的 RequiredFieldValidator 、RegularExpressionValidator 等控件； AJAX Extensions 控件組中的 ScriptManager和 UpdatePanel 控件。另外還需要添加一個(gè) AJAX 控件組（控件庫(kù)文件名稱，通過(guò)互聯(lián)網(wǎng)即可下載到）： Ajax Control Toolkit 控件組，主 要 使 用 其 中 的 TextBoxWatermarkExtender 、 ValidatorCalloutExtender 、UpdatePanelAnimationExtender 等控件。 數(shù)據(jù)庫(kù)方面，使用 Microsoft SQL Server 2021 作為數(shù)據(jù)庫(kù)開(kāi)發(fā)工具，建立了一個(gè)由 12 張表以及數(shù)據(jù)庫(kù)關(guān)系圖等組成的完整的，符合第三范式的數(shù)據(jù)庫(kù)。 網(wǎng)站發(fā)布方面，使用了 Windows XP 自帶的 IIS（ Inter 信息服務(wù)器）作為網(wǎng)站的發(fā)布平臺(tái)。因 Windows XP 只能使用 版本的 IIS，但對(duì)于本次設(shè)計(jì)實(shí)現(xiàn)沒(méi)有什么影響。 系統(tǒng)的模塊實(shí)現(xiàn) 本系統(tǒng)基于 B/S 結(jié)構(gòu)開(kāi)發(fā)，使用 ASPNET 技術(shù)，并最終以網(wǎng)站形式發(fā)布。系統(tǒng)命名為 ASPNET3WebMenu，主要由 6 個(gè)模塊組成，下面將詳細(xì)介紹系統(tǒng)的組成以及各個(gè)模塊的詳細(xì)設(shè)計(jì)和實(shí)現(xiàn)過(guò)程。 ASPNET3WebMenu 應(yīng)用程序組成 在 Visual Web Developer 2021 的【解決方案資源管理器】面板中查看ASPNET3WebMenu 應(yīng)用程序，如下圖（圖 42）。應(yīng)用程序組成的各個(gè)元素的具體說(shuō)明如下。 基于 B/S 結(jié)構(gòu)的食譜管理系統(tǒng) 基于 圖 42 ASPNET3WebMenu 應(yīng)用程序組成圖 ● Admin 目錄包含了管理員和后臺(tái)用戶的頁(yè)面，如 、 等。 ● App_Code 目錄包含了應(yīng)用程序的組件和數(shù)據(jù)庫(kù)實(shí)體類等文件，如 、 、 、 、。 ● App_Themes 目錄包含了應(yīng)用程序的主題和樣式文件，如 、 等。 ● Attachment 目錄包含了用戶通過(guò)應(yīng)用程序上傳的文件或圖片。 ● Category 目錄包含了應(yīng)用程序與食譜分類相關(guān)的網(wǎng)頁(yè)，比如添加新分類的、修改分類信息的 等。 ● Bin 目錄中包含了 ASPNET3WebMenu 應(yīng)用程序引入的程序集，比如前面提到的 AJAX 插件庫(kù)文件 就在其中。 ● Food 目錄包含了應(yīng)用程序中與應(yīng)用程序中與菜肴相關(guān)的一些網(wǎng)頁(yè)，如添加菜肴的 頁(yè)面、修改菜肴信息的 頁(yè)面等。 ● Knowledge 目錄包含了飲食小百科的所有內(nèi)容，包括了介紹飲食沖突知識(shí)的 頁(yè)面、參考食譜的 頁(yè)面等。 基于 B/S 結(jié)構(gòu)的食譜管理系統(tǒng) 基于 ● Order 目錄包含了餐單和訂餐單有關(guān)的頁(yè)面，比如查看個(gè)人餐單的 頁(yè)面、查看個(gè)人訂餐單的 頁(yè)面等。 ● Portal 目錄包含了與 ASPNET3WebMenu應(yīng)用程序前臺(tái)有關(guān)的頁(yè)面，例如首頁(yè) 、菜肴查看頁(yè) 等。 ● User 目錄包含了與用戶操作有關(guān)的頁(yè)面，比如登錄頁(yè)面 、注冊(cè)頁(yè)面 等。 ● 文件為 ASPNET3WebMenu 應(yīng)用程序的配置文件，它配置了數(shù)據(jù)庫(kù)連接字符串、引用的程序集等熟悉。 和 為系統(tǒng)的頭模塊。 系統(tǒng)通用類和模塊的實(shí)現(xiàn) ASPNETWebMenu 應(yīng)用程序的系統(tǒng)通用類和模塊設(shè)計(jì)，包括 了系統(tǒng)常量設(shè)計(jì)、系統(tǒng)通用工具的設(shè)計(jì)、系統(tǒng)頭模塊的設(shè)計(jì)、系統(tǒng)外觀設(shè)計(jì)、 配置文件設(shè)計(jì)、數(shù)據(jù)庫(kù)實(shí)體類設(shè)計(jì)。 ： 系 統(tǒng) 常 量 是 定 義 在 ASPNET3WebMenu 上，包括了ASPNET3WEBDBCONNECTSTRING 和 ALLOWPICTRUEXENSIONLIST。其中，第一個(gè)常量從 文件中獲取連接數(shù)據(jù)庫(kù)的連接字符串；第二個(gè)常量定義了本應(yīng)用程序允許上傳圖片的后綴名。 ： 本程序在 文件中定義了如下 4 個(gè)通 用方法。 （ 1） public static void ListSelectItemByValue(ListControl list,string value),根據(jù)Value 參數(shù)的值和 ListItem 的 Value 屬性的值設(shè)置 ListCotrol控件的選擇項(xiàng)。 （ 2） public static void ListSelectItemByText(ListControl list,string value)， 根據(jù)Value 參數(shù)的值和 ListItem 的 Text 屬性的值設(shè)置 ListCotrol 控件的選擇項(xiàng)。 （ 3） public static string CreateDateTimeString(),根據(jù)當(dāng)前時(shí)間，創(chuàng)建一個(gè)由時(shí)間的值組成的字符串。 （ 4） public static void ShowAjaxDialog(Button button,string message),在 ASP AJAX Web 窗口中，彈出信息框，其中的消息為 message 參數(shù)的值。 基于 B/S 結(jié)構(gòu)的食譜管理系統(tǒng) 基于 3．系統(tǒng)外觀設(shè)計(jì)： 系統(tǒng)外觀設(shè)計(jì)通過(guò) 和 兩個(gè)文件來(lái)完成。前者定義了 Body、Table 等樣式，后者定義了各個(gè)控件的皮膚。 配置文件設(shè)計(jì)： 在本文件中主要配置連接字符串和程序引用集，連接字符串配置部分如下所示： connectionStrings add name=ASPNET3WebMenuDBConnectionString connectionString=Data Source=CHINAD9B498AF1\SQLEXPRESS。Initial Catalog=ASPNET3WebMenuDB。User ID=sa。Password=335522021providerName= / /connectionStrings 程序引用集配置如下 controls add namespace=AjaxControlToolkit assembly=AjaxControlToolkit tagPrefix=ajaxToolkit/ /controls ： ASPNET3WebMenu 應(yīng) 用 程 序 為 數(shù) 據(jù) 庫(kù) 創(chuàng) 建 了 一 個(gè) 名 為“ ” 的實(shí)體類，并將 ASPNET3WebMenuDB 數(shù)據(jù)庫(kù)中的12 張表添加到該實(shí)體類中。另外還添加存儲(chǔ)過(guò)程作為實(shí)體類中方法方便執(zhí)行數(shù)據(jù)操作。 其 實(shí) 體 類 設(shè) 計(jì) 代 碼 文 件 在 建 立 好 文件后會(huì)自動(dòng)生成，為了調(diào)用需要將它命名為ASPNET3DBBOK 作為一個(gè)實(shí)體類使用。 應(yīng)用程序前臺(tái)的實(shí)現(xiàn) 食譜管理系統(tǒng)的前臺(tái)功能模塊主要實(shí)現(xiàn) ASPNETWebMenu 應(yīng)用程序前臺(tái)功能，主要包括應(yīng)用程序首頁(yè) 、查看菜肴詳情頁(yè)面 、菜肴詳情 頁(yè)面 、 按 關(guān) 注 度 瀏 覽 菜 肴 的 頁(yè) 面 頁(yè) 面、按上架時(shí)間瀏覽菜肴的頁(yè)面 、按售價(jià)瀏覽菜肴的頁(yè)面 、按銷售量瀏覽菜肴的頁(yè)面。這些頁(yè)面都保存在 ASPNET3WebMenu 應(yīng)用程序的 基于 B/S 結(jié)構(gòu)的食譜管理系統(tǒng) 基于 “ Portal” 目錄下（圖 43）。 圖 43 Portal 目錄詳情 下面主要介紹應(yīng)用程序首頁(yè) 和菜肴詳情頁(yè)面 現(xiàn)過(guò)程。 1．應(yīng)用程序首頁(yè) 實(shí)現(xiàn)： 應(yīng)用程序首頁(yè) 它的隱藏代碼文件為 。它顯示菜肴分類以及菜肴的信息，并為用戶提供便捷的操作界面。 （ 1）界面設(shè)計(jì)實(shí)現(xiàn)： 在 頁(yè)面上創(chuàng)建一個(gè) GridView 控件和一個(gè) TabContainer 控件 ，它們的 ID 屬性的值分別為 gvCategory 和 tcFood。其中 gvCategory 控件一列表形式顯示菜肴分類信息。 tcFood 是一個(gè) AJAX 控件，它包括了 5 個(gè) TabPanel控件，分別放置按名稱瀏覽菜肴頁(yè)面 等 5 個(gè)頁(yè)面，實(shí)現(xiàn)了不同排序方式的瀏覽功能。 頁(yè)面界面設(shè)計(jì)如下圖（圖 44） 基于 B/S 結(jié)構(gòu)的食譜管理系統(tǒng) 基于 圖 44 界面效果圖 （ 2）頁(yè)面后臺(tái) 頁(yè)面后臺(tái)功能是由 Page_load(object sender,EventArgs e)事件實(shí)現(xiàn)。該事件顯示菜肴分類及其菜肴信息，具體步驟如下。 ● 從地址欄中獲取菜肴分類的 ID 值，并保存在 categoryID 變量中。 ● 如果 categoryID 變量的值小于或等于 1，則把該變量的值設(shè)置為 1。 ● 調(diào)用 BindPageData()函數(shù)顯示當(dāng)前菜肴分類（由 categoryID 變量指定）的子分類。 運(yùn)行 ASPNET3WebMenu 應(yīng)用程序之后，查看 頁(yè)面，初始化界面如圖 45 所示 基于 B/S 結(jié)構(gòu)的食譜管理系統(tǒng) 基于 圖 45 應(yīng)用程序首頁(yè) 2. 菜肴詳情頁(yè)面 實(shí)現(xiàn)： 查看菜肴詳情由 頁(yè)面來(lái)實(shí)現(xiàn)，它的隱藏代碼文件為。它顯示菜肴的詳細(xì)信息，如菜肴名稱、才要價(jià)格、菜肴發(fā)布日期、菜肴做法用料，以及菜肴的各個(gè)屬性和關(guān)于本菜肴的評(píng)論。同時(shí)，該頁(yè)面還有添加菜肴到餐單的功能。 （ 1） 菜肴詳情部分界面設(shè)計(jì)實(shí)現(xiàn)： 頁(yè)面上共包含了一個(gè) Image 控件、一個(gè) Lade 控件、一個(gè)GridView 控件和一個(gè) Button 控件，它們的 ID 屬性的值分別為 imgFood、 lbPrice、gvAttibute 和 btnBuy。其中 imgFood 控件顯示菜肴的圖片； lbPrice 控件顯示菜肴價(jià)格； gvAttibute 控件以列表形式顯示菜肴的屬性。 btnBuy 控件可以將菜肴添加進(jìn)餐單。 頁(yè)面的設(shè)計(jì)界面圖如圖 46 所示 基于 B/S 結(jié)構(gòu)的食譜管理系統(tǒng) 基于 圖 46 菜肴信息頁(yè)面的設(shè)計(jì)界面圖 （ 2）菜肴評(píng)論部分界面設(shè)計(jì)： 在 頁(yè)面上創(chuàng)建四個(gè) TextBox 控件和一個(gè) Button 控件，他們的ID 屬性的值分別為 tbTitle、 tbIP、 tbEmail、 tbBody 和 btnCommit。四個(gè) TextBox控件分別顯示評(píng)論用戶的信息以及評(píng)論內(nèi)容， btnCommit 按鈕實(shí)現(xiàn)發(fā)表評(píng)論功能。其設(shè)計(jì)如圖 47 所示 圖 47 菜肴評(píng)論部分設(shè)計(jì) 基于 B/S 結(jié)構(gòu)的食譜管理系統(tǒng) 基于 （ 3）后臺(tái)實(shí)現(xiàn)： 頁(yè)面的后臺(tái)功能由其 Page_Load(object sender,Event e)事件實(shí)現(xiàn)。該事件顯示某一菜肴的詳細(xì)信息，具體步驟如下。 ● 從地址欄獲取菜肴的 ID 值，并保存在 foodID 變量中。 ● 調(diào)用 BindPageData(int foodID)函數(shù)顯示菜肴得詳細(xì)信息，包括菜肴的名稱、圖片等信息，以及顯示菜肴的屬性。 ● 調(diào)用 UpdateviewCount(int foodID)函數(shù)更新當(dāng)前菜肴的被查看數(shù)。 單擊 頁(yè)面中的【加入餐單】按鈕將觸發(fā) Click 事件：btnBuy_Click(object sender,EventArgs e).該事件實(shí)