Vue表单数据交互提交演示教程

介绍

在Vue应用程序中，收集表单数据是常见的任务。本教程将介绍如何在Vue中收集表单数据，并将其提交到后端服务器处理。我们将涵盖以下几个方面：

• 表单绑定
• 收集和验证表单数据
• 发送表单数据到后端
• 处理后端响应

表单绑定

对于表单数据收集和验证，Vue提供了一种简单的方式：使用“v-model”指令将表单元素绑定到Vue实例的数据属性。如下所示：

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    submitForm() {
      // ...
    }
  }
};
</script>

在上面的代码中，“v-model”指令将“username”和“password”文本框与Vue实例属性绑定。当用户输入数据后，Vue实例属性将被自动更新。

收集和验证表单数据

了解了如何将表单元素绑定到Vue组件属性后，我们可以使用这些属性来收集和验证表单数据。例如，我们有一个账户登陆的表单。 用户名必须输入，密码可以有，但是不能为空。在submitForm()函数中，我们可以验证用户名和密码是否为空。

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    submitForm() {
      if (!this.username || !this.password) {
        alert('用户名和密码不能为空！')
      } else {
        // 表单处理逻辑
      }
    }
  }
};
</script>

发送表单数据到后端

现在我们已经收集并验证了表单数据，我们需要向后端服务器发送表单数据。通过使用Vue Resource或axios等网络请求库，我们可以轻松地将表单数据发送到服务器上。

下面是使用axios向后端发送数据的示例：

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    submitForm() {
      if (!this.username || !this.password) {
        alert('用户名和密码不能为空！')
      } else {
        axios.post('/api/login', {
          username: this.username,
          password: this.password
        })
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
      }
    }
  }
};
</script>

上述代码演示了如何使用axios将表单数据提交到服务器上。当我们调用post()方法进行网络请求时，我们将表单数据作为一个对象传递给请求体。服务器将使用此请求体进行后续处理。

处理后端响应

最后，当服务器处理完表单数据后，它将返回一个响应。我们可以使用axios回调方法来处理这个响应。例如，我们可以将响应数据输出到控制台上。

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    submitForm() {
      if (!this.username || !this.password) {
        alert('用户名和密码不能为空！')
      } else {
        axios.post('/api/login', {
          username: this.username,
          password: this.password
        })
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
      }
    }
  }
};
</script>

在上面的代码中，我们在.then()回调方法中处理成功响应，将响应数据输出到控制台上。在.catch()回调方法中处理来自服务器的错误响应，并将错误输出到控制台上。

示例说明

下面是一个更完整的表单提交演示的示例：

<template>
  <div>
    <form>
      <label>姓名:</label>
      <input type="text" name="name" v-model="name">
      <label>电子邮件:</label>
      <input type="text" name="email" v-model="email">
      <label>密码:</label>
      <input type="password" name="password" v-model="password">
      <label>性别:</label>
      <select name="gender" v-model="gender">
        <option value="">选择性别</option>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      <button type="submit" @click.prevent="submitForm">注册</button> 
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      name: '',
      email: '',
      password: '',
      gender: ''
    };
  },
  methods: {
    submitForm() {
      if (!this.name || !this.email || !this.password || !this.gender) {
        alert('所有字段都必须填写！');
        return;
      }
      axios.post('/api/register', {
        name: this.name,
        email: this.email,
        password: this.password,
        gender: this.gender
      })
      .then((response) => {
        console.log(response);
        alert('注册成功！');
      })
      .catch((error) => {
        console.log(error);
        alert('注册失败！');
      });
    }
  }
};
</script>

上述代码演示了如何使用Vue发送表单数据到后端，并处理服务器返回的成功或错误响应。在本示例中，我们添加了一个选择列表，用户可以选择性别。我们还添加了一些疑似检查表单字段是否已完整填写。