【導(dǎo)讀】電子商務(wù)網(wǎng)站原型設(shè)計(jì)。學(xué)生姓名謝道賢學(xué)號(hào)202020611122. 所在學(xué)院信息學(xué)院班級(jí)電子1113. 所在專業(yè)電子信息工程。申請(qǐng)學(xué)位工學(xué)學(xué)士。指導(dǎo)教師李小立職稱講師。答辯時(shí)間2020年6月6日

　　

【正文】 統(tǒng)設(shè)計(jì) 中發(fā)揮了重要作用。比如：特效、輸入框驗(yàn)證、計(jì)算訂單數(shù)據(jù)、 Ajax交互等。 廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 21 － 圖 44 部分引用的 javascript 代碼 廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 22 － 圖 45 Ajax異步通信關(guān)鍵代碼 系統(tǒng)調(diào)試過(guò)程 Asp代碼程序需要運(yùn)行在一定的環(huán)境下。本系統(tǒng)程序運(yùn)行環(huán)境采用 aws快速搭建環(huán)境工具快速搭建成 asp環(huán)境。環(huán)境搭建好后，在 Dreamweaver cs6 中，打開(kāi)要調(diào)試的網(wǎng)頁(yè)，按 F12即可調(diào)試網(wǎng)頁(yè)。 功能測(cè)試：鏈接測(cè)試正常，表單測(cè)試正常，數(shù)據(jù)庫(kù)測(cè)試正常。 性能測(cè)試：連接速度測(cè)試正常，負(fù)載測(cè)試正常 完工 通過(guò)一系列的開(kāi)發(fā) 和調(diào)試，本系統(tǒng) 。 第 5章 后臺(tái)管理功能 后臺(tái)管理包括：菜單的增刪改功能、菜單排序功能、菜單推薦和下架功能、訂單搜索功能、訂單刪除和備注功能、編輯和修改企業(yè)簡(jiǎn)介聯(lián)系我們欄目功能等 [8] 廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 23 － 登錄介紹 登錄頁(yè)采用 session加密和 ajax后臺(tái)通信技術(shù)，加密性能強(qiáng)。使用的 ajax使交互更加友好。登錄界面如圖 51 圖 51 登錄界面 本系統(tǒng)設(shè)計(jì)時(shí)強(qiáng)制要求用戶要同時(shí)輸入帳號(hào)和密碼，否則會(huì)卡住不能進(jìn)入下一步。當(dāng)用戶輸錯(cuò)了密碼，系統(tǒng)則會(huì)提示如圖 52 圖 52 登錄失敗圖示 如果用戶輸入的帳號(hào)和密碼匹配，則轉(zhuǎn)到名為 。有人說(shuō)那直接訪問(wèn)這個(gè)頁(yè)面不就行了？當(dāng)然不行。全站后臺(tái)修改頁(yè)已經(jīng)采用了高強(qiáng)度的 session加密技術(shù)，帳號(hào)和密碼不匹配的都登錄不成功。這在安全上是很穩(wěn)定的。 成功登錄界面如圖 53 廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 24 － 圖 53 后臺(tái)管理頁(yè) 前臺(tái)的菜單列表、菜單推薦、企業(yè)簡(jiǎn)介欄目、聯(lián)系我們欄目、訂單信息等，都能在這里實(shí)現(xiàn)統(tǒng)一交互優(yōu)良的管理。 本頁(yè)面是 SpryAssets框架集，可以使菜單之間友好切換，讓管理更具人性化。 產(chǎn)品排序介紹 首頁(yè)產(chǎn)品排序。如圖 54 廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 25 － 圖 54 菜單管理模塊 /這里的排序號(hào)是控制前臺(tái)菜單的顯示順序的。這個(gè)系統(tǒng)設(shè)置的時(shí)候，這個(gè)后臺(tái)看到的排列順序，就是前臺(tái)菜單的排列順序。那么，我想把酸梅湯排到首頁(yè)第一位橙汁排到第三位該怎么做呢？很簡(jiǎn)單，他們的排列規(guī)則是按照排列號(hào)從大到小依次排序的，所以，酸梅湯的排列號(hào)改為最大，暫且設(shè)置為 1000，橙汁設(shè)置為第三大，就可以了。如圖 55，已經(jīng)對(duì)他們成功進(jìn)行了排序 廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 26 － // 圖 55 排序視圖 另外，還要注意的是，這里的排序有個(gè)小技巧。最上面的那個(gè)排序是可以批量排序的，下面那些排序按鈕則只能針對(duì) 對(duì)應(yīng)的產(chǎn)品進(jìn)行排序，如圖 56 廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 27 － 圖 56 批量排序和單個(gè)排序演示 產(chǎn)品增刪改功能介紹、產(chǎn)品詳細(xì)編輯功能介紹 本系統(tǒng)設(shè)計(jì)得都是非常簡(jiǎn)單人性化易操作的。如圖 57，如果需要添加產(chǎn)品，就點(diǎn)添加一個(gè)產(chǎn)品按鈕；如果不想要某個(gè)菜品，則點(diǎn)擊刪除按鈕；如果對(duì)當(dāng)前產(chǎn)品的價(jià)格或者圖片不滿意，則可以點(diǎn)擊修改按鈕 [9]。下面分別介紹。 廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 28 － 圖 57 增刪改圖示 添加“紅燒肉”菜品演示 點(diǎn)擊上面的“添加一個(gè)產(chǎn)品按鈕”，系統(tǒng)會(huì)進(jìn)入如圖 58: 廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 29 － 圖 58 添加產(chǎn)品 按要求填 寫好后，點(diǎn)擊完成編輯按鈕即可，如圖 59 廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 30 － 圖 59 添加產(chǎn)品功能詳解 再查看前臺(tái)，發(fā)現(xiàn)已經(jīng)成功添加，如圖 510 廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 31 － 圖 510 成功添加產(chǎn)品圖示 當(dāng)點(diǎn)擊紅燒肉的圖片時(shí)，出現(xiàn)如圖 511。這個(gè)詳細(xì)頁(yè)面是剛才在那個(gè)編輯器里編輯的 廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 32 － 圖 511 彈出詳細(xì)頁(yè) 刪除頁(yè)面和修改頁(yè)面大體雷同，點(diǎn)一點(diǎn)誰(shuí)都會(huì)的。而且本系統(tǒng)設(shè)計(jì)的交互很友好。 優(yōu)惠推薦功能介紹 餐飲商家有時(shí)候需要將一些菜品推薦到優(yōu)惠欄目里，這在后臺(tái)也有一個(gè)專門的管理。如圖 512： 廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 33 － 圖 512優(yōu)惠推薦管理 很簡(jiǎn)單，要把某個(gè)菜品下架 ，點(diǎn)不推就行了。需要上架某個(gè)菜品，則填寫好數(shù)字，把它推上去就可以了。具體控制的欄目如圖 513： 廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 34 － 圖 513 前臺(tái)推薦 訂單搜索功能介紹 功能介紹：通過(guò)輸入姓名、地址或者電話進(jìn)行搜索訂單。多個(gè)條件以空格隔開(kāi)，不區(qū)分排列次序。 如圖 514，點(diǎn)擊訂單管理欄目，進(jìn)入訂單管理。系統(tǒng)默認(rèn)顯示的是全部訂單，并按下單時(shí)間排序。 圖 514 訂單管理入口 模型分析： 用戶在搜索訂單的時(shí)候，有可能輸入不同的內(nèi)容。比如，有可能是想輸入姓名進(jìn)行搜索的，有可能是想輸入地址進(jìn)行搜索的，有可能是想輸入電話進(jìn)行搜索的， 也有可能是想輸入姓名和地址進(jìn)行搜索的，也有可能是想輸入姓名地址和電話進(jìn)行搜索的等等，總之，用戶在搜索訂單時(shí)，姓名、地址和電話這三者用戶會(huì)輸入多少個(gè)條件，這些條件的排列次序會(huì)不會(huì)影響搜索結(jié)果？下面列舉用戶搜索的所有情況，如圖 515 圖 515 多種搜索情況 針對(duì)這么多的情況，本系統(tǒng)設(shè)計(jì)了嚴(yán)密的邏輯搜索算法。搜索條件限定為姓名、地址和電話，輸入的搜索條件越多則搜索越精確。多個(gè)條件直接用戶要以空格隔開(kāi)，不必?fù)?dān)心條件之間的排列順序，廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 35 － 因?yàn)樗惴ㄒ呀?jīng)把所有可能的搜索情況都囊括進(jìn)去了。 訂單刪除功能、訂單備注 功能 對(duì)于搜索出來(lái)的訂單，管理員有可能想將其刪除或者添加一些備注信息。本系統(tǒng)針對(duì)這些剛性需求深入開(kāi)發(fā)，使用 ajax異步通信技術(shù)，實(shí)現(xiàn)了人性化的刪除和添加備注管理模塊。見(jiàn)圖 516： 圖 516 訂單添加備注 勾選要?jiǎng)h除的訂單，點(diǎn)擊刪除就可以了。如果需要備注，在文本框里填寫好信息然后提交就可以了。因?yàn)槭鞘褂?ajax通信技術(shù)，用戶在操作這些步驟的時(shí)候，是不會(huì)打開(kāi)新頁(yè)面或者出現(xiàn)刷新需要等待重新載入頁(yè)面的，這就使得交互更加便捷，體驗(yàn)性更好。 廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 36 － 企業(yè)簡(jiǎn)介欄目、聯(lián)系方式欄目的編輯功能 圖 517 企業(yè)簡(jiǎn) 介、聯(lián)系方式編輯入口 這兩個(gè)欄目設(shè)計(jì)的也很人性化，用戶點(diǎn)擊欄目導(dǎo)航就能進(jìn)入編輯頁(yè)面。出現(xiàn)的那個(gè)編輯框，是現(xiàn)在最流行的 kindedior文本編輯器。它能使編輯工作變得輕松簡(jiǎn)易。同時(shí)，它又是所見(jiàn)即所得的編輯插件，管理員使用它們進(jìn)行編輯的時(shí)候，就象使用 word軟件一樣?？梢赃@么說(shuō)，只要會(huì)操作辦公軟件word或者 wps，就能編輯這兩個(gè)欄目的頁(yè)面。圖 518是對(duì)應(yīng)的電腦版的前臺(tái)，這兩個(gè)欄目就是由上面那個(gè)編輯器編輯控制顯示的。 圖 518 企業(yè)簡(jiǎn)介、聯(lián)系方式前臺(tái)展示 平臺(tái)注冊(cè)功能 本系統(tǒng)為平臺(tái)系統(tǒng)，可 以同時(shí)容納上萬(wàn)家商家入駐。用戶注冊(cè)后將得到一個(gè)專屬自己的地址。注廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 37 － 冊(cè)頁(yè)面為 如果用戶在這里注冊(cè)了個(gè)名為 bb的帳號(hào)，那么他的首頁(yè)地址就是 網(wǎng)址簡(jiǎn)短易記。注冊(cè)成功后，系統(tǒng)會(huì)發(fā)送一封郵件給注冊(cè)用戶，里面包含其帳號(hào)密碼等信息，如圖 519 圖 519 平臺(tái)注冊(cè) 如果已經(jīng)有用 戶注冊(cè)了這個(gè)昵稱，則該昵稱不能注冊(cè)。本系統(tǒng)采用 ajax技術(shù)，當(dāng)用戶一輸入昵稱，鍵盤彈起時(shí)，就能立刻觸發(fā)程序檢測(cè)后臺(tái)有沒(méi)有人已經(jīng)注冊(cè)了這個(gè)帳號(hào)。如果檢測(cè)到數(shù)據(jù)庫(kù)中沒(méi)有這個(gè)帳號(hào)，那么就會(huì)在頁(yè)面上顯示“可以注冊(cè)”字樣，否則顯示“不可注冊(cè)”，如圖 520 圖 520 不可注冊(cè) 本章小結(jié) 綜合以上，本章 主要講解了本應(yīng)用程序的后臺(tái)管理功能模塊。包括登錄介紹功能、產(chǎn)品排序功能、產(chǎn)品增刪改功能介紹、產(chǎn)品詳細(xì)編輯功能介紹、優(yōu)惠推薦功能介紹、訂單搜索功能介紹、訂單刪除功廣東海洋大學(xué) 2020屆本科生畢業(yè)設(shè)計(jì) － 38 － 能、訂單備注功能、企業(yè)簡(jiǎn)介欄目、聯(lián)系方式欄目的 編輯功能、平臺(tái)注冊(cè)功能。 第 6章 總結(jié) 從開(kāi)始對(duì)于設(shè)計(jì)的選擇，到現(xiàn)今的基本完工，這么一個(gè)漫長(zhǎng)的過(guò)程，總會(huì)遇到許許多多意料外和早有準(zhǔn)備的事情，在遇到預(yù)料中的事情能坦然接受，遇到意料外的事情時(shí)，積極尋找解決方案，這見(jiàn)證了我的成長(zhǎng)，也是一個(gè)人完成事情必須經(jīng)歷的過(guò)程。 一次次的努力，是一次次的進(jìn)步。一次次的嘗試，便能一次次的進(jìn)步，得到什么，能獲得什么，全在自己的手中，這是在這次設(shè)計(jì)中努力所得到的認(rèn)知，也是最大的收獲。 設(shè)計(jì)過(guò)程中，對(duì)于設(shè)計(jì)每一部分的掌握，設(shè)計(jì)完成時(shí)，能夠親手完成一件事物，那種滿足感能夠激勵(lì)我繼續(xù)去 完成新的挑戰(zhàn)，只是很單純的完成一件事物，但你總能在完成一件又一件事情時(shí)，體會(huì)到其中的不同，感受到遇到的苦難，積極去面對(duì)他，也只能面對(duì)。 遇到困難是非常令人沮喪的，會(huì)讓人停頓，有的人不會(huì)去繼續(xù)，有些人會(huì)放棄，可是很多人會(huì)繼續(xù)。這是因?yàn)檎鞣患虑?，能夠讓人覺(jué)得自豪，更不用說(shuō)，當(dāng)一個(gè)人能永遠(yuǎn)征服路上遇上的任何困難和挑戰(zhàn)后，便能不斷獲得的經(jīng)驗(yàn)，機(jī)遇，成功。當(dāng)你能夠完成你所接到的任務(wù)，當(dāng)你能完成你的目標(biāo)，這樣的人生從各種意義上來(lái)講，必定是非常完美和令人羨慕的，你永遠(yuǎn)走在一條自己超越自己的路上，你永遠(yuǎn)都在進(jìn)步，你一直 越來(lái)越優(yōu)秀。 這次的設(shè)計(jì)只是我人生中遇到的一次挑戰(zhàn)，從不熟到完成，中間經(jīng)歷的太多太多，給予幫助的人很多，努力很多，遇上的困難很多，不管怎么，都走過(guò)來(lái)了，我完成了，這就足以自豪，在今后的日子里，可以自豪的跟自己說(shuō)，我以前沒(méi)放棄，現(xiàn)在也不能放棄，這次只是一個(gè)起步，小小的成功，但他激勵(lì)了我，沒(méi)有放棄，才能成功，只有堅(jiān)持，才能解決。事情總是可以解決的，但是絕對(duì)要去做，要去積極面對(duì)，否則永遠(yuǎn)不會(huì)有什么進(jìn)展。 這便是這次設(shè)計(jì)給予的感受，也是我的收獲，終于完成了，心中是快樂(lè)的，以這種心態(tài)，去面對(duì)今后和接下來(lái)的挑戰(zhàn)吧。 鳴 謝 － 39 － 鳴 謝 本次畢業(yè)設(shè)計(jì)中，我首先要感謝我的父母 、哥哥姐姐 ，是父母含辛茹苦的養(yǎng)大我，養(yǎng)育之恩銘記于心。接著我要感謝 系輔導(dǎo)員元哥 和我們班的同學(xué)，一直以來(lái) 元哥、 班上的同學(xué)，無(wú)論是在學(xué)習(xí)還是生活上給予我很多的關(guān)心和照顧。本次畢業(yè)設(shè)計(jì)，感謝 李小立 老師的指導(dǎo)與技術(shù)支持。他為我分析了我的課題設(shè)計(jì)和技術(shù)路線 ，一次又一次不厭其煩的檢查我的論文、備注好要修改的地方然后郵件發(fā)回給我修正 ,特在此向他致以最崇高的敬意和最衷心的感謝！ 在此，我也要感謝那些給我授過(guò)課以及指導(dǎo)過(guò)我的老師們，感謝信息學(xué)院實(shí)驗(yàn)室的指導(dǎo)老師，在實(shí)驗(yàn)中給予的幫 助和教導(dǎo)，因?yàn)橛心銈?，所以在這個(gè)實(shí)驗(yàn)室的平臺(tái)上，我提高了實(shí)踐的操作能力。 我還要感謝那樣伴我成長(zhǎng)的同學(xué)朋友、師兄師姐，感謝您陪我度過(guò)大學(xué)四年最美好的時(shí)光。 我還要感謝我的班主任 郭曉云老師 ，感謝班主任四年的在學(xué)習(xí)和生活上的關(guān)心指導(dǎo)。 最后，祝愿我的導(dǎo)師 李小立 老師身體健康、家庭幸福美滿， 事業(yè)順利 ！ 參考文獻(xiàn) － 40 － 參考文獻(xiàn) [1]段雪麗 ,張小志．用 Dreamweaver 實(shí)現(xiàn)網(wǎng)站設(shè)計(jì)中數(shù)據(jù)源鏈接的四種方法 [J]．邢臺(tái)職業(yè)技術(shù)學(xué)學(xué)報(bào)， 2020， 23( 5): 64 － 67． [2]丁海燕 . 利用 Dreamweaver 實(shí) 現(xiàn)動(dòng)態(tài) HTML 表單菜單 [J]．昆明冶金高等?？茖W(xué)校學(xué)報(bào) ， 2020, 28(5):19 22． [3] 張雪 . 淺談網(wǎng)站建設(shè)與網(wǎng)站開(kāi)發(fā) [J]. 硅谷， 2020(23). [4]白喆 ,孫可 . 網(wǎng)站的技術(shù)優(yōu)化策略研究 [J]．沈陽(yáng)師范大學(xué)學(xué)報(bào) (自然科學(xué)版 )， 2020, 28(3):394 397． [5]張科星． Dreamweaver 中的框架 [J].電腦開(kāi)發(fā)與應(yīng)用， 2020(5):54 56 ． [6] 李紅升 . 基于 ASP 的網(wǎng)站開(kāi)發(fā) [J]. 計(jì)算機(jī)光盤軟件與應(yīng)用 . 2020(8). [7] 樊建墨 . 電子商務(wù)網(wǎng)站的設(shè)計(jì)思想 [J]. 《現(xiàn)代商業(yè)》 , 2020(17). [8] 王紀(jì)鳳 , 王昌元 , 王世剛 , 李鵬 , 趙學(xué)軍 . 淺談網(wǎng)站建設(shè)及網(wǎng)頁(yè)制作方法 [J]. 《中國(guó)科學(xué)信息》 , 2020(19). [9] 祁鳴鳴 . 淺析 asp 技術(shù)在動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)中的應(yīng)用 [J]. 科技信息 (科學(xué)教研 ), 2020(18). [10] JANE,. Put Your Business Online[J]. Kiplinger’ s personal finance,2020:7778 [11] Jill,J. Design Web Site Assist Die Casting Prod[J].I