SSM+layui搜索实现案例（模糊查询）

最新推荐文章于 2023-02-28 10:57:24 发布

Spring_Lyh

最新推荐文章于 2023-02-28 10:57:24 发布

阅读量1.5k

点赞数 1

文章标签： ssm layui java sql maven

本文链接：https://blog.csdn.net/Lyh_ok/article/details/122290812

版权

本文介绍了如何在Spring Boot项目中结合layui实现分页搜索功能，同时展示了当出现`getWriter() has already been called for this response`错误时的解决方法，即通过返回自定义的JSON格式数据避免直接操作response。此外，还提供了前端layui页面的代码示例，包括搜索表单、表格展示、操作按钮等。

摘要由CSDN通过智能技术生成

其中遇到的报错：getWriter() has already been called for this response （getwriter（）已经被调用）

解决方式：Controller层返回方式不需要response，即return JsonFromat.success(200,"",count,stadiumList);

controller（使用了分页+搜索的实现）

Stadium.java(实体类)

package com.lyh.ssm.bean;

import lombok.Data;

@Data
public class Stadium {
   private int  sid;
    private String sname;
    private String address;
    private String  description;
    private String begintime;
    private String endtime;


}

StadiumMapper.xml

需要用到JSONformat.java包放在untils下面

package com.lyh.ssm.utils;

import lombok.Data;

/**
 * json格式封装类
 */
@Data
public class JsonFromat {
    private Integer code;
    private String msg;
    private Integer count;
    private Object data;

    public JsonFromat(Integer code, String msg) {
        this.code = code;
        this.msg = msg;
    }

    public JsonFromat(Integer code, String msg, Integer count, Object data) {
        this.code = code;
        this.msg = msg;
        this.count = count;
        this.data = data;
    }

    //成功的
    public static JsonFromat success(Integer code, String msg, Integer count, Object data) {
        return new JsonFromat(code, msg, count, data);
    }
    //传状态码说明和返回的数据
    public static JsonFromat success(String msg,Object data) {
        return success(200, msg, 0, data);
    }
    public static JsonFromat success(String mag) {
        return success(200, mag, 0, null);
    }
    public static JsonFromat success(int count, Object data) {
        return success(200, "", 0, data);
    }
    public static JsonFromat success(Integer code) {
        return success(code, null, null, null);
    }
    public static JsonFromat success() {
        return success(200, null, null, null);
    }

    //失败的
    public static JsonFromat error(Integer code,String msg) {
        return new JsonFromat(code, msg);
    }
    public static JsonFromat error() {
        return new JsonFromat(505,null);
    }

}

前端layui页面（/view/stadium/ist.html）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css" />
</head>
<body>
<fieldset class="table-search-fieldset">
    <legend>搜索信息</legend>
    <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" >
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">门票名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sname" autocomplete="off" class="layui-input" id="sname">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn layui-btn-primary"  lay-submit id="sousuo" lay-filter="sousuo"><i class="layui-icon"></i> 搜 索</button>
                </div>
            </div>
        </form>
    </div>
</fieldset>

<table id="demo" lay-filter="test" lay-data="{id: 'idTest'}"></table>
<!-- 自定义的控件 -->
<div id="toolbar" style="display: none; ">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="add" data-method="notice" data-type="auto" >添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">批量删除</button>
    </div>
</div>
<div id="barDemo" style="display: none;">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>
<!-- 设置新增的form表单 -->
<div id="editDiv" style="display: none;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-inline">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
    </form>
</div>

<script src="/static/js/jquery-3.3.1.js" charset="utf-8"></script>
<script src="/static/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    var dataParam;
    layui.use(['table','layer','jquery','form'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var $=layui.jquery;
        var  form = layui.form;
        //第一个实例
        table.render({
            elem: '#demo'
            ,id:"testReload"
            ,height: 600
            ,toolbar:'#toolbar'
            ,url: '/stadiumController/stadiumPagefind' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {type:'checkbox'}
                ,{field: 'sid', title: '门票编号', width:80, sort: true}
                ,{field: 'sname', title: '门票名称', width:100}
                ,{field: 'address', title: '地址', sort: true}
                ,{field: 'description', title: '描述'}
                ,{field: 'begintime', title: '开始时间',width:200
                    ,templet: "<div>{{layui.util.toDateString(d.begintime,'yyyy-MM-dd HH:mm:ss')}}</div>"}
                ,{field: 'endtime', title: '结束时间',width:200
                    ,templet: "<div>{{layui.util.toDateString(d.endtime,'yyyy-MM-dd HH:mm:ss')}}</div>"}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]],
            response: {
                statusCode: 200 //                                                               重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
                console.log(res);
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data    //解析数据列表
                };
            }
        });

        //监听事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    addOrUpp("添加","/view/admin/add.html");
                    break;
                case 'delete':
                    layer.msg('删除');
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除' + data.sid + "的用户吗？", function(index){
                    $.ajax({
                        url:"/stadiumController/stadiumDel",
                        data:{"sid": data.sid},
                        type:"post",
                        dataType:"json",
                        success:function(){
                            layer.msg("删除成功！");
                            obj.del();
                            layer.close(index);
                        }
                    })



                });
            } else if(obj.event === 'edit'){
                dataParam=data;
                addOrUpp("修改","/view/admin/edit.html");
            }
        });

        function addOrUpp(tit,url){
            layer.open({
                type: 2
                ,title: tit
                ,content:url
                ,offset: 'auto'
                ,area: ['500px', '500px']
                ,end:function () {
                    table.reload('demo');
                }
            });
        }
        var $ = layui.$, active = {
            reload: function () {
                var name = $('#name');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        "name": name.val(),
                        "tel": $('#tel').val()
                    }
                });
            }
        };
        //搜索事件
        form.on('submit(sousuo)', function (data) {
            var result = JSON.stringify(data.field);
            layer.confirm("最终的搜索信息为:"+result,function(index){
                //获取搜索框对象
                var sname=$("#sname");
                table.reload('testReload',{
                    where:{//设置需要传递的参数
                        sname:sname.val(),//把具体的值传到后台
                    },
                    page:{curr:1}//开启分页，表示从第一页开始搜索，不写默认从当前页开始搜索，前面页不计入搜索范围内
                })
                layer.close(index);
            })
        });
    });

</script>

</body>
</html>

实现效果