新蜂商城 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+Spring Boot 前后端分离的商城项目开源啦!的更多相关文章

  1. 八个开源的 Spring Boot 前后端分离项目,一定要收藏!

    八个开源的 Spring Boot 前后端分离项目 最近前后端分离已经在慢慢走进各公司的技术栈,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,我们也非常建议大家学习一下前 ...

  2. 七个开源的 Spring Boot 前后端分离项目,一定要收藏!

    前后端分离已经在慢慢走进各公司的技术栈,根据松哥了解到的消息,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,松哥也非常建议大家学习一下前后端分离开发,以免在公司干了两三年 ...

  3. Springboot + Vue + shiro 实现前后端分离、权限控制

    本文总结自实习中对项目对重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelA ...

  4. List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac

    List多个字段标识过滤 class Program{  public static void Main(string[] args) { List<T> list = new List& ...

  5. 七:Spring Security 前后端分离登录,非法请求直接返回 JSON

    Spring Security 前后端分离登录,非法请求直接返回 JSON 解决方案 在 Spring Security 中未获认证的请求默认会重定向到登录页,但是在前后端分离的登录中,这个默认行为则 ...

  6. springBoot 搭建web项目(前后端分离,附项目源代码地址)

    springBoot 搭建web项目(前后端分离,附项目源代码地址)   概述 该项目包含springBoot-example-ui 和 springBoot-example,分别为前端与后端,前后端 ...

  7. 在前后端分离的SpringBoot项目中集成Shiro权限框架

    参考[1].在前后端分离的SpringBoot项目中集成Shiro权限框架 参考[2]. Springboot + Vue + shiro 实现前后端分离.权限控制   以及跨域的问题也有涉及

  8. vue + spring boot + spring security 前后端分离 携带 Cookie 登录实现 只写了个登录

    最近想弄一下vue 所以就自己给自己找坑入   结果弄的满身是伤 哈哈哈 首先我说下 前后端分离  跨域请求  我在网上找了一些  可是都是针对于 spring boot 的 我自己还有 securi ...

  9. Spring Boot + Vue + Shiro 实现前后端分离、权限控制

    本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelA ...

随机推荐

  1. cropper.js 二次开发:截图并下载图片

    cropper.js 是一个基于jquery的图片截取库. 参考:https://blog.csdn.net/weixin_38023551/article/details/78792400 我的代码 ...

  2. 手把手带你玩转 DialogFragment

    前言 本文已经收录到我的 Github 个人博客,欢迎大佬们光临寒舍: 我的 GIthub 博客 思维导图 一.为什么要学习 DialogFragment 你还在用 Dialog 吗? 你还在经常烦恼 ...

  3. WeChat 小程序开发

    第一步 去微信公众号平台注册> 一个账号https://mp.weixin.qq.com/ 填写完后 会获得一个APPID 2. 点击工具下载微信开发者工具安装即可, 1 2 3 微信开发者工具 ...

  4. web自动化 -- HTMLreport(四)测试报告默认不展开输出内容

    一.需求痛点 1.默认展开输出内容,很不好查看每条用例的状态,而且也很丑 2.希望默认不展开输出内容 3.痛点截图 二.解决步骤 1.直接修改成这样子 三.效果

  5. HTML骨架

    本文只是复习HTML笔记 html 骨架: DTD:文档类型定义,规定了使用哪个版本的html规范 html 标签:双标签,表示整个网页 head 标签: 配置HTML页面 title: 网页标题 m ...

  6. Kubernetes/K8s CKA认证全套实训视频教程下载

    地址: 链接:https://pan.baidu.com/s/1bwEUZTCVzqM3mGjrlISbcg 提取码:r1kx 目录: 目录: │ 1-1.kubernetes理论教程 - 云原生技术 ...

  7. Python字符串内建函数_上

    Python字符串内建函数: 注:汉字属于字符(既是大写又是小写).数字可以是: Unicode 数字,全角数字(双字节),罗马数字,汉字数字. 1.capitalize( ): 将字符串第一个字母大 ...

  8. PHP array_intersect_uassoc() 函数

    实例 比较两个数组的键名和键值(使用用户自定义函数比较键名),并返回交集: <?phpfunction myfunction($a,$b){if ($a===$b){return 0;}retu ...

  9. Python File close() 方法

    概述 close() 方法用于关闭一个已打开的文件.高佣联盟 www.cgewang.com 关闭后的文件不能再进行读写操作, 否则会触发 ValueError 错误. close() 方法允许调用多 ...

  10. @程序员,如何进入BAT这类一线公司?做到这几点的就有机会!

    跟大家聊一聊很多很多很多人问我的一个问题:中小公司的Java工程师该如何规划准备,才能跳槽进入BAT这类一线互联网公司? 作者简介:中华石杉,十余年BAT架构经验,倾囊相授 我用了三个 “很多” 来形 ...