实现vue前端从java后端接口查询数据教程

一、整体流程

首先我们来看一下整件事情的流程，可以用以下表格展示步骤：

步骤 描述
1 前端页面发送请求到后端接口
2 后端接口接收到请求，查询数据库并返回数据
3 前端页面接收到数据并展示在页面上

二、具体步骤及代码实现

1. 前端页面发送请求到后端接口

在前端页面中，我们需要使用axios来发送请求到后端接口。下面是发送请求的代码：

```javascript
// 引入axios
import axios from 'axios';

// 发送GET请求到后端接口
axios.get('http://localhost:8080/api/data')
  .then(response => {
    console.log(response.data); // 打印后端返回的数据
  })
  .catch(error => {
    console.error(error);
  });


### 2. 后端接口接收到请求，查询数据库并返回数据

在后端接口中，我们需要使用Spring Boot来接收前端发送的请求，并查询数据库返回数据。下面是后端接口的代码：

```markdown
```java
// 引入Spring Boot框架
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class DataController {

  @GetMapping("/api/data")
  public String getData() {
    // 查询数据库获取数据
    String data = "Hello, World!";
    return data;
  }
}


### 3. 前端页面接收到数据并展示在页面上

在前端页面中，我们可以在axios的then方法中获取后端返回的数据，并展示在页面上。下面是展示数据的代码：

```markdown
```javascript
axios.get('http://localhost:8080/api/data')
  .then(response => {
    document.getElementById('data').innerText = response.data; // 展示数据在页面上
  })
  .catch(error => {
    console.error(error);
  });


## 三、类图

```mermaid
classDiagram
    class axios {
        <<library>>
        + get(url)
    }
    class DataController {
        - String data
        + getData()
    }
    axios --> DataController

结尾

通过以上步骤，你可以实现vue前端从java后端接口查询数据的功能了。希望这篇文章能够帮助到你，加油！