Django个人博客搭建教程---用vue结合element-ui写分页

<el-table height="100%" :data="blogList.slice((currentPage-1)*pagesize,currentPage*pagesize)">
    <el-table-column prop="date" label="序号" width="50">
          <template scope="scope"> {{ scope.row.pk }} </template>
        </el-table-column>
        <el-table-column prop="name" label="标题" width="width: 100%">
          <template scope="scope"> {{ scope.row.fields.title }}</template>
        </el-table-column>
        <el-table-column prop="address" label="分类" width="width: 100%">
          <template scope="scope"> {{ scope.row.fields.category }} </template>
        </el-table-column>
        <el-table-column prop="address" label="作者" width="width: 100%">
          <template scope="scope"> {{ scope.row.fields.authorname }} </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="width: 100%">
        <template slot-scope="scope">
          <el-button type="text" @click="open(scope.row.fields.title,scope.row.fields.body)" size="small">查看</el-button>
          <el-button @click="skip('https://www.guanacossj.com/blog/article/'+scope.row.pk+'/'+scope.row.fields.url_slug)" type="text" size="small">查看详情</el-button>
        </template>
    </el-table-column>
</el-table>

分页器

<el-pagination
    background
    :page-sizes="[5, 10, 20, 40]"
    :page-size="pagesize"
    @size-change="handleSizeChange"
    :total="blogList.length"
    @current-change="handleCurrentChange"
    layout="prev, pager, next">
</el-pagination>

<script>
export default {
  name: 'home',
  data () {
    return {
      input: '',
      currentPage:1,
      pagesize:10,
      searchInfo: '',
      blogList: []
    }
  },
  mounted: function () {
    this.showBlogs()
  },
  methods: {
     handleCurrentChange: function(currentPage){
       this.currentPage = currentPage;
       console.log(this.currentPage)  //点击第几页
     },
     handleSizeChange: function (size) {
       this.pagesize = size;
       console.log(this.pagesize)  //每页下拉显示数据
     },
     open(title,body) {
        this.$alert(body.substr(1,100)+'...', title, {
          confirmButtonText: '确定',
          // callback: action => {
          //   this.$message({
          //     type: 'info',
          //     message: `action: ${ action }`
          //   });
          // }
        });
    },
    skip(url){
      location.href = url
    },
    showBlogs () {
      this.$http.get('https://www.guanacossj.com/blog/showarticles/')
        .then((response) => {
          var res = JSON.parse(response.bodyText);
          console.log(res.list.length);
          if (res.error_num === 0) {
            this.blogList = res['list']
          } else {
            this.$message.error('查询博客失败');
            // console.logs(res['msg'])
          }
        })
    }
  }
}
</script>

查询的数据格式大概如下

