Layui使用中遇到的问题

最新推荐文章于 2026-01-01 15:39:09 发布

原创

最新推荐文章于 2026-01-01 15:39:09 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java #html #layui #js

这篇博客详细记录了在使用Layui框架时遇到的一些常见问题及解决方案，包括数据表格的JSON格式问题、时间格式转换、带参数页面跳转、form表单提交与select下拉框选中状态的设置。通过实例代码展示了如何解决这些问题，对Layui使用者有很好的参考价值。

Layui使用中遇到的问题

1、使用数据表格遇到的问题：

我这边是后台需要三个参数：
在这里插入图片描述

这里的 Bill是个对象，原本这里我加有 @RequestBody 注解的，如下：
在这里插入图片描述

但是这会需要前端传回的是JSON字符串格式，即在layui的数据表格中需要声明contentType为 application/json
在这里插入图片描述

如果没添加contentType为 application/json会报错：

org.springframework.http.converter.HttpMessageNotReadableException: Required request body is missing:

在这里插入图片描述

而当你加上这个contentType:'application/json'，
在这里插入图片描述

由于我这里开启了layui的page：
在这里插入图片描述

所以这会导致一个问题：在请求时，它会把分页的两个参数，page和limit也塞到JSON中，那么Spring就无法成功地把请求参数映射到我的Bill对象，所以就会导致报错：

Access to XMLHttpRequest at 'http://localhost:8086/api/bill/list' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

在这里插入图片描述

解决方法就是，不用@RequestBody，像我最上面那样，这样传递的就是JSON对象了，Spring就能从中找到自己需要的对象参数进行对象封装，就能正确的进行请求了。
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账单列表</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
</head>
<body>
<br/>
<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item"><a href="">账单列表</a></li>
    <li class="layui-nav-item"><a href="">账户</a></li>
    <li class="layui-nav-item"><a href="">退出</a></li>
</ul>
<br/><br/>
<form id="form" class="layui-form layui-card-body" >
    <input type="hidden" name="page" id="page" value="1"/>
    <input type="hidden" name="limit" id="limit" value="10"/>
    <div class="layui-inline">
        <label class="layui-form-label">类型：</label>
        <div class="layui-input-block">
            <select id="typeId" lay-verify="required">
                <option value="" selected>全部</option>
                <option value="1">收入</option>
                <option value="2">支出</option>
                <option value="3">借入</option>
                <option value="4">借出</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label" for="date1">开始时间：</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="date1" name="data1" placeholder="请输入起始时间">
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label" for="date2">结束时间：</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="date2" name="data2" placeholder="请输入结束时间">
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-upload-button">
            <button type="button" class="layui-btn layui-btn-normal" id="findByCondition">查询</button>
            <button type="reset" class="layui-btn layui-btn-normal">重置</button>
            <button type="button" class="layui-btn layui-btn-normal" id="add">添加</button>
        </div>
    </div>
</form>

<div class="with:80%">
    <div class="layui-inline" style="left:50px">
        <table id="demo" lay-filter="billList" class="layui-table"></table>
    </div>
</div>


<script src="../static/layui/layui.js"></script>
<script src="../static/js/jquery-1.10.2.min.js"></script>
<script type="text/html" id="userBar">
    <div class="layui-btn-container">
<!--        <button class="layui-btn layui-btn-sm" lay-event="edit">修改</button>-->
<!--        <button class="layui-btn layui-btn-danger  layui-btn-sm" lay-event="changeStu">删除</button>-->
        <button type="button" class="layui-btn layui-btn-sm" lay-event="update">
            <i class="layui-icon">&#xe642;</i>
        </button>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">
            <i class="layui-icon">&#xe640;</i>
        </button>
    </div>
</script>
<script>
    $(function () {
    
    
        layui.use('laydate', function () {
    
    
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
    
    
                elem: '#date1' //指定元素
            });
            laydate.render({
    
    
                elem: '#date2' //指定元素
            });
        });

        //Demo
        layui.use('form', function () {
    
    
        });
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function(){
    
    
        });
        layui.use('table', function () {
    
    
            var table = layui.table;
            //第一个实例
            table.render({
    
    
                elem: '#demo',
                id:'table',
                // width: 1200,
                url: 'http://localhost:8086/api/bill/list', //数据接口
                page: true, //开启分页
                // where:{"typeId":typeId,"date1":date1,"date2":date2},
                // method:'post',
                // contentType: 'application/json',
                cols