購物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導航中就行了，根據你當前選中的選項卡去展示所對應的數據。點擊那個選項卡就把當前選項卡記錄下來，這樣當你點到其他頁面在回來，仍然可以看到你之前點擊的選顯卡。

個人中心

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