【文章內(nèi)容簡介】 現(xiàn)錯(cuò)誤。 第 節(jié) 系統(tǒng)功能結(jié)構(gòu)設(shè)計(jì) 前臺(tái)菜譜知識(shí)展示： 系統(tǒng)銷售模塊主要讓商品購買者使用，可以進(jìn)行各類商品信息的瀏覽和訂購功能，系統(tǒng)銷售模塊的結(jié)構(gòu)如圖 31 所示。 前 臺(tái) 菜 譜 知 識(shí) 展 示模 塊食 譜 菜 單 商 品 菜 譜 明 細(xì)商品名稱配料商品名稱商品編號(hào)成份制作方法圖片食譜類別 圖 31 第 節(jié) 界面設(shè)計(jì) 頁面的頭部 , 如圖 32 所示 ： 圖 32 該頁面引用的用戶定義控件 來作為頁面的頭部，頁面的主體部分 主要使用Table 和 div+css 來布的局，并且 用了 4 張圖片、一個(gè) Label 控件 用來顯示訂菜熱線 以及一個(gè) TextBox 控件 用來輸入搜索的關(guān)鍵詞 。 同時(shí)用戶在點(diǎn)擊注冊和登陸的時(shí)候可以進(jìn)入相應(yīng)的頁面來進(jìn)行操作，為了接下來購物更為方便。 menu{width:1024px。 margin:10px auto auto 150px。 } menu ul{ float:left。 width:900px。 height:35px。 margin:20px 50 0px 100px。 } menu ul li{liststyletype:none。 float:left。 margin:1px 1px 0 0。 } menu ul limenu_7{marginright:0。 } menu ul li a{display:block。 width:120px。 height:25px。 paddingtop:4px。 paddingbottom:4px。 textalign:center。 textdecoration:none。 fontsize:22px。 lineheight:26px。 color:069。} menu ul li a:hover {background:ccc。 } 頁面的底部 ，如圖 33 所示 ： 圖 33 該頁面引用的用戶定義控件 來作為頁面的頭部，頁面的主體部分主要使用div+css 來布的局，使用了 5 張主要的圖片來進(jìn)行布局，同時(shí)在友情鏈接里面附加了各個(gè)網(wǎng)站的超鏈接，用戶也能方便去瀏覽。 footer sm word{width:580px。 height:50px。 margintop:3px。 marginleft:0px。 } footer sm word li{liststyletype:none。 float:left。 margin:1px 1px 0 0。 height:50px。 width: 140px。 } footer sm word li a {display:block。 width:90px。 height:50px。 float:left。 paddingtop:4px。 textalign:center。 textdecoration:none。 fontsize:14px。 color:069。 } footer sm word li a:hover{background:ccc。 } footer youqing li{width:70px。 height:22px。 liststyletype:none。 margintop:300px。 } footer youqing li a {display:block。 width:70px。 height:22px。 float:left。 textalign:center。 textdecoration:none。 color:069。 } footer yq { float:left。 width:1024px。 height:110px。 margintop:10px。 marginleft:0px。 } footer yq li {liststyletype:none。 float:left。 margin:1px 1px 0 0。 height:25px。 } footer yq li a{display:block。 width:120px。 height:25px。 paddingtop:8px。 textalign:center。 textdecoration:none。 color:069。 } footer yq li a:hover{background:ccc。 } footer line{float:left。 width:1024px。 height:10px。 margintop:10px。 bordertop:outset 1px gray。 } footer line1{ float:left。 width:1024px。 height:10px。 margintop:10px。 bordertop:outset 1px gray。 } footer co{float:left。 width:900px。 height:35px。 margintop:10px。 marginleft:50px。 } footer co li { liststyletype:none。 float:left。 margin:1px 1px 0 0。 height:25px。 } footer co li a {display:block。width:85px。height:25px。paddingtop:8px。textalign:center。textdecoration:none。 fontsize:14px。 color:069。 marginleft:0px。 } footer co li men_10 {width:100px。 height:26px。 textalign:left。 fontsize:14px。 } footer co li a:hover{background:ccc。 } footer cop{width:700px。 height:20px。 margin:30px auto 30px 220px。 } 菜譜的瀏覽 ，如圖 34 所示 ： 圖 34 該頁面的導(dǎo)航菜單是引用的用戶定義控件 來作為頁面的頭部，頁面的主體部分用了兩個(gè) iframe，分別命名為“ LeftTree”和“ Main”。在“ LeftTree”中顯示 ， 頁面，在 頁面中使用了 TreeView 控件，用來顯示商品管理的條目，通過點(diǎn)擊“ +”或“ ”按鈕來展開或關(guān)閉操作。點(diǎn)擊“ LeftTree”中的菜譜名稱條目，在“ Main”中顯示出相應(yīng)的菜譜信息，同時(shí)在“ Main”中主要使用 Table 來布局的，分別顯示菜的普片、商品編號(hào)、商品名稱、原料、成分以及做法等信息。 首頁的信息瀏覽：如圖 35 所示： 圖 35 該頁面主體框架是用 Table 來進(jìn)行布局的，該頁面中，最主要用來顯示商品信息、詳細(xì)信息與詳細(xì)食譜的內(nèi)容是通過 Datalist 控件 來完成的。從圖中可以看出，在每一個(gè)商品中，通過點(diǎn)擊商品的圖片、 名稱以及詳細(xì)信息，都可以跳轉(zhuǎn)到相應(yīng)商品信息的頁面，與此同時(shí)，如果用戶對該商品的食譜感興趣的話，只需要點(diǎn)擊詳細(xì)食譜，就能迅速跳轉(zhuǎn)到該商品的相應(yīng)食譜頁面，從而進(jìn)行瀏覽商品食譜的基本信息。 瀏覽更多單品頁面，如圖 36 所示： 該頁面主體框架是用 Table 來進(jìn)行布局的，該頁面中，最主要用來顯示單品信息，其中詳細(xì)信息與詳細(xì)食譜等內(nèi)容是 通過 Datalist 控件 來完成的。從圖中可以看出，在每一個(gè)商品中，通過點(diǎn)擊商品的圖片、名稱以及詳細(xì)信息，都可以跳轉(zhuǎn)到相應(yīng)商品信息的頁面，與此同時(shí)，如果用戶對該商品的食譜感興趣的話，只需要點(diǎn)擊詳細(xì)食譜，就能迅速跳轉(zhuǎn)到該商品的相應(yīng)食譜頁面，從而進(jìn)行瀏覽商品食譜的基本信息。 瀏覽食譜的購買頁面，如圖 36 所示： 該頁面引用的用戶定義控件 來作為頁面的頭部，頁面頭部的主體部分主要使用 Table 和 div+css 來布的局。該頁面的中間顯示食譜的部分主要是通過 Table 來進(jìn)行布局的，當(dāng) 用戶對該商品的食譜有興趣的時(shí)候，就跳轉(zhuǎn)到該頁面，從而進(jìn)行瀏覽該商品的食譜信息。如果用戶看過之后覺得符合自己的所需，那么用戶只需要點(diǎn)擊商品編號(hào)右側(cè)的該買按鈕，就可以實(shí)現(xiàn)對該商品的購買了。 第 節(jié) 程序代碼框架結(jié)構(gòu)設(shè)計(jì)思想 第 4 章 系統(tǒng)的實(shí)現(xiàn) 第 節(jié) 前臺(tái)菜譜 類型列表，如圖 41 所示 ： 圖 41 在該模塊中，要實(shí)現(xiàn)的最主要功能是在用戶點(diǎn)擊了“ +”和“ ”按鈕后，進(jìn)入相應(yīng)食譜類型的商品名稱列表，在用戶點(diǎn)擊每個(gè)商品名稱之后，可以在右側(cè)查看相應(yīng)商品菜譜的知識(shí)。這就用到了 asp:TreeView控件，該功能的 具體實(shí)現(xiàn) 方法 如下： table class=style1 tr td asp:TreeView ID=TreeView1 runat=server /asp:TreeView /td /tr /table 該控件顯示的后臺(tái)代碼： public void ReadDB1() { //通過 的 connectionStrings 獲得數(shù)據(jù)庫連接字符串。 string strConn = [TestDBConnectionString]. ConnectionString。 //創(chuàng)建數(shù)據(jù)庫連接對象 SqlConnection conn = new SqlConnection(strConn)。 ()。 SqlDataAdapter adp = new SqlDataAdapter(select * from ProCata, conn)。 DataSet ds = new DataSet()。 (ds)。 DataView dv = [0].DefaultView。 = ParentId=0。 foreach (DataRowView drv in dv) { TreeNode RootNode = new TreeNode([CataName].ToString(), [TypeId].ToString())。 BuildNode(ds, RootNode)。 (RootNode)。 = 。 } ()。 } 第 節(jié) 前臺(tái)菜譜 展示，如圖 42 所示 ： 圖 42 該功能主要實(shí)現(xiàn)了點(diǎn)擊左側(cè)的 treeview 控件的商品名稱，右側(cè)顯示相應(yīng)商品的菜譜知識(shí)： 點(diǎn)擊商品名稱的鏈接實(shí)現(xiàn)的后臺(tái)代碼： public void BuildNode(DataSet ds, TreeNode node) { //通過 的 connectionStrings 獲得數(shù)據(jù)庫連接字符串。 string strConn = [TestDBConnectionString]. ConnectionString。 //創(chuàng)建數(shù)據(jù)庫連接對象 SqlConnection conn = new SqlConnection(strConn)。 ()。 SqlDataAdapter adp = new SqlDataAdapter(select * from ShipuType , conn)。 DataSet d = new DataSet()。 (d)。 DataView dv = [0].DefaultView。 = ParentId= + 。 foreach (DataRowView drv in dv) { TreeNode ChildNode = new TreeNode([ProName].ToString(), [ProId].ToString())。 = (?ProId= + drv[ProId].ToString())。 = Main。