page分页问题,根据页码获取对应页面的数据,接口调用

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‘;

2、在export default{}中声明全局变量,并设定页面数据的初始值。

  export default {
    data() {
      return {
getdata : [],//声明全局变量
        // 列表页码
         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;
        this.initList();
      }
    },

4、于此同时,在mounted()中发起后端请求,拿取数据;

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

原文地址:https://www.cnblogs.com/qing0228/p/11324295.html

时间: 2024-10-06 01:27:30

page分页问题,根据页码获取对应页面的数据,接口调用的相关文章

servlet自动获取前端页面提交数据

servlet自动获取前端页面jsp提交数据 以下是本人在学习过程中,因前端页面提交参数过多,后台servlet封装实体类过于麻烦而写的一个工具类,应用于jsp/servlet数据提交后,基于MVC+MyBatis进行数据持久化的过程.这里只介绍页面到servlet(controller)提交数据封装对象的过程,MVC+MyBatis访问数据库不在这里介绍. 1.前端页面及代码 1)前端表单页面构建(用于测试简单构建的页面有点丑陋哦~) 2)前端jsp页面代码   这里使用了Ajax异步 get

微信公众平台--2.获取接口调用凭据

获取access_token access_token 是公众号的全局唯一票据,公众号调用各接口时都需要使用access_token,开发者需要进行妥善保管,至少保留512个字符空间,有效期为2小时,需要定时刷新,重复获取会导致上次获取的access_token失效. 公众号可以使用AppID和AppSecret调用本接口来获取access_token,每天可以获取有限次(10000). 接口调用请求: https://api.weixin.qq.com/cgi-bin/token?grant_

自己写的一个分页查询前台页码控制

<!doctype html> <%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%> <%@ include file="/pages/common/taglibs.jsp"%> <html> <head> <meta http-equiv=Co

TP框架中的page分页实现

今天介绍一下如何在tp框架中使用分页功能(TP3.2) 1.第一步,找到我们需要使用的分页类(page.class.php),并将其放在命名空间根目录下的一个位置,比如Library文件夹下或者当前模块下(例如Application  ) 打开分页类,修改命名空间 2.第二步,找到需要分页功能的控制器中相对应的操作方法 public function index(){ $art=M("article"); //分页显示方法 $zts=$art->count(); //查询总条数

.net 获取https页面的信息 在iis7.5服务器上不管用

原文:.net 获取https页面的信息 在iis7.5服务器上不管用 让我纠结了一天多的问题,给大家看下,有相同情况的可以不用浪费时间了,本人当时找了好半天都没找到什么有用的信息,项目在本地没有问题,但部署在服务器后,获取不到https页面的信息,加入下面的代码就可以了,因为iis7.5的安全协议比较高的原因. 我的获取页面需要cookie,不需要的可以去掉: GET的方法: 1 /// <summary> 2 /// 获取URL访问的HTML内容 获取https 页面的 3 /// <

iframe父页面获取子页面的高度

最近做项目中用到了iframe,子页面更改父页面的高度,经过九九八十一难,找到了解决的办法. $(window).load(function() {  var h=$(document).height();  var ifHeight = $(window.top.document).find(".XX").css({  height:h }); }); window.top:是获取子页面所有body以上的元素. window.parent()是获取子页面body的上一级父元素.

js获取当前页面url网址等信息

使用js获取当前页面的url网址信息. 1.设置或获取整个 URL 为字符串: window.location.href 2.设置或获取与 URL 关联的端口号码: window.location.port 3.设置或获取 URL 的协议部分 window.location.protocol 4.(www.jbxue.com)设置或获取 href 属性中跟在问号后面的部分 window.location.search 5.获取变量的值(截取等号后面的部分) var url = window.lo

获取网页页面高度

<SCRIPT   LANGUAGE="JavaScript">  var s = "网页可见区域宽 :"+ document.body.clientWidth;  s += "\r\n网页可见区域高:"+ document.body.clientHeight;   s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";  s

PHP获取当前页面URL函数

在php中获取页面URL文章我都介绍过了几十次了,但今天发现有一个非常不错的处理函数,下面给大家介绍一下. 在PHP中,没有默认的Function来获取目前所在页面的URL,所以今天就向大家介绍一个在PHP获取当前页面完整URL的PHP函数. 函数代码如下,调用时只需要使用 curPageURL() 就行啦: /* 获得当前页面URL开始 */ function curPageURL() { $pageURL = 'http'; if ($_SERVER["HTTPS"] == &qu