阅读 4530

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

quote

新蜂商城 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 全栈项目开发的开发实战,让你在实战中融会贯通当下的热门技术栈。

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

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

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