8 django 里面的API

1.什么是API？

2.在djang里面写API

　　　　

　　　　

　　　　

 　　　　

3.API实战效果

　　　　

　　1.移动端的网页

 　　　　

4.restframework :老师方法

　　（0）安装

Django REST framework 是一个强大且灵活的工具包，用以构建Web APIs。 

pip install djangorestframework
pip install markdown
pip install django-filter

　　　　

　　（1）model--->字典

　　构造序列化器  model---> 字典

 　　

from website.models import Video
from rest_framework import serializers  # 序列化器
from rest_framework.response import Response  # 构建json
from rest_framework.decorators import api_view

class VideoSerializer(serializers.ModelSerializer):
    """构造序列化器"""
    class Meta:
        model = Video
        fields = '__all__'
        # fields = ('title','context',)

 　　（2）字典--->json

 

　　　　编写一个视图.

　　返回json的视图

from website.models import Video
from rest_framework import serializers  # 序列化器
from rest_framework.response import Response  # 构建json
from rest_framework.decorators import api_view

class VideoSerializer(serializers.ModelSerializer):
    """构造序列化器"""
    class Meta:
        model = Video
        fields = '__all__'
        # fields = ('title','context',)

@api_view(['GET'])
def video_list(request):
    """返回json的视图"""
    video_list = Video.objects.all()
    serializers = VideoSerializer(video_list, many=True)
    return Response(serializers.data)
    

　　分配url

from django.conf.urls import url, include
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static
from website.views import listing,detail_login, detail_register, detail,detail_voter_post
from django.contrib.auth.views import logout

from website.api import video_list



urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^listing/$', listing, name='listing'),
    url(r'^listing/(?P<cate>[A-Za-z]+)$', listing, name='listing'),  # cate变量
    url(r'^login/$', detail_login, name='detail_login'),
    url(r'^register/$', detail_register, name='detail_register'),
    url(r'^logout/$', logout, {'next_page':'/listing'}, name='logout'),
    url(r'^detail/(?P<page_num>d+)$', detail, name='detail'),
    url(r'^detail/vote/(?P<page_num>d+)$', detail_voter_post, name='detail_voter_post'),
    
    url(r'^api/video', video_list),
]

 　　　　

 　　　　

　　　　（3）出现的解决不了的debug

　　　　

5.博客方法

 http://www.cnblogs.com/venicid/p/8228220.html#_label2

　　　　

　　　　　　

6.移动端

　　1. V层

 

#tenminswebsitemobile_view.py

from django.shortcuts import render

def mobile_video_list(request):
    return render(request,'mobile_list.html',{})

　　　　url

...
from website.api import video_list
from website.mobile_view import mobile_video_list


urlpatterns = [
    ...
    ...

    url(r'^api/video', video_list),
    url(r'^m/video', mobile_video_list),

]

　　2. T层

    　　 2.1标签之间 django不负责渲染页面

 　　

    {% verbatim %}


    {% endverbatim %}

　　　　2.2 渲染

　　　　2.3 script

        <script>
            vm = new Vue({
                el:"#app",
                data:{
                    showMenu:false,
                    chozen:'all',
                    vids:[]
                },
                methods:{
                    getData:function () {
                        var self = this;
                        reqwest({
                            url:'http://127.0.0.1:8000/api/video/',
                            // 这里请换成自己的端口，一般是8000
                            type:'json',
                            success:function (resp) {
                                self.vids = resp
                            },

                        })
                    }
                },
                computed:{
                    filtered:function () {
                        var self = this
                        if (self.chozen == 'editors_choice') {
                            var newList =self.vids.filter(function (vid) {
                                    return vid.editors_choice == true
                                })
                            return newList
                        } else {
                            return self.vids
                        }

                    }
                },
                transitions:{
                    menu:{
                        enterClass:'bounceInDown',
                        leaveClass:'bounceOutUp'
                    }
                },

                ready:function () {
                    this.getData()
                }
            })
        </script>

　　　　T层代码

<!DOCTYPE html>
{% load staticfiles %}

<html>


    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/reqwest/2.0.5/reqwest.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.js"></script>
        <style media="screen">
            .ui.fluid.card {
                margin: 5px 0;
                border-radius:none;
                box-shadow: none
            }

            #button {
                z-index: 999;
                position: fixed;left:80%;top:90%;
            }
            .ui.fixed.something.menu {
                position: fixed;top:50px;
            }
        </style>

    </head>

    {% verbatim %}

    <body id="app">
        <div v-show="showMenu" transition="menu" class="ui animated fixed fluid vertical something menu " >
            <a v-on:click="chozen = 'all'" class="item">All</a>
            <a class="item">Popular</a>
            <a v-on:click="chozen = 'editors_choice' " class="item">Editor</a>
        </div>

        <div class="ui fixed inverted red borderless menu">
            <div v-on:click="showMenu = !showMenu" class="header item">
                <i class="icon tiny ellipsis vertical"></i>
                10MINs
            </div>

            <div class="right menu">
                <div class="item">
                    <button class="ui tiny inverted circular button" type="button" name="">Login</button>
                </div>
            </div>
        </div>


        <!-- v-if="!opps" -->
        <div class="ui cards"  >

            <div v-for="vid in filtered" class="ui fluid card" >
                <div class="content">
                    <h4 class="header"> {{ vid.title }} </h4>
                    <div class="left floated meta">{{ vid.content|limitBy 30 }}</div>
                </div>
                <div class="image">
                    <img :src="vid.url_image" style="height:200px;object-fit: cover;">
                </div>
                <div class="extra content">
                    <span class="right floated">
                      <i class="heart outline like icon"></i>

                    </span>
                    <i class="comment outline icon"></i> 3
                </div>

                <div class="ui divider"></div>
            </div>


        </div>

        <button id="button" class="btn-floating btn-large red" type="button" name="button">
            <i class="icon small pencil"></i>
        </button>

        <script>
            vm = new Vue({
                el:"#app",
                data:{
                    showMenu:false,
                    chozen:'all',
                    vids:[]
                },
                methods:{
                    getData:function () {
                        var self = this;
                        reqwest({
                            url:'http://127.0.0.1:8000/api/video/',
                            // 这里请换成自己的端口，一般是8000
                            type:'json',
                            success:function (resp) {
                                self.vids = resp
                            },

                        })
                    }
                },
                computed:{
                    filtered:function () {
                        var self = this
                        if (self.chozen == 'editors_choice') {
                            var newList =self.vids.filter(function (vid) {
                                    return vid.editors_choice == true
                                })
                            return newList
                        } else {
                            return self.vids
                        }

                    }
                },
                transitions:{
                    menu:{
                        enterClass:'bounceInDown',
                        leaveClass:'bounceOutUp'
                    }
                },

                ready:function () {
                    this.getData()
                }
            })
        </script>
    </body>
    {% endverbatim %}

</html>

　　3 效果

 　　4. 数据的来源

 　　

 　　

　　5. 数据不需要后台加载了，