用户分页查询展示

如下图，点击查询按钮，显示用户数据；或者输入用户名、电话号码进行查询。

以下标签的使用，查看组件 | Element

前端页面代码

src/views/sys/user.vue：实现了查询、分页功能，未实现新增、编辑、删除功能。

<template>
  <div>
    <!-- 查询栏、（el-card：卡片）-->
    <el-card class="box-card">
      <el-row>
        <el-col :span="20">
          <el-input size="medium" v-model="searchModel.username" placeholder="用户名" clearable></el-input>
          <el-input size="medium" v-model="searchModel.phone" placeholder="电话号码" clearable></el-input>
          <el-button size="medium" type="primary" @click="getUserList()" icon="el-icon-search" round>查询</el-button>
        </el-col>
        <el-col :span="4" align="right">
          <el-button size="medium" type="primary" icon="el-icon-plus" round>新增</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 结果列表、-->
    <el-card>
      <el-table :data="userList" stripe style="width: 100%">
        <el-table-column label="序号" width="100" align="center">
          <template scope="scope">
            {{(searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="id" width="180" align="center">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="180" align="center">
        </el-table-column>
        <el-table-column prop="avatar" label="头像" width="180" align="center">
          <template slot-scope="scope">
            <el-avatar shape="square" size="medium" :src="scope.row.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="180" align="center">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" align="center">
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button size="medium" type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"
              circle></el-button>
            <el-button size="medium" type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)"
              circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页、（在main.js修改中文显示）-->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo" :page-sizes="[5, 10, 20, 50]" :page-size="searchModel.pageSize"
      layout="->, total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>

</template>

<script>
  // 导入userManage.js文件，@表示src目录
  import userApi from '@/api/userManage'

  export default {
    data() {
      return {
        searchModel: {
          /* pageNo：显示第几页，初始显示第一页 */
          pageNo: 1,
          /* pageSize：每页显示多少条，初始显示5条/页 */
          pageSize: 5,
          username: null,
          phone: null,
        },
        // total总条数
        total: 0,
        //结果列表数据
        userList: []
      }
    },
    methods: {
      // 方法：显示n条/页
      handleSizeChange(pageSize) {
        this.searchModel.pageSize = pageSize;
        this.getUserList();
      },
      // 方法：显示第n页
      handleCurrentChange(pageNo) {
        this.searchModel.pageNo = pageNo;
        this.getUserList();
      },
      //方法：查询用户数据
      getUserList() {
        //调用userApi对象(@/api/userManage.js)里的getUserList()方法
        // then()表示回调后要干的事情
        userApi.getUserList(this.searchModel).then(response => {
          //取出响应数据里的rows，并赋值给userList[]
          this.userList = response.data.rows;
          // 总条数
          this.total = response.data.total;
        });
      }
    },
    // 构造函数，自动执行一次，查询用户数据
    created() {
      this.getUserList();
    }
  };
</script>

<style>
  .box-card .el-input {
    width: 150px;
    margin-right: 15px;
  }
</style>

src/api/userManage.js：供src/views/sys/user.vue中的getUserList()方法使用

import request from '@/utils/request'

export default{
  // 用户查询
  getUserList(searchModel){
    return request({
      url:'/user/list',
      method:'get',
      //参数
      params:{
        pageNo:searchModel.pageNo,
        pageSize:searchModel.pageSize,
        username:searchModel.username,
        phone:searchModel.phone
      }
    });
  }
}

src/App.vue：全局配置，边距，卡片下边距

后端代码

src\main\java\com\example\sys\controller\UserController.java

getUserList()：分页查询

/**
 * 分页查询
 * @param username (required = false:非必要参数)
 * @param phone 非必要参数
 * @param pageNo 显示第几页,当前页码
 * @param pageSize 每页显示多少条
 * @return
 */
@GetMapping("/list")
public Result<Map<String,Object>> getUserList(@RequestParam(value = "username",required = false) String username,
                                              @RequestParam(value = "phone",required = false) String phone,
                                              @RequestParam(value = "pageNo") Long pageNo,
                                              @RequestParam(value = "pageSize") Long pageSize){
    //LambdaQueryWrapper: 条件构造器是MyBatis-Plus中提供的一个用于构造 SQL 查询条件的工具类
    LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
    //StringUtils.hasLength(username)：表示判断username是否有值，为true才调用eq()方法
    wrapper.eq(StringUtils.hasLength(username),User::getUsername,username);
    wrapper.eq(StringUtils.hasLength(phone),User::getPhone,phone);

    Page<User> page= new Page<>(pageNo,pageSize);
    userService.page(page,wrapper);
    Map<String,Object> data = new HashMap<>();
    //total: 条数
    data.put("total",page.getTotal());
    //rows: userList记录
    data.put("rows",page.getRecords());
    return Result.success(data);
}