購物app的開發

首先我們本次要寫的是一個電商的專案，專案主要功能有登入、註冊、商品展示、輪播圖、加入購物車、購物車管理、支付管理、地址管理、個人資訊的修改、商品的分類展示、微信支付等等。主要使用vue框架來實現，電商專案的話我們使用vant放入ui庫會比較方便，使用vue腳手架來實現專案的主題架構。

安裝腳手架

首先我們安裝vue腳手架，並對腳手架進行相應的配置。

cnpm i @vue/cli -g

建立專案

建立專案我們有兩種方法

命令列建立專案

vue create myapp

視覺化建立專案

vue ui

其他步驟一之前相同

專案目錄

專案生成好之後我們要對專案進行改造

專案執行指令

cnpm run serve / npm run serve / yarn serve

拿到建立好的專案之後我們要先找到專案的入口檔案。

單檔案元件

我們的專案主要通過單檔案元件來實現。每一個vue的檔案就是一個 元件，內部包含 結構 表現 行為如果一個元件不需要設定 樣式 以及不需要編寫業務邏輯，可以省略，但是不能缺少 結構程式碼

為了避免 多個元件之間的 樣式衝突，可以選擇考慮給。style標籤 新增 scoped 屬性,那麼當前設定的樣式就只針對當前元件有效

注：一般不在App.vue元件中新增scoped

避免螢幕雙擊變大

下面我們對App.vue主頁面進行改造

確定頁面結構，主要分為頭部和底部兩個部分

對樣式進行初始化操作、編寫樣式 - flex + vw + rem

對pc端效果進行優化、進行寬高自適應

抽離底部元件

由於我們頁面底部基本沒什麼變化、主要是上面的頁面進行切換。所以我們可以把頁面進行抽離，將頁面分為上下兩個檢視，分別單獨進行頁面的操作。

由於底部樣式基本不變，所以我們先對底部樣式進行編寫。

在編寫的時候我們發現我們需要使用圖示

我們可以使用iconfont阿里巴巴向量圖示庫來同意使字型圖示

大致的使用過程是、選擇圖示 - 加入購物車 - 點選購物車 - 新增至專案 - 新建專案 - 生成線上連結 - 複製連結將此連結通過 link 新增至 public/index.html

使用

然後把圖示大下除錯到合適的大小就可以啦

構建各個頁面

頭和內容在一起,每一個元件只能有一個根標籤

views/home/index.vue

views/kind/index.vue

views/cart/index.vue

views/user/index.vue

vue的路由系統

有了頁面我們就想要吧也愛你 顯示出來吧，此時我們就要使用vue的路由系統啦。

什麼是vue的路由系統呢？Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。

包含的功能有：巢狀的路由/檢視表 模組化的、基於元件的路由配置 路由引數、查詢、萬用字元 基於 Vue.js 過渡系統的檢視過渡效果 細粒度的導航控制 帶有自動啟用的 CSS class 的連結 HTML5 歷史模式或 hash 模式，在 IE9 中自動降級 自定義的滾動條行為用 Vue.js + Vue Router 建立單頁應用，是非常簡單的。使用 Vue.js ，我們已經可以通過組合元件來組成應用程式，當你要把 Vue Router 新增進來，我們需要做的是，將元件 (components) 對映到路由 (routes)，然後告訴 Vue Router 在哪裡渲染它們

將頁面元件對映到路由表

此時我們就要告訴Vue Router 在哪裡渲染它們

點選底部切換路由

路由配飾好之後我們可以通過路由來訪問我們之前的頁面啦，不過總不能讓使用者也這麼訪問吧，所以我們現在需要使用<router-link to="">來進行頁面的切換

點選高亮顯示

到這裡我們的底部樣式已經編寫的差不多啦，此時當我們點選選項卡的時候能夠高亮顯示就更好啦，

審查元素得知，選中的元素會自動新增一個選中的樣式，只需要實現該樣式即可

命名檢視

我們的底部其實不需要每個頁面都需要，這時就有了新的問題，我們的理由檢視就有了兩個，這個時候呢我們可以使用命名檢視實現上下互不影響的切換

重定向

為了增加使用者體驗，當我們直接訪問埠號的時候也想能夠顯示首頁的頁面，此時我們就需要對“/"這個路由進行重定向。

使用UI庫

到這裡我們頁面的基本架構 已經完成啦，下面我們就要對頁面進行編寫啦。

在頁面編寫的過程中我們要使用UI庫來寫會更加高效的完成工作。在本專案中我們會使用vant UI庫來實現頁面的編寫

安裝依賴

cnpm i vant -S

引入Vant庫

我們可以直接使用自動引入元件的方式會比較方便

cnpm i babel-plugin-import -D

babel.config.js 配置 UI庫

頁面佈局

首頁

輪播圖

直接在want庫中找到自己喜歡的樣式並進行應用就可以啦

下面示範一線UI庫的使用

當~噹噹噹

此時輪播如就ok啦

請求輪播圖資料

有了輪播圖的結構我們現在需要資料進行渲染

在這裡我們要用axios來請求資料，使用個相較於ajax會好用些

首先我們要安裝axios這個元件

cnpm i axios -S

對資料請求進行封裝，方便使用

• 封裝axios Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。從瀏覽器中建立 XMLHttpRequests 從 node.js 建立 http 請求 支援 Promise API 攔截請求和響應 轉換請求資料和響應資料 取消請求 自動轉換 JSON 資料 客戶端支援防禦 XSRF

為了能夠請求到後端資料，我們需要使用代理解決跨域問題

同上圖 同時修改了 utils/request.js的baseurl伺服器執行時 先走的是代理的伺服器（客戶端和伺服器端會引起跨域問題，伺服器與伺服器不存在跨域問題，npm run serve 會開啟 開發者伺服器，程式碼執行在開發者伺服器上（前端程式碼就在伺服器上，不存在跨域），）

重啟伺服器之後就能夠請求到資料啦

我們拿到資料後就可以對頁面進行渲染啦

下面的nav導航和之前步驟基本相同，在這裡 就不多贅述啦

產品頁面

顯示產品使用UI庫的步驟與之前差不了多少，我們可以用Card欄實現資料的顯示，

在產品頁面的編寫過程中，我們如果使用了上拉載入和上拉刷線就比較好看啦

上拉載入

List 元件通過loading和finished兩個變數控制載入狀態，當元件滾動到底部時，會觸發load事件並將loading設定成true。此時可以發起非同步操作並更新資料，資料更新完畢後，將loading設定成false即可。若資料已全部載入完畢，則直接將finished設定成true即可。

編寫業務邏輯

每次載入一頁的內容，並把內容新增到之前的資料後面，讓資料能夠渲染出來

下拉重新整理

下拉重新整理時會觸發 refresh 事件，在事件的回撥函式中可以進行同步或非同步操作，操作完成後將 v-model 設定為 false，表示載入完成。

實現重新整理函式 請求的第一頁的預設的資料，---重置頁碼和finished的值

回到頂部

此功能的實現需要對頁面距離頂端的距離進行監聽通過scroTop的設定來實現回到頂部。

是誰引起了滾動條的滾動，滾動的到底是誰

首頁的頭部

點選左側列表符號進入分類頁面，發現之前的 銷燬之前的時候，解除時間監聽出現問題

詳情頁面

我們在點選某條商品的時候顯示此商品的詳情頁面，那我們的詳情頁面就需要知道我們應該顯示那個商品的詳情。所以我們可以使用動態路由，商品的id傳給詳情頁面，這樣詳情頁面就能夠根據id來顯示商品詳情啦。

下面是詳情頁面的構建

使用程式設計式跳轉，來進入詳情頁面

使用動態路由傳值

詳情頁面渲染

獲取產品id

首先肯定是要先獲取傳過來的內容的

封裝資料請求

對資料進行請求並渲染

詳情頁面的地步應該是有加入購物車設麼的，與之前的頁面有所不同所以我們要單獨寫出來

在UI庫中找到自己中意的，並對樣式進行合理的修改就算基本完成啊

點選加入購物車

當使用者看了詳情之後感覺有了購買意願就會點選加入購物車，下面我們來實現加入購物車的操作。

點選加入購物車，判斷使用者有無登入，如果未登入，跳轉至登入頁面；如果已登入，獲取使用者資訊，使用者id，產品id，數量

要加入購物車，此時我們必須要做的工作是要確定使用者身份，所以我們的登入更能必須實現

實現登入功能

構建登入頁面

後端寫好的情況下，登入頁面就比較簡單了。

新建頁面-->配飾路由-->頁面編寫

有了登入那麼也要有註冊吧，登入頁面中放上註冊的入口（就是一個連線）

新增註冊頁面以及註冊路由 -優先複用 登入 頁面的元素 router/index.js

