对页面多级列表遍历 实时更新搜索结果的搜索框

SpongeGirl
  1. 背景

　　　　由于公司管理平台的menu的管理功能过多，于是要做一个搜索框，最终实现的搜索框会显示列表之间的层级关系，不用点击按钮便出现结果，实时响应更新搜索结果，呈现结果如下：

　　　　

　　2. 思路

　　　　项目是php的MVC框架，功能列表的展示不是通过调用接口拿到数据然后渲染的，接收从Controller传回来的一个data，直接 echo $menuList，$menuList是一段拼接好的html字符串。可以有两种方法拿到我们需要的数组（包含各个menu标题和href），一是在controller里面定义一个searchList，在Modal里面查找返回，但是此举需要访问数据库，为了减轻服务器的负担，不进行考虑；二是在前端页面进行DOM节点的遍历，组装好我们需要的menuList，然后进行遍历，得到搜索结果。

  • 先写好样式：这里涉及到一个怎么将搜索图标放进searchBox里面，将搜索图标的position设置为absolute，然后input框的border设置为none，外层包裹的div searchBox的position设置为relative即可。toast-wrap在找不到信息的时候显示提示信息，因为我们的提示信息只有一行，较为简单就不用类似tooltips的插件，其他较复杂的信息可以用bootstrap的toasts插件（https://getbootstrap.com/docs/4.2/components/toasts/）来进行展示。
<div id="searchBox">
    <input id="searchTitle" type="text" autocomplete="off" placeholder="请输入想搜索的菜单..."><i id="search-icon" class="fa fa-search fa-fw"></i>
    <div class="toast-wrap">
    </div>
</div>
<ul class="beforeSearch" id="searchResult"></ul>

#searchBox{
    display: block;
    height: 30px;
    background: #666666;
    list-style: none;
    position: relative;
}
#searchBox:focus{
    border-top: 1px solid blue!important;
    background: #373737;
    color: #DDDDDD;
}
#searchTitle{
    padding-left: 20px;
    background: #666666;
    width: 90%;
    height: 30px;
    border: none;
    display: inline-block;
    color: #C4C4C4;
    font-size: 13px;
}
#searchBox input:focus{
    border: none!important;
    outline: none!important;
    color: #ffffff;
}
input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #bbb;
}
#column-left.active #searchBox input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #bbb;
}
input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #bbb;
}
input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #bbb;
}
#search-icon{
    display: inline-block;
    z-index: 2;
    color: #ffffff;
    position: absolute;
    line-height: 30px;
}
.toast-wrap{
    opacity: 0;
    position: fixed;
    top: 14%;
    left: 110px;
    color: #fff;
}    
.toast-msg{
    background-color: rgba(0,0,0,0.7);
    padding: 2px 5px;
    border-radius: 5px;
}
.toastAnimate{
    animation: toastKF 2s;
}
@keyframes toastKF{
    0% {opacity: 0;}
    50% {opacity: 1; z-index: 9999}
    100% {opacity: 0; z-index: 0}
}
.hidesearchBox{
    display: none!important;
}
.beforeSearch{
    display: none;
}
.afterSearch{
    list-style:none;
    width: 235px;
    display: inline;
    position: absolute;
    z-index: 2;
    background: #373737;
    padding: 0!important;
}
.afterSearch li a{
    color: #C4C4C4!important;
    text-decoration:none!important;
    padding: 0 0 0 20px!important;
}
.tooltip{
    position: absolute;
    display: none;
    border-style: solid;
    white-space: nowrap;
    z-index:99;
    background-color:#ffffff;
    border-width: 0px;
    border-color: rgb(51,51,51);
    font-size: 13px;
    padding: 3px;
    pointer-events: none;
}
  • 分析列表结构

　　　需要搜索的列表是ul>li，li>a+ul（只有最后一层列表的a标签才带有href，只有非最后一层列表才有ul），每个ul是一层列表。这里生成的menuList是树形的，后续进行搜索匹配的时候会逐层进行遍历，确保不会漏掉，还有另外一种实现方式，即生成扁平的menuList，最后遍历只需要遍历一遍然后再对遍历结果进行筛选，即可。

