新蜂商城 Vue 版本
2019 年 10 月份我在 GitHub 開源倉庫中上傳了新蜂商城項目的所有源碼，至今已經有小半年的時間了，感興趣的可以去了解一下這個 Spring Boot 技術棧開發的商城項目，開源地址如下：
- newbee-mall in GitHub : https://github.com/newbee-ltd/newbee-mall
- newbee-mall in Gitee : https://gitee.com/newbee-ltd/newbee-mall
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 樣式，總體來看可以進行一波實際的線上測試了，但是依然有部分問題需要改正。
總結
接下來，當然就是繼續開發，測試和改問題可能花費時間有些多，主要還是對自己負責，對大家負責，我把一份不完整或者有問題的代碼放到開源倉庫，這肯定也不是一個太好的做法，我盡量把完善的內容交給大家。
當然，以上只是我和一些朋友內部測試的結果，當然還會有其他問題，開源后大家繼續向我提問題吧。
大家可以先關注一下當前商城項目的倉庫 newbee-mall in GitHub，Vue版本的開發測試完成后也會開源到 GitHub 上，到時候不會迷路噢！
除注明轉載/出處外，皆為作者原創，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，否則保留追究法律責任的權利。
感謝大家的觀看，我是十三，文章首發於我的公眾號“程序員的小故事”。