vue3 + Spring Boot 中使用get方法实现前后端通信

        在软件工程与计算Ⅱ的学习中需要进行前后端的交流通信，这里用一个例子简单说说如何使用"GET"请求来进行前后端的参数、数据传递。

样例1：后端传递“Hello World”字符串并在前端渲染

后端：

        后端用controller类来处理前端发起的请求并进行回应，可以在controller包中新建DemoController.java类。

        下面的xxxxApplication类是项目的入口。

        controller类中需要引入org.springframework.web.bind.annotation.*包，import一下就好了。

controller类需要用到@RestController标签来表明这是一个controller类，以便处理前端的请求。

下面是controller类的整体样貌：

import org.springframework.web.bind.annotation.*;


@RestController
public class DemoController{
    
}

         在controller类中写处理请求的函数对前端的get请求进行处理并做出回应。

@GetMapping("/get")
public String get(){
    return "hello world";
}

        @GetMapping标签表示这是一个接受get请求的函数，也可以使用@RequestMapping标签，但形式上有所不同。

@RequestMapping(value="/get", method=RequestMethod.GET)
public String get(){
    return "hello world";
}

         "/get"表示默认路由后面会增加"/get"这样一个后缀，一般springboot默认使用8080端口，默认网址为http://localhost:8080，因此get请求映射到的路由为http://localhost:8080/get。

前端：

        前端使用axios进行数据的获取。关于axios的相关知识可以去官网查阅。

        为了保证axios在DOM加载完成、组件挂载完成后进行请求，所以可以使用生命周期钩子onMounted来保证正常流程的进行。

<script setup>

import axios from 'axios'
import {onMounted} from 'vue'

const str = ref("")
onMounted(() => {
  axios.get("http://localhost:8080/get").then((response) => {
    str.value = response.data)
       .catch((error) => {
            console.error("请求失败:", error);
        })
})
</script>

        如果axios获取数据成功，那么响应式对象str的值会被设为hello world。

        在template中进行渲染：

<template>
    <div>{{str}}</div>
</template>

        运行npm run dev后，页面上会渲染出Hello World，完成了初步的数据传递。 

 样例二：前端填写数据并从后端调取相应数据

        生活中有很多这样的情景：进入了一个购物app，你填写了你想要的商品的名称，很多的相关信息便出现在眼前。简单来说，在前端输入的信息被后端获取，后端根据该信息在数据库中进行数据筛选，并把正确的信息返回到前端。

        这里用一个简单的例子来解释一下前后端之前信息是如何传递的。

        还是使用get请求，前端填入数据后，向后端发起get请求，后端根据url提取出相关参数，并根据该参数返回相应的data数据，前端依旧是通过axios进行数据获取，至此完成前后端的信息传递。

        上代码(简单起见后端写的假死数据，没有从数据库调数据)：

前端：

<script setup>
import {ref} from 'vue'
import axios from 'axios'
const index = ref(0)
const tableData = ref([])
const data = async () => {
  try {
    const response = await axios.get(`http://localhost:8080/get?index=${index.value}`);
    tableData.value = [{
      "0" : response.data[0],
      "1" : response.data[1],
      "2" : response.data[2],
      "3": response.data[3]
    }]
  }catch(error) {
  }
}
</script>
<template>
<div>
    <input type="number" id="index" placeholder="index" v-model="index" />
    <button @click="data">Submit</button>
  </div>
  <div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="0" label="Index"></el-table-column>
    <el-table-column prop="1" label="Name"></el-table-column>
    <el-table-column prop="2" label="Age"></el-table-column>
    <el-table-column prop="3" label="Role"></el-table-column>
  </el-table>
  </div>
</template>

后端：

import org.springframework.web.bind.annotation.*;

@RestController
@CrossOrigin
public class DemoController {
    private static final Object[][] DATA = {
            {1, "John", 25, "Engineer"},
            {2, "Alice", 30, "Designer"},
            {3, "Bob", 28, "Manager"},
            {4, "Charlie", 22, "Intern"}
    };

    @GetMapping("/get")
    public Object get(@RequestParam int index) {
         return DATA[index];
    }

}

填入0~3(一共只有四组数据)中的一个数字并点击submit后，前端会显示出后端相应行的数据。