vue+elenemt分页+springboot

目录

1、编写模板

2、发请求调接口

3、后端返回数据

1.编写实体类

2、UserController

3、Userservice接口

4、（mapper接口）UserMapper

5、xml

---

1、编写模板

  <!-- 搜素框 -->
  <el-input placeholder="请输入姓名" v-model="keyWord" style="width: 400px">
          <el-button slot="append" icon="el-icon-search" @click="searchByKeyword()">
          </el-button>
    </el-input>
      <!-- 列表 -->
    <el-table :data="tableData" border style="width: 50%;margin: 0 auto;" @selection-                change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="userId" label="账号" width="180">
      </el-table-column>
      <el-table-column prop="userName" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="password" label="密码">
      </el-table-column>
      <el-table-column prop="sex" label="性别">
      </el-table-column>
      <el-table-column prop="age" label="年龄">
      </el-table-column>
      <el-table-column prop="location" label="地址">
      </el-table-column>

      <el-table-column prop="name" label="操作" align="center">
        <template slot-scope="scope">
          <!-- (scope.row.userId)用于获取当前行数据对象中的用户ID（或其他字段） -->
          <el-button size="mini" type="text" @click="openDialog(scope.row)">编辑</el-button>

          <el-button size="mini" type="text" @click="deleteUser(scope.row.userId)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>


 <!-- 分页 -->
    <div>
      <el-pagination 
        @size-change="handleSizeChange" 
        @prev-click="prevClick" 
        @next-click="nextClick"
        @current-change="handleCurrentChange" 
        background 
        layout="total,sizes,prev, pager, next,jumper" :total="total"
        :page-sizes="[10, 20, 50, 100, 500, 2000]">
      </el-pagination>
    </div>

2、发请求调接口

export default {
  data() {
      tableData: [], // 数据列表
      keyWord: '',//搜素框的值
      total: 0, // 数据总数
      pageNum: 0,//当前页码
      pageSize: 10,//每页显示的条数
    },
      //生命周期钩子函数在组件挂载后被调用，它会执行 selectUser(1, 10, "") 方法，用于初始化数据并展示第一页的用户数据。
    mounted() {
    this.selectUser(1, 10, "");
  },


  methods: {

    //分页方法、当页码发生变化是被调用
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.selectUser();
    },
    //上一页
    prevClick(pageNum) {
      this.pageNum = pageNum
      this.selectUser();
    },
     //下一页
    nextClick(pageNum) {
      this.pageNum = pageNum
      this.selectUser();
    },
    //当改变每页显示条数时被调用
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.selectUser();
    },
    //查询用户数据的方法
    selectUser() {
      this.$axios({
        method: 'post',
        url: "http://localhost:8080/api/user/selectUser",
        data: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          keyWord: this.keyWord,
        }
      }).then((res) => {
        let result = res.data.data;
        this.tableData = result.list;
        this.total = result.total;
      })
    },
}

3、后端返回数据

1.编写实体类

注意： User extends Page

package com.example.goods_admin.entity;

public class Page {
    private int pageNum;

    private int pageSize;

    private String keyWord;

    public Page() {

    }

    public String getKeyWord() {
        return keyWord;
    }

    public void setKeyWord(String keyWord) {
        this.keyWord = keyWord;
    }

    public Page(int pageNum, int pageSize, String keyWord) {
        this.pageNum = pageNum;
        this.pageSize = pageSize;
        this.keyWord = keyWord;
    }

    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }
}

2、UserController

@RestController
//@RequestMapping用于将 HTTP 请求映射到控制器方法上
@RequestMapping("/user")
public class UserController {

    @Autowired
    Userservice userservice;

        @PostMapping("/selectUser")
    //   @RequestBody 用于将 HTTP 请求的内容（或者请求体）绑定到方法的参数上。
    public Result selectUser(@RequestBody User user) {
        return userservice.selectUser(user);
    }
}

3、Userservice接口

public interface Userservice {
      Result selectUser(User user);

}

4、Service层（UserserviceImpl）

@Service
public class UserserviceImpl implements Userservice {

    @Autowired
    UserMapper userMapper;

     @Override
    public Result selectUser(User user) {
        int pageNum = user.getPageNum()==0?1:user.getPageNum();
        int pageSize = user.getPageSize()==0?10:user.getPageSize();

        //1、开启分页查询
        PageHelper.startPage(pageNum,pageSize);

        //2、查询结果
        List<User> userList  = userMapper.seleteUser(user);

        //3、封装结果
        PageInfo<User> userPageInfo = new PageInfo<>(userList);

        //4、返回
        return Result.succeed("查询成功",userPageInfo);

    }



}

4、（mapper接口）UserMapper

@Mapper
public interface UserMapper {
    List<User> seleteUser(User user);
}

5、xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.goods_admin.mapper.UserMapper">
<!--    结果映射：数据库字段与实体类字段的映射关系-->
    <resultMap id="BaseResultMap" type="com.example.goods_admin.entity.User">
        <id column="id" jdbcType="VARCHAR" property="id" />
        <result column="userId" jdbcType="VARCHAR" property="userId" />
        <result column="userName" jdbcType="VARCHAR" property="userName" />
        <result column="password" jdbcType="VARCHAR" property="password" />
        <result column="sex" jdbcType="VARCHAR" property="sex" />
        <result column="age" jdbcType="INTEGER" property="age" />
        <result column="location" jdbcType="VARCHAR" property="location" />
    </resultMap>

    <select id="seleteUser" resultType="com.example.goods_admin.entity.User">
        select * from user
            <where>
                <if test="keyWord !=null and keyWord!=''">
                    userName like concat('%', #{keyWord}, '%')
                </if>
            </where>

    </select>

</mapper>