Spring Boot + Vue实现先后端分离（文末附源码）
做者： 梁小生0101php
Spring Boot + Vue.js 先后端涉及基本概念介绍，搭建记录，本文会列举出用到环境和工具，而且提供源码。css
前端工具和环境：html
- 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/aboutvue
先后端分离(服务端渲染、浏览器渲染)
-
实现真正的先后端解耦。
-
核心思想是前端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.aspVue介绍
1. Vue是一套用于构建用户界面的渐进式框架，网址：cn.vuejs.org/node
2. Vue在Github的欢迎度jquery
3. 不须要操做Dom，实现了MVVMios
// 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文件的组成部介绍
<template> <!--html--> </template> <script> //js </script> <style> /* css style */ </style>
组件化应用构建git
使用小型、独立和一般可复用的组件构建大型应用,一个页面如搭积木同样
Vue的生命周期以下图：
钩子方法: 模板方法的执行结果，该方法就叫作钩子方法，我的理解：影响了模板的执行，把函数勾住了，这个方法就是钩子函数。
钩子函数github
Vue 经常使用指令
声明式渲染<div id="app">
{{ message }}
</div>
data: {
message: 'Hello Vue!'
}
条件渲染
<div id="app-3">
<p v-if="seen">如今你看到我了</p>
</div>
data: {
seen: true
}
循环渲染
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
监听事件
能够用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
methods: {
greet: function () {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
}
}
计算属性缓存 vs 方法
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
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
}
}
})
表单输入绑定
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
缩写 v-bind 缩写
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a>
v-on 缩写
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a>
路由
// 可提供懒加载
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
<!--html跳转-->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
// 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的同步异步,做用域、ES六、部署(打包、优化、部署在静态服务器上、node中间层)、虚拟DOM、Http的get和post等。
梭哈 PC端:iview、小程序：mpvue，移动端：muse-ui，桌面端：Electron + Vue JS走天下。
ivied：https://www.iviewui.com/components/page
mpvue：http://mpvue.com/
muse-ui：https://muse-ui.org/#/zh-CN/list
Electron + Vue JS：https://github.com/SimulatedGREG/electron-vue
Spring Boot
在讲Spring Boot以前，须要大概了解下Java的一些相关 Java的工做原理
JVM 虚拟机
介绍
Spring Boot 是全部基于 Spring 开发的项目的。Spring Boot 的设计是为了让你尽量快的跑起来 Spring 应用程序而且尽量减小你的配置文件。若是没有学过 Spring Boot 请关注微信公众号（Java后端）而后回复「666」获取一个 500 多页的教程。使用Spring Boot开发单个RESTful服务
因为网上资源众多，就不详细编写建立步骤了。这里找了一个网上的教程，你们能够按这个步骤去建立一个项目，能用浏览器能访问就行。项目目录结构
和前端交互 1. 前端的Http请求会到controller这一层，而controller层根据相应路由信息注解会跳转到相应的类。
// 如：/api/user 的get请求将会被 UserQry() 函数处理
@RequestMapping("/api")
public class UserController {
@RequestMapping(value ="/user", method = RequestMethod.GET)
public List<User> UserQry() {
return userService.getUser();
}
}
2. 在框架通过处理之后，最终调用的是mapper层。
@Select("select * from user")
List<User> getUser();
3. 在执行相应的Sql之后，将会依次返回到controller层，而后在Http的返回中将会以Json串对象返回给前端的调用方。
4. 前端在Http的response中拿到返回的值，而后再进行一些处理。
概念
- spring ioc容器:，主要用来管理对象和依赖，以及依赖的注入
- 依赖注入: 不用new，让Spring控制new过程
- 控制反转: 不是用new方式实例化对象,实质的控制权已经交由程序管理
- 面向切面：把一些功能抽离出来，再经过“动态织入”的方式掺入到业务中
Bean
bean是一个对象，由ioc容器生成的对象就是一个bean配置VS注解
// Spring 的操做
package com.yiibai.common;
public class Customer
{
private Person person;
public Customer(Person person) {
this.person = person;
}
public void setPerson(Person person) {
this.person = person;
}
//...
}
package com.yiibai.common;
public class Person
{
//...
}
// Spring 的配置Bean的xml
<bean id="customer" class="com.yiibai.common.Customer">
<property name="person" ref="person" />
</bean>
<bean id="person" class="com.yiibai.common.Person" />
// Spring 的注解方式
public class Customer
{
@Autowired
private Person person;
}
注解
1. @SpringBootApplication @SpringBootApplication = @Configuration + @EnableAutoConfiguration + @ComponentScan 简化程序的配置。 2. @Configuration 注解在类上，表示这是一个IOC容器，至关于spring的配置文件，IOC容器的配置类。 3. @ComponentScan 若是扫描到有@Component @Controller @Service等这些注解的类，则把这些类注册为bean。@Controller, @Service, @Repository是@Component的细化，这三个注解比@Component带有更多的语义，它们分别对应了控制层、服务层、持久层的类。 4. @RestController 告诉Spring以JSON字符串的形式渲染结果，并直接返回给调用者。5. @RequestMapping
告诉Spring这是一个用来处理请求地址映射的注解。 6. @Autowired 能够对类成员变量、方法及构造函数进行标注。从IoC容器中去查找，并自动装配。（去除@Autowired能够运行一下试试） 7. Mybatis的@Mapper 注解的接口生成一个实现类跨域
浏览器从一个域名的网页去请求另外一个域名的资源时，域名、端口、协议任一不一样，都是跨域。 跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行的Web应用被准许访问来自不一样源服务器上的指定的资源。RESTful风格
Rest是web服务的一种架构风格，一种设计风格，URL只指定资源，以HTTP方法动词进行不一样的操做。 推荐阅读：1. 简洁 RESTful API 设计规范！整我的都清爽了！ 2. 先后端分离开发，RESTful 接口应该这样设计// 非RESTful接口 api/getfile.php - 获取文件信息，下载文件 api/uploadfile.php - 上传建立文件 api/deletefile.php - 删除文件 // 只须要api/users这一个接口 GET http://localhost:8080/api/users （查询用户） POST http://localhost:8080/api/users （新增用户） PUT http://localhost:8080/api/users （更新用户） DELETE http://localhost:8080/api/users （删除用户）
Restful好处:
-
URL具备很强可读性的，具备自描述性
-
规范化请求过程和返回结果
-
资源描述与视图的松耦合
-
可提供OpenAPI，便于第三方系统集成，提升互操做性
-
提供无状态的服务接口，下降复杂度，可提升应用的水平扩展性
扩展
JAVA的内存模型（非线程安全）、Linq、JWT、Redis、WebSocket、单点登陆(SSO)、消息队列Spring Cloud的分布式
其实在上面咱们作的一个Spring Boot小的demo就是一个服务。若干个小的Spring Boot的模块，合在一块儿。使用一些分布式的套件，将模块集群化，让模块之间联系和管理起来，其实就是Spring Cloud的基本的微服务。Spring Boot和 Spring Cloud的关系
基于Spring Boot 快速开发单个微服务，Spring Cloud是一个基于Spring Boot实现的开发工具；Spring Boot专一于快速、方便集成的单个微服务个体，Spring Cloud关注全局的服务治理框架；Spring Boot能够离开Spring Cloud独立使用开发项目，可是Spring Cloud离不开Spring Boot，属于依赖的关系。Dubbo
Dubbo 是一款高性能Java RPC框架,地址：dubbo.apache.org/zh-cn/ Dubbo的微服务的一些概念
Dubbo的实现单个微服务
// 定义服务接口标准
public interface DemoService {
String sayHello(String name);
}
// 生产者项目引用并实现
@Service
public class DemoServiceImpl implements DemoService {
@Override
public String sayHello(String name) {
return "Hello, " + name + " (from Spring Boot)";
}
}
// 消费者引用而后调用
@RestController
public class DemoConsumerController {
@Reference
private DemoService demoService;
@RequestMapping("/sayHello/{name}")
public String sayHello(@PathVariable("name") String name) {
return demoService.sayHello(name);
}
}
分布式的基础套件介绍
eureka、zookeeper
服务注册和发现模块，服务注册在服务中心，提供给消费者使用。
Hystrix 断路器。为了保证其高可用，单个服务一般会集群部署。若是单个服务出现问题，调用这个服务就会出现线程阻塞，此时如有大量的请求涌入，Servlet容器的线程资源会被消耗完毕，致使服务瘫痪。服务与服务之间的依赖性，故障会传播，会对整个微服务系统形成灾难性的严重后果。
zuul 路由网关。Zuul的主要功能是路由转发和过滤器。好比/api/user转发到到user服务，/api/shop转发到到shop服务
Spring Cloud Config 在服务数量巨多时，为了方便服务配置文件统一管理，实时更新，须要分布式配置中心组件。
Spring Cloud Sleuth 功能就是在分布式系统中提供追踪解决方案。
Spring Cloud 和 Dubbo 对比
基础套件对比
Dubbo 只是实现了服务治理，而 Spring Cloud 子项目分别覆盖了微服务架构下的众多部件，而服务治理只是其中的一个方面。Dubbo 提供了各类 Filter，对于上述中“无”的要素，能够经过扩展 Filter 来完善。例如：
分布式配置：可使用淘宝的 diamond、百度的 disconf 来实现分布式配置管理；服务跟踪：可使用京东开源的 Hydra，或者扩展 Filter 用 Zippin 来作服务跟踪；批量任务：可使用当当开源的 Elastic-Job、tbschedule。
性能比较
服务依赖方式
Dubbo：服务提供方与消费方经过接口的方式依赖，所以须要为每一个微服务定义了各自的 Interface接口，并经过持续集成发布到私有仓库中，调用方应用对微服务提供的抽象接口存在强依赖关系，开发、测试、集成环境都须要严格的管理版本依赖。
Spring Cloud：服务提供方和服务消费方经过 JSON 方式交互，所以只须要定义好相关 JSON 字段便可，消费方和提供方无接口依赖。
有热门推荐????
酒后系列：被某厂面试官吊打后酒后整理的JVM干货
Google 6面，最终仍是挂了…
为何单线程的Redis可以达到百万级的QPS？
干货：一文读懂客户端请求是如何到达服务器的
相关文章
- 1. Spring Boot + Vue实现先后端分离（文末附源码）
- 2. Spring Boot + Vue.js 实现先后端分离（附源码）
- 3. SpringBoot 和Vue先后端分离入门教程(附源码)
- 4. Spring Boot + Vue + Shiro 实现先后端分离、权限控制
- 5. Spring Boot + Vue先后端分离（三）实现登陆功能
- 6. ssm+vue先后端分离框架整合（附源码）
- 7. Vue+Spring Boot 先后端分离的商城项目开源啦！
- 8. Vue+SpringBoot 先后端分离小实验
- 9. Spring Boot + Vue先后端分离（二）前端Vue启动流程
- 10. Spring Boot + Vue先后端分离（一）前端Vue环境搭建
- 更多相关文章...
- • SQLite 分离数据库 - SQLite教程
- • Spring JDK动态代理（附带实例） - Spring教程
- • Spring Cloud 微服务实战(三) - 服务注册与发现
- • Java Agent入门实战（二）-Instrumentation源码概述
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Spring Boot + Vue实现先后端分离（文末附源码）
- 2. Spring Boot + Vue.js 实现先后端分离（附源码）
- 3. SpringBoot 和Vue先后端分离入门教程(附源码)
- 4. Spring Boot + Vue + Shiro 实现先后端分离、权限控制
- 5. Spring Boot + Vue先后端分离（三）实现登陆功能
- 6. ssm+vue先后端分离框架整合（附源码）
- 7. Vue+Spring Boot 先后端分离的商城项目开源啦！
- 8. Vue+SpringBoot 先后端分离小实验
- 9. Spring Boot + Vue先后端分离（二）前端Vue启动流程
- 10. Spring Boot + Vue先后端分离（一）前端Vue环境搭建