Vue+Spring Boot 前后端分离的商城项目开源啦！

新蜂商城 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 版本就开源了。

写在最后

做个小推广，感兴趣的朋友可以看一看，最近我在掘金平台上发布了一个新的专栏《Vue 商城项目开发实战》（预售阶段5折优惠）。

基于真实项目的实战开发，即学即用！

这是一个前后端分离的线上商城项目，技术栈为 Spring Boot 和 Vue，帮助读者具备开发和统筹一个完整项目的能力是本专栏的目标，本专栏将会带你进行一次 Spring Boot + Vue 全栈项目开发的开发实战，让你在实战中融会贯通当下的热门技术栈。

选取当下主流的技术，带你从零开始实现一个完整且纯正的前后端分离商城应用，实现前端、后端、数据库设计与开发流程，本专栏将通过技术栈的详细讲解、多个功能模块的开发实践、并结合实际项目开发中的产品流程来完成这个任务。

感兴趣的朋友可以关注一下。

除注明转载/出处外，皆为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。

posted @ 2020-08-13 15:25  程序员十三  阅读(13041)  评论(35)  编辑  收藏  举报