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

分页介绍与逻辑

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

页码 数据
1 0 - 9
2 10 - 19
3 20 - 29
...... ......
n (n-1)*10 - n*10-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页,我们就接着加载。

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

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

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值