reqwest.js 和 vue.js 结合(二)

96
SingleDiego
2016.12.27 11:34* 字数 131

本篇,我们利用每本书的 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 页面如下: