基于web的購物商城的開發(fā)與實現(xiàn)

摘要網(wǎng)上購物的人員越來越多大,各種網(wǎng)上購物系統(tǒng)的浮現(xiàn),使人們能夠足不出戶的進行購物.這種現(xiàn)象對于各單位而言,無論是企業(yè)與客戶之間的交易,還是企業(yè)之間的交易,可以通過網(wǎng)上交易的方式,使交易速度得到大幅度提高,并達到節(jié)約成本的目的.現(xiàn)階段,隨著信息產(chǎn)業(yè)和計算機網(wǎng)絡(luò)數(shù)據(jù)庫技術(shù)的不斷發(fā)展,網(wǎng)上購物的形式越來越多樣.文章主要對基于Web的網(wǎng)上購物系統(tǒng)進行分析,使其能夠為人們的日常生活提供更多方便。關(guān)鍵詞：網(wǎng)上購物系統(tǒng)WEBvue-clithinkphpJavaScript引言1.1購物商場的設(shè)計思想本人基于目前手機對應(yīng)大家來說幾乎是形影不離的情況下，設(shè)計一個便捷的移動端網(wǎng)上購物商城系統(tǒng)，讓它也有機會與大家息息相關(guān)。該購物系統(tǒng)使用前后端分離的設(shè)計思想，先設(shè)計好前端的每個頁面結(jié)構(gòu)，在開始畫頁面，結(jié)合前端代碼與前端框架進行開發(fā)，代碼與圖片的相結(jié)合完成前端的結(jié)構(gòu)。后端先收集好各種數(shù)據(jù)，再把后端管理系統(tǒng)的界面設(shè)計好，把各類功能整理出來，根據(jù)需要的功能做出對應(yīng)的功能實現(xiàn)模塊，在開始做數(shù)據(jù)的處理。1.2商城開發(fā)工具的選用和介紹在當(dāng)今人人手機不離身的時代下，我將寫一個基于移動端的一個購物系統(tǒng)，它的開發(fā)主要包括后端數(shù)據(jù)庫的建立，后端管理以及前端頁面的Web設(shè)計。系統(tǒng)采用了我比較熟悉的VScode,Editplus,Apacheservices,pyCharm,photoshop等開發(fā)工具，做出詳細的結(jié)構(gòu)分析，前端頁面的劃分，前端頁面的功能，提供給用戶的信息做出詳細的整合，使用Vue3.0框架對前端做開發(fā)；數(shù)據(jù)的收集使用python進行爬取,大量收集json數(shù)據(jù);后端系統(tǒng)使用PHP語言,采用thinnkphp5.0框架對后端數(shù)據(jù)做主要的處理，通過apache提供服務(wù)器接口，完成主要的基本功能。改購物系統(tǒng)主要包括用戶管理功能，商品信息，店家信息展示，購物車管理，訂單管理4大主要模塊。用戶管理實現(xiàn)了用戶的注冊，登陸，退出等主要功能；商品信息展示主要實現(xiàn)了顯示商品，商品的詳細信息，店家詳細信息，商品選購等主要功能；購物車管理實現(xiàn)查看商品，修改數(shù)量，刪除商品等主要功能；訂單管理包括改訂單的詳細信息，地址的填寫等主要功能。該系統(tǒng)簡介有效，處于移動端使用，符合當(dāng)代人生活習(xí)慣。2購物商城的概要設(shè)計2.1項目背景介紹2.1.1網(wǎng)上商城的背景近年來，隨著網(wǎng)絡(luò)時代的迅速崛起，互聯(lián)網(wǎng)已經(jīng)成為了收集和提供信息的重要渠道并已經(jīng)深入到了傳統(tǒng)的流通領(lǐng)域。所謂時勢造英雄。各種時代化的流行領(lǐng)域迅速發(fā)展起來，尤為大家熟知的電子商務(wù)更是如日中天，在很短的時間內(nèi)就遍布全國，小到5歲，大到65，基本都熟知網(wǎng)購，然后消費者主要接觸的就是電子商務(wù)的前端商務(wù)平臺，在其整個流程中有著舉足輕重的作用。而購物商場的騰空出現(xiàn)，為新一代的購物方式提供了一種全新的購物平臺。我要為大家詳細介紹的就是如何建設(shè)一個全新的網(wǎng)上購物系統(tǒng)。網(wǎng)上購物是一種具有交互功能的商業(yè)信息系統(tǒng)。它向用戶展示了大量的信息，包括各種各樣的商品信息，買家賣家信息等等等等，這些主要是一些靜態(tài)信息；當(dāng)然還有些較為重要的動態(tài)信息，商品報價的實時更新，各種節(jié)日活動折扣信息等等等等；除此之外還有較為完善的交互功能，能讓商家客服和用戶做出詳細的交流，客服為用戶對改商家的商品答疑解問，進一步促進了商品成交的成交率。讓網(wǎng)購實現(xiàn)更人性化接近化的感覺。隨著網(wǎng)絡(luò)經(jīng)濟時代的高速發(fā)展，互聯(lián)網(wǎng)已逐步深入人心，大家都熱衷與網(wǎng)上購物，網(wǎng)上購物已經(jīng)基本在12-60歲的人都熟悉的使用，基本實現(xiàn)了人人會網(wǎng)購的情況出現(xiàn)。信息技術(shù)的快速發(fā)展，讓很多的人都開始采用了網(wǎng)上銷售和管理等方式。網(wǎng)上購物極大的方便了人們的生活狀態(tài)，現(xiàn)在很多的工作黨常年的工作，基本抽不出時間到外面花大量的時間逛實體店尋找自己要的東西來購買，而網(wǎng)上購物則可以輕松解決這種問題，只要一部手機，正常上網(wǎng)則可以百里挑一，輕松便捷的找到合適自己的東西，而且類型齊全，價格方面甚至都比實體店占據(jù)了很大的優(yōu)勢。網(wǎng)上購物對社會的發(fā)展有著無比重大的意義，它完全顛覆了以前傳統(tǒng)的購物行為與方式，它引領(lǐng)了一個跨時代的進步。2.2模塊設(shè)計2.2.1前端模塊前端模塊的設(shè)計主要分為頁面結(jié)構(gòu)，頁面樣式，頁面功能3大結(jié)構(gòu)。頁面結(jié)構(gòu)主要分為首頁，分類，購物車，個人首頁4大部分；首頁有各種商品展示，又分為流行，新款，精選類商品，選中該商品點擊即可進入商品詳情頁面，在商品詳情頁，可以點擊該商品加入購物車；也可以直接進行購買，可以與客服進行交流，可以進店看看，也可以對該商品進行收藏。分類頁面主要用于展現(xiàn)更為詳細的物品分類，包括全身的帽子，衣服，鞋子等等等等，在每一類中還細分為3大類，包括綜合，新品和銷量，每一樣都類型多多；購物車頁面則可以看到加入購物車的物品，也可以在這里把該物品移除購物車，或者添加數(shù)量，在購物車頁面內(nèi)也可以取消選中某類商品，在下面有一個全選功能，該全選功能在本來已經(jīng)全部選中的狀態(tài)下是全部不選中的作用，其他情況均為全部選中，同行內(nèi)，還有一個合計價格，右側(cè)還有一個取計算的按鈕等功能；個人首頁則主要用來展示該用戶登陸后的個人信息，有未登陸前的頁面本身的信息，有登陸成功后該用戶的信息，其中包括他的個人余額，優(yōu)惠劵，積分等信息，還設(shè)計了一些小功能，包括一些積分商城，積分可兌換商品，和會員卡等小功能，這些是主要前端模塊的設(shè)計思想。2.2.2后端模塊后端模塊的設(shè)計主要分為三大部分，首先第一部分是收集數(shù)據(jù)；第二部分則是對后端模塊的結(jié)構(gòu)頁面的設(shè)計；第三部分則是對數(shù)據(jù)的處理，即主要是對數(shù)據(jù)的增刪改查。數(shù)據(jù)的來源主要是使用python爬取蘑菇街的大量信息，把大量信息存入數(shù)據(jù)庫，利用thinkphp5.0對數(shù)據(jù)做對應(yīng)方法的增刪改查。收集數(shù)據(jù)主要采用python對蘑菇街的信息進行爬取，以json的格式進行保存下拉；后端數(shù)據(jù)庫的設(shè)計主要是通過下載phpMyadmin，利用它創(chuàng)建數(shù)據(jù)庫，創(chuàng)建對應(yīng)的數(shù)據(jù)表做整體數(shù)據(jù)的存儲和管理；數(shù)據(jù)的處理則是使用TP5框架，利用Sql語句，封裝好對應(yīng)的增刪改查方法，對后端數(shù)據(jù)做出處理。后端中有管理員身份的功能模塊，也有數(shù)據(jù)處理模塊，比如有更改商品價格的功能，有更改對商品信息描述的功能等等，這是設(shè)計后端模塊的思想。

