zoukankan      html  css  js  c++  java
  • page分页问题,根据页码获取对应页面的数据,接口调用

     添加一个log.js文件,进行接口调用。

    import axios from '@/libs/api.request'
    
    const MODULE_URL = '/log';
    
    export const actionLogData = (params, cb) => {
      axios.request({
        url: `${MODULE_URL}/actionLog`,//接口位置
        method: 'get',
        params
      }).then(cb);
    };
    Page分页问题。

    <Page class="table-page clearfix" :total="paging.total" 
                        :pageSize
    ="paging.pageSize"
                        :current
    ="paging.pageNo"
                        show-total show-elevator
                        @on-change
    ="pageChange"/>
     :total="paging.total"  表示总共中存在多少条数据;

     :pageSize="paging.pageSize"  表示一个页面上需要显示多少条数据;

     :current="paging.pageNo" 表示当前页码;

     @on-change="pageChange" 表示点击对应页码时触发pagechange函数。

    1、导入接口。

    import { actionLogData } from '@/api/log'; //{}中是导入接口的名称,from后显示的是开始时所写log.js文件的位置
    2、在export default{}中声明全局变量,并设定页面数据的初始值。
      export default {
        data() {
          return {
         getdata : [],//声明全局变量
             // 列表页码(其中包括当前页码:pageNum;页面中显示的数据条数:pageSize,以及数据库中存在当前数据的总条数:total)
             paging: {
               pageNum: 1,
               pageSize: 13,
               total: 0,       
    },
    3、在methods:{}中进行接口调用,写入函数initList中,其中params中写明调用接口时需要输入的参数。通过调用actionLogData接口,获取需要的值,可以先通过console.log(res)来判断获取数据中的哪些属性值。

    在点击页码进行数据切换时,获取对应的页面的page,并调用函数pageChange(page)来获取到对应页面中的数据。
       methods: {
          initList() {
            const params = {
              pageSize: this.paging.pageSize,
              pageNo: this.paging.pageNum,
            };
    
            actionLogData(params,res=>{
              if (!res.status) {
                console.log('请求遇到错误!');
                return;
              }
              const { data } = res;
              this.getdata = data.list; //获取数据
              this.paging.total = data.total; //获取全部数据的数量
            }, err => {
              this.$Message.error('请求遇到错误!请稍后再试');
            });
          },
    
          /*页码切换*/
          pageChange(page) {
            this.paging.pageNum = page;//根据点击时间获取当前页面值page,进行数据回传。
            this.initList();
          }
        },
    4、于此同时,在mounted()中发起后端请求,拿取数据;

        mounted() {
          this.initList();
          this.pageChange(page);
        }

    5、最后将获取到的数据进行展示,获取到的数据为第3步中的getData,此处可根据自己所需进行数据类型的获取,查看类型以及所属属性可以根据后台接口中查取的数据进行判断。


  • 相关阅读:
    Row size too large. The maximum row size for the used table type 解决
    pandas Series介绍
    Scala核心编程_第08章 面向对象编程(中高级部分)
    mysql增删改字段,重命名替换字段
    python报错ValueError: cannot reindex from a duplicate axis
    pandas DataFrame 数据筛选
    Scala核心编程_第07章 面向对象编程(中级部分)
    Scala核心编程_第06章 面向对象编程(基础部分)
    《The Rise and Fall of Scala》scala兴衰读后感
    信贷业务(Ali)
  • 原文地址:https://www.cnblogs.com/qing0228/p/11324295.html
Copyright © 2011-2022 走看看