前後端分離的 Vue 版本商城測試記錄介紹

新蜂商城 Vue 版本

2019 年 10 月份我在 GitHub 開源倉庫中上傳了新蜂商城項目的所有源碼，至今已經有小半年的時間了，感興趣的可以去了解一下這個 Spring Boot 技術棧開發的商城項目，開源地址如下：

newbee-mall 在 GitHub 和國內的碼雲都創建了代碼倉庫，如果有人訪問 GitHub 比較慢的話，建議在 Gitee 上查看該項目。

當然，本文的主角並不是這個商城項目，而是這個項目的第二個版本：新蜂商城 Vue 版本。

之前我也在

《「newbee-mall新蜂商城開源啦」1000 Star Get !倉庫Star數破千！記錄一下》

和

《「newbee-mall新蜂商城開源啦」GitHub 上最熱門的 Spring Boot 項目，我也要做一次靚仔！》

兩篇文章中介紹了新蜂商城的未來規劃和 Vue 版本的開發想法，我也並沒有食言，這幾個月也一直在開發，但是由於要上班，基本都是空閒下來的時間纔會進行開發工作所以進度並不是非常快，目前已經完成了大部分頁面的樣式及功能邏輯。

原來的新蜂商城：

當初只有一個 PC 端的頁面，現在加入了 Vue 版本之後，新蜂商城的展現形式更加豐富了，新蜂商城變成了這樣：

從左到右依次爲：新蜂商城後臺管理系統頁面、新蜂商城 PC 端頁面、新蜂商城 Vue 版本的三個頁面。

不僅僅是展現形式的增多和產品線的豐富，技術棧也加入了 Vue，開發模式也變成了前後端分離模式。

向大家同步一下進度

當前已經進入了開發尾聲，不過開發完成並不代表就是項目完成，還有一些細節和 bug 需要修復。

本來計劃 4 月底開發完成的，由於最近工作比較忙，導致需要延後一段時間，預計 5 月份一定可以跟大家見面，到時候會把前後端涉及到的全部源碼放到 GitHub 開源倉庫裏。

最近 QQ 交流羣裏又有一些朋友在關係 Vue 版本的開發進度，這篇文章中的內容公開出來主要是同步一下新蜂商城 Vue 版本的進度信息，還有就是讓大家瞭解一下過程中的一些事情，關於這個項目的一些詳細介紹和開發過程我後面有時間的話，也會整理一下，讓大家不僅僅使用它，也瞭解一下它的其他方面。

目前的主要工作就是測試和改問題，以下是開發過程中的兩次測試內容，主要是和另外幾個朋友一起測試的，測試的內容比較多，這裏就只列出有問題的部分吧，包括頁面上的一些問題還有功能上的 bug，有些是已經解決掉的，有些是還未處理的。

以下兩個段落的內容基本上就是測試結果整理後的原稿，包括問題的截圖、問題的描述，可能不是特別符合文章的排版，主要是讓大家看一下開發過程中出現的問題。

第一次測試

首頁樣式錯誤(未對齊)

狀態：已修改
復現邏輯：打開首頁即出現

首頁搜索欄樣式，遮擋了 banner 圖片的頂部顯示

狀態：已修改
復現邏輯：打開首頁即出現，搜索欄不透明，建議改爲半透明

登錄註冊頁 Logo 圖片錯誤

狀態：已修改

無法修改密碼

狀態：已修改
復現邏輯：進入賬號管理頁面時，無法輸入密碼信息，無 input 框

商品詳情頁面詳情字段顯示錯誤

狀態：已修改
復現邏輯：打開詳情頁即出現，詳情應讀取 content 字段

購物車商品應支持選擇邏輯

狀態：已修改
復現邏輯：購物車頁面中的商品無選擇邏輯

生成訂單頁面無數據，無法生成訂單

狀態：已修改
復現邏輯：未添加地址時無法讀取到對應信息，頁面報錯

商品搜索列表頁，切換排序方式後無反應

狀態：已修改
復現邏輯：在商品搜索結果頁面點擊不同的排序方式，頁面數據都是相同的

