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

阅读量：

分页介绍与逻辑

因当前开发需求中管理平台数量的增加而导致多样化的列表需求不断增加。尽管面临大量数据但难以实现也不必要将所有数据直接展示在前端页面上以防资源浪费及超出用户实际需求。因此我们引入了分页功能以便逐页显示数据。目前系统中需要在计算机上展示的数据总量为1000条文章。建议按照每十篇文章一页来划分从而形成了分页机制。

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

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

这种分页方式，在每次请求过程中都必须遍历这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条的数据获取，并将这些数据按页进行分块处理。随后，在完成初始页面加载后，请继续加载后续的页面内容以满足用户的浏览需求。

到此为止, 分页机制尚未完成, 仍需理清前端除了显示数据之外还有什么需求：

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

Vue介绍

我们已经熟悉了基础分页的操作，在今天的学习中我们将主要通过ajax+vue技术来实现分页功能的数据动态加载功能。在此之前，请大家先了解一下我们的核心组件——vue.js, 这是一个用于构建用户界面的渐进式框架. 该组件的核心目标是通过尽可能简单的 API 实现数据绑定与组合视图组件之间的关系.

MVC****(Model – View - Control)模式

MTV (Model – Template - Views)模式

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

强调前端的双向绑定逻辑

简单来说，Vue.js能够帮助前端接收并解析来自后端的数据，并将其实时显示在页面上。

可从其官方网站（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: "#vueExample", //绑定的元素是一个id为vueExample的div
    
              data:{
    
                  name: "while, I am so cool",
    
                  project: ["python", "linux", "php"]
    
              } //可供绑定的数据设置
    
          }
    
     )
    
     </script>
    
 </body>
    
 </html>
    
    
    
    
    代码解读

效果如下：

带有属性和映射的循环绑定

复制代码

 <!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>
    
     <ul>
    
         <li v-for = "p in projects">
    
             <span v-bind:id = "p.color">
    
                 {{ p.name }}
    
             </span>
    
         </li>
    
     </ul>
    
     </div>
    
     {% endverbatim myblock %}
    
     <script>
    
     new Vue( //实例化vue对象
    
          {
    
              el: "#vueExample", //绑定的元素是一个id为vueExample的div
    
              data:{
    
                  name: "while, I am so cool",
    
                  project: ["python", "linux", "php"],
    
                  projects:[
    
                      {name: "python", color: "red"},
    
                      {name: "linux", color: "green"},
    
                      {name: "php", color: "blue"}
    
                  ]
    
              } //可供绑定的数据设置
    
          }
    
     )
    
     </script>
    
 </body>
    
 </html>
    
    
    
    
    代码解读

效果如下：

基本的事件绑定

复制代码

 <!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>
    
     <span v-on:click = "alertthing">按我呀！</span>
    
     </div>
    
     {% endverbatim myblock %}
    
     <script>
    
     new Vue( //实例化vue对象
    
          {
    
              el: "#vueExample", //绑定的元素是一个id为vueExample的div
    
              data:{
    
                  name: "while, I am so cool",
    
                  project: ["python", "linux", "php"],
    
                  projects:[
    
                      {name: "python", color: "red"},
    
                      {name: "linux", color: "green"},
    
                      {name: "php", color: "blue"}
    
                  ]
    
              }, //可供绑定的数据设置
    
              methods: {
    
                  alertthing: function () {
    
                      alert("按我干啥？")
    
                  }
    
              }
    
          }
    
     )
    
     </script>
    
 </body>
    
 </html>
    
    
    
    
    代码解读

效果如下：

基于Vue尝试分页

Vue后台数据返回

/OurBlog/Aritcles/views.py

