基于HTML和CSS的網(wǎng)上書城系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

基于HTML和CSS的網(wǎng)上書城系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)摘要：當(dāng)今時(shí)代，網(wǎng)上書城的相關(guān)技術(shù)多種多樣，傳統(tǒng)線下書店和電商平臺也慢慢開發(fā)或使用了網(wǎng)上平臺來銷售圖書。于是一個(gè)快捷、可靠令用戶滿意的平臺，可以從中脫穎而出，獲得更多的資源和客戶。網(wǎng)上書城可以通過快捷的購物體驗(yàn)同不斷完善的支付方式以及完善的購物體系下減輕了運(yùn)營成本[3]并且隨著互聯(lián)網(wǎng)不斷發(fā)展我國多數(shù)消費(fèi)者已形成線上購物的習(xí)慣，網(wǎng)絡(luò)消費(fèi)群體仍不斷擴(kuò)大，相比線下傳統(tǒng)書城可能存在的品種單一和其他問題，在線上購買風(fēng)險(xiǎn)較小，不但受到當(dāng)今消費(fèi)者的喜愛，所以網(wǎng)上書城是未來圖書銷售行業(yè)發(fā)展的必然。本文研究的是網(wǎng)上書城系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)。使消費(fèi)者能夠便捷、滿意、舒適地通過可靠的平臺購買到自身所需的書籍。本系統(tǒng)需達(dá)到以下幾點(diǎn)：（1）商品種類豐富并可被搜索；（2）網(wǎng)站主頁面及各功能運(yùn)行正常；（3）用戶可通過第三方平臺支付；（4）后臺管理簡單高效；關(guān)鍵詞：網(wǎng)上書城；平臺；設(shè)計(jì)

目錄TOC\o"1-2"\h\u272761引言 4289962關(guān)鍵技術(shù)分析 5252232.1概述 5165572.2HTML技術(shù) 525242.3CSS技術(shù) 6223012.4Django框架 6148202.5MySQL數(shù)據(jù)庫 689913需求分析與實(shí)施方案 779803.1可行性分析 7323753.2功能需求分析 7138693.3開發(fā)環(huán)境 7241863.4實(shí)施方案 7181074系統(tǒng)設(shè)計(jì) 9154044.1總體設(shè)計(jì) 972084.2模塊功能具體設(shè)計(jì) 1167794.3數(shù)據(jù)庫設(shè)計(jì) 12264015系統(tǒng)的實(shí)現(xiàn) 167705.1登錄功能 16245295.2網(wǎng)上書城主界面 17220795.3個(gè)人中心 2012757主要代碼如下 23292185.4搜索功能 23186855.5購物車界面 2426495.6訂單界面 2533145.7退出登錄 27101886系統(tǒng)測試 27192616.1測試目的 27125786.2測試環(huán)境與測試條件 27190036.3測試方法 28113366.4測試內(nèi)容 2853817結(jié)論 33105767.1設(shè)計(jì)評價(jià) 33203167.2程序的改進(jìn)及目標(biāo) 332336參考文獻(xiàn) 356669致謝 36

