新闻网站项目django+rest framework api+vue.js+reqwest

将之前新闻网站django项目的首页、分类页、详情页的数据渲染改成了用vue.js+restful api进行前端渲染

api.py:

from rest_framework import serializers
from rest_framework.response import Response
from rest_framework.decorators import api_view
from rest_framework import status
from django.contrib.auth.models import User
from .models import *
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger

from rest_framework.decorators import api_view, authentication_classes
from rest_framework.authentication import TokenAuthentication

class CategorySerializer(serializers.ModelSerializer):
    class Meta:
        model = Category
        fields = '__all__'
        depth = 1

class ArticleSerializer(serializers.ModelSerializer):
    class Meta:
        model = Article
        fields = '__all__'
        depth = 1

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id','profile','username')
        depth = 1

class CommentSerializer(serializers.ModelSerializer):
    belong_user = UserSerializer()
    class Meta:
        model = Comment
        fields = '__all__'
        depth = 1

@api_view(['GET'])
def api_index(request):                                                #首页api
    cates = Category.objects.all().order_by("-id") #分类列表
    cates = CategorySerializer(cates,many=True)

    todaynew_big = Best.objects.filter(select_reason="今日新闻")[0].select_article #取出一篇今日新闻作为大标题
    todaynew_big = ArticleSerializer(todaynew_big)
    todaynew = Best.objects.filter(select_reason="今日新闻")[:3]
    todaynew_top3 = [i.select_article for i in todaynew]                          #取出三篇今日新闻
    todaynew_top3 = ArticleSerializer(todaynew_top3,many=True)

    index_recommend = Best.objects.filter(select_reason="首页推荐")[:4]
    index_recommendlist = [i.select_article for i in index_recommend]   #取出四篇首页推荐
    index_recommendlist = ArticleSerializer(index_recommendlist,many=True)

    editor_recommendtop3 = Best.objects.filter(select_reason="编辑推荐")[:3]
    editor_recommendtop3list = [i.select_article for i in editor_recommendtop3] #取出三篇编辑推荐作为大标题
    editor_recommendtop3list = ArticleSerializer(editor_recommendtop3list,many=True)

    editor_recommend = Best.objects.filter(select_reason="编辑推荐")[3:10]
    editor_recommendlist = [i.select_article for i in editor_recommend]     #再取出七篇编辑推荐
    editor_recommendlist = ArticleSerializer(editor_recommendlist,many=True)

    article_list = Article.objects.all().order_by("-publish_time") #取出所有文章
    pagerobot = Paginator(article_list,5)                         #创建分页器，每页限定五篇文章
    page_num = request.GET.get("page")                            #取到当前页数
    try:
        article_list = pagerobot.page(page_num)                   #一般情况下返回当前页码下的文章
    except EmptyPage:
        article_list = pagerobot.page(pagerobot.num_pages)        #如果不存在该业，返回最后一页
    except PageNotAnInteger:
        article_list = pagerobot.page(1)                          #如果页码不是一个整数，返回第一页
    pages = len(article_list.paginator.page_range)                #取总页数

    article_list = ArticleSerializer(article_list,many=True)

    context={}
    context={
      "cates":cates.data,
      "todaynew_big":todaynew_big.data,
      "todaynew_top3":todaynew_top3.data,
      "index_recommendlist":index_recommendlist.data,
      "editor_recommendtop3list":editor_recommendtop3list.data,
      "editor_recommendlist":editor_recommendlist.data,
      "pages":pages,
      "article_list":article_list.data
    }


    return Response(context)

@api_view(['GET'])
def api_category(request,cate_id):
    cates = Category.objects.all().order_by("-id") #分类列表
    cates = CategorySerializer(cates,many=True)

    editor_recommendtop3 = Best.objects.filter(select_reason="编辑推荐")[:3]
    editor_recommendtop3list = [i.select_article for i in editor_recommendtop3] #取出三篇编辑推荐作为大标题
    editor_recommendtop3list = ArticleSerializer(editor_recommendtop3list,many=True)

    editor_recommend = Best.objects.filter(select_reason="编辑推荐")[3:10]
    editor_recommendlist = [i.select_article for i in editor_recommend]     #再取出七篇编辑推荐
    editor_recommendlist = ArticleSerializer(editor_recommendlist,many=True)

    article_list = Article.objects.filter(category=int(cate_id)).order_by("-publish_time") #取出当前目录下的所有文章
    print(article_list[0].category)
    pagerobot = Paginator(article_list,5)                         #创建分页器，每页限定五篇文章
    page_num = request.GET.get("page")                            #取到当前页数
    try:
        article_list = pagerobot.page(page_num)                   #一般情况下返回当前页码下的文章
    except EmptyPage:
        article_list = pagerobot.page(pagerobot.num_pages)        #如果不存在该业，返回最后一页
    except PageNotAnInteger:
        article_list = pagerobot.page(1)                          #如果页码不是一个整数，返回第一页
    pages = len(article_list.paginator.page_range)                #取总页数

    article_list = ArticleSerializer(article_list,many=True)

    context={}
    context={
      "cates":cates.data,
      "editor_recommendtop3list":editor_recommendtop3list.data,
      "editor_recommendlist":editor_recommendlist.data,
      "pages":pages,
      "article_list":article_list.data
    }


    return Response(context)

