vue界面向后端数据库发送axios请求添加表单数据的代码怎么写

假设你使用的是Vue.js和Axios库，以下是一个简单的示例代码，向后端发送POST请求添加表单数据：

<template>
  <div>
    <form @submit.prevent="addData">
      <div>
        <label for="name">Name:</label>
        <input type="text" id="name" v-model="name" />
      </div>
      <div>
        <label for="age">Age:</label>
        <input type="number" id="age" v-model="age" />
      </div>
      <button type="submit">Add Data</button>
    </form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      name: "",
      age: null,
    };
  },
  methods: {
    addData() {
      axios
        .post("/api/data", {
          name: this.name,
          age: this.age,
        })
        .then((response) => {
          console.log(response.data);
          // 成功添加数据，做一些处理
        })
        .catch((error) => {
          console.error(error);
          // 添加数据失败，做一些处理
        });
    },
  },
};
</script>

在这个示例中，我们创建了一个包含两个输入字段的表单，分别是“Name”和“Age”。当用户点击提交按钮时，`addData`方法将会被调用。该方法使用Axios库向后端发送一个POST请求，将表单数据作为JSON对象发送到`/api/data`URL。如果请求成功，我们可以在控制台中打印响应数据，并执行一些处理代码。如果请求失败，我们也可以在控制台中打印错误并执行一些处理代码。