完成查询功能
js
controller
mapper
2 dao层有一个搜索方法，和xml文件中写个搜索方法

一、实现点击按钮响应事件（mydata.js）

//实现点击搜索功能，点击按钮出现弹窗
    //jquery点击事件
    $("#re").click(function () {//#re 按钮的id
        alert("111")
    })

二、实现将输入框的值传送到后端

$("#re").click(function () {
        var value = $("#videoLike").val()   //输入框的id
        alert(value)
})

三、通过ajax完成回调，得到后端反馈的值

//实现点击搜索功能
//jquery点击事件
$("#re").click(function () {
    var value = $("#videoLike").val()
    $.ajax({
        type:"get",
        url:"/video/search",
        data:{
            keyword:value
        },//回调
        success:function (res) {
            //得到后端反馈的值
            console.log(res)
        }
    })
})

虽然上面的方式可以实现返回对应的值，但是无法渲染到前端，所以

通过layui的方式重新对数据表格查询后渲染

给表格初始渲染一个放回值tableIns，将表格进行重载，需要添加一个tableIns值

//通过layui的方式对数据表格重新渲染
//tableIns 是上边 tableRender的返回值
tableIns.reload({
    url:"/video/search",
    where:{//设定异步数据接口的额外参数
        keyword:value
    },
    page: {
        curr:1  //重新重第一页开始
    }
})

四、控制层Controller方法

@RequestMapping("/search")
@ResponseBody
public Result search(String keyword){
Result result = new Result();
System.out.println(keyword);
List<Video> videos = videoService.selectByUserId(keyword);
if (videos.size() > 0){
result.setMessage("ok");
result.setList(videos);
}else result.setMessage("error");
return result;
}

五、数据库连接层Mapper方法

mapper.java

//通过userId实现模糊查询
List<Video> selectByUserId(@Param("keyword") String keyword);

mapper.xml

<select id="selectByUserId" parameterType="java.lang.String" resultMap="BaseResultMap">
    select id, user_id, audio_id, video_desc, video_path, video_seconds, video_width,
        video_height, cover_path, like_counts, status, create_time
    from videos
    where user_id like concat('%',#{keyword,jdbcType=VARCHAR},'%')
</select>

六、业务层Service方法

service.java

List<Video> selectByUserId(String keyword);

serviceimpl.java

@Override
public List<Video> selectByUserId(String keyword) {
    return  videoMapper.selectByUserId(keyword);
}

七、测试