前后端分离框架vue3+laravel，点击一次新增确同时添加了四条数据

Question

我有一个vue3+laravel框架的前后端分离框架，前端采用vue3+design，现在我将这个项目部署到服务器并映射到公网上，在列表页新增数据时，调用了两个一模一样的路由，一个时预检，一个是正常执行操作的路由，我在新增时，点击了一次，但数据库同时多了4条数据，是什么原因导致的，该怎么解决

```html
 const handleDelete = async (record: PolicyRecord) => {
    try {
      await deletePolicy(record.id.toString());
      Message.success('删除成功');
      await fetchData(); // 刷新数据
    } catch (err) {
      Message.error('删除失败');
    }
  };

```

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

问题解答

你遇到了一个问题，在点击新增数据时，预检路由和正常路由同时被调用，导致新增了四条数据。

可能的原因是，你的预检路由和正常路由都在处理新增数据的请求，导致数据被重复添加。

解决方案：

1. 在预检路由中，使用 event.preventDefault() 方法阻止默认行为，避免正常路由被调用。

axios.post('/api/data', data).then(response => {
  // 预检成功，继续执行
  event.preventDefault();
  // ...
}).catch(error => {
  // 预检失败，显示错误信息
  console.error(error);
});

1. 在正常路由中，使用 return 语句返回数据，避免继续执行后续代码。

axios.post('/api/data', data).then(response => {
  // 新增数据成功，返回数据
  return response.data;
}).catch(error => {
  // 新增数据失败，显示错误信息
  console.error(error);
});

1. 在 Vue 3 中，你可以使用 async/await 语句来处理异步请求，避免使用回调函数。

async addData() {
  try {
    const response = await axios.post('/api/data', data);
    // 新增数据成功，返回数据
    return response.data;
  } catch (error) {
    // 新增数据失败，显示错误信息
    console.error(error);
  }
}

1. 在 Laravel 中，你可以使用 return 语句返回数据，避免继续执行后续代码。

public function store(Request $request)
{
  // 新增数据成功，返回数据
  return response()->json(['message' => '数据新增成功']);
}

这些解决方案可以帮助你解决问题，避免新增数据时同时添加四条数据。