vue数据请求

1.vue.js 是库，不是框架；
2.vue.js 下载过来直接在html中引入就好了，并不一定要npm install vue；
3.vue.js 有路由的 叫vue-route.js，vue.js也有数据请求 叫vue-resource.js；
4.vue本身不支持发送AJAX请求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件实现；
5.axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护；
6.参考：GitHub上搜索axios，查看API文档；
7.发送跨域请求：axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库，也可使用使用vue-resource发送跨域请求。
在models.py中：

class Menu(models.Model):
    id = models.AutoField(primary_key=True)  # 可省略这一行
    parentid = models.IntegerField()
    name = models.CharField(max_length=12)
    url = models.CharField(max_length=128, null=True, blank=True)
    type = models.CharField(max_length=20)

    def __unicode__(self):
        return self.name

在admin.py中：

from django.contrib import admin
from TestModel.models import  Menu

class MenuAdmin(admin.ModelAdmin):
    list_display = ('id', 'parentid', 'name', 'url', 'type')  # list
    search_fields = ('name',)
    fields = ('parentid', 'name', 'url', 'type')

admin.site.register(Menu, MenuAdmin)

在项目根目录下执行：

python3 manage.py makemigrations TestModel  # 让 Django 知道我们在我们的模型有一些变更
python3 manage.py migrate TestModel   # 创建表结构

在admin管理中添加数据：

在weixin.html中：

<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/vue-resource.js"></script>

<div id="menu">
    <a href="javascript:;" v-on:click="loadData()" ><span>加载数据</span></a>
    listData:{{listData}}
</div>
<script>
    var wxmenu = new Vue({
    el: '#menu',
    data: {
        list: [],
    },
    methods: {
        loadData:function(){
            console.log("loadData");
            axios.get('http://localhost:8000/weixin/get')
            .then(function(response){
                console.log(response);
            })
            .catch(function(err){
                console.log(err);
            });
        }
    }
});
</script>

在urls.py中：

from django.conf.urls import url
from django.contrib import admin
from . import  weixin

urlpatterns = [
    url(r'^admin', admin.site.urls),
    url(r'^weixin$', weixin.weixin),
    url(r'^weixin/get$', weixin.get),
]

在weixin.py中：

# -*- coding: utf-8 -*-

from django.http import HttpResponse
from django.shortcuts import render
from TestModel.models import Menu
 
def get(request):
    # 通过objects这个模型管理器的all()获得所有数据行，相当于SQL中的SELECT * FROM
    list = Menu.objects.all()
    print("list:", list)
    return HttpResponse(list)

打印出来的数据不是json数据：

<QuerySet [<Menu: Menu object (1)>, <Menu: Menu object (2)>, <Menu: Menu object (3)>, <Menu: Menu object (4)>, <Menu: Menu object (5)>]>

在HttpResponse上面添加：

import json
from django.core import serializers

def get(request):
    data = serializers.serialize("json", Menu.objects.all())
    print("data:", data)
    return HttpResponse(data)

打印出来的数据：

[{"model": "TestModel.menu", "pk": 1, "fields": {"parentid": 0, "name": "\u8d2d\u7269\u8f66", "url": null, "type": "click"}}, {"model": "TestModel.menu", "pk": 2, "fields": {"parentid": 0, "name": "\u5927\u724c\u5962\u54c1\u7279\u5356", "url": "http://mini.eastday.com/a/161223192744776-2.html", "type": "view"}}, {"model": "TestModel.menu", "pk": 3, "fields": {"parentid": 1, "name": "\u5546\u54c1A", "url": "http://mini.eastday.com/a/161223192744776-2.html", "type": "view"}}, {"model": "TestModel.menu", "pk": 4, "fields": {"parentid": 1, "name": "\u5546\u54c1B", "url": "http://mini.eastday.com/a/161223192744776-2.html", "type": "view"}}, {"model": "TestModel.menu", "pk": 5, "fields": {"parentid": 2, "name": "\u7279\u53561", "url": null, "type": "click"}}]

关于数据请求的参考资料:
https://segmentfault.com/q/1010000006170385/a-1020000006170658
https://www.cnblogs.com/xuanan/p/7847233.html
https://www.jianshu.com/p/df464b26ae58
https://blog.csdn.net/kuangshp128/article/details/77417652

关于json数据解析的参考资料：
https://blog.csdn.net/lanyang123456/article/details/75261105
https://blog.csdn.net/teavamc/article/details/77777301