演示視頻：

https://www.bilibili.com/video/BV14e411C7Td/

第4章訂餐前臺設(shè)計(jì)與實(shí)現(xiàn)

網(wǎng)站的整個前臺部分是供消費(fèi)者瀏覽、選購的部分，一個好的網(wǎng)站的前臺部分一定非常精美，非常有條理，因此，前臺的設(shè)計(jì)主要把握3點(diǎn)：簡明扼要、條理清晰、層次分明。下面將一一介紹我的訂餐系統(tǒng)的前臺部分的實(shí)現(xiàn)。

3.1 通用文件設(shè)計(jì)

這里所說的通用文件是指在開發(fā)系統(tǒng)頁面中，經(jīng)常會使用到的文件。本系統(tǒng)包括了下面兩個通用文件，分別是系統(tǒng)頭文件和數(shù)據(jù)庫連接文件。

1．系統(tǒng)頭文件

系統(tǒng)的頭文件被放置在整個網(wǎng)頁的頂部，它的主要功能是導(dǎo)航。通過頭文件的鏈接，可以很方便、快捷地進(jìn)入其他頁面。此外，由于它的位置突出，也放置一些重要的提示信息，如目前用戶的狀態(tài)，是否有未處理的訂單等。頭文件的設(shè)計(jì)盡量以簡單、實(shí)用為主。

頭文件由網(wǎng)站的logo、用戶功能區(qū)、快速導(dǎo)航條、用戶當(dāng)前狀態(tài)組成。

需要說明的是：當(dāng)用戶還沒有登錄時，在狀態(tài)區(qū)中將顯示請“登錄”狀態(tài)；如果用戶已經(jīng)注冊登錄了，在狀態(tài)區(qū)中將顯示該用戶的會員名，并顯示該會員的未處理訂單的數(shù)目。

在用戶狀態(tài)區(qū)中，主要是通過response對象的cookies集合將用戶登錄時的數(shù)據(jù)信息，存儲到內(nèi)存變量中，根據(jù)這一變量信息來識別用戶是否登錄。

2．?dāng)?shù)據(jù)庫連接文件

為了使每個網(wǎng)頁都能方便的訪問到數(shù)據(jù)庫，要先建立一個數(shù)據(jù)庫連接文件。此文件由DataConnect類實(shí)現(xiàn)。這是一個功能性文件，主要作用是連接服務(wù)器中的數(shù)據(jù)庫，凡要調(diào)用數(shù)據(jù)庫的地方，現(xiàn)在就可以直接引用它了。

3.2 首頁設(shè)計(jì)

首頁模塊包括3個主要的部分，采用內(nèi)嵌框架技術(shù)。首頁中的系統(tǒng)頭文件，現(xiàn)在只要用包含文件的方式調(diào)用就可以了。網(wǎng)站首頁如圖3.1所示。

圖3.1 網(wǎng)站首頁

3.3 網(wǎng)站會員設(shè)計(jì)

會員是構(gòu)成網(wǎng)站主體的一個重要組成部分，網(wǎng)站設(shè)置會員塊的目的之一在于方便網(wǎng)站信息的管理，尤其是商務(wù)網(wǎng)站，獲取了注冊會員的資料信息，才能根據(jù)這些信息進(jìn)行按單發(fā)貨、資料統(tǒng)計(jì)、地區(qū)整理的工作。因此，將會員作為模塊來劃分是很有必要的。

所謂的會員模塊，是指包含會員注冊和各項(xiàng)操作在內(nèi)的活動集合體。下面分析這流程中需要實(shí)現(xiàn)的個模塊和實(shí)現(xiàn)的功能。

4.3.1會員注冊與登錄

首先，是會員注冊和資料的登記，這兩個界面比較簡單。在成為會員之前要進(jìn)行注冊。注冊時，有注冊條款的閱讀，確定后進(jìn)入簡單的信息登記。在注冊信息登記中，先判斷用戶名是否重復(fù)。并且對輸入的E-mail的格式進(jìn)行檢查，輸入不正確時，要重新輸入。同時，系統(tǒng)會驗(yàn)證前后輸入的密碼是否一樣。此外，對必須登記的項(xiàng)目，要填寫，否則不能注冊成功。顯示的注冊條約是在后臺已經(jīng)設(shè)置好的，打開數(shù)據(jù)庫就可以讀取了。接受用戶提交的信息后，先根據(jù)用戶名打開數(shù)據(jù)庫中的會員信息表，查詢該用戶名是否已經(jīng)存在。然后通過使用JavaScript腳本語言編寫的check函數(shù)對輸入的其他信息進(jìn)行判斷，根據(jù)不同的情況出現(xiàn)不同的提示，直至正確。Zui后，將提交的信息寫入數(shù)據(jù)庫。值得注意的是：通過一個變量，保存用戶的注冊時間段，可以限制用戶在短時間內(nèi)多次重復(fù)注冊。這些功能的實(shí)現(xiàn)主要由注冊文件reg.java完成。如圖3.3所示。

圖3.3 會員注冊界面

其次，是登錄界面，注冊成功后的用戶在下次進(jìn)入時，需要進(jìn)行登錄，其主要功能就是識別是否是注冊會員。會員登錄主要由兩個文件組成：一個是界面設(shè)計(jì)文件，一個是檢測用戶名文件。前者是設(shè)計(jì)頁面，后者是純數(shù)據(jù)查詢功能文件。本系統(tǒng)中，他們分別為類logins.java和checkuser.java文件。

單擊“登錄”按鈕后，先通過用JavaScript編寫的函數(shù)checkuu()來檢測是否輸入了用戶名和密碼，如果沒有輸入，便鎖定相應(yīng)的文本框進(jìn)行輸入。確定輸入完成以后，將輸入表單中接受的信息，提交給文件控制層，由它查詢該用戶是否存在于數(shù)據(jù)庫中的會員資料表中，如果存在便進(jìn)入相應(yīng)的界面，否則出現(xiàn)相應(yīng)的提示。登錄界面是由文件user.jsp實(shí)現(xiàn)的。

在將表單信息提交給文件checkusers.java處理時，先由函數(shù)checkuu()檢測提交的信息是否完整。同時，控制字體“正在登錄……”字樣的顯示，也是在該文件中通過visibility屬性的設(shè)置來實(shí)現(xiàn)的。函數(shù)checkuu()的是用JavaScript腳本語言來編寫的。通過函數(shù)checkuu()檢測無誤后，將表單提交的信息轉(zhuǎn)給文件checkusers.java來處理，該文件根據(jù)獲取的信息，在數(shù)據(jù)庫會員信息表中查詢獲得的用戶名，并作相應(yīng)的處理。當(dāng)用戶登錄成功后系統(tǒng)會記錄本次登錄的信息，包括登錄時間，登錄次數(shù)等等，如圖3.4所示。

圖3.4 登錄界面

3.4 會員訂餐設(shè)計(jì)

在會員模塊中，除可以查看和修改個人的資料信息，還可以訂餐。由于商業(yè)網(wǎng)站的主要業(yè)務(wù)是銷售餐品，因此將介紹的會員購物模塊也是訂餐系統(tǒng)的關(guān)鍵部分，經(jīng)過設(shè)計(jì)，會員在訂餐時包括以下幾個模塊。

購物車模塊：用于保存會員選購的餐品。

生成并顯示訂單模塊：在會員確定購買后，生成訂單，并將訂單信息顯示在頁面中，如圖3.5所示。

圖3.5 會員購物

4.4.1購物車設(shè)計(jì)

會員登錄后，在頁面的任何一個地方，單擊“購買”鏈接，就可以將對應(yīng)的餐品放入購物車，購物車的作用是暫時存放選中的餐品，并顯示相應(yīng)的產(chǎn)品信息。

將選購餐品放入購物車中，是由文件add_bk.java和文件show_cart.java共同完成的。前者是一個純功能性文件，在會員單擊“購買”鏈接時，獲得該餐品的ID號，并根據(jù)ID號查詢餐品的其他信息，一起保存到數(shù)組變量Session中。 當(dāng)文件add_bk.java執(zhí)行完將購物信息寫入Session數(shù)組變量后，便轉(zhuǎn)向由文件show_cart.java完成購買餐品信息顯示頁面。在該文件中，調(diào)出保存餐品信息的數(shù)組變量Session，并通過循環(huán)句While...Wend將保存信息中購買餐品數(shù)不為零的信息，顯示出來，同時設(shè)置修改數(shù)量、取消、收藏餐品的鏈接等，如圖3.6所示。

圖3.6 購物車

4.4.2個人信息設(shè)計(jì)

當(dāng)會員在購物車中確定好選購的餐品品種和數(shù)量后，單擊“去下訂單”按鈕時，便進(jìn)入確定購物信息和個人信息的頁面，如果會員在注冊時，沒有登記個人詳細(xì)的收貨信息，便進(jìn)入個人信息的錄入頁面；如果錄入完成或注冊時就已經(jīng)填寫了詳細(xì)的收貨信息，則顯示全部個人信息，并提供修改信息的鏈接。

在會員購物車中單擊“購買”按鈕后，將出現(xiàn)會員餐品信息和個人信息確定頁面，該頁面用于顯示會員購買餐品的全部信息，包括餐品信息、個人資料信息、送貨方式、支付方式，這時還沒有生成訂單，用戶還可以取消訂單，也就是說，只要不單擊“生成訂單”按鈕，就不會生成訂單。

顯示購買餐品全部信息的界面是由文件orderedit.java實(shí)現(xiàn)的。為了更加合理地處理頁面中各項(xiàng)數(shù)據(jù)的修改和更新，我們將各項(xiàng)功能模塊分別寫成不同的過程，保存在文件cartfunction.java中，并將該文件包含在orderedit.java文件中，當(dāng)需要實(shí)現(xiàn)哪項(xiàng)功能時，只要調(diào)用該項(xiàng)功能的過程就可以了。

在調(diào)用各過程，實(shí)現(xiàn)各功能前，還要在文件orderedit.java中，編寫JavaScript函數(shù)，用于響應(yīng)列表框中選項(xiàng)改變和單擊選項(xiàng)事件。

3.5 生成訂單

當(dāng)用戶單擊“生成訂單”按鈕后，將自動生成訂單并顯示出來。在生成的訂單中，除了顯示會員收貨信息和購物餐品信息外，還有會員購餐品匯款時的網(wǎng)絡(luò)帳號。

單擊“生成訂單”按鈕后，則將表單的信息和Session數(shù)組變量保存的信息全部寫入數(shù)據(jù)庫，生成訂單；并通過生成訂單表和多表聯(lián)合查詢。共同顯示整個生成的訂單的全部信息。

4.5.1查看生成訂單

本系統(tǒng)中不僅在生成訂單時，顯示訂單信息，而且還可以在“我的帳戶”中查看歷史訂單，刪除訂單和修改訂單的進(jìn)程狀態(tài)。會員在前臺修改訂單狀態(tài)后，后臺網(wǎng)站管理人員就可以查看到，同時，后臺人員也可以修改訂單的狀態(tài)，并將狀態(tài)信息反饋給會員，從而使整個訂單的進(jìn)程很透明，便于信息的交流。

當(dāng)在“我的帳戶”中的訂單信息管理欄中單擊某訂單的“查看”鏈接后，便獲取該訂單的訂單號，并將訂單號提交給文件dingdang.java，由該文件獲取訂單號后查詢相關(guān)信息，并將結(jié)果顯示在頁面中。

第5章商城后臺設(shè)計(jì)與實(shí)現(xiàn)

此章將介紹購物網(wǎng)站后臺管理的設(shè)計(jì)，前臺功能的實(shí)現(xiàn)都離不開后臺各項(xiàng)數(shù)據(jù)的錄入和設(shè)置?？梢哉f整個系統(tǒng)的執(zhí)行是從后臺開始的如：要顯示餐品，需要從后臺錄入餐品資料等等。整個后臺系統(tǒng)流程如圖3.1所示。

圖3.1 管理員程序流程圖

3.1 后臺登錄界面和主頁面界面設(shè)計(jì)

為了確保后臺數(shù)據(jù)的安全性，進(jìn)入后臺系統(tǒng)時，必須先登錄，才能進(jìn)入。此外，按用戶名登錄后臺系統(tǒng)還可以識別管理人員的權(quán)限，從而依據(jù)權(quán)限進(jìn)行相應(yīng)的操作。

登錄成功后，管理人員便進(jìn)入后臺系統(tǒng)的主要界面，該主頁界面包括兩部分：一是系統(tǒng)操作導(dǎo)航菜單，二是本系統(tǒng)的名字。下面分別介紹他們的實(shí)現(xiàn)方法。

5.1.1登錄界面的設(shè)計(jì)

此登錄界面的設(shè)計(jì)方法很簡單，和普通的登錄界面一樣，用于對操作人員登錄時的身份驗(yàn)證。主要由兩個文件組成。一是設(shè)計(jì)界面的文件，主要功能是接收用戶輸入的信息，如：姓名、密碼。另外一個是實(shí)現(xiàn)登錄功能的文件，主要作用是在數(shù)據(jù)庫的相關(guān)表中查找用戶名和密碼信息，找到則進(jìn)入后臺主頁，找不到則出現(xiàn)錯誤提示信息。

該界面是由JAVA文件實(shí)現(xiàn)的。在文件中，建立一個表單，供用戶登錄時輸入用戶名和密碼，并將接受的信息轉(zhuǎn)給JAVA文件來處理。

在提交信息之前，先通過函數(shù)lg_check()對輸入表單的信息是否完整進(jìn)行檢測。函數(shù)lg_check()是用JavaScript腳本語言編寫的。

在確認(rèn)提交的信息完整后，表單將信息提交給文件chkadmin.JAVA，該文件接受表單信息后，根據(jù)用戶名查詢數(shù)據(jù)庫中的記錄，找到記錄后，核對用戶名是否與密碼相符，如果無誤則進(jìn)入后臺系統(tǒng)主頁，否則出現(xiàn)錯誤信息提示。

5.1.2后臺主頁的設(shè)計(jì)

在設(shè)計(jì)后臺主頁時，由于整個后臺系統(tǒng)以管理信息為主，因此，在界面設(shè)計(jì)上盡量簡潔，以方便操作為主。此系統(tǒng)的后臺管理主頁是由一個框架結(jié)構(gòu)構(gòu)成的，當(dāng)用戶單擊導(dǎo)航菜單鏈接時，右邊的框架中將顯示相應(yīng)的界面。

后臺主頁是由JAVA文件實(shí)現(xiàn)的。在文件中用框架結(jié)構(gòu)的方式調(diào)用文件完成。在后臺主頁面的左邊框架中，是文件menu.java實(shí)現(xiàn)的菜單導(dǎo)航頁面，該文件中使用JavaScript腳本語言編寫了2個函數(shù)，第一個是直接用于圖象和文字的顯示；第二個用于單擊后，展開導(dǎo)航菜單，然后，再向函數(shù)中輸入實(shí)參，實(shí)現(xiàn)主頁左邊部分的界面設(shè)計(jì)。

3.2 訂單信息查看

會員在前臺下訂單購買餐品，后臺的管理人員通過查看訂單信息才能給會員配貨發(fā)餐品。因此，查看餐品訂單信息是后臺管理系統(tǒng)的一重要內(nèi)容，它可以在第一時間查看到新增的購餐品訂單，并根據(jù)訂單的內(nèi)容，進(jìn)行配餐品；同時，還可以通過查看或修改會員訂單進(jìn)程狀態(tài)，來反饋訂單的進(jìn)程。

后臺訂單處理流程圖，如圖3.2所示。

圖3.2 后臺購物流程圖

在訂單信息查看頁面，除可以分頁瀏覽訂單大致內(nèi)容外，還可以單擊訂單號查看訂單的詳細(xì)內(nèi)容，同時，還可以通過用戶名來查詢該用戶的所有訂單信息。

查看訂單信息的功能是由文件editdingdan.java完成的。在該文件中，使用多表連接顯示訂單信息，用Select case語句查詢不同進(jìn)程狀態(tài)的訂單信息。通過在數(shù)據(jù)庫的相關(guān)表中搜索用戶名字段，實(shí)現(xiàn)按用戶名查詢訂單信息的功能。

3.3 管理員模塊