3詳細設(shè)計3.1前端模塊設(shè)計3.1.1前端的搭建前端采用vuecli3.0創(chuàng)建項目:首先全局下載node.js,node版本大于8.9,然后開始下載全局的npm依賴，可以在dos里使用命令:npminstall-g@vue/cli,默認下載最新版本,或者在VScode里面的終端里面安裝,同樣安裝完之后可以使用vue-V檢測當(dāng)前安裝的版本。有了這些前提條件之后，我們可以在新建文件下開始創(chuàng)建項目，同樣在VScode的終端下使用命令:vuecreatemy-project-save-dev,包含開發(fā)時依賴，測試依賴；創(chuàng)建項目的過程有各種選項選擇，各個選項可以使用空格選擇，typescript支持使用typescript書寫源碼，router支持vue-router,vuex支持vuex;還有各種個人信息可以填寫到項目里面,包括作者，郵箱等個人信息，當(dāng)我們選擇好各類選項之后，開始安裝直到項目下載完成。于是我們的vue-cli3.0就已經(jīng)安裝完成，我們還可以補充許多開發(fā)時經(jīng)常用到的文件信息，例如，創(chuàng)建一個assests文件，里面存放一些公共css文件和一些圖片img，各種小圖標logo，包括封裝一些常用的js方法，例如時間的格式化等一些常用的方法；在該文件下通常也會封裝該項目所需的大部分組件，有依賴該項目的文件可以放到components/content下,若不存在較強的依賴性，可以獨立封裝到components/common文件下，該文件夾中的組件均可以直接使用到其他項目中去；我們繼續(xù)可以創(chuàng)建一個network文件用于發(fā)送網(wǎng)絡(luò)請求的文件，里面封裝好發(fā)送網(wǎng)絡(luò)請求的方法，便于我們請求接口的數(shù)據(jù)；可以創(chuàng)建一個store文件用于對要使用到vuex的功能進行封裝；創(chuàng)建一個view用于對各個主頁進行統(tǒng)一的存放；可以創(chuàng)建一個vue.config.js文件，在該文件內(nèi)全局導(dǎo)出一個個文件夾目錄的別名，方便項目開發(fā)的時候劍神對路徑的依賴；到此可以進行前端的開發(fā)。3.1.2前端中各頁面的設(shè)計每個頁面都使用photoshop把每個頁面大致外觀描繪出來，通過各種小格局的不斷調(diào)試，最終完善每個頁面的設(shè)計。第一步首先做好PSD，根據(jù)自己所畫的頁面，確定哪些位置將有圖片來完成，哪些位置是代碼能夠完成的，一些動態(tài)效果需要用到j(luò)avascript來實現(xiàn)，這樣步步為營，先把準備工作完成，在開始前端的開發(fā)。3.1.3前端中各頁面中的小圖標的獲取前端頁面中涉及很多的小圖標，比如首頁，分類購物車，分類，我的，和返回按鈕等，其中還包括該選項是否處于活躍狀態(tài)的時候的圖標。而我對這些圖標的選擇則在阿里巴巴矢量官網(wǎng)庫里面選擇合適的圖標采用svg格式下載到本地使用。3.1.4前端中導(dǎo)航欄組件的封裝與使用前端的單頁面中主要使用組件化的開發(fā)思想，為了方便維護，使用地內(nèi)聚，高耦合的組件化封裝，基本實現(xiàn)一個功能一個組件，類似功能則直接導(dǎo)出封裝好的組件使用即可。而其中的導(dǎo)航欄則封裝為一個MainTabBar的一個獨立組件，其中使用了四個插槽為了分別顯示首頁，分類，購物車，我的，四個主要頁面，其中每個頁面都有自己對應(yīng)的小圖標，并且小圖標都分別有兩種不同的顏色，紅色代表處于活躍狀態(tài)的時候，黑色代表處于非活躍狀態(tài)的時候。在這里先配置好路由，在router文件下的index.js文件中，每一個頁面跳轉(zhuǎn)都使用路由懶加載的方式，減輕服務(wù)器的壓力，用于在這4個頁面中跳轉(zhuǎn)，其中每一個跳轉(zhuǎn)對應(yīng)了其中的子組件，其中包括首頁-Home.vue;購物車-Cart.vue;分類-Category.vue;我的-Profile.vue,在配置路由時候，每當(dāng)點擊哪里即可跳轉(zhuǎn)至哪里，其路徑的方式為history，在此還定義一個redirect重定向主要作用于默認在首頁.。到此為止，主要的4大部分內(nèi)容即可分好。3.1.5前端中首頁的開發(fā)首頁開始首先是頂部的開發(fā)，頂部中間顯示的是購物車，也是該項目的主要作用，它是一個組件為NavBar.vue，該組件在頭部還分為左中右三部分，三部分均用插槽作用，這里使用插槽的主要原因是為頭部封裝一個獨立的組件，該項目封裝的組件均設(shè)計有默認的樣式，可能在其他頁面也會被使用到，到時候在直接調(diào)用該組件即可；下面則是輪播圖，該輪播圖也封裝成一個獨立的組件，其輪播中的圖片在調(diào)用接口后返回數(shù)據(jù)，接收到圖片使用封裝好的組件Scroll.vue開始輪播，其設(shè)計原理主要是采用了定時器，每張圖的播放時間為2.5秒，點擊到圖片時，定時器清除，圖片停止播放，放開即繼續(xù)播放，當(dāng)把其中的圖片向左或向右滾動至1/3位置時，即可滑到下一張圖片，當(dāng)我們直接點擊其中的輪播圖后，則會跳轉(zhuǎn)至該輪播圖所在的詳情頁信息，對應(yīng)該輪播圖攜帶的主要信息測展示；接下來是一個圖片的組件HomeSwiper.vue，該組件內(nèi)部的圖片展示是調(diào)用Swiper.vue組件與他的子組件SwiperItem.vue為該組件做一個展示的結(jié)果，在整體圖片外面包裹一個<a>標簽；接下來同樣是接口返回的一張圖片，作為一個本周流行內(nèi)容，調(diào)用了RecommendVie.vue組件，在點擊這張整體圖片后會跳轉(zhuǎn)至一個本周流行的商品展示頁面，展示的是本周流行的商品詳細信息；下面到了三個小分類數(shù)據(jù)，這里封裝了一個TabControl.vue組件，包括其中的流行，新款，精選三種數(shù)據(jù)的展示，當(dāng)點擊新款則展示新款數(shù)據(jù)，其他兩類也是如此，其中點擊其中的一種展示的樣式也是不一樣的，展示的樣式為紅色和下劃線，而展示的內(nèi)容包括圖片，標題，價格和收藏量，它們用一個GoodsList.vue組件和其子組件GoodsListItem.vue進行展示，它們均為接口返回數(shù)據(jù)，當(dāng)用戶一直往下來的時候則，流行，新款，精選，三個選項會有一個吸頂效果，持續(xù)下拉該三項會停留在購物街的下面位置，而上拉回來的時候又回消失在該位置，當(dāng)下拉到一定程度時候，右下角會出現(xiàn)一個回到頂部的小箭頭按鈕，該小按鈕也是一個封裝好的BackTop.vue的組件，當(dāng)點擊該按鈕時則會在200毫秒的時間回到頂部，其中當(dāng)用戶持續(xù)下拉找尋更多商品的時候會觸發(fā)上拉加載更多的時間，繼續(xù)回調(diào)接口返回更多的數(shù)據(jù)展示，可謂是任君挑選，這樣的流程下來后，首頁開發(fā)完成。3.1.6前端中BetterScroll的使用首頁中的滾動采用的是BetterScroll作為滾動效果，沒有采取JavaScript中的原生的滾動，這是一個開發(fā)者已經(jīng)持續(xù)開發(fā)和維護中的一個比較好用的插件，該插件的使用方法較為簡單便捷，直接在終端輸入下載命令即可，然后把BetterScroll組件直接引用進來，在Components里面注冊，把需要滾動的部分放到該組件內(nèi)即可，選擇該組件還有一個重要的原因，是因為該組件在下拉或上拉到頂?shù)臅r候有一個回彈的效果，在移動端中比較適用；betterScroll在使用的過程中存在不少的bug，我們在使用這個組件的時候必須給定滾動內(nèi)容一個指定高度，不能像原生滾動一樣，以文本內(nèi)容支撐高度，而better-scroll在計算可滾動高度時時在該組件掛載完之后，所以在內(nèi)容較長，圖片較多的頁面往往會產(chǎn)生一個滾動滾到一定位置不能繼續(xù)往下滾的bug，為了解決這個bug，我們必須在之前監(jiān)聽該首頁的圖片加載完成事件，而在我們監(jiān)聽完這個事件后，我們在開啟調(diào)用該方法，才能保證該滾動效果沒出現(xiàn)類似的bug。3.1.7前端中的詳情頁當(dāng)點擊首頁中的某一個商品的時候，它會攜帶其中的一個iid來到詳情頁面，根據(jù)攜帶過來的iid顯示該商品的詳情部分信息在此頁面做展示。該頁面頭部有5個小部分，由一個封裝好的DetailNavBar.vue組件，從左到右依次是一個返回按鈕，商品，參數(shù)，評論，推薦，這5大選項，其中每一個都對應(yīng)其相對的信息；其中商品詳情數(shù)據(jù)包括大量的穿著效果圖片、標題、價格、優(yōu)惠價格、銷量、折扣信息、運險，退貨，包郵等等信息；參數(shù)信息則包括，胸圍、腰圍、褲長、衣長、肩寬、腰圍、圖案、顏色、季節(jié)、材質(zhì)、領(lǐng)型、袖長、風(fēng)格、尺碼、版型等具體參數(shù)信息的展示；而評論信息則可以展示買家的評論信息內(nèi)容，包括該用戶的id、圖像、評論內(nèi)容和評論時間、評論圖片等內(nèi)容，同行內(nèi)還有可以點擊顯示更多評論內(nèi)容；而最后的推薦內(nèi)容展示風(fēng)格和首頁的上拉加載更多展示的風(fēng)格一致，而在推薦列表中則沒有做圖片的上拉加載更多，只有固定數(shù)量圖片的展示。詳情頁中的滾動同樣是采用BetterScroll作為滾動效果，在這里也直接調(diào)用回到頂部的組件BackTop.vue，在下拉到一定距離后則會顯示一個回到頂部按鈕，回到頂部后該按鈕消失；其中這里詳情頁的設(shè)計還有一個重點就是頂部四大項的點擊，同樣點擊其中的一項會有紅色的樣式作為標志，未選中的則為黑色，而當(dāng)你點擊其中的一項時候，該詳情頁會在200毫秒跳到相應(yīng)的位置，其中的BackTop.vue組件也會在點擊對應(yīng)選項時滾動到的位置做一個顯示；然后我們并未選擇點擊頂部選項的方式來瀏覽詳情頁的相應(yīng)內(nèi)容，選擇下拉瀏覽的時候，當(dāng)你下拉到相應(yīng)的位置時，上面的選項也會根據(jù)你下拉到的位置顯示相應(yīng)位置的紅色樣式。該詳情頁的導(dǎo)航欄部分則有5大部分，分別是客服、店鋪、收藏、加入購物車、購買功能。其中的客服功能，主要的是賣家于買家的簡要溝通，兩者可以在此做一些簡單的商品方面的詢問信息等，該功能由一個Cheap.vue組件完成；店鋪信息，就是在同一家店中，找尋該店的其他商品，包括一些類似的商品，這里有GoodsList.vue和其子組件GoodsListItem.vue組件共同完成該功能。這里的收藏功能的話，在你點擊收藏按鈕的時候，會把該商品收藏到你的收藏夾里面，在收藏夾中展示的信息與購物車展示的方式一樣，同樣采用CartList.vue和其子組件CartListItem.vue做一個收藏夾的展示。3.1.8前端中的購物車購物車頁面的頂部和首頁中的頂部使用同一個組件NavBar.vue，購物車頁面頂部展示的是購物車和數(shù)量，展示購物車的的組件為CartList.vue和其子組件CartListItem.vue，該數(shù)量為所有購物車內(nèi)的種類數(shù)量，包括選中和未選中的商品；該頁面滾動部分也是使用BetterScroll作為滾動；其中購物車頁面展示的是一個圖片和部分說明信息，價格和數(shù)量，在每一項的左邊還有一個選擇按鈕，當(dāng)你加在詳情頁加入購物車后，詳情頁在中間位置會有一個吐司效果，該效果是一個Toast.vue的組件，如果選擇一個新商品添加到購物車，則顯示添加購物車成功，如果同一種商品多選，則會顯示選擇該商品數(shù)量+1，均在1.5秒后消失該提示信息；購物車頁面在貼住底部導(dǎo)航欄中還有一個全選按鈕和一個合計信息和一個去計算的數(shù)量信息，由一個CartBottomBar.vue的組件完成，全選則用于對購物車中的商品做一個全部選擇作用，如果購物車中的所有商品已經(jīng)是全部選擇狀態(tài)，則該按鈕為全部不選擇的作用；合計信息主要是總價格的計算，用每個商品的單價乘與數(shù)量產(chǎn)生總價格；去計算按鈕則是選中的數(shù)量，與頂部的數(shù)量不是同一個作用。3.1.9前端中的分類分類頁面中的頂部依然是調(diào)用和首頁頂部相同的組件NavBar.vue，展示的信息是商品分類。而下面開始則分為左右結(jié)構(gòu)，左邊顯示商品的類別，右側(cè)則顯示你選中的類別的商品部分信息的展示。左側(cè)商品的選項為豎著方向的日常的穿著用品名稱，包括第一項統(tǒng)一性的正在流行，然后依次是上衣，褲子，裙子，內(nèi)衣，女鞋，男友，包包，運動，配飾，美妝，個護，家居，百貨，母嬰，食品等等，其中主要的是女性衣飾品，由一個TabMenu.vue組件展示，當(dāng)點擊其中的任意一項時，該項的樣式則發(fā)生改變，該選項左側(cè)有左劃線，字體顏色為紅色，字體大小也有明顯的變大；來到右邊部分，展示的則是你在左側(cè)選中的選項的對應(yīng)信息，右側(cè)展示對應(yīng)的信息時還細分為三大類，包括綜合數(shù)據(jù)，新品數(shù)據(jù)和銷量數(shù)據(jù)，這些數(shù)據(jù)的展示則是用TabControl.vue組件，這是前面也已經(jīng)封裝好的組件，而這里和首頁傳過去的參數(shù)不一樣，這里傳的是綜合，新品和銷量，這里也體現(xiàn)了復(fù)用組件的便捷性，而我們在左側(cè)選擇自己想要的類型的時候來到右側(cè)又有三大類型挑選，可謂是內(nèi)容多多，用戶則可以在所需的對應(yīng)的商品中選擇合適自己的進行購買，而在我們點擊了心儀的商品之后，會跳轉(zhuǎn)至商品的詳情頁，該詳情頁的設(shè)計思想與在首頁中選中的商品點擊跳轉(zhuǎn)的詳情頁一致都是使用DetailShopInfo.vue等組件一起做一個展示，同樣來到了詳情頁之后可以選擇添加至購物車或者直接購買。3.1.10前端中的個人我的商城頁面中的頂部信息依然是首頁頂部的組件NavBar.vue，展示的信息為我的商城。我的商城下面則是個人信息，包括個人信息的頭像和登陸注冊功能和綁定手機號作用，其中主要由一個UserInfo.vue組件組成。在下面則展示的信息是我的余額和我的優(yōu)惠卷，還有我的消費積分，這里的信息則是在當(dāng)前組件內(nèi)用DIV+CSS做一個結(jié)構(gòu)布置和頁面樣式，把內(nèi)容展示出來。再來到下面則依次是我的消息，積分商城，會員卡，我的購物車，下載購物App等功能，這里的幾大功能都是封裝好一個ListView.vue組件組成，由該組件進行內(nèi)容的展示。3.1.11前端中的支付和支付成功我們在詳情頁面選擇好自己心儀的商品后，想對該商品進行購買，或者在購物車點擊購買所需的物品，則可以來到購買頁面，這里由于支付的接口個人申請不到，則統(tǒng)一為購買后直接跳轉(zhuǎn)至支付成功頁面，在支付成功后可以看到該商品的下單事件，花費的價錢，商品的描述信息等，類似于購物車頁面的商品信息，這里又一個SurePull.vue組件完成該功能。3.2后端模塊設(shè)計3.2.1后端的搭建在windows系統(tǒng)上，后端采用thinkphp5.0作為開發(fā)框架。首先下載Apache作為服務(wù)器，構(gòu)建虛擬主機，更改vhost和host配置文件，配置一個自己的端口號，方便預(yù)覽。開始下載TP5框架，把下載好的框架拉到Editplus進行開發(fā)。下載phpMyadmin，在phpMyadmin中創(chuàng)建數(shù)據(jù)庫，創(chuàng)建對應(yīng)的數(shù)據(jù)表，準備階段將完成。后端的搭建基本完成。3.2.2后端的數(shù)據(jù)收集后端大量數(shù)據(jù)的收集主要來源于蘑菇街，采用python在該系統(tǒng)中爬取相關(guān)的數(shù)據(jù)，在爬取的過程中需要選擇高網(wǎng)速的網(wǎng)絡(luò)，否則將會出現(xiàn)錯誤，爬取的信息不齊，獲取爬取失敗，包括大量的圖片，圖片標題，圖片的分類，流行的，精選的，新款的，還有詳細分類中的上衣，褲子等尺碼，評論，時間等各種描述信息，商品價格，銷售量等信息，爬取到的JSON數(shù)據(jù)存入phpMyadmin中相應(yīng)的數(shù)據(jù)庫中的數(shù)據(jù)表內(nèi)，收集好的數(shù)據(jù)將作用于項目的主要開發(fā)來源。3.2.3后端數(shù)據(jù)庫和表的創(chuàng)建后端采用phpMyadmin創(chuàng)建數(shù)據(jù)庫，創(chuàng)建的數(shù)據(jù)庫庫為supermall，在次數(shù)據(jù)庫內(nèi)創(chuàng)建相對應(yīng)的表，每一種分類數(shù)據(jù)對應(yīng)一張表，在對應(yīng)的數(shù)據(jù)表中，創(chuàng)建許多的字段對應(yīng)相應(yīng)的內(nèi)容，比如，前端中的輪播圖中的圖片使用一個字段，本周流行也對應(yīng)一個字段，流行，新款，精選等都有相應(yīng)的字段對應(yīng)，其中每個圖片還有對應(yīng)的id作為唯一標識，用作于該表的主鍵。許多的數(shù)據(jù)表，基于這種結(jié)果，在對應(yīng)的需求中逐漸的添加，逐漸的修改完善。3.2.4后端中的管理頁面設(shè)計后端中，打開后端管理系統(tǒng)，則需要管理員登陸，在成功登陸后則進入到后端管理系統(tǒng)中，該管理系統(tǒng)采用左右布局的方式，左側(cè)為管理選項，右側(cè)為管理信息，其中包括管理員管理，包括數(shù)據(jù)的管理，在右側(cè)的管理列表中也相對應(yīng)數(shù)據(jù)表中的各個字段做相應(yīng)的內(nèi)容展示，便于管理。后端頁面設(shè)計較為簡介，樣式和布局的規(guī)劃簡介明了。3.2.5后端系統(tǒng)中的主要功能后端系統(tǒng)中，有登陸功能，有修改密碼功能，在需要更改登陸密碼的時候可以使用修改密碼功能，對管理系統(tǒng)的登陸密碼進行修改；在成功登陸進系統(tǒng)之后，在左側(cè)的選項欄中可以看到有管理員模塊和數(shù)據(jù)模塊，管理員模塊中主要有添加管理員，刪除管理員，修改管理員信息等功能；而數(shù)據(jù)模塊中則有許多的功能，分別都是對數(shù)據(jù)的處理功能，包括各種圖片的路徑，圖片的標題信息，描述信息，商品尺碼，買家評論，庫存，銷量，價格等大量的信息，此功能模塊即可對這些信息，做相應(yīng)的更改，例如，更改某商品的價格，添加商品的庫存，添加新款上市衣服等對這戲數(shù)據(jù)信息處理的功能。3.2.6后端系統(tǒng)中功能的實現(xiàn)后端系統(tǒng)中功能的實現(xiàn)，首先打開Editplus把下載好的thinkphp5.0框架拉到editplus編譯器中，開始進行開發(fā)，對后端頁面陳述的功能的實現(xiàn)。首先找到配置文件database.php文件，在其return中，把數(shù)據(jù)庫名改為在phpMyadmin中創(chuàng)建好的數(shù)據(jù)庫名supermall，把表前綴也改為與創(chuàng)建的數(shù)據(jù)表的前綴名字一致，其他配置信心基本保持默認，核對有沒有不一致的信息，TP5框架基本為我們寫好配置信息。在正確連接上數(shù)據(jù)庫后，我們可以開始進行開發(fā)。我們可以在common.php中先封裝好常用的方法，例如對數(shù)據(jù)的刪除和添加兩種，而修改和查詢分為兩類方法，一個是普通查詢，一個是高級查詢，修改同樣也分普通和高級修改，這樣的處理分式，對于數(shù)據(jù)有著良好的接納性。針對于管理員功能中，我們要為管理員修改登陸密碼，即可用封裝好的普通修改密碼的方法即可，在后端頁面系統(tǒng)中，登陸頁面中則有修改密碼安妮，當(dāng)管理員需要修改密碼時，則可以使用；管理員系統(tǒng)中，還可以添加管理員，同樣點擊添加管理員，即在頁面輸入數(shù)據(jù)表中對應(yīng)的字段信息，則將保存到數(shù)據(jù)庫，新的管理員也就誕生了；如是該管理員離職，則需要移除賬號是，同樣，點擊移除該管理員，使用封裝好的刪除的方法，即可將該數(shù)據(jù)從數(shù)據(jù)庫中移除掉。一個管理員系統(tǒng)中的管理員功能的基本功能就完成了。我們要對數(shù)據(jù)模塊功能做處理，首先對于圖片的包裝，我將爬取到的各類數(shù)據(jù)，進行詳細的分類，例如，爬取到的輪播圖中的圖片，我在數(shù)據(jù)表中創(chuàng)建了一個字段用于保存，而在用TP5框架處理的時候，則用一個數(shù)組用來保存，當(dāng)有圖片要更新或替換的時候，會在后端系統(tǒng)中有更換輪播圖的按鈕，點擊之后，依舊調(diào)用common.php中封裝好的方法，用于更新輪播圖的圖片。對于其他的分類，例如流行類，該類圖片設(shè)計的字段更多，其中包括有該圖片的url,title,height,link,keywords,等等很多的信息，我們單獨為它創(chuàng)建一個表，創(chuàng)建對應(yīng)的字段，給予一個主鍵用于確定它的唯一性，給定一個id，讓我們明確的分類好各鐘圖片，而我的后端系統(tǒng)中，并未對該圖片的每一項信息，都做對應(yīng)的更改功能，選擇部分需要常用的功能，例如價格，款式，顏色等，有變更，直接在后端做變更，同樣調(diào)用封裝好的方法，其他的新款，或者精選還有其他的分類信息，均采用該方式，對數(shù)據(jù)的處理，然后實現(xiàn)后端的功能模塊。