@api_view(['GET','POST'])
@authentication_classes((TokenAuthentication,))
def api_detail(request,article_id):
    if request.method == 'POST':
        article_id = request.POST.get('article_id')
        current_article = Article.objects.get(id=article_id)
        current_user = User.objects.get(id=request.user.id)
        created = request.POST.get('created')
        words = request.POST.get('words')
        newcomment = Comment(belong_article=current_article,belong_user=current_user,created=created,words=words)
        newcomment.save()
        return Response(status=status.HTTP_201_CREATED)
    cates = Category.objects.all().order_by("-id") #分类列表
    cates = CategorySerializer(cates,many=True)

    editor_recommendtop3 = Best.objects.filter(select_reason="编辑推荐")[:3]
    editor_recommendtop3list = [i.select_article for i in editor_recommendtop3] #取出三篇编辑推荐作为大标题
    editor_recommendtop3list = ArticleSerializer(editor_recommendtop3list,many=True)

    editor_recommend = Best.objects.filter(select_reason="编辑推荐")[3:10]
    editor_recommendlist = [i.select_article for i in editor_recommend]     #再取出七篇编辑推荐
    editor_recommendlist = ArticleSerializer(editor_recommendlist,many=True)

    article = Article.objects.get(id=article_id)
    comments = Comment.objects.filter(belong_article_id=article_id)
    comments = CommentSerializer(comments,many=True)
    article = ArticleSerializer(article)

    context ={}
    context ={
       "cates":cates.data,
       "editor_recommendtop3list":editor_recommendtop3list.data,
       "editor_recommendlist":editor_recommendlist.data,
       "article":article.data,
       "comments":comments.data,

    }

    return Response(context)

index.html:

<!DOCTYPE html>
{% load staticfiles %}
<html>
  <head>
    <meta charset="utf-8">
    <title>首页</title>
    <link rel="stylesheet" href="{% static 'css/semantic.css' %}" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="{% static 'css/index.css' %}" media="screen" title="no title" charset="utf-8">
    <script src="/static/js/vue1.js"></script>
    <script src="/static/js/reqwest.js"></script>
    </script>
  </head>
  <body id="app">
    <div class="ui red basic segment  topmenu">
      <div class="ui borderless menu container" style="border:0;box-shadow:none;">
          <div class="header item" style="margin-right:10px;">
            <div class="ui image">
              <img src="{%static 'images/index/zhiribao.png' %}" alt="" />
            </div>
          </div>
          <div class="item" style="margin-right:10px;">
            <a href="{% url 'index' %}">首页</a>
          </div>
          {% verbatim %}
          <div v-for="cate in cates" class="item" style="margin-right:10px;">
            <a href="/category/{{cate.id}}">{{cate.name}}</a>
          </div>
          {% endverbatim %}


        <div class="right menu login">
        {% if request.user.is_authenticated %}
          <div class="item">
            <a href="{% url 'profile' %}"><div class="ui image">
                <img src="/upload/{{ request.user.profile.avatar }}" style="height:26px;width:24px;" alt="" />
            </div>
            <p style="margin-right:10px;margin-top:6px;color:black;">{{ request.user.username }}</p>
            </a>

          </div>
          <div class="item">
            <a href="{% url "logout" %}">
                                  退出
            </a>
          </div>
        {% else %}
          <div class="item">
            <a href="{% url 'login' %}"><div class="ui image">
                <img src="{% static 'images/index/login.png' %}" alt="" />
            </div>
            <p style="margin-right:10px;margin-top:6px;color:black;">登录</p>
            </a>

          </div>
          <div class="item">
            <a href="{% url 'register' %}">  <div class="ui image">
                 <img src="{% static 'images/index/register.png' %}" alt="" />
              </div>
              <p style="color:black;">注册</p>
            </a>
          </div>
        {% endif %}
        </div>
      </div>
    </div>
    <div class="ui basic segment body container">
      <div class="ui basic segment container topcontent" style="border:none">
        <div class="ui horizontal basic segments" style="border:none;">
          {% verbatim %}
          <div class="ui basic segment topleft" style="background: url('{{todaynew_big.image}}');background-size:cover;background-repeat: no-repeat;" >
            <a href="#" class="ui circular red  button" style="width:80px;height:35px;padding:0px;padding-top:10px;">今日热闻</a>
            <div class="ui basic segment title">
                 <a href="/detail/{{todaynew_big.id}}"><p style="color:#fff;font-size:28px;margin-left:8px;">{{todaynew_big.title}}</p></a>
            </div>
          </div>
          {% endverbatim %}

          <div class="ui basic segment topright" >
            {% verbatim %}
                <div v-for="todaynew in todaynew_top3" class="ui  segment" style="border:solid red 1px;">
                  <a href="/detail/{{todaynew.id}}">
                  <p>
                    {{todaynew.title}}
                  </p>
                  </a>
                  <span style="color:rgb(195, 200, 194)">{{todaynew.publish_time | date:"Y-m-d"}}</span>
                </div>
            {% endverbatim %}
          </div>
        </div>
      </div>

      <div class="ui  grid container">
        {% verbatim %}
          <div v-for="index_recommend in index_recommendlist"class="four wide column">
            <a href="/detail/{{index_recommend.id}}">
           <div class="ui basic segment" style="background:url('{{index_recommend.image}}');background-size: cover;
           background-repeat: no-repeat;">
              <div class="ui basic segment title">
                  <p style="color:#fff;font-size:18px;margin-left:0px;">{{index_recommend.title}}</p>
             </div>
            </a>
           </div>
         </div>
        {% endverbatim %}
      </div>

      <div class="ui horizontal basic segments bottomcontent">
        <div class="ui segment bottomleft" style="border:none;box-shadow:none;">
          {% verbatim %}
          <div v-for="article in article_list" class="ui segment article" style="border:none;box-shadow:none;">
            <div class="ui image">
              <img src="{{article.image}}" alt="" />
            </div>
            <div class="ui segment articlecontent" style="border:none;box-shadow:none;">
              <a href="/detail/{{article.id}}"><h3><b>{{article.title}}</b></h3></a>
              <p>
                {{article.abstract}}
              </p>
              <span style="color:rgb(206, 208, 204);position:absolute;transform:translate(0,100%);bottom:10%">{{article.publish_time | date:"Y-m-d"}}</span>
            </div>
          </div>
          {% endverbatim %}
          <div class="ui pagination menu" style="margin-left:50%;transform:translate(-50%,0%);">
            {% verbatim %}
            <a v-on:click="update_page(this_page-1)" class="{{ previous_disabled_status() }} item"><i class="icon {{ leftcaret_color() }} left caret"></i></a>
            <a v-on:click="update_page(pagenumber+1)" v-for="pagenumber in pages" class="{{ pagenum_active_status(pagenumber+1) }} item" style="{{ pagenum_color(pagenumber+1) }}">
                                        {{ pagenumber+1 }}
            </a>
            <a v-on:click="update_page(this_page+1)" class="{{ next_disabled_status() }} item"><i class="icon {{ rightcaret_color() }} right caret"></i></a>
            {% endverbatim %}
          </div>
        </div>
        <div class="ui segment bottomright" style="border:none;box-shadow:none;">
          <div class="ui red segment best">
            <h4 class="ui center aligned header"><b>编辑推荐</b></h4>

            {% verbatim %}
            <div v-for="editor_recommendtop3 in editor_recommendtop3list" class="ui segment top3" style="background:url('{{editor_recommendtop3.image}}');
            background-size:cover;background-repeat:no-repeat;border-radius:0;">
             <div class="sidebutton">
               <img src="/static/images/index/redtag.png" alt="" />
               <p>Top{{ $index+1 }}</p>
             </div>
             <div class="ui basic segment title" style="height:40px;padding-top:2px;">
                  <p style="font-size:14px;margin-left:0px;"><a href="/detail/{{editor_recommendtop3.id}}" style="color:#fff;">{{editor_recommendtop3.title}}</a></p>
             </div>
            </div>
            {% endverbatim %}

            {% verbatim %}
            <div v-for="editor_recommend in editor_recommendlist" class="ui segment bestlast">
              <img src="/static/images/index/Triangle.png" alt="" />
              <p>
                <a href="/detail/{{editor_recommend.id}}">
               {{editor_recommend.title}}
                </a>
              </p>
             <span>{{editor_recommend.publish_time | date:"Y-m-d"}}</span>
            </div>
           {% endverbatim %}

            <div class="ui image">
              <img src="{% static 'images/index/ad.png' %}" alt="" style="width:300px;"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  <div class="ui basic segment bottomblack">
    <div class="ui image">
      <img src="{% static 'images/index/white_zhiribao.png' %}" alt="" />
    </div>
    <p style="color:red;margin-top:50px;font-size:20px;">
      关于我们<span style="color:rgb(143, 143, 143)">｜</span>加入我们<span style="color:rgb(143, 143, 143)">｜</span>联系我们｜寻求报道
    </p>
    <p style="color:white;font-size:20px;">
      反馈建议:<span style="color:red;">124608760@qq.com</span>
    </p>
    <div class="ui  basic segment wechat">
      <img src="{% static 'images/index/qrcode.png' %}" style="margin-left:38px;"/>
      <h2 class="ui header" style="color:rgb(255, 255, 255);margin-left:20px;">扫码关注微信号</h2>
    </div>
    <button type="button" name="button" class="ui circular red button backtotop">
      <img src="{% static 'images/index/upicon.png' %}" style="position:absolute;left:18%;top:10%;">
      <img src="{% static 'images/index/TOP.png' %}" style="position:absolute;left:18%;bottom:28%;">
    </button>
  </div>
  <div class="ui basic segment bottomwhite">
    <p>
      Designed by Mugglecoding
    </p>
    <p>
      Developed by XYX
    </p>
    <p style="position:absolute;right:250px;top:40px;">
      京ICP备123878345号
    </p>
  </div>
  <script>
    var vm = new Vue(
      {
        el:"#app",
        data:{
             "cates":[],
             "todaynew_big":"",
             "todaynew_top3":[],
             "index_recommendlist":[],
             "editor_recommendtop3list":[],
             "editor_recommendlist":[],
             "pages":"",
             "this_page":1,
             "article_list":[]
        },
        methods:{
          leftcaret_color:function(){
            if(this.this_page > 1){
              return "red"
            }
            else{
              return ""
            }
          },

          rightcaret_color:function(){
            if(this.this_page < this.pages){
              return "red"
            }
            else{
              return ""
            }
          },

          previous_disabled_status:function(){
            if(this.this_page > 1){
              return ""
            }
            else{
              return "disabled"
            }
          },

          next_disabled_status:function(){
            if(this.this_page < this.pages){
              return ""
            }
            else{
              return "disabled"
            }
          },

          pagenum_active_status:function(page){
            if(this.this_page == page){
              return "active"
            }
            else{
              return ""
            }
          },

          pagenum_color:function(page){
            if(this.this_page == page){
              return "background-color: red; color:white"
            }
            else{
              return ""
            }
          },

          update_page:function(page){
            var self = this;
            if(page > this.pages){
              page = this.pages;
            };
            if(page < 1){
              page = 1;
            }
            this.this_page = page;
            reqwest({
              url:'/api/index/?page='+page,
              type:'json',
              method:'get',
              success:function(resp){
                self.article_list = resp.article_list;
              }
            })
          },

          getdata:function(){
            var self = this;
            reqwest({
              url:'/api/index/?page='+self.this_page,
              type:'json',
              method:'get',
              success:function(resp){
                console.log(resp);
                self.cates = resp.cates;
                self.todaynew_big = resp.todaynew_big;
                self.todaynew_top3 = resp.todaynew_top3;
                self.index_recommendlist = resp.index_recommendlist;
                self.editor_recommendtop3list = resp.editor_recommendtop3list;
                self.editor_recommendlist = resp.editor_recommendlist;
                self.pages = resp.pages;
                self.article_list = resp.article_list;
              },
            })
          },
        },
        ready:function(){
          this.getdata();
        }




      }
    )
  </script>
  </body>
