Vue+Spring Boot 前後端分離的商城專案開源啦!

我是13發表於2020-08-13

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

去年開源新蜂商城專案後,就一直在計劃這個專案 Vue 版本的改造,2020 年開始開發並且自己私下一直在測試,之前也有文章介紹過測試過程和存在的問題,修改完成後,於 5 月底將 Vue 版本的所有程式碼開源了,只是後面一直太忙,沒有時間整理這篇文章。

現在,向大家介紹一下這個 Vue 版的前後端分離商城專案。

所有的程式碼、檔案全部都開源到 GitHub 倉庫中,並沒有任何藏著掖著的行為,不會說缺少哪個依賴或者某個重要功能,這種事情是不存在的,大家先看看文章和預覽圖,覺得不錯的朋友可以繼續瞭解一下這個專案。

當然,也希望感興趣的朋友可以找找其中的問題,提一些 pr 或者 issue,讓這個開源專案能夠減少問題並且保持進步。

newbee-mall 在 GitHub 和國內的碼雲都建立了程式碼倉庫,如果有人訪問 GitHub 比較慢的話,建議在 Gitee 上檢視該專案,兩個倉庫會保持同步更新。

新蜂商城回顧

2019 年 10 月份我在 GitHub 開源倉庫中上傳了新蜂商城專案的所有原始碼,至今已經有近一年的時間了,感興趣的可以去了解一下這個 Spring Boot 技術棧開發的商城專案,開源地址如下:

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 版本就開源了。

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

相關文章