现在我们在 detail_book 详情页增加修改和删除数据的功能：
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<title></title>
<script type="text/javascript" src="{% static "js/vue1.js" %}"></script>
<script type="text/javascript" src="{% static "js/reqwest.js" %}"></script>
</head>
{% verbatim %}
<body id=app>
<h3>图书详情：</h3>
<p>书名：{{ book.title }}</p>
<p>作者：{{ book.author }}</p>
<p>简介：{{ book.summary }}</p>
<hr>
<h3>修改信息：</h3>
<form>
<input v-model="books_form.title" type="text" placeholder="标题">
<input v-model="books_form.author" type="text" placeholder="作者">
<input v-model="books_form.summary" type="text" placeholder="简介">
</form>
<br>
<button v-on:click="reviseData">修改</button>
<button v-on:click="deleteData">删除</button>
<script>
var vm = new Vue({
el:"#app",
data:{
// 通过url获取书目的id
book_id:(window.location.href).split('/')[((window.location.href).split('/')).length - 1],
book:[],
// 用于修改数据的变量，接收form的数据
books_form:{
title: '',
author: '',
summary: '',
}
},
methods:{
getData:function() {
var self = this;
reqwest({
// 通过id，请求具体某本书的api，获取该书的信息
url:'http://127.0.0.1:8000/api/book/' + self.book_id,
type:'json',
method:"get",
success:function (resp) {
self.book = resp;
}
})
},
// 修改数据
reviseData:function() {
var self = this;
reqwest({
url:'http://127.0.0.1:8000/api/revise_book/' + self.book_id,
type:'json',
method:"put",
data: {
title: self.books_form.title,
author: self.books_form.author,
summary: self.books_form.summary,
},
//console.log(url),
success:function (resp) {
self.getData()
}
})
},
// 删除数据
deleteData:function() {
var self = this;
reqwest({
url:'http://127.0.0.1:8000/api/revise_book/' + self.book_id,
type:'json',
method:"delete",
success:function(resp) {
// 删除数据后页面跳转到book_list页
window.location.href="http://127.0.0.1:8000/book_list";
}
})
}
},
ready:function () {
this.getData();
}
});
</script>
</body>
{% endverbatim %}
</html>
页面如下：