感謝語經(jīng)過這一次的項目開發(fā)，我有學(xué)到了很多的知識，對vue.js的理解更加深刻，對于項目的需求有了更加的嚴謹性，充分練習(xí)了我的邏輯能力，對于一個人的獨立項目，涉及的知識面比較寬廣，意識到自己的知識領(lǐng)域相當(dāng)?shù)莫M隘，而且對于許多新的知識也不夠了解，讓我有了對新知識的迅速學(xué)習(xí)感。在此除了自我學(xué)習(xí)外，老師也給予了我很大的技術(shù)直到和經(jīng)驗，對于一些不自覺產(chǎn)生的bug老師總能憑著自己豐厚的經(jīng)驗，給我我思路，根據(jù)老師提供的思路，總結(jié)bug可能產(chǎn)生的原因，根據(jù)實際情況解決bug。在此，深深的感謝我的指導(dǎo)老師，在他的指導(dǎo)下順利完成畢業(yè)設(shè)計。非常謝謝老師。參考文獻[1]在vue.js教科書里面參考許多方法的實現(xiàn)，功能的實現(xiàn)，了解vue.js的生命周期函數(shù)。[2]百度尋找疑惑的不解的問題。通過找尋別人的開發(fā)經(jīng)驗，參考我的問題所在，做出正確的修改方案。[3]在CSS3的書本里面參考部分新出的樣式功能，相對于以前的使用javascript實現(xiàn)的效果來說，css3簡單的樣式就能實現(xiàn)這些功能，使得代碼更加的簡潔。