</html>

category.html:

<!DOCTYPE html>
{% load staticfiles %}
<html>
  <head>
    <meta charset="utf-8">
    <title>分类页</title>
    <link rel="stylesheet" href="{% static 'css/semantic.css' %}" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="{% static 'css/category.css' %}" media="screen" title="no title" charset="utf-8">
    <script src="/static/js/vue1.js"></script>
    <script src="/static/js/reqwest.js"></script>
  </head>
  <body id="app">
    <div class="ui red basic segment  topmenu">
      <div class="ui borderless menu container" style="border:0;box-shadow:none;">
          <div class="header item" style="margin-right:10px;">
            <div class="ui image">
              <img src="{%static 'images/index/zhiribao.png' %}" alt="" />
            </div>
          </div>
          <div class="item" style="margin-right:10px;">
            <a href="{% url 'index' %}">首页</a>
          </div>
          {% verbatim %}
          <div v-for="cate in cates" class="item" style="margin-right:10px;">
            <a href="/category/{{cate.id}}">{{cate.name}}</a>
          </div>
          {% endverbatim %}

        <div class="right menu login">
          {% if request.user.is_authenticated %}
            <div class="item">
              <a href="{% url 'profile' %}"><div class="ui image">
                  <img src="/upload/{{ request.user.profile.avatar }}" style="height:26px;width:24px;" alt="" />
              </div>
              <p style="margin-right:10px;margin-top:6px;color:black;">{{ request.user.username }}</p>
              </a>

            </div>
            <div class="item">
              <a href="{% url "logout" %}">
                                    退出
              </a>
            </div>
          {% else %}
            <div class="item">
              <a href="{% url 'login' %}"><div class="ui image">
                  <img src="{% static 'images/index/login.png' %}" alt="" />
              </div>
              <p style="margin-right:10px;margin-top:6px;color:black;">登录</p>
              </a>

            </div>
            <div class="item">
              <a href="{% url 'register' %}">  <div class="ui image">
                   <img src="{% static 'images/index/register.png' %}" alt="" />
                </div>
                <p style="color:black;">注册</p>
              </a>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="ui basic segment container">
      <div class="ui horizontal basic segments bodycontent">
        <div class="ui segment bodyleft" style="border:none;box-shadow:none;">
          {% verbatim %}
          <div v-for="article in article_list" class="ui segment article" style="border:none;box-shadow:none;">
            <div class="ui image">
              <img src="{{article.image}}" alt="" />
            </div>
            <div class="ui segment articlecontent" style="border:none;box-shadow:none;">
              <a href="/detail/{{article.id}}"><h3><b>{{article.title}}</b></h3></a>
              <p>
                {{article.abstract}}
              </p>
              <span style="color:rgb(206, 208, 204);position:absolute;transform:translate(0,100%);bottom:10%">{{article.publish_time | date:"Y-m-d"}}</span>
            </div>
          </div>
          {% endverbatim %}
          <div class="ui pagination menu" style="margin-left:50%;transform:translate(-50%,0%);">
            {% verbatim %}
            <a v-on:click="update_page(this_page-1)" class="{{ previous_disabled_status() }} item"><i class="icon {{ leftcaret_color() }} left caret"></i></a>
            <a v-on:click="update_page(pagenumber+1)" v-for="pagenumber in pages" class="{{ pagenum_active_status(pagenumber+1) }} item" style="{{ pagenum_color(pagenumber+1) }}">
                                        {{ pagenumber+1 }}
            </a>
            <a v-on:click="update_page(this_page+1)" class="{{ next_disabled_status() }} item"><i class="icon {{ rightcaret_color() }} right caret"></i></a>
            {% endverbatim %}
          </div>
        </div>
        <div class="ui segment bodyright" style="border:none;box-shadow:none;">
          <div class="ui red segment best">
            <h4 class="ui center aligned header"><b>编辑推荐</b></h4>
            {% verbatim %}
            <div v-for="editor_recommendtop3 in editor_recommendtop3list" class="ui segment top3" style="background:url('{{editor_recommendtop3.image}}');
            background-size:cover;background-repeat:no-repeat;border-radius:0;">
             <div class="sidebutton">
               <img src="/static/images/index/redtag.png" alt="" />
               <p>Top{{ $index+1 }}</p>
             </div>
             <div class="ui basic segment title" style="height:40px;padding-top:2px;">
                  <p style="font-size:14px;margin-left:0px;"><a href="/detail/{{editor_recommendtop3.id}}" style="color:#fff;">{{editor_recommendtop3.title}}</a></p>
             </div>
            </div>
            {% endverbatim %}

            {% verbatim %}
            <div v-for="editor_recommend in editor_recommendlist" class="ui segment bestlast">
              <img src="/static/images/index/Triangle.png" alt="" />
              <p>
                <a href="/detail/{{editor_recommend.id}}">
               {{editor_recommend.title}}
                </a>
              </p>
             <span>{{editor_recommend.publish_time | date:"Y-m-d"}}</span>
            </div>
           {% endverbatim %}
            <div class="ui image">
              <img src="{% static 'images/index/ad.png' %}" alt="" style="width:300px;"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ui basic segment bottomblack">
      <div class="ui image">
        <img src="{% static 'images/index/white_zhiribao.png' %}" alt="" />
      </div>
      <p style="color:red;margin-top:50px;font-size:20px;">
        关于我们<span style="color:rgb(143, 143, 143)">｜</span>加入我们<span style="color:rgb(143, 143, 143)">｜</span>联系我们｜寻求报道
      </p>
      <p style="color:white;font-size:20px;">
        反馈建议:<span style="color:red;">124608760@qq.com</span>
      </p>
      <div class="ui  basic segment wechat">
        <img src="{% static 'images/index/qrcode.png' %}" style="margin-left:38px;"/>
        <h2 class="ui header" style="color:rgb(255, 255, 255);margin-left:20px;">扫码关注微信号</h2>
      </div>
      <button type="button" name="button" class="ui circular red button backtotop">
        <img src="{% static 'images/index/upicon.png' %}" style="position:absolute;left:18%;top:10%;">
        <img src="{% static 'images/index/TOP.png' %}" style="position:absolute;left:18%;bottom:28%;">
      </button>
    </div>
    <div class="ui basic segment bottomwhite">
      <p>
        Designed by Mugglecoding
      </p>
      <p>
        Developed by XYX
      </p>
      <p style="position:absolute;right:250px;top:40px;">
        京ICP备123878345号
      </p>
    </div>
    <script>
      var vm = new Vue(
        {
          el:"#app",
          data:{
               "cates":[],
               "editor_recommendtop3list":[],
               "editor_recommendlist":[],
               "pages":"",
               "this_page":1,
               "article_list":[]
          },
          methods:{
            leftcaret_color:function(){
              if(this.this_page > 1){
                return "red"
              }
              else{
                return ""
              }
            },

            rightcaret_color:function(){
              if(this.this_page < this.pages){
                return "red"
              }
              else{
                return ""
              }
            },

            previous_disabled_status:function(){
              if(this.this_page > 1){
                return ""
              }
              else{
                return "disabled"
              }
            },

            next_disabled_status:function(){
              if(this.this_page < this.pages){
                return ""
              }
              else{
                return "disabled"
              }
            },

            pagenum_active_status:function(page){
              if(this.this_page == page){
                return "active"
              }
              else{
                return ""
              }
            },

            pagenum_color:function(page){
              if(this.this_page == page){
                return "background-color: red; color:white"
              }
              else{
                return ""
              }
            },

            update_page:function(page){
              var self = this;
              var id = location.href.split("/")[4];
              if(page > this.pages){
                page = this.pages;
              };
              if(page < 1){
                page = 1;
              }
              this.this_page = page;
              reqwest({
                url:'/api/category/' + id +'?page='+self.this_page,
                type:'json',
                method:'get',
                success:function(resp){
                  self.article_list = resp.article_list;
                }
              })
            },

            getdata:function(){
              var self = this;
              var id = location.href.split("/")[4];
              reqwest({
                url:'/api/category/' + id +'?page='+self.this_page,
                type:'json',
                method:'get',
                success:function(resp){
                  console.log(resp);
                  self.cates = resp.cates;
                  self.editor_recommendtop3list = resp.editor_recommendtop3list;
                  self.editor_recommendlist = resp.editor_recommendlist;
                  self.pages = resp.pages;
                  self.article_list = resp.article_list;
                },
              })
            },
          },

          ready:function(){
            this.getdata();
          }

        }
      )
    </script>
  </body>

