springboot+layui实现最简单的分页

最新推荐文章于 2023-02-10 17:03:27 发布

原创最新推荐文章于 2023-02-10 17:03:27 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#spring #java #intellij idea #postman

springboot的学习专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用Spring Initializr创建SpringBoot项目，并结合Layui前端框架实现简单的分页功能。首先在IDEA中新建SpringBoot项目，配置相关依赖。接着介绍Layui的使用，强调其无需额外分页插件即可实现分页。然后详细阐述了从控制器到Service、Impl、Mapper以及Mapper.xml的分页逻辑实现步骤。最后通过Postman测试，展示了分页查询的JSON数据返回效果。

1、新建New Project

1.1 打开IDEA，依次打开File --> New --> Project，选择Spring Initializr，在线建立springboot工程

1.2 点击Next，修改Group、Artifac、Java Version（这是我的支持JDK1.8），其余习惯不更改

1.3 next，选择依赖（Dependencies)

1.4 Next,选择项目存储地址，点击Finish，springboot创建完成。（由于之前创建过，不再创建。）

1.5 我的项目结构如下：

pom.xml：配置文件

resources：静态资源

util：工具包

service：业务接口

service.impl：实现业务逻辑

model：实体类

mapper：与xml连接

controller：控制层，处理前端请求

2、Layui前端

layui简单方便，不需要再使用分页插件，css，js，我是使用在线链接，当然官方可以下载，推荐lLayui - 经典开源模块化前端 UI 框架（官网文档镜像站） (layuiweb.com)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
</head>
<body>

<div class="layui-card-body">
    <table class="layui-hide" id="test"></table>
</div>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
    layui.use('table', function(){
        var kw='';
        addData(kw);
    });
    function addData(kwx){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:'/swaggers/getAllPros'
            ,limit:10 //默认为10
            ,cols: [[
                 {field:'id', width:170, title: '编号', sort: true} //sort：true页面可进行排序操作
                ,{field:'item_type', width:170, title: '分类'}
                ,{field:'title', width:120, title: '名称', sort: true}
                ,{field:'sell_point', width:200, title: '卖点'}
                ,{field:'price',width:160, title: '商品单价', sort:true}
                ,{field:'num', width:130, title: '库存', sort: true}
                ,{field:'image', width:130, title: '图片路径', sort: true}
                ,{field:'status', width:130, title: '状态'}
                ,{field:'priority', width:220, title: '优先级', sort: true}
            ]]
            ,page: true
            ,done:function(res, curr, count){
                //数据的回调用，可不写
            }
        });
    }

</script>
</body>
</html>

3、后台实现

我的是从controller --> Service --> impl --> mapper -->mapper.xml 一一实现，比较繁琐。

3.1 控制层

@Api(tags = "商品控制层")
@RestController
@RequestMapping("/products")
public class ProductController extends BaseController {

    @ApiOperation(value = "商品数据分页", notes = "")
    @RequestMapping("/getAllPros")
    public Map<String,Object> getAllPros(@RequestParam(required = false,defaultValue = "1")Integer page, @RequestParam(required = false,defaultValue = "10") Integer limit) {

        Integer count = productService.getCount();

        List<Product> list = productService.getPros(page,limit);
        

        Map<String,Object> map=new HashMap<String,Object>();
        map.put("code",0);
        map.put("msg","");
        map.put("count",count);
        map.put("data",list);
        System.out.println(map.toString());
        return map;
    }
}

3.2 业务接口

package com.hc.store.service;

import com.hc.store.model.Product;

import java.util.List;

public interface ProductService {
    //查询总行数
    Integer getCount();
    //分页查询
    List<Product> getPros(Integer page, Integer limit);
}

3.3 业务实现 impl

package com.hc.store.service.impl;

import com.hc.store.mapper.ProductMapper;
import com.hc.store.model.Product;
import com.hc.store.service.ProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;

@Service
public class ProductServiceImpl implements ProductService {

    @Autowired
    private ProductMapper productMapper;

    @Override
    public Integer getCount() {
        return productMapper.getAllCount();
    }

    @Override
    public List<Product> getPros(Integer page, Integer limit) {
        page = (page - 1) * limit;
        return productMapper.getProsTable(page,limit);
    }
}

3.4 mapper,我的名字是ProductMapper

package com.hc.store.mapper;
import com.hc.store.model.Product;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface ProductMapper {

    Integer getAllCount();

    List<Product> getProsTable(@Param("page") Integer page, @Param("limit") Integer limit);
}

3.5 SQL查询

ProductMapper.xml (注意：这里的mapper和mapper.xml的名称一定要一致、一样，mapper.xml的命名空间必须是对应的mapper）

<?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.hc.store.mapper.ProductMapper">

    <select id="getAllCount" resultType="java.lang.Integer">
        select count(*) from product
    </select>

    <select id="getProsTable" resultType="com.hc.store.model.Product">
        select * from product limit #{page},#{limit}
    </select>

</mapper>