vue實現與后臺springboot傳遞數據【傳值/取值】

提示：幫幫志會陸續更新非常多的IT技術知識，希望分享的內容對您有用。本章分享的是node.js和vue的使用。前后每一小節的內容是存在的有：學習and理解的關聯性。【幫幫志系列文章】：每個知識點，都是寫出代碼和運行結果且前后關聯上的去分析和說明（能大量節約您的時間）。

所有文章都*不會*直接把代碼放那里，讓您自己去看去理解。我希望我的內容對您有用而努力~

---

---

本文章是系列文章，技術棧內容為：【springboot+vue】【前后分離】
【詳細圖文，實操步驟分享，節約時間版】。最終完成一個商業化項目。內容有：
springboot知識
mybatisPlus知識
vue知識
node.js知識

本小節的內容是：
vue篇章 之 ： 09.vue實現與后臺springboot傳遞數據【傳值/取值】

---

---

每一個文章小節都會把 標題 說的很清楚。前后關聯看，可以快速實現：前后分離。本質上，額外文章鏈接和文章自己標題內容關系不大。

前面小節文章已經實現springboot的創建，springboot關聯前端數據swagger和springboot通過mybatisplus操作數據庫：
【2025年】基于電腦的jdk1.8通過idea創建springboot2.x版本(非常簡潔快速)
【上榜文章，一文搞定】現在springboot是3.x以上版本，jdk版本至少要求17.但是很多時候我們電腦是jdk1.8(求穩定性和安全性)。文本分享本機電腦1.8的jdk。idea如何非常簡潔快速的創建springboot
文章里面也有 為什么只能是jdk17起和地址指定為阿里云報錯的解決辦法

前面小節已經安裝好node.js和分享了一些vue語法，及RESTful風格及安裝配置swagger使用，和：
如何啟動vue項目及vue語法組件化不同標簽應對的作用說明
通過工具生成的vue案例(工具生成vue項目工程結構，里面有一個歡迎界面網頁)為切入點，逐步逐步修改分享講解，完成vue項目如何啟動。及自行編寫一些標簽和樣式來替換默認的內容，幫助理解包括里面的標簽，js代碼，樣式如何配合的

---

前言

完成 前端 vue.js工程結構準備
前端能啟動vue項目即可(vue項目的工程結構及語法分享在前面章節)。vue項目里面網頁怎么寫取后臺的值和發送數據到后臺，是本文章分享的內容：下面

完成 后臺 springboot工程結構準備
包括springboot項目（dao、service、controller、pojo實體類）。controller類里面的方法能拿實現不同提交方式(get post put delete) 去調用service/dao。 dao通過mybatisPlus操作mysql數據庫(前面章節有分享)

vue工程安裝axios，及axios的語法

命令 npm install axios

可以在終端里面寫命令。我是在 前面已經寫好的 vue項目里： vsCode終端 去寫的這個命令

axios語法：