复制代码

 from Article.models import Article

    
 from django.core.paginator import Paginator
    
 from django.http import JsonResponse
    
  
    
 def vuePageData(request):
    
     """
    
     提供分页的ajax数据
    
     """
    
     if request.method == "GET": #如果是get请求
    
     page = request.GET.get("page") #尝试获取page
    
     if not page: #默认page 为1
    
         page = 1
    
     else:
    
         page = int(page) #get过来的page参数是字符串
    
     aritcles = Article.objects.all() #查询所有的数据
    
     paginator = Paginator(aritcles,3) #对数据进行分页，每页三条
    
     pageData = paginator.page(page) #获取具体页的数据
    
     page_data = [] #对数据进行json结构化，json只接受字典对象
    
     for data in pageData:
    
         classify = data.classify.all() #多对多字段需要首先查询出所有对应的字段,查询出来还是数据库对象
    
         if classify:
    
             classify = [i.label for i in classify] #对字段取指定的lable
    
         else:
    
             classify = "" #空类表不可以建json序列，所以，我们改完字符串
    
         page_data.append(
    
             {
    
                 "title": data.title,
    
                 "author": data.author.name, #w外键，必须调用具体的字段
    
                 "time": data.time,
    
                 "description": data.description,
    
                 "picture": data.picture.name, #这里的name是由于文件对象有name属性
    
                 "classify": classify,
    
                 "id": data.id
    
             }
    
         )
    
     result = {
    
         "pageData": page_data
    
     }
    
     return JsonResponse(result)
    
    
    
    
    代码解读

效果如下：

Html前端进行调用

/OurBlog/template/myArticle.html

复制代码

 {% extends "base.html" %}

    
  
    
 {% block title %}
    
     我的博客
    
 {% endblock %}
    
  
    
 {% block style %}
    
 <link href="/static/css/main.css" rel="stylesheet">
    
 <script src="/static/js/jquery.js"></script>
    
 <script src="/static/js/vue.min.js"></script>
    
 {% endblock %}
    
  
    
 {% block content %}
    
 <div class="container">
    
   <div class="con_content">
    
     <div class="about_box">
    
       <h2 class="nh1"><span>您现在的位置是：<a href="/" target="_blank">网站首页</a>>><a href="#" target="_blank">个人日记</a></span><b>个人日记</b></h2>
    
       {% verbatim myblock %}
    
       <div class="dtxw box" id = "dataList">
    
         <li v-for = "page in page_data">
    
           <div class="dttext f_l">
    
             <ul>
    
               <h2><a href="/">{{ page.title }}</a></h2>
    
               <p v-html="page.description">{{ page.description }}</p> <!-- 注意和Django的safe标签的区分 v-html == safe -->
    
               <span>{{ page.time }}</span>
    
             </ul>
    
           </div>
    
           <div class="xwpic f_r"><a href="/"><img v-bind:src="['/static/'+page.picture]"></a></div> <!-- 注意绑定数据的拼接 -->
    
         </li>
    
       </div>
    
       {% endverbatim myblock %}
    
  
    
       <div class="pagelist">页次：1/1 每页25 总数10<a href="/">首页</a><a href="/">上一页</a><a href="/">下一页</a><a href="/">尾页</a></div>
    
     </div>
    
   </div>
    
   <div class="blank"></div>
    
   <!-- container代码 结束 -->
    
 </div>
    
     <script>
    
     $(
    
          function () {
    
             $.ajax(
    
                  {
    
                      url: "/vuePageData/",
    
                      type: "GET",
    
                      data: "",
    
                      dataType: "json", //我们需要抢到我们的ajax请求需求数据是json
    
                      success: function (data) {
    
                          new Vue( //注意new地下和var
    
                              {
    
                                el:"#dataList", //绑定指定元素，注意选择器，注意#
    
                                data: {
    
                                    page_data: data["pageData"]                                   }
    
                               }
    
                          );
    
                      },
    
                      error: function (error) {
    
                          console.log(error)
    
                      }
    
                  }
    
             )
    
          }
    
     );
    
     </script>
    
 {% endblock %}
    
    
    
    
    代码解读

在系统后台管理模块内，在admin之前就已经对article进行了添加操作。因此，在界面更新后，我们看到呈现出了良好的效果。

基于vue-resource尝试分页

上面的逻辑尽管可以实现分页功能但也存在数据损失的问题因此我们需要重点实施第2种分页方案其中重点分析后端处理流程

