《基于Web的電商系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)8700字（論文）》

基于Web的電商系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)目錄TOC\o"1-2"\h\u10359基于Web的電商系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) 121332摘要 1111971引論 2200251.1項(xiàng)目背景 2326571.2研究的目的及意義 234091.3國內(nèi)外研究現(xiàn)狀 3312742電商系統(tǒng)的系統(tǒng)需求分析 5161352.1可行性分析 595102.2用戶需求分析 540582.3功能分析 617873開發(fā)工具及開發(fā)語言介紹 842383.1開發(fā)工具 8104613.2開發(fā)語言 10314943.2.4less語法 11175974JavaShop電商系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) 12129864.1具體功能實(shí)現(xiàn) 1292915總結(jié)與展望 1915835.1總結(jié) 1916686參考文獻(xiàn) 20摘要各種移動終端設(shè)備以及網(wǎng)絡(luò)基本完成全民普及,移動購物的理念漸漸壯大,越來越多的人開始借助移動終端設(shè)備進(jìn)行網(wǎng)上購物,人們僅享受著大量的互聯(lián)網(wǎng)購物資源,習(xí)慣于利用自己的休閑時間進(jìn)行購物。但是過去移動購物方式往往忽略了對信息的總結(jié)分類,使得購物資源混亂,無法使購物者快速且高效的找到自己需要的信息。針對這些問題,并對相關(guān)購物的情況加以分析的基礎(chǔ)上,在移動購物的理念之上和Webapp的優(yōu)勢,構(gòu)建一個整合較為完整的購物響應(yīng)式網(wǎng)站。首先,該響應(yīng)式網(wǎng)站是一款Webapp,這就避免了用戶去下載軟件,也節(jié)省了用戶的手機(jī)空間。其次,購物資源得以進(jìn)行整合。通過對國內(nèi)購物資源進(jìn)行一定的分析與整合,而且對一些我們常用的一些移動購物工具它的開發(fā)模式進(jìn)行分析,能夠看出常見移動購物平臺的一些優(yōu)缺點(diǎn)。對其中包含的概念及理論進(jìn)行界定,為更以后的一些研究和設(shè)計(jì)提供一些基礎(chǔ)與支撐。關(guān)鍵詞：vue；HTML5；CSS3；JavaScript；Node.js。1引論1.1項(xiàng)目背景現(xiàn)在已經(jīng)完全進(jìn)入互聯(lián)網(wǎng)全民化的時代了,各種移動智能設(shè)備已經(jīng)完全大眾化了,對信息傳遞與處理的方式也發(fā)生了巨大的改變,這種方式每日每刻的影響著人們的工作、學(xué)習(xí)和生活的各處場所。在互聯(lián)網(wǎng)普及的時代背景下,如何將信息合理又安全的共享成為了一種研究趨勢。目前,微生活技術(shù),聯(lián)動技術(shù),響應(yīng)式網(wǎng)站技術(shù)等Web的相關(guān)技術(shù)的發(fā)展逐漸趨于完善,也成為了共享的主要平臺。其中使用比較廣泛的Webapp也成為了信息共享的關(guān)鍵平臺。Webapp,它不需要下載任何APP直接通過手機(jī)瀏覽器即可使用的一種響應(yīng)式網(wǎng)站,像這樣的模式也實(shí)現(xiàn)了應(yīng)用"伸手可得"的概念與理念,用戶可以直接通過智能移動設(shè)備掃一掃或者通過瀏覽器輸入相應(yīng)地址即可打開對應(yīng)的響應(yīng)式網(wǎng)站。響應(yīng)式網(wǎng)站是一種新的開放能力,開發(fā)者也可以通過JavaScript的開發(fā)框架Vue,快速地開發(fā)出一個響應(yīng)式網(wǎng)站。同時Webapp的功能得到了全面的優(yōu)化,比起直接的APP入口也更加簡潔,開發(fā)成本和人力資源需求也遠(yuǎn)低于APP開發(fā),而且其觸手可及,使用方便,用戶不必?fù)?dān)心下載太多應(yīng)用等問題。1.2研究的目的及意義1.2.1研究的目的(1)通過對相關(guān)文獻(xiàn)的研究調(diào)查,了解智能移動購物理論的內(nèi)容和模式,以及Webapp開發(fā)的特點(diǎn),進(jìn)行一定量的分析探尋其中的需求,鉆研一下使用web技術(shù)進(jìn)行Webapp開發(fā)。(2)找到適合本課題的開發(fā)工具,閱讀和實(shí)踐Webapp關(guān)于響應(yīng)式網(wǎng)站開發(fā)的相關(guān)介紹,熟悉并掌握相關(guān)的框架,組件及API文檔,了解開發(fā)流程。(3)通過對系統(tǒng)的需求進(jìn)行一定的分析,并對該課題進(jìn)行設(shè)計(jì),像比如功能模塊設(shè)計(jì)、node環(huán)境的搭建、數(shù)據(jù)庫相關(guān)軟件的安裝及數(shù)據(jù)庫設(shè)計(jì)等,進(jìn)而實(shí)現(xiàn)該課題的研究。1.2.2研究的意義(1)從用戶的角度:基于Web的電商系統(tǒng),是一種微平臺購物方式,可以轉(zhuǎn)化購物方法,來適應(yīng)新一代的購物者。他們可以通過智能移動設(shè)備進(jìn)行自主購物,隨時隨地的購物、模式化購物、情景感知購物、個性化購物。這可以適應(yīng)成年人忙碌的生活習(xí)慣,將購物穿插在自己生活的任何時間,從而增加自己其他業(yè)余時間,也讓購物增加了很多快捷的途徑，使我們平時空閑購物的效率增加。(2)從實(shí)踐研究的角度:JavaShop電商系統(tǒng),可以進(jìn)行比如像移動購物、個性化購物和混合購物，這些理念是現(xiàn)在的人們快節(jié)奏的生活中所更需求的東西,Vue的相關(guān)實(shí)現(xiàn)技術(shù)也為大家提供了新的研發(fā)思路,同時研究的過程,方法和工具也為JavaShop的實(shí)踐研究和理論提供了參考價值。(3)從開發(fā)者的角度:基于Web的電商系統(tǒng),不僅可以為購物者提供相關(guān)的購物選擇,相關(guān)的商家或者用戶也可以通過該平臺售賣物品,在購物的同時可以售賣自己閑置的二手物品,商家也多了寫平臺售賣功能。通過店鋪的主要功能積累用戶量,有了用戶量之后可以售賣物品獲得相關(guān)利益價值。1.3國內(nèi)外研究現(xiàn)狀1.3.1國外研究現(xiàn)狀 歐美發(fā)達(dá)國家進(jìn)行了許多的移動購物項(xiàng)目，"實(shí)體購物上升至移動購物"和"MobileShop行動",這兩個項(xiàng)目一開始是由亞馬遜獨(dú)自進(jìn)行開發(fā)與維護(hù),網(wǎng)絡(luò)大時代的來臨使得gilt,amazon等組織一起進(jìn)行了承擔(dān)再至后來的比如"E-Shop"項(xiàng)目它對移動購物進(jìn)行了一定量的探討當(dāng)然還有不可或缺的實(shí)踐,研究過后提出了什么才是真正的移動購物，還有就是移動購物具體該如何去實(shí)現(xiàn)。為日程生活中移動購物提供一種我們能用到的思路，或者可以說是模板。在最近這些年,移動購物以及完全進(jìn)入我們真實(shí)生活中,也就是實(shí)際應(yīng)用,這為我們的正常生活帶來非常多的快捷方便。當(dāng)然名校也有參與,比如名校上海交大、斯坦福等世界排名前列的大學(xué)以及亞馬遜等購物業(yè)務(wù)公司也進(jìn)行了非常多的人們對于線上，既移動購物的想法的研究,這些研究均取到了深度的進(jìn)展,其中,移動技術(shù)如何成為信息分享的主要技術(shù)是他們進(jìn)行研究的主要內(nèi)容。1.3.2國內(nèi)研究現(xiàn)狀響應(yīng)式網(wǎng)站與已經(jīng)完成的APP相比,實(shí)現(xiàn)時的需求成本會很低,但是回報率反而會很高。它更加像原始App的體驗(yàn),響應(yīng)式網(wǎng)站是Webapp內(nèi)的一種形態(tài)或者說是形式,它不進(jìn)行本地緩存處理的時候是完全不占用手機(jī)內(nèi)存得,而傳統(tǒng)的APP基本是只要下載那么它一定會占用蠻多的空間,如果手機(jī)或者平板安裝過多APP會導(dǎo)致手機(jī)的內(nèi)存嚴(yán)重不足。響應(yīng)式網(wǎng)站其實(shí)就完全不用考慮各種適配問題,開發(fā)完成之后可以進(jìn)行各種方面的適配,我們可以進(jìn)行快速場景化的使用。我進(jìn)行的這個Webapp項(xiàng)目基于VUE框架,它可以通過網(wǎng)絡(luò)請求即axios調(diào)用第三方API接口,并且提供較多的框架,能夠更好的進(jìn)行前端開發(fā)。與手機(jī)App相比,Webapp的代碼不用進(jìn)行任何下載,我們可以直接用瀏覽器進(jìn)行瀏覽購買。完全沒有也不存在原生APP的各種難受的拘束,讓更多的人愛上這種模式,減少非常多最初的成本,省去初次安裝APP和APP更新需要再次安裝的時間。原生JS與Vue框架相比,無論是復(fù)用性、可維護(hù)性、都只是最原始的狀態(tài),沒用進(jìn)行任何封裝,還需要直接操縱DOM節(jié)點(diǎn),更別說數(shù)據(jù)驅(qū)動。Vue可以通過自身所帶的腳手架,和Vue全家桶使更多的功能需求實(shí)現(xiàn),并且VUE是漸進(jìn)式框架,他可以如同JS一樣兼容所有適配的第三方組件庫,而且還是數(shù)據(jù)驅(qū)動。借助于Vue自帶的腳手架,和Vue全家桶使項(xiàng)目更加完善更加成熟。2電商系統(tǒng)的系統(tǒng)需求分析2.1可行性分析基于Web的電商系統(tǒng)初創(chuàng)階段主要面向少量商家以及少量用戶,最終目標(biāo)是推廣至全社會。面向少量商家及少量用戶是由于,筆者學(xué)習(xí)相關(guān)方面的知識,收集了互聯(lián)網(wǎng)上大部分的相關(guān)數(shù)據(jù),對數(shù)據(jù)及商品信息進(jìn)行了分析與研究,發(fā)現(xiàn)相關(guān)數(shù)據(jù)具有碎片化、重復(fù)數(shù)據(jù)較多、可用資源較少的特點(diǎn),就對大部分?jǐn)?shù)據(jù)進(jìn)行了收集整理。少量用戶及商家對應(yīng)重復(fù)數(shù)據(jù)會較少,分配到的可用資源會相應(yīng)變多,基于此,Web電商系統(tǒng)為這些少量的用戶以及商家提供了信息較為集中,高效的購物平臺。身處互聯(lián)網(wǎng)高速發(fā)展的今天,幾乎人人都有智能移動設(shè)備,這些智能移動設(shè)備的系統(tǒng)大多為Android和IOS。雖然大眾的移動設(shè)備上都安裝了眾多的APP,但應(yīng)用之首當(dāng)屬淘寶,淘寶已逐漸成為人們?nèi)粘Ｙ徫镏斜夭豢缮俚腁PP。Webapp更多的被用在了服務(wù)行業(yè),而功能類與服務(wù)型相結(jié)合的Webapp少之又少。針對這一缺口,筆者認(rèn)為有必要設(shè)計(jì)和來發(fā)一種利用功能來吸引用戶,利用商城來獲得盈利的Webapp。響應(yīng)式網(wǎng)站實(shí)現(xiàn)的購物平臺與最原始的購物平臺相比,移動性和靈活性會更加豐滿,無需進(jìn)行任何安裝與下載,搜索或掃碼即可進(jìn)入。與原始購物平臺不同的是,Webapp又更加接近原生APP。用戶通過購物平臺可以隨時隨地的進(jìn)行訪問購物,也可以即時進(jìn)行溝通交流。2.2用戶需求分析智能手機(jī)的普及,需要購物的用戶群體龐大。大部分人都會選擇智能移動設(shè)備,一些購物APP也成為大眾日常購物的選擇,所以以移動終端設(shè)備為基礎(chǔ),并且以一些購物APP為媒介的移動購物有很廣泛的應(yīng)用空間和研究前景,借助Webapp來開展移動購物平臺的研究開發(fā)可以依托于瀏覽器廣泛的用戶群體。大眾渴望有一個相對集中且便捷的購物平臺,傾向于多元化的知識體系。目前大眾獲取相關(guān)購物信息的途徑就是下載特定購物APP,因?yàn)榛ヂ?lián)網(wǎng)以及實(shí)現(xiàn)全民化現(xiàn)在人們的信息的共享與開放都產(chǎn)生了大爆炸使得每個人都能夠在在互聯(lián)網(wǎng)上搜索以及存儲一些信息,由于沒有質(zhì)量控制和管理機(jī)制,有些信息會帶給我們很多困擾,使我們對一些商品尋找的不夠準(zhǔn)備,無法直接搜尋到我們心儀的寶貝。登錄與注冊功能：在剛開始運(yùn)行系統(tǒng)時，首先要做的就是登錄賬號，需要用戶輸入賬號和密碼登入商城，如果沒有賬號，則需要通過注冊才能進(jìn)行首次登陸。同時還需要對用戶地賬號和密碼格式做出適當(dāng)?shù)南拗?。如果用戶輸入的格式錯誤，那么對他進(jìn)行相應(yīng)的提示，用戶注冊時，輸入所需信息后，后臺進(jìn)行驗(yàn)證，如果用戶名沒有重復(fù)即注冊成功，用戶便可以正常登陸。Web電商管理系統(tǒng)針對這些問題,對網(wǎng)上相關(guān)的數(shù)據(jù)進(jìn)行了整合,處理,將重點(diǎn)多頻的問題及知識點(diǎn)做了整理。可以優(yōu)化購物時間,電商系統(tǒng)的開發(fā)設(shè)計(jì)要注意購物功能需要完善,應(yīng)用界面簡潔。使用電商系統(tǒng)購買更多的商品以及發(fā)布商品是使用者的主要需求,由此來購買更多的商品及相關(guān)的商品。2.3功能分析登錄與注冊功能：在剛開始進(jìn)入商城時，首先要做的就是登錄賬號，需要用戶輸入賬號和密碼登入商城，如果沒有賬號，則需要通過注冊才能進(jìn)行首次登陸。同時還需要對用戶地賬號和密碼格式做出適當(dāng)?shù)南拗?。如果用戶輸入的格式錯誤，那么對他進(jìn)行相應(yīng)的提示，用戶注冊時，輸入所需信息后，后臺進(jìn)行驗(yàn)證，如果用戶名沒有重復(fù)即注冊成功，用戶便可以正常登陸?；A(chǔ)商品展示功能：首先進(jìn)入到第一個頁面也就是首頁的時候，可以從首頁看到一些推薦物品，還有輪播圖內(nèi)的熱門物品。首頁搜索基礎(chǔ)功能：點(diǎn)擊首頁的搜索部分，可以動態(tài)的進(jìn)行商品的搜索，通過輸入不同的關(guān)鍵字，動態(tài)的加載不同的商品分類搜索功能：通過底部導(dǎo)航進(jìn)入到分類模塊，通過點(diǎn)擊側(cè)邊導(dǎo)航的不同內(nèi)容，頁面會進(jìn)行相應(yīng)的刷新顯示出不同類型物品。進(jìn)行購物車添加功能：首先點(diǎn)擊商品模板進(jìn)入到商品詳情頁，通過點(diǎn)擊加入購物車，會彈出相應(yīng)的彈出層，在彈出層中對規(guī)格與個數(shù)進(jìn)行選擇，然后再點(diǎn)擊添加入購物車立即購買功能：跳過添加購物車環(huán)節(jié)，對單一商品進(jìn)行直接購買，需要點(diǎn)擊商品詳情頁的立即購買按鈕，即可實(shí)現(xiàn)立即購買功能。個人信息修改功能：通過點(diǎn)擊TabBar相應(yīng)部分進(jìn)入個人部分頁面，然后再點(diǎn)擊自己的頭像這樣就可以跳轉(zhuǎn)到相應(yīng)的修改個人信息的頁面，根據(jù)自己的想法進(jìn)行一定的修改，當(dāng)然會有一定的限制比如手機(jī)號的限制，還有姓名不能用危險字等，修改后點(diǎn)擊保存即可。筆者在功能分析的基礎(chǔ)上，制定了如圖2-1的基本功能結(jié)構(gòu)示意圖：圖2-1功能結(jié)構(gòu)圖3開發(fā)工具及開發(fā)語言介紹3.1開發(fā)工具3.1.1VUE框架Vue是一個漸進(jìn)式的框架,而框架的意思其實(shí)他已經(jīng)是一個半成品了他已經(jīng)對一些基礎(chǔ)的代碼進(jìn)行了一部分的封裝了。因?yàn)閂ue是數(shù)據(jù)驅(qū)動也就是我們常說的MVVM所以他更多的是只關(guān)注邏輯層，很少關(guān)注視圖層，并且還因?yàn)樗菨u進(jìn)式框架所以還可以兼容很多的第三方庫。另外就是,當(dāng)與現(xiàn)在的各種不論是類庫還是組件庫甚至是像JQ這種半框架組件,Vue也完完全全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供各種需求的驅(qū)動。Vue腳手架，顧名思義腳手架就是它已經(jīng)幫你搭建好了一個最基礎(chǔ)的架子，你剩下的就是往里填充你自己用到的和需要的東西，使開發(fā)效率大大的提升，而且整體使用的舒適度也增強(qiáng)了不止一成，上手的難度也低了太多太多，他就真的如同工地上的腳手架一下，清晰明了，結(jié)構(gòu)完成舒適，再搭配Vue全家桶的使用，你會突然發(fā)現(xiàn)，開發(fā)一個項(xiàng)目要遠(yuǎn)比想象中輕松很多。 圖3-1VUE腳手架3.1.2AdobePhotoshop就是市面中常說的PS,它是一個數(shù)字圖像處理工具,前端使用它主要是通過它配合PXCook將UI給的設(shè)計(jì)圖內(nèi)需要切圖的部分進(jìn)行切圖處理,它其中還包含很多種類的編修工具和一些繪畫工具,可以幫助使用者有效地進(jìn)行圖片處理和編輯工作。我通過該軟件對電商系統(tǒng)進(jìn)行了界面設(shè)計(jì)、主題圖標(biāo)設(shè)計(jì)、以及作品切圖處理等工作。3.1.3PXCook一般我們拿到設(shè)計(jì)圖后需要對設(shè)計(jì)圖上各個部分的尺寸、字號、字體需要一個軟件進(jìn)行展示以及標(biāo)注PXCook就是這樣一個軟件,它可以解析PSD文件對內(nèi)部的文字,顏色,距離進(jìn)行一些特定的識別,其優(yōu)點(diǎn)在于將標(biāo)注、切圖這兩項(xiàng)功能集中在一個軟件內(nèi)完成。它可以完全只能切圖,對一些尺寸進(jìn)行只能標(biāo)注,還有文本樣式,元素距離等,都可以使用它來進(jìn)行標(biāo)注以及測量方便前端開發(fā)人員對設(shè)計(jì)圖的認(rèn)識。圖3-3PKCook3.1.4NavicatPremium15它是各種數(shù)據(jù)庫的一個可視化程序軟件,可以讓數(shù)據(jù)庫內(nèi)的表可視化,通過不同的sql語句進(jìn)行操作,該軟件支持單一程序連接到MySQL、SQLServer、Oracle等數(shù)據(jù)庫,他當(dāng)然也能進(jìn)行數(shù)據(jù)庫管理的各種功能,比如視圖、事件、函數(shù)、觸發(fā)器、存儲過程等。同時該軟件還可以在兩個及以上不同的數(shù)據(jù)庫中進(jìn)行數(shù)據(jù)傳輸。筆者利用此軟件進(jìn)行數(shù)據(jù)庫的設(shè)計(jì)。3.2開發(fā)語言3.2.1模板語法模板語法的話主要是VUE自帶的模板語法，它里面包含有比如像插值表達(dá)式、還有樣式綁定以及分支循環(huán)結(jié)構(gòu)，當(dāng)然還有指令這種常用的模板、事件綁定和屬性綁定也是相當(dāng)常用的模板,它的作用是擴(kuò)展了普通HTML屬性的功能,可以實(shí)現(xiàn)比如在HTML中書寫JS語法,可以更加方便與快捷的綁定一些屬性與事件等。3.2.2JavaScript雖然使用Vue框架不需要直接操縱DOM節(jié)點(diǎn)了，但是Vue底層的邏輯交互還是源于原生的JS，所以JS擁有的特點(diǎn)與功能Vue也同樣擁有，而它擁有的功能有可以動態(tài)將dom節(jié)點(diǎn)添加到頁面中，還有就是雖然Vue不直接操縱DOM樹了但是它還有一個虛擬DOM樹，通過虛擬DOM來間接的操縱真實(shí)DOM，但是它的底層還是原生JS的一個功能就是操縱DOM樹的功能。圖3-5JavaScript組成 3.2.3JSONJSON是一種數(shù)據(jù)格式我們經(jīng)常在網(wǎng)絡(luò)請求中遇見它們,以及有些對象或者數(shù)組數(shù)據(jù)我們需要存在本地時也需要用到它,它其實(shí)就是JS中對象的一種所謂的標(biāo)記語法，更好的提升了網(wǎng)絡(luò)傳輸?shù)男?。所以JSON具備清晰簡潔的特點(diǎn),可以讓閱讀變得更加輕松,數(shù)據(jù)結(jié)構(gòu)也更加明顯,當(dāng)然也可以讓機(jī)器更好的去識別。3.2.3Node.jsnode是一個運(yùn)行環(huán)境,是基于原生JS的一個運(yùn)行環(huán)境,使用node能讓JavaScript在后端進(jìn)行開發(fā),同時實(shí)現(xiàn)了其他后端可以實(shí)現(xiàn)的所有功能也就是說無需多學(xué)任何后端語言,直接用JS語言搭建后臺服務(wù)器。具體功能見圖3.2-3Node.Js功能圖3.2-3Node.Js功能3.2.4less語法Less語法算是css基礎(chǔ)語法的一種升級，也就是可以說less語法是css語法內(nèi)部的一種方法，是一種非常好用的css語法，當(dāng)用習(xí)慣這種語法之后就完全不會再想用原生css，就跟我們習(xí)慣使用一個框架之后就會很少使用原生js了一樣，因?yàn)樗鼉?nèi)部存在像函數(shù)，變量這種功能，所以css的復(fù)用變得簡單的不止一倍，有一些需要多出使用的css結(jié)構(gòu)我們完全可以生成一個函數(shù)，然后通過調(diào)用函數(shù)來進(jìn)行css的復(fù)用。所以說它的主要特征是:它可以讓CSS代碼更加有組織的進(jìn)行書寫、我們當(dāng)然也可以定義樣式,它還可以在整個代碼中重復(fù)使用,可以排除代碼冗余的問題。4JavaShop電商系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)4.1具體功能實(shí)現(xiàn)4.1.1商品展示模塊商品展示模塊的重點(diǎn)在于向用戶展示相關(guān)類型商品,以便于用戶進(jìn)行購物。因此該功能模塊分為首頁推薦商品部分和熱門商品部分,點(diǎn)擊推薦商品題目方可進(jìn)入推薦商品詳情,用戶可以在推薦商品中看到關(guān)于該商品的詳細(xì)信息,包括庫存,價格,也可以看到其他商品的推薦,及其他的一些功能,比如領(lǐng)卷、團(tuán)購等。圖4-2具體頁面展示

