简单分页：前端vue3后端springboot

最新推荐文章于 2024-04-25 16:42:09 发布

袁肖肖肖

最新推荐文章于 2024-04-25 16:42:09 发布

阅读量142

点赞数

文章标签：前端后端 spring boot vue.js java

本文链接：https://blog.csdn.net/m0_71837135/article/details/130921170

版权

一.前端

1.定义表单数据

const state = reactive({
  tableData: [
  ],
  form: {}
})

2.书写表单动态绑定表单数据

    <div style="margin: 10px 0">
      <el-table :data="state.tableData" stripe border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template #default="scope">
            <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-popconfirm title="你确定删除吗？" @confirm="del(scope.row.id)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

3.向后端发送请求，获取后端数据，使用钩子函数在页面展示前调用load函数

const load = () => {
  request.get('/user/page', {
    params: {
      name: name.value,
      address: address.value,
      pageNum: pageNum.value,
      pageSize: pageSize.value
    }
  }).then(res => {
    state.tableData = res.data
    total.value = res.total
  })
}
load() //调用load方法拿到后台数据

二.后端

1.定义用户实例对象

@Data
public class TableForm {
    private int id;
    private String username;
    private String name;
    private String address;
    private String email;
}

2.定义表单基本属性

@Data
public class Page<T> {
    private Integer pageNum;
    private Integer pageSize;
    private Integer total;
    private List<T> data;
}

3.向数据库查询表单数据

@Mapper
public interface TableFormMapper {

    @Select("select * from tableform limit #{effs},#{pageSize}")
    List<TableForm> findByPage(Integer effs , Integer pageSize);

    @Select("select count(id) from tableform")
    Integer countUser();
}

4.接收前端发送的请求并返回表单数据

    @Resource
    private TableFormMapper tableFormMapper;

    @GetMapping("/page")
    public Page<TableForm> find(
            @RequestParam(defaultValue = "1")Integer pageNum,
            @RequestParam(defaultValue = "10")Integer pageSize)
    {
        Page<TableForm> page = new Page<>();
        Integer effs = (pageNum - 1) * pageSize;
        List<TableForm> byPage = tableFormMapper.findByPage(effs, pageSize);
        Integer countUser = tableFormMapper.countUser();
        page.setPageNum(pageNum);
        page.setPageSize(pageSize);
        page.setTotal(countUser);
        page.setData(byPage);
        return page;
    }