[py]django api测试

来源：互联网发布：成都多益网络面试通知编辑：程序博客网时间：2024/05/17 04:52

写django api

django startproject learapidjango startapp app01

设置setting

INSTALLED_APPS = [...    'app01',    'rest_framework',]

写models.py

class Article(models.Model):    title = models.CharField(max_length=20)    content = models.TextField()    def __str__(self):        return self.title

创建api.py

from app01.models import Articlefrom rest_framework import serializersfrom rest_framework.response import Responsefrom rest_framework.decorators import api_view# 先构造一个序列化器class ArticleSerializer(serializers.ModelSerializer):    class Meta:        model = Article        fields = '__all__'   # ("title","content",)## 获取文章--序列化--返回前端@api_view(['GET'])def article_list(request):    article_list = Article.objects.all()    serializer = ArticleSerializer(article_list,many=True) # many指返回多篇文章    return Response(serializer.data)

创建一个urls访问入口

from app01.api import article_listurlpatterns = [    ...    url(r'^api/article_list/', article_list),]

前端访问api

前端通过vue+reqwest插件自动请求api并处理展示到前端

{#<!DOCTYPE html>#}<html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>    <script src="http://apps.bdimg.com/libs/reqwest/1.1.0/reqwest.js"></script>    <script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script></head><body><h1>this is a test</h1>{% verbatim %}<div id="app">    <div v-for="comment in comments">        <h1><a href="#">{{ comment.title }}</a></h1>        <p >            {{ comment.content }}        <hr>        </p>    </div></div>{% endverbatim %}<script>    var vm = new Vue({        el: "#app",        // context        data: {            comments: [                // {name:"John Doe",said:"Great!",show:true},            ]        },        methods: {            getData: function () {                var self = this;                reqwest({                    url: "http://127.0.0.1:8010/api/article_list/",                    type: "json",                    method: "get",                    success: function (resp) {                        self.comments = resp.results                    }                })            }        },        {##}        {#    computed: {#}        {#        filteredList: function () {#}        {#            function userRuler(people) {#}        {#                return people.height > 100;#}        {#            }#}        {##}        {#            var newList = this.comments.filter(userRuler);#}        {#            return newList#}        {#        }#}        {#    },#}        ready: function () {            this.getData()        }    })</script></body></html>

这里存在一个跨域请求的问题

阅读全文

0 0