向“全栈”进发，大型线上商城实战项目，Spring Boot + Vue 前后端分离版本的商城来了（文末有视频）

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

新蜂商城 Vue 版本它来了（文末有视频

如上图所示新蜂商城 Vue 版本已经开发完成这是新蜂商城开源项目的第一个大版本更新根据大量的用户调研最终决定将新蜂商城升级为 Spring Boot + Vue 两个流行技术栈的前后端分离商城部分页面和功能都可以通过上图中的 9 张截图看出来。

Spring Boot 技术栈和 Vue 技术栈其实这些技术本身并不算特别大的难点只要你愿意花时间去学都能够掌握他们的基本用法难点往往在于从 0 到 1 搭建一个完整的实践项目以及项目开发过程中对于很多技术细节的再学习和处理帮助读者具备开发和统筹一个完整项目的能力是此小册的目标此小册将通过技术栈的详细讲解、多个功能模块的开发实践、并结合实际项目开发中的产品流程来完成这个任务。

一个可以实操练手的完整项目再配备上详细的技术讲解手册相信无论身处哪个技术领域都是你提高自身技术水平最高效的工具此小册将围绕 Spring Boot 和 Vue 两个目前比较流行的技术栈向大家呈现一个大型项目完整的开发流程详见下图

实践项目包含一个前后端分离的线上商城项目功能模块包括登录认证模块、首页商品推荐模块、商品分类模块、商品搜索模块、购物车模块、下单模块、收货地址管理模块、订单管理模块等。

小册比较偏向于项目实战也具有很强的实操性可以边读边实践。希望这本小册可以帮你答疑解惑降低你的学习成本让你既能够得到一份完整的实操项目也能够帮你点满目前炽手可热的技能点为你的技术深度和薪水职位的提升提供充足的保障。

本文是整个小册的开篇主要分为以下几个部分

新蜂商城介绍
新蜂商城 Vue 版项目预览
Vue 技术栈介绍
Spring Boot 技术栈介绍
小册知识点总览

新蜂商城介绍

新蜂商城项目是我在 GitHub 上开源的一个项目:

在 GitHub 上写一些开源项目这件事情我做了三年多从 2017 年的第一个 ssm-demo 开源项目到 2019 年的 newbee-mall 新蜂商城项目再到如今的 newbee-mall-vue-app 我也没想到能够一直坚持了下来。

至于为什么会写这个商城项目呢？大家通过我过往做的项目应该有一点清楚一开始是做基础的 demo后面是做一些小项目之后也写过开源博客项目由小项目到大项目这是一个循序渐进的过程罢了在三年时间里慢慢过渡从无到有、由小至大最终有了这样一系列的项目至于为什么会选择走商城方向主要是在几个交流群里和大家沟通过貌似大家对商城类的项目更为感兴趣所以就决定开发了它。

自从在网上写博客、在 GitHub 上开源了几个不值一提的小项目之后很多朋友都会选择与我沟通或者问我一些问题这其中有相当一部分还是学生或者 1-3 年经验的朋友通过与他们的沟通呢我在写项目和想问题的时候也有所改变目前做的几个项目都更注重一些基础的东西别太麻烦、运行顺利、别缺代码。

回到项目本身通过上面说的几点呢相信大家也能够看出来我就是想写一个能够让大部分人即使是初学者或者在校大学生都能够运行起来的开源商城项目。

于是2019 年 10 月新蜂商城就开源了。

紧接着2020 年 5 月新蜂商城 Vue 版本也开源了。

紧接着2020 年 11 月新蜂商城 Vue3 版本也开源了。

更多内容可以去仓库里查看这里就不再占用篇幅了新蜂商城项目源码在 GitHub 和国内的码云都创建了代码仓库如果有人访问 GitHub 比较慢的话建议在 Gitee 上查看该项目

新蜂商城项目也优化了好几个版本了主要是一些 bug 修复和功能优化Vue 版本的代码升级是第一次的大版本更新这个版本的项目源码也已经开源开源地址为 github.com/newbee-ltd/…项目部署的相关文档和注意事项大家可以参考

后端部署《项目初体验启动新蜂商城后端 API 项目》。
前端部署《新蜂商城前端 H5 开发环境搭建》。

项目预览

登录页

首页

商品搜索

商品详情页

购物车

生成订单

地址管理

订单列表

订单详情

Vue 技术栈

Vue 框架不必多说尤大的力作在前端业界也算是一号“响当当”的框架。

当我在浏览器搜索关于 Vue 的实战课程时能搜到的课程寥寥无几多数是一些入门级别的教程知识点非常零散且数据形式都是通过 Mock 的形式模拟很多同学是希望能模拟真实的后端接口数据实现一个完整的项目基于这个需求我开始思考能否通过一个实战课来为在读的学生和 1-3 年开发经验的朋友们做一套基于 Vue 的电商实战课。

三大前端框架的对比

“我到底学哪个框架才能找到更好的工作呢？”

这是很多初入职场的同学的疑问在此我给大家对这三个框架做一个相对客观的分析。

我们先看看近一年时间 Vue、React、Angular 这三大前端框架的搜索情况

数据取自 Google Trends 从搜索的角度来看三个框架 Vue 受关注度较高React 和 Angular 紧随其后。

再看看受关注的地域

数据取自 Google Trends

很明显从受关注的国家来看我国呈现一片蔚蓝可以说明在国内和欧洲一带Vue 的市场占有率还是非常可观的国内的同学学习 Vue 势在必行。

从编程方式角度（指写代码的规范

Vue:它对新手和初学者比较友好只要你会 Html 和 CSS基本上就能快速上手。因为它把模板、业务逻辑、样式都放在一个 .vue 文件内写起来相对其他框架会比较舒服但是一旦业务逻辑复杂的页面代码就会比较臃肿。

React:它致力于组件化开发宗旨是万物皆组件页面基于组件的方式像搭积木一样的形式进行开发。JSX 语法相对学习成本也不会太高。

Angular:它是一个有作用域的框架依赖注入和挂载都需要考虑到它的作用域。相对来说学习成本比较高。

新手可以先尝试入门 Vue后期也可学习React这样学习的曲线会平缓一些。

从历史版本方面考虑

Vue: 前期的 1.x 到后来的 2.x 实现虚拟 dom 的形式渲染。近期可能会出来 3.x 版本我认为最大的期待应该是 3.x 会支持和 React 一样通过 Class 类的形式去编写组件升级方式还算是平滑历史项目也不用做太大的改动。

React: 一直采用的是平滑升级的形式15.4.2 版本以后废除的 createClass 的形式到现在 16.x 推出全新的 Hooks 形式用 Function 的方式进行组件的编写但是不是强制让你使用且能够兼容 Class 类的编写形式。

Angular: 1.x 版本的时候它不叫 Angular而是叫 AngularJS。以前它是使用 JS 去写的后来 2.x 出来之后是使用 TypeScript 写的所以改名为 Angular。当初升级完之后失去了一批用户理由我个人认为是因为还要重新学习一遍与其重构项目还不如重新学一门新的框架比如 Vue、 React。

从背景的角度考虑

Vue:最初是尤雨溪个人开发的项目现在他作为阿里的技术顾问也算是有阿里为其提供支持。

React:由脸书 Facebook 提供技术支持。

Angular:由全球知名的搜索引擎公司 Google 提供技术支持。

都是大厂无需担心框架的生态和版本的稳定性。

从编译的角度考虑

Angular 和 Vue 都是通过模板的形式开发页面那么有模板就会要解析模板也就是说会消耗一段时间。反观 React 使用的是 JSX 语法代码无需解析模板而是解析 JS 便可所以比 Angular 和 Vue 都少了一步所以相对来说 React 在解析编译的时候会相对快一些。

我认为入门前端的新手可以先从 Vue 框架切入通过这个切入点去熟悉整个前端的开发模式及周边技术再有余力的话可以对 React 框架进行学习毕竟目前的就业竞争日趋激烈技多不压身。

答疑

学习完 Vue 的用法之后我该如何制作一个属于自己的项目呢？

在学习完 Vue 之后如果不进行实战夯实基础知识点可能过几天之后慢慢的就忘记了 Vue 的语法这也是非常困扰各位学习者的问题费尽九牛二虎之力怎么能说忘就忘。

我本将心向明月焉使明月照沟渠？

本教程使用的是最新的 Vue-Cli-4.x 构建项目、通过 postcss-px-to-viewport 实现移动端不同分辨率的适配、集成 Vant 移动端 UI 组件库、引进阿里妈妈的 iconfont 创建属于自己的字体图标库、 axios 网络请求库二次封装、 Vue-Router 原理的讲解、 Vuex 全局状态管理等等技术。

学完本教程之后将它作为一个基准在工作中遇到的问题也能从此项目中借鉴一些思路。