axios.defaults.baseURL = 'http://localhost:8080/book/'; var vm = new Vue({ el: '#app', data: { id: '', bookName:'', flag: false, submitFlag: false, books: [] }, methods:{ handle: async function () { //编辑 var book = { id: this.id, bookName: this.bookName }; await axios.put(book.id, book); await this.queryBooks(); this.id = ''; this.bookName = ''; this.flag = false; }, //编辑处理 toEdit: async function (id) { var response = await axios.get(id); this.id = response.data.id; this.bookName = response.data.bookName; this.flag = true; }, deleteBook: async function (id) { }, queryBooks: async function () { var response = await axios.get(); this.books = response.data; } }, computed:{ total: function () { return this.books.length; } }, watch: { name: function (val) { console.log(val); } }, mounted:function () { this.queryBooks(); } });请补全代码通过axois远程交互操作图书信息。
时间: 2024-03-26 13:37:31 浏览: 59
以下是补全代码:
```
axios.defaults.baseURL = 'http://localhost:8080/book/';
var vm = new Vue({
el: '#app',
data: {
id: '',
bookName:'',
flag: false,
submitFlag: false,
books: []
},
methods:{
handle: async function () {
//编辑
var book = {
id: this.id,
bookName: this.bookName
};
await axios.put(book.id, book);
await this.queryBooks();
this.id = '';
this.bookName = '';
this.flag = false;
},
//编辑处理
toEdit: async function (id) {
var response = await axios.get(id);
this.id = response.data.id;
this.bookName = response.data.bookName;
this.flag = true;
},
deleteBook: async function (id) {
await axios.delete(id);
await this.queryBooks();
},
queryBooks: async function () {
var response = await axios.get();
this.books = response.data;
}
},
computed:{
total: function () {
return this.books.length;
}
},
watch: {
name: function (val) {
console.log(val);
}
},
mounted:function () {
this.queryBooks();
}
});
```
以上代码通过使用axios库实现了查询、编辑、删除图书的功能。其中,axios库用于向服务器发送请求,获取图书信息,同时也可以用于更新和删除图书。此外,该代码中使用了Vue.js框架来实现数据的双向绑定,以及实现响应式的页面更新。
阅读全文