我们先来查看分页的逻辑

分页码	页码	数据
1	1	0 - 3 0，1，2
2	3 - 6 3，4 ，5
3	6 - 9 6，7，8
2	4	9 - 12 9，10，11
5	12 - 15 12，13，14
6	15 - 18 15，16，17

每次查询，查询3页。每页查询 3条。当收到单页码请求：我们只查询9条

首先完成第一步逻辑

1,2,3 --> 1

4,5,6 --> 2

复制代码

 select_page = 3 #每次3页

    
 page_num = 3 #每页3条
    
 select_num = select_page*page_num #单次查询9条
    
 resutl_dict = {}
    
  
    
 query_num = page/page_num #获取查询序列号
    
 if query_num == int(query_num): #如果整除
    
     query_num = int(query_num)  #返回整形数
    
 else: #否则
    
     query_num = int(query_num)+1 #返回整形数加1
    
    
    
    
    代码解读

首先完成第二步逻辑

1 查询 0-9

2 查询 9-18

所以

n 查询 (n-1)9-n9

复制代码

 start = (query_num - 1)*select_num

    
 end = query_num*select_num
    
    
    
    
    代码解读

然后，我们需要了解一个原理

Django模型的查询返回的对象为QuerySet实例，在后续操作中我们可能会对其结果进行重新构造；然而，在当前场景下这类QuerySet表现出惰性行为

复制代码

    articels = Article.objects.all() #现在当前查询不会执行，直到调用
    
    代码解读

Good

复制代码

    articels = Article.objects.all()[start:end] #现在当前查询不会执行，直到调用,当前写法的查询效率和数据库limit语句相似
    
    代码解读

Bad

复制代码

 articels = Article.objects.all() #现在当前查询不会执行，直到调用,当前写法的查询效率和数据库limit语句相似

    
 articles = articels[start:end]
    
    
    
    
    代码解读

然后我们查看完整的分页逻辑代码

复制代码

 def vuePageData1(request):

    
     """
    
     第二种分页的视图函数
    
     """
    
     if request.method == "GET": #如果是get请求
    
     page = request.GET.get("page") #尝试获取page
    
     if not page: #默认page 为1
    
         page = 1
    
     else:
    
         page = int(page) #get过来的page参数是字符串
    
  
    
     select_page = 3 #每次3页
    
     page_num = 3 #每页3条
    
     select_num = select_page*page_num #单次查询9条
    
     resutl_dict = {}
    
  
    
     query_num = page/page_num #获取查询序列号
    
     if query_num == int(query_num): #如果整除
    
         query_num = int(query_num)  #返回整形数
    
     else: #否则
    
         query_num = int(query_num)+1 #返回整形数加1
    
  
    
     start = (query_num - 1)*select_num
    
     end = query_num*select_num
    
     articels = Article.objects.all()[start:end] #现在当前查询不会执行，只到调用,当前写法的查询效率和数据库limit语句相似
    
     #进行分页
    
     paginator = Paginator(articels,page_num) #分页值分了9条数据
    
 	page = paginator(page)
    
    
    
    
    代码解读

如果查询1,2,3，我们请求的时候page是1,2,3

那如果page = 4 查询的 1

复制代码

 query_num = 2

    
  
    
 start = (query_num-1)*select_num = (2-1)*3 = 3
    
  
    
 4 – 3 = 1
    
    
    
    
    代码解读

复制代码

    pageData = paginator(page-start)
    
    代码解读

分页视图完整代码

\OurBlog\Article\views.py

