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

鷹兔牛熊眼 2020-04-21

展開全文

做積極的人，而不是積極廢人！

源碼精品專欄

原創(chuàng) | Java 2020 超神之路，很肝~
中文詳細(xì)注釋的開源項(xiàng)目
RPC 框架 Dubbo 源碼解析
網(wǎng)絡(luò)應(yīng)用框架 Netty 源碼解析
消息中間件 RocketMQ 源碼解析
數(shù)據(jù)庫中間件 Sharding-JDBC 和 MyCAT 源碼解析
作業(yè)調(diào)度中間件 Elastic-Job 源碼解析
分布式事務(wù)中間件 TCC-Transaction 源碼解析
Eureka 和 Hystrix 源碼解析
Java 并發(fā)源碼

來源：梁小生0101

juejin.im/post/5c622fb5e51d457f9f2c2381

前后端分離(服務(wù)端渲染、瀏覽器渲染)
Vue.js
Spring Boot
Dubbo

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

前端工具和環(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.gi

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

實(shí)現(xiàn)真正的前后端解耦。
核心思想是前端html頁面通過ajax調(diào)用后端的restuful api接口并使用json數(shù)據(jù)進(jìn)行交互。
前后端分離會為以后的大型分布式架構(gòu)、彈性計算架構(gòu)、微服務(wù)架構(gòu)、多端化服務(wù)（多種客戶端，例如：瀏覽器，安卓，IOS等等）打下堅(jiān)實(shí)的基礎(chǔ)。

Vue.js

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

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

HTML、CSS、JavaScript

Vue介紹

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，網(wǎng)址：cn.vuejs.org/
Vue在Github的歡迎度

不需要操作Dom，實(shí)現(xiàn)了MVVM

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

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

學(xué)習(xí)成本低，文檔淺顯易懂

Vue 建項(xiàng)目

Vue 提供了一個官方的 CLI，為單頁面應(yīng)用 (SPA) 快速搭建繁雜的腳手架?；赩ue cli項(xiàng)目腳手架，網(wǎng)址：cli.vuejs.org/zh/guide/
運(yùn)行以下命令其一來創(chuàng)建一個新項(xiàng)目，有默認(rèn)選默認(rèn)即可
```
  vue create vue-hello-world (命令行)

  vue ui (界面)
```
在創(chuàng)建好項(xiàng)目以后，運(yùn)行以下命令將能看到初次項(xiàng)目創(chuàng)建的界面
cd vue-hello-world yarn serve
默認(rèn)情況下，在瀏覽器訪問 http://localhost:8080/ 將能看到如下界面：

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

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

<template>
<!--html-->
</template>

<script>
//js
</script>

<style>
/* css style */
</style>

組件化應(yīng)用構(gòu)建

使用小型、獨(dú)立和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用,一個頁面如搭積木一樣

Vue的生命周期如下圖：
lifecycle.png
鉤子方法: 模板方法的執(zhí)行結(jié)果，該方法就叫做鉤子方法，個人理解：影響了模板的執(zhí)行，把函數(shù)勾住了，這個方法就是鉤子函數(shù)。

鉤子函數(shù)	解釋
beforeCreate	實(shí)例初始化自動調(diào)用
created	實(shí)例創(chuàng)建后調(diào)用
beforeMounte	在mount之前運(yùn)行,元素已經(jīng)加載，但是屬性值沒渲染
mounted	并掛載到實(shí)例上去之后調(diào)用該鉤子
beforeDestroy	在開始銷毀實(shí)例時調(diào)用
destroyed	在實(shí)例銷毀后調(diào)用

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: '學(xué)習(xí) JavaScript' },
    { text: '學(xué)習(xí) Vue' },
    { text: '整個牛項(xiàng)目' }
  ]
}