4.1.2搜索模塊電商系統(tǒng)的搜索功能主要是為用戶提供搜索相關(guān)商品的功能,因此對搜索功能進(jìn)行了一些處理,用戶可以根據(jù)自己每一個字的輸入動態(tài)的產(chǎn)生不同的搜索指引,這樣可以實(shí)時的顯示出搜索結(jié)果,為用戶節(jié)約一定的時間,也可以讓用戶對一些不同的商品產(chǎn)生興趣,最終來找到自己需要的信息。圖4-3具體頁面展示

4.1.3商品分類模塊該模塊主要實(shí)現(xiàn)系統(tǒng)的對商品信息進(jìn)行分類,主要的類別包括數(shù)碼家電、進(jìn)口產(chǎn)品、美容化妝等類別,用戶可以在該模塊有目的的進(jìn)行不同分類的選擇,該模塊的實(shí)現(xiàn)難點(diǎn)在于將左右兩部分分離開來,并且使得兩部分進(jìn)行互相不影響的滾動,基于這個問題Vant組件庫為我們提供了sidebar側(cè)邊導(dǎo)航組件,該組件可以對指定內(nèi)容進(jìn)行分塊顯示,再將左邊欄進(jìn)行固定定位處理,即可解決左右端分離滾動互不影響的效果。圖4-4具體頁面

