Sky_YiBai
Sky_YiBai

用Html＋Js实现的“自动补全”功能

      来博客园也有段时间了，真心觉得这里的人都是默默耕耘型的，所以决定搬家到这里。这个是我以前在ITeye里面写的http://sky-yibai.iteye.com/blog/1814001，用户名都是Sky_YiBai,现在在这里我在重新编辑啊下吧。

      正文：

      这几天，帮同学解决一个问题，虽然他的问题还没有完全解决，但在解决问题的过程中我做了这个“自动补全”的功能。虽然这个补全的功能在网上也有很多代码，但是在我写代码和学习的过程中，好的较少，清晰的较少，多是转载或是浮躁的写一写，我觉得这样很容易使有问题的人产生入门易，理解难的问题。所以我下面会把自己学习和写这个的过程尽量写的详细一些。

       需求：

       这个其实你登录到百度首页，我的需求主要是参考这个搜索框的“自动补全”功能，自己随便输入个文字，比如：“我”，看看结果理解下吧～

       实现：
       1.可以根据文本框的“输入”自动完成与“输入”相关的数据的匹配和前台展示。
       2.可以通过键盘方向键实现浏览。
       3.可以通过鼠标的点击和键盘的回车选中需要的数据项并更新显示在文本框中。

       实现备注：
       1.在实现的过程中，后台数据的模拟，是通过数组在js部分暂时实现，真正用到项目上我们可以通过ajax来实现，这是后话，暂不详说。
       2.至于兼容性来说，我测试过ie8、chrome、firefox、遨游、360等浏览器。其它的浏览器，尤其是ie系列，如果大家愿意帮这个忙，可以帮忙测试一下。因为  我后边还想把这个封装成jsp的自定义标签，所以这个还是很需要大家的帮助的，先谢谢大家了～～ 

       综上，废话不多说，现在开始正是来分析下如何来实现这个功能，开整：
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

       分析html的结构:

       1.这个通过我自己想，我想应该包括一个文本框，那下面用来显示搜索数据的列表应该用什么呢，我想过select、ul和table，后来还是打开百度首页，输入了个“我”，再F12看了下它的结构，我决定就用他那个吧，详细如下：

       用Html＋Js实现的“自动补全”功能_第1张图片

      2.我的具体实现如下： 

<body onload="initialize()">  
    <div id="bodyDiv" name="bodyDiv" style="position: relative; border-top:0px; margin-top:0; width:160px" >
        
        <input type="text" id="inputUser" name="inputUser" value="" onfocus="inputFocus()" onkeydown="inputKeydown(event)" onblur="inputBlur()" />        
        <div id="showUser" name="showUser">
            
        div>            
    div>
body>

      大家可以看到我的html结构，我打算用table来做具体的列表组件，这里提一句后话：我的table的id为selector，在js中通过getElementById获得的该table并赋值给一个select变量。大家在此先不用我这么做的意义，只要先知道有这么回事儿就好。
      大家应该还可以看到，我在html中绑定了几个事件：
      a.initialize(),这个函数主要用于在页面加载完毕后立即初始化一些变量。
      b.inputFocus(),这个函数主要是当焦点移动到文本框上时调用
      c.inputKeydown(),这个函数主要是当焦点在文本框上时，用户触发了键盘事件，调用此函数处理
      d.inputBlur(),这个事件主要是当焦点离开了文本框时，触发该事件。


      开始分析js部分：

      1.initialize()函数：
      我们首先要明白一件事情，当页面加载完毕后，我们需要看到什么？一个文本框！我们不需要看到什么？那个搜索数据的列表！顺便提一句，什么时候需要看到那个列表呢？那就是当文本框中输入了数据(此处我定义的数据都是数字，所以输入的时候若想有结果也暂时输入数字)，如果有匹配该输入的数据，则要实时的更新并显示列表。
      我们的思路暂时理到这里，其它的留待后话再说，先看代码：

 //加载完后，将"提示"列表隐藏
     function initialize(){
        source=['0123','023',123,1234,212,214,'033333','0352342',1987,17563,20932];
        elemCSS={ focus:{'color':'black','background':'#ccc'}, blur:{'color':'black','background':'transparent'} };
            
        inputUse=document.getElementById("inputUser");
            showUse=document.getElementById("showUser");                
              
            var bodyDiv=document.getElementById("bodyDiv");             
            
            showUse.style.display="none"; 
            inputUse.style.width=bodyDiv.style.width;  
            showUse.style.width=bodyDiv.style.width;

            inputValue=inputUse.defaultValue;        
     }

       这里着重要说的是函数中后四行的代码。对于涉及“width”的部分，首先我们先设置用来包含table的div为隐藏状态，这样，table也将是隐藏的。同时将文本框的宽度和列表的宽度也进行设置，此处我用到的是最外层div的宽度。对于最后一行的代码，我们取出了文本框的默认值（空值）赋值给一个全局变量，这个变量之后的主要作用就是用来记录文本框之前的值，以便用这个值与文本框的当前值相比较，如果值改变了，则需要去后台查询匹配的数据项。
       2.inputFocus()函数：
       大家想想初始化完之后，我们眼前出现的应该是一个文本框,而“提示”列表此时应该是隐藏的。当我们把鼠标在文本框点击一下，页面的焦点就会切换到文本框上，此时也就出发文本框的onfocus事件，调用inputFocus()函数,代码如下：