監(jiān)聽事件
可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運(yùn)行一些 JavaScript 代碼。
<div id='example-2'>  <button v-on:click='greet'>Greet</button> </div>
```
methods: {
  greet: function () {
    // `this` 在方法里指向當(dāng)前 Vue 實(shí)例
    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 實(shí)例
      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: { // 當(dāng)兩個值變化時，將會觸發(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);
});

在學(xué)習(xí)完以上知識以后，將能使用Vue做出簡單的頁面運(yùn)用

擴(kuò)展：TypeScript、Vue組件間傳值、Mock、Vuex、調(diào)試、JavaScript的同步異步,作用域、ES6、部署(打包、優(yōu)化、部署在靜態(tài)服務(wù)器上、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 虛擬機(jī)
jvm1.png

區(qū)域	解釋
堆(heap)	由所有線程共享；new的對象的實(shí)例。
虛擬機(jī)棧(Stack)	每個線程擁有獨(dú)立的棧；存放局部變量、對象引用。被調(diào)方法結(jié)束后，對應(yīng)棧區(qū)變量等立即銷毀
靜態(tài)/方法區(qū)	方法區(qū)包含所有的class信息和static變量

介紹

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

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

由于網(wǎng)上資源眾多，就不詳細(xì)編寫創(chuàng)建步驟了。這里找了一個網(wǎng)上的教程，大家可以按這個步驟去創(chuàng)建一個項(xiàng)目，能用瀏覽器能訪問就行。SpringBoot新建HelloWorld工程：blog.csdn.net/small_mouse…

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

和前端交互

前端的Http請求會到controller這一層，而controller層根據(jù)相應(yīng)路由信息注解會跳轉(zhuǎn)到相應(yīng)的類。

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

@RequestMapping('/api')
public class UserController {

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

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

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

在執(zhí)行相應(yīng)的Sql以后，將會依次返回到controller層，然后在Http的返回中將會以Json串對象返回給前端的調(diào)用方。
前端在Http的response中拿到返回的值，然后再進(jìn)行一些處理。

概念

spring ioc容器:，主要用來管理對象和依賴，以及依賴的注入
依賴注入: 不用new，讓Spring控制new過程
控制反轉(zhuǎn): 不是用new方式實(shí)例化對象,實(shí)質(zhì)的控制權(quán)已經(jīng)交由程序管理
面向切面： 把一些功能抽離出來，再通過“動態(tài)織入”的方式摻入到業(yè)務(wù)中

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容器，相當(dāng)于spring的配置文件，IOC容器的配置類。

@ComponentScan

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

@RestController

告訴Spring以JSON字符串的形式渲染結(jié)果，并直接返回給調(diào)用者。

@RequestMapping

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

@Autowired

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

Mybatis的**@Mapper**

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

跨域

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

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

RESTful風(fēng)格

Rest是web服務(wù)的一種架構(gòu)風(fēng)格，一種設(shè)計風(fēng)格，URL只指定資源，以HTTP方法動詞進(jìn)行不同的操作。

// 非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具有很強(qiáng)可讀性的，具有自描述性
規(guī)范化請求過程和返回結(jié)果
資源描述與視圖的松耦合
可提供OpenAPI，便于第三方系統(tǒng)集成，提高互操作性
提供無狀態(tài)的服務(wù)接口，降低復(fù)雜度，可提高應(yīng)用的水平擴(kuò)展性

擴(kuò)展

JAVA的內(nèi)存模型（非線程安全）、Linq、JWT、Redis、WebSocket、單點(diǎn)登錄(SSO)、消息隊(duì)列

Spring Cloud的分布式

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

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

基于Spring Boot 快速開發(fā)單個微服務(wù)，Spring Cloud是一個基于Spring Boot實(shí)現(xiàn)的開發(fā)工具；Spring Boot專注于快速、方便集成的單個微服務(wù)個體，Spring Cloud關(guān)注全局的服務(wù)治理框架；Spring Boot可以離開Spring Cloud獨(dú)立使用開發(fā)項(xiàng)目，但是Spring Cloud離不開Spring Boot，屬于依賴的關(guān)系。

Dubbo

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

Dubbo的微服務(wù)的一些概念

生產(chǎn)者發(fā)布服務(wù)到服務(wù)注冊中心中
消費(fèi)者在服務(wù)注冊中心中訂閱服務(wù)
消費(fèi)者調(diào)用已經(jīng)注冊的服務(wù)

Dubbo的實(shí)現(xiàn)單個微服務(wù)

// 定義服務(wù)接口標(biāo)準(zhǔn)
public interface DemoService {

    String sayHello(String name);
}

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

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

// 消費(fèi)者引用然后調(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)控和接口展示

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

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

eureka、zookeeper 服務(wù)注冊和發(fā)現(xiàn)模塊，服務(wù)注冊在服務(wù)中心，提供給消費(fèi)者使用。
Hystrix 斷路器。為了保證其高可用，單個服務(wù)通常會集群部署。如果單個服務(wù)出現(xiàn)問題，調(diào)用這個服務(wù)就會出現(xiàn)線程阻塞，此時若有大量的請求涌入，Servlet容器的線程資源會被消耗完畢，導(dǎo)致服務(wù)癱瘓。服務(wù)與服務(wù)之間的依賴性，故障會傳播，會對整個微服務(wù)系統(tǒng)造成災(zāi)難性的嚴(yán)重后果。
zuul 路由網(wǎng)關(guān)。Zuul的主要功能是路由轉(zhuǎn)發(fā)和過濾器。比如/api/user轉(zhuǎn)發(fā)到到user服務(wù)，/api/shop轉(zhuǎn)發(fā)到到shop服務(wù)
Spring Cloud Config 在服務(wù)數(shù)量巨多時，為了方便服務(wù)配置文件統(tǒng)一管理，實(shí)時更新，需要分布式配置中心組件。
Spring Cloud Sleuth 功能就是在分布式系統(tǒng)中提供追蹤解決方案。

Spring Cloud 和 Dubbo 對比

基礎(chǔ)套件對比
duobbo@Spring.png

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

分布式配置：可以使用淘寶的 diamond、百度的 disconf 來實(shí)現(xiàn)分布式配置管理；服務(wù)跟蹤：可以使用京東開源的 Hydra，或者擴(kuò)展 Filter 用 Zippin 來做服務(wù)跟蹤；批量任務(wù)：可以使用當(dāng)當(dāng)開源的 Elastic-Job、tbschedule。

性能比較

服務(wù)依賴方式

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

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

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：鷹兔牛熊眼 > 《JAVA》

舉報/認(rèn)領(lǐng)