Axios-vue简单使用

注意：导入静态文件

urls.py

# 数据来源在jquery中ajax中调用
path("api-json/", ApiView.as_view(), name='api-json'),
 path('user-jquery/', 
#仅仅返回一个页面
TemplateView.as_view(template_name="api/jquery.html"), name='jQuery'),

HTML

{% extends "导航条.html" %}

{% block content %}
<div id="app">
    {% verbatim %}
    <button id="btn" class="btn btn-success">获取数据</button>
    <h2 id="title"></h2>
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>id</th>
                <th>主机名</th>
                <th>内核</th>
                <th>物理 CPU 颗数</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in  servers">
                <td>{{ item.id }}</td>
                <td>{{ item.hostname }}</td>
                <td>{{ item.kernel }}</td>
                <td>{{ item.physical_count }}</td>
            </tr>
        </tbody>
    </table>
    {% endverbatim %}
</div>

{% endblock %}

{% block script %}

<script>
    var app = new new Vue({
        el: "#app",
        data: {
            servers: ' '
        },
        mounted() {
            axios.get(
                "{% url 'api:api-json' %}",
            ).then(
                res => {
                    this.servers = res.data;
                });
        },
    })
</script>

{% endblock %}