vue.js与django-rest-framework进行数据的交互及Ajax和axios异步请求django后端API接口

1. vue的引用源<script src="https://cdn.jsdelivr.net/npm/vue"></script>2.django 和vue语法冲突处理需要增加一个标签{% verbatim %}<body>{% verbatim %}<div id="app">{{ text }} <br><br><

专职

1061人浏览 · 2020-12-30 15:47:50

专职 · 2020-12-30 15:47:50 发布

1. vue的引用源

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. django 和vue语法冲突处理需要增加一个标签{% verbatim %}

<body>
{% verbatim %}
<div id="app">
    {{ text }} <br><br>
    <button v-on:click="create_server">插入一台服务器</button>
</div>
{% endverbatim %}
</body>

3. django的数据传递给vue

python中的列表或字典可以直接转换成json数据，然后在传递给vue即可

（1）django服务器端代码：

def index(request):
    list = [11, 22, 33]
    dict = {"name": "mayanan", "age": 29}
    json_info = {
        "list": json.dumps(list),
        "dict": json.dumps(dict)
    }
    return render(request, "assets/index.html", json_info)

（2）vue前端代码

<script>
    var list = {{ list | safe }}
    var obj = {{ obj | safe }}
    console.log(list,obj)
</script>

4. vue的数据传递给django，ajax方法

（1）get请求，获取数据

使用全局对象方式 Vue.http 或者在一个 Vue 实例的内部使用 this.$http来发起 HTTP 请求

Vue 要实现异步加载需要使用到 vue-resource 库

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

vue代码方法1：

<script>
    Vue.http.get("/assets/servers/?page=8").
    then(function (response) {
        console.log(response.data);
    })
</script>

vue代码方法2：

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            text: "",
        },
        mounted: function () {
            this.$http.get("/assets/servers/?page=8").then(function (response) {
                console.log(response.data);
            });
        }
    })
</script>

因为我们的django后台已经通过django-rest-framework实现了该接口，所以console打印结果如下：

（2）post请求，新增数据

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            text: "",
        },
        mounted: function () {
            this.$http.post("/assets/servers/?page=8", {"server_name": "联想服务器", "status": "offline"}).
            then(function (response) {
                console.log(response.data);
            });
        }
    })
</script>

效果如图：

注意：因为我们后台写的是restfulAPI接口，所以post请求没有csrf_token的问题，所以也post请求cookie也不需要携带csrftoken。

5. vue的数据传递给django，axios方法

（1）get请求，获取数据

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    axios.get("/assets/servers/?page=8").then(function (response) {
        console.log(response.data);
    });
</script>

（2）post请求，新增数据

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    axios.post("/assets/servers/?page=8", {"server_name": "惠普服务器", "status": "normal"}).then(function (response) {
        console.log(response.data);
    });
</script>

注意：因为我们后台写的是restfulAPI接口，所以post请求没有csrf_token的问题，所以也post请求cookie也不需要携带csrftoken。

至于其它针对详情页的方法如：get、put、delete，只需要改写axios.后面的方法名即可实现，例如：删除id=18的记录，方法改成delete即可，字典中的参数可以删掉，

但是如果是put更新方法，必须加字典中的参数。

<script>
    axios.delete("/assets/servers/18/", {"id": 18, "server_name": "惠普服务器18", "status": "abnormal"}).then(function (response) {
        console.log(response.data);
    });
</script>