商品詳情頁點擊“立即購買”按鈕無反應

狀態：已修改
復現邏輯：商品詳情頁點擊“立即購買”即出現，控制檯上有報錯信息

省市區數據未完善

狀態：未修改
復現邏輯：在添加或者編輯用戶地址頁面，選擇省市區時只有一條數據

新增地址後跳轉頁面錯誤

狀態：已修改
復現邏輯：在添加用戶地址後，應跳轉到地址列表頁，這裏是跳轉到生成訂單頁

訂單列表出現重複的訂單數據

狀態：已修改
復現邏輯：用戶已經下過單，則進入訂單列表頁面時即出現，頁面上會出現雙倍訂單數據的情況

“確認訂單”按鈕不應出現在訂單詳情頁

狀態：未修改
復現邏輯：進入訂單詳情頁面即出現，“確認訂單”按鈕是在管理後臺操作的，不應出現於此頁面

取消訂單彈框文案錯誤

狀態：已修改
復現邏輯：在訂單詳情頁面點擊“取消訂單”按鈕，文案爲“刪除訂單”

以上爲第一次測試的結果，有大量的問題和開發時未注意的 bug，之後進行了修改和調整的工作。第一次的測試主要就是想把所有的流程和邏輯走通，但是未能如願，部分功能不能使用，還需繼續完善，當然，還有一些樣式問題待處理，這些都需要時間，期待第二次測試。

第二次測試

首頁 8 個 icon 需更改

狀態：已更改

首頁搜索框和文案需修改

狀態：已更改

首頁缺少“新品上線”模塊

狀態：未修改

熱賣商品、新品上線、推薦商品，目前只有兩個模塊

登錄註冊頁面，點擊觸發切換頁面的字體時，觸發面積過大

狀態：已修改

個人中心頁面頭像未統一

狀態：已修改

分類頁面 icon

狀態：已修改

登錄頁滑塊驗證的問題

狀態：已修改
復現邏輯：進入登錄頁即可看到，在手機瀏覽器上滑動滑塊時會觸發返回命令，直接返回了，很難完成滑塊驗證

搜索框點擊後出現空白頁面

狀態：已修改
復現邏輯：在首頁或者分類頁面點擊頁面頂部的搜索框後會出現空白頁面

地址編輯時，原“省市區”不會回顯

狀態：未修改
復現邏輯：編輯地址信息時，需要再選擇省市區信息

地址欄有選擇框，且選擇後無法取消

狀態：未修改
復現邏輯：進入地址管理頁面即可看到，未進入訂單流程，只是單純管理地址的話，是不需要選擇框的

下單時進行地址更改操作後下單流程異常

狀態：已修改
復現邏輯：選擇商品進行結算操作，在生成訂單頁點擊地址並選擇地址列表中的一條數據進行修改，修改後返回訂單生成頁，此時該頁面出現數據空白的現象

取消訂單彈框一直顯示

狀態：未修改
復現邏輯：在訂單詳情頁面點擊“取消訂單”按鈕，之後左滑或者點擊返回按鈕，此時已經不在詳情頁面，彈框依然存在

以上爲第二次測試的結果，與第一次測試間隔 20 天左右，這一次已經可以把所有的流程和邏輯走通，只有部分不影響主流程的問題需要改正，也修改了大量的 UI 樣式，總體來看可以進行一波實際的線上測試了，但是依然有部分問題需要改正。

總結

接下來，當然就是繼續開發，測試和改問題可能花費時間有些多，主要還是對自己負責，對大家負責，我把一份不完整或者有問題的代碼放到開源倉庫，這肯定也不是一個太好的做法，我儘量把完善的內容交給大家。

當然，以上只是我和一些朋友內部測試的結果，當然還會有其他問題，開源後大家繼續向我提問題吧。

除註明轉載/出處外，皆爲作者原創，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，否則保留追究法律責任的權利。

感謝大家的觀看，我是十三，文章首發於我的公衆號“程序員的小故事”。