写个简单的vue前段与后端交互代码

好的，下面是一个简单的 Vue 前端与后端交互的代码示例：

前端代码：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="fetchData">获取数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await fetch("/api/data");
        const data = await response.json();
        this.message = data.message;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

这是一个简单的 Vue 单文件组件，包含一个显示消息和一个按钮的页面。当用户点击按钮时，前端会向后端发送一个 GET 请求，请求地址为 "/api/data"。后端应该提供一个能够响应该请求的接口，返回一个包含消息的 JSON 数据。

后端代码：

const express = require("express");
const app = express();

app.get("/api/data", (req, res) => {
  const data = {
    message: "Hello, World!"
  };
  res.json(data);
});

app.listen(3000, () => {
  console.log("Server listening on port 3000");
});

这是一个简单的 Express 应用程序，它创建了一个监听端口为 3000 的 HTTP 服务器。当接收到一个 GET 请求，路径为 "/api/data" 时，它会返回一个包含消息的 JSON 数据。

当用户在前端点击获取数据按钮时，前端会向后端发送一个 GET 请求，后端应该能够响应该请求，并返回包含消息的 JSON 数据，前端会将该消息显示在页面上。