基于微信平臺(tái)的微商城小程序的設(shè)計(jì)與實(shí)現(xiàn)

基于微信平臺(tái)的微商城小程序的設(shè)計(jì)與實(shí)現(xiàn)Designandimplementationofwechatmallappletbasedonwechatplatform的普及讓人與人之間的聯(lián)系變得更加緊密和方便，這其中離不開QQ和微信的功績。這兩年微信小程序的出現(xiàn)，催生了一大批被稱為“微商”的群體。他們通過微信售賣商品，在其中賺取差價(jià)以補(bǔ)貼家用。小程序有一套自己的開發(fā)工具，且與其他前端開發(fā)語言相同，并且封裝了許多Api供開發(fā)者使用，這大大降低了小程序的開發(fā)難度。本文使用node.js開發(fā)效勞器，使用MySql作為數(shù)據(jù)庫支持，微信開發(fā)者工具作為開發(fā)工具，使用與前端開發(fā)幾乎一致的語言，對(duì)HTML加以修改和封裝生成了自己的組件，再配合JS和CSS生成四個(gè)文件，采用MVVM開發(fā)模式，每個(gè)文件負(fù)責(zé)自己的部門功能。關(guān)鍵詞：電商微信小程序Node.jsMySqlHTMLCSSJSVueabstractWiththepopularityanddevelopmentoftheInternet,onlineshoppinghasgraduallyemerged,whichhasgivenbirthtomanye-commercegiants.Thepopularityofmobilephonesmakestheconnectionbetweenpeoplemorecloseandconvenient,whichisinseparablefromQQandwechat.Inthepasttwoyears,theemergenceofwechatappshasspawnedalargenumberofgroupsknownas"wechatmerchants".Theysellgoodsthroughwechat,inwhichtheyearnthedifferencetosubsidizetheirfamilies.Theapplethasitsowndevelopmenttool,whichisthesameasotherfront-enddevelopmentlanguages,andencapsulatesmanyAPIsfordevelopers,whichgreatlyreducesthedevelopmentdifficultyoftheapplet.Thispaperusesnode.jsdevelopmentserver,MySQLasdatabasesupport,wechatdevelopertoolasdevelopmenttool,andalmostthesamelanguageasfront-enddevelopmenttomodifyandencapsulateHTMLtogenerateitsowncomponents,thenwithJSandCSStogeneratefourfiles,usingMVVMdevelopmentmode,eachfileisresponsibleforitsowndepartmentfunctions.Keywords:OnlineretailersWechatappletNode.jsMySqlHtmlCssJsVue目錄第一章緒論11.1開發(fā)背景11.2所選題目意義與目的21.3研究現(xiàn)狀21.4本文研究內(nèi)容3第二章關(guān)鍵技術(shù)介紹42.1Node.Js42.2mysql42.3vue42.4HTML52.5JS52.6CSS52.7小程序開發(fā)者工具5第三章系統(tǒng)分析73.1微商城小程序設(shè)計(jì)思路73.2數(shù)據(jù)表7第四章系統(tǒng)實(shí)現(xiàn)124.1購物流程124.2開店流程134.3商城首頁134.4發(fā)現(xiàn)頁面144.5購物車154.6我的164.7商品詳情174.8訂單確認(rèn)頁面184.9添加地址、選擇地址194.10地址列表204.11訂單支付及密碼輸入214.12我的訂單224.14店鋪菜單及查看店鋪資料254.15發(fā)布商品264.16效勞器26第五章系統(tǒng)測試295.1微信授權(quán)與微信號(hào)綁定295.2商品列表和詳情測試305.3購物車測試315.4購物車單商品和多商品結(jié)算325.5添加地址和地址選擇325.6訂單測試33參考文獻(xiàn)35致謝36第一章緒論1.1開發(fā)背景網(wǎng)絡(luò)購物的快速開展，催生了許多的電商平臺(tái)。云的的淘寶、劉強(qiáng)東的京東、張近東的蘇寧易購、黃崢的拼多多等等等。其中崛起最快，開展最迅速的當(dāng)屬拼多多。拼多多依托微信龐大的用戶群體，迅速的擴(kuò)張用戶量，它的拼團(tuán)砍價(jià)策略，鼓勵(lì)用戶分享傳播，而分享和傳播的途徑正是微信小程序，無論是從App分享還是小程序中的分享，最終都翻開了拼多多的小程序。 小程序有三大特點(diǎn)：用完即走，觸手可及，不用安裝和卸載；正是這三大特點(diǎn)，給小程序的迅猛開展提供了支持。微信小程序?qū)χ行∑髽I(yè)來說，開發(fā)本錢低，尤其是有專門開發(fā)小程序的公司，對(duì)于小程序的開發(fā)熟練且有框架可用，無需自己封裝，而且企業(yè)能借助微信平臺(tái)獲得較大的流量。小程序不需要單獨(dú)的APP推廣、運(yùn)營和開發(fā)。小程序提供了許多的接口，比方大家每天都在使用的掃一掃功能，拍照功能，付款功能等，這些功能都是在微信的使用過程中經(jīng)常用到的功能，同樣的也可以在小程序中使用。減少了開發(fā)時(shí)間和本錢的同時(shí)，還能不改變用于的使用習(xí)慣，這是其他程序不能輕易做到的。氣候的多變，和環(huán)境的不穩(wěn)定因素，使人們對(duì)外出有了一定的抗拒。天南地北的網(wǎng)購，商品的真?zhèn)魏吐吠镜南募巴素浀钠D辛也使得電商的開展到了瓶頸期。越來越多的假冒偽劣產(chǎn)品也使人們對(duì)電商有了一些抵觸情緒。不能很快的見到產(chǎn)品，不能很好的處理退換貨，更是使人很開始對(duì)網(wǎng)購冷落。這是一個(gè)危機(jī)，也是一個(gè)商機(jī)。我認(rèn)為只是一個(gè)商機(jī)，一個(gè)實(shí)體店還擊電商的大商機(jī)。當(dāng)然這還是需要依賴網(wǎng)絡(luò)，網(wǎng)絡(luò)的宣傳效果是不言而喻的，在現(xiàn)代社會(huì)，沒有任何一個(gè)人能離了網(wǎng)絡(luò)單獨(dú)生活。沒了網(wǎng)絡(luò)猶如與世隔絕般痛苦是如今許多年輕人的正是寫照。網(wǎng)購雖好，卻解決不了緊急問題。正因?yàn)槿绱?，我想開發(fā)一款優(yōu)先效勞周邊，再向外擴(kuò)展的基于微信小程序的快捷程序。小程序的開發(fā)，使用于微信自主研發(fā)的開發(fā)工具：“微信開發(fā)者工具”，也可以使用第三方的開發(fā)工具如Hbuilder進(jìn)行開發(fā)，開發(fā)完成后再打包成小程序，通過“微信開發(fā)者工具”上傳即可。他使用與前段開發(fā)一樣的語言，與主流的開發(fā)框架Vue有異曲同工之妙，自帶豐富的Api供開發(fā)者使用，大大降低了開發(fā)者的工作量和開發(fā)難度。1.2所選題目意義與目的隨著社會(huì)的開展，網(wǎng)絡(luò)時(shí)代的來臨，使用的普及，交通的興旺。網(wǎng)上的交易比傳統(tǒng)交易更加具有優(yōu)勢，因?yàn)榫W(wǎng)上的交易更加便捷，動(dòng)動(dòng)手指滑動(dòng)一下，就可以瀏覽全國各地的商品，只要看到想要心儀的商品，直接點(diǎn)擊購置下單付款，剩下的就交給物流。我們只需要在家耐心的等待快遞小哥的。這在一開始還是非常受歡送的，在網(wǎng)上商品數(shù)量成倍增長的同時(shí)，殘次品的數(shù)量也在增多，并且受季節(jié)、天氣、節(jié)日等的影響，許多時(shí)候人們需要長時(shí)間的等待才能拿到商品。經(jīng)過等待，拿到商品后，早已沒了當(dāng)初下單時(shí)的喜愛和沖動(dòng)。為此電商的解決方法是布置更多的倉庫和物流點(diǎn)，增加物流車輛以此解決路上消耗的時(shí)間，這樣做的同時(shí)也增加了本錢。所以，為何不開發(fā)一款軟件，讓商家優(yōu)先效勞于周邊，設(shè)定一個(gè)效勞圈，圈內(nèi)實(shí)時(shí)送達(dá)，圈外快遞物流。優(yōu)先為用戶展示附近商家及產(chǎn)品，讓用戶能在最短的時(shí)間拿到商品，甚至用戶可以根據(jù)地址自行到店選取。一方面給店家做了宣傳增加了人流量，不管開在哪里，在網(wǎng)上都是一樣的人流訪問量，可以減低商家的開店本錢，本錢的降低意味著利潤的增加，增加的利潤可以反響回用戶，使雙方都可獲利。1.3研究現(xiàn)狀根據(jù)2018年3月的數(shù)據(jù)顯示，微信的用戶量已經(jīng)超過10億。2017年小程序上線后，當(dāng)月用戶量僅有200萬。之后隨著后期小程序的不斷更新，增加更多的開放入口，包括用戶通過分享到好友和朋友圈，公眾號(hào)跳轉(zhuǎn)等多個(gè)入口，使得小程序用戶開始不斷上升。在2017年12月以“跳一跳”為代表的的微信小程序正式上線后，小程序迅速走入人們的視野，用戶量也開始暴漲，數(shù)據(jù)顯示當(dāng)月微信小程序的用戶到達(dá)了4億之多。在小程序不斷的更新中，小程序的使用場景也開始不斷的增加，覆蓋范圍越來越廣，小程序的用戶人群也有形成趨勢。隨著小程序的開展和使用人群的增多，許多電商平臺(tái)也相繼開發(fā)出了小程序版本，拼多多就是最成功的案例之一。得益于小程序的的易傳播性，拼多多很快的就在微信群中走紅，隨便翻開一個(gè)群都能在其中找到拼多多來過的痕跡。得益于微信平臺(tái)的持續(xù)更新和迭代，相繼開發(fā)出新的功能，每次更多都給人帶來不一樣的驚喜。即兼容之前的版本，又增加新的功能，近期就推出了一個(gè)直播功能，不需要自行編寫代碼開發(fā)，只需要在管理品臺(tái)圖形界面操控即可實(shí)現(xiàn)在小程序中實(shí)現(xiàn)直播功能。這大大降低了開發(fā)和維護(hù)的本錢。1.4本文研究內(nèi)容本文主要研究如何在使用微信小程序，開發(fā)多商戶微商城。研究思路如下：〔1〕確定需求?？傮w需求為：一個(gè)微信號(hào)為一個(gè)用戶，每個(gè)用戶可以使用同一個(gè)賬號(hào)購物和開店。成為用戶后，繼續(xù)申請(qǐng)成為店主，審核通過后即可在商城中發(fā)布自己的商品；〔2〕確定功能。本商城的兩個(gè)主要功能為商家上架商品和用戶購置商品；每一個(gè)商品的交易流程都需要經(jīng)過商家和用戶的共同操作完成。商家上架商品、用戶瀏覽并購置商品、商家發(fā)貨、用戶收貨及評(píng)價(jià)，為一個(gè)商品的交易流程?！?〕研究實(shí)現(xiàn)方案。使用微信唯一標(biāo)識(shí)符確定每個(gè)用戶的唯一性和數(shù)據(jù)的關(guān)聯(lián)。使用用戶id與商鋪id實(shí)現(xiàn)用戶與商品的關(guān)聯(lián)；通過店鋪id和商品id實(shí)現(xiàn)商鋪信息和商品信息的關(guān)聯(lián)；通過用戶id和訂單id及商品id，實(shí)現(xiàn)用戶信息和訂單信息及商品信息的關(guān)聯(lián)；使用地址id和用戶id，實(shí)現(xiàn)用戶信息與地址信息的關(guān)聯(lián)；使用用戶id、商品id和購物車id，實(shí)現(xiàn)購物車、用戶和商品的關(guān)聯(lián)?！?〕頁面布局及功能。首頁展示商品，默認(rèn)按銷量排序；可增加按價(jià)格升降排序、距離遠(yuǎn)近排序、好評(píng)率排序等。發(fā)現(xiàn)頁面用于查找商品，可查找商品類型、商品品牌、商品名稱、商品描述等；購物差頁面用戶存放用戶添加到購物車的商品，可多商品同時(shí)下單付款；我的頁面用于管理我的數(shù)據(jù)，如：訂單、收藏的商品、收藏的店鋪、我的店鋪、發(fā)布的商品及個(gè)人信息等?！?〕頁面編寫。頁面使用騰訊提供的“微信開發(fā)者工具”及參考“微信小程序開發(fā)文檔”編寫，使用框架提供的API實(shí)現(xiàn)分享、選擇圖片、上傳圖片、查看圖片、頁面跳轉(zhuǎn)等功能?！?〕數(shù)據(jù)對(duì)接。使用框架自帶API實(shí)現(xiàn)異步加載數(shù)據(jù)，局部熱更新數(shù)據(jù)；實(shí)時(shí)記錄用戶操作，反響用戶需求；隱藏關(guān)鍵信息如：用戶id、店鋪id、用戶支付密碼等，展示頁面需要信息如：商品信息、訂單信息、店鋪信息等；〔7〕功能測試。測試各個(gè)功能是否能正常運(yùn)行，且能適應(yīng)各種用戶操作，如：下單時(shí)，到達(dá)付款頁后用戶未付款，此時(shí)應(yīng)將訂單變?yōu)榇犊钣唵?。購置商品時(shí)，用戶將購置數(shù)量設(shè)為0，這個(gè)是不被允許的。用戶余額缺乏時(shí)，付款應(yīng)為失敗，并提示用戶“余額缺乏導(dǎo)致付款失敗”第二章關(guān)鍵技術(shù)介紹2.1Node.JsNode.js是一個(gè)運(yùn)行與javascript環(huán)境中的框架。它讓javascript可以開發(fā)后端程序，能實(shí)現(xiàn)與其他后端語言實(shí)現(xiàn)的大局部功能?？梢耘cPHP、Java、Python、NET、Ruby等后端語言平起平坐。3.3.2、node.js的優(yōu)勢Node.js的語法與js的語法幾乎一致，可以說學(xué)習(xí)并使用過javascript的人，學(xué)習(xí)node.js開發(fā)會(huì)非常容易。Node.js開拓了Javascript的應(yīng)用范圍，從瀏覽器到效勞器的一大進(jìn)步。實(shí)現(xiàn)前后端編程環(huán)境的統(tǒng)一、極大的減少了開發(fā)時(shí)間和開發(fā)本錢。Node.js有超高并發(fā)的能力，使用單線程非阻塞I/O和事件驅(qū)動(dòng)機(jī)制，讓Node.js程序在宏觀上也是并行的。2.2mysqlMySQL是一款開源的關(guān)系型數(shù)據(jù)庫系統(tǒng)；目前已經(jīng)成為最為流行的數(shù)據(jù)庫系統(tǒng)之一，并且逐步的向原有商業(yè)數(shù)據(jù)庫的市場進(jìn)軍?？梢钥吹結(jié)ahoo、Google、Facebook、網(wǎng)易等許多大型公司都在使用MySQL數(shù)據(jù)庫作為主要數(shù)據(jù)庫，甚至將MySQL作為核心應(yīng)用的數(shù)據(jù)庫系統(tǒng)。2.3vue過去的十年，我們的網(wǎng)頁變得更加動(dòng)態(tài)化和強(qiáng)大，是因?yàn)橛蠮avaScript，我們已經(jīng)把很多傳統(tǒng)效勞端代碼放到瀏覽器中這樣就產(chǎn)生了成千上萬行的JavaScript代碼，他們鏈接了各種各樣的HTML和CSS文件[4]，但缺乏正規(guī)的組織形式，這也是為什么越來越多的開發(fā)者使用JavaScript框架，而vue就是當(dāng)下較為流行的一個(gè)。Vue框架是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。Vue[2]的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有工程整合。Vue使用js的方式寫HTML，在一定程度上減少了許多重復(fù)的代碼，大大提高代碼編寫速率；其中典型的有v-for用與循環(huán)生成代碼；v-if用來判斷是否顯示元素；與v-show相比一個(gè)是存在看不見不占位置；一個(gè)是完全不存在；v-model多用戶獲取input中的輸入內(nèi)容；2.4HTMLHTML是建造網(wǎng)站的磚石，是構(gòu)建網(wǎng)站的根底，常用的標(biāo)簽有<div></div>元素，塊級(jí)元素的代表，即默認(rèn)占據(jù)一行,與前后元素不在一行；<span></span>元素，行內(nèi)原色的代表，即如果前后有一個(gè)同樣是行內(nèi)元素的元素，那么會(huì)在一行中顯示不會(huì)換行，行內(nèi)元素設(shè)置寬高不生效，可以使用display屬性修改；<a></a>元素，用戶頁面的跳轉(zhuǎn)，自帶觸發(fā)樣式，只需要一個(gè)地址，就可以跳轉(zhuǎn)到互聯(lián)網(wǎng)中的任何一個(gè)頁面，相當(dāng)好用；2.5JSJavaScript

