Django Rest Framework+art-template实现文章异步加载


发布时间:2019-02-28 02:00    作者: Uncle Hui   已过去:1 年,7 月   阅读总量:1049 已被赞:25


我要实现的效果预览:

概念理解:

Django Rest Framework :

Django Rest Framework 是一个强大且灵活的工具包,用以构建Web API, Django REST Framework可以在Django的基础上迅速实现API,并且自身还带有WEB的测试页面,可以方便的测试自己的API。官网地址:https://www.django-rest-framework.org/

art-template:

javascript 模板引擎,语法精炼,可读性,可操作性强,国人开发,用于将内容拼接到显示页面

具体实现步骤:

第一步:项目环境里安装Django Rest Framework和注册

1.安装命令:

pip install djangorestframework

2.settings.py 注册:

INSTALLED_APPS = [
  ...
    'rest_framework',
]

第二步:

1.在需要使用这个功能的app下新建serializations.py(类似于forms.py表单验证功能一样)

2.serializations.py:

from rest_framework import serializers #导入这个类
from .models import Post,Tag #模型导入
from apps.blogauth.models import User #导入用户模型

#在下面的PostreadSerializer中,有外键字段需要显示为具体内容
#就需要单独再定义一个序列化处理,不然就只显示外键ID
#如 tag  就显示为1,不会是他具体的名字 django2.0
class TagSerializer(serializers.ModelSerializer):
    class Meta:
        model = Tag
        fields =('id','name')

#作者序列化(可以集中在一起序列化,也可以不听APP各自,再导入来使用)
class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields =('uid','username')

#创建一个类,并继承他的以模型创建序列化的类,好比我们继承表单验证的的forms.Modelform
class PostreadSerializer(serializers.ModelSerializer):
    tag = TagSerializer() #将Tag序列化给tag,这样拿到的‘tag’字段就单是一个ID, 也有具体内容
    author = UserSerializer()
    class Meta:
        model = Post #需要将那个模型序列化
        #需要提取的字段
        fields = ('uid', 'title', 'context', 'author', 'tag', 'put_in_time','up_to_date','img','vote')

第三步:views.py 里新建处理视图

1.导入序列化:

from .serializations import PostreadSerializer #导入做的序列化类

2.视图函数:

#处理数据序列化渲染的函数
def post_serializer(request,post_id):
    #需要一个Quer对象才能序列化所以用filter方法
    posts = Post.objects.filter(pk=post_id)
    #将获取的数据交给序列号处理
    serializer= PostreadSerializer(posts,many=True) #many=True 表示要将传进来的全部内容都序列号
    #通过data方法获取结果
    data = serializer.data
    data1=[]
    for i in data:
        data1.append(i['context'])#只需要文章内容,变量取出就可以了
    return restful.ok(data=data1)

说明:将json数据通过封装的restful返回给前端,具体封装代码前文有介绍

3.url的建立:

path('post_serial/<post_id>/',post_serializer), #文章详情异步加载路由

第四步:art-template的下载与应用

1.通过官网下载源代码,然后找到template-web.js,放入项目static文件下,并在需要的html页面引入,也可在这直接下载

a.在static/新建文件夹arttemplate/放入template-web.js

b.在html 引入

<script src="{% static 'arttemplate/template-web.js' %}"></script>

2.在引入的页面这样:

<script id="post_all_y" type="text/html">
{% verbatim %}
{{ each post_all post index  }}
<p>{{#post}}</p>
{{ /each }}
{% endverbatim %}

说明:id="post_all_y" 便于在js中获取到这个内容,因为是不同的模板语法,需要关闭django的转义,通过{% verbatim %}标签

{{ each post_all post index }} <p>{{#post}}</p> {{ /each }}  art-template模板语法之一,更多看官网,{{#post}} 将变量post的内容转义,相当于|safe  , post_all 是ajax返回来的变量  index是循环的序号

3.将原来文章显示全部,设置成只显示一部分,并给这个P标签指定一个ID,等会要获取

<div id="post_nr"></div>
<p class="navbar-text" id="ynr">{{ post.context|safe|truncatechars:600 }} </p>

说明:<div id="post_nr"></div> 用于拼接显示加载的内容

4.建一个家长按钮,并指定ID

<button type="button" class="alert alert-success"  data-post_pk='{{ post.pk }}' style="margin-top:0.5em;width: 100%" id="jzgdnr" >加载更多内容</button>

第五步:js 书写,在本页的js里书写,或单独写个,再引入

Post_read.prototype.listenJZGDEvent = function () {
    var jzgdbtn = $('#jzgdnr');
    var ynr = $('#ynr');
    jzgdbtn.click(function () {
          var jbtn = $(this);
          //post_pk= jbtn.parent();
          var post_id = jbtn.attr('data-post_pk');
        xfzajax.get({
           'url':'/blog/post_serial/'+post_id+'/', //要传文章ID,就只有拼接url
           'success':function (result) {
                if(result['code']===200){
                   var post_all = result['data']; //将后台传来的内容赋给post_all
                    //利用art-templates 模板语法的templates方法,将前端定义的<script>的ID,丢进来
                    //渲染,并以字典形式传去变量{'post_all':post_all}
                   var tpl = template('post_all_y',{'post_all':post_all});
                    //拿到已经显示的文章的p标签的ID,
                    var p_neirong = $('#post_nr');
                    //将文章拼接上去,
                    p_neirong.append(tpl);
                    jzgdbtn.hide();//隐藏掉
                    ynr.hide();//隐藏掉
                }
            }
       })
    });

};

第六步:测试

 

点赞

25




登陆后方可评论