vuejs之springboot+vue+element-ui之分页显示相关信息

前端开发 作者: 2024-08-23 09:30:01
接: vue与springboot进行通讯:https://www.cnblogs.com/xiximayou/p/12336033.html vue与element-ui搭建后台管理页面:https
package com.gong.springbootvue.controller;

import com.gong.springbootvue.entity.User;
 com.gong.springbootvue.repository.UserRepository;
 org.springframework.beans.factory.annotation.Autowired;
 org.springframework.data.domain.Page;
 org.springframework.data.domain.PageRequest;
 org.springframework.stereotype.Controller;
 org.springframework.web.bind.annotation.PathVariable;
 org.springframework.web.bind.annotation.RequestMapping;
 org.springframework.web.bind.annotation.ResponseBody;

 java.util.List;

@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    UserRepository userRepository;

    @ResponseBody
    @RequestMapping("/findAll/{page}/{size}")
    public Page<User> getAll(@PathVariable("page") Integer page,@PathVariable("size") Integer size) {
        System.out.println(page);
        System.out.println(size);
        PageRequest pageRequest = PageRequest.of(page,size);
        return userRepository.findAll(pageRequest);
    }

}
 
<template>
  div>
    el-table :data="tableData"
              border
              style="width: 100%">
      el-table-column fixed
                       prop="id"
                       label="编号"
                       width="150"</el-table-columnprop="username"="姓名"="120"="age"="年龄"="gender"="性别"="80"="email"="邮箱"="160 "="hobby"="爱好"="introduce"="介绍"="140"fixed="right"="操作">
        template slot-scope="scope">
          el-button @click="handleClick(scope.row)"
                     type="text"
                     size="small">查看el-buttontype>编辑el-tableel-pagination background
                   layout="prev,pager,next"
                   :page-size="pageSize"
                   :total="total"
                   @current-change="page"el-pagination>

script>
export default {
  methods: {
    handleClick (row) {
      console.log(row);
    },page (currentPage) {
      const that = this;
      axios.get('http://localhost:8181/user/findAll/' + (currentPage - 1) + '/3')
        .then(function (response) {
          console.log(response);
          that.tableData = response.data.content;
          that.pageSize = response.data.size;
          that.total = response.data.totalElements;
        })
    },},data () {
    return {
      pageSize: 0,total: 0,tableData: [],}
  },created () {
    const that = this;
    axios.get('http://localhost:8181/user/findAll/0/3')
      .then(function (response) {
        //console.log(response);
        that.tableData = response.data.content;
        that.pageSize = response.data.size;
        that.total = response.data.totalElements;
      })
  },}
>
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_67169.html