由于公司之前是寫C#的种柑，現(xiàn)在要轉(zhuǎn) Java分布式 + vue,所以進行一次前后端的簡單培訓锌订。

前端工具和環(huán)境：
Node.js V10.15.0
Vue.js V2.5.21
yarn: V1.13.0
IDE:VScode

后端工具和環(huán)境：
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

源代碼地址在下方深夯”啥福可以的話喻旷，給顆星星哦生逸，謝謝！Ｇ以ぁ槽袄！

Spring Boot + Vue 代碼地址：https://github.com/liangwei0101/Spring-Boot-And-Vue.git

Dubbo-Spring-Boot代碼地址： https://github.com/liangwei0101/Dubbo-Spring-Boot.git

demo.png

前后端分離(服務端渲染、瀏覽器渲染)

• 實現(xiàn)真正的前后端解耦锋谐。

• 核心思想是前端html頁面通過ajax調(diào)用后端的restuful api接口并使用json數(shù)據(jù)進行交互遍尺。

• 前后端分離會為以后的大型分布式架構(gòu)、彈性計算架構(gòu)怀估、微服務架構(gòu)狮鸭、多端化服務（多種客戶端，例如：瀏覽器多搀，安卓歧蕉，IOS等等）打下堅實的基礎(chǔ)。

Vue.js

在講Vue之前康铭，需要大概了解下 HTML惯退、CSS、JS是什么从藤？

HTML是寫標簽的催跪；CSS是寫樣式的；JS是給網(wǎng)頁增加動態(tài)效果

HTML夷野、CSS懊蒸、JavaScript

Vue介紹

1. Vue是一套用于構(gòu)建用戶界面的漸進式框架，網(wǎng)址：https://cn.vuejs.org/

2. Vue在Github的歡迎度

GithubStar.jpg

3. 不需要操作Dom悯搔，實現(xiàn)了MVVM

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

// Vue的操作
MVVM骑丸，實現(xiàn)了雙向綁定

4. 學習成本低，文檔淺顯易懂

Vue 建項目

1. Vue 提供了一個官方的 CLI妒貌，為單頁面應用 (SPA) 快速搭建繁雜的腳手架通危。基于Vue cli項目腳手架灌曙，網(wǎng)址：https://cli.vuejs.org/zh/guide/

2. 運行以下命令其一來創(chuàng)建一個新項目菊碟，有默認選默認即可

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

3. 在創(chuàng)建好項目以后，運行以下命令將能看到初次項目創(chuàng)建的界面

     cd vue-hello-world
   
     yarn serve
   

4. 默認情況下在刺，在 瀏覽器訪問 http://localhost:8080/ 將能看到如下界面：

vue.png

Vue 相關(guān)結(jié)構(gòu)和生命周期介紹

• 目錄結(jié)構(gòu)如下圖：

vue-cli3.0.png

• 單個.vue文件的組成部介紹

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

• 組件化應用構(gòu)建

使用小型逆害、獨立和通常可復用的組件構(gòu)建大型應用,一個頁面如搭積木一樣

components.png

• Vue的生命周期如下圖：
  
  lifecycle.png

• 鉤子方法: 模板方法的執(zhí)行結(jié)果蚣驼，該方法就叫做鉤子方法忍燥，個人理解：影響了模板的執(zhí)行，把函數(shù)勾住了隙姿，這個方法就是鉤子函數(shù)梅垄。

Vue 常用指令

• 聲明式渲染

  <div id="app">
    {{ message }}
  </div>
  

  data: {
      message: 'Hello Vue!'
  }
  

• 條件渲染

  <div id="app-3">
    <p v-if="seen">現(xiàn)在你看到我了</p>
  </div>
  

  data: {
      seen: true
  }
  

• 循環(huán)渲染

  <div id="app-4">
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
  </div>
  

  data: {
    todos: [
      { text: '學習 JavaScript' },
      { text: '學習 Vue' },
      { text: '整個牛項目' }
    ]
  }
  

• 監(jiān)聽事件

  可以用 v-on 指令監(jiān)聽 DOM 事件输玷，并在觸發(fā)時運行一些 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('')
      }
    }
  })
  