• 當我們在登入註冊中都寫了各自的頁面入口時，頻繁點選的情況下，我們回退的話無法直接回到進入登入註冊之前的頁面，可能會陷入之前你點選次數的迴圈

  

就相當於你每點選一次頁面都會往棧裡面新增一個頁面，回退的時候回一一出棧，這樣的話會感覺肥腸麻煩。

所以我們可以在跳轉的路由中新增 replace 讓每次的頁面相互替換不進行儲存就可以啦

注：在登入時我們可以將以後要用的資訊存到狀態管理器中以便以後續驗證使用者的操作。

點選加入購物車

如果使用者為登入，跳轉至登入頁面，登入成功之後返回詳情頁 如果使用者登入，呼叫後端加入購物車介面，傳入使用者id，產品id，數量（如果當前使用者存在該產品，數量要加1，如果不存在該產品，插入該產品）

前端實現

當沒有資料的時候為了美觀我們也可也加一個圖顯示空的狀態。。。空狀態 - 沒有資料

購物車底部

底部的話就該有結算、購買物品件數、價格一些基本資訊。可以在UI庫中找到相應的元件。

這個樣子差不多就可以

計算總價及總數量

在計算屬性中通過哪來的資料進行計算，

總價知道怎麼獲得了，可我們要讓使用者選中的產品我們才能進行總價的計算啊

新增選中效果

在每個商品前我們可以新增一個核取方塊總有備選中的才進行計算

給個樣式

計算屬性的更改

到這裡其實我們的功能就已經做的額差不多了

為了增加使用者體驗，我們可以增加一個全選的功能。

只要路是，對於商品而言當所有商品被選中的時候全選框行給是選中狀態，當有一個或多個沒被選中的時候全選框都應給是未選中狀態。對於全選框而言，當點選全選的時候應當遍歷所有選項將自身以及所有商品的核取方塊設定成選中狀態，當點選取消全選的時候應當將所有核取方塊設定成為未選中狀態。

為了實現上述功能，我們可以給每個選項設定一個狀態為0，當被選中時的狀態為1 ，在需要判斷的時候把所有的核取方塊的額值相與，此時就可以判斷是否需要全選啦，根基這個就能正確的設定選擇框的狀態

...

刪除

刪除資料就比較簡單啦，只需要呼叫刪除的介面就可以啦

增減數量

數量的加減其實也就是是資料庫的增減，對資料庫中數量的修改，因為我們是前端，呼叫下介面就可以啦。

減法其實和加法並沒有多少區別，這裡就不多說了

終於來到了我們的訂單頁面啦

我們在購物車頁面點選去付款的時候我們就可以生成訂單啦，此時後臺肯定要生成一個訂單列表

裡面儲存這個訂單對應的價格商品種類和個數等等的資訊。當我們來到訂單頁面的時候我們再通過介面吧訂單資訊獲取過來。然後在對資料進行渲染，就能把使用者要買的商品顯示出來了。但是單單顯示出來還是不夠的，既然是訂單頁面我們肯定是要有地址選擇、和確認訂單兩個業務邏輯的。點選地址選擇的時候可以選擇，或者新新增有個地址。點選確認的時候就可以顯示支付頁面了。

地址

點選選擇地址地時候我們先是跳轉到地址頁面我們可以用動態路由來傳遞使用者資訊，此時如果後端伺服器已經存有地址資訊就可以直接選擇了 ，要是沒有，或者是地址都不是正確的，我們就需要新增新的地址。所以我們還需要構建新增地址要頁面，新增地址頁面當點選確定時對伺服器端資料庫中地址資訊進行新增。並返回地址選擇頁面，當我們選中某個地址的時候將此地址存放的狀態管理器中，點選回到訂單頁面時直接從狀態管理器中獲取選中的地址並進行渲染（還有一種思路：一開始使用者就有一個預設選中狀態，當點選選擇地址的時候更改為當前的選中狀態，這樣確認訂單頁面就能夠直接從資料庫中拿到你選中的地址啦）

（.....圖就不放啦，到了這裡圖已經沒什麼意義了）

支付

當我們點選支付的時候，我們應該有一個提示頁面，用來提示使用者選擇支付方式，微信，支付寶，還是其他什麼方式。（這裡只以微信支付為例子）

當我們在確認訂單頁面點選去支付時，應該刪除購物車中選中的資料，便是此商品已經購買了。（不管是成功就是失敗但都要刪除購物車資訊，失敗就放到未支付裡面就行了）

下面是實現微信支付的流程

兩種模式

使用的微信掃碼支付的模式二，