//在文本框上触发onfocus()事件
        function inputFocus(){
            //调用setInterval()函数每200ms刷新一次    
            this.timer=setInterval(function(){
                if(inputUse.value!=''){
                    //检查文本框的当前值与以前的值是否有变化
                    if(inputUse.value!=inputValue){
                        //如果文本框当前值与之前的值不同，记录当前值，已被下次调用时使用
                        inputValue=inputUse.value;
                        //清除上次调用显示的结果
                        showUse.innerHTML='';
                        if(inputValue!=''){
                            //定义JS的RegExp对象，查询以inputValue开头的数据
                            quickExpr=RegExp('^'+inputValue);
                            //如果数据源不为空，则调用match函数开始匹配数据
                            //此处如果通过ajax取数据，则适当修改数据源即可
                            if(source){ 
                                match(quickExpr,inputValue,source);
                            }     
                        }
                    }
                }
                else{
                    inputValue=inputUse.value;
                    showUse.innerHTML='';
                    showUse.style.display="none"; 
                }
            },200)
        }

      从代码，我们可以看出，我们的主体内容定义在了setInterval()这个函数中。为什么要这样定义呢？因为一旦焦点在文本框中，我们就需要时刻知道文本框的内容是否发生了变化，以便匹配数据，所以我们利用setInterval函数每200m对文本框执行一次判断。

      那么该如何判断呢，之前提到过inputValue，主要是利用这个值与文本框的当前值作比较（从代码中你可以体会到我的意思），并且要更新inputValue的值，以备下次调用使用。如果，文本框的值与200ms之前比发生了变化，我们就要利用js的RegExp对象来访问match()这个函数，这个函数的代码如下：

//该函数用来查询匹配数据
        function match(quickExpr,value,source){
            var table=null; 
            var tr=null;
            var td=null;
            //创建table标签
            table=document.createElement('table');
            table.id='selector';
            table.style.width='100%';
            //开始遍历数组
            //如果用ajax从后台取数据，我们也可组织成数组的形式返回
            for(var i in source){
                //再次检验数据是否为空并且用正则取数据
                if(value.length>0 && quickExpr.exec(source[i])!=null){
                    //创建tr标签
                    tr=document.createElement('tr');
                    //创建td标签
                    td=document.createElement('td'); 
                    //在td中插入数据项
                    td.innerHTML = ''+source[i]+'';
                    //appendChild()在指定元素的最后一个子节点后添加节点   
                    tr.appendChild(td);
                    table.appendChild(tr);
                    showUse.appendChild(table);
                }
            }
            
            //检验table下面的a标签的数量，以此确定是否将“提示”列表显示
            if(showUse.getElementsByTagName('a').length){
                showUse.style.display="";
            }else{
                showUse.style.display="none";
            }
        }

      针对match函数的代码，我在代码中添加的注释相信已经对你的理解有很大的帮助，但我还要在强调的是我选择在此创建包含“提示”列表的table，并根据查询到的符合条件的数据量创建对应的tr，td。这个最终将形成的结构你可以参考上面我对于百度首页的搜索框的截图，以便更好的理解。
      3.inputKeydown()函数：
