Spring Boot 和 Vue 前後端分離教程（附源碼）

  • 2019 年 11 月 10 日
  • 筆記

來源：https://juejin.im/post/5c622fb5e51d457f9f2c2381

前端工具和環境：

  • 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數據進行交互。

前後端分離會為以後的大型分散式架構、彈性計算架構、微服務架構、多端化服務（多種客戶端，例如：瀏覽器，Android，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-worldyarn serve

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

Vue 相關結構和生命周期介紹

1,目錄結構如下圖：

2,單個.vue文件的組成介紹

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

3,組件化應用構建

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

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

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

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等。

相關:

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", 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;}

註解

@SpringBootApplication

@SpringBootApplication = @Configuration + @EnableAutoConfiguration + @ComponentScan 簡化程式的配置。

@Configuration

註解在類上，表示這是一個IOC容器，相當於spring的配置文件，IOC容器的配置類。

@ComponentScan

如果掃描到有@Component @Controller @Service等這些註解的類，則把這些類註冊為bean。@Controller, @Service, @Repository是@Component的細化，這三個註解比@Component帶有更多的語義，它們分別對應了控制層、服務層、持久層的類。

@RestController

告訴Spring以JSON字元串的形式渲染結果，並直接返回給調用者。

@RequestMapping

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

@Autowired

可以對類成員變數、方法及構造函數進行標註。從IoC容器中去查找，並自動裝配。（去除@Autowired可以運行一下試試）

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

  • 生產者發布服務到服務註冊中心中
  • 消費者在服務註冊中心中訂閱服務
  • 消費者調用已經註冊的服務

Dubbo的實現單個微服務

// 定義服務介面標準public interface DemoService {      String sayHello(String name);}

// 生產者項目引用並實現@Servicepublic class DemoServiceImpl implements DemoService {    @Override  public String sayHello(String name) {    return "Hello, " + name + " (from Spring Boot)";  }}

// 消費者引用然後調用@RestControllerpublic 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 欄位即可，消費方和提供方無介面依賴。

源程式碼地址

Spring Boot + Vue 程式碼地址：

https://github.com/liangwei0101/Spring-Boot-And-Vue

Dubbo-Spring-Boot程式碼地址：

https://github.com/liangwei0101/Dubbo-Spring-Boot

-END-

VirMach 便宜 VPS

QNews

QNews