4.1.4商品詳情模塊該模塊主要進(jìn)行商品詳情展示,以便用戶可以更加快速且準(zhǔn)確的了解商品的詳細(xì)信息及商品的銷量及庫存信息等,在用戶完全了解商品信息之后可以對商品進(jìn)行加入購物車操作。該頁面的技術(shù)點(diǎn)主要包括商品展示時的輪播圖效果的實(shí)現(xiàn),該部分筆者主要使用第三方發(fā)布的組件-swiper,該組件自帶的有輪播圖的功能,大大提高了開發(fā)效率。再者是選擇商品時的折疊面板,該折疊面板使用了vant組件庫,該組件庫為web開發(fā)提供了大量的實(shí)用性極強(qiáng)的組件庫,可以使開發(fā)人員快速地構(gòu)建出頁面結(jié)構(gòu),并且該組件庫較為成熟穩(wěn)定,API文檔書寫清晰,初學(xué)者也能快速上手使用,大大降低了開發(fā)時間,提高了開發(fā)效率,同時也精美了頁面。該頁面中的折疊面板筆者就使用了該組件庫,實(shí)現(xiàn)了頁面的快速構(gòu)建。圖4-5具體頁面4.1.5訂單管理模塊該模塊主要是實(shí)現(xiàn)用戶訂單管理,包括訂單的詳細(xì)信息、地址管理、商品金額、結(jié)算等模塊,用戶在進(jìn)行商品選擇購買時即可進(jìn)入該頁面,該頁面主要是對用戶所購買的商品進(jìn)行一個匯總,得到用戶購買商品的詳細(xì)信息、總金額等的結(jié)算匯總,訂單創(chuàng)建成功后可在全部訂單中查看訂單詳細(xì)信息及支付狀態(tài)等信息。電商系統(tǒng)的用戶下單支付用例圖如圖4-6。圖4-6用戶下單支付用例圖對于JavaShop內(nèi)的支付功能分析:(1)首先需要通過點(diǎn)擊TabBar內(nèi)對應(yīng)的購物車圖標(biāo)進(jìn)入到購物車內(nèi),在購物車內(nèi)可以進(jìn)行加減刪除等，每一個加減跟刪除其實(shí)都是向后端發(fā)起一個post請求，使后端改變他數(shù)據(jù)庫內(nèi)表的數(shù)據(jù)，然后前端再重新進(jìn)行購物車列表接口的get請求，將數(shù)據(jù)重新刷新到購物車頁面。(2)點(diǎn)擊購物車內(nèi)結(jié)算之后會相應(yīng)的跳到訂單頁面，進(jìn)入頁面會給用戶一個默認(rèn)的收貨地址，這個收貨地址就是用戶設(shè)定的默認(rèn)地址，只有用戶已經(jīng)選擇過收貨地址之后才能進(jìn)行下一步的操作，當(dāng)然用戶也可以通過textarea文本框輸入需要加的備注消息，接著點(diǎn)擊進(jìn)行付款。(3)因?yàn)槲沂莻€人開發(fā)，并沒有商家號所以無法直接調(diào)用微信支付API只能調(diào)用支付寶支付API但是真實(shí)的支付寶支付也需要進(jìn)行審核跟授權(quán)，所以我這里直接進(jìn)行支付寶提供的沙箱支付，通過調(diào)用沙箱支付模擬支付寶支付。圖4-7具體頁面4.1.6購物車模塊通過點(diǎn)擊進(jìn)入不同的商品詳情中,選擇不同的商品,可以把選中的商品通過下方按鈕,打開彈出層,選擇不同的規(guī)格后然后選擇需要的數(shù)量，然后點(diǎn)擊確定就會有相應(yīng)提示，提示你加入購物車成功，相應(yīng)的購物車的小圖標(biāo)上的徽標(biāo)會顯示你加入購物車內(nèi)商品的數(shù)量，然后還是通過TabBar點(diǎn)擊對應(yīng)購物車圖標(biāo)進(jìn)入到購物車頁面，可以在這個頁面對自己購物車內(nèi)的商品在進(jìn)行一些操作，內(nèi)部有像加減刪除全選這種功能，當(dāng)然通過步進(jìn)器進(jìn)行加減的時候會相應(yīng)的有一個上限跟下限，上限是商品的總庫存，下限是1，在步進(jìn)器為1之后減號按鈕會相應(yīng)變成灰色，這時候如果想要再進(jìn)行減少數(shù)量的話只能進(jìn)行刪除操作。對于刪除可以通過復(fù)選框選擇多個商品然后點(diǎn)擊下方刪除按鈕進(jìn)行多個商品的刪除，也可以通過向左滑動刪除會顯示出滑動單元格，進(jìn)行單件商品的刪除，當(dāng)然通過點(diǎn)擊購物車內(nèi)的單個商品也會跳到相應(yīng)的商品詳情中，當(dāng)選擇完全部想要購買的商品之后點(diǎn)擊結(jié)算按鈕會跳到對應(yīng)的訂單頁面，因?yàn)橐恍┙涌谙拗疲晕宜鶎?shí)現(xiàn)的這個項(xiàng)目并沒有添加像折扣以及優(yōu)惠劵這樣的功能，所以在訂單頁的總金額就是購物車內(nèi)算出的總金額加上郵費(fèi)，用戶確認(rèn)完價格沒有問題之后點(diǎn)擊支付，然后會相應(yīng)的吊起沙箱之后，支付成功后會相應(yīng)的進(jìn)行Post請求，將數(shù)據(jù)庫購物車列表這個表中的這一條數(shù)據(jù)進(jìn)行相應(yīng)的刪除，當(dāng)然對應(yīng)的是訂單列表的數(shù)據(jù)庫表中會多增加一條數(shù)據(jù)。圖4-8購物車用例圖圖4-9具體頁面5總結(jié)與展望5.1總結(jié)在完成整個項(xiàng)目的過程里對一些平時很少接觸到的知識都學(xué)習(xí)到了很多，比如像即使實(shí)現(xiàn)即時通訊的WebSocket,還有數(shù)據(jù)表格Echarts，還有一些很久沒用的第三方類庫，像iconfont，以及swiper組件庫，還有animate.css組件庫等，包括Vue內(nèi)部的全局狀態(tài)管理VueX的使用，還有像Vue-Router的基礎(chǔ)路由還算是比較清晰，但是對子路由的一些搭建與使用在寫項(xiàng)目之前還是比較生疏的，經(jīng)歷過這個項(xiàng)目之后對子路由的使用也很熟練了。此外,我接觸并使用了一些第三方的數(shù)據(jù)API接口,學(xué)習(xí)了VUE全家桶的使用與開發(fā)。在整個實(shí)現(xiàn)論文的過程里,我也明白了論文寫作的知識和技巧,我遇到了諸多的問題,養(yǎng)成了獨(dú)立思考、解決的習(xí)慣。結(jié)果各種困難，使用各種第三方SDK以及處理各種邏輯都是對自己的一種鍛煉與提升，讓我對項(xiàng)目的整體架構(gòu)，以及一些需要用到的邏輯思考迷宮有了更深的理解與領(lǐng)悟。參考文獻(xiàn)[1]劉劍.?JSP網(wǎng)站開發(fā)與設(shè)計(jì)[J].電腦知識與技術(shù).?2005.14.?周祖榮，陳榮珍.?基于JSP的招生網(wǎng)站的設(shè)計(jì)[J].?科技信息.?2010.01.?陳武，衛(wèi)