当我们通过上述两步，我们页面上的“提示”列表已经显示。我们必然会通过方向键等键盘按钮访问列表中的数据。这一个过程中，主要的变化是焦点由文本框内变化到了“提示”列表中，代码如下：

function inputKeydown(event){
            //兼容IE 
            event = event || window.event;
            //如果按了down键            
            if(event.keyCode==40){
                //如果“提示”列表已经显示,则把焦点切换到列表中的第一个数据项上
                if(showUse.style.display==""){
                    showUse.getElementsByTagName('a')[0].focus(); 
                }else{   //如果“提示”列表未显示,则把焦点依旧留在文本框中
                    inputUse.focus();
                }  
            }
            //如果按了up键
            else if(event.keyCode==38){
                //如果“提示”列表已经显示,则把焦点切换到列表中的最后一个数据项上
                if(showUse.style.display==""){
                    showUse.getElementsByTagName('a')[showUse.getElementsByTagName('a').length-1].focus();
                }else{     //如果“提示”列表未显示,则把焦点依旧留在文本框中
                    inputUse.focus();
                }        
            }
            //如果按了tab键，此时的情况与“百度首页”的处理情况一样
            else if(event.keyCode==9){
                showUse.innerHTML='';
                showUse.style.display="none";
            }     
        }

       这里主要想说的是，当"提示"列表已经展开的情况下，如果按了up或者down键(根据事件对象的键码值判断)，则将数据项的最后一项或者第一项设置为高亮，并且将焦点真正切换到相应的高亮数据项上。
       但是这里还需要着重注意的是按了tab键该如何处理。这里的处理方式与百度相同，就是关闭"提示"列表。
       4.inputBlur函数：
       这个函数的定义我们要理解下，这个事件定义的是文本框的onblur事件，该事件的含义是当焦点离开元素对象(此处就是指文本框)时调用。那么具体的内容，我们先来看看代码:

//当焦点离开文本框时，触发该事件    
        function inputBlur(){
            //由于焦点已经离开了文本框，则取消setInterval
            clearInterval(this.timer);
            //记住当前有焦点的选项 
            var current=0;
            //当前table下面的a标签的个数
            var aArray=showUse.getElementsByTagName('a');
            var len=aArray.length-1;
            var select=document.getElementById("selector");
            
            
            //定义“选项”的onclick事件   
            var aClick = function(){
                //由于“选项”上触发了click事件，this就是指a标签，则把a标签包含的数据赋值给文本框
                inputUse.value=this.childNodes[0].data;
                //将文本框的当前值更新到记录以前值的变量中
                inputValue=inputUse.value;
                //由于上面已经选出合适的数据项，则清空table下的内容，并关闭“提示”列表
                showUse.innerHTML='';
                showUse.style.display='none';
                //将焦点移回文本框
                inputUse.focus();
            };
            
            //定义“选项”的onfocus事件 
            var aFocus = function(){
                for(var i=len; i>=0; i--){
                    //this是a，this.parentNode是td，select.children[i].children[0]是table.tr.td
                    if(this.parentNode===select.childNodes[i].childNodes[0]){
                        //如果是同一个td，则将current的值置为焦点所在位置的值
                        current = i;
                        break;
                    }
                }
                //添加有焦点的效果
                for(var k in elemCSS.focus){ 
                    this.style[k] = elemCSS.focus[k];
                }
            };
            
            //定义“选项”的onblur事件
            var aBlur= function(){
                //添加无焦点的效果 
                for(var k in elemCSS.blur)
                    this.style[k] = elemCSS.blur[k];
            };
            
            //定义“选项”的onKeydown是事件   
            var aKeydown = function(event){
                //兼容IE 
                event = event || window.event;
             
                //如果在选择数据项时按了tab键，此时的情况与“百度首页”的处理情况一样
                if(event.keyCode===9){
                    showUse.innerHTML='';
                    showUse.style.display = 'none';
                    inputUse.focus();
                }
                //如果按了down键
                else if(event.keyCode==40){ 
                    //向下移动，准备移动焦点                
                    current++;
                    //如果当前焦点在最后一个数据项上，用户用按了down键，则循环向上，回到文本框上
                    if(current>len){
                        current=-1;
                        inputUse.focus();
                    }else{
                        select.getElementsByTagName('a')[current].focus();
                    }
                }
                //如果按了up键
                else if(event.keyCode==38){
                    //向上移动，准备移动焦点
                    current--;
                    //如果当前焦点在文本框上，用户用按了up键，则循环向下，回到最后一个数据项上
                    if(current<0){
                        inputUse.focus();
                    }else{
                        select.getElementsByTagName('a')[current].focus();
                    }
                }
            };
            
            //将“选项”的事件与相应的处理函数绑定    
            for(var i=0; i){
                aArray[i].onclick = aClick;
                aArray[i].onfocus = aFocus;
                aArray[i].onblur = aBlur;
                aArray[i].onkeydown = aKeydown;
            }
        }

      上面代码的内容很长，但是大家要首先抓住主要的来看。我的建议是先看最后那个for循环。我在这里把定义的四个事件绑定到了一个数组的对象上，而这个数组中的对象就是"提示"列表中每一个数据项。到此，我想大家应该应该还记得上面的inputKeydown()函数了吧，通过该函数将焦点由文本框切换到“提示”列表上，更确切的说是数据项上，此处对应的是标签。那么在数据项上的移动以及选中就要依靠上面定义的四个事件。四个事件的具体分析请大家详细的看注释，有些不懂的地方不妨用浏览器的调试来看看就明白了。

      自己的收获和感想：
      我先说说技术上的吧，我最初利用table调用innerHTML并将其值设置为空，来实现"提示"列表的清除，使下次调用时仅仅显示当次调用的正确结果。我最初代码的测试是面向chrome的，但后来再调试兼容性时，发现在ie下，table是无法对innerTHML属性进行设置值的，但是可读。再纠结了一下之后，发现其实兼容性的主要问题还就是集中在这个上面，于是果断重新写，最终处理了这个问题。
      还有一个就是z－index的使用，这里不详述，但感兴趣的同学可以翻看《程序员》杂志2013.2月版的文章：不为人知的z－index，写的相当不错。
      其实最大的体会就是，自己动手写。虽然网上也有很多人写过，但我保证很多是浅尝辄止的。就像我曾经在一个群里问了个关于焦点切换的问题，很多人都说这个东西都写烂了，当时给我的感觉就是我这个问题问的很小白阿。但我坚持说向自己写写，后来其中的一个说简单的那位看了代码也说不会。这就说明一个问题，很多事情别人轻视了，用插件来解决了，如果你在有精力的情况下，最好还是自己动手写写。
      我觉的比较好的方法就是，结合我这篇博客来说，我觉得大家可以先点开百度首页自己理清思路，能理到哪儿算哪儿。然后再看看我这篇博客，加深对实现的了解。之后最好就是自己先写写了，其实按照这个的难度，一般人都可以写到焦点的切换。最后，如果实在没想法的就看看我附件只中的源码吧。加上注释，我相信一定可以使你较为轻松的明白问题。
      最后，希望大家共同进步～～

      PS:我怎么没找到添加附件的地方。。。。，还有怎么在我编辑这个文章时，行距怎么一会儿大一会儿小啊。。。。望高手指点

      这是代码的下载地址：http://files.cnblogs.com/PurpleDream/%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8.rar

 

 

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(用Html＋Js实现的“自动补全”功能)

  • 斤斤计较的婚姻到底有多难？ 白心之岂必有为
    很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
  • 情绪觉察日记第37天 露露_e800
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
  • 芦花鞋一四 许叶晗
    又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
  • QQ群采集助手，精准引流必备神器 2401_87347160 其他经验分享
    功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
  • 关于沟通这件事，项目经理不需要每次都面对面进行 流程大师兄
    很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说 造命者说
    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
  • 2020-01-25 晴岚85
    郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
  • 随笔 | 仙一般的灵气 海思沧海
    仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
  • 想家 爆米花机
    也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
  • 【iOS】MVC设计模式 Magnetic_h iosmvc设计模式objective-c学习ui
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • 一百九十四章. 自相矛盾 巨木擎天
    唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
  • C语言宏函数 南林yan C语言c语言
    一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
  • 地推话术，如何应对地推过程中家长的拒绝 校师学
    相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
  • 谢谢你们，爱你们！ 鹿游儿
    昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • 微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务java架构
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
  • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
  • 小丽成长记（四十三） 玲玲54321
    小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹 黄错错加油
    感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
  • Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断 尐尐呅
    结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
  • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
  • 瑶池防线 谜影梦蝶
    冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
  • 爬山后遗症 璃绛
    爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
  • 312个免费高速HTTP代理IP（能隐藏自己真实IP地址） yangshangchuan 高速免费superwordHTTP代理
        124.88.67.20:843 190.36.223.93:8080 117.147.221.38:8123 122.228.92.103:3128 183.247.211.159:8123 124.88.67.35:81 112.18.51.167:8123 218.28.96.39:3128 49.94.160.198:3128 183.20
  • pull解析和json编码 百合不是茶 androidpull解析json
    n.json文件: [{name:java,lan:c++,age:17},{name:android,lan:java,age:8}]   pull.xml文件 <?xml version="1.0" encoding="utf-8"?> <stu>     <name>java
  • [能源与矿产]石油与地球生态系统 comsci 能源
          按照苏联的科学界的说法,石油并非是远古的生物残骸的演变产物,而是一种可以由某些特殊地质结构和物理条件生产出来的东西,也就是说,石油是可以自增长的....       那么我们做一个猜想: 石油好像是地球的体液,我们地球具有自动产生石油的某种机制,只要我们不过量开采石油,并保护好
  • 类与对象浅谈 沐刃青蛟 java基础
           类，字面理解，便是同一种事物的总称，比如人类，是对世界上所有人的一个总称。而对象，便是类的具体化，实例化，是一个具体事物，比如张飞这个人，就是人类的一个对象。但要注意的是：张飞这个人是对象，而不是张飞，张飞只是他这个人的名字，是他的属性而已。而一个类中包含了属性和方法这两兄弟，他们分别用来描述对象的行为和性质（感觉应该是
  • 新站开始被收录后，我们应该做什么？ IT独行者 PHPseo
    新站开始被收录后，我们应该做什么？         百度终于开始收录自己的网站了，作为站长，你是不是觉得那一刻很有成就感呢，同时，你是不是又很茫然，不知道下一步该做什么了？至少我当初就是这样，在这里和大家一份分享一下新站收录后，我们要做哪些工作。       至于如何让百度快速收录自己的网站，可以参考我之前的帖子《新站让百
  • oracle 连接碰到的问题 文强chu oracle
    Unable to find a java Virtual Machine－－安装64位版Oracle11gR2后无法启动SQLDeveloper的解决方案 作者：草根IT网 来源：未知 人气：813标签： 导读：安装64位版Oracle11gR2后发现启动SQLDeveloper时弹出配置java.exe的路径，找到Oracle自带java.exe后产生的路径“C:\app\用户名\prod
  • Swing中按ctrl键同时移动鼠标拖动组件（类中多借口共享同一数据） 小桔子 java继承swing接口监听
            都知道java中类只能单继承，但可以实现多个接口，但我发现实现多个接口之后，多个接口却不能共享同一个数据，应用开发中想实现：当用户按着ctrl键时，可以用鼠标点击拖动组件，比如说文本框。 编写一个监听实现KeyListener,NouseListener,MouseMotionListener三个接口，重写方法。定义一个全局变量boolea
  • linux常用的命令 aichenglong linux常用命令
    1 startx切换到图形化界面 2 man命令:查看帮助信息 man 需要查看的命令,man命令提供了大量的帮助信息,一般可以分成4个部分 name:对命令的简单说明 synopsis:命令的使用格式说明 description:命令的详细说明信息 options:命令的各项说明 3 date:显示时间 语法：date [OPTION]... [+FORMAT]
  • eclipse内存优化 AILIKES javaeclipsejvmjdk
    一 基本说明      在JVM中，总体上分2块内存区,默认空余堆内存小于 40%时，JVM就会增大堆直到-Xmx的最大限制；空余堆内存大于70%时，JVM会减少堆直到-Xms的最小限制。     1)堆内存(Heap memory):堆是运行时数据区域，所有类实例和数组的内存均从此处分配,是Java代码可及的内存，是留给开发人
  • 关键字的使用探讨 百合不是茶 关键字
    //关键字的使用探讨/*访问关键词private 只能在本类中访问public 只能在本工程中访问protected 只能在包中和子类中访问默认的 只能在包中访问*//*final   类 方法 变量 final 类 不能被继承 final 方法 不能被子类覆盖，但可以继承 final 变量 只能有一次赋值，赋值后不能改变 final 不能用来修饰构造方法*///this()
  • JS中定义对象的几种方式 bijian1013 js
        1. 基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)： <html> <head> <title>基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)</title> </head> <script> var obj = new Object();
  • 表驱动法实例 bijian1013 java表驱动法TDD
    获得月的天数是典型的直接访问驱动表方式的实例，下面我们来展示一下： MonthDaysTest.java package com.study.test; import org.junit.Assert; import org.junit.Test; import com.study.MonthDays; public class MonthDaysTest { @T
  • LInux启停重启常用服务器的脚本 bit1129 linux
    启动，停止和重启常用服务器的Bash脚本，对于每个服务器，需要根据实际的安装路径做相应的修改   #! /bin/bash Servers=(Apache2, Nginx, Resin, Tomcat, Couchbase, SVN, ActiveMQ, Mongo); Ops=(Start, Stop, Restart); currentDir=$(pwd); echo
  • 【HBase六】REST操作HBase bit1129 hbase
    HBase提供了REST风格的服务方便查看HBase集群的信息，以及执行增删改查操作   1. 启动和停止HBase REST 服务 1.1 启动REST服务 前台启动（默认端口号8080） [hadoop@hadoop bin]$ ./hbase rest start   后台启动 hbase-daemon.sh start rest   启动时指定
  • 大话zabbix 3.0设计假设 ronin47
    What’s new in Zabbix 2.0? 去年开始使用Zabbix的时候，是1.8.X的版本，今年Zabbix已经跨入了2.0的时代。看了2.0的release notes，和performance相关的有下面几个：          :: Performance improvements::Trigger related da
  • http错误码大全 byalias http协议javaweb
    响应码由三位十进制数字组成，它们出现在由HTTP服务器发送的响应的第一行。 响应码分五种类型，由它们的第一位数字表示： 1）1xx：信息，请求收到，继续处理 2）2xx：成功，行为被成功地接受、理解和采纳 3）3xx：重定向，为了完成请求，必须进一步执行的动作 4）4xx：客户端错误，请求包含语法错误或者请求无法实现 5）5xx：服务器错误，服务器不能实现一种明显无效的请求
  • J2EE设计模式-Intercepting Filter bylijinnan java设计模式数据结构
    Intercepting Filter类似于职责链模式 有两种实现 其中一种是Filter之间没有联系，全部Filter都存放在FilterChain中，由FilterChain来有序或无序地把把所有Filter调用一遍。没有用到链表这种数据结构。示例如下： package com.ljn.filter.custom; import java.util.ArrayList;
  • 修改jboss端口 chicony jboss
    修改jboss端口   %JBOSS_HOME%\server\{服务实例名}\conf\bindingservice.beans\META-INF\bindings-jboss-beans.xml   中找到 <!-- The ports-default bindings are obtained by taking the base bindin
  • c++ 用类模版实现数组类 CrazyMizzz C++
    最近c++学到数组类，写了代码将他实现，基本具有vector类的功能 #include<iostream> #include<string> #include<cassert> using namespace std; template<class T> class Array { public: //构造函数
  • hadoop dfs.datanode.du.reserved 预留空间配置方法 daizj hadoop预留空间
    对于datanode配置预留空间的方法 为：在hdfs-site.xml添加如下配置  <property>     <name>dfs.datanode.du.reserved</name>     <value>10737418240</value>    
  • mysql远程访问的设置 dcj3sjt126com mysql防火墙
    第一步: 激活网络设置 你需要编辑mysql配置文件my.cnf. 通常状况，my.cnf放置于在以下目录： /etc/mysql/my.cnf (Debian linux) /etc/my.cnf （Red Hat Linux/Fedora Linux) /var/db/mysql/my.cnf (FreeBSD) 然后用vi编辑my.cnf，修改内容从以下行： [mysqld] 你所需要: 1
  • ios 使用特定的popToViewController返回到相应的Controller dcj3sjt126com controller
    1、取navigationCtroller中的Controllers NSArray * ctrlArray = self.navigationController.viewControllers; 2、取出后，执行， [self.navigationController popToViewController:[ctrlArray objectAtIndex:0] animated:YES
  • Linux正则表达式和通配符的区别 eksliang 正则表达式通配符和正则表达式的区别通配符
    转载请出自出处：http://eksliang.iteye.com/blog/1976579 首先得明白二者是截然不同的 通配符只能用在shell命令中,用来处理字符串的的匹配。 判断一个命令是否为bash shell(linux 默认的shell)的内置命令 type -t commad 返回结果含义 file  表示为外部命令 alias  表示该
  • Ubuntu Mysql Install and CONF gengzg Install
    http://www.navicat.com.cn/download/navicat-for-mysql Step1: 下载Navicat ，网址：http://www.navicat.com/en/download/download.html Step2：进入下载目录，解压压缩包：tar -zxvf navicat11_mysql_en.tar.gz
  • 批处理，删除文件bat huqiji windowsdos
    @echo off ::演示：删除指定路径下指定天数之前（以文件名中包含的日期字符串为准）的文件。 ::如果演示结果无误，把del前面的echo去掉，即可实现真正删除。 ::本例假设文件名中包含的日期字符串（比如：bak-2009-12-25.log） rem 指定待删除文件的存放路径 set SrcDir=C:/Test/BatHome rem 指定天数 set DaysAgo=1
  • 跨浏览器兼容的HTML5视频音频播放器 天梯梦 html5
    HTML5的video和audio标签是用来在网页中加入视频和音频的标签，在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。   How to enable <video> and <audio> tags in
  • Bundle自定义数据传递 hm4123660 androidSerializable自定义数据传递BundleParcelable
          我们都知道Bundle可能过put****()方法添加各种基本类型的数据，Intent也可以通过putExtras(Bundle)将数据添加进去，然后通过startActivity()跳到下一下Activity的时候就把数据也传到下一个Activity了。如传递一个字符串到下一个Activity   把数据放到Intent
  • C＃：异步编程和线程的使用（.NET 4.5 ） powertoolsteam .net线程C#异步编程
    异步编程和线程处理是并发或并行编程非常重要的功能特征。为了实现异步编程，可使用线程也可以不用。将异步与线程同时讲，将有助于我们更好的理解它们的特征。 本文中涉及关键知识点 1. 异步编程 2. 线程的使用 3. 基于任务的异步模式 4. 并行编程 5. 总结 异步编程 什么是异步操作？异步操作是指某些操作能够独立运行，不依赖主流程或主其他处理流程。通常情况下，C＃程序
  • spark 查看 job history 日志 Stark_Summer 日志sparkhistoryjob
    SPARK_HOME/conf 下: spark-defaults.conf 增加如下内容 spark.eventLog.enabled true spark.eventLog.dir hdfs://master:8020/var/log/spark spark.eventLog.compress true spark-env.sh 增加如下内容 export SP
  • SSH框架搭建 wangxiukai2015eye springHibernatestruts
    MyEclipse搭建SSH框架 Struts Spring Hibernate 1、new一个web project。 2、右键项目，为项目添加Struts支持。    选择Struts2 Core Libraries -<MyEclipes-Library>      点击Finish。src目录下多了struts
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他