</html>

detail.html:

<!DOCTYPE html>
{% load staticfiles %}
<html>
  <head>
    <meta charset="utf-8">
    <title>详情页</title>
    <link rel="stylesheet" href="{% static 'css/semantic.css' %}" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="{% static 'css/detail.css' %}" media="screen" title="no title" charset="utf-8">
    <script src="/static/js/vue1.js"></script>
    <script src="/static/js/reqwest.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.js"></script>
  </head>
  <body id="app">
    <div class="ui red basic segment  topmenu">
      <div class="ui borderless menu container" style="border:0;box-shadow:none;">
          <div class="header item" style="margin-right:10px;">
            <div class="ui image">
              <img src="{%static 'images/index/zhiribao.png' %}" alt="" />
            </div>
          </div>
          <div class="item" style="margin-right:10px;">
            <a href="{% url 'index' %}">首页</a>
          </div>
          {% verbatim %}
          <div v-for="cate in cates" class="item" style="margin-right:10px;">
            <a href="/category/{{cate.id}}">{{cate.name}}</a>
          </div>
          {% endverbatim %}


        <div class="right menu login">
          {% if request.user.is_authenticated %}
            <div class="item">
              <a href="{% url 'profile' %}"><div class="ui image">
                  <img src="/upload/{{ request.user.profile.avatar }}" style="height:26px;width:24px;" alt="" />
              </div>
              <p style="margin-right:10px;margin-top:6px;color:black;">{{ request.user.username }}</p>
              </a>

            </div>
            <div class="item">
              <a href="{% url "logout" %}">
                                    退出
              </a>
            </div>
          {% else %}
            <div class="item">
              <a href="{% url 'login' %}"><div class="ui image">
                  <img src="{% static 'images/index/login.png' %}" alt="" />
              </div>
              <p style="margin-right:10px;margin-top:6px;color:black;">登录</p>
              </a>

            </div>
            <div class="item">
              <a href="{% url 'register' %}">  <div class="ui image">
                   <img src="{% static 'images/index/register.png' %}" alt="" />
                </div>
                <p style="color:black;">注册</p>
              </a>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="ui basic segment container">
      <div class="ui horizontal basic segments bodycontent">
        <div class="ui segment bodyleft" style="border:none;box-shadow:none;">
          {% verbatim %}
          <div class="ui basic segment articleimg" style="background:url('{{article.image}}');background-size: cover;
          background-repeat: no-repeat;">
            <hr>
            <div class="image-text" >
             {{article.title}}
            </div>
            <span>图片:Zoommy</span>
          </div>
          <div class="ui center aligned basic segment abstract">
            *** <br>

           {{article.abstract}} <br>

              ***
          </div>
          <div class="ui basic segment articledetail">
            <h1>{{article.title}}</h1>
            <p>
              <div class="ui mini image" style="position:relative;top:-2px;left:5px;">
                 <img  src="{{article.author_avatar}}"  alt="" />
              </div>
              <span style="font-size:16px;color: #000000;margin-left:10px;"> {{ article.author_name }}</span>
              <span style="color:grey;font-size:16px;">{{ article.author_desc }}</span>
            <p style="color:#000000;width:600px;font-size:16px;margin-top:20px;line-height:2;">
              {{article.content}}
            </p>
            <a href="{{article.source_link}}"><span style="border-bottom:1px solid red;font-size:16px;margin-top:50px;margin-left:520px;">查看原文</span></a>
          </div>
       {% endverbatim %}
          <div class="ui basic segment comment">
            <p ><b>评论</b></p>
            {% verbatim %}
            <div v-for="comment in comments" class="comment" style="margin-top:22px;margin-bottom:20px;">
              <div class="ui image" style="height:50px;width:50px;">
                <img src="{{ comment.belong_user.profile.avatar }}" style="height:50px;width:50px;" alt="" />
              </div>
               <span class="time">   <b style="color:black;">{{comment.belong_user.username}}</b>   {{comment.created}}</span>
               <span class="black-reply">   {{comment.words}}</span>
            </div>
          {% endverbatim %}
          {% verbatim %}
          <form class="ui error form"  method="POST" >
            <textarea name="comment" rows="8" cols="40" v-model="words"></textarea>
          </form>
          <button class="ui red button" v-on:click="sendcomment" style="width:144px;height:49px;position:relative;top:60px;" >
                <span style="color: #ffffff;font-size: 20px;font-weight: bold;">写评论</span>
          </button>
          {% endverbatim %}
          </div>

        </div>
        <div class="ui segment bodyright" style="border:none;box-shadow:none;">
          <div class="ui red segment best">
            <h4 class="ui center aligned header"><b>编辑推荐</b></h4>
            {% for editor_recommendtop3 in editor_recommendtop3list %}

            <div class="ui segment top3" style="background:url('/upload/{{editor_recommendtop3.image}}');
            background-size:cover;background-repeat:no-repeat;border-radius:0;">
             <div class="sidebutton">
               <img src="{% static 'images/index/redtag.png' %}" alt="" />
               <p>Top{{ forloop.counter }}</p>
             </div>

             <div class="ui basic segment title" style="height:40px;padding-top:2px;">
                  <p style="font-size:14px;margin-left:0px;"><a href="/detail/{{editor_recommendtop3.id}}" style="color:#fff;">{{editor_recommendtop3.title}}</a></p>
             </div>

            </div>

            {% endfor %}

            {% for editor_recommend in editor_recommendlist %}

            <div class="ui segment bestlast">
              <img src="{% static 'images/index/Triangle.png' %}" alt="" />

              <p>
                <a href="/detail/{{editor_recommend.id}}">
               {{editor_recommend.title}}
                </a>
              </p>

             <span>{{editor_recommend.publish_time | date:"Y-m-d"}}</span>
            </div>

            {% endfor %}
            <div class="ui image">
              <img src="{% static 'images/index/ad.png' %}" alt="" style="width:300px;"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ui basic segment bottomblack">
      <div class="ui image">
        <img src="{% static 'images/index/white_zhiribao.png' %}" alt="" />
      </div>
      <p style="color:red;margin-top:50px;font-size:20px;">
        关于我们<span style="color:rgb(143, 143, 143)">｜</span>加入我们<span style="color:rgb(143, 143, 143)">｜</span>联系我们｜寻求报道
      </p>
      <p style="color:white;font-size:20px;">
        反馈建议:<span style="color:red;">124608760@qq.com</span>
      </p>
      <div class="ui  basic segment wechat">
        <img src="{% static 'images/index/qrcode.png' %}" style="margin-left:38px;"/>
        <h2 class="ui header" style="color:rgb(255, 255, 255);margin-left:20px;">扫码关注微信号</h2>
      </div>
      <button type="button" name="button" class="ui circular red button backtotop">
        <img src="{% static 'images/index/upicon.png' %}" style="position:absolute;left:18%;top:10%;">
        <img src="{% static 'images/index/TOP.png' %}" style="position:absolute;left:18%;bottom:28%;">
      </button>
    </div>
    <div class="ui basic segment bottomwhite">
      <p>
        Designed by Mugglecoding
      </p>
      <p>
        Developed by XYX
      </p>
      <p style="position:absolute;right:250px;top:40px;">
        京ICP备123878345号
      </p>
    </div>
    <script>
      var vm = new Vue(
        {
          el:"#app",
          data:{
               "cates":[],
               "editor_recommendtop3list":[],
               "editor_recommendlist":[],
               "article":[],
               "comments":[],
               "article_id":'',
               "created":'',
               "words":'',
          },
          methods:{
            sendcomment:function(){
              var self = this;
              var id = location.href.split("/")[4];
              var datenow = new Date();
              reqwest({
                url:'/api/detail/'+ id +'/',
                type:'json',
                method:'post',
                headers:Cookies.get('token')? {'Authorization': 'Token ' + Cookies.get('token')}:{},
                data:{
                  article_id:id,
                  created:datenow.toISOString(),
                  words:self.words
                },
                success:function(resp){
                  location.reload();
                }
              })
            },

            getdata:function(){
              var self = this;
              var id = location.href.split("/")[4];
              reqwest({
                url:'/api/detail/'+id,
                type:'json',
                method:'get',
                success:function(resp){
                  console.log(resp);
                  self.cates = resp.cates;
                  self.editor_recommendtop3list = resp.editor_recommendtop3list;
                  self.editor_recommendlist = resp.editor_recommendlist;
                  self.article = resp.article;
                  self.comments = resp.comments;
                },
              })
            },
          },

          ready:function(){
            this.getdata();
          }


        }
      )
    </script>
  </body>
