vue前端和后端怎么连接起来

// 前端 (Vue.js)
<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <p v-if="data">{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await fetch('http://localhost:3000/api/data');
        const result = await response.json();
        this.data = result.message;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }
  }
};
</script>

// 后端 (Node.js + Express)
const express = require('express');
const app = express();

app.use(express.json());

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from the backend!' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

解释说明

1. 前端部分 (Vue.js):

   • 使用 fetch API 发送 HTTP 请求到后端服务器。
   • 当用户点击按钮时，调用 fetchData 方法，该方法会发送一个 GET 请求到 /api/data 路由。
   • 如果请求成功，将返回的数据存储在组件的 data 属性中，并在模板中显示。

2. 后端部分 (Node.js + Express):

   • 创建一个简单的 Express 应用程序。
   • 定义一个 GET 路由 /api/data，当收到请求时，返回一个 JSON 响应 { message: 'Hello from the backend!' }。
   • 启动服务器并监听 3000 端口。

通过这种方式，前端 Vue.js 应用程序可以与后端 Node.js 服务器进行通信。