复制代码

 def vuePageData_1(request):

    
     """
    
     这个函数是用来返回分页数据的，一定要认真
    
     query_page 分页量
    
     首先划定逻辑
    
     每页3条
    
     每次3页
    
     到第3页我们返回下5页
    
     """
    
     select_page = 3  # 每次3页
    
     page_num = 3  # 每页3条
    
     select_num = select_page * page_num  # 单次查询的总条数
    
     page_result = {}  # 返回的结果
    
  
    
     if request.method == "GET":  # 如果是get请求
    
     page = request.GET.get("page")  # 获取page值，在这里注意一定要用get，如果用[]容易导致如果page没有参数会报错
    
     if page and int(page) > 1:  # page存在，且大于1
    
         page = int(page)
    
     else:  # 设置默认为1
    
         page = 1
    
  
    
     query_num = page / page_num
    
     if query_num == int(query_num):
    
         query_num = int(query_num)
    
     else:
    
         query_num = int(query_num) + 1
    
  
    
     start = (query_num - 1) * select_num
    
     end = query_num * select_num + 3
    
     articles = Article.objects.all()[start:end]
    
     paginator = Paginator(articles, page_num)  # 进行每页5条的分页
    
     print(page)
    
     print(start)
    
  
    
     pageData = paginator.page(page-start/page_num) #注意加入页面为4 我们的start是9
    
  
    
     page_data = []  # 对数据进行从新整合
    
  
    
     for data in pageData:
    
         page_data.append(
    
             {
    
                 "title": data.title,
    
                 "author": data.author.name,
    
                 "time": data.time,
    
                 "picture": data.picture.name,  # 这里要注意，data.picture 返回的是图片对象，我们获取他的name
    
                 'description': data.description,
    
                 'id': data.id,
    
             }
    
         )
    
     page_result["pageData"] = page_data
    
  
    
     if page % select_page == 0 and len(paginator.page_range) > 3:
    
         page_result["page_range"] = [page + page_num * (query_num - 1) for page in paginator.page_range]
    
     else:
    
         page_result["page_range"] = [page + page_num * (query_num - 1) for page in paginator.page_range][:-1]
    
  
    
     return JsonResponse(page_result)
    
    
    
    
    代码解读

HTML前端

\OurBlog\template\myArticle_v1.html

复制代码

 <!doctype html>

    
 <html>
    
 <head>
    
 <meta charset="utf-8">
    
 <title>个人博客模板古典系列之――江南墨卷</title>
    
 <meta name="keywords" content="个人博客模板古典系列之――江南墨卷" />
    
 <meta name="description" content="个人博客模板古典系列之――江南墨卷" />
    
 <link href="/static/css/base.css" rel="stylesheet">
    
 <link href="/static/css/main.css" rel="stylesheet">
    
  
    
 <!--[if lt IE 9]>
    
 <script src="js/modernizr.js"></script>
    
 <![endif]-->
    
 <script type="text/javascript" src="/static/js/jquery.js"></script>
    
 <script type="text/javascript" src="/static/js/vue.min.js"></script>
    
 <script type="text/javascript" src="/static/js/vue-resource.js"></script>
    
  
    
 </head>
    
 <body>
    
 <div id="wrapper">
    
 <header>
    
   <div class="headtop"></div>
    
   <div class="contenttop">
    
     <div class="logo f_l">个人博客模板古典系列之――江南墨卷</div>
    
     <div class="search f_r">
    
       <form action="/e/search/index.php" method="post" name="searchform" id="searchform">
    
     <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字" style="color: rgb(153, 153, 153);" onfocus="if(value=='请输入关键字'){this.style.color='#000';value=''}" onblur="if(value==''){this.style.color='#999';value='请输入关键字'}" type="text">
    
     <input name="show" value="title" type="hidden">
    
     <input name="tempid" value="1" type="hidden">
    
     <input name="tbname" value="news" type="hidden">
    
     <input name="Submit" class="input_submit" value="搜索" type="submit">
    
       </form>
    
     </div>
    
     <div class="blank"></div>
    
     <nav>
    
       <div  class="navigation">
    
     <ul class="menu">
    
       <li><a href="index.html">网站首页</a></li>
    
       <li><a href="#">关于我</a>
    
         <ul>
    
           <li><a href="article.html">个人简介</a></li>
    
           <li><a href="listpic.html">个人相册</a></li>
    
         </ul>
    
       </li>
    
       <li><a href="#">我的日记</a>
    
         <ul>
    
           <li><a href="articleList.html">个人日记</a></li>
    
           <li><a href="articleList.html">学习笔记</a></li>
    
         </ul>
    
       </li>
    
       <li><a href="articleList.html">技术文章</a> </li>
    
       <li><a href="#">给我留言</a> </li>
    
     </ul>
    
       </div>
    
     </nav>
    
     <SCRIPT type=text/javascript>
    
    // Navigation Menu
    
    $(function() {
    
       $(".menu ul").css({display: "none"}); // Opera Fix
    
       $(".menu li").hover(function(){
    
      $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown("normal");
    
       },function(){
    
      $(this).find('ul:first').css({visibility: "hidden"});
    
       });
    
    });
    
 </SCRIPT> 
    
   </div>
    
 </header>
    
 <body>
    
 <div class="container">
    
   <div class="con_content">
    
     <div class="about_box" id = "vueData">
    
       <h2 class="nh1"><span>您现在的位置是：<a href="/" target="_blank">网站首页</a>>><a href="#" target="_blank">个人日记</a></span><b>个人日记</b></h2>
    
     {% verbatim myblock %} <!--vue的格式化标签-->
    
         <div class="dtxw box">
    
             <li v-for = "page in page_data">
    
                   <div class="dttext f_l">
    
                         <ul>
    
                             <!--注意vue的属性绑定 两个问题
    
                                 问题一：要用数组类型
    
                                 问题二：要注意v-bind:后面不可以有空格 强迫症尤其小心
    
                             -->
    
                           <h2><a v-bind:href="['/article/?id='+page.id]">{{ page.title }}</a></h2>
    
                           <p v-html="page.description">{{ page.description }}</p>
    
                           <span>{{ page.time }}</span>
    
                         </ul>
    
                   </div>
    
                 <div class="xwpic f_r"><a href="/"><img v-bind:src="['/static/'+page.picture]"></a></div>
    
             </li>
    
       </div>
    
         <div class="pagelist">
    
  
    
             <span v-for="p in page_range" >
    
                 <a v-on:click="getPage(p)">{{ p }}</a> <!--注意vue的函数绑定和传参-->
    
             </span>
    
       </div>
    
     {% endverbatim myblock %}
    
     </div>
    
   </div>
    
   <div class="blank"></div>
    
   <!-- container代码 结束 -->
    
   
    
   <footer>
    
     <div class="footer">
    
       <div class="f_l">
    
     <p>All Rights Reserved 版权所有：<a href="http://www.yangqq.com">杨青个人博客</a> 备案号：蜀ICP备00000000号</p>
    
       </div>
    
       <div class="f_r textr">
    
     <p>Design by DanceSmile</p>
    
       </div>
    
     </div>
    
   </footer>
    
 </div>
    
 </body>
    
 <script>
    
     var list = [];
    
     Vue.use(VueResource); //首先需要声明一下vue对象变成了vueResource对象
    
     new Vue(
    
     {
    
         el: "#vueData",
    
         data: {
    
             page_data: "",
    
             page_range: []
    
         },
    
         // created方法在初始化的时候调用的，相当于我们默认的第一页
    
         created: function () {
    
             var url = "/VP1/";
    
             this.$http.get(url).then(
    
                  function (data) {
    
                       this.page_data = data["data"]["pageData"]; //用ajax返回的数据更新到我们绑定好的数据当中
    
                       this.page_range = data["data"]["page_range"]; //用ajax返回的数据更新到我们绑定好的数据当中
    
                       for(var ds in data["data"]["page_range"]){
    
                           list.push(data["data"]["page_range"][ds])
    
                       }
    
                  },
    
                  function (error) {
    
                      console.log(error)
    
                  }
    
             )
    
         },
    
         methods: {
    
             getPage: function (page) {
    
                 var url = "/VP1/?page="+page;
    
                 this.$http.get(url).then(
    
                  function (data) {
    
                       page_range = data["data"]["page_range"];
    
                       this.page_data = data["data"]["pageData"];
    
                       for(var ds in data["data"]["page_range"]){
    
                           console.log("++++++++++++++++++++++++++++++++++++++++++++");
    
                           pageNumber = page_range[ds];
    
                           if($.inArray(pageNumber,list) == -1){
    
                               list.push(pageNumber)
    
                           }
    
                           console.log(pageNumber);
    
                           console.log("++++++++++++++++++++++++++++++++++++++++++++");
    
  
    
                       }
    
  
    
                       this.page_range = list;
    
                      console.log(data)
    
                  },
    
                  function (error) {
    
                      console.log(error)
    
                  }
    
             )
    
             }
    
         }
    
     }
    
     )
    
 </script>
    
 </html>
    
    
    
    
    代码解读