附錄資料：不需要的可以自行刪除HYPERLINK不用鼠標怎么用鍵盤操作電腦.有哪些快捷鍵?快捷鍵大全F1顯示當(dāng)前程序或者windows的幫助內(nèi)容。F2當(dāng)你選中一個文件的話，這意味著“重命名”F3當(dāng)你在桌面上的時候是打開“查找：所有文件”對話框F10或ALT激活當(dāng)前程序的菜單欄windows鍵或CTRL+ESC打開開始菜單CTRL+ALT+DELETE在win9x中打開關(guān)閉程序?qū)υ捒駾ELETE刪除被選擇的選擇項目，如果是文件，將被放入回收站SHIFT+DELETE刪除被選擇的選擇項目，如果是文件，將被直接刪除而不是放入回收站CTRL+N新建一個新的文件CTRL+O打開“打開文件”對話框CTRL+P打開“打印”對話框CTRL+S保存當(dāng)前*(糙)*作的文件CTRL+X剪切被選擇的項目到剪貼板CTRL+INSERT或CTRL+C復(fù)制被選擇的項目到剪貼板SHIFT+INSERT或CTRL+V粘貼剪貼板中的內(nèi)容到當(dāng)前位置ALT+BACKSPACE或CTRL+Z撤銷上一步的*(糙)*作ALT+SHIFT+BACKSPACE重做上一步被撤銷的*(糙)*作Windows鍵+M最小化所有被打開的窗口。Windows鍵+CTRL+M重新將恢復(fù)上一項*(糙)*作前窗口的大小和位置Windows鍵+E打開資源管理器Windows鍵+F打開“查找：所有文件”對話框Windows鍵+R打開“運行”對話框Windows鍵+BREAK打開“系統(tǒng)屬性”對話框Windows鍵+CTRL+F打開“查找：計算機”對話框SHIFT+F10或鼠標右擊打開當(dāng)前活動項目的快捷菜單SHIFT在放入CD的時候按下不放，可以跳過自動播放CD。在打開word的時候按下不放，可以跳過自啟動的宏ALT+F4關(guān)閉當(dāng)前應(yīng)用程序ALT+SPACEBAR打開程序最左上角的菜單ALT+TAB切換當(dāng)前程序ALT+ESC切換當(dāng)前程序ALT+ENTER將windows下運行的MSDOS窗口在窗口和全屏幕狀態(tài)間切換PRINTSCREEN將當(dāng)前屏幕以圖象方式拷貝到剪貼板ALT+PRINTSCREEN將當(dāng)前活動程序窗口以圖象方式拷貝到剪貼板CTRL+F4關(guān)閉當(dāng)前應(yīng)用程序中的當(dāng)前文本（如word中）CTRL+F6切換到當(dāng)前應(yīng)用程序中的下一個文本（加shift可以跳到前一個窗口）在IE中：ALT+RIGHTARROW顯示前一頁（前進鍵）ALT+LEFTARROW顯示后一頁（后退鍵）CTRL+TAB在頁面上的各框架中切換（加shift反向）F5刷新CTRL+F5強行刷新激活程序中的菜單欄F10執(zhí)行菜單上相應(yīng)的命令A(yù)LT+菜單上帶下劃線的字母關(guān)閉多文檔界面程序中的當(dāng)前窗口CTRL+F4關(guān)閉當(dāng)前窗口或退出程序ALT+F4復(fù)制CTRL+C剪切CTRL+X刪除DELETE顯示所選對話框項目的幫助F1顯示當(dāng)前窗口的系統(tǒng)菜單ALT+空格鍵顯示所選項目的快捷菜單SHIFT+F10顯示“開始”菜單CTRL+ESC顯示多文檔界面程序的系統(tǒng)菜單ALT+連字號(-)粘貼CTRL+V切換到上次使用的窗口或者按住ALT然后重復(fù)按TAB，切換到另一個窗口ALT+TAB撤消CTRL+Z使用“Windows資源管理器”的快捷鍵如果當(dāng)前選擇展開了,要折疊或者選擇父文件夾左箭頭折疊所選的文件夾NUMLOCK+負號(-)如果當(dāng)前選擇折疊了，要展開或者選擇第一個子文件夾右箭頭展開當(dāng)前選擇下的所有文件夾NUMLOCK+*展開所選的文件夾NUMLOCK+加號(+)在左右窗格間切換F6可以使用Microsoft自然鍵盤或含有Windows徽標鍵的其他任何兼容鍵盤的以下快捷鍵。在任務(wù)欄上的按鈕間循環(huán)WINDOWS+TAB顯示“查找：所有文件”WINDOWS+F顯示“查找：計算機”CTRL+WINDOWS+F顯示“幫助”WINDOWS+F1顯示“運行”命令WINDOWS+R顯示“開始”菜單WINDOWS顯示“系統(tǒng)屬性”對話框WINDOWS+BREAK顯示“Windows資源管理器”WINDOWS+E最小化或還原所有窗口WINDOWS+D撤消最小化所有窗口SHIFT+WINDOWS+M關(guān)閉所選文件夾及其所有父文件夾按住SHIFT鍵再單擊“關(guān)閉按鈕（僅適用于“我的電腦”）向后移動到上一個視圖ALT+左箭頭向前移動到上一個視圖ALT+右箭頭查看上一級文件夾BACKSPACE五、使用對話框中的快捷鍵目的快捷鍵取消當(dāng)前任務(wù)ESC如果當(dāng)前控件是個按鈕，要單擊該按鈕或者如果當(dāng)前控件是個復(fù)選框，要選擇或清除該復(fù)選框或者如果當(dāng)前控件是個選項按鈕，要單擊該選項空格鍵單擊相應(yīng)的命令A(yù)LT+帶下劃線的字母單擊所選按鈕ENTER在選項上向后移動SHIFT+TAB在選項卡上向后移動CTRL+SHIFT+TAB在選項上向前移動TAB在選項卡上向前移動CTRL+TAB如果在“另存為”或“打開”對話框中選擇了某文件夾，要打開上一級文件夾BACKSPACE在“另存為”或“打開”對話框中打開“保存到”或“查閱”F4刷新“另存為”或“打開”對話框F5選擇項目時，可以使用以下快捷鍵。目的快捷鍵插入光盤時不用“自動播放”功能按住SHIFT插入CD-ROM復(fù)制文件按住CTRL拖動文件創(chuàng)建快捷方式按住CTRL+SHIFT拖動文件立即刪除某項目而不將其放入SHIFT+DELETE“回收站”顯示“查找：所有文件”F3顯示項目的快捷菜單APPLICATION鍵刷新窗口的內(nèi)容F5重命名項目F2選擇所有項目CTRL+A查看項目的屬性ALT+ENTER或ALT+雙擊可將APPLICATION鍵用于Microsoft自然鍵盤或含有APPLICATION鍵的其他兼容鍵七、Microsoft放大程序的快捷鍵這里運用Windows徽標鍵和其他鍵的組合。Windows徽標+PRINTSCREEN將屏幕復(fù)制到剪貼板（包括鼠標光標）Windows徽標+SCROLLLOCK將屏幕復(fù)制到剪貼板（不包括鼠標光標）Windows徽標+PAGEUP切換反色。Windows徽標+PAGEDOWN切換跟隨鼠標光標Windows徽標+向上箭頭增加放大率Windows徽標+向下箭頭減小放大率八、使用輔助選項快捷鍵目的快捷鍵切換篩選鍵開關(guān)右SHIFT八秒切換高對比度開關(guān)左ALT+左SHIFT+PRINTSCREEN切換鼠標鍵開關(guān)左ALT+左SHIFT+NUMLOCK切換粘滯鍵開關(guān)SHIFT鍵五次切換切換鍵開關(guān)NUMLOCK五秒用AIT+TAB還有微軟微標的個鍵，方向鍵。最多的是用到AITF1顯示當(dāng)前程序或者windows的幫助內(nèi)容。F2當(dāng)你選中一個文件的話，這意味著“重命名”F3當(dāng)你在桌面上的時候是打開“查找：所有文件”對話框F10或ALT激活當(dāng)前程序的菜單欄windows鍵或CTRL+ESC打開開始菜單CTRL+ALT+DELETE在win9x中打開關(guān)閉程序?qū)υ捒駾ELETE刪除被選擇的選擇項目，如果是文件，將被放入回收站SHIFT+DELETE刪除被選擇的選擇項目，如果是文件，將被直接刪除而不是放入回收站CTRL+N新建一個新的文件CTRL+O打開“打開文件”對話框CTRL+P打開“打印”對話框CTRL+S保存當(dāng)前*(糙)*作的文件CTRL+X剪切被選擇的項目到剪貼板CTRL+INSERT或CTRL+C復(fù)制被選擇的項目到剪貼板SHIFT+INSERT或CTRL+V粘貼剪貼板中的內(nèi)容到當(dāng)前位置ALT+BACKSPACE或CTRL+Z撤銷上一步的*(糙)*作ALT+SHIFT+BACKSPACE重做上一步被撤銷的*(糙)*作Windows鍵+M最小化所有被打開的窗口。Windows鍵+CTRL+M重新將恢復(fù)上一項*(糙)*作前窗口的大小和位置Windows鍵+E打開資源管理器Windows鍵+F打開“查找：所有文件”對話框Windows鍵+R打開“運行”對話框Windows鍵+BREAK打開“系統(tǒng)屬性”對話框Windows鍵+CTRL+F打開“查找：計算機”對話框SHIFT+F10或鼠標右擊打開當(dāng)前活動項目的快捷菜單SHIFT在放入CD的時候按下不放，可以跳過自動播放CD。在打開word的時候按下不放，可以跳過自啟動的宏ALT+F4關(guān)閉當(dāng)前應(yīng)用程序ALT+SPACEBAR打開程序最左上角的菜單ALT+TAB切換當(dāng)前程序ALT+ESC切換當(dāng)前程序ALT+ENTER將windows下運行的MSDOS窗口在窗口和全屏幕狀態(tài)間切換PRINTSCREEN將當(dāng)前屏幕以圖象方式拷貝到剪貼板ALT+PRINTSCREEN將當(dāng)前活動程序窗口以圖象方式拷貝到剪貼板CTRL+F4關(guān)閉當(dāng)前應(yīng)用程序中的當(dāng)前文本（如word中）CTRL+F6切換到當(dāng)前應(yīng)用程序中的下一個文本（加shift可以跳到前一個窗口）在IE中：ALT+RIGHTARROW顯示前一頁（前進鍵）ALT+LEFTARROW顯示后一頁（后退鍵）CTRL+TAB在頁面上的各框架中切換（加shift反向）F5刷新CTRL+F5強行刷新激活程序中的菜單欄F10執(zhí)行菜單上相應(yīng)的命令A(yù)LT+菜單上帶下劃線的字母關(guān)閉多文檔界面程序中的當(dāng)前窗口CTRL+F4關(guān)閉當(dāng)前窗口或退出程序ALT+F4復(fù)制CTRL+C剪切CTRL+X刪除DELETE顯示所選對話框項目的