![](https://img-blog.csdnimg.cn/20200529093438250.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Spring Boot+Vue前后端分离商城实战
基于真实项目的实战开发,技术栈为 Vue + Spring Boot,即学即用,让你不再迷茫!
优惠券已抵扣
余额抵扣
还需支付
¥59.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
程序员十三
公众号:程序员十三。我喜欢在网上分享一些个人的故事以及工作中遇到的问题,自 2017 年开始用 “十三” 这个网名在各个博客平台发表文章,相遇是一种缘分,期待我们的友好沟通,一起研究技术,共同提升。
展开
-
我在地铁上写了一个开源商城项目
压力巨大的 2019最近比较闲,因为是假期的缘故,也有时间去回顾和复盘去年做的一些事情,过程中也去翻了翻去年写的一些个人日记。现在看到去年的一些经历感觉还是有些激动的,因为去年整整一年过得还是挺热血的,不过热血的经历背后,往往是心酸,这个我在之前的一篇文章《「合抱之木,生于毫末,百丈之台,起于垒土」记录我的 2019》也介绍过。上图就是我去年某一天的一篇日记,睡眠少,熬夜多,没休假,其实...原创 2020-05-06 15:31:27 · 1178 阅读 · 0 评论 -
前后端分离的 Vue 版本商城测试记录介绍
新蜂商城 Vue 版本2019 年 10 月份我在 GitHub 开源仓库中上传了新蜂商城项目的所有源码,至今已经有小半年的时间了,感兴趣的可以去了解一下这个 Spring Boot 技术栈开发的商城项目,开源地址如下:newbee-mall in GitHub : https://github.com/newbee-ltd/newbee-mallnewbee-mall in Gitee ...原创 2020-04-27 16:02:03 · 1413 阅读 · 0 评论 -
Spring Boot+Vue前后端分离商城实战(一)后端API项目基础环境搭建
简介考虑到课程的受众比较广以及课程定位是一个实践项目,很多小细节就需要考虑进来,如果因为环境问题导致某些朋友无法进行接下来的课程就是一个很遗憾的事情了,因此单独用一篇文章来介绍基础环境搭建。本篇文章会详细的介绍 JDK8 的安装、IDEA 2018 安装使用、Maven 的安装和配置、MySQL8 的安装和使用,如果你的机器上已经准备好以上基础环境的话,可以选择性的略过这一节。考虑到 Windows 系统的普及性一些,因此本篇文章所介绍的环境是 Windows 系统。工欲善其事必先利其器,接下来跟随十三原创 2020-05-30 10:36:33 · 1238 阅读 · 0 评论 -
Spring Boot+Vue前后端分离商城实战(二)Spring Boot 项目构建及使用
在介绍了基础环境搭建之后,这一篇文章将介绍如何使用 IDEA 进行 Spring Boot 项目的开发和调试,希望大家能够尽快上手和体验 Spring Boot 项目开发。关于 Spring Boot 项目开发时编辑器该如何选择,十三个人还是比较推荐 IDEA 的,后续课程中关于项目的开发及演示也都会选择使用 IDEA 编辑器。Spring Boot 项目构建这一节主要介绍如何新建一个 Spring Boot 项目以及过程中需要注意的知识点,版本管理工具选择的是 Maven,对 Maven 比较熟悉的朋原创 2020-05-30 10:38:25 · 9161 阅读 · 0 评论 -
Spring Boot+Vue前后端分离商城实战(三)Spring Boot 整合 MyBatis
MyBatis 简介MyBatis 的前身是 Apache 社区的一个开源项目 iBatis,于2010年更名为 MyBatis。MyBatis 是支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架,避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集,使得开发人员更加关注 SQL 本身和业务逻辑,不用再去花费时间关注整个复杂的 JDBC 操作过程。以下为 MyBatis 的结构图:MyBatis 的优点如下:封装了 JDBC 大部分操作,减少开发人员工作量;相比一些自动化的原创 2020-05-30 10:41:30 · 817 阅读 · 0 评论 -
Spring Boot+Vue前后端分离商城实战(四)Spring Boot 整合 Lombok
什么是 LombokLombok 项目是一个第三方的 Java 工具库,它会自动插入编辑器和构建工具中,Lombok提供了一组非常有用的注释,用来消除Java类中的大量样板代码,比如 setter getter 方法、构造方法等等,仅仅在原来的 JavaBean 类上使用 @Data 注解就可以替换数百行代码从而使代码变得更加清爽、简洁且易于维护。大家可以将它理解为一个工具,仅此而已,千万不要觉得它是一个非用不可的框架。为什么要用 Lombok为什么新蜂商城第一版中没有使用 Lombok在原创 2020-05-30 10:48:33 · 399 阅读 · 0 评论 -
Spring Boot+Vue前后端分离商城实战(五)Spring Boot 整合 Swagger
Swagger 是一款 RESTful 接口的文档在线自动生成+功能测试功能软件,本文将会介绍这款工具并在 Spring Boot 项目中集成 Swagger。我们的新蜂商城 Vue 版本开发过程就一直在用 Swagger 这个工具,主要用来 生成接口文档以及进行接口测试工作,大家在运行源码后也可以通过 swagger-ui 页面看到新蜂商城的所有 API 文档,如下图所示:本文主要知识点如下:认识 SwaggerSpring Boot 集成 SwaggerSwagger 接口测试什么是原创 2020-05-30 10:50:46 · 695 阅读 · 0 评论 -
Spring Boot+Vue前后端分离商城实战(六)后端API项目启动和运行注意事项
之前的几篇内容已经讲解了一些基础的知识点,在正式进入开发之前呢,我们先来体验一下这个开源的前后端分离商城项目,本篇文章主要是讲一些注意事项,让大家可以顺利的运行源码并进行个性化修改。牵涉到的项目模块如下:新蜂商城后台管理系统项目新蜂商城 API 项目新蜂商城 Vue 端两个 Spring Boot 后端项目和一个前端 Vue 项目,相关的基础环境也需要搭建好。由于牵涉到的项目较多,所以这些知识点会在多篇文章中介绍,接下来的两篇文章主要是讲解一下项目的启动和需要特别注意的个性化配置,让大家原创 2020-05-30 10:54:29 · 994 阅读 · 4 评论 -
Spring Boot+Vue前后端分离商城实战(七)前端开发之 VSCode 编辑器
前端常用编辑器介绍Visual Studio Code简介:由微软研发,号称是前端现今使用率最高的编辑器,开源项目,并且免费使用。优点:开源,插件丰富,社区活跃,版本迭代更新频繁。尤其是插件的安装和卸载,可直接在编辑器内操作,十分方便。Sublime Text简介:它是一个文本编辑器(收费软件,可以无限期试用,但是会有激活提示弹窗),同时也是一个先进的代码编辑器。Sublime Text 是由程序员 Jon Skinner 于 2008 年 1 月份所开发出来,它最初被设计为一个具有丰富扩展功能原创 2020-05-30 10:57:07 · 1214 阅读 · 0 评论 -
Spring Boot+Vue前后端分离商城实战(八)Vue 指令介绍
准备工作学习一门新的框架语言,我个人认为最好的方式就是去它的官网把相应的生命周期以及 API 都用 Demo 的形式实操一遍。那么本课程也不例外,带大家简单了解一下 Vue 的指令和生命周期,等实战环节的时候,会讲解的更加细致一些。首先这里讲解 Vue 的两种使用形式。第一种是直接把 Vue 静态文件引入 script 标签;第二种是通过包安装的形式,下载到 package.json 项目中。这里方便起见,我们采用第一种形式。Live Server在 VS Code 插件篇我们提过 Live Se.原创 2020-05-30 10:59:22 · 343 阅读 · 0 评论 -
Spring Boot+Vue前后端分离商城实战(九)Vue 全局 API
全局 API 是什么举个比较好理解的例子,Vue 就好比一块蛋糕,生命周期钩子函数以及内部指令可以理解为做蛋糕用的面粉、糖、鸡蛋等。而全局 API 就是裹在蛋糕外面的奶油,让整个蛋糕(Vue)看起来更加美味。全局 API 的作用就是赋能 Vue 以更多的自由,大家可以更具自己项目的需求,通过全局 API 来制作出各种各样的方法工具。Vue.extendVue.extend 是什么?作为全局 API 中的一员,在实际开发中很少会被用到,因为相比我们经常使用的 Vue.component ,Vue.e.原创 2020-05-30 11:00:32 · 479 阅读 · 0 评论 -
Spring Boot+Vue前后端分离商城实战(十)脚手架工具 Vue-CLI
初识 Vue CLIVue CLI 简介「CLI」是 command-line-interface 的缩写,全称为「命令行界面」。Vue CLI 是基于 Node 环境,集成了 Webpack 对文件进行编译、压缩、打包、ES6 转 ES5等一系列操作,目前最新的 Vue CLI 为 4.1.x 版本。为什么要使用 Vue CLI如果我们手动从零开始搭建 Vue 的开发环境,会遇到很多不必要的麻烦。虽然这样能让我们更好的学习整个 Vue 的生态,但是从项目的角度出发,为了更好地把精力放在业务上,并原创 2020-05-30 11:02:36 · 605 阅读 · 0 评论 -
Spring Boot+Vue前后端分离商城实战(十一)CSS 预处理器 Less
前言本章我们要讲的是 CSS 预处理器,没有学过预处理器的同学,会认识到原来 CSS 也能设置变量、方法。吃透本章内容,对后期上手开发项目写 CSS 部分,有很大的帮助,比如项目的主题色我们可以设置多个变量,不用重复的编写。Flex 布局可以写成一个公用的方法,不必每次都写重复的代码。简单说就是提取大量重复的代码,能让 CSS 更加规范。初识 LessLess 是什么Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Le原创 2020-05-30 11:04:33 · 289 阅读 · 0 评论 -
Spring Boot+Vue前后端分离商城实战(十二)Vue 前端路由介绍
Vue-Router 是什么简介单页面开发模式的路由全权交由前端来控制,这里的路由不是我们说的路由器等硬件设备,它是前端的路径管理器。而 Vue-Router 是官方提供的路由插件,市面上也不乏路由管理插件,但是只有 Vue-Router 能和 Vue 深度集成完美搭配。单页面与传统页面跳转的区别单页面Vue 的单页面开发模式是基于组件和路由的配合,所有的页面均可视为组件,路由控制着访问路径,而每个路径映射一个组件。在单页模式中使用 a 标签做路由跳转是行不通的,因为本质上单页模式就只有一个原创 2020-05-30 11:06:06 · 607 阅读 · 0 评论 -
Spring Boot+Vue前后端分离商城实战(十三)状态管理之 Vuex
Vuex 是什么简介官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。笔者个人理解,一句即可以概括: Vuex 是用于管理 Vue 应用跨组件数据的工具。跨组件数据指的是,在 A、B、C组件都需要用到的数据,比如购物车的原创 2020-05-30 11:07:15 · 522 阅读 · 0 评论 -
Spring Boot+Vue前后端分离商城实战(十四)Vue 商城端项目启动及注意事项
前言在正式开发项目前,我们把整个前端的应用架构搭建整齐。我曾经很多次在没有把项目架构搭建完善的情况下,仓促的开始了项目的开发,结果就是遇到一个问题就去完善一个问题,就比如忘记添加路由,又要去把路由文档看一遍,忘记添加 Vuex 全局状态管理、移动端的适配等等,被这些琐碎的事情打断了我开发业务的思路,这是得不偿失的,笔者不希望读者们也重复踩坑,学习的目的就是不踩前人踩过的坑,少走一些弯路。H5 开发环境搭建初始化项目本项目使用 Vue-CLI 进行项目的初始化,当然有能力的同学可以自己从零开始搭建.原创 2020-05-30 11:08:56 · 1046 阅读 · 0 评论