reqwest.js 和 vue.js 结合（三）

本篇我们在 book_list 页增加一个添加书目的功能，后端的代码在前面已经完成，我们直接来完成前端部分：
<!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">
   
        <!-- 展示书目内容 -->
        <h3>书目信息：</h3>
        <div v-for='book in books'>
            <a href="book/{{ book.id }}">
                <p>{{ book.title }}</p>
            </a>
        </div>

        <!-- 添加书目 -->
        <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="sendData">添加</button>

        <script>
            var vm = new Vue({
                el:"#app",

                data: {
                    books:[],
                    // 用于添加书目的变量，接收form的数据
                    books_form:{
                        title: '',
                        author: '',
                        summary: '',
                    }
                        
                },

                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;
                            },
                        })
                    },
                    // 添加数据
                    sendData:function () {
                        var self = this;
                        reqwest({
                            url:'http://127.0.0.1:8000/api/book/',
                            method:'post',  // post方法发送数据
                            type:'json',
                            // 包装好前端输入的数据
                            data:{
                                title: self.books_form.title,
                                author: self.books_form.author,
                                summary: self.books_form.summary,
                            },
                            success:function (resp) {
                                // 添加完成后重新执行一次getData方法，展示新的数据
                                self.getData()
                            }
                        })
                    }
                },

                // 预执行，打开网页时自动执行getData方法
                ready:function () {
                    this.getData()
                }
            })
           
        </script>

    </body>
    {% endverbatim %}

</html>
页面如下：
Paste_Image.png
reqwest.js 和 vue.js 结合（三）

推荐阅读更多精彩内容
