我要实现的效果预览：

概念理解：

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();//隐藏掉
                }
            }
       })
    });

};

第六步：测试