• 數(shù)據(jù)變化，watch

  var vm = new Vue({
    el: '#demo',
    data: {
      firstName: 'Foo',
      lastName: 'Bar'
    },
    computed: {
      // 當兩個值變化時欲鹏，將會觸發(fā)此函數(shù)
      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跳轉(zhuǎn)-->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

// js跳轉(zhuǎn)
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胧弛、調(diào)試、JavaScript的同步異步,作用域侠畔、ES6结缚、部署(打包、優(yōu)化软棺、部署在靜態(tài)服務器上红竭、node中間層)、虛擬DOM喘落、Http的get和post等茵宪。

• 梭哈 PC端:iview、小程序：mpvue瘦棋，移動端：muse-ui稀火，桌面端：Electron + Vue JS走天下。

Spring Boot

在講Spring Boot之前赌朋，需要大概了解下Java的一些相關(guān)

• 語法層面和 C# 差不多憾股，這里略過

• Java的工作原理

  
  
  java.jpg

• JVM 虛擬機

  
  
  jvm1.png

介紹

Spring Boot 是所有基于 Spring 開發(fā)的項目的。Spring Boot 的設(shè)計是為了讓你盡可能快的跑起來 Spring 應用程序并且盡可能減少你的配置文件伐庭。

使用Spring Boot開發(fā)單個RESTful服務

由于網(wǎng)上資源眾多粉渠，就不詳細編寫創(chuàng)建步驟了。這里找了一個網(wǎng)上的教程圾另，大家可以按這個步驟去創(chuàng)建一個項目霸株，能用瀏覽器能訪問就行。SpringBoot新建HelloWorld工程： https://blog.csdn.net/small_mouse0/article/details/77800737

項目目錄結(jié)構(gòu)

SpringBootCli.png

和前端交互

1. 前端的Http請求會到controller這一層集乔，而controller層根據(jù)相應路由信息注解會跳轉(zhuǎn)到相應的類去件。

// 如： /api/user 的get請求將會被 UserQry() 函數(shù)處理

@RequestMapping("/api")
public class UserController {
    
    @RequestMapping(value ="/user", method = RequestMethod.GET)
    public List<User> UserQry() {
        return userService.getUser();
    }
}

2. 在框架經(jīng)過處理以后，最終調(diào)用的是mapper層扰路。

mysql.png

  @Select("select * from user")
  List<User> getUser();

3. 在執(zhí)行相應的Sql以后尤溜，將會依次返回到controller層，然后在Http的返回中將會以Json串對象返回給前端的調(diào)用方汗唱。

4. 前端在Http的response中拿到返回的值宫莱，然后再進行一些處理。

概念

• spring ioc容器:哩罪，主要用來管理對象和依賴授霸，以及依賴的注入

• 依賴注入: 不用new巡验，讓Spring控制new過程

• 控制反轉(zhuǎn): 不是用new方式實例化對象,實質(zhì)的控制權(quán)已經(jīng)交由程序管理

• 面向切面： 把一些功能抽離出來，再通過“動態(tài)織入”的方式摻入到業(yè)務中

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字符串的形式渲染結(jié)果，并直接返回給調(diào)用者猿挚。

5. @RequestMapping

告訴Spring這是一個用來處理請求地址映射的注解咐旧。

6. @Autowired

可以對類成員變量、方法及構(gòu)造函數(shù)進行標注绩蜻。從IoC容器中去查找铣墨，并自動裝配。（去除@Autowired可以運行一下試試）

7. Mybatis的@Mapper

注解的接口生成一個實現(xiàn)類

跨域

瀏覽器從一個域名的網(wǎng)頁去請求另一個域名的資源時办绝，域名伊约、端口、協(xié)議任一不同孕蝉，都是跨域屡律。

跨域資源共享(CORS) 是一種機制，它使用額外的 HTTP 頭來告訴瀏覽器 讓運行的Web應用被準許訪問來自不同源服務器上的指定的資源降淮。

RESTful風格

Rest是web服務的一種架構(gòu)風格超埋，一種設(shè)計風格，URL只指定資源佳鳖，以HTTP方法動詞進行不同的操作纳本。

// 非RESTful接口
api/getfile.php - 獲取文件信息，下載文件
api/uploadfile.php - 上傳創(chuàng)建文件
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具有很強可讀性的腋颠，具有自描述性
• 規(guī)范化請求過程和返回結(jié)果
• 資源描述與視圖的松耦合
• 可提供OpenAPI繁成，便于第三方系統(tǒng)集成，提高互操作性
• 提供無狀態(tài)的服務接口淑玫，降低復雜度巾腕，可提高應用的水平擴展性

擴展

JAVA的內(nèi)存模型（非線程安全）面睛、Linq、JWT尊搬、Redis叁鉴、WebSocket、單點登錄(SSO)佛寿、消息隊列

Spring Cloud的分布式

其實在上面我們做的一個Spring Boot小的demo就是一個服務幌墓。若干個小的Spring Boot的模塊，合在一起冀泻。使用一些分布式的套件常侣，將模塊集群化，讓模塊之間聯(lián)系和管理起來弹渔，其實就是Spring Cloud的基本的微服務胳施。

Spring Boot和 Spring Cloud的關(guān)系

基于Spring Boot 快速開發(fā)單個微服務，Spring Cloud是一個基于Spring Boot實現(xiàn)的開發(fā)工具肢专；Spring Boot專注于快速舞肆、方便集成的單個微服務個體，Spring Cloud關(guān)注全局的服務治理框架博杖；Spring Boot可以離開Spring Cloud獨立使用開發(fā)項目椿胯，但是Spring Cloud離不開Spring Boot，屬于依賴的關(guān)系剃根。

Dubbo

Dubbo 是一款高性能Java RPC框架,地址：http://dubbo.apache.org/zh-cn/

Dubbo的微服務的一些概念

architecture.png

1. 生產(chǎn)者發(fā)布服務到服務注冊中心中

2. 消費者在服務注冊中心中訂閱服務

3. 消費者調(diào)用已經(jīng)注冊的服務

Dubbo的實現(xiàn)單個微服務

// 定義服務接口標準
public interface DemoService {

    String sayHello(String name);
}

// 生產(chǎn)者項目引用并實現(xiàn)
@Service
public class DemoServiceImpl implements DemoService {

  @Override
  public String sayHello(String name) {
    return "Hello, " + name + " (from Spring Boot)";
  }
}

// 消費者引用然后調(diào)用
@RestController
public class DemoConsumerController {

  @Reference
  private DemoService demoService;

  @RequestMapping("/sayHello/{name}")
  public String sayHello(@PathVariable("name") String name) {
    return demoService.sayHello(name);
  }
}

Dubbo監(jiān)控和接口展示

Dubbo ops.png

分布式的基礎(chǔ)套件介紹

cloud.png

• eureka哩盲、zookeeper 服務注冊和發(fā)現(xiàn)模塊，服務注冊在服務中心跟继，提供給消費者使用种冬。

• Hystrix 斷路器。為了保證其高可用舔糖，單個服務通常會集群部署娱两。如果單個服務出現(xiàn)問題，調(diào)用這個服務就會出現(xiàn)線程阻塞金吗，此時若有大量的請求涌入十兢，Servlet容器的線程資源會被消耗完畢，導致服務癱瘓摇庙。服務與服務之間的依賴性旱物，故障會傳播，會對整個微服務系統(tǒng)造成災難性的嚴重后果卫袒。

• zuul 路由網(wǎng)關(guān)宵呛。Zuul的主要功能是路由轉(zhuǎn)發(fā)和過濾器。比如/api/user轉(zhuǎn)發(fā)到到user服務夕凝，/api/shop轉(zhuǎn)發(fā)到到shop服務

• Spring Cloud Config 在服務數(shù)量巨多時宝穗，為了方便服務配置文件統(tǒng)一管理户秤，實時更新，需要分布式配置中心組件逮矛。

• Spring Cloud Sleuth 功能就是在分布式系統(tǒng)中提供追蹤解決方案鸡号。

Spring Cloud 和 Dubbo 對比

• 基礎(chǔ)套件對比

  
  
  duobbo@Spring.png

Dubbo 只是實現(xiàn)了服務治理，而 Spring Cloud 子項目分別覆蓋了微服務架構(gòu)下的眾多部件须鼎，而服務治理只是其中的一個方面鲸伴。Dubbo 提供了各種 Filter，對于上述中“無”的要素晋控，可以通過擴展 Filter 來完善汞窗。例如：

分布式配置：可以使用淘寶的 diamond、百度的 disconf 來實現(xiàn)分布式配置管理糖荒；
服務跟蹤：可以使用京東開源的 Hydra杉辙，或者擴展 Filter 用 Zippin 來做服務跟蹤模捂；
批量任務：可以使用當當開源的 Elastic-Job捶朵、tbschedule。

• 性能比較

[圖片上傳失敗...(image-20b722-1550892455751)]

• 服務依賴方式

Dubbo：服務提供方與消費方通過接口的方式依賴狂男，因此需要為每個微服務定義了各自的 Interface接口综看，并通過持續(xù)集成發(fā)布到私有倉庫中，調(diào)用方應用對微服務提供的抽象接口存在強依賴關(guān)系岖食，開發(fā)红碑、測試、集成環(huán)境都需要嚴格的管理版本依賴泡垃。

Spring Cloud：服務提供方和服務消費方通過 JSON 方式交互析珊，因此只需要定義好相關(guān) JSON 字段即可，消費方和提供方無接口依賴蔑穴。