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
DjangoVue 分页通常是在前端和后端分离的应用场景下进行的。以下是简要介绍: **在 Django分页:** Django 的 ORM(Object-Relational Mapper)提供了一个内置的分页功能。你可以使用 `Paginator` 类来自 Django 的 `django.core.paginator` 模块来进行分页。例如,在视图中获取数据并分页: ```python from django.core.paginator import Paginator def list_view(request): queryset = YourModel.objects.all() paginator = Paginator(queryset, per_page=10) # 设置每页显示的数量 page_number = request.GET.get('page', 1) # 获取请求中的页码,默认第一页 page_obj = paginator.get_page(page_number) context = {'page_obj': page_obj} return render(request, 'your_template.html', context) ``` 在模板中,你可以通过循环遍历 `page_obj.object_list` 来显示每个页面的内容。 **在 Vue.js 中分页:** Vue 本身并不直接支持分页,但可以配合其他库如 `vue-paginate` 或者 `axios` 跟 Django API 进行交互。一般的做法是创建一个 Vue 组件,处理用户点击事件来发送分页请求到 Django API,并接收返回的数据更新组件的状态: ```html <template> <div v-for="item in items"> <!-- 渲染列表项 --> </div> <button @click="fetchPage">Next</button> </template> <script> import axios from 'axios'; export default { data() { return { currentPage: 1, items: [], totalPages: null, }; }, methods: { fetchPage() { axios.get('/api/v1/list?page=' + this.currentPage) .then(response => { this.items = response.data; // 更新totalPages如果包含在响应中 this.totalPages = response.headers['X-Total-Pages']; }); }, }, created() { this.fetchPage(); }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值