springboot + vue_SpringBoot 和Vue前后端分离入门教程(附源码)

前端工具和环境：

• 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

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

实现真正的前后端解耦。

核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。

前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端，例如：浏览器，安卓，IOS等等)打下坚实的基础。

---

Vue.js

在讲Vue之前，需要大概了解下 HTML、CSS、JS是什么？

HTML是写标签的；CSS是写样式的；JS是给网页增加动态效果

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 相关结构和生命周期介绍

1,目录结构如下图：

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

3,组件化应用构建

使用小型、独立和通常可复用的组件构建大型应用,一个页面如搭积木一样

4,Vue的生命周期如下图：

钩子方法: 模板方法的执行结果，该方法就叫做钩子方法，个人理解：影响了模板的执行，把函数勾住了，这个方法就是钩子函数。

Vue 常用指令

声明式渲染

{{ message }}

data: { message: 'Hello Vue!'}

条件渲染

现在你看到我了

data: { seen: true}

循环渲染

{{ todo.text }}

data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ]}

监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

Greet

methods: { greet: function () { // `this` 在方法里指向当前 Vue 实例 alert('Hello ' + this.name + '!') }}

计算属性缓存 vs 方法

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }, methods: { // 方法 reversedMessage: function () { return this.message.split('').reverse().join('') } }})

数据变化，watch

var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { // 当两个值变化时，将会触发此函数 fullName: function () { return this.firstName + ' ' + this.lastName } }})

表单输入绑定

Message is: {{ message }}

缩写

v-bind 缩写

......

v-on 缩写

......

路由

 // 可提供懒加载 const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] })

User

// js跳转router.push({ name: 'user', params: { userId: 123 }})

使用 axios 访问 API

// get请求 axios.get('/user', { params: { ID: 12345 }}).then(function (response) { console.log(response);}).catch(function (error) { console.log(error);});

// post 请求axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone'}).then(function (response) { console.log(response);}).catch(function (error) { console.log(error);});

在学习完以上知识以后，将能使用Vue做出简单的页面运用

扩展：

TypeScript、Vue组件间传值、Mock、Vuex、调试、JavaScript的同步异步,作用域、ES6、部署(打包、优化、部署在静态服务器上、node中间层)、虚拟DOM、Http的get和post等。

相关:

https://github.com/SimulatedGREG/electron-vue

https://muse-ui.org/#/zh-CN/list

http://mpvue.com/

https://www.iviewui.com/components/page

---

Spring Boot

在讲Spring Boot之前，需要大概了解下Java的一些相关

Java的工作原理

JVM 虚拟机

介绍

Spring Boot 是所有基于 Spring 开发的项目的。Spring Boot 的设计是为了让你尽可能快的跑起来 Spring 应用程序并且尽可能减少你的配置文件。系统学习springboot,可以在Java知音公众号回复关键字"Springboot聚合" ，网罗优质教程。

使用Spring Boot开发单个RESTful服务

由于网上资源众多，就不详细编写创建步骤了。这里找了一个网上的教程，大家可以按这个步骤去创建一个项目，能用浏览器能访问就行。SpringBoot新建HelloWorld工程：

https://blog.csdn.net/small_mouse0/article/details/77800737

项目目录结构

和前端交互

1,前端的Http请求会到controller这一层，而controller层根据相应路由信息注解会跳转到相应的类。

// 如： /api/user 的get请求将会被 UserQry() 函数处理@RequestMapping("/api")public class UserController { @RequestMapping(value ="/user