1引言自進(jìn)入二十一世紀(jì)以來，互聯(lián)網(wǎng)和其相關(guān)技術(shù)的發(fā)展使各式各樣的線上店鋪不斷出現(xiàn)。隨著近年來網(wǎng)上書城對傳統(tǒng)書城的沖擊，一個(gè)簡單、可靠、迅速的網(wǎng)上書城系統(tǒng)則顯得尤為重要。網(wǎng)上書城隨此不斷增多，一種新型便捷的消費(fèi)模式開發(fā)便顯得尤為重要，借此可以在眾多的網(wǎng)上書城中脫穎而出，獲得更多客戶和資源。據(jù)相關(guān)數(shù)據(jù)顯示，截止在2020年我國圖書網(wǎng)上零售的市場規(guī)模為767.2億元，同比增長7.27%，在整個(gè)圖書零售市場的結(jié)構(gòu)中占比高達(dá)79%[1]。此外，根據(jù)國際權(quán)威調(diào)查機(jī)構(gòu)AC尼爾森的報(bào)告顯示，超過一半我國消費(fèi)者選擇在網(wǎng)上書城購買圖書[2]?？梢缘贸鱿啾葌鹘y(tǒng)線下零售模式，網(wǎng)上書城將成為未來圖書的是主流銷售模式，是行業(yè)發(fā)展的必然。于是設(shè)計(jì)一個(gè)基于HTML和CSS的網(wǎng)上書城系統(tǒng)則顯得尤為重要。當(dāng)今時(shí)代，網(wǎng)上書城的相關(guān)技術(shù)多種多樣，傳統(tǒng)線下書店和電商平臺也慢慢開發(fā)或使用了網(wǎng)上平臺來銷售圖書。于是一個(gè)快捷、可靠令用戶滿意的平臺，可以從中脫穎而出，獲得更多的資源和客戶。網(wǎng)上書城可以通過快捷的購物體驗(yàn)同不斷完善的支付方式以及完善的購物體系下減輕了運(yùn)營成本[3]并且隨著互聯(lián)網(wǎng)不斷發(fā)展我國多數(shù)消費(fèi)者已形成線上購物的習(xí)慣，網(wǎng)絡(luò)消費(fèi)群體仍不斷擴(kuò)大，相比線下傳統(tǒng)書城可能存在的品種單一和其他問題，在線上購買風(fēng)險(xiǎn)較小，不但受到當(dāng)今消費(fèi)者的喜愛，所以網(wǎng)上書城是未來圖書銷售行業(yè)發(fā)展的必然。2關(guān)鍵技術(shù)分析2.1概述利用計(jì)算機(jī)技術(shù)和相關(guān)技術(shù)設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)基于HTML與CSS的網(wǎng)上書城系統(tǒng)，其后端使用Django框架。隨著網(wǎng)絡(luò)技術(shù)的不斷發(fā)展，HTML和CSS相關(guān)技術(shù)被廣泛應(yīng)用于各個(gè)領(lǐng)域。并隨著HTML5的發(fā)布，基于HTML5的移動(dòng)Web開發(fā)框架，響應(yīng)式的網(wǎng)站設(shè)計(jì)也被各種行業(yè)所使用的[4]。同時(shí)運(yùn)用開源的Django使整個(gè)程序的兼容性、擴(kuò)展性以及可維護(hù)性得到了提高。2.2HTML技術(shù)HTML(英語全名為HyperTextMarkupLanguage)超文本標(biāo)記語言，它的出現(xiàn)將一個(gè)個(gè)分散的網(wǎng)絡(luò)資源鏈接成一個(gè)完整的邏輯整體。自1990年以來，就被用作萬維網(wǎng)的信息表示語言，它通過和其他的web技術(shù)相結(jié)合創(chuàng)造出功能強(qiáng)大的網(wǎng)頁，因此是web編程的基礎(chǔ)。2008年HTML5正式發(fā)布，其結(jié)合之前版本的相關(guān)標(biāo)準(zhǔn)并革新，符合現(xiàn)代網(wǎng)絡(luò)技術(shù)的發(fā)展并取得廣泛的應(yīng)用，它允許程序通過web瀏覽器運(yùn)行，并且整合其他插件和多媒體相關(guān)內(nèi)容并融入其中，使得瀏覽器成為了一種網(wǎng)絡(luò)通用的平臺，使得其具有跨平臺優(yōu)勢、硬件平臺要求較低、動(dòng)畫視頻效果絢麗等優(yōu)點(diǎn)[5]。HTML5的發(fā)布是網(wǎng)頁的一次重大創(chuàng)新，它降低了對插件的需求，提供能更多互動(dòng)的可能[6]。其相對于HTML4.01增加了以下新元素：(1)圖形的繪制，增加了canvas標(biāo)簽次標(biāo)簽基于JavaScript的繪圖API(2)多媒體內(nèi)容，增加了audio、video、source等標(biāo)簽增加對多媒體內(nèi)容的支持(3)表單，增加了datalist、keygen、output等標(biāo)簽提高了對表單的使用與支持(4)更好的頁面結(jié)構(gòu)，其修改或刪除了一些標(biāo)簽和語義優(yōu)化了整體的頁面結(jié)構(gòu)已有不少的網(wǎng)頁使用HTML或?qū)υ械倪M(jìn)行更新至HTML體現(xiàn)了其的運(yùn)用廣泛。2.3CSS技術(shù)CSS，它被設(shè)計(jì)用來展示HTML等文件的樣式，全稱為層疊樣式表(CascadingStyleSheets)，通過相關(guān)技術(shù)可以對網(wǎng)頁的一系列相關(guān)組成元素進(jìn)行像素單位的控制，如更改大小間距或顏色等等，支持幾乎所有的字體樣式，擁有強(qiáng)大的能力。CSS誕生于HTML，在HTML不斷成長的過程中隨著頁面設(shè)計(jì)者對其功能的不斷添加HTML逐漸臃腫，為了克服這一問題它被設(shè)計(jì)出來。CSS可以通過繼承來使用其他樣式表中的樣式，這樣使得開發(fā)者的開發(fā)和設(shè)計(jì)變得高效快捷。2001年W3C完成CSS3的工作草案,它的一個(gè)新特點(diǎn)就是分為若干個(gè)獨(dú)立的模塊更利于相關(guān)技術(shù)的革新與推送，其更新的模塊有：盒子模型、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等[7]。2.4Django框架Django是從真實(shí)的現(xiàn)實(shí)世界的不斷應(yīng)用中成長起來的，它的編寫是由位于Kansas洲Lawrence城市中的一個(gè)網(wǎng)絡(luò)開發(fā)小組完成的，它是基于Python這一語言開源的Web應(yīng)用框架，它使得互聯(lián)網(wǎng)網(wǎng)站快速建設(shè)，使得信息的傳播變得更加便捷[8]。Django中包含了許多功能強(qiáng)大的第三方插件，同時(shí)由于其開源性賦予其擁有強(qiáng)大的可擴(kuò)展性。近年來Django迅速發(fā)展，引用越來越廣泛，深受開發(fā)者們的喜愛得到了世界各地開發(fā)人員的大力支持有著強(qiáng)大的生命力和擴(kuò)展性[9]。2.5MySQL數(shù)據(jù)庫MySQL是由瑞典公司MYSQLAB公司開發(fā)。是目前最流行的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)之一，它通過將數(shù)據(jù)存進(jìn)一個(gè)個(gè)表里而不是一整個(gè)庫內(nèi)這樣的設(shè)計(jì)提高了它的反應(yīng)和靈活性使得數(shù)據(jù)存儲(chǔ)變得更加快速。它具有五大優(yōu)勢：(1)成本低(2)簡單性(3)靈活性(4)普及型(5)良好的支持[10]。雖然MySQL與目前許多大型數(shù)據(jù)庫相比較存有些許不足之處，除非是需要更可靠更強(qiáng)大性能的大型企業(yè)相對于中小型商業(yè)企業(yè)來說其功能已經(jīng)完全足夠強(qiáng)大滿足日常的工作所需，并且因?yàn)镸ySQL是開源的，成本也被有效的降低。使用MySQL可以方便、快捷的建立一個(gè)可靠的適合中小型企業(yè)使用的數(shù)據(jù)庫。3需求分析與實(shí)施方案3.1可行性分析3.1.1技術(shù)可行性本系統(tǒng)是基于HTML與CSS開發(fā)的網(wǎng)上書城系統(tǒng)。HTML與CSS技術(shù)成熟，開發(fā)者可以輕松的使用相關(guān)技術(shù)開發(fā)網(wǎng)頁。后端使用開源的Django框架，擴(kuò)展性，穩(wěn)定性高。同時(shí)，MySQL數(shù)據(jù)庫操作方便，便于后臺的管理以及維護(hù)。3.1.2操作可行性本系統(tǒng)雖然功能繁多但使用HTML與CSS技術(shù)使得頁面簡潔美觀，大大提高了用戶操作舒適度。后端使用Python語言，Django框架使得操作及運(yùn)行簡單快捷，維護(hù)和管理方便簡單解決方案眾多相比其他系統(tǒng)其體量輕巧，使得維護(hù)和開發(fā)員工對系統(tǒng)可以不斷進(jìn)行升級擴(kuò)展增添更多的功能及插件，同時(shí)方便維護(hù)。3.2功能需求分析3.2.1系統(tǒng)兩大角色說明管理員：在后臺管理系統(tǒng)下進(jìn)行登錄和登出賬號、并可以對書籍的相關(guān)信息、用戶的相關(guān)信息以及訂單進(jìn)行管理和查看。用戶：可以進(jìn)行登錄和退出賬號、瀏覽不同種類的圖書并將其添加至購物車確認(rèn)訂單后購買。3.2.2功能需求管理員登錄管理頁面后，可以新增或修改圖書和出版社進(jìn)行刪除，對訂單進(jìn)行查看和修改。用戶可以在主界面進(jìn)入登錄或注冊頁面進(jìn)行相關(guān)操作，在主界面瀏覽搜索圖書，并選擇所需的圖書加入至購物車最終確認(rèn)訂單進(jìn)行購買。3.3開發(fā)環(huán)境框架：Django2.23語言：Python3.10.1數(shù)據(jù)庫：MySQLIDE：VisualStudioCode前端：npm，JS，HTML3.4實(shí)施方案3.4.1開發(fā)語言本系統(tǒng)前端采用了HTML，JS，CSS等語言進(jìn)行開發(fā)，運(yùn)用了swiper前端插件。后端采用Python和Django框架進(jìn)行整體系統(tǒng)構(gòu)建，通過MVT模型進(jìn)行網(wǎng)上書城的設(shè)計(jì)，其中MTV與MVC的功能類似[11]。數(shù)據(jù)庫則采用MySQL關(guān)系型數(shù)據(jù)庫。系統(tǒng)設(shè)計(jì)簡潔可靠且方便擴(kuò)展以及維護(hù)。3.4.2開發(fā)工具本系統(tǒng)在的開發(fā)工具是VisualStudioCode，用的是3.10.1的Python語言,采用SQLyog軟件來管理MySQL數(shù)據(jù)庫對數(shù)據(jù)庫信息做處理。3.4.3Web框架本系統(tǒng)后臺采用Bootstrap框架，前臺采用原生Html。3.4.4實(shí)施步驟(1)確定系統(tǒng)環(huán)境及框架；(2)編寫Model層，用來實(shí)現(xiàn)數(shù)據(jù)庫內(nèi)容并使數(shù)據(jù)進(jìn)行存儲(chǔ)；(3)編寫View層，用來實(shí)現(xiàn)視圖層的相關(guān)操作，進(jìn)行相關(guān)方法的實(shí)現(xiàn)；(4)編寫Template層，用來產(chǎn)生Html界面顯示網(wǎng)站的內(nèi)容和數(shù)據(jù)；(5)進(jìn)行系統(tǒng)的測試以及修改；4系統(tǒng)設(shè)計(jì)4.1總體設(shè)計(jì)4.1.1設(shè)計(jì)目標(biāo)本次設(shè)計(jì)需要讓用戶在網(wǎng)上書城系統(tǒng)中有一個(gè)良好的瀏覽及購物體驗(yàn)的同時(shí)加深用戶的好感度，讓用戶感受到此系統(tǒng)的優(yōu)點(diǎn)。以及便于員工操作和維護(hù)的特點(diǎn)。因此本次需要通過以下幾點(diǎn)進(jìn)行思考和設(shè)計(jì)： (1)精美度：用戶登錄一個(gè)設(shè)計(jì)精美的人性化的系統(tǒng)將會(huì)給用戶良好的購物體驗(yàn)，提高回頭率。(2)實(shí)用性：網(wǎng)頁操作界面要簡單易懂，滿足所有人的需求，操作方便。(3)易維護(hù)：管理員后臺要便于維護(hù)新增修改或刪除信息[12]。由于應(yīng)用的是MySQL數(shù)據(jù)庫，用來存儲(chǔ)網(wǎng)上書城的相關(guān)數(shù)據(jù)，其作為一種關(guān)系型數(shù)據(jù)庫，設(shè)計(jì)數(shù)據(jù)表應(yīng)該遵守其規(guī)定的范式[13]。4.1.2系統(tǒng)框架結(jié)構(gòu)本次系統(tǒng)有兩大主要模塊其總體框架設(shè)計(jì)如圖4-1所示。圖4-1系統(tǒng)框架結(jié)構(gòu)圖4.1.3用戶在書城主界面的購物流程用戶在網(wǎng)上書城主頁下的圖書購買流程如圖4-2所示。圖4-2用戶購買流程圖4.1.4管理員管理流程網(wǎng)上書城其管理員在后臺管理頁面進(jìn)行管理的流程如圖4-3所示。圖4-3管理流程圖4.2模塊功能具體設(shè)計(jì)4.2.1登錄、注冊本功能下用戶可選擇在網(wǎng)上書城主頁點(diǎn)擊右上角的登錄按鈕將會(huì)轉(zhuǎn)入登錄界面，當(dāng)中也可選擇注冊。而管理員則需點(diǎn)擊網(wǎng)站下方顯示的鏈接或輸入書城管理系統(tǒng)鏈接進(jìn)入后臺頁面從而進(jìn)行登錄和注冊。消費(fèi)者在網(wǎng)上書城只有進(jìn)行注冊并登錄才能進(jìn)行購買圖書的相關(guān)操作，注冊當(dāng)中需要填寫用戶名、手機(jī)和密碼才可以成功注冊網(wǎng)上書城賬號[14]。4.2.2用戶個(gè)人中心(1)用戶在個(gè)人中心更改自身信息用戶通過登錄后可點(diǎn)擊網(wǎng)站右上角用戶名進(jìn)入個(gè)人中心，用戶在此頁面可進(jìn)行修改昵稱內(nèi)容、密碼以及電話信息的操作。(2)查看地址新增地址及修改地址用戶登錄在個(gè)人中心，可進(jìn)行查看地址信息、新增地址信息和刪除地址的操作。(3)查看訂單用戶登錄在個(gè)人中心，可進(jìn)行查看訂單狀態(tài)和訂單詳情的操作。4.2.3添加購物車本功能下用戶可將圖書添加至購物車以便購買，并且可以刪除購物車內(nèi)不需要的圖書。4.2.4確認(rèn)訂單及支付本功能下用戶可確認(rèn)訂單并選定需要快遞的地址，隨后跳轉(zhuǎn)至第三方平臺進(jìn)行支付，支付完成后將返回訂單頁面以便查看訂單狀態(tài)。4.2.5管理員管理管理員在登錄至后臺頁面后可進(jìn)行以下操作(1)出版社管理管理員可查看、新增、修改出版社。(2)圖書管理管理員可查看、新增、修改圖書。(3)用戶管理管理員可查看、新增、修改用戶。(4)訂單管理管理員可查看、修改訂單狀態(tài)。4.3數(shù)據(jù)庫設(shè)計(jì)4.3.1數(shù)據(jù)表設(shè)計(jì)依照系統(tǒng)所需該數(shù)據(jù)庫共建立了九張表，分別是Librarian(圖書管理員表)，Order(訂單表)，Order_detail(訂單詳情表)，Books(圖書信息表)，User(用戶信息)表，Address(用戶地址表)，Publisher (出版社表)，Image(圖書圖片表)，Cart(購物車表)分別負(fù)責(zé)不同信息的儲(chǔ)存以便程序使用。 (1)圖書管理員表管理員信息通過此表進(jìn)行數(shù)據(jù)的存儲(chǔ)和使用，其登錄和注冊都依賴管理員表進(jìn)行實(shí)現(xiàn)。根據(jù)本次網(wǎng)上書城設(shè)計(jì)的需要如表4-1所示。表4-1管理員表此表主鍵為id。(2)用戶信息表用戶在進(jìn)行登錄網(wǎng)上書城以及注冊和修改信息等操作都需要本表進(jìn)行相關(guān)數(shù)據(jù)的存儲(chǔ)和使用。根據(jù)網(wǎng)上書城對于用戶數(shù)據(jù)的需求如表4-2所示。表4-2用戶信息表此表主鍵為id。(3)用戶地址表用戶地址表，可實(shí)現(xiàn)用戶收貨地址的存儲(chǔ)以及修改，方便用戶購買書籍后可以快速選擇收貨地址以及對于隨時(shí)隨地修改地址的需要。根據(jù)書城用戶地址信息的要求如表4-3所示。表4-3用戶地址表此表主鍵為id。(4)出版社表出版社表，它與圖書出版社以一對多的關(guān)系相對應(yīng)方便查詢出版社相關(guān)書籍，以便管理員管理和用戶進(jìn)行搜索以及購買。根據(jù)圖書和出版社的對應(yīng)關(guān)系必要出版社表如表4-4所示。表4-4出版社表此表主鍵為id。(5)圖書信息表圖書表，后臺實(shí)現(xiàn)圖書信息的存儲(chǔ)，前臺實(shí)現(xiàn)展現(xiàn)相關(guān)數(shù)據(jù)以便用戶瀏覽和管理員在后臺對圖書的各項(xiàng)數(shù)據(jù)進(jìn)行管理即修改和刪除。(6)圖書圖片表圖書圖片表，實(shí)現(xiàn)圖書圖片的單獨(dú)存儲(chǔ)并統(tǒng)一存儲(chǔ)路徑方便維護(hù)和管理。根據(jù)圖書圖片信息的展示和存儲(chǔ)的需要如表4-6所示。表4-6圖書圖片表字段名稱字段類型長度空默認(rèn)值備注booksid44否否否否此表主鍵為id。(7)購物車表購物車表，實(shí)現(xiàn)用戶購物車信息的存儲(chǔ)以便確認(rèn)訂單并購買，此表和用戶id與圖書id關(guān)聯(lián)成一對多的關(guān)系。依照購買圖書時(shí)將其暫存于購物車的需求此表如表4-7所示。表4-7購物車表此表主鍵為id。(8)訂單表訂單表，存儲(chǔ)用戶訂單數(shù)據(jù)可以供用戶和管理員隨時(shí)查看方便查詢訂單狀態(tài)即物流情況和完成情況也可以讓管理員快捷的處理售后問題。根據(jù)消費(fèi)者同管理員對于消費(fèi)后信息儲(chǔ)存為訂單的需求本表如表4-8所示。表4-8訂單表此表主鍵為id。(9)訂單詳情表訂單詳情表，負(fù)責(zé)訂單詳情的存儲(chǔ)與查看，用戶和管理員可以觀看訂單中存在的各種圖書名稱數(shù)量和單項(xiàng)圖書的總價(jià)。根據(jù)訂單存儲(chǔ)詳情的需要本表設(shè)計(jì)如表4-9所示。表4-9訂單詳情表此表主鍵為id。5系統(tǒng)的實(shí)現(xiàn)5.1登錄功能網(wǎng)上書城主界面可通過點(diǎn)擊相關(guān)鏈接進(jìn)行登錄，輸入相關(guān)信息進(jìn)行用戶的登錄。如登錄未成功將會(huì)在下方提示錯(cuò)誤信息。管理員和用戶登錄界面分開以便系統(tǒng)維護(hù)和運(yùn)營。用戶登錄成功將進(jìn)入書城主頁面，管理員則將會(huì)通過驗(yàn)證進(jìn)入到網(wǎng)上書城后臺管理頁面以進(jìn)入其他操作。登錄功能界面如圖5-1所示。圖5-1登錄功能界面代碼如下List<IndexImg>indexImgs=indexImgMapper.listIndexImgs();//listsizereturnnewResultVo(ResultStatus.IsNo,"fail",null);5.2網(wǎng)上書城主界面當(dāng)用戶賬號密碼都輸入正確用戶將進(jìn)入網(wǎng)上書城主界面進(jìn)行圖書的瀏覽以及查看等操作。主界面如圖5-2所示。圖5-2網(wǎng)上書城主界面主要代碼：criteria.andEqualTo("itemId",item_id);List<RecipeInfo>recipeInfoList=recipeInfoMapper.selectByExample(example);returnnewResultVo(ResultStatus.IsOk,"查到圖書",recipeInfoList.get(0));5.2.1圖書種類界面在網(wǎng)上書城主界面可點(diǎn)擊相關(guān)種類標(biāo)簽進(jìn)入不同的種類頁面，其將會(huì)顯示所有符合當(dāng)前種類的書籍，可以選擇是否加入購物車或立即購買。文學(xué)種類書籍如圖5-3所示。圖5-3文學(xué)種類書籍界面主要功能代碼實(shí)現(xiàn)<el-cardclass="elcard"v-for="vointhis.categoryInfoVo":key="vo.categoryId"><img:src="'http://localhost:8088/recipe/show/'+vo.imgurl"></el-card>5.2.2圖書詳情界面圖書的名稱、出版社、銷量、評分、簡介和價(jià)格可以通過此頁面顯示，通過窗口化的加入購物車和立即購買可以方便用戶實(shí)現(xiàn)快速選擇。圖書詳情界面如圖5-4所示。圖5-4圖書詳情界面主要功能代碼實(shí)現(xiàn)<el-dialog:title="recipeInfoF.recipeName+'詳情'":key="recipeInfoF.recipeId":visible.sync="dialogTableVisible"center></el-dialog5.3個(gè)人中心5.3.1我的信息界面此界面用戶可以實(shí)現(xiàn)自身信息的修改更改昵稱、電話和密碼信息。我的信息界面如圖5-5所示。圖5-5我的信息界面核心代碼如下CREATETABLE`teacher`(`TNo`int(11)NOTNULLAUTO_INCREMENT,`Tname`varchar(30)DEFAULTNULL,`Tpassword`varchar(30)DEFAULTNULL,PRIMARYKEY(`TNo`))5.3.2我的地址界面此界面用戶可以查詢收貨地址并進(jìn)行管理即修改或刪除操作。我的地址界面依照要求設(shè)計(jì)如圖5-6所示。圖5-6我的地址界面代碼如下}#foot{ width:970px; padding:20px0; color:#FFFFFF; text-align:center;5.3.3新增地址界面此界面下用戶可通過輸入新地址收貨人電話和地址進(jìn)行地址的新增操作。新增地址界面如圖5-7所示。圖5-7新增地址界面核心代碼如下#container{ width:970px; padding:10px; margin:0auto; position:relative; z-index:0; font-family:Geneva,Arial,Helvetica,sans-serif;5.3.4我的訂單界面用戶可以在此界面下可進(jìn)行自身訂單的查看和查詢詳情操作以便核對訂單查看實(shí)時(shí)狀態(tài)。我的訂單界面如圖5-8所示。圖5-8我的訂單界面主要代碼如下}body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{ margin:0; padding:0; border:0;5.4搜索功能此功能允許用戶在界面的搜索欄中進(jìn)行查詢，通過輸入需要搜索的書籍名或作者名，搜索界面將會(huì)顯示所有包含搜索詞的內(nèi)容。搜索結(jié)果如圖5-9所示。圖5-9搜索結(jié)果核心代碼如下#navpa{ color:#fff; font-size:14px; font-weight:bold; line-height:30px; padding:030px;}#navpa:hover{ color:red;text-decoration:none; }5.5購物車界面此界面將顯示用戶添加至購物車的書籍、數(shù)量、價(jià)格和總價(jià)，對已下單的商品進(jìn)行查看和管理即刪除操作，以便用戶購買[15]。購物車界面如圖5-10所示。圖5-10購物車界面核心代碼如下#lightbox{ position:absolute; left:0;width:100%;z-index:100;text-align:center;line-height:0;}#lightboximg{width:auto;height:auto;}#lightboxaimg{border:none;}5.6訂單界面當(dāng)用戶在購物車界面點(diǎn)擊結(jié)算時(shí)將跳轉(zhuǎn)至訂單界面，此界面將顯示用戶當(dāng)前訂單內(nèi)容以及將要配送的地址，當(dāng)用戶確認(rèn)訂單無誤無需修改并通過第三方平臺完成支付后將會(huì)返回至我的訂單界面[16]。訂單界面如圖5-11所示。圖5-11訂單界面主要代碼如下.com{ color:#FFFFFF; padding:20px;}.compa{color:#F00;}.comtabletrtd{ color:#FFFFFF;}.comulli{float:left;height:228px;}.sup{ padding:20px;}5.7退出登錄當(dāng)用戶點(diǎn)擊置頂欄中的登出暗按鈕后，網(wǎng)站將會(huì)刪除用戶儲(chǔ)存在session中數(shù)據(jù)并且將返回登錄界面，完成用戶賬號登出的操作。主要代碼如下.thumbnail{ width:200px; float:left; margin-left:30px; display:inline; margin-bottom:20px;}.thumbnaila{ color:#FFFFFF;}6系統(tǒng)測試6.1測試目的為保證網(wǎng)上書城系統(tǒng)設(shè)計(jì)與開發(fā)相關(guān)功能是否實(shí)現(xiàn)以及其可靠性,系統(tǒng)測試則顯得十分重要，它用來測試找出系統(tǒng)在開發(fā)以及設(shè)計(jì)中存在的不足或不滿足設(shè)計(jì)要求的區(qū)域用來檢驗(yàn)相關(guān)功能是否完成，并提前補(bǔ)充或修改程序。6.2測試環(huán)境與測試條件處理器：AMDRyzen55600X6-CoreProcessor4.70GHz硬盤：2.5TB+1TB移動(dòng)硬盤內(nèi)存：16GB操作系統(tǒng)：Windows10數(shù)據(jù)庫：MySQL6.3測試方法本次測試采用黑盒測試和白盒測試，黑盒測試在完全不考慮其內(nèi)部的組成結(jié)構(gòu)的情況下，檢查系統(tǒng)各項(xiàng)功能是否滿足設(shè)定的設(shè)計(jì)需求以及各個(gè)模塊是否可以正常實(shí)現(xiàn)。白盒測試則是在測試中觀察程序內(nèi)部結(jié)構(gòu)細(xì)致的進(jìn)行檢查，在全面了解程序內(nèi)部結(jié)構(gòu)的情況下對所有方法進(jìn)行測試[17]。通過黑盒測試和白盒測試可以有效的評估系統(tǒng)的完成情況以及各個(gè)模塊和功能是否正常工作，從而對未通過的地方進(jìn)行修改。6.4測試內(nèi)容6.4.1登錄、注冊賬號功能測試用戶在網(wǎng)上書城進(jìn)行登錄和注冊新賬號的功能操作測試用例表如表6-1所示，其功能結(jié)果如圖6-1所示。表6-1登錄功能測試用例表圖6-1用戶登入系統(tǒng)成功測試結(jié)果圖6.4.2用戶改變個(gè)人信息功能測試用戶在系統(tǒng)中通過個(gè)人信息頁面更改信息的測試用例表將如表6-2所示。表6-2登錄功能測試用例表6.4.3新增收貨地址功能測試用戶在新增地址頁面中新增私人收貨地址功能測試用例表將如表6-3所示。過填寫所有數(shù)據(jù)并提交提交成功，頁面跳轉(zhuǎn)至我的地址頁面交按鈕填寫此字段”相同并提交段”相同表6-3新增收貨地址功能測試用例表6.4.4修改收貨地址以及刪除收貨地址功能測試用戶通過個(gè)人收貨地址頁面點(diǎn)擊相關(guān)按鈕進(jìn)行修改、刪除功能，其測試用例表如表6-4所示。表6-4個(gè)人地址與其功能測試用例表過，頁面跳轉(zhuǎn)至我的地址頁面址信顯示“請與預(yù)期結(jié)果填寫此字段數(shù)據(jù)“請?zhí)顚懘俗侄巍秉c(diǎn)擊刪除地址按鈕地址刪除成功點(diǎn)擊刪除地址按鈕地址刪除成功6.4.5購物車功能測試其添加圖書以及刪除圖書的測試用例表如表6-5所示。其數(shù)據(jù)添加成功的測試結(jié)果圖如圖6-2所示。表6-5購物車其功能測試用例表過車書點(diǎn)擊加入購物車并確認(rèn)添加成功同加入至購物車購物車中此圖書數(shù)量增加并且金額符合數(shù)與預(yù)期結(jié)果相量同鈕同圖6-2購物車測試結(jié)果圖6.4.6訂單功能測試用戶在確認(rèn)訂單的收貨地址和付款功能測試用例表即表6-6所示。訂單功能測試結(jié)果圖如圖6-3所示。付款頁面結(jié)果圖如圖6-4所示。跳轉(zhuǎn)結(jié)果如圖6-5所示表6-6訂單其功能測試用例表實(shí)際結(jié)果是否通過進(jìn)行收貨地址的切換正常切換地址與預(yù)期結(jié)果相同通過與預(yù)期結(jié)果相同通過登錄支付寶賬號對訂單進(jìn)行付款支付結(jié)束后跳轉(zhuǎn)至我的訂單頁面與預(yù)期結(jié)果相同通過圖6-3訂單各項(xiàng)測試結(jié)果圖圖6-4訂單付款測試結(jié)果圖圖6-5訂單成功返回頁碼測試結(jié)果圖6.4.7網(wǎng)上書城的搜索功能測試用戶在網(wǎng)上書城搜索欄中進(jìn)行搜索功能的測試用例表如表6-7所示。其輸入數(shù)據(jù)后的測試結(jié)果如圖6-6、6-7所示表6-7訂單功能測試用例表實(shí)際結(jié)果是否通過搜索書名顯示被搜索的圖書