15 基于Vue + 数据组装 + axios请求接口 实现图书信息提交功能实战

<template>
  <div class="submit-book">
    <h2>提交新书</h2>
    <form @submit.prevent="submitBook">
      <label for="title">书名:</label>
      <input type="text" id="title" v-model="book.title">
      <label for="author">作者:</label>
      <input type="text" id="author" v-model="book.author">
      <label for="year">出版年份:</label>
      <input type="number" id="year" v-model.number="book.year">
      <button type="submit">提交</button>
    </form>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      book: {
        title: '',
        author: '',
        year: null
      }
    };
  },
  methods: {
    async submitBook() {
      try {
        const response = await axios.post('/api/books', this.book);
        alert('提交成功！');
        // 可以选择导航到另一个路由或者重置表单
        // this.$router.push('/books');
        // 或者
        // this.book = { title: '', author: '', year: null };
      } catch (error) {
        alert('提交失败，请检查输入是否正确。');
      }
    }
  }
};
</script>

这段代码实现了一个简单的表单提交功能，用户可以输入书籍的标题、作者和出版年份，点击提交后会发送一个POST请求到服务器的/api/books接口。成功提交后会弹出提示框，表示操作成功。如果请求失败，则会弹出提示框表示操作失败，并提供用户检查输入的机会。