get提交
axios.get('/user?uid=1').then(function(response){//提交后臺成功，執行的內容(then里面)，response是相應結果}).catch((function(error){//提交后臺失敗，執行的內容(catch里面)，error是錯誤信息})

post提交
axios.post('/user',{name:'bob',age:18}).then(function(response){//提交后臺成功，執行的內容(then里面)，response是相應結果}).catch((function(error){//提交后臺失敗，執行的內容(catch里面)，error是錯誤信息})

重要：axios語法寫在哪里
其實下面有直接可以使用的案例
但，這一段分享一個概念：

vue提供了很多生命周期的函數,就是這個xxx.vue文件從創建，到加載/掛載，然后到使用，最后到銷毀等等
不同的vue文件的生命周期 什么時候自動去調用函數

比如：
組件什么時候被創建？答：被使用的時候，在網頁里面：逐行逐行 =標簽= 加載下來，加載到您現在使用vue標簽，如前面案例的：bangbangzhi標簽(bangbangzhi標簽表示我們自己創建的bangbangzhi.vue)。 需要顯示bangbangzhi標簽的時候：
bangbangzhi標簽 會被創建 一個vue對象 ，然后需要就是加載。
最后用戶切換網頁了 \ 關閉網頁了
組件就銷毀
附：vue推薦組件開發，三個標簽組成一個組件（js，標簽，樣式 這三個）【前面有分享】。這個組件可以是菜單欄，可以是網頁頭部，可以是網頁尾部。。等等 當現在用戶正在查看的網頁，網頁里面有用到這個組件的時候，組件就需要加載-顯示

不同的生命周期，vue提供對應的不同函數(我們在代碼里面寫 methods: 這個是自定義函數，自己定義自己調用，和vue的生命周期沒關系)：

【現在我需要發送請求給后臺，后臺服務器發送數據給我們，所以：標簽還沒有顯示之前，就需要自動去執行】
用：created函數，這個vue是自帶的（加載組件顯示之前的時候 會自動調用：）
調用之后，會聲明一些對象來存儲數據（存儲后臺發過來的數據）。生命周期結束（組件銷毀。這個對象存數據也跟著銷毀了~）

---

一、編寫網頁界面

App.vue里面修改：

<template><img alt="Vue logo" src="./assets/logo.png"><bangbangzhi></bangbangzhi><bangbangzhi></bangbangzhi><bangbangzhi></bangbangzhi> <!-- 這個標簽是一個vue文件，前一小節分享了：《自行編寫網頁標簽內容》 --><h1>{{ uD.uname }}</h1>  <!-- 取出ud里面的值 -->
</template><script>
//可以導入很多個自己寫的組件   一個網頁頭部，尾部，菜單欄，左邊div，中間內容。  哪個網頁要用，就對應導入哪幾個
import bangbangzhi from './components/bbz.vue' 
import axios from 'axios'export default {name: 'App',created:function(){ //創建當前vue對象的時候,自動執行created函數axios.get("http://localhost:8081/getUser").then((response)=>{  //后臺把springboot的端口修改成了8081this.uD = response.data   //get提交到后臺，將后臺接收的值，放到uD變量里面})},data(){return {uD : ""  //當前僅僅聲明uD變量,不給數據. 數據在  created里面賦值}},components: {bangbangzhi   //把上面我們自己在同層級位置的components文件夾里面創建的 vue文件 聲明為一個標簽}
}
</script>

這個是截屏，內容也不多，看vue文件的位置和里面有啥(就一個h1標簽)
在script標簽里面引入vue文件，并聲明為一個標簽。在template引用即可(可以多次，例子用了3次)

---

二、編寫后臺對應的類

編寫后臺controller

@RestController
@CrossOrigin//axios跨域的問題  不寫可能報錯：不信任其他地址的數據 加上這個注解即可
public class UserController {@GetMapping("/getUser")public User getUser(){ //這里沒有寫參數去接收前端的數據，是因為突出文章主題，其他少一點(需要接參數，正常寫即可)User user = userDao.selectById(1);return user;}
}    

實體類

public class User {@TableIdprivate int uid;private String uname;//這個就是vue里面取值的成員變量private int uage;
...構造函數 get set 略
dao層使用mybatisPlus  [略] 前面幾個章節有

數據庫

---

三、啟動

您哪個網頁需要使用后臺的數據，就寫上

axios.get("地址").then((response)=>{ this.變量名 = response.data   })//需要post 帶數據，上面有語法分享

說明一下：我用的h1標簽來舉的例子，template標簽可以復雜一點。有表格，循環標簽，列表，if標簽 ，等等等，vue語法：template標簽從js里面 ： {{ 取值 }} 或者 v-xxx取值。并不是本文章分享的重點內容(本系列有)，前面文章分享了vue的各種內容顯示方法代碼示例。后臺也可以返回list集合，對象。

默認網頁刷新就需要顯示，就寫在created:里面
點擊按鈕，才提交請求給后臺，就寫在自己定義的方法函數體里面，按鈕綁定函數

---

總結

說明一下：整個這個系列實現前后分離的springboot+vue項目。序號文章一共也就10幾篇，只有核心圖文重點操作步驟來實現這個目標(基本上您邊看邊寫：一個小時或者一上午就能跟著一起手搓一個前后分離項目，然后您可以自行添加功能和內容在您項目里面)

其他擴展細節知識點，本系列省略了(或者有鏈接)如：
axios還有一些案例，但是現在案例基本滿足大部分情況，畢竟當前我們的目的是：快速手搓一個前后分離的全棧。
axios的其他功能及使用，管它*現在*用不用的上，內容全部丟進來。各位看官自行消化。那~可能會很多很多了（又耗時）。當前 系列： 手搓出來之后，您可以自行加功能和內容

（會陸續更新非常多的IT技術知識及泛IT的電商知識，可以點個關注，共同交流。?( ′･?･` )比心）
（也歡迎評論，提問。 我會依次回答~）