Vue+Spring Boot 先後端分離的商城項目開源啦！

新蜂商城 Vue 移動端版本開源啦！

去年開源新蜂商城項目後，就一直在計劃這個項目 Vue 版本的改造，2020 年開始開發而且本身私下一直在測試，以前也有文章介紹過測試過程和存在的問題，修改完成後，於 5 月底將 Vue 版本的全部代碼開源了，只是後面一直太忙，沒有時間整理這篇文章。

如今，向你們介紹一下這個 Vue 版的先後端分離商城項目。

全部的代碼、文件所有都開源到 GitHub 倉庫中，並無任何藏着掖着的行爲，不會說缺乏哪一個依賴或者某個重要功能，這種事情是不存在的，你們先看看文章和預覽圖，以爲不錯的朋友能夠繼續瞭解一下這個項目。

固然，也但願感興趣的朋友能夠找找其中的問題，提一些 pr 或者 issue，讓這個開源項目可以減小問題而且保持進步。

newbee-mall 在 GitHub 和國內的碼雲都建立了代碼倉庫，若是有人訪問 GitHub 比較慢的話，建議在 Gitee 上查看該項目，兩個倉庫會保持同步更新。

• newbee-mall in GitHub : https://github.com/newbee-ltd/newbee-mall-vue-app
• newbee-mall in Gitee : https://gitee.com/newbee-ltd/newbee-mall-vue-app

新蜂商城回顧

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 版本的開發想法，我也並無食言，如今這個 Vue 商城已經開發完成而且開源到 GitHub 了。

原來的新蜂商城只有一個 PC 端的頁面，如今加入了 Vue 版本以後，新蜂商城的展示形式更加豐富了，如今的新蜂商城變成了這樣：

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

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

Vue 版本開發及測試

這個項目的開發和製做過程也是頗有意思的事情，因此大體的整理了一下時間線。

具體的開發時間有些記不清楚了，查了一下提交記錄，第一次提交是在 2020 年的 2 月 13 號：

不過初次提交的代碼中，已經有不少文件了，因此以前也是開發過一段時間的，時間應該在 2020 年 1 月份，那個時候開始動工開發。

開發版本的最後一次提交是在 2020 年 5 月 15 日：

開發的時候感受還不錯，就是有時間就完善一些功能，並無特別大的壓力，直到測試階段，才感受到一些壓力，由於確實測出了很多的問題，不只僅是自測，在 QQ 羣裏讓你們幫忙測試的時候也收到了很多的反饋，改了很多的 bug。

測試流程一共走了三次。

第一次是在四月初，當時功能並無徹底開發完成，不過主要頁面都製做好了，因此就和幾個朋友簡單測試了一下，主要圍繞頁面樣式、UI還原度、數據顯示以及基本的功能流程，問題不少，本身寫的時候沒有發現，可是讓別人測的時候，你們基本都提出了不少的問題。

第一次測試結果：稀爛。

看到這個結果仍是有些慌的，由於以前計劃就是在 5 月初開源的，基礎問題還有很多確實就有點完不成既定計劃的意思，以後花了比較多的精力在這個項目上面，把問題都修復掉、同時把剩下的功能開發好，花了 20 天左右的時間。

緊接着就是第二次測試，時間點是在四月二十幾號，又多找了幾個朋友幫忙測試。此次測試就要比以前一次更加全面，驗證第一次的問題修復掉沒有，同時要走完全部的功能流程，每個步驟都要反覆測試、反覆的驗證，有些能修改的當時就修改了，問題複雜的就記錄下來後面再改。還有機型和適配也簡單的驗證了一下，可是畢竟不是專業的測試，手頭上也沒有太多的機器，因此只是簡單的驗證了一波，也發現了一些問題。

第二次測試結果：及格。

以後呢，固然就是整理這兩次的測試結果及其中的問題，而後針對性的去修復，原本計劃在五月初開源，可是由於兩次的測試結果不是很是理想，就順延到後面了，測試過程和修改過程花費的時間挺多的，主要仍是對本身負責，對你們負責，我把一份不完整或者有問題的代碼放到開源倉庫，這確定也不是一個太好的作法，我儘可能把完善的內容交給你們。又開發了大概 20 天左右，把全部問題都修復完成而且本身也驗證了屢次。

這兩次測試時碰到的問題我都記錄到這篇文章中了，有好奇的同窗也能夠去看一下：《「newbee-mall新蜂商城開源啦」 先後端分離的 Vue 版本即將開源》。

第三次測試就是在 5 月 23 號：

當天是週六，感受你們可能都有時間，就把這件事發到了個人幾個 QQ 羣裏，讓全部人都去測試和體驗一下，從註冊流程到以後的購物模塊都測試一遍，聊天記錄挺多的，感受你們也比較熱情，可是當時的體驗並非很是好，由於我的服務器的帶寬比較低，因此你們都以爲有些卡頓。

此次測試除了訪問有些慢以外，你們並無反饋太多問題，以後針對這些零零散散的問題又進行了一次修復，而後在 2020 年 5 月 30 號就所有放到 GitHub 開源倉庫上了：

以上就是新蜂商城 Vue 版本的開發及開源過程，從計劃到開發、到測試、再到成功開源差很少花費了半年的時間。結果也很好，我沒有放你們鴿子，從去年就告訴你們要開源 Vue 版本的商城項目，到今年把全部代碼開發並放到開源網站上，雖然時間推遲了一個月左右，可是總體來講是比較圓滿的。

但願你們喜歡這個項目，多多支持它！有問題我必定及時修復，同時我也會繼續圍繞新蜂商城作其餘的功能和技術棧的拓展。

總結

從年初寫下第一行代碼到 5 月 30 號把全部代碼所有開源，花費了半年時間寫了一個 Vue 商城的開源項目，雖然過程挺曲折，可是結果老是讓人開心的，但願你們也能滿意。

這是第一篇介紹新蜂商城 Vue 版本的文章，時間比較倉促並無整理太多內容，後續會根據你們的反饋再整理幾篇文章，若是你們有什麼問題也能夠及時和我說，我以後也會整理出更詳細的內容給你們。

因爲去年給了你們這樣一個承諾：我要寫一個 Vue 版本的商城項目給你們。

今年，我作到了。

因而，新蜂商城 Vue 版本就開源了。

寫在最後

作個小推廣，感興趣的朋友能夠看一看，最近我在掘金平臺上發佈了一個新的專欄《Vue 商城項目開發實戰》（預售階段5折優惠）。

基於真實項目的實戰開發，即學即用！

這是一個先後端分離的線上商城項目，技術棧爲 Spring Boot 和 Vue，幫助讀者具有開發和統籌一個完整項目的能力是本專欄的目標，本專欄將會帶你進行一次 Spring Boot + Vue 全棧項目開發的開發實戰，讓你在實戰中融會貫通當下的熱門技術棧。

選取當下主流的技術，帶你從零開始實現一個完整且純正的先後端分離商城應用，實現前端、後端、數據庫設計與開發流程，本專欄將經過技術棧的詳細講解、多個功能模塊的開發實踐、並結合實際項目開發中的產品流程來完成這個任務。

感興趣的朋友能夠關注一下。

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