全部评论 (0)

还没有任何评论哟~

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

分页介绍与逻辑由于当前开发的需求当中各种管理平台的增多，各种各样的列表需求逐渐增多，而往往数据量有很多，很难实现也没有必要将所有的数据都罗列到一个前端页面上，用户用不到，也很浪费资源。所以我们有了分...

个人博客分页

随着个人网站的博客越来越多，博客分页也提上了日程，否则每次进入网站的博客页面，都要同时加载几十篇博客的文本和封面图片，用户体验太差（虽然用户只有我）。于是今天抽了些时间动手把它做了。其实之前搭建的搜...

Vue组件开发，个人博客页面demo

组件化开发首先，组件化开发不是前端所特有的东西。就我个人的理解而言。首先，从字面上去看，组件化开发：也就是将整体分割成一个个小的组件，将整体进行细化就是组件化。每一个组件都是一个个独立的个体，也就是...

个人博客：分页管理

分类管理 1、分类管理页面 2、分类列表分页 3、分类新增、修改、删除分类管理页面 <!DOCTYPEhtml <htmllang=enxmlns:th=http://www.w3.org/1999...

SpringBoot个人博客开发（三）分类及标签页面

\分类页面开始是同样步骤，先把首页代码除开主体部分复制下来。创建type.html 首页代码复制进去修改此处分类页面中间内容分为三部分：分类数量统计、分类图标及数量、分类所对应博客列表、翻页按...

开发小而美的个人博客之页面开发

文章目录一、技术准备二、前端展示 1、首页 ①首页效果展示 ②首页代码展示 2、分类页 ①分类页效果展示 ②分类页代码展示（只展示中间内容） 3、标签页 ①标签页效果展示 ②标签页代码展示（只展示...

SpringBoot个人博客开发（二）----博客详情页面

博客详情页面 \开始导航页和页尾等信息保持不变，只需改动中间信息即可改变中间信息开始创建Blog.html 复制index的全部代码，然后删除掉中间部分此时页面如图加入预留位（中间区域分为五...

Django博客--4.开发博客文章详情页

文章目录 0.思路引导 1.设计文章详情页的URL 2.获取文章的URL 3.编写detail视图函数 4.编写详情页模板 5.更改主页中跳转详情页的地址链接 6.模板继承抽取base.html 7....

Django制作个人博客——前端页面

我们Django后台已经搭建好了，但是前端页面还没创建好，所以今天要开始写前端了！给大家推荐一个写前端的办法：在百度里面搜索bootstrap,点击bootstrap中文网，然后里面有一个组件，组件...

个人博客基础内容（分类页）

1、在个人博客blog中新建分类页（types） 2、头部内容 3、编写分类页的标签页面 4、中间内容 <!文章内容 <divclass=elevenwidecolumn <h3class=uihea...

是否确定退出登录?

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

分页介绍与逻辑

Vue介绍

基于Vue尝试分页

基于vue-resource尝试分页

全部评论 (0)

相关文章推荐

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

个人博客分页

Vue组件开发，个人博客页面demo

个人博客：分页管理

SpringBoot个人博客开发（三）分类及标签页面

开发小而美的个人博客之页面开发

SpringBoot个人博客开发（二）----博客详情页面

Django博客--4.开发博客文章详情页

Django制作个人博客——前端页面

个人博客基础内容（分类页）