Django个人博客开发之分页与Vue分页

最新推荐文章于 2025-07-14 15:24:18 发布

Qingwashuo

最新推荐文章于 2025-07-14 15:24:18 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：项目开发文章标签： Django 博客 Vue 分页

本文链接：https://blog.youkuaiyun.com/ALLENsakaru/article/details/83963693

分页介绍与逻辑

由于当前开发的需求当中各种管理平台的增多，各种各样的列表需求逐渐增多，而往往数据量有很多，很难实现也没有必要将所有的数据都罗列到一个前端页面上，用户用不到，也很浪费资源。所以我们有了分页的需求，将数据分页显示。
现在有1000条文章的数据需要展示在我们的计算机上。
1. 可以将1000条分为每10条一页，这样就形成了分页。我们来看一下分页的逻辑：

页码	数据
1	0 - 9
2	10 - 19
3	20 - 29
......	......
n	(n-1)10 - n10-1

那么这种分页，需要我们定义当前页码还有单页数据长度。

2. 这样的分页，每次请求，都需要对1000条数据进行遍历，也许浏览者只需要第20条数据，所以，我们是不是可以在上面的基础上，对使用者进行”欺诈”呢？

分页码	页码	数据
0 - 29	1	0 - 9
	2	10 - 19
	3	20 - 29
30 - 59	4	30 - 39
	5	40 - 49
	6	50 - 59

这种逻辑，当用户请求数据，先不去查询所有数据，而是查询前30条数据，然后，对这30条数据进行分页，如果有人查询到第4页，我们就接着加载。

到这里，分页的逻辑并没有结束，还需要想明白前端除了分页的数据，还需要什么：

分页的数据
当前的页面用来搭建上一页和下一页
页码的序列

Vue介绍

上面我们了解了基本的分页，我们今天主要用ajax+vue实现分页的动态加载。当然在这里先需要给大家介绍一下我们的vue.js, 是一套构建用户界面的渐进式框架。只关注视图层的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

MVC (Model – View - Control)模式

MTV (Model – Template - Views)模式

Vue.js采用的是MVVM(ModelView-viewModel)

强调前端的双向绑定逻辑

通俗的讲，vue.js可以将我们从后端传递过来的json数据传递到HTML当中，进行动态的更新。

首先可以从vue的官网（https://vuejs.org/）上下载vue的脚本，在这里，我们使用已经下载好的文件，将他们放入static下面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejsExample</title>
    <script src = "/static/js/jquery.js"></script>
    <script src = "/static/js/vue.min.js"></script>
</head>
<body>
    <h1>
        这个是我们vuejs的测试页面
    </h1>
    <!--vue 绑定和Django的jinja2模板系统使用的标签是一样的，为了区分我们需要用verbatim将vue的标签包围起来-->
    {% verbatim myblock %}
    <div id = "vueExample">
        <p> 基本的文本绑定 </p>
        <p> hello world I am {
  
  { name }}</p>
    </div>
    {% endverbatim myblock %}
    <script>
        new Vue( //实例化vue对象
             {
                 el: "#vueExample", //绑定的元素是一个id为vueExample的div
                 data:{
                     name: "while, I am so cool"
                 } //可供绑定的数据设置
             }
        )
    </script>
</body>
</html>

效果如下：

这个是vue最基础的例子，在这里我们要注意一下几个点：

{% verbatim myblock %}
    <div id = "vueExample">
        <p> 基本的文本绑定:</p>
        <p> hello world I am {
  
  { name }}</p>
    </div>
{% endverbatim myblock %}

vue对象在HTML当中调用，在js当中进行数据的声明，其中有一些固定的点和结构需要记忆。首先需要声明vue对象，指定绑定的HTML标签，选择器是jq选择器，这里用#veuExample来绑定。具体的数据都放在一个data的地方

{% verbatim myblock %}
    <div id = "vueExample">
        <p> 基本的文本绑定:</p>
        <p> hello world I am {
  
  { name }}</p>
    </div>
{% endverbatim myblock %}
<script>
    new Vue(
         {
             el: "#vueExample", //绑定的对象
             data: { //绑定的具体数据
                 name : "while"
             }
         }
    )
</script>

上面是一个最简单的文本绑定的例子，我们接下来再看几种绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejsExample</title>
    <script src = "/static/js/jquery.js"></script>
    <script src = "/static/js/vue.min.js"></script>
</head>
<body>
    <h1>
        这个是我们vuejs的测试页面
    </h1>
    <!--vue 绑定和Django的jinja2模板系统使用的标签是一样的，为了区分我们需要用verbatim将vue的标签包围起来-->
    {% verbatim myblock %}
        <div id = "vueExample">
        <p> 基本的循环绑定 </p>
        <p v-for = "p in project"> hello world I like {
  
  { p }}</p>  <!--关注循环体-->
    </div>
    {% endverbatim myblock %}
    <script>
        new Vue( //实例化vue对象
             {
                 el: "#vueE