[py]django api测试

最新推荐文章于 2024-07-03 14:59:17 发布

txjjjjj

最新推荐文章于 2024-07-03 14:59:17 发布

阅读量979

点赞数

本文链接：https://blog.csdn.net/iiiiher/article/details/77435615

版权

写django api

django startproject learapi
django 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 Article
from rest_framework import serializers
from rest_framework.response import Response
from 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_list
urlpatterns = [
    ...
    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>

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

txjjjjj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[py]django api测试

写django apidjango startproject learapidjango startapp app01设置settingINSTALLED_APPS = [... 'app01', 'rest_framework',]写models.pyclass Article(models.Model): title = models.CharField(max_l
复制链接

扫一扫