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

2022-01-08 老炮說Java

由於公司之前是寫 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 代碼地址：https://github.com/liangwei0101/Spring-Boot-And-Vue.git

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

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

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

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

HTML、CSS、JavaScript

Vue 介紹

Vue 是一套用於構建用戶界面的漸進式框架，網址：cn.vuejs.org/

Vue 在 Github 的歡迎度

不需要操作 Dom，實現了 MVVM

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

// Vue的操作
MVVM，實現了雙向綁定

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

Vue 建項目

Vue 提供了一個官方的 CLI，為單頁面應用 (SPA) 快速搭建繁雜的腳手架。基於 Vue cli 項目腳手架，網址：cli.vuejs.org/zh/guide/

運行以下命令其一來創建一個新項目，有默認選默認即可

vue create vue-hello-world (命令行)

vue ui (界面)

在創建好項目以後，運行以下命令將能看到初次項目創建的界面

cd vue-hello-world

yarn serve

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

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

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

<script>
//js
</script>

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

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

鉤子函數解釋beforeCreate實例初始化自動調用created實例創建後調用beforeMounte在 mount 之前運行, 元素已經加載，但是屬性值沒渲染mounted並掛載到實例上去之後調用該鉤子beforeDestroy在開始銷毀實例時調用destroyed在實例銷毀後調用Vue 常用指令

<div>
{{ message }}
</div>

data: {
message: 'Hello Vue!'
}

<div>
<p v-if="seen">現在你看到我了</p>
</div>

data: {
seen: true
}

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

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

可以用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。

<div>
<!-- `greet` 是在下面定義的方法名 -->
<button v-on:click="greet">Greet</button>
</div>

methods: {
greet: function () {
// `this` 在方法裡指向當前 Vue 實例
alert('Hello ' + this.name + '!')
}
}

<div>
<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('')
}
}
})

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…

項目目錄結構

和前端交互

前端的 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();
}
}

在框架經過處理以後，最終調用的是 mapper 層。

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

在執行相應的 Sql 以後，將會依次返回到 controller 層，然後在 Http 的返回中將會以 Json 串對象返回給前端的調用方。

前端在 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 />
</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 好處:

擴展

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

// 生產者項目引用並實現
@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 欄位即可，消費方和提供方無接口依賴。

作者：梁小生0101

https://juejin.im/post/5c622fb5e51d457f9f2c2381