//方法一
$(\'#menu>li\').each(function () {
    var title1 = $(this).children(\'a\').eq(0).text().trim();
    var href1 = $(this).children(\'a\').eq(0).attr(\'href\');
    if(title1 && href1){
        menuList.push({\'title\':title1,\'href\':href1});
    } else {
        var child2Array = [];                
            $(this).children(\'ul\').children(\'li\').each(function () {
            var title2 = $(this).children(\'a\').eq(0).text().trim();
            var href2 = $(this).children(\'a\').eq(0).attr(\'href\');
            if(title2&&href2){
                child2Array.push({\'title\':title2,\'href\':href2});
            } else {
                var child3Array = [];
                $(this).find(\'ul>li\').each(function() {
                　　var title3 = $(this).children(\'a\').eq(0).text().trim();
                　　var href3 = $(this).children(\'a\').eq(0).attr(\'href\');
                　　child3Array.push({\'title\':title3,\'href\':href3});
                })
           　　 child2Array.push({\'title\':title2,\'childs\':child3Array});
            }
        })
    menuList.push({\'title\':title1,\'childs\':child2Array});
    }
})
}   
//方法二
$(\'#menu>li\').each(function () {
   var title1 = $(this).children(\'a\').eq(0).text().trim();
   var href1 = $(this).children(\'a\').eq(0).attr(\'href\');
   if(title1 && href1){
      menuList.push({\'title\':title1,\'href\':href1});  //一级
   } else {
      $(this).children(\'ul\').children(\'li\').each(function () {
         var title2 = $(this).children(\'a\').eq(0).text().trim();
         var href2 = $(this).children(\'a\').eq(0).attr(\'href\');
         if(title2&&href2){    //二级
            menuList.push({\'title\':title1+\'>\'+title2,\'href\':href2});
         } else {           //三级
            $(this).find(\'ul>li\').each(function() {
               var title3 = $(this).children(\'a\').eq(0).text().trim();
               var href3 = $(this).children(\'a\').eq(0).attr(\'href\');
               menuList.push({\'title\':title1+\'>\'+title2+\'>\'+title3,\'href\':href3});
            })
         }
      })
   }
})




    

  • 
遍历数组，得到结果列表。对于树形的menuList，遍历的时候需要每一层都进行遍历，先遍历一层，若找到了则判断当前搜索到的是否还有子元素，因为子元素的a标签没有href，需要判断是否有子元素，将第一个子元素的href赋值给当前搜索到的结果，便于后续点击跳转。
    • 





        var searchKey = \'\';
        var menuSearch = function(){var searchResult = [];
            var showStr = \'\';
            searchKey = $("#searchTitle").val().trim();
            if($(\'#searchResult\').attr("class")==\'afterSearch\'){
                $("#searchResult>li").remove();
                $("#searchResult").removeClass("afterSearch").addClass("beforeSearch");
            }
            for (let i = 0; i<menuList.length;i++) {
                if((menuList[i].title.indexOf(searchKey)) !== -1 ){
                    if(menuList[i].href){        //一级
                        searchResult.push({\'title\':menuList[i].title,\'href\':menuList[i].href,\'level\':1});
                    } else if(menuList[i].childs[0].href) {   //二级
                        searchResult.push({\'title\':menuList[i].title,\'href\':menuList[i].childs[0].href,\'level\':1});
                    } else{     // 三级
                        searchResult.push({\'title\':menuList[i].title,\'href\':menuList[i].childs[0].childs[0].href,\'level\':1});
                    }
                }
                if(menuList[i].childs){
                    var child2 = menuList[i].childs;
                    first:for(let j = 0;j<child2.length;j++){
                        if((child2[j].title.indexOf(searchKey)) !== -1 ){
                            if(child2[j].childs){
                                searchResult.push({\'title\':menuList[i].title+\'>\'+child2[j].title,\'href\':child2[j].childs[0].href,\'Level\':2});
                            } else {
                                searchResult.push({\'title\':menuList[i].title+\'>\'+child2[j].title,\'href\':child2[j].href,\'Level\':2});
                            }

                        }
                        if(child2[j].childs){
                            var child3 = child2[j].childs;
                            second:for(let k =0;k<child3.length;k++){
                                if((child3[k].title.indexOf(searchKey)) !== -1) {   //在三级查找到了
                                    searchResult.push({\'title\':menuList[i].title+\'>\'+child2[j].title+\'>\'+child3[k].title,\'href\':child3[k].href,\'level\':3});
                                }
                            }
                        }
                    }
                }
                else {}
            }
            // console.log(searchResult);
            boolFirst = true;
            //展示
            if((searchResult.length>0) && (searchKey.length>0)){
                for (let i = 0; i<searchResult.length;i++) {
                    showStr += \'<li class="searchresultList" style=\"list-style: none; height: 35px; padding-right:18px; border-bottom: 1px solid #515151; line-height: 35px; font-size: 13px; color: #C4C4C4; vertical-align: middle; \"> <a data-toggle="tooltip" data-placement="top" title=\"\'+searchResult[i].title+\'\" style=\"border-bottom: none; white-space:nowrap; overflow:hidden; text-overflow: ellipsis;-o-text-overflow:ellipsis; cursor:pointer;\" href=\"\'
                            +searchResult[i].href+\'\">\'+searchResult[i].title+\'</a></li>\';
                }
                $("#searchResult").removeClass("beforeSearch").addClass("afterSearch")
                $(\'#searchResult\').append(showStr)
                //跳转
                $(\'#searchResult>li\').on(\'click\',function (event) {
                    var link = $(this).children(\'a\').eq(0).attr(\'href\')
                    location.href=link;
                    event.stopPropagation();
                });
            }
        }




    

  • 触发搜索功能
    • 



　　我们希望在输入完关键字就进行结果的展示，不必点击触发，可以使用bind给选定的元素进行事件绑定，bind的详细用法请移步https://www.runoob.com/jquery/event-bind.html，




　　　　//触发搜索功能        

　　　　$(\'#searchTitle\').bind("input propertychange focus",function (event) {
            event.stopPropagation();
            if (timer) {
                clearTimeout(timer);
            }
            menuSearch();
            if(searchKey.length>0){
                timer = setTimeout(function () {
                    toast(\'找不到相关信息！\');
                },1000);
            }
        });
        $(\'#searchTitle\').on(\'click\',function (event) {
            event.stopPropagation();
        });
        $(\'#search-icon\').on(\'click\',function (event) {
            event.stopPropagation();
            menuSearch();
            if(searchKey.length==0){
                toast(\'找不到相关信息！\');
            }
        });




　　　　propertychange 是IE专属用于动态监听监听输入框的值变化，input是标准的浏览器事件，一般应用于input输入框，当input的值发生变化就会发生，无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化，两者一起用是为了兼容IE9以下input不兼容的问题。


　　　　搜索结果列表的打开和闭合，当点击除了结果列表和searchBox以外的界面的时候，关闭搜索结果列表。代码如下：




        $(\'#searchTitle\').bind("input propertychange focus",function (event) {
            event.stopPropagation();
            menuSearch();
        });
        $(\'#searchTitle\').on(\'click\',function (event) {
            event.stopPropagation();
        });
        $(\'#search-icon\').on(\'click\',function (event) {
            event.stopPropagation();
            menuSearch();
            if(searchKey.length==0){
                toast(\'找不到相关信息！\');
            }
        });
        $(document).on(\'click\',\':not(#searchResult)\',function(e){
            if($(\'#searchResult\').attr("class")==\'afterSearch\'){
                $("#searchResult>li").remove();
                $("#searchResult").removeClass("afterSearch").addClass("beforeSearch");
            }
        });




　　　　需要注意到的是，这里用到了event.stopPropagation(); 原因是在用:not选择器进行操作时，只能选取一项内容进行筛选（网上查询说：not选择器需要进行多项条件筛选用英文半角符号分割，试过没用...），那么就要对子元素和其他元素的click时间添加防止事件穿透的操作event.stopPropagation() 。这里的menuSearch()是我将上面的查询匹配过程封装成了一个function。


　　3. 优化


    

  • 一开始的menuList是页面渲染的时候就有的，若是没有进行搜索操作的时候也会进行数组的组装，优化一把menuList的生成放在了第一次触发搜索功能的时候，先在外层设置一个坑boolFirst为false，第一次触发之后设置为true，只有boolFirst为false的时候才会进行menuList的组装。
    • 

  • 使用时间戳进行节流。在做toast的时候，判断当一秒无操作之后再进行判断是否符合条件，符合条件则toast；

    

    var timer = null;   //外层初始化timer

//下面的放置在menuSearch()函数内
if (timer) {
     clearTimeout(timer);
}
if(searchKey.length>0){
    timer = setTimeout(function () {
        toast(\'找不到相关信息！\');
    },1000);
}
    

    

    • 

  • 添加tooltip：因为我们的menu是在左侧的，宽度是固定的长度，如果将searchResult设置为自适应则容易遮盖右边的内容，但是若是搜索结果过长则会出现显示不全的问题（我们的结果展示列表为固定高度，结果太长会自动换行，会有重影）。解决此问题，首先要禁止换行，将多余的部分用省略号代表，然后利用bootstrap的tooltip，鼠标悬停在搜索结果上面的时候出现小tip显示全部信息。注意：tooltip需要在脚本里面进行初始化：$(\'[data-toggle="tooltip"]\').tooltip()才能生效。
    • 



　　　　禁止换行：white-space:nowrap;


　　　　将超出宽度的内容隐藏起来：overflow:hidden;


　　　　将超出宽度的内容用省略号表示：text-overflow: ellipsis;-o-text-overflow:ellipsis;


　　　　需要特别注意的一个点是，需要设置 i 标签的的display属性为block，i 标签是行内标签，在其上设置宽高都不起作用，所以上述有关宽度的限制和设置，overflow:hidden; text-overflow: ellipsis;-o-text-overflow:ellipsis;都会失效，




showStr += \'<li class="searchresultList" style=\"list-style: none; height: 35px; padding-right:18px; border-bottom: 1px solid #515151; line-height: 35px; font-size: 13px; color: #C4C4C4; vertical-align: middle; \"> <a data-toggle="tooltip" data-placement="top" title=\"\'+searchResult[i].title+\'\" style=\"display: block; border-bottom: none; white-space:nowrap; overflow:hidden; text-overflow: ellipsis;-o-text-overflow:ellipsis; cursor:pointer;\" href=\"\'
      +searchResult[i].href+\'\">\'+searchResult[i].title+\'</a></li>\';




4. 总结


　　需求很小，涉及到的知识点都较为基础，一点一滴慢慢积累吧。下面是全部代码：




<div id="searchBox">
    <input id="searchTitle" type="text" autocomplete="off" placeholder="请输入想搜索的菜单..."><i id="search-icon" class="fa fa-search fa-fw"></i>
    <div class="toast-wrap">
    </div>
</div>
<ul class="beforeSearch" id="searchResult"></ul>
<ul id="menu" style="position:relative;">
    ...这里是menu的列表
</ul>

<script>
    $(function () {
        $(\'[data-toggle="tooltip"]\').tooltip()
        var boolFirst = false;
        var menuList = [];
        var searchResult = null;
        var timer = null;
        var searchKey = \'\';
        var menuSearch = function(){
            searchResult = [];
            if (timer) {
                clearTimeout(timer);
            }
            if(!boolFirst){
                $(\'#menu>li\').each(function () {
                    var title1 = $(this).children(\'a\').eq(0).text().trim();
                    var href1 = $(this).children(\'a\').eq(0).attr(\'href\');
                    if(title1 && href1){
                        menuList.push({\'title\':title1,\'href\':href1});
                    } else {
                        var child2Array = [];
                        $(this).children(\'ul\').children(\'li\').each(function () {
                            var title2 = $(this).children(\'a\').eq(0).text().trim();
                            var href2 = $(this).children(\'a\').eq(0).attr(\'href\');
                            if(title2&&href2){
                                child2Array.push({\'title\':title2,\'href\':href2});
                            } else {
                                var child3Array = [];
                                $(this).find(\'ul>li\').each(function() {
                                    var title3 = $(this).children(\'a\').eq(0).text().trim();
                                    var href3 = $(this).children(\'a\').eq(0).attr(\'href\');
                                    child3Array.push({\'title\':title3,\'href\':href3});
                                })
                                child2Array.push({\'title\':title2,\'childs\':child3Array});
                            }
                        })
                        menuList.push({\'title\':title1,\'childs\':child2Array});
                    }
                })
            }
            var showStr = \'\';
            searchKey = $("#searchTitle").val().trim();
            if($(\'#searchResult\').attr("class")==\'afterSearch\'){
                $("#searchResult>li").remove();
                $("#searchResult").removeClass("afterSearch").addClass("beforeSearch");
            }
            for (let i = 0; i<menuList.length;i++) {
                if((menuList[i].title.indexOf(searchKey)) !== -1 ){
                    if(menuList[i].href){        //一级
                        searchResult.push({\'title\':menuList[i].title,\'href\':menuList[i].href,\'level\':1});
                    } else if(menuList[i].childs[0].href) {   //二级
                        searchResult.push({\'title\':menuList[i].title,\'href\':menuList[i].childs[0].href,\'level\':1});
                    } else{     // 三级
                        searchResult.push({\'title\':menuList[i].title,\'href\':menuList[i].childs[0].childs[0].href,\'level\':1});
                    }
                }
                if(menuList[i].childs){
                    var child2 = menuList[i].childs;
                    first:for(let j = 0;j<child2.length;j++){
                        if((child2[j].title.indexOf(searchKey)) !== -1 ){
                            if(child2[j].childs){
                                searchResult.push({\'title\':menuList[i].title+\'>\'+child2[j].title,\'href\':child2[j].childs[0].href,\'Level\':2});
                            } else {
                                searchResult.push({\'title\':menuList[i].title+\'>\'+child2[j].title,\'href\':child2[j].href,\'Level\':2});
                            }

                        }
                        if(child2[j].childs){
                            var child3 = child2[j].childs;
                            second:for(let k =0;k<child3.length;k++){
                                if((child3[k].title.indexOf(searchKey)) !== -1) {   //在三级查找到了
                                    searchResult.push({\'title\':menuList[i].title+\'>\'+child2[j].title+\'>\'+child3[k].title,\'href\':child3[k].href,\'level\':3});
                                }
                            }
                        }
                    }
                }
                else {}
            }
            // console.log(searchResult);
            boolFirst = true;
            //展示
            if((searchResult.length>0) && (searchKey.length>0)){
                for (let i = 0; i<searchResult.length;i++) {
                    showStr += \'<li class="searchresultList" style=\"list-style: none; height: 35px; padding-right:18px; border-bottom: 1px solid #515151; line-height: 35px; font-size: 13px; color: #C4C4C4; vertical-align: middle; \"> <a data-toggle="tooltip" data-placement="top" title=\"\'+searchResult[i].title+\'\" style=\"display: block; border-bottom: none; white-space:nowrap; overflow:hidden; text-overflow: ellipsis;-o-text-overflow:ellipsis; cursor:pointer;\" href=\"\'
                            +searchResult[i].href+\'\">\'+searchResult[i].title+\'</a></li>\';
                }
                $("#searchResult").removeClass("beforeSearch").addClass("afterSearch")
                $(\'#searchResult\').append(showStr)
                //跳转
                $(\'#searchResult>li\').on(\'click\',function (event) {
                    var link = $(this).children(\'a\').eq(0).attr(\'href\')
                    location.href=link;
                    event.stopPropagation();
                });
            } else {
                if(searchKey.length>0){
                    timer = setTimeout(function () {
                        toast(\'找不到相关信息！\');
                    },1000);
                }
            }
        }
        $(\'#searchTitle\').bind("input propertychange focus",function (event) {
            event.stopPropagation();
            menuSearch();
        });
        $(\'#searchTitle\').on(\'click\',function (event) {
            event.stopPropagation();
        });
        $(\'#search-icon\').on(\'click\',function (event) {
            event.stopPropagation();
            menuSearch();
            if(searchKey.length==0){
                toast(\'找不到相关信息！\');
            }
        });
        $(document).on(\'click\',\':not(#searchResult)\',function(e){
            if($(\'#searchResult\').attr("class")==\'afterSearch\'){
                $("#searchResult>li").remove();
                $("#searchResult").removeClass("afterSearch").addClass("beforeSearch");
            }
        });
    })
    function toast(msg){
        $(\'.toast-msg\').remove();
        setTimeout(function(){
            var str = \'<span class="toast-msg">\'+msg+\'</span>\'
            $(\'.toast-wrap\').append(str);
            $(\'.toast-wrap\').removeClass("toastAnimate");
            setTimeout(function(){
                $(\'.toast-wrap\').addClass("toastAnimate");
            }, 100);
        },100);
    }
</script>

<style>
#searchBox{
    display: block;
    height: 30px;
    background: #666666;
    list-style: none;
    position: relative;
}
#searchBox:focus{
    border-top: 1px solid blue!important;
    background: #373737;
    color: #DDDDDD;
}
#searchTitle{
    padding-left: 20px;
    background: #666666;
    width: 207px;
    height: 30px;
    border: none;
    display: inline-block;
    color: #C4C4C4;
    font-size: 13px;
}
 input:focus{
    border: none!important;
    outline: none!important;
    color: #ffffff;
}
input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #bbb;
}
 input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #bbb;
}
input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #bbb;
}
input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #bbb;
}
 #search-icon{
    display: inline-block;
    z-index: 2;
    color: #ffffff;
    position: absolute;
    line-height: 30px;
}
    .toast-wrap{
        opacity: 0;
        position: fixed;
        top: 14%;
        left: 110px;
        color: #fff;
    }
    .toast-msg{
        background-color: rgba(0,0,0,0.7);
        padding: 2px 5px;
        border-radius: 5px;
    }
    .toastAnimate{
        animation: toastKF 2s;
    }
    @keyframes toastKF{
        0% {opacity: 0;}
        50% {opacity: 1; z-index: 9999}
        100% {opacity: 0; z-index: 0}
    }
    .hidesearchBox{
        display: none!important;
    }
    .beforeSearch{
        display: none;
    }
    .afterSearch{
        list-style:none;
        width: 235px;
        display: inline;
        position: absolute;
        z-index: 2;
        background: #373737;
        padding: 0!important;
    }
    .afterSearch li a{
        color: #C4C4C4!important;
        text-decoration:none!important;
        padding: 0 0 0 20px!important;
    }</style>




 





            

            
        

	    
	    
    


 
                    
            
                

                  
 
        

	 
        

            

                                
分类：
 
                                                                
技术点：

                                            

        

        
相关文章：

        

      
            
 
                    
    
                                                    
  • 
                                 
                                2022-12-23
                            
    • 
                                                        
  • 
                                 
                                2022-12-23
                            
    • 
                                                        
  • 
                                 
                                2022-12-23
                            
    • 
                                                        
  • 
                                 
                                2021-12-24
                            
    • 
                                                        
  • 
                                 
                                2021-12-24
                            
    • 
                                                        
  • 
                                 
                                2022-12-23
                            
    • 
                                                        
  • 
                                 
                                2022-12-23
                            
    • 
                                                

               
   
         

    


  






 
          

    
猜你喜欢 

        
    
                                 
  • 
                     
                    2022-01-02
                
    • 
                                     
  • 
                     
                    2021-11-25
                
    • 
                                     
  • 
                     
                    2021-09-28
                
    • 
                                     
  • 
                     
                    2021-09-17
                
    • 
                                     
  • 
                     
                    2022-12-23
                
    • 
                                     
  • 
                     
                    2021-11-19
                
    • 
                                     
  • 
                     
                    2021-11-25
                
    • 
                            

   
 



    
相关资源 

        
   

   
    

     
相似解决方案 

         
    
                          

    

  
   

    

 
   

    
热门标签  

    

                    Java
                        Python
                        linux
                        javascript
                        Mysql
                        C#
                        Docker
                        算法
                        前端
                        SpringBoot
                        Redis
                        Vue
                        spring
                        设计模式
                        .net core
                        .net
                        kubernetes
                        c++
                        数据库
                        数据结构
                        大数据
                        js
                        机器学习
                        微服务
                        Android
                        Go
                        程序员
                        面试
                        JVM
                        ASP.net core
                        云原生
                        人工智能
                        后端
                        PHP
                        git
                        CSS
                        golang
                        k8s
                        Nginx
                        Django
                        mybatis
                        深度学习
                        多线程
                        React
                        架构
                        devops
                        爬虫
                        云计算
                        Spring Boot
                        LeetCode