Java接收外部数据后vue立刻显示

原创

mob64ca12e1c36d 2024-05-20 05:19:04 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e1c36d的原创作品，请联系作者获取转载授权，否则将追究法律责任

用Java接收外部数据后vue立刻显示

在Web开发中，经常会遇到需要通过后端Java程序接收外部数据后，前端Vue页面立刻显示这些数据的需求。这个过程涉及到前后端的数据传输和页面渲染，需要一定的技术和方法来实现。

流程图

flowchart TD
    A[外部数据] --> B(Java后端接收数据)
    B --> C(Vue前端显示数据)

Java后端接收外部数据

首先，我们需要在Java后端编写接收外部数据的接口。这可以通过Spring Boot来实现。假设我们有一个名为/api/data的接口用于接收数据：

@RestController
public class DataController {

    @PostMapping("/api/data")
    public ResponseEntity<?> receiveData(@RequestBody Map<String, Object> data) {
        // 处理接收到的数据
        System.out.println(data);
        return ResponseEntity.ok().build();
    }
}

Vue前端显示数据

接着，在Vue前端页面中，我们需要使用axios来向后端发送数据，并在页面中显示接收到的数据。假设我们有一个按钮，点击后发送数据并在页面上显示：

<template>
  <div>
    <button @click="sendData">发送数据</button>
    <div>{{ receivedData }}</div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      receivedData: '',
    };
  },
  methods: {
    async sendData() {
      try {
        const response = await axios.post('/api/data', { message: 'Hello' });
        console.log(response.data);
        this.receivedData = response.data.message;
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

在上面的示例中，当点击按钮后，前端会向后端发送数据{ message: 'Hello' }，并将后端返回的数据显示在页面上。