使用Vue开发中遇到的前后端数据传递问题

<template>
  <div>
    <button @click="getData">获取数据</button>
    <div v-for="item in data" :key="item.id">{{ item.name }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: []
    }
  },
  methods: {
    async getData() {
      try {
        const response = await this.$http.get('/api/data');
        this.data = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
}
</script>

app.get('/api/data', (req, res) => {
  const data = [
    { id: 1, name: '数据1' },
    { id: 2, name: '数据2' },
    { id: 3, name: '数据3' }
  ];
  res.json(data);
});

// 设置允许跨域访问的域名
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 定义API接口
app.get('/api/data', (req, res) => {
  const data = [
    { id: 1, name: '数据1' },
    { id: 2, name: '数据2' },
    { id: 3, name: '数据3' }
  ];
  res.json(data);
});

<template>
  <div>
    <input type="text" v-model="name">
    <button @click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  methods: {
    async submitForm() {
      try {
        const response = await this.$http.post('/api/submit', { name: this.name });
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    }
  }
}
</script>

app.post('/api/submit', (req, res) => {
  const name = req.body.name;
  // 处理表单数据
  res.json({ message: '表单数据已提交' });
});