</html>

urls.py:

from django.conf.urls import url
from django.contrib import admin
from newswebsite.views import *
from newswebsite.api import *
from django.conf import settings
from django.conf.urls.static import static
from rest_framework.authtoken import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', index, name='index'),
    url(r'^category/(?P<cate_id>\d+)/$', category, name='category'),
    url(r'^detail/(?P<article_id>\d+)/$', detail, name='detail'),
    url(r'^login/', login, name='login'),
    url(r'^register/', register, name='register'),
    url(r'^logout/', logout, name='logout'),
    url(r'^profile/', profile, name='profile'),

    #api
    url(r'^api/index/', api_index, name='api_index'),
    url(r'^api/category/(?P<cate_id>\d+)/$', api_category, name='api_category'),
    url(r'^api/detail/(?P<article_id>\d+)/$', api_detail, name='api_detail'),
    url(r'^api/token-auth/$', views.obtain_auth_token),
]

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

view.py：

from django.contrib.auth.decorators import login_required
from django.shortcuts import render,Http404, redirect, HttpResponse
from django.contrib.auth import authenticate,login as user_login,logout as user_logout
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from newswebsite.models import *
from newswebsite.forms import *
from rest_framework.authtoken.models import Token
# Create your views here.
def index(request):

    return render(request,'index.html')