模式二與模式一相比，流程更為簡單，不依賴設定的回撥支付URL。商戶後臺系統先呼叫微信支付的統一下單介面，微信後臺系統返回連結引數code_url，商戶後臺系統將code_url值生成二維碼圖片，使用者使用微信客戶端掃碼後發起支付。

生成訂單 （訂單編號，交易金額，描述[, 交易時間]）

呼叫後端編寫的支付介面，傳入引數，等待微信支付之後呼叫後端編寫的回撥介面，後端回撥介面通過 socket 通訊 通知前端頁面支付結果，前端收到訊息，進行下一步業務邏輯（支付交易取消 - 跳轉未支付頁面，支付成功 - 跳轉檢視訂單頁面）

個人對於支付感興趣，經常和後端溝通，發現 要完成成支付，不容易，閒暇時間自己就使用express練習了一下在nodejs中如何完成支付

比如說 32位的隨機數保障訂單的唯一性 簽名 的複雜性，需要除了簽名之外的引數，按照 ASCII 字典排序（Object.keys().sort, 遍歷生成陣列，組合物件），轉成字串(querystirng)，拼接商戶的金鑰key，MD5形式加密，轉換為大寫

組合所有的引數 ，形成物件 --- 向微信平臺發起支付 傳輸的是xml格式的資料，需要把 物件物件形式的引數轉換為 xml 格式（xml-js模組），

呼叫微信的統一下單介面，傳入xml格式引數，

微信支付平臺返回此筆訂單的狀態，如果是未支付的訂單，返回一個xml檔案，其中包含支付的連結地址

將此xml檔案轉換為json格式，提取支付的code_url地址

使用二維碼生成模組（qrcode）生成二維碼返回給前端

前端負責展示二維碼

後端配置支付結果的回撥地址，利用socket通訊通知前端頁面支付結果

如果是H5支付（手機瀏覽器直接喚起微信進行支付），呼叫統一下單介面，交易型別trade_type=MWEB，支付的連結為mweb_url

如果是小程式支付，需要使用wx.requestPayment()方法喚起支付

jsAPI支付，其實就是在微信的瀏覽器內完成的微信支付，現在微信後臺配置網頁授權域名，支付授權的目錄 WeixinJSBridge.invoke()

搜尋功能

老套路，我們先構建頁面。然後呼叫後端介面。

當我們點選都多的時候我們應該先跳轉到一個新的頁面，把搜尋頁面單獨拿出來這樣可以增加使用者體驗，在搜尋頁面中輸入要搜尋的關鍵詞時點選搜尋，將關鍵詞提交到後，後那資料庫中的資料進行檢索，給前端返回對應的搜尋結果，前端拿到資料以後，吧結果渲染到新的頁面上（這個頁面其實和商品；列表頁面時差不多的）

我們只是用過輸入關鍵詞來篩選未免顯得太過單一，為此我們可以新增一個價格區間篩選，給後端提交一個價格範圍，後端通過資料庫的條件查詢來返回所需要的結果。。根據銷量思路與價格基本相同。

分類

分類的實現其實是比較簡單的

我們找好合適的UI庫之後直接套用就可以啦，（這裡通過品牌來分類），構建好頁面時候我們就需要資料的支援啦，我們在設計資料的時候已經給每個商品添加了品牌欄位，我們只需要從後端拿到所有的品牌，並將品牌渲染到分類頁面的nav導航中就行了，根據你當前選中的選項卡去展示所對應的資料。點選那個選項卡就把當前選項卡記錄下來，這樣當你點到其他頁面在回來，仍然可以看到你之前點選的選顯示卡。

個人中心

先是頁面佈局，可以仿照京東那種來進行佈局 ，呼叫獲取個人資訊的介面，並將資訊渲染到頁面上。由於我們做的是前端渲染資料的時候可以有趣一點，就比如說我們獲取到會員資訊的時候我們可以根據會員等級顯示不同的標誌，根基性別顯示不同的提示語句，等等。在個人中心頁面中我們應該有更改頭像，更改個人資訊等功能，點選頭像應該進入圖片選擇頁面當點選提交的額時候更改後臺資料，將頭像進行更改，當點選個人資訊的時候應把當前使用者的資訊預設顯示在輸入框中等待使用者更改。點選確定後可以回到個人中心頁面並將新的資料渲染出來。最後我們還可以再作一個檢視個人中心訂單的功能，呼叫訂單介面將訂單資料逐一渲染出啦，供使用者檢視就可以啦。