Spring Boot + Vue.js 实现前后端分离（附源码），看完记得收藏！

Spring Boot + Vue.js 前后端涉及基本概念介绍，搭建记录，本文会列举出用到环境和工具，并且提供源码。

前端工具和环境：

Node.js V10.15.0
Vue.js V2.5.21
yarn: V1.13.0
IDE: VScode
后端工具和环境：

Maven: 3.52
jdk: 1.8
MySql: 14.14
IDE: IDEA
Spring Boot: 2.0+
Zookeeper：3.4.13
Demo 地址：http://101.132.124.171:8000/about

前后端分离(服务端渲染、浏览器渲染)

实现真正的前后端解耦。
核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互
前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，安卓，IOS等等）打下坚实的基础。

Vue.js

在讲Vue之前，需要大概了解下 HTML、CSS、JS是什么，想必大家都有这方面的知识储备，如果还没有移步下方三个链接，这里不过多介绍。

1. https://www.runoob.com/html/html-tutorial.html

2. https://www.w3school.com.cn/css/index.asp

3. https://www.w3school.com.cn/js/index.asp

Vue介绍

1. Vue是一套用于构建用户界面的渐进式框架，网址：cn.vuejs.org/

2. Vue在Github的欢迎度

3. 不需要操作Dom，实现了MVVM

// jquery的操作
$("#test3").val("Dolly Duck");

// Vue的操作
MVVM，实现了双向绑定

4. 学习成本低，文档浅显易懂

Vue 建项目

1. Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。基于Vue cli项目脚手架，网址：cli.vuejs.org/zh/guide/

2. 运行以下命令其一来创建一个新项目，有默认选默认即可

vue create vue-hello-world (命令行)

vue ui (界面)

3. 在创建好项目以后，运行以下命令将能看到初次项目创建的界面

cd vue-hello-world

yarn serve

4. 默认情况下，在 浏览器访问 http://localhost:8080/ 将能看到如下界面：

Vue 相关结构和生命周期介绍

目录结构如下图：

单个.vue文件的组成部介绍

组件化应用构建

使用小型、独立和通常可复用的组件构建大型应用,一个页面如搭积木一样
Vue的生命周期如下图：