def category(request,cate_id):

    return render(request,'category.html')

def detail(request,article_id):
    if not isinstance(request.user, User):
        return render(request, 'detail.html')
    token, created = Token.objects.get_or_create(user=request.user)    #创建登录用户的token并存到cookie中
    response = render(request, 'detail.html')
    response.set_cookie(key='token',value=token.key)
    return response

def login(request):
    if request.method == 'GET':
        form = LoginForm()
    if request.method == 'POST':
        form = LoginForm(request.POST)
        if form.is_valid():
            username = form.cleaned_data.get("username")
            password = form.cleaned_data.get("password")
            user = authenticate(username=username,password=password)
            if user:
                user_login(request,user)              #由于login方法和我自定义的login视图重名，这里将django.contrib.auth中的login方法重命名为user_login导入
                return redirect(to='index')
            else:
                return HttpResponse('用户名不存在或用户名密码错误')

    context={}
    context['form'] = form

    return render(request,'login.html',context=context)

def register(request):
    if request.method == 'GET':
        form = RegisterForm()
    if request.method == 'POST':
        form = RegisterForm(request.POST)
        if form.is_valid():
           username = form.cleaned_data.get("username")
           email = form.cleaned_data.get("email")
           password = form.cleaned_data.get("password")
           user = User(username=username,email=email)
           user.set_password(password)
           user.save()                                                         #创建用户保存
           userprofile = UserProfile(belong_to=user,avatar='avatar/avatar.png')
           userprofile.save()                                                  #创建该用户的资料
           return redirect(to='login')

    context={}
    context['form']=form

    return render(request,'register.html',context=context)

@login_required(login_url='login')              #未登录则跳转到登录页面
def profile(request):
    if request.method == 'GET':
        form = EditForm(initial={'username':request.user.username,'email':request.user.email})
    if request.method == 'POST':
        form = EditForm(request.POST,request.FILES)

        if form.is_valid():
           user = request.user
           email = form.cleaned_data.get("email")
           password = form.cleaned_data.get("password")
           avatar = form.cleaned_data.get("avatar")
           user.email = email
           if avatar:
                user_profile = UserProfile.objects.get(belong_to=user)
                user_profile.avatar = avatar
                user_profile.save()             #如果有上传头像，替换用户的头像
           user.set_password(password)
           user.save()
           return redirect(to='login')

    context={}
    context['form']=form

    return render(request,'profile.html',context=context)

def logout(request):
    user_logout(request)

    return redirect(to='login')