本篇，我们利用每本书的 api，给每本书创建一个详情页。
1.编写 views
在 views.py 增加一个 detail_book 方法，用来展示某本书的详情页：
def detail_book(request, id):
return render(request, 'detail_book.html', {})
2.分配 url
在 url.py 分配一个 url，用于展示某本书详情页：
…………
# 引入刚创建的 detail_book
from library.views import book_list, try_reqwest, detail_book
urlpatterns = [
…………
url(r'^book/(?P<id>\d+)$', detail_book), # 某本书的详细信息页面
…………
]
3.编写前端
首先，改写 book_list.html，让书目成为一个超链接：
<!-- 展示书目内容 -->
<div v-for='book in books'>
<!-- 跳转到 xxx/book/某书id 的超链接 -->
<a href="book/{{ book.id }}">
<h3>{{ book.title }}</h3>
</a>
<hr>
</div>
然后编写书的详情页，detail_book.html：
<!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>
<p>书名：{{ book.title }}</p>
<p>作者：{{ book.author }}</p>
<p>简介：{{ book.summary }}</p>
<script>
var vm = new Vue({
el:"#app",
data:{
// 通过url获取书目的id
book_id:(window.location.href).split('/')[((window.location.href).split('/')).length - 1],
book:[]
},
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;
}
})
}
},
ready:function () {
this.getData()
}
})
</script>
</body>
{% endverbatim %}
</html>
3.测试
book_list 页面如下：
详情页 detail_book 页面如下：
