表单提交

前端（Vue 3 + 组合式 API）

<template>
  <form @submit.prevent="submitForm">
    <input v-model="form.username" type="text" placeholder="用户名" required>
    <input v-model="form.email" type="email" placeholder="邮箱" required>
    <button type="submit">提交</button>
  </form>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios'; // 需要安装：npm install axios

export default {
  setup() {
    const form = ref({ username: '', email: '' });
    
    const submitForm = async () => {
      try {
        // 发送请求
        const response = await axios.post('/api/submit', form.value);
        
        // 处理成功响应
        console.log('提交成功:', response.data);
        alert('提交成功！');
        form.value = { username: '', email: '' }; // 重置表单
      } catch (error) {
        // 处理错误
        console.error('提交失败:', error);
        alert('提交失败：' + (error.response?.data?.error || '服务器错误'));
      }
    };
    
    return { form, submitForm };
  }
};
</script>

后端（Node.js + Express）

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

// 处理表单提交
app.post('/api/submit', (req, res) => {
  const { username, email } = req.body;
  
  // 验证
  if (!username || !email) {
    return res.status(400).json({ error: '用户名和邮箱不能为空' });
  }
  
  // 模拟数据处理
  console.log('收到表单数据:', { username, email });
  
  // 返回成功响应
  res.json({ success: true, message: '提交成功' });
});

app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

关键点

1. 数据绑定：使用 ref 创建响应式表单数据
2. 表单提交：通过 @submit.prevent 阻止默认行为
3. 异步请求：使用 axios 发送 POST 请求
4. 错误处理：捕获异常并显示错误信息