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

vue

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

發布時間：2025/3/20 vue 30 豆豆

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

點擊上方?好好學java?，選擇?星標?公眾號

重磅資訊、干貨，第一時間送達今日推薦：2020年7月程序員工資統計，平均14357元，又跌了，扎心個人原創100W+訪問量博客：點擊前往，查看更多

作者：梁小生0101

juejin.im/post/5c622fb5e51d457f9f2c2381

由于公司之前是寫 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

源代碼地址在下方?？梢缘脑?#xff0c;給顆星星哦，謝謝！！！

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

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

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

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

Vue.js

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

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

HTML、CSS、JavaScript

附上我歷時三個月總結的?Java 面試 + Java 后端技術學習指南，筆者這幾年及春招的總結，github 1.4k star，拿去不謝！

下載方式1.?首先掃描下方二維碼2.?后臺回復「Java面試」即可獲取

Vue 介紹

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

Vue 在 Github 的歡迎度

不需要操作 Dom，實現了 MVVM

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

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

搜索公縱號：MarkerHub，關注回復[?vue?]獲取前后端入門教程！

Vue 建項目

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

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

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

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

cd vue-hello-worldyarn serve

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

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

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

<template>  </template><script> //js </script><style> /* css style */ </style>

組件化應用構建

使用小型、獨立和通?？蓮陀玫慕M件構建大型應用, 一個頁面如搭積木一樣

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

鉤子函數解釋

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>  <button v-on:click="greet">Greet</button> </div> methods: {greet: function () {// `this` 在方法里指向當前 Vue 實例alert('Hello ' + this.name + '!')} }

計算屬性緩存 vs 方法

<div><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 的工作原理
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 中拿到返回的值，然后再進行一些處理。

搜索公縱號：MarkerHub，關注回復[?vue?]獲取前后端入門教程！

概念

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 {@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 框架, 地址：dubbo.apache.org/zh-cn/

Dubbo 的微服務的一些概念

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

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

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

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 監控和接口展示

[圖片上傳失敗...(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 字段即可，消費方和提供方無接口依賴。

最后，再附上我歷時三個月總結的?Java 面試 + Java 后端技術學習指南，筆者這幾年及春招的總結，github 1.4k star，拿去不謝！