vue项目中form data形式传参方式

在 Vue 项目中，直接利用 form 表单的方式进行数据传递是非常常见的。在 Vue 中，我们可以利用 axios 与后端进行通信，并将 form data 格式的数据进行传递。

以下是利用 axios 技术实现的参数传递方式示例：

<template>
  <form @submit.prevent="submitForm">
    <label>用户名：</label>
    <input type="text" v-model="username" />
    <label>密码：</label>
    <input type="password" v-model="password" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    submitForm() {
      const formData = new FormData();
      formData.append("username", this.username);
      formData.append("password", this.password);

      axios
        .post("/api/login", formData)
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

在这个示例中，我们定义了两个 input 输入框，分别用于输入用户名和密码。当用户点击提交按钮时，提交表单数据到后端。这里利用了 FormData 的方式进行参数的传递，把多个参数通过 append 方法，转换成一个 formData 对象，通过 post 方法来将这个对象传递到后端。在后端的接收方，我们可以通过解析 formData，获取到每一个参数的值，实现和普通 form 的处理逻辑相同。

另外还有一种方式是直接使用 URLSearchParams 来进行参数的传递，具体代码如下所示：

<template>
  <form @submit.prevent="submitForm">
    <label>用户名：</label>
    <input type="text" v-model="username" />
    <label>密码：</label>
    <input type="password" v-model="password" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    submitForm() {
      const params = new URLSearchParams();
      params.append("username", this.username);
      params.append("password", this.password);

      axios
        .post("/api/login", params)
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

在这个示例中，我们同样使用了两个 input 输入框，分别用于输入用户名和密码。当用户点击提交按钮时，提交表单数据到后端。这里利用了 URLSearchParams 的方式进行参数的传递，把多个参数通过 append 方法，转换成一个 params 对象，通过 post 方法来将这个对象传递到后端。在后端的接收方，我们可以获取到每一个参数的值，实现和普通 form 的处理逻辑相同。