管理員是本系統(tǒng)的重要組成部分，普通會員登錄后可以選擇購買餐品、查看購物車情況、查看購物明細(xì)，還可以修改購買餐品的數(shù)量以及支付費(fèi)用情況等操作而管理員登錄系統(tǒng)后可以進(jìn)行推薦餐品、刪除餐品、設(shè)置餐品級別、是不是特價餐品等一系列操作。

3.4 類別資料管理

將餐品分類，是錄入餐品前首先要做的一項(xiàng)工作。只有進(jìn)行了很細(xì)致的分類，才能便于餐品的錄入與以后的餐品管理。此系統(tǒng)將餐品分為兩類：大類和小類，其中大類中包括所有的小類，小類是大類的子類。

5.4.1餐品大類

餐品大類將列出餐品的整體類別范疇，然后，再由餐品的大類，衍生出大類中的小類，從而完成餐品的類別劃分。在餐品大類管理頁面中，可以瀏覽所有的餐品類別，并能增加新的大類，還可以對原有的類別進(jìn)行修改和刪除。同時，可以控制某一類別是否出現(xiàn)在前臺的類別區(qū)。

餐品大類管理界面是由文件anclass.java完成的，在文件中，先將大類界面分為兩個部分，左邊部分用于修改和刪除已經(jīng)有的大類名稱和排序號。右邊部分用于增加新的大類名稱。兩個部分設(shè)置兩個表單，用于操作人員輸入信息。

在餐品大類管理界面中，單擊頁面左邊部分的“修改”按鈕，則向文件saveanclass.java提交表單信息，該文件接受信息后，根據(jù)接收的action值和信息的ID號，更新信息的內(nèi)容。

在餐品大類管理界面中，單擊頁面左邊部分的“刪除”按鈕，則向文件saveanclass.java提交表單信息，該文件接受信息后，刪除相應(yīng)ID號的信息。

單擊頁面右邊部分的“增加”按鈕，則向文件saveanclass.java提交表單信息，該文件接受信息后，將信息寫入數(shù)據(jù)庫，完成增加大類的功能。

5.4.2餐品小類

在設(shè)置完餐品大類后，接下來就是根據(jù)餐品的大類來劃分相應(yīng)的小類。在設(shè)置餐品小類頁面中，可以根據(jù)餐品大類增加小類，并對已經(jīng)有的小類進(jìn)行修改或者刪除。同時，還可以實(shí)現(xiàn)某一小類在大類間的移動以及控制各小類間的排列順序。

餐品小類的管理的界面是由文件nclass.java實(shí)現(xiàn)的。在瀏覽或增加小類時，必須先選擇小類所屬于的大類，選擇并進(jìn)入某一大類后，頁面的左邊顯示該大類的所有小類，并可以對它們修改或刪除，在頁面的右邊可以增加該大類的小類。

在進(jìn)入某大類餐品的小類頁面后，單擊頁面左邊的小類“修改”按鈕，在將表單信息提交處理前，先通過函數(shù)checkxl()，檢測提交信息的完整性，該函數(shù)是使用JavaScript腳本語言編寫的。在確定增加或修改的大類中的小類信息無誤后，便將該表單的信息提交給文件savenclass.java，該文件接受提交的信息，打開數(shù)據(jù)庫記錄，增加或更新該小類信息。

單擊頁面左邊的小類“刪除”按鈕，便將該表單的信息提交給文件savenclass.java，該文件接受提交的信息，根據(jù)提交的信息ID號，刪除相關(guān)記錄。

3.5 餐品資料管理

輸入餐品資料，是后臺管理系統(tǒng)的一項(xiàng)日常的工作。所有在前臺銷售的餐品資料，都是通過后臺輸入的，可見這一功能的重要性。考慮到它的重要性和錄入時需要很多詳細(xì)的信息，我們把餐品資料管理分為三個部分：第一部分瀏覽餐品資料，第二部分增加餐品資料，第三部分修改原有的餐品資料。

3.3.1 瀏覽餐品資料

該頁面以分頁瀏覽的方式查看全部的餐品資料信息，并可以查詢某一種餐品的詳細(xì)資料信息。同時還可以對不需要的餐品資料，選中后刪除。餐品管理流程圖如圖3.6所示。

圖3.6 餐品管理流程圖

