在使用LayUI整合SpringBoot过程中遇到的头疼的BUG合集

一、Layui问题解决

1、layui 的数据表格页码错误

问题：数据表格的页码为默认值

解决：

1、在返回的数据里重新获取count的值

            parseData: function (res) {
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.total,
                    data: res.list
                }
            },

2、layui iframe内的遮罩层未遮挡父级元素

问题：系统使用iframe布局，在iframe内点开的layer弹窗，遮罩层只覆盖了子页面。

解决：

1、在layui.open前加上parent，使它在父元素中也有遮罩层

    function show_img(t) {
        var t = $(t).find("img");
        //页面层
        parent.layer.open({
            type: 1,
            title: '区域图片',
            skin: 'layui-layer-rim', //加上边框
            area: ["1000px", '650px'], //宽高 t.width() t.height()
            shadeClose: true, //开启遮罩关闭
            end: function (index, layero) {
                return false;
            },
            content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '"style="width: 100%;height: 100%" /></div>'
        });
    }

2、在父元素中引入layui

    layui.use('layer', function(){
        var layer = layui.layer;
    });

3、layui 使用post请求时发送的是get请求

问题：html页面发送post请求，浏览器确是get请求

解决：在请求后面加上“return false;”

            $.post(url,data.field,function (response) {
                console.log(response)
                if (response.code == 0){
                    //成功提示
                    layer.msg(response.message, {
                        icon: 1,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    });
                    window.location = '/index.html'
                }else {
                    layer.msg("登录失败", {
                        icon: 1,
                        anim:6
                    });
                    //修改失败，将按钮禁用状态移除
                    $("#btn-dologin").removeAttr("disabled","disabled").removeClass("layui-btn-disabled")
                }
            });
            return false;

二、数据库问题解决

1、数据库datetime精确度问题

问题：需要日期格式yyyy-MM-dd HH:mm:ss，转为字符串时，秒后面会有多余的小数点

解决：

使用**DATE_FORMAT(picture_u, ‘%Y-%m-%d %k:%i:%s’)**对需要转换格式的字段进行格式化

select
		picture_id,                                                                                                 picture_name,                                                                                               picture_size,
        picture_type,                                                                                               DATE_FORMAT(picture_upload_date, '%Y-%m-%d %k:%i:%s') as upload date,
        picture_path,
        picture_style_id,
        picture_clicks_num
from
        t_picture

三、SpringBoot问题解决

1、使用Restful发送put请求失败

问题：在前端发送post请求，且在请求域中有_method=put ,依然报错不支持post请求的问题

解决：在application.properties文件中配置请求映射即可

#开启请求映射
spring.mvc.hiddenmethod.filter.enabled=true

四、Thymeleaf问题解决

1、使用layui 的select下拉框，将数据绑定数据库

问题：实现下拉框内容绑定数据库

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z2Oj34Co-1685241256443)(C:\Users\GAH\AppData\Roaming\Typora\typora-user-images\image-20221009183055262.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WtSmyT88-1685241256444)(C:\Users\GAH\AppData\Roaming\Typora\typora-user-images\image-20221009183128935.png)]

解决：

1、在后端将类型数据添加到域中

    @Override
    public String getAddPage(Model model) {
        List<PictureType> picturetype = pictureTypeMapper.getAllType();
        model.addAttribute("picturetype",picturetype);
        return "/picturelist/add-picturelist.html";
    }

2、前端页面使用Thymeleaf进行遍历

        <label class="layui-form-label">图片类型:</label>
        <div class="layui-input-inline">
            <select name="picturetype"  lay-search=""  lay-filter="type" id="picturetypetype">
                <option th:each="it:${picturetype}"
                        th:value="${it.picturetypeId}"
                        th:text="${it.picturetypeName}"></option>
            </select>
        </div>

             th:value="${it.picturetypeId}"
                    th:text="${it.picturetypeName}"></option>
        </select>
    </div>