有了 api 之后，我们需要在前端从 api 中获取数据，用 reqwest.js 这个模块从 api 获取数据，再使用 vue.js 来渲染，在网页中展示数据。
1. 编辑 views
在 views.py 增加一个 book_list 方法，用来展示全部书目信息：
def book_list(request):
return render(request, 'book_list.html', {})
2. 编写前端
编辑 templates 中的 book_list.html，用 reqwest.js 从 api 获取数据，再使用 vue.js 来渲染成网页：
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<title>Book List</title>
<script type="text/javascript" src="{% static "js/vue1.js" %}"></script>
<script type="text/javascript" src="{% static "js/reqwest.js" %}"></script>
</head>
<!-- verbatim 标签，表示该标签内的内容不使用django渲染 -->
{% verbatim %}
<body id="app">
<!-- 展示书目内容 -->
<div v-for='book in books'>
<h3>{{ book.title }}</h3>
<p>{{ book.author }}</p>
<p>{{ book.summary }}</p>
<hr>
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
books:[]
},
methods: {
// 用reqwest从api中获取数据
getData:function () {
var self = this;
reqwest({
// 请求的网址，即上文中创建的api地址
url:'http://127.0.0.1:8000/api/book/',
// 获取数据的格式：json
type:'json',
// 请求的方法：get
method:"get",
// 请求成功后执行的方法
// 这里把数据保存到data的books中
success:function (resp) {
self.books = resp;
},
})
}
},
// 预执行，打开网页时自动执行getData方法
ready:function () {
this.getData()
}
})
</script>
</body>
{% endverbatim %}
</html>
3.测试
打开：http://127.0.0.1:8000/book_list ，网页如下：