瀏覽餐品的功能是由文件managebook.java實(shí)現(xiàn)的。在文件中，先調(diào)出數(shù)據(jù)庫中的shop_books表，分頁顯示；當(dāng)查詢某一餐品時，通過向表單提交關(guān)鍵字信息和查詢方式，然后，根據(jù)這兩個條件在數(shù)據(jù)庫表中找到相匹配的記錄，調(diào)用顯示內(nèi)容過程showcontent顯示出來；刪除記錄時，通過獲取打勾選項(xiàng)的ID號來實(shí)現(xiàn)刪除功能。

3.3.2 增加餐品資料

增加餐品資料，對于購物網(wǎng)站系統(tǒng)來說，是后臺中用的Zui多的一項(xiàng)，因?yàn)槊刻於紩写罅康牟推焚Y料錄入數(shù)據(jù)庫中，來豐富網(wǎng)站的產(chǎn)品。

在增加新的餐品資料記錄時，在列表框中選擇已經(jīng)分類的類別信息，用戶只要選擇大類，屬于這一大類的小類就出現(xiàn)在小類欄中，這樣既方便了錄入數(shù)據(jù)庫時的操作，又保證了數(shù)據(jù)的完整性、統(tǒng)一性。

實(shí)現(xiàn)餐品大類和小類相互關(guān)聯(lián)的主要思路是：先將全部的餐品類別保留在一個數(shù)組中，然后，通過餐品大類列表框選項(xiàng)的改變事件，獲取大類ID號，根據(jù)ID號將數(shù)組中對應(yīng)的小類ID號和名稱賦值給小類列表框，從而實(shí)現(xiàn)大類改變，小類也相應(yīng)變化的功能。

當(dāng)錄入新餐品時，只要對出版單位進(jìn)行選擇，無須填寫，可以提高工作效率，設(shè)置文本框，單擊它時，出現(xiàn)下拉的列表框，顯示全部的出版單位名稱，選中選項(xiàng)后，下拉列表框自動隱藏。

文本框下面的列表框初始時是隱藏的，當(dāng)單擊文本框時，列表框才出現(xiàn)；選中選項(xiàng)后，將列表框的值賦值給文本框，同時列表框自動隱藏，控制是否隱藏是通過列表框的屬性style的display的值來實(shí)現(xiàn)的。

3.3.3 修改餐品資料

當(dāng)餐品錄入完成，寫入數(shù)據(jù)庫后，還可以對它進(jìn)行修改。對原有餐品資料的修改，也是餐品資料管理的一部分。通過對餐品信息的修改，可以很方便地改變折扣、封面，避免了重新錄入的麻煩，在瀏覽餐品信息時，單擊“餐品名”便可以進(jìn)入該餐品的修改狀態(tài)。其界面和增加餐品的界面差不多。

3.7 網(wǎng)站人員的管理

為確保后臺數(shù)據(jù)系統(tǒng)的安全，進(jìn)入后臺系統(tǒng)必須先登錄才能進(jìn)行操作。因此，首先要在數(shù)據(jù)庫中增加人員記錄并設(shè)置權(quán)限，操作人員依據(jù)用戶名和密碼進(jìn)入后臺系統(tǒng)，在自己的權(quán)限內(nèi)進(jìn)行操作。

需要說明的是：只有具備了管理權(quán)限的人員，才能添加、修改、刪除網(wǎng)站內(nèi)容，其他后臺人員和不具備這項(xiàng)權(quán)限的操作人員，只能修改自己的密碼。

網(wǎng)站人員管理是一個集增加、修改、刪除為一體的綜合管理模塊。通過這一模塊，管理人員完成對所有網(wǎng)站人員的管理。當(dāng)然只有具備管理權(quán)限的人員才能進(jìn)行這些操作。

填寫用戶名和密碼設(shè)置權(quán)限后，單擊“添加” 按鈕，便將信息提交給文件savemin.java，它是來完成增加新人員的功能；單擊“修改”鏈接，便獲得該人員的ID號，在數(shù)據(jù)庫中找到相應(yīng)記錄，顯示在界面右邊。修改完成后，單擊“保存”按鈕，還是將信息提交給文件saveadmin.java由它來完成修改操作。刪除功能和修改實(shí)現(xiàn)方