{
    "list": [
        {
            "model": "blog.articles",
            "pk": 1,
            "fields": {
                "title": "用Django写一个自己的博客网站",
                "body": "##写在最前面：\r\n想用Django写网站很久了，本地也建立过很多demo，对于整个框架的入门算是熟练了。用pycharm可 \r\n以很方便的新建一个Django工程。专业版的Pycharm是自带Django的，目前Diango的最新版本应该是2.1。\r\n\r\nIDE:Pycharm\r\npython版本：3.6\r\n操作系统：macOS Mojave\r\n\r\n![图片](/media/images/blog1body1.png)\r\n\r\n这是用Django2.1写的一个个人博客的展示，还有一个含有带登录、注册、登出的session控制的监控系统，博客本身内置下载、天气查询、Google在线翻译，还可以发送QQ邮件。\r\n下面先贴一下目录结构：\r\n\r\n![图片](/static/images/blog1body2.jpg)",
                "timestamp": "2019-02-21T21:20:23",
                "authorname": "ArithmeticJia",
                "views": 2873,
                "category": "Django",
                "greats": 23,
                "comments": 1,
                "status": "有效",
                "brief": null,
                "pic": "jiablogimages/tim-foster-1659631-unsplash_gaitubao_800x450.jpg",
                "istop": "0",
                "articlebodybrief": "##写在最前面：\r\n想用Django写网站很久了，本地也建立过很多demo，对于整个框架的入门算是熟练了。用pycharm可 \r\n以很方便的新建一个Django工程。专业版的Pycharm是自带Django的，目前Diango的最新版本应该是2.1。\r\n\r\nIDE:Pycharm\r\npython版本：3.6\r\n操作系统：macOS Mojave\r\n\r\n![图片](/media/images/blog1body1.png)\r\n\r\n这是用Django2.1写的一个个人博客的展示，还有一个含有带登录、注册、登出的session控制的监控系统，博客本身内置下载、天气查询、Google在线翻译，还可以发送QQ邮件。\r\n下面先贴一下目录结构：\r\n\r\n![图片](/static/images/blog1body2.jpg)",
                "last_edit_timestamp": "2020-02-16T13:29:34.999",
                "url_slug": "yong-djangoxie-yi-ge-zi-ji-de-bo-ke-wang-zhan",
                "tags": [
                    1
                ]
            }
        },
        {
            "model": "blog.articles",
            "pk": 2,
            "fields": {
                "title": "Django和Flask的区别",
                "body": "##写在最前面：\r\npython web开发有很多常用的框架，主要包括Django，Flask，Tornado，Diesel，Cubes，Pulsar，Falcon，webpy，大家最熟知的还是Django和Flask，今天就来简单介绍一下Django和Flask的区别，本博客就是使用Django开发的，Flask不是很了解，因为没有用过，今天就借花献佛，简单介绍一下。\r\n\r\n##Flask\r\n\r\nFlask确实很“轻”，不愧是Micro Framework，从Django转向Flask的开发者一定会如此感慨，除非二者均为深入使用过\r\nFlask自由、灵活，可扩展性强，第三方库的选择面广，开发时可以结合自己最喜欢用的轮子，也能结合最流行最强大的Python库\r\n    入门简单，即便没有多少web开发经验，也能很快做出网站\r\n    非常适用于小型网站\r\n    非常适用于开发web服务的API\r\n    开发大型网站无压力，但代码架构需要自己设计，开发成本取决于开发者的能力和经验\r\n    各方面性能均等于或优于Django\r\n    Django自带的或第三方的好评如潮的功能，Flask上总会找到与之类似第三方库\r\n    Flask灵活开发，Python高手基本都会喜欢Flask，但对Django却可能褒贬不一\r\n    Flask与关系型数据库的配合使用不弱于Django，而其与NoSQL数据库的配合远远优于Django\r\n    Flask比Django更加Pythonic，与Python的philosophy更加吻合\r\n\r\n##Django\r\n\r\nDjango太重了，除了web框架，自带ORM和模板引擎，灵活和自由度不够高\r\n    Django能开发小应用，但总会有“杀鸡焉用牛刀”的感觉\r\n    Django的自带ORM非常优秀，综合评价略高于SQLAlchemy\r\n    Django自带的模板引擎简单好用，但其强大程度和综合评价略低于Jinja\r\n    Django自带ORM也使Django与关系型数据库耦合度过高，如果想使用MongoDB等NoSQL数据，需要选取合适的第三方库，且总感觉Django+SQL才是天生一对的搭配，Django+NoSQL砍掉了Django的半壁江山\r\n    Django目前支持Jinja等非官方模板引擎\r\n    Django自带的数据库管理app好评如潮\r\n    Django非常适合企业级网站的开发：快速、靠谱、稳定\r\n    Django成熟、稳定、完善，但相比于Flask，Django的整体生态相对封闭\r\n    Django是Python web框架的先驱，用户多，第三方库最丰富，最好的Python库，如果不能直接用到Django中，也一定能找到与之对应的移植\r\n    Django上手也比较容易，开发文档详细、完善，相关资料丰富",
                "timestamp": "2019-02-21T21:25:28",
                "authorname": "ArithmeticJia",
                "views": 3013,
                "category": "Django",
                "greats": 23,
                "comments": 1,
                "status": "有效",
                "brief": null,
                "pic": "jiablogimages/img2.jpg",
                "istop": "0",
                "articlebodybrief": "##写在最前面：\r\npython web开发有很多常用的框架，主要包括Django，Flask，Tornado，Diesel，Cubes，Pulsar，Falcon，webpy，大家最熟知的还是Django和Flask，今天就来简单介绍一下Django和Flask的区别，本博客就是使用Django开发的，Flask不是很了解，因为没有用过，今天就借花献佛，简单介绍一下。\r\n\r\n##Flask\r\n\r\nFlask确实很“轻”，不愧是Micro Framework，从Django转向Flask的开发者一定会如此感慨，除非二者均为深入使用过\r\nFlask自由、灵活，可扩展性强，第三方库的选择面广，开发时可以结合自己最喜欢用的轮子，也能结合最流行最强大的Python库\r\n    入门简单，即便没有多少web开发经验，也能很快做出网站\r\n    非常适用于小型网站\r\n    非常适用于开发web服务的API\r\n    开发大型网站无压力，但代码架构需要自己设计，开发成本取决于开发者的能力和经验\r\n    各方面性能均等于或优于Django\r\n    Django自带的或第三方的好评如潮的功能，Flask上总会找到与之类似第三方库\r\n    Flask灵活开发，Python高手基本都会喜欢Flask，但对Django却可能褒贬不一\r\n    Flask与关系型数据库的配合使用不弱于Django，而其与NoSQL数据库的配合远远优于Django\r\n    Flask比Django更加Pythonic，与Python的philosophy更加吻合\r\n\r\n##Django\r\n\r\nDjango太重了，除了web框架，自带ORM和模板引擎，灵活和自由度不够高\r\n    Django能开发小应用，但总会有“杀鸡焉用牛刀”的感觉\r\n    Django的自带ORM非常优秀，综合评价略高于SQLAlchemy\r\n    Django自带的模板引擎简单好用，但其强大程度和综合评价略低于Jinja\r\n    Django自带ORM也使Django与关系型数据库耦合度过高，如果想使用MongoDB等NoSQL数据，需要选取合适的第三方库，且总感觉Django+SQL才是天生一对的搭配，Django+NoSQL砍掉了Django的半壁江山\r\n    Django目前支持Jinja等非官方模板引擎\r\n    Django自带的数据库管理app好评如潮\r\n    Django非常适合企业级网站的开发：快速、靠谱、稳定\r\n    Django成熟、稳定、完善，但相比于Flask，Django的整体生态相对封闭\r\n    Django是Python web框架的先驱，用户多，第三方库最丰富，最好的Python库，如果不能直接用到Django中，也一定能找到与之对应的移植\r\n    Django上手也比较容易，开发文档详细、完善，相关资料丰富",
                "last_edit_timestamp": "2020-01-21T19:59:07.883",
                "url_slug": "djangohe-flaskde-qu-bie",
                "tags": [
                    1,
                    2
                ]
            }
        },
}

关于如何写这个api，上一篇文章已经讲过了