vue实现与后台springboot传递数据【传值/取值 Axios 】

vue实现与后台springboot传递数据【传值/取值】

提示：帮帮志会陆续更新非常多的IT技术知识，希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有：学习and理解的关联性。【帮帮志系列文章】：每个知识点，都是写出代码和运行结果且前后关联上的去分析和说明（能大量节约您的时间）。

所有文章都*不会*直接把代码放那里，让您自己去看去理解。我希望我的内容对您有用而努力~

文章目录

vue实现与后台springboot传递数据【传值/取值】
前言
vue工程安装axios，及axios的语法
一、编写网页界面
二、编写后台对应的类
三、启动
总结

本文章是系列文章，技术栈内容为：【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语法：

javascript 复制代码

get提交
axios.get('/user?uid=1')
	.then(function(response){
		//提交后台成功，执行的内容(then里面)，response是相应结果
	})
	.catch((function(error){
		//提交后台失败，执行的内容(catch里面)，error是错误信息
	})

javascript 复制代码

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里面修改：

html 复制代码

<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的端口修改成了8081
      this.uD = response.data   //get提交到后台，将后台接收的值，放到uD变量里面
    })
  },
  data(){
    return {
      uD : ""  //当前仅仅声明uD变量,不给数据. 数据在  created里面赋值
  }},
  components: {
    bangbangzhi   //把上面我们自己在同层级位置的components文件夹里面创建的 vue文件 声明为一个标签
  }
}
</script>

这个是截屏，内容也不多，看vue文件的位置和里面有啥(就一个h1标签)

在script标签里面引入vue文件，并声明为一个标签。在template引用即可(可以多次，例子用了3次)

二、编写后台对应的类

编写后台controller

java 复制代码

@RestController
@CrossOrigin//axios跨域的问题  不写可能报错：不信任其他地址的数据 加上这个注解即可
public class UserController {

@GetMapping("/getUser")
    public User getUser(){ 
    //这里没有写参数去接收前端的数据，是因为突出文章主题，其他少一点(需要接参数，正常写即可)
        User user = userDao.selectById(1);
        return user;
    }
}

实体类

java 复制代码

public class User {
    @TableId
    private int uid;
    private String uname;//这个就是vue里面取值的成员变量
    private int uage;
...构造函数 get set 略
dao层使用mybatisPlus  [略] 前面几个章节有

数据库

三、启动

您哪个网页需要使用后台的数据，就写上

javascript 复制代码

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的电商知识，可以点个关注 ，共同交流。ღ( ´･ᴗ･` )比心）

（也欢迎评论，提问。我会依次回答~）