當前位置：首頁 > 前端技术 > vue >内容正文

vue

记一次Spring boot 和Vue的前后端分离的入门培训

發布時間：2025/3/21 vue 47 豆豆

生活随笔收集整理的這篇文章主要介紹了记一次Spring boot 和Vue的前后端分离的入门培训小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

記一次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.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

demo.png

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

實現真正的前后端解耦。
核心思想是前端html頁面通過ajax調用后端的restuful api接口并使用json數據進行交互。
前后端分離會為以后的大型分布式架構、彈性計算架構、微服務架構、多端化服務（多種客戶端，例如：瀏覽器，安卓，IOS等等）打下堅實的基礎。

Vue.js

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

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

HTML、CSS、JavaScript

Vue介紹

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

Vue在Github的歡迎度

GithubStar.jpg

不需要操作Dom，實現了MVVM

// jquery的操作 $("#test3").val("Dolly Duck");// Vue的操作 MVVM，實現了雙向綁定

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

Vue 建項目

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

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

vue create vue-hello-world (命令行)vue ui (界面)

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

cd vue-hello-worldyarn serve

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

vue.png

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

vue-cli3.0.png

單個.vue文件的組成部介紹
<template>  </template><script> //js </script><style> /* css style */ </style>
組件化應用構建

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

components.png

Vue的生命周期如下圖：

lifecycle.png

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

鉤子函數解釋

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">  <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: {// 計算屬性的 getterreversedMessage: 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}]})  <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的工作原理
?

java.jpg
JVM 虛擬機
?

jvm1.png

區域解釋

堆(heap)	由所有線程共享；new的對象的實例。
虛擬機棧(Stack)	每個線程擁有獨立的棧；存放局部變量、對象引用。被調方法結束后，對應棧區變量等立即銷毀
靜態/方法區	方法區包含所有的class信息和static變量

介紹

Spring Boot 是所有基于 Spring 開發的項目的。Spring Boot 的設計是為了讓你盡可能快的跑起來 Spring 應用程序并且盡可能減少你的配置文件。

使用Spring Boot開發單個RESTful服務

由于網上資源眾多，就不詳細編寫創建步驟了。這里找了一個網上的教程，大家可以按這個步驟去創建一個項目，能用瀏覽器能訪問就行。SpringBoot新建HelloWorld工程：?https://blog.csdn.net/small_mouse0/article/details/77800737

項目目錄結構

SpringBootCli.png

和前端交互

前端的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層。

mysql.png

@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 name="person" ref="person" /> </bean><bean id="person" class="com.yiibai.common.Person" /> // Spring 的注解方式 public class Customer {@Autowiredprivate 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框架,地址：http://dubbo.apache.org/zh-cn/

Dubbo的微服務的一些概念

architecture.png

生產者發布服務到服務注冊中心中

消費者在服務注冊中心中訂閱服務

消費者調用已經注冊的服務

Dubbo的實現單個微服務

// 定義服務接口標準 public interface DemoService {String sayHello(String name); } // 生產者項目引用并實現 @Service public class DemoServiceImpl implements DemoService {@Overridepublic String sayHello(String name) {return "Hello, " + name + " (from Spring Boot)";} } // 消費者引用然后調用 @RestController public class DemoConsumerController {@Referenceprivate DemoService demoService;@RequestMapping("/sayHello/{name}")public String sayHello(@PathVariable("name") String name) {return demoService.sayHello(name);} }

Dubbo監控和接口展示

Dubbo ops.png

分布式的基礎套件介紹

cloud.png

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

Spring Cloud 和 Dubbo 對比

基礎套件對比
?

duobbo@Spring.png

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

分布式配置：可以使用淘寶的 diamond、百度的 disconf 來實現分布式配置管理；
服務跟蹤：可以使用京東開源的 Hydra，或者擴展 Filter 用 Zippin 來做服務跟蹤；
批量任務：可以使用當當開源的 Elastic-Job、tbschedule。

性能比較

[圖片上傳失敗...(image-20b722-1550892455751)]

服務依賴方式

Dubbo：服務提供方與消費方通過接口的方式依賴，因此需要為每個微服務定義了各自的 Interface接口，并通過持續集成發布到私有倉庫中，調用方應用對微服務提供的抽象接口存在強依賴關系，開發、測試、集成環境都需要嚴格的管理版本依賴。

Spring Cloud：服務提供方和服務消費方通過 JSON 方式交互，因此只需要定義好相關 JSON 字段即可，消費方和提供方無接口依賴。

總結

以上是生活随笔為你收集整理的记一次Spring boot 和Vue的前后端分离的入门培训的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：基于vue-cli、elementUI的
下一篇：大数据分析币圈动态： ETH、BTC、B