SpringBoot随记--搜索框功能的维护与实现

搜索框功能的维护与实现。

今天在维护项目的时候遇到了一个需求：实现一个搜索框的功能，需要能从数据库取值并在前端页面解析显示出来。

这边是前端的大哥做好的样式（虽然大哥犯懒也是用的之前的模板hhh）

然后就是喜闻乐见的连数据库，后台改代码环节。首先是从web前端定位一下（这个项目是我在维护，所以有很多写好的东西，如果要改需求的话需要先找到位置再改）

<input type="text" id="searchInput" name="searchstr" class="textbox" size="20" placeholder="关键词">
<input type="button" value="检索" onclick="searchJyzz()" class="sbttn">
<input type="button" value="退出" onclick="$('#searchInput').val('')" class="sbttn sbttn1" hidden="" id="searchTc">

先不管别的，这个搜索框的传值需要通过“searchInput"字段来实现，那么在后端看一下。

    function Search(){
        let searchText = $("#searchInput").val();
        if(searchText!=null && searchText!=""){
            let pList = [];
            pList = xxList.filter((p) => {
                return p.placeName.indexOf(searchText) > -1;
            });
            allPageList(pList);
            $("#searchInput").val(searchText)
        }else{
            alert("请输入内容再进行查询");
        }

这边是通过一个function来实现的，（至于为什么之前开发的老哥把SearchInput这么引进来我也不太清楚。）那么好，下一步就是维护这个程序里缺失的部分，pList在这里定义了，那么也就是xxList、allPageList()需要进行引入。

//xxList作为一个数组变量，在这段之前有一个判断的分支，题主和zz一样只写了if{}里的内容，而忘记了else{}，绷不住了。

function allPageList(pList){
        $("#searchInput").val("")
        let dataLength = pList.length;
        let tempList  =  $("#placeListTemplate").html();
        let template = Handlebars.compile(tpl);
        let aplaceList = getPageData(pList, itemsOnPage, 1);
        let html = template(aplaceList);
        $('#showBox').html(html);
        if(dataLength==0){
            $('#totalNum').html("暂无数据");
        }else{
            $('#totalNum').html("共" + dataLength + "条数据");
        }
        resetMarkers();
        cacheMarkers(pList);
        postMarker();
        $('.pageContainer').pagination({
            items: dataLength,
            itemsOnPage: itemsOnPage,
            cssStyle: 'light-theme',
            prevText: '上一页',
            nextText: '下一页',
            onPageClick: function(pageNumber, event) {
                let pll = getPageData(pL, itemsOnPage, pageNumber);
                html = template(pllist);
                $('#showBox').html(html);
                resetMarkers();
                cacheMarkers(pllist);
                postMarker();
                return false;
            }
        });
    }

这边就是刚才缺失的allPageList()函数，引入完后端这边基本搞定了。
（然后去吃饭了hh，下午基本是在和经理扯皮搞前端页面部分的东西）

其中遇到的问题

1.我数据(黑切)呢??!!
如上刚引完数据，连了数据库，打开前端一看，不是哥们，我数据呢？

数据没有，那就打断点，在F12一番以后发现了问题（xxList走了else那一步，导致后端没给xxList赋值，前端很冤，你不给我数据我怎么显示啊）
在else里搞完，OK有数据了。

2.这数据它真有吗？如有嘛！
搞完发现左边的搜索栏里，只有一项，第二项死活出不来。回想一下，哦昨天改字段了，源码里面没修改。

<p>项目名称：{{extValues.xmmc}}</p>
<p>地点：{{addr}}</p>

（这还有个坑，数据库的表里不会直接存一个xmmc之类的字段，为了数据安全什么乱七八糟的，而是存在一个总的叫做extValues的字段里面。（写数据库表的人是一颗代码糖不给留啊沃柑）
改完基本没事了。

3.好了我编不下去了大哥你让我睡觉吧球球了

这里是J0hnnyF1sh,谢谢你看我的文章。