記一次Spring boot 和Vue前後端分離的入門培訓

摘要： 由於公司之前是寫C#的，現在要轉 Java分散式 + vue,所以進行一次前後端的簡單培訓。 前端工具和環境： Node.js V10.15.0 Vue.js V2.5.21 yarn: V1.13.0 IDE:VScode 後端工具和環境： Maven: 3.52 jdk: 1...

由於公司之前是寫C#的，現在要轉 Java分散式 + 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

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

Spring Boot + Vue 程式碼地址： github.com/liangwei010…

Dubbo-Spring-Boot程式碼地址： github.com/liangwei010…

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

• 實現真正的前後端解耦。

• 核心思想是前端html頁面通過ajax呼叫後端的restuful api介面並使用json資料進行互動。

• 前後端分離會為以後的大型分散式架構、彈性計算架構、微服務架構、多端化服務（多種客戶端，例如：瀏覽器，安卓，IOS等等）打下堅實的基礎。

Vue.js

在講Vue之前，需要大概瞭解下 HTML、CSS、JS是什麼？

HTML是寫標籤的；CSS是寫樣式的；JS是給網頁增加動態效果

HTML 、 CSS 、 JavaScript

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檔案的組成部介紹

  <template>
  <!--html-->
  </template>
  
  <script>
  //js
  </script>
  
  <style>
  /* css style */
  </style>
  複製程式碼

• 元件化應用構建

使用小型、獨立和通常可複用的元件構建大型應用,一個頁面如搭積木一樣

• Vue的生命週期如下圖：

  

• 鉤子方法:模板方法的執行結果，該方法就叫做鉤子方法，個人理解：影響了模板的執行，把函式勾住了，這個方法就是鉤子函式。

鉤子函式	解釋
beforeCreate	例項初始化自動呼叫
created	例項建立後呼叫
beforeMounte	在mount之前執行,元素已經載入，但是屬性值沒渲染
mounted	並掛載到例項上去之後呼叫該鉤子
beforeDestroy	在開始銷燬例項時呼叫
destroyed	在例項銷燬後呼叫

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的同步非同步,作用域、ES6、部署(打包、優化、部署在靜態伺服器上、node中間層)、虛擬DOM、Http的get和post等。

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

Spring Boot

在講Spring Boot之前，需要大概瞭解下Java的一些相關

• 語法層面和 C# 差不多，這裡略過

• Java的工作原理

  

• JVM 虛擬機器

  

區域	解釋
堆(heap)	由所有執行緒共享；new的物件的例項。
虛擬機器棧(Stack)	每個執行緒擁有獨立的棧；存放區域性變數、物件引用。被調方法結束後，對應棧區變數等立即銷燬
靜態/方法區	方法區包含所有的class資訊和static變數

介紹

Spring Boot 是所有基於 Spring 開發的專案的。Spring Boot 的設計是為了讓你儘可能快的跑起來 Spring 應用程式並且儘可能減少你的配置檔案。

使用Spring Boot開發單個RESTful服務

由於網上資源眾多，就不詳細編寫建立步驟了。這裡找了一個網上的教程，大家可以按這個步驟去建立一個專案，能用瀏覽器能訪問就行。SpringBoot新建HelloWorld工程： blog.csdn.net/small_mouse…

專案目錄結構

和前端互動

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方法動詞進行不同的操作。

// 非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的微服務的一些概念

1. 生產者釋出服務到服務註冊中心中

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

3. 消費者呼叫已經註冊的服務

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);
}
}
複製程式碼

Dubbo監控和介面展示

[圖片上傳失敗...(image-f1b5da-1549937296666)]

分散式的基礎套件介紹

• 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 欄位即可，消費方和提供方無介面依賴。