相關焦點

  • Spring Boot 2.0(五):Docker Compose+Spring Boot+Nginx+Mysql 實踐
    讓我們看看以下幾個因素：第一，這只是一個最簡單的案例，如果項目涉及到 MongoDB、Redis、ES ... 一些列的環境呢？ 第二，如果你經常搭建環境或者調試程序，你就會知道什麼是環境問題？於是你花費很多時間來查找，最後才發現是少了一個參數或者逗號的問題，或者是系統內核版本不一致、或者你最後也沒搞懂是為什麼！只能再換另外一臺伺服器，那麼使用 Docker 呢就可以完美的避開這些坑。好了，廢話不多說我們就開始吧！
  • Java程式設計師求職必學:Spring boot學習指南!
    咳咳，今天學姐就來和你們說說Spring對於Java程式設計師的重要性。首先，Spring 官網首頁是這麼介紹自己的——「Spring: the source for modern Java」，這也意味著 Spring 與 Java 有著密切的關係！
  • springboot+springsecurity實現前後端分離簡單實現!
    通過各種方式學習springsecurity，在B站、騰訊課堂、網易課堂、慕課網沒有springsecurity的前後端分離的教學視頻，那我就去csdn去尋找springsecurity博客，發現幾個問題：要麼就是前後端不分離，要麼就是通過內存方式讀取數據，而不是通過資料庫的方式讀取數據，要麼就是大佬們給的代碼不全、把代碼講的太繞，關鍵部分沒有注釋
  • Spring Boot 2.4 正式發布,重大調整!!!
    學不動也要學啊，不然就要被淘汰了，Java技術棧所有 Spring Boot 教程和示例源碼都上傳到 Github 了，歡迎 Star：https://github.com/javastacks/spring-boot-best-practice好吧，還是例行公事，接下來棧長帶大家來解讀下 Spring Boot 2.4.0 到底更新了什麼鬼
  • springcloud的微服務開發日記之五(zuul路由轉發)
    2018年的日程安排如下：記錄springcloud開發微服務的全過程記錄vue實現的知識圖譜服務記錄中醫理論在知識圖譜上的應用每天一個小目標，做比昨天更好的自己博客地址 i.drai.top有興趣的可以關注一下，共同進步另：關注後可點擊頭條號的「源碼」連結，有空閒時間我會不定期的上傳源碼以供參考
  • Spring Boot 2.5.5發布:開始支持Java 17了!
    <parent>  <groupId>org.springframework.boot</groupId>  <artifactId>spring-boot-starter-parent</artifactId>  <version>2.5.5</version&
  • Spring Boot與Shiro整合實現用戶認證
    ;import org.springframework.beans.factory.annotation.Qualifier;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration
  • Spring Boot 實現掃碼登錄,這種方式太香了!!
    如果您正在學習Spring Boot，推薦一個連載多年還在繼續更新的免費教程：http://blog.didispace.com/spring-boot-learning-2x/好了！分析完了這些。你們一定在想。。還有完沒完啊。。不要在BB了。。趕緊貼代碼吧。。作者：觀眾老爺們。我這是在教給你們如何思考的方法呀?那麼開始貼代碼吧！
  • Spring Boot 2.3.0 發布 - OSCHINA - 中文開源技術交流社區
    > Couchbase Client 3.0 Elasticsearch 7.6 Kafka 2.5 Micrometer 1.5 MongoDB 4.0 支持 Java 14spring
  • 好大一波,波波都大#spring boot websocket單聊+群聊#
    courseId=1004638001à Spring Boot源碼https://gitee.com/happyangellxq520/spring-bootà Spring Boot交流平臺http://412887952-qq-com.iteye.com/blog/2321532  好大一波，波波都大
  • SpringSecurity + JWT前後端分離架構實現
    當然，這整個過程中，cookies和sessionid都是服務端和瀏覽器端自動維護的。所以從編碼層面是感知不到的，程式設計師只能感知到session數據的存取。但是，這種方式在有些情況下，是不適用的。比如：非瀏覽器的客戶端、手機移動端等等，因為他們沒有瀏覽器自動維護cookies的功能。
  • 如何用Spring Boot和Cloud實現微服務
    如何用Spring Boot和Cloud實現微服務 本文將向您介紹如何使用Spring Boot和Cloud來實現微服務的基本部署和相互通信。
  • Spring Boot集成validation用於優雅的校驗API參數的合法性
    ，郵箱格式是否正確等等，校驗框架比較多，用的比較多的是hibernate-validator， 也支持國際化，也可以自定義校驗類型的註解，這裡只是簡單的演示校驗框架在Spring Boot中的簡單集成，要想了解更多可以參考 hibernate-validator1. pom.xml<dependency> <groupId>org.springframework.boot
  • Spring Boot 節省95%內存佔用
    GraalVM[1] 是一種高性能的虛擬機，它可以顯著的提高程序的性能和運行效率，非常適合微服務。使用類似命令即可完成指定版本安裝和指定默認版本sdk install java 11.0.9.hs-adptsdk default java 11.0.9.hs-adpt不過安裝過程中需要從國外下載相關資源 ，筆者在嘗試後使用體驗並不是很好，所以建議大家下載指定版本 GraalVM 安裝即可（和 JDK 安裝方式一樣）。
  • Spring Boot 2.4.3、2.3.9 版本發布,你準備好了嗎?
    心急的小夥伴現在可從 repo.spring.io 和 Maven Central 獲得相關內容。<parent>  <groupId>org.springframework.boot</groupId>  <artifactId>spring-boot-starter-parent</artifactId>  <version>2.4.3</version>
  • Spring Security(二)--Guides
    上一篇文章《Spring Security(一)--Architecture Overview》，我們介紹了Spring Security的基礎架構，這一節我們通過Spring官方給出的一個guides例子，來了解Spring Security是如何保護我們的應用的，之後會對進行一個解讀。
  • 遷移SpringCloud應用到OpenShift-ServiceMesh
    啟動配置中心cd service-configmvn clean spring-boot:run啟動管控cd adminmvn clean spring-boot:run說明本次OpenShift上的Spring Cloud遷移到Istio上，考慮到儘可能少的改動，保留了spring boot admin和spring cloud config，實際使用時可考慮採用ConfigMap, Prometheus
  • Spring boot + Spring Security實現權限管理
    基於Spring boot + Spring Security實現第一版傳統架構本文是實訓邦的權限管理SpringSecurity+JWT的一個講義，分享給粉絲學習。講義內容1.使用Spring Security的HttpBasic模式實現登錄認證2.使用Spring Security的FormLogin模式實現登錄認證3.基於JSON的前後端分離開發的登錄認證