是一門跨平臺(tái)、面向?qū)ο蟮哪_本語言。它是網(wǎng)頁交互必不可少的東西；沒有Javascript的網(wǎng)站是死的，沒有靈魂的，只有參加了Javascript才能賦予網(wǎng)站靈活，使其有生命，完成各種動(dòng)作和交互；他可以動(dòng)態(tài)的改變HTML標(biāo)簽，也可以根據(jù)用戶操作改變CSS樣式?？傊甹avascript是HTML的靈魂。Javascript可以在網(wǎng)站運(yùn)行時(shí)做很多HTML做不了的事情；比方獲取用戶輸入并傳遞給后臺(tái)，再將后臺(tái)返回的東西展示給用戶；2.6CSSCSS是層疊樣式表(英文全稱：CascadingStyleSheets)。是用戶將HTML中的標(biāo)簽按想要的方式排布的工具；如果將HTML比喻為原料，那么CSS就是模具，用來規(guī)定HTML的展示；它功能強(qiáng)大，可以使用動(dòng)畫，做出意想不到的效果；簡單實(shí)用是它的一大特色；2.7小程序開發(fā)者工具微信小程序，小程序的一種，英文名MiniProgram。是一種比APP更小更快捷的應(yīng)用，它不需要下載就可以安裝使用的。它實(shí)現(xiàn)了程序“觸手可及”的夢想，用戶使用微信掃一掃或者搜一下即可翻開相應(yīng)的應(yīng)用。還可以使用分享好友和公眾號(hào)跳轉(zhuǎn)、app跳轉(zhuǎn)的方式進(jìn)入小程序并到達(dá)小程序的指定頁面。這相當(dāng)于將所有小程序整合到一個(gè)工程中，在頁面中跳轉(zhuǎn)。做到了即是單獨(dú)的個(gè)體又是一個(gè)整體。微信小程序開發(fā)者工具提供了一個(gè)簡單、高效、易學(xué)易用的應(yīng)用開發(fā)框架及豐富的組件和API。這有極大的減少了開發(fā)難度和增大開發(fā)效率。小程序使用的開發(fā)語言主要是JavaScript，小程序的開發(fā)流程和普通的網(wǎng)頁開發(fā)相似。對(duì)于長期從事前端開發(fā)的工作人員而言，從網(wǎng)頁開發(fā)遷移到小程序的開發(fā)門檻并不高，但是二者又有些許的區(qū)別。第三章系統(tǒng)分析3.1微商城小程序設(shè)計(jì)思路小程序是一個(gè)高并發(fā)，高反響的一個(gè)程序。效勞器的反響速度直接影響的用戶體驗(yàn)。由于小程序的分包大小最大為2M，總包大小不得超過12M。所以除了代碼，其余的東西都需要實(shí)時(shí)的從效勞器獲取，所以效勞器的性能直接的影響著用戶的使用體驗(yàn)。所以我選擇了單線程高并發(fā)的node.js作為效勞器開發(fā)語言。他相比其他如php、java等同時(shí)處理的請(qǐng)求數(shù)量能成倍的增長，速度也是飛快。每接受到一個(gè)請(qǐng)求都會(huì)使用100%的資源去完成，所以每一個(gè)請(qǐng)求都是在一瞬間內(nèi)完成。用戶從進(jìn)入小程序，無時(shí)無刻不在向效勞器發(fā)送著請(qǐng)求，進(jìn)入時(shí)下載包，加載時(shí)獲取數(shù)據(jù)和圖片，瀏覽時(shí)反響用戶操作等等。用戶可以瀏覽商品，搜索商品，參加購物車，生成自己的訂單。也可以自己開店發(fā)布商品，管理商品，售賣商品，從中獲取利潤。商家的申請(qǐng)及商品的發(fā)布都可以在總后臺(tái)中查看，在后臺(tái)添加商品的分類及品牌后，店主就可以選擇與商品對(duì)應(yīng)的品牌及分類，這在商品發(fā)布后，用戶搜索商品是非常用用的。用戶可以根據(jù)商品名稱、商品分類、商品所屬品牌進(jìn)行關(guān)鍵詞搜索，還可以搜索店名等關(guān)鍵字。用戶瀏覽過的商品和店鋪都能在“我的記錄”中找到。我的功能包括：我的訂單〔全部訂單、待付款、已付款〔待發(fā)貨〕、待收貨〔已發(fā)貨〕〕、我的收藏〔收藏的商品、收藏的店鋪〕、我的足跡〔瀏覽過的商品和店鋪〕；我的店鋪：立即發(fā)布商品、查看已發(fā)布的商品類表，被用戶參加購物車的商品、用戶生成訂單未待付款的商品、用戶已付款的商品、我已點(diǎn)擊發(fā)貨的商品、用戶已收貨的商品、用戶已評(píng)價(jià)的商品、修改店鋪信息等功能；3.2數(shù)據(jù)表用戶信息表：用于存儲(chǔ)用戶填寫的個(gè)人信息及修改記錄。結(jié)構(gòu)如下表：表3-1用戶信息表名稱類型長度小數(shù)點(diǎn)非空主鍵備注user_idInt2550非空1用戶idopenidvarchar2550非空2微信唯一標(biāo)識(shí)符passwordvarchar2550非空登錄密碼phonevarchar2550非空號(hào)碼(賬號(hào))ava_imgvarchar2550非空頭像gendervarchar2550非空性別,1男2女birthdayvarchar2550非空生日walletvarchar2550非空錢包余額payPasswordvarchar2550非空支付密碼create_timevarchar2550非空注冊時(shí)間用戶地址信息表：主要用來存放用戶添加的收貨人信息與收貨地址信息。結(jié)構(gòu)如下表：表3-2用戶地址表名稱類型長度小數(shù)點(diǎn)非空主鍵備注 add_idInt2550非空1地址iduser_idInt2550非空2用戶idadd_namevarchart2550非空收貨人名稱add_phonevarchar2550非空收貨人add_detailvarchar2550非空詳細(xì)地址add_fullvarchar2550非空全地址provincevarchar2550非空省cityvarchar2550非空市areavarchar2550非空區(qū)is_defaultvarchar2550非空默認(rèn)地址,add_timevarchar2550非空創(chuàng)立時(shí)間地址數(shù)據(jù)表。結(jié)構(gòu)如下表：表3-3地址數(shù)據(jù)表名稱類型長度小數(shù)點(diǎn)非空主鍵備注address_idInt2550非空1地址idparent_namevarchar2550非空上級(jí)名稱parent_codevarchar2550非空上級(jí)idself_namevarchar2550非空當(dāng)前名稱self_codevarchar2550非空當(dāng)前idtypevarchar2550非空類型,0省,1市,2區(qū)商品品牌列表,與商品分類表關(guān)聯(lián)。結(jié)構(gòu)如下表：表3-4商品品牌表名稱類型長度小數(shù)點(diǎn)非空主鍵備注brand_idInt2550非空1品牌idclass_idInt2550非空2分類idtextvarchar2550非空品牌名稱購物車數(shù)據(jù)表與用戶表、商品表關(guān)聯(lián)。結(jié)構(gòu)如下表：表3-5購物車數(shù)據(jù)表名稱類型長度小數(shù)點(diǎn)非空主鍵備注cart_idInt2550非空1購物車iduser_idInt2550非空2用戶idgoods_idInt2550非空2商品idcart_numInt2550非空參加數(shù)量cart_priceFloat2552非空參加單價(jià)cart_changvarchar2550非空最新修改時(shí)間商品分類表,與商品品牌表關(guān)聯(lián)，結(jié)構(gòu)如下表：表3-6商品分類表名稱類型長度小數(shù)點(diǎn)非空主鍵備注class_idInt2550非空1分類idtextvarchar2550非空分類名稱商品收藏表,存儲(chǔ)用戶添加收藏的商品。關(guān)聯(lián)商品表和用戶表。結(jié)構(gòu)如下表：表3-7用戶收藏的商品表名稱類型長度小數(shù)點(diǎn)非空主鍵備注collect_idInt2550非空1收藏iduser_idInt2550非空2用戶idgoods_idInt2550非空3商品idcreate_timeDatetime2550非空收藏時(shí)間商品評(píng)論表,與用戶表、商品表關(guān)聯(lián)。結(jié)構(gòu)如下表：表3-8商品評(píng)論表名稱類型長度小數(shù)點(diǎn)非空主鍵備注Comment_idInt2550非空1評(píng)論idUser_idInt2550非空2用戶idGoods_idInt2550非空3被評(píng)論商品idUser_avaImgVarchar2550非空評(píng)論者頭像User_nicknameVarchar2550非空評(píng)論者昵稱Comment_textVarchar2550非空評(píng)論內(nèi)容Comment_imgVarchar2550非空評(píng)論圖片Comment_timedateTime2550非空評(píng)論時(shí)間商品表,關(guān)聯(lián)商家表。結(jié)構(gòu)如下表：表3-9商品表名稱類型長度小數(shù)點(diǎn)非空主鍵備注goods_idInt2550非空1商品idstore_idInt2550非空2商鋪idcreatetimeDatetime2550非空上架時(shí)間goods_namevarcahr2550非空商品名稱goods_descvarcahr2550非空商品介紹goods_brandvarcahr2550非空商品品牌goods_classifyvarcahr2550非空商品分類goods_imagesvarcahr2550非空商品圖片goods_pricefloat2552非空商品價(jià)格goods_flash_priceFloat2552非空商品折扣價(jià)goods_send_priceFloat2550非空滿多少包郵goods_sales_volumeInt2550非空商品銷量goods_paymentsint2550非空商品購置人數(shù)商品訂單表,關(guān)聯(lián)地址表、用戶表、商品表、商鋪表。結(jié)構(gòu)如下表：表3-10商品訂單表名稱類型長度小數(shù)點(diǎn)非空主鍵備注order_idint2550非空1訂單iduser_idInt2550非空2用戶idstore_idInt2550非空3商品idaddress_idInt2550非空4地址idorder_note2550非空下單備注order_createtime2550非空下單時(shí)間order_goods_idInt2550非空5商品idorder_pay_priceFloat2552非空付款價(jià)格order_total_numInt2550非空商品數(shù)量order_statusInt2550非空訂單狀態(tài)after_sellInt2550非空售后,0非,1是order_pay_timeDatetime2550非空付款時(shí)間order_send_dateDatetime2550非空發(fā)貨時(shí)間order_take_timeDatetime2550非空收貨時(shí)間is_commentint2550非空是否已評(píng)論商鋪表、關(guān)聯(lián)用戶表。結(jié)構(gòu)如下表：表3-11商鋪表名稱類型長度小數(shù)點(diǎn)非空主鍵備注store_idInt2550非空1商品iduser_idInt2550非空2用戶idstore_imgvarcaar2550非空商鋪圖片store_createtimeDatetime2550非空創(chuàng)立時(shí)間store_phoneVarcaar2550非空I聯(lián)系store_concat_nameVarcaar2550非空身份證名稱store_concat_IDVarcaar2550非空身份證號(hào)store_nameVarcaar2550非空商鋪名稱store_provinceVarcaar2550非空省store_cityVarcaar2550非空市store_areaVarcaar2550非空區(qū)store_address_detialVarcaar2550非空詳細(xì)地址store_sell_numInt2550非空商品總銷售數(shù)量store_goods_numint2550非空上架商品數(shù)量第四章系統(tǒng)實(shí)現(xiàn)4.1購物流程1、翻開小程序，可先體驗(yàn)小程序功能后選擇授權(quán)登錄，登錄后會(huì)生成一個(gè)用戶。2、選擇心儀的商品，立即購置〔或?qū)⒍鄠€(gè)商品添加到購物車，在購物車中統(tǒng)一付款〕，在確認(rèn)訂單頁中需要填寫收貨地址、聯(lián)系人、姓名等信息。3、信息確認(rèn)后，到達(dá)付款頁，付款成功后到達(dá)已付款一面；4、待商家發(fā)貨后，用戶可選擇收貨，收貨后的訂單可以發(fā)表評(píng)價(jià)和申請(qǐng)售后。至此，完成一個(gè)簡單的購物流程；4.2開店流程1、用戶授權(quán)后，僅做為一個(gè)普通用戶使用小程序，在我的頁面有一個(gè)我要開店按鈕；2、點(diǎn)擊“我要開店”，按照要求填寫：店鋪名稱、開店人姓名、開店人身份證號(hào)、店鋪地址等信息并提交即可生成自己的店鋪；3、點(diǎn)擊“發(fā)布商品”，按提示添加商品圖片、商品名稱、商品描述、選擇商品分類、商品所屬品牌等必要信息，點(diǎn)擊”發(fā)布“；4、客戶購置商品后，可在我的店鋪訂單中查看已售出商品，并為商品發(fā)貨；5、商品發(fā)出后，由用戶點(diǎn)擊收貨，收貨完成后，當(dāng)前訂單交易完成；4.3商城首頁由兩個(gè)控件組成，上方使用最受歡送的輪播圖，每一張輪播圖攜帶一個(gè)熱銷商品的id，點(diǎn)擊后可跳轉(zhuǎn)至指定商品詳情頁；下方使用商品列表組件，觸底加載，每次加載10條數(shù)據(jù)，加載和沒有更多商品都有提示，使用戶知道當(dāng)前在執(zhí)行的操作，增加用戶使用體驗(yàn)；點(diǎn)擊商品跳轉(zhuǎn)至對(duì)應(yīng)的商品詳情頁；圖4-1商城首頁(加載中)圖4-2商城首頁(沒有跟多數(shù)據(jù)了)4.4發(fā)現(xiàn)頁面可搜索商品名稱、商品分類、商品品牌、商鋪名稱。每次搜索后自動(dòng)保存搜索記錄，下次進(jìn)入時(shí)通過緩存獲取搜索記錄，方便用戶搜索內(nèi)容圖4-3發(fā)現(xiàn)(首次搜索)圖4-4發(fā)現(xiàn)(搜索結(jié)果)圖4-5發(fā)現(xiàn)(二次搜索)4.5購物車勾選商品時(shí)，自動(dòng)計(jì)算商品價(jià)格及數(shù)量；每勾選一個(gè)商品，都計(jì)算一次總金額和選中的商品數(shù)量，當(dāng)購物車中的最后一個(gè)商品被選中時(shí)，觸發(fā)全選事件，選中全選按鈕；當(dāng)其中任何一個(gè)商品取消勾選時(shí)，全選按鈕跟著取消勾選；點(diǎn)擊全選按鈕時(shí)，所有商品與全選按鈕狀態(tài)一致；選擇商品后，可以點(diǎn)擊“結(jié)算”按鈕，到達(dá)訂單確認(rèn)頁面；此時(shí)，所有選中的商品將從購物車中刪除；如果在訂單確認(rèn)中點(diǎn)擊了返回，選中商品將變?yōu)榇犊顮顟B(tài)；假設(shè)付款成功，那么變?yōu)橐迅犊钣唵?，等待商家發(fā)貨即可；也可以點(diǎn)擊右上角“編輯”按鈕，進(jìn)入購物車編輯狀態(tài)，在編輯狀態(tài)時(shí)，可以對(duì)勾選的商品進(jìn)行“全部收藏”和“全部刪除”操作；選擇收藏后，所有商品將被收藏，已收藏商品不受影響；選擇刪除后，選中商品將從購物車中移除；圖4-6購物車〔選中購物車中的局部商品〕圖4-7購物車〔選中購物車中的所有商品〕圖4-8購物車〔編輯狀態(tài)〕圖4-9購物車〔編輯狀態(tài)-刪除商品〕4.6我的首次進(jìn)入，需要用戶授權(quán)，獲取微信信息進(jìn)行用戶注冊；之后進(jìn)入，不需要授權(quán)即可自動(dòng)獲取用戶微信信息即可實(shí)現(xiàn)登錄；授權(quán)方式為，用戶點(diǎn)擊“注冊/登錄”按鈕，觸發(fā)開發(fā)者工具api，彈出授權(quán)框，點(diǎn)擊“允許”后，監(jiān)聽成功方法，將其中攜帶的“code”參數(shù)發(fā)送至后臺(tái)，后臺(tái)將code通過微信預(yù)留鏈接換取“微信用戶唯一標(biāo)識(shí)符”，以此創(chuàng)立用戶；授權(quán)登錄后，根據(jù)用戶信息判斷用戶是否已開通店鋪功能；如果沒有開通，僅顯示“我的”和“我要開店”操作；如果用戶已經(jīng)開通店鋪，那么增加顯示對(duì)店鋪的錯(cuò)作接口；圖4-10我的〔未授權(quán)登錄狀態(tài)〕圖4-11我的〔授權(quán)登錄〕圖4-12我的〔已登錄-未開通商鋪〕圖4-13我的〔已登錄-已開通商鋪〕4.7商品詳情點(diǎn)擊任意商品，都可以跳轉(zhuǎn)至商品詳情頁；在商品詳情頁面中需要顯示的信息包括：商品輪播圖、商品信息、價(jià)格、商品銷量、店鋪信息等，已賣出的商品有商品銷量和購置人數(shù)，被評(píng)論或的商品可顯示評(píng)論列表。在商品詳情中點(diǎn)擊輪播圖，可以預(yù)覽商品圖片；點(diǎn)擊“進(jìn)店逛逛”可以查看當(dāng)前商品所屬店鋪的全部商品；點(diǎn)擊“收藏商品”可以將商品收藏，并在“我的-我的收藏”中查看商品；點(diǎn)擊“參加購物車”，將當(dāng)前商品參加購物車。參加成功后，可在“購物車”頁面中以列表的形式將已添加到購物車的商品展示給用戶，每次獲取十條數(shù)據(jù)，用戶下滑觸底后判斷是否有跟多數(shù)據(jù)，有那么繼續(xù)加載，沒有那么提醒用戶沒有更多數(shù)據(jù)了；點(diǎn)擊“立即購置”，會(huì)先將當(dāng)前商品參加購物車，然后從購物車中取得該商品在購物車中的id，并生成一條代付款訂單，后臺(tái)返回該訂單信息，并顯示在“確認(rèn)訂單”頁面；圖4-14商品詳情〔未收藏商品〕圖4-15商品詳情〔已收藏商品〕4.8訂單確認(rèn)頁面訂單確認(rèn)頁面，可以從商品詳情頁底部點(diǎn)擊“立即購置”進(jìn)入，也可以從購物車中選擇一個(gè)或多個(gè)商品點(diǎn)擊底部“結(jié)算”進(jìn)入訂單確認(rèn)頁面，此頁面將根據(jù)當(dāng)前訂單的商品數(shù)量顯示訂單中的商品列表；進(jìn)入此頁面時(shí)，會(huì)獲取訂單信息、當(dāng)前用戶的地址列表；假設(shè)地址列表存在且設(shè)置了默認(rèn)地址，那么使用默認(rèn)地址；沒有設(shè)置默認(rèn)地址那么使用地址列表中的第一個(gè)地址做為默認(rèn)地址。假設(shè)地址列表為空，那么“顯示暫無地址”在提交訂單時(shí)，會(huì)判斷是否有地址，沒有地址無法提交訂單，需要先添加地址；無地址時(shí)點(diǎn)擊，到達(dá)添加地址頁面，添加的地址自動(dòng)設(shè)置為默認(rèn)地址；有地址時(shí)，點(diǎn)擊到達(dá)地址列表，可修改默認(rèn)地址；點(diǎn)擊“確定”時(shí)，將訂單id及地址id傳到后臺(tái)進(jìn)行訂單和地址的綁定；圖4-16確認(rèn)訂單-單商品無地址圖4-17確認(rèn)訂單-多商品結(jié)算4.9添加地址、選擇地址 添加地址頁面，可以從確認(rèn)訂單頁面中無地址時(shí)點(diǎn)擊“添加地址”進(jìn)入、有地址時(shí)點(diǎn)擊地址，進(jìn)入地址列表再點(diǎn)擊“添加地址”進(jìn)入；也可以直接到我的-設(shè)置-我的地址-添加地址進(jìn)入； 地址信息包括：收貨人姓名、收貨人聯(lián)系、省市區(qū)及詳情地址、默認(rèn)地址為可選項(xiàng)；提交信息時(shí)判斷所有必填信息是否以填寫，未填寫提示用戶填寫。都填寫完成后，提交數(shù)據(jù)到后臺(tái)，進(jìn)行數(shù)據(jù)保存；圖4-18添加地址圖4-19添加地址-選擇省市區(qū)4.10地址列表進(jìn)入頁面，獲取我的地址列表；可對(duì)地址進(jìn)行刪除、編輯和設(shè)為默認(rèn)地址操作；默認(rèn)地址即每次購物自動(dòng)選擇的地址；刪除地址時(shí)，提示用戶是否要?jiǎng)h除，用戶點(diǎn)擊確定后，將選中的地址id傳給后臺(tái)，后臺(tái)根據(jù)id將地址信息刪除；點(diǎn)擊編輯時(shí)，將選中的地址id傳遞至“添加地址”頁面，頁面接收到id，通過接口從后臺(tái)獲取當(dāng)前地址的信息，并顯示到頁面中。用戶可自由修改所有信息。點(diǎn)擊“設(shè)為默認(rèn)”，將選中地址id傳遞至后臺(tái)，后臺(tái)將當(dāng)前用戶的所有地址項(xiàng)設(shè)為非默認(rèn)地址，再將根據(jù)上傳的id找對(duì)應(yīng)的地址設(shè)置為默認(rèn)地址，以此實(shí)現(xiàn)默認(rèn)地址的替換；圖4-20地址列表圖4-21地址列表-刪除地址4.11訂單支付及密碼輸入此頁面可由“確認(rèn)訂單”頁點(diǎn)擊“確認(rèn)”進(jìn)入，進(jìn)入時(shí)傳遞訂單id；進(jìn)入頁面后，通過訂單id從后臺(tái)中后去訂單價(jià)格；用戶可通過余額支付，并輸入密碼完成支付；支付密碼為六位數(shù)，當(dāng)用戶輸入六位數(shù)字后，將訂單id和用戶輸入的密碼傳遞給后臺(tái)，后臺(tái)判斷密碼是否正確。不正確返回錯(cuò)誤信息；正確后，從用戶余額中減去當(dāng)前商品的價(jià)格，并將該訂單設(shè)置為已付款訂單；圖4-22付款頁面圖4-23付款-密碼輸入4.12我的訂單圖4-24我的訂單-全部訂單圖4-25我的訂單-待付款圖4-26我的訂單-已付款圖4-27我的訂單-待收貨圖4-28我的訂單-待收貨-收貨圖4-29我的訂單-已收貨圖4-30我的訂單-待收貨-收貨圖4-31我的訂單-發(fā)布評(píng)論已收貨商品可以執(zhí)行刪除訂單操作，刪除后將不再顯示,后臺(tái)中仍保存記錄；收貨后可對(duì)當(dāng)前訂單發(fā)表評(píng)論，評(píng)論內(nèi)容包括：評(píng)語、圖片、與描述相符、配送效勞、效勞態(tài)度等；4.13開店頁面。圖4-32填寫店鋪信息圖4-33開店成功進(jìn)入頁面自動(dòng)獲取用戶當(dāng)前地址信息并顯示于頁面上，用戶需要按要求填寫店鋪圖片、店鋪名稱、開店人真實(shí)姓名、身份證號(hào)碼、店里、店鋪地址等信息，填寫完成后提交即可完成開店操作；完成開店后，我的頁面顯示店鋪訂單管理選項(xiàng)；4.14店鋪菜單及查看店鋪資料`圖4-34店鋪菜單圖4-35修改店鋪信息4.15發(fā)布商品圖4-36發(fā)布商品需要填寫商品圖片，商品名稱、商品描述、商品價(jià)格、折扣價(jià)〔選填〕、商品分類、商品品牌等4.16效勞器使用phpstudy與NavicatforMySql配合搭建本地效勞器和數(shù)據(jù)庫連接。使用node.js架設(shè)局域網(wǎng)可訪問的效勞器；使用nodemon運(yùn)行效勞器，每次更改或報(bào)錯(cuò)后自動(dòng)重新運(yùn)行，擬補(bǔ)了node.js單線程，報(bào)錯(cuò)后不運(yùn)行的缺點(diǎn)，保證了單個(gè)錯(cuò)誤不影響整個(gè)效勞器的運(yùn)行和使用。允許跨域請(qǐng)求，方便調(diào)試接口。配置數(shù)據(jù)庫參數(shù)，為后面的數(shù)據(jù)庫連接提供鏈接參數(shù)；圖4-37設(shè)置請(qǐng)求跨域開啟一個(gè)局域網(wǎng)效勞器，使局域網(wǎng)內(nèi)可訪問效勞器及查詢數(shù)據(jù)庫信息。圖4-38開啟一個(gè)局域網(wǎng)效勞器將同類接口分類存放于不同的文件，方便管理和排查錯(cuò)誤；主要包括商品接口、用戶接口、地址接口、商鋪接口、訂單接口等；圖4-39各個(gè)接口模塊圖4-38開啟一個(gè)局域網(wǎng)效勞器封裝查詢數(shù)據(jù)庫方法，這樣做的好處的方便查詢數(shù)據(jù)；每次調(diào)用發(fā)起新的數(shù)據(jù)庫連接，查詢成功返回后，斷開連接；這樣做的好處是分開各個(gè)請(qǐng)求，即能節(jié)省資源，當(dāng)一個(gè)查詢出錯(cuò)后不影響其他查詢。第五章系統(tǒng)測試5.1微信授權(quán)與微信號(hào)綁定測試結(jié)果如下：表5-1微信授權(quán)及微信號(hào)綁定測試測試項(xiàng)操作步驟預(yù)期結(jié)果數(shù)據(jù)實(shí)際結(jié)果結(jié)果比擬說明微信授權(quán)與用戶綁定1進(jìn)入小程序，點(diǎn)擊“我的”進(jìn)入我的頁面；2、點(diǎn)擊“授權(quán)注冊/登錄”；3、點(diǎn)擊“立即登錄”；4、點(diǎn)擊“允許”，完成授權(quán)；5、授權(quán)成功后，提交用戶微信信息及code到后臺(tái)；后臺(tái)將code提交微信提供的接口換取用戶唯一標(biāo)識(shí)符，并保存用戶信息；每個(gè)微信號(hào)都可正常授權(quán)，授權(quán)成功后，提交用戶微信信息及code，由后臺(tái)添加用戶；每個(gè)微信號(hào)有唯一的標(biāo)識(shí)符，作為區(qū)分用戶的標(biāo)識(shí)；與預(yù)期結(jié)果一致新用戶的添加功能正常二次進(jìn)入授權(quán)登錄1進(jìn)入小程序，點(diǎn)擊“我的”進(jìn)入我的頁面；2、點(diǎn)擊“授權(quán)注冊/登錄”；3、點(diǎn)擊“立即登錄”；4、點(diǎn)擊“允許”，完成授權(quán)；5、授權(quán)后提交code，后臺(tái)根據(jù)code換取回來的唯一標(biāo)識(shí)符，查找數(shù)據(jù)庫并返回用戶信息；用戶授權(quán)后返回用戶已存在的信息；每個(gè)微信號(hào)有唯一的標(biāo)識(shí)符，作為區(qū)分用戶的標(biāo)識(shí)；與預(yù)期結(jié)果一致用戶數(shù)據(jù)的獲取正常5.2商品列表和詳情測試測試結(jié)果如下：表5-2商品列表和詳情測試測試項(xiàng)操作步驟預(yù)期結(jié)果數(shù)據(jù)實(shí)際結(jié)果結(jié)果比擬說明獲取商品列表，觸底加載更多1、進(jìn)入小程序“熱銷商品頁面”，顯示商品列表；2、下滑觸底后，加載更多商品；1、顯示商品列表、每頁10條；2、每次觸底后再獲取10條數(shù)據(jù)；無與預(yù)期結(jié)果一致商品列表，加載更多可正常使用；商品詳情在商品列表中，隨意點(diǎn)擊多個(gè)商品；頁面中需要展示商品圖片、商品名稱、商品描述、商品價(jià)格、是否包郵等數(shù)據(jù)；底部顯示類似商品類表；無與預(yù)期結(jié)果一致商品詳情頁能正常顯示商品信息和相似商品5.3購物車測試測試結(jié)果如下：表5-3購物車模塊測試測試項(xiàng)操作步驟預(yù)期結(jié)果數(shù)據(jù)實(shí)際結(jié)果結(jié)果比擬說明添加商品到購物車1、隨意選擇多個(gè)商品；2、進(jìn)入商品詳情頁后，點(diǎn)擊參加購物車；1、點(diǎn)擊參加購物車后，會(huì)提示參加成功；2、在購物車中增加相應(yīng)的商品；無與預(yù)期結(jié)果一致參加購物車功能可正常使用；在購物車中修改商品數(shù)量1、進(jìn)入購物車；2、為某個(gè)商品增減商品數(shù)量1、點(diǎn)擊增加按鈕，商品數(shù)量加一，合計(jì)價(jià)格和商品數(shù)量自動(dòng)增加；2、當(dāng)商品水量大于一時(shí)顯示減少按鈕；3、當(dāng)點(diǎn)擊減少按鈕時(shí)，商品數(shù)量及合計(jì)價(jià)格自動(dòng)減少；4、當(dāng)商品數(shù)量等于一時(shí)，隱藏減少按鈕；無與預(yù)期結(jié)果一致購物車中商品數(shù)量可自由增減，總價(jià)及總商品數(shù)量自動(dòng)計(jì)算；批量收藏或刪除購物車1、點(diǎn)擊右上角“編輯”按鈕，切換購物車狀態(tài)；2、選擇需要操作的商品后，點(diǎn)擊“收藏”或“刪除”按鈕。1、選擇全部商品后，全選按鈕自動(dòng)勾選；2、勾選商品并點(diǎn)擊收藏，收藏所有勾選的商品，并提示“收藏成功”；3、勾選商品并點(diǎn)擊“刪除”按鈕，將所有勾選的商品從購物車中移除，并提示“移除成功”無與預(yù)期結(jié)果一致購物車中商品能批量收藏或移除；5.4購物車單商品和多商品結(jié)算測試結(jié)果如下：表5-4購物車單商品和多商品結(jié)算模塊測試測試項(xiàng)操作步驟預(yù)期結(jié)果數(shù)據(jù)實(shí)際結(jié)果結(jié)果比擬說明單商品結(jié)算1、添加商品到購物車；2、勾選一個(gè)商品，點(diǎn)擊“結(jié)算”；選擇商品并點(diǎn)擊結(jié)算后，生成一個(gè)待付款訂單；付款后變?yōu)橐迅犊钣唵?；購物車中選擇單個(gè)商品與預(yù)期結(jié)果一致購物車能結(jié)算單個(gè)商品多商品結(jié)算1、添加多個(gè)商品到購物車中。2、選中多個(gè)商品，點(diǎn)擊“結(jié)算”確認(rèn)訂單頁顯示選中的所有商品，并計(jì)算總價(jià)；生成多個(gè)待付款訂單；付款成功，生成的訂單轉(zhuǎn)為已付款訂單；購物車中選擇多個(gè)商品與預(yù)期結(jié)果一致購物車能一次結(jié)算多個(gè)商品，生成多個(gè)訂單；5.5添加地址和地址選擇測試結(jié)果如下：表5-5購添加地址和地址選擇模塊測試測試項(xiàng)操作步驟預(yù)期結(jié)果數(shù)據(jù)實(shí)際結(jié)果結(jié)果比擬說明添加地址1、進(jìn)入確認(rèn)訂單頁面；2、無地址時(shí)點(diǎn)擊“添加地址”；3、進(jìn)入添加地址頁面，填寫信息并提交；根據(jù)用戶選擇動(dòng)態(tài)加載地址數(shù)據(jù)，所有數(shù)據(jù)填寫并提交后，為當(dāng)前用戶增加一條地址信息；全國省市區(qū)地址信息與預(yù)期結(jié)果一致可以正常添加地址；選擇默認(rèn)地址1、進(jìn)入添加地址頁面