运用 Django 的 Paginator 实现 分页、传递给 Vue 父子组件展示。
首先创建 Django 项目

然后在 子应用的 settings 里 解决跨域Django 分页 & Vue父子组件 实现
MIDDLEWARE 向我这样的 配置顺序来 配置
然后 在 子应用 的 models 随意的创建一张表 然后 终端 数据库迁移

Django 分页 & Vue父子组件 实现

这里默认使用的是 Django 的 sqlite3

添加后,点击 DB 保存一下 数据就存在了。

Django 分页 & Vue父子组件 实现

然后写视图层, 先注册路由

Django 分页 & Vue父子组件 实现
写 视图层, 引入 需要的资源 Paginator 分页器,Serializer 序列化器,Response 返回响应
先 在数据库 把 所有数据 拿出来以供使用,然后先定义好一个序列化器(反正代码少)

Django 分页 & Vue父子组件 实现
引入 相关的配置,定义序列化器 先前台返回数据,定义分页的类视图,获取GET的参数,来确定用户想要的页数,在查询所有数据。
这个 request 的 query_params.get() 在官方文档明确标出 专门获取 GET 传参,当然也可以 query_params[‘参数’] 这样获取,但是这样 参数为空的时候 就会报错 很不符合逻辑

Django 分页 & Vue父子组件 实现
这两个 方法 都有对应的注释
然后 创建 我们的 Vue 页面 注册到 index.js 里,因为要做父子组件 所以创建 两个页面

Django 分页 & Vue父子组件 实现
在 main.js 里 注册 axios 全局解决跨域
Django 分页 & Vue父子组件 实现
父子组件连接,设置 mounted 把 后台发送的数据全部返回过来 使用,

Django 分页 & Vue父子组件 实现
获取 页面需要的数据,说明一下,用的父子组件 父组件展示数据,子组件 展示 分页的下一页 第几页什么的。
Django 分页 & Vue父子组件 实现
Django 分页 & Vue父子组件 实现
父组件 此时 就已经出现数据了,但是没有点击的东西 看子组件。

Django 分页 & Vue父子组件 实现

然后 拿着获取的数据 去请求 后台的接口,.then 展示 页面的数据。
然后收工

相关文章:

  • 2022-12-23
  • 2021-09-12
  • 2021-11-10
  • 2021-05-09
  • 2021-11-20
  • 2021-07-19
  • 2021-12-19
  • 2021-10-30
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-07-24
  • 2022-12-23
相关资源
相似解决方案