sprinbgoot+mybatis+thymeleaf+layui实现前后台交互（一）

pom文件

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!--lombok工具-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.2</version>
        </dependency>

        <!--代码生成器-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.3.2</version>
        </dependency>

        <!--逆向工程需要模板引擎-->
        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.30</version>
        </dependency>

        <!--mysql依赖-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!--连接池-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.20</version>
        </dependency>
        <dependency>
            <groupId>io.swagger</groupId>
            <artifactId>swagger-annotations</artifactId>
            <version>1.5.6</version>
        </dependency>

        <!--sharding-jdbc分库分表-->
        <!--        <dependency>-->
        <!--            <groupId>io.shardingsphere</groupId>-->
        <!--            <artifactId>sharding-jdbc-spring-boot-starter</artifactId>-->
        <!--            <version>3.1.0</version>-->
        <!--        </dependency>-->
        <!--        <dependency>-->
        <!--            <groupId>io.shardingsphere</groupId>-->
        <!--            <artifactId>sharding-jdbc-spring-namespace</artifactId>-->
        <!--            <version>3.1.0</version>-->
        <!--        </dependency>-->

        <!--thymeleaf-->
        <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
            <version>2.4.2</version>
        </dependency>
        <dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.4</version>
            <classifier>jdk15</classifier>
        </dependency>
    </dependencies>

conrtroller

 @RequestMapping("/list")
    @ResponseBody
    public String list(@RequestParam int limit, @RequestParam int page) {
        List<JavaBasis> list = JavaBasisService.list();
        JSONObject jobj = new JSONObject();
        int size = list.size();
        if (page * limit <= size) {
            list = list.subList((page - 1) * limit, page * limit);
        } else {
            list = list.subList((page - 1) * limit, size);
        }
        // 数据状态的字段名称，默认：code
        jobj.put("code", 0);    // 成功的状态码，默认：0
        jobj.put("msg", "");
        jobj.put("count", size);//总结果数
        jobj.put("data", list);
        // 注意需将JSON码转为字符串格式，应使用assoc:false参数转为对象而非数组
        return jobj.toString();
    }

前台页面

layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:'/java-basis/list'
            , cols: [
                [
                    { field: 'id',  title: 'ID', sort: true },
                    { field: 'content',  title: '内容', sort: true },
                    { field: 'createTime',  title: '创建时间', sort: true },
                    { field: 'userName',  title: '创建者', sort: true },
                    { field: 'userId',  title: '创建者id', sort: true },
                    { field: 'updateTime',  title: '更新时间', sort: true },
                ]
            ]
            ,page: true//启用分页
            ,limit: 5//限制每一页的行数
            ,limits: [5,10,15]//表示每一页可显示的行数
        });
    });

注意事项

前端引入layui官网的静态资源

大佬勿喷，欢迎提意见建议评论！！！！