<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接口。成功提交后会弹出提示框，表示操作成功。如果请求失败，则会弹出提示框表示操作失败，并提供用户检查输入的机会。