多肉植物商城設(shè)計(jì)與實(shí)現(xiàn)

摘要繼18世紀(jì)第一次工業(yè)革命—蒸汽技術(shù)的革命，從此機(jī)器代替了手工，19世紀(jì)第二次工業(yè)革命—電力技術(shù)革命，人類從此進(jìn)入“電氣時(shí)代”。如今21世紀(jì)掀起的第三次工業(yè)革命“互聯(lián)網(wǎng)革命”，從此走上萬物互聯(lián)的道路。在中國尤其明顯，隨著阿里巴巴，騰訊，京東，拼多多等一批巨頭互聯(lián)網(wǎng)公司的崛起，使我國人民從衣、食、住、行、用等生活方式上發(fā)生了翻天覆地的變化。在手機(jī)上只需手指點(diǎn)一點(diǎn)，心儀的衣物、美味的食物、更實(shí)惠的酒店、更簡便出行方式、更實(shí)惠好用的日用品等一鍵統(tǒng)統(tǒng)搞定。其中最令人稱贊的還是網(wǎng)上購物，在手機(jī)，電腦上打開網(wǎng)上購物商城挑選好自己心儀的商品一鍵下單。上午下單，下午心儀的商品就已經(jīng)到了自己手中，再也不需要勞心費(fèi)力大老遠(yuǎn)跑到購物街買到心儀的商品然后又不辭辛苦的回家。極大程度上節(jié)省了人們的時(shí)間，精力。隨著綠色環(huán)保的理念根植人心，如今的人們都喜歡在家里辦公室等場所擺放一些多肉植物。無論是從綠色環(huán)保的角度還是從裝飾品的角度，都無可挑剔。甚至還有一些人群熱衷于養(yǎng)殖多肉植物，但是放眼整個(gè)中國專門運(yùn)營多肉植物的網(wǎng)站也是屈指可數(shù)，所以本人特意制作了專門運(yùn)營多肉植物的網(wǎng)站。一方面滿足了喜愛多肉植物的人群，一方面填補(bǔ)市場的空白。本網(wǎng)站總體劃分為首頁，店鋪，單品，關(guān)于我們等模塊。整體布局清新自然，動畫效果優(yōu)美。使用戶心情愉悅，享受購物的快感。目錄TOC\o"1-1"\h\u23565一設(shè)計(jì)背景 5166841.1選題背景 5110331.2選題意義 53427二開發(fā)環(huán)境及技術(shù)構(gòu)架 66432.1開發(fā)環(huán)境與工具 668132.2技術(shù)架構(gòu) 718827三需求分析 7322503設(shè)計(jì)目標(biāo) 8266743.1設(shè)計(jì)需求 8290363.2功能需求 889063.3性能要求 831101四網(wǎng)站設(shè)計(jì) 8325574.1網(wǎng)站總體設(shè)計(jì) 9128494.2網(wǎng)站總體設(shè)計(jì) 10267794.2系統(tǒng)詳細(xì)設(shè)計(jì) 1017385五系統(tǒng)實(shí)現(xiàn) 11121705.功能實(shí)現(xiàn) 11185525.3店鋪模塊 15115005.4單品模塊 1627081六、作品測試 1719641七、畢業(yè)設(shè)計(jì)總結(jié) 188642參考文獻(xiàn) 19

一設(shè)計(jì)背景1.1選題背景隨著21世紀(jì)“第三次科技革命”如火如荼的進(jìn)行，在中國更是愈演愈烈?；ヂ?lián)網(wǎng)這個(gè)詞已經(jīng)深深刻在人們心底，互聯(lián)網(wǎng)無時(shí)不刻不在影響我們的生活。其中網(wǎng)絡(luò)購物已然成為如今不可替代的生活方式，這是時(shí)代的趨勢，不可阻擋。1.2選題意義前有淘寶，京東，拼多多等專業(yè)購物平臺，其中涵蓋了生活中的方方面面，但太過于龐雜紛亂。我的目的是想打造一個(gè)小而精的專業(yè)運(yùn)營多肉植物的網(wǎng)絡(luò)購物平臺，讓用戶隨時(shí)隨地在網(wǎng)絡(luò)上也可以買到自己心儀的多肉植物。另外網(wǎng)絡(luò)購物商城極大程度上減少了線下開門店的成本與風(fēng)險(xiǎn)，同時(shí)也更加便于管理，只需在家中，一臺電腦就可以解決問題。1.3收集資料與分析在美圖網(wǎng)中尋找一些有關(guān)多肉植物的清新圖片，去字體網(wǎng)站下載一些免費(fèi)字體。百度搜索有關(guān)綠植網(wǎng)站，參考借鑒他們是如何設(shè)計(jì)，學(xué)習(xí)他們整個(gè)網(wǎng)站的布局，以及網(wǎng)站整體的色調(diào)。參考課本上的項(xiàng)目案例，如何去優(yōu)化網(wǎng)站，不懂的地方翻閱相關(guān)資料，或者與同學(xué)一起探討資料與資源的合理運(yùn)用與功能的實(shí)現(xiàn)。二開發(fā)環(huán)境及技術(shù)構(gòu)架2.1開發(fā)環(huán)境與工具HBuilder是由數(shù)字天堂推出的一款支持HTML5的web開發(fā)軟件，主要特點(diǎn)快，而快恰好就是HBuilder最大的優(yōu)勢，有完整的語法提示與代碼輸入法，代碼塊，能夠大幅度提升HTML，css，js的開發(fā)效率。還有極為友好的提示ID、Class、圖片、鏈接、字體等功能。還可以邊看邊改，一邊看代碼，一邊看網(wǎng)頁效果，非常適合新手作為開發(fā)工具使用。HTML稱為超文本標(biāo)記語言，是一種標(biāo)識性的語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。CSS是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，被用于描述網(wǎng)頁上的信息格式化和顯示的方式。CSS樣式可以直接存儲于HTML網(wǎng)頁或者單獨(dú)的樣式單文件。無論哪一種方式，樣式單包含將樣式應(yīng)用到指定類型的元素的規(guī)則。外部使用時(shí)，樣式單規(guī)則被放置在一個(gè)帶有文件擴(kuò)展名_css的外部樣式單文檔中。樣式規(guī)則是可應(yīng)用于網(wǎng)頁中元素，如文本段落或鏈接的格式化指令。樣式規(guī)則由一個(gè)或多個(gè)樣式屬性及其值組成。內(nèi)部樣式單直接放在網(wǎng)頁中，外部樣式單保存在獨(dú)立的文檔中，網(wǎng)頁通過一個(gè)特殊標(biāo)簽鏈接外部樣式單。名稱CSS中的“層疊（cascading）”表示樣式單規(guī)則應(yīng)用于HTML文檔元素的方式。具體地說，CSS樣式單中的樣式形成一個(gè)層次結(jié)構(gòu)，更具體的樣式覆蓋通用樣式。樣式規(guī)則的優(yōu)先級由CSS根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級聯(lián)效果。2.2技術(shù)架構(gòu)2.2.1前后分離目前主要流行的前端主要包含pc瀏覽器，小程序，以及移動應(yīng)用app移動應(yīng)用app可以通過原生頁面，以及內(nèi)置的webview等插件渲染h5頁面向用戶展示ui信息客戶端主要涉及到網(wǎng)頁瀏覽器以及原生的app這些客戶端不但可以展示數(shù)據(jù)，并且還可以存貯數(shù)據(jù)，尤其是對于移動端app可以使用強(qiáng)大的SQLite數(shù)據(jù)庫對數(shù)據(jù)進(jìn)行持久化存貯通過客戶端的離線存貯可以實(shí)現(xiàn)某些場景的離線訪問，尤其是對于用戶的重要數(shù)據(jù)且更新頻次較低的數(shù)據(jù)，離線存儲的意義非常明顯。服務(wù)器端（后端）的服務(wù)器種類主要分為WEB服務(wù)器以及應(yīng)用服務(wù)器，WEB服務(wù)器主要用來發(fā)布靜態(tài)資源（html、css等靜態(tài)資源文件），如Nginx服務(wù)器、Apache以及CDN服務(wù)器等。WEB服務(wù)器對于靜態(tài)資源發(fā)布以及靜態(tài)文件緩存有極大的優(yōu)勢。應(yīng)用服務(wù)器主要用來發(fā)布應(yīng)用程序代碼（ASP.NET、PHP、JAVA等），如Tomcat、IIS服務(wù)器等2.2.2Bootstrap簡單靈活可用于架構(gòu)流行的用戶界面和交互接口的html、css、javascript工具集?；趆tml5、css3的bootstrap，具有大量的誘人特性：友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計(jì)，12列格網(wǎng)，樣式向?qū)臋n。自定義JQuery插件，完整的類庫，基于Less等

2.2.3jQuery具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進(jìn)行擴(kuò)展；擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。jQuery兼容各種主流瀏覽器。三需求分析3設(shè)計(jì)目標(biāo)3.1設(shè)計(jì)需求為了讓用戶擁有更好的購物體驗(yàn)，首先頁面排版要盡可能的簡潔、簡約，模塊分工明確，使用戶能夠在最短時(shí)間內(nèi)找到自己心儀的商品。網(wǎng)頁設(shè)計(jì)時(shí)更加貼近多肉植物偏清新，自然的風(fēng)格。同時(shí)也要實(shí)現(xiàn)更加賞心悅目的動畫效果，更加符合人類直覺的操作邏輯。盡可能把每一處的細(xì)節(jié)做到最好，使用戶擁有更舒心的視覺體驗(yàn)。3.2功能需求本網(wǎng)站主要經(jīng)營業(yè)務(wù)為多肉植物，需要盡可能的展示多肉植物的多樣性，豐富性，以及相應(yīng)的功能介紹，方便用戶更好的挑選到心儀的商品并購買。同時(shí)還需要一個(gè)購物車功能，用戶看到心儀的多肉時(shí)可以點(diǎn)擊收藏放入購物車。還有登陸注冊功能，使每個(gè)用戶擁有獨(dú)立的賬戶。重中之中是售后問題，所以在每個(gè)頁面的最底端留下聯(lián)系方式，方便用戶遇到問題時(shí)打電話詢問，以及評論功能，認(rèn)真聽取每個(gè)用戶的聲音。打造成用戶心中最溫暖，最暖心的網(wǎng)站。3.3性能要求休息時(shí)間或者下班時(shí)間，人們有了空閑時(shí)間，可能會來我們網(wǎng)站逛一逛，這時(shí)候訪問人數(shù)一多，服務(wù)器壓力必然驟增，首先解決的是人數(shù)壓力承載問題。以及用戶在平時(shí)使用時(shí)不卡頓，頁面切換流暢?？紤]到用戶的多樣性，用戶使用的設(shè)備，瀏覽器的不同，所以要實(shí)現(xiàn)不同設(shè)備不同瀏覽器的兼容性。四網(wǎng)站設(shè)計(jì)我們的故事4.1網(wǎng)站總體設(shè)計(jì)我們的故事類別購物首頁類別購物首頁特色產(chǎn)品特色產(chǎn)品用戶評論用戶評論關(guān)于我們關(guān)于我們產(chǎn)品分類產(chǎn)品分類店鋪網(wǎng)站店鋪網(wǎng)站關(guān)于我們關(guān)于我們商品詳情單品商品詳情單品描述評論描述評論購物車購物車注冊登陸注冊登陸4.1.1網(wǎng)站流程圖4.2網(wǎng)站總體設(shè)計(jì)我的單品店鋪首頁我的單品店鋪首頁輪播圖輪播圖我們的故事我們的故事按類別購物按類別購物網(wǎng)站輪播圖網(wǎng)站輪播圖特色產(chǎn)品特色產(chǎn)品 圖4-1-1系統(tǒng)結(jié)構(gòu)圖我們的帖子4.2系統(tǒng)詳細(xì)設(shè)計(jì)我們的帖子4.2.1開發(fā)流程發(fā)送實(shí)時(shí)通訊發(fā)送實(shí)時(shí)通訊關(guān)于我們關(guān)于我們圖4-2網(wǎng)站詳細(xì)設(shè)計(jì)圖五系統(tǒng)實(shí)現(xiàn)5.功能實(shí)現(xiàn)5.1.1首頁的實(shí)現(xiàn)首頁頂端為一個(gè)手動輪播圖，點(diǎn)擊兩邊的黑色箭頭即可切換圖5-1-1網(wǎng)站首頁的實(shí)現(xiàn)圖5-1-1首頁輪播圖圖5-1-2首頁第二個(gè)輪播圖的實(shí)現(xiàn)5.1.3限時(shí)秒殺的實(shí)現(xiàn)限時(shí)秒殺活動界面圖5-1-3限時(shí)秒殺界面的實(shí)現(xiàn)用戶發(fā)的的帖子，一個(gè)分享生活的社區(qū)5.1.4用戶帖子界面的實(shí)現(xiàn)圖5-1-4用戶帖子界面的實(shí)現(xiàn)5.1.5關(guān)于我們模塊的實(shí)現(xiàn)圖5-1-5關(guān)于我們界面的實(shí)現(xiàn)5.2用戶登陸、注冊5.2.1用戶注冊界面的實(shí)現(xiàn)圖5-2-1注冊界面的實(shí)現(xiàn)5.2.2用戶登陸界面的實(shí)現(xiàn)圖5-2-2登陸界面的實(shí)現(xiàn)5.3店鋪模塊5.3.1店鋪界面的實(shí)現(xiàn)圖5-3-1店鋪模塊的實(shí)現(xiàn)5.3.2店鋪購物車界面的實(shí)現(xiàn)圖5-3-2登陸界面的實(shí)現(xiàn)5.4單品模塊5.4.1單品界面的實(shí)現(xiàn)圖5-4-1登陸界面的實(shí)現(xiàn)六、作品測試6.1編寫測試用例圖6-1登陸界面的實(shí)現(xiàn)測試類型功能測試模塊名稱多肉植物商城的基本功能實(shí)現(xiàn)用例描述該用例用于測試網(wǎng)站的基本功能是否以及實(shí)現(xiàn)編號測試項(xiàng)操作步驟期望結(jié)果實(shí)際結(jié)果1登錄功能實(shí)現(xiàn)點(diǎn)擊登錄按鈕是否跳轉(zhuǎn)到登錄頁面成功跳轉(zhuǎn)到登錄頁面Pass2注冊功能實(shí)現(xiàn)點(diǎn)擊登錄按鈕是否跳轉(zhuǎn)到登錄頁面成功跳轉(zhuǎn)到注冊頁面Pass3輪播圖切換點(diǎn)擊輪播圖箭頭，看是否切換輪播圖成功切換輪播圖頁面Pass4登錄時(shí)輸入手機(jī)號碼與密碼點(diǎn)擊登錄框輸入手機(jī)號碼與密碼框的密碼可輸入手機(jī)號碼與密碼Pass5注冊時(shí)輸入手機(jī)號碼進(jìn)行注冊點(diǎn)擊注冊框進(jìn)行注冊注冊成功Pass6跳轉(zhuǎn)店鋪頁面點(diǎn)擊店鋪按鈕成功跳轉(zhuǎn)到店鋪頁面Pass7跳轉(zhuǎn)單品頁面點(diǎn)擊單品按鈕成功跳轉(zhuǎn)到單品頁面Pass8在店鋪頁面能否跳轉(zhuǎn)到首頁點(diǎn)擊首頁按鈕成功跳轉(zhuǎn)到首頁頁面Pass9在單品頁面能否跳轉(zhuǎn)到店鋪點(diǎn)擊店鋪按鈕成功跳轉(zhuǎn)到店鋪頁面Pass6.2測試結(jié)果網(wǎng)站總體功能實(shí)現(xiàn)正常，也發(fā)現(xiàn)了平時(shí)寫代碼不仔細(xì)的一些漏洞，比如標(biāo)題不對，圖片放置位置不對，大小與頁面不協(xié)調(diào)。甚至錯(cuò)誤直接出現(xiàn)在代碼當(dāng)中，寫錯(cuò)了字母，沒有分中文英文標(biāo)點(diǎn)符號，鏈接地址鏈錯(cuò)等不應(yīng)該犯的錯(cuò)誤。在這次測試中體現(xiàn)的淋漓精致，也充分說明了測試的重要性，沒有人能寫出完美的代碼，也沒有人能一直不犯錯(cuò)。而測試正是給我們一個(gè)發(fā)現(xiàn)錯(cuò)誤并糾正錯(cuò)誤的機(jī)會。也讓我明白了寫代碼應(yīng)該更細(xì)心，更仔細(xì)。七、設(shè)計(jì)總結(jié)紙上學(xué)來終覺淺，絕知此事要躬行就是此次畢業(yè)設(shè)計(jì)最好的總結(jié)。平時(shí)我們都是在課堂上聽老師講，如何如何去做一個(gè)網(wǎng)站，卻始終沒有真正獨(dú)立自主的去完成一個(gè)網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)。這次畢業(yè)設(shè)計(jì)正好提供了這樣一個(gè)絕佳的機(jī)會，所謂養(yǎng)兵千日，用兵一時(shí)差不多就是此理。同時(shí)這也是一次檢驗(yàn)我能力最好的機(jī)會，也是一個(gè)查漏補(bǔ)缺的絕佳機(jī)會，不僅鍛煉了我的獨(dú)立思考能力，更加鍛煉了我的獨(dú)立動手能力。期間雖然遇到了很多困難，也遇到了自己百思不得其解的難題，通過翻閱相關(guān)資料，詢問身邊的大神同學(xué)都得到了有效的解決。與他人交流問題時(shí)更加加深自己對平時(shí)課堂上所學(xué)的知識做到了鞏固與夯實(shí)，不斷強(qiáng)化自己的基礎(chǔ)知識。此次畢業(yè)設(shè)計(jì)耗時(shí)差不多四個(gè)月時(shí)間，從定標(biāo)題，再到設(shè)計(jì)，與實(shí)現(xiàn)相關(guān)功能，一路坎坷不斷，但我還時(shí)堅(jiān)持不懈的做下來了，只想給大學(xué)生活交上一份自己覺得完美的答卷，以后到了社會上能夠更加的努力與堅(jiān)持，成就人生夢