链接：juejin.im/post/5c622fb5e51d457f9f2c2381

前端工具和环境：

• Node.js V10.15.0
• Vue.js V2.5.21
• yarn: V1.13.0
• IDE: VScode

Demo 地址：http://101.132.124.171:8000/about

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

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

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

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

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

// jquery的操作$("#test3").val("Dolly Duck");// Vue的操作MVVM，实现了双向绑定

Vue 建项目

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

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

vue create vue-hello-world (命令行)vue ui (界面)

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

nerror="javascript:errorimg.call(this);">

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

<template><!--html--></template><script>//js</script><style></style>

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

nerror="javascript:errorimg.call(this);">

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

钩子函数

nerror="javascript:errorimg.call(this);">

Vue 常用指令

条件渲染

<div id="app-3">  <p v-if="seen">现在你看到我了</p></div>data: {    seen: true}

监听事件

计算属性缓存 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('')    }  }})

表单输入绑定

<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>

v-bind 缩写

<!-- 完整语法 --><a v-bind:href="url">...</a><!-- 缩写 --><a :href="url">...</a>

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

梭哈 PC端:iview、小程序：mpvue，移动端：muse-ui，桌面端：Electron + Vue JS走天下。

mpvue：http://mpvue.com/

Electron + Vue JS：https://github.com/SimulatedGREG/electron-vue

Spring Boot

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

Java的工作原理

nerror="javascript:errorimg.call(this);">

JVM 虚拟机

nerror="javascript:errorimg.call(this);">

Spring Boot 是所有基于 Spring 开发的项目的。Spring Boot 的设计是为了让你尽可能快的跑起来 Spring 应用程序并且尽可能减少你的配置文件。

使用Spring Boot开发单个RESTful服务

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

项目目录结构

nerror="javascript:errorimg.call(this);">

和前端交互

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();    }}

3. 在执行相应的Sql以后，将会依次返回到controller层，然后在Http的返回中将会以Json串对象返回给前端的调用方。

4. 前端在Http的response中拿到返回的值，然后再进行一些处理。

Bean

bean是一个对象，由ioc容器生成的对象就是一个bean

1. @SpringBootApplication

2. @Configuration

3. @ComponentScan

4. @RestController

5. @RequestMapping

6. @Autowired

7. Mybatis的@Mapper

跨域

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行的Web应用被准许访问来自不同源服务器上的指定的资源。

RESTful风格

Rest是web服务的一种架构风格，一种设计风格，URL只指定资源，以HTTP方法动词进行不同的操作。

推荐阅读：1. 简洁 RESTful API 设计规范！整个人都清爽了！

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/

1. 生产者发布服务到服务注册中心中

3. 消费者调用已经注册的服务

分布式的基础套件介绍

nerror="javascript:errorimg.call(this);">

eureka、zookeeper 服务注册和发现模块，服务注册在服务中心，提供给消费者使用。

Hystrix 断路器。为了保证其高可用，单个服务通常会集群部署。如果单个服务出现问题，调用这个服务就会出现线程阻塞，此时若有大量的请求涌入，Servlet容器的线程资源会被消耗完毕，导致服务瘫痪。服务与服务之间的依赖性，故障会传播，会对整个微服务系统造成灾难性的严重后果。

zuul 路由网关。Zuul的主要功能是路由转发和过滤器。比如/api/user转发到到user服务，/api/shop转发到到shop服务

Spring Cloud Config 在服务数量巨多时，为了方便服务配置文件统一管理，实时更新，需要分布式配置中心组件。

Spring Cloud Sleuth 功能就是在分布式系统中提供追踪解决方案。

Spring Cloud 和 Dubbo 对比

基础套件对比

nerror="javascript:errorimg.call(this);">

Dubbo 只是实现了服务治理，而 Spring Cloud 子项目分别覆盖了微服务架构下的众多部件，而服务治理只是其中的一个方面。Dubbo 提供了各种 Filter，对于上述中“无”的要素，可以通过扩展 Filter 来完善。例如：

分布式配置：可以使用淘宝的 diamond、百度的 disconf 来实现分布式配置管理；服务跟踪：可以使用京东开源的 Hydra，或者扩展 Filter 用 Zippin 来做服务跟踪；批量任务：可以使用当当开源的 Elastic-Job、tbschedule。

性能比较

nerror="javascript:errorimg.call(this);">

服务依赖方式

Dubbo：服务提供方与消费方通过接口的方式依赖，因此需要为每个微服务定义了各自的 Interface接口，并通过持续集成发布到私有仓库中，调用方应用对微服务提供的抽象接口存在强依赖关系，开发、测试、集成环境都需要严格的管理版本依赖。

Spring Cloud：服务提供方和服务消费方通过 JSON 方式交互，因此只需要定义好相关 JSON 字段即可，消费方和提供方无接口依赖。

对了，在这里说一下，我目前是在职Java开发，如果你现在正在学习Java，了解Java，渴望成为一名合格的Java开发工程师，在入门学习Java的过程当中缺乏基础入门的视频教程，可以关注并私信我：01。获取。我这里有最新的Java基础全套视频教程。