Spring Boot + Vue實現先後端分離（文末附源碼）

 

做者： 梁小生0101

Spring Boot + Vue.js 先後端涉及基本概念介紹，搭建記錄，本文會列舉出用到環境和工具，而且提供源碼。

前端工具和環境：

• 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

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

 

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

• 核心思想是前端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.asp

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的生命週期以下圖：

 

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

鉤子函數

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後端，回覆「BV」。

擴展

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

分佈式的基礎套件介紹

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？

乾貨：一文讀懂客戶端請求是如何到達服務器的