从零实现Vue的组件库（八）- Input 实现

基于原生的 HTML 标签进行拓展的 Input 组件。

Input 组件一般是一个组件库的基础，很多组件都需要依赖它，所以该组件的特点在于：

• 支持原生的功能，结合 this.$slots 拓展 slot，便于二次封装；
• v-model 与 v-on=$listeners的相关处理；
• 样式的封装以及抽离。

---

1. 实例

代码

<fat-input placeholder="请输入内容" v-model="inputValue" />


<fat-input placeholder="请输入内容">
    <template slot="prepend">
        <div class="prepend-part c-size-s">Http://div>
    template>

    <template slot="append">
        <div class="append-part c-size-s">.comdiv>
    template>
fat-input>
复制代码

实例地址：Input 实例

代码地址：Github UI-Library

2. 原理

首先拓展 type 属性，添加值为 textarea 的状态，设计该组件的结构为 input 如下

"['input-wrapper']">
    "type === 'textarea'"</span>
        class=<span class="hljs-string">"textarea-inner"</span>
    />

    <template v-else>
        <input
            :class=<span class="hljs-string">"['input-inner']"</span>
            :<span class="hljs-built_in">type</span>=<span class="hljs-string">"type"</span>
        />
    </template>
</div>
<span class="copy-code-btn">复制代码</span></code></pre> 
   <p>基础功能实现：</p> 
   <ul> 
    <li> <p>添加 <code>v-bind="$attrs"</code> 指令，来实现原生 <code>input</code> 的相关属性，例如 <code>placeholder</code>、<code>readonly</code>、<code>maxlength</code>等，在 <code>input</code> 以及 <code>textarea</code> 上，该指令能够在组件上绑定父作用域中不作为 prop 被识别 (且获取) 的特性 (class 和 style 除外)；</p> </li> 
    <li> <p>添加 <code>v-on="$listeners"</code>指令，实现组件上的 <code>change</code>、<code>focus</code>、<code>blur</code> 事件，由于 Input 组件需要支持 <code>v-model="inputValue"</code> ，而在 <code>input</code>标签 上 <code>v-model</code> 依赖 <code>input</code> 事件， 其原理是</p> <pre><code class="hljs bash copyable">event => this.<span class="hljs-variable">$emit</span>(<span class="hljs-string">"input"</span>, event.target.value)
<span class="copy-code-btn">复制代码</span></code></pre><p>但是直接使用时，<code>$emit("input", arg)</code> 中 <code>arg</code> 是一个 <code>[object InputEvent]</code>，与实际应用情况不服， 两者会报异常，这时利用 computed 属性对 <code>$listeners</code> 进行修改</p> <pre><code class="hljs bash copyable"><span class="hljs-built_in">export</span> default {
    model: {
        prop: <span class="hljs-string">"value"</span>,
        event: <span class="hljs-string">"input"</span>
    },
    computed: {
        <span class="hljs-function"><span class="hljs-title">inputListeners</span></span>() {
            <span class="hljs-built_in">return</span> Object.assign({}, this.<span class="hljs-variable">$listeners</span>, {
                input: event => this.<span class="hljs-variable">$emit</span>(<span class="hljs-string">"input"</span>, event.target.value)
            });
        }
    }
};
<span class="copy-code-btn">复制代码</span></code></pre><p>然后再利用 <code>v-on="inputListeners"</code> 绑定到组件上，同时 watch <code>value</code>，</p> <pre><code class="hljs bash copyable">watch: {
    value: {
        handler(newVal) {
            this.inputValue = newVal;
        },
        // 添加immediate，减少created生命周期中的赋值
        immediate: <span class="hljs-literal">true</span>
    }
}
<span class="copy-code-btn">复制代码</span></code></pre></li> 
   </ul> 
   <p>样式拓展实现：</p> 
   <ul> 
    <li>添加icon（非 <code>textarea</code> 时生效），添加<pre><code class="hljs bash copyable"><fat-icon v-if=<span class="hljs-string">"prefixIcon"</span> class=<span class="hljs-string">"icon"</span> :name=<span class="hljs-string">"prefixIcon"</span>/>

<input
    :class=<span class="hljs-string">"['input-inner']"</span>
    :<span class="hljs-built_in">type</span>=<span class="hljs-string">"type"</span>
    :value=<span class="hljs-string">"inputValue"</span>
    v-bind=<span class="hljs-string">"<span class="hljs-variable">$attrs</span>"</span>
    v-on=<span class="hljs-string">"inputListeners"</span>
/>

<fat-icon v-if=<span class="hljs-string">"suffixIcon"</span> class=<span class="hljs-string">"icon"</span> :name=<span class="hljs-string">"suffixIcon"</span>/>
<span class="copy-code-btn">复制代码</span></code></pre></li> 
    <li>实现复合型输入框时，主要依靠具名插槽<pre><code class="hljs bash copyable"><slot name=<span class="hljs-string">"prepend"</span>></slot>

<input
    :class=<span class="hljs-string">"['input-inner', {
        'have-prepand': havePrepand,
        'have-append': haveAppend
    }]"</span>
    :<span class="hljs-built_in">type</span>=<span class="hljs-string">"type"</span>
    :value=<span class="hljs-string">"inputValue"</span>
    v-bind=<span class="hljs-string">"<span class="hljs-variable">$attrs</span>"</span>
    v-on=<span class="hljs-string">"inputListeners"</span>
/>

<slot name=<span class="hljs-string">"append"</span>></slot>
<span class="copy-code-btn">复制代码</span></code></pre>并且为了兼容样式，需要对 <code>input-inner</code> 添加两个类，<code>have-prepand</code> 以及 <code>have-append</code>，它们的状态主要是检查 <code>this.$slots</code> 对象<pre><code class="hljs bash copyable">computed: {
    <span class="hljs-function"><span class="hljs-title">havePrepand</span></span>() {
        <span class="hljs-built_in">return</span> this.<span class="hljs-variable">$slots</span>.prepend;
    },
    <span class="hljs-function"><span class="hljs-title">haveAppend</span></span>() {
        <span class="hljs-built_in">return</span> this.<span class="hljs-variable">$slots</span>.append;
    }
}
<span class="copy-code-btn">复制代码</span></code></pre></li> 
   </ul> 
   <h4 class="heading">3. 使用</h4> 
   <p>由于上述实现过程，都是在原生的 <code>Input</code> 组件进行的拓展，在实际应用时，可结合业务进行封装以及抽象。 使用时，主要注意点两个具名插槽的使用。</p> 
   <pre><code class="hljs js copyable"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"demo-row-content"</span>>
    <span class="xml"><span class="hljs-tag"><<span class="hljs-name">fat-input</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"请输入内容"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prepend"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prepend-part c-size-s"</span>></span>Http://<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">template</span>></span>

        <span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"append"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"append-part c-size-s"</span>></span>.com<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">template</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">fat-input</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
<span class="copy-code-btn">复制代码</span></code></pre> 
   <p>往期文章：</p> 
   <ul> 
    <li>从零实现Vue的组件库（零）- 基本结构以及构建工具</li> 
    <li>从零实现Vue的组件库（一）- Toast 实现</li> 
    <li>从零实现Vue的组件库（二）- Slider 实现</li> 
    <li>从零实现Vue的组件库（三）- Tabs 实现</li> 
    <li>从零实现Vue的组件库（四）- File-Reader 实现</li> 
    <li>从零实现Vue的组件库（五）- Breadcrumb 实现</li> 
    <li>从零实现Vue的组件库（六）- Hover-Tip 实现</li> 
    <li>从零实现Vue的组件库（七）- Message-Box 实现</li> 
    <li>从零实现Vue的组件库（八）- Input 实现</li> 
    <li>从零实现Vue的组件库（九）- InputNumber 实现</li> 
    <li>从零实现Vue的组件库（十）- Select 实现</li> 
    <li>从零实现Vue的组件库（十一）- Date-picker 实现</li> 
    <li>从零实现Vue的组件库（十二）- Table 实现</li> 
    <li>从零实现Vue的组件库（十三）- Pagination 实现</li> 
    <li>从零实现Vue的组件库（十四）- RadioGroup 实现</li> 
    <li>从零实现Vue的组件库（十五）- CheckboxGroup 实现</li> 
   </ul> 
   <blockquote> 
    <p>原创声明： 该文章为原创文章，转载请注明出处。</p> 
   </blockquote> 
  </div> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1280102137069584384"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(从零实现Vue的组件库（八）- Input 实现)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1835514462770130944.htm"
                           title="斤斤计较的婚姻到底有多难？" target="_blank">斤斤计较的婚姻到底有多难？</a>
                        <span class="text-muted">白心之岂必有为</span>

                        <div>很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响</div>
                    </li>
                    <li><a href="/article/1835514464028422144.htm"
                           title="情绪觉察日记第37天" target="_blank">情绪觉察日记第37天</a>
                        <span class="text-muted">露露_e800</span>

                        <div>今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得</div>
                    </li>
                    <li><a href="/article/1835514335561084928.htm"
                           title="芦花鞋一四" target="_blank">芦花鞋一四</a>
                        <span class="text-muted">许叶晗</span>

                        <div>又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花</div>
                    </li>
                    <li><a href="/article/1835514307744460800.htm"
                           title="QQ群采集助手，精准引流必备神器" target="_blank">QQ群采集助手，精准引流必备神器</a>
                        <span class="text-muted">2401_87347160</span>
<a class="tag" taget="_blank" href="/search/%E5%85%B6%E4%BB%96/1.htm">其他</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a>
                        <div>功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以</div>
                    </li>
                    <li><a href="/article/1835514207114719232.htm"
                           title="关于沟通这件事，项目经理不需要每次都面对面进行" target="_blank">关于沟通这件事，项目经理不需要每次都面对面进行</a>
                        <span class="text-muted">流程大师兄</span>

                        <div>很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些</div>
                    </li>
                    <li><a href="/article/1835513803861749760.htm"
                           title="机器学习与深度学习间关系与区别" target="_blank">机器学习与深度学习间关系与区别</a>
                        <span class="text-muted">ℒℴѵℯ心·动ꦿ໊ོ꫞</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入</div>
                    </li>
                    <li><a href="/article/1835513701143244800.htm"
                           title="铭刻于星（四十二）" target="_blank">铭刻于星（四十二）</a>
                        <span class="text-muted">随风至</span>

                        <div>69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但</div>
                    </li>
                    <li><a href="/article/1835513570171908096.htm"
                           title="底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说" target="_blank">底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说</a>
                        <span class="text-muted">造命者说</span>

                        <div>底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡</div>
                    </li>
                    <li><a href="/article/1835513571501502464.htm"
                           title="2020-01-25" target="_blank">2020-01-25</a>
                        <span class="text-muted">晴岚85</span>

                        <div>郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什</div>
                    </li>
                    <li><a href="/article/1835513568917811200.htm"
                           title="随笔 | 仙一般的灵气" target="_blank">随笔 | 仙一般的灵气</a>
                        <span class="text-muted">海思沧海</span>

                        <div>仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，</div>
                    </li>
                    <li><a href="/article/1835513567663714304.htm"
                           title="想家" target="_blank">想家</a>
                        <span class="text-muted">爆米花机</span>

                        <div>也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App</div>
                    </li>
                    <li><a href="/article/1835513551624695808.htm"
                           title="【iOS】MVC设计模式" target="_blank">【iOS】MVC设计模式</a>
                        <span class="text-muted">Magnetic_h</span>
<a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a>
                        <div>MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod</div>
                    </li>
                    <li><a href="/article/1835513551142350848.htm"
                           title="OC语言多界面传值五大方式" target="_blank">OC语言多界面传值五大方式</a>
                        <span class="text-muted">Magnetic_h</span>
<a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt</div>
                    </li>
                    <li><a href="/article/1835513440525971456.htm"
                           title="一百九十四章. 自相矛盾" target="_blank">一百九十四章. 自相矛盾</a>
                        <span class="text-muted">巨木擎天</span>

                        <div>唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也</div>
                    </li>
                    <li><a href="/article/1835513424734416896.htm"
                           title="UI学习——cell的复用和自定义cell" target="_blank">UI学习——cell的复用和自定义cell</a>
                        <span class="text-muted">Magnetic_h</span>
<a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
                        <div>目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添</div>
                    </li>
                    <li><a href="/article/1835512920797179904.htm"
                           title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a>
                        <span class="text-muted">软件技术NINI</span>
<a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div>
                    </li>
                    <li><a href="/article/1835512809883004928.htm"
                           title="10月|愿你的青春不负梦想-读书笔记-01" target="_blank">10月|愿你的青春不负梦想-读书笔记-01</a>
                        <span class="text-muted">Tracy的小书斋</span>

                        <div>本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便</div>
                    </li>
                    <li><a href="/article/1835512542735200256.htm"
                           title="C语言宏函数" target="_blank">C语言宏函数</a>
                        <span class="text-muted">南林yan</span>
<a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a>
                        <div>一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将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<<c<<endl;//800return0;}二、为什么要使用宏函数使用宏函数</div>
                    </li>
                    <li><a href="/article/1835512305320816640.htm"
                           title="地推话术，如何应对地推过程中家长的拒绝" target="_blank">地推话术，如何应对地推过程中家长的拒绝</a>
                        <span class="text-muted">校师学</span>

                        <div>相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业</div>
                    </li>
                    <li><a href="/article/1835512178023690240.htm"
                           title="谢谢你们，爱你们！" target="_blank">谢谢你们，爱你们！</a>
                        <span class="text-muted">鹿游儿</span>

                        <div>昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得</div>
                    </li>
                    <li><a href="/article/1835511911769272320.htm"
                           title="C语言如何定义宏函数？" target="_blank">C语言如何定义宏函数？</a>
                        <span class="text-muted">小九格物</span>
<a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a>
                        <div>在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参</div>
                    </li>
                    <li><a href="/article/1835511912192897024.htm"
                           title="微服务下功能权限与数据权限的设计与实现" target="_blank">微服务下功能权限与数据权限的设计与实现</a>
                        <span class="text-muted">nbsaas-boot</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
                        <div>在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：</div>
                    </li>
                    <li><a href="/article/1835511912843014144.htm"
                           title="理解Gunicorn：Python WSGI服务器的基石" target="_blank">理解Gunicorn：Python WSGI服务器的基石</a>
                        <span class="text-muted">范范0825</span>
<a class="tag" taget="_blank" href="/search/ipython/1.htm">ipython</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
                        <div>理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico</div>
                    </li>
                    <li><a href="/article/1835511669476913152.htm"
                           title="小丽成长记（四十三）" target="_blank">小丽成长记（四十三）</a>
                        <span class="text-muted">玲玲54321</span>

                        <div>小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习</div>
                    </li>
                    <li><a href="/article/1835511542284644352.htm"
                           title="学点心理知识，呵护孩子健康" target="_blank">学点心理知识，呵护孩子健康</a>
                        <span class="text-muted">静候花开_7090</span>

                        <div>昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果</div>
                    </li>
                    <li><a href="/article/1835511163450912768.htm"
                           title="2021年12月19日，春蕾教育集团团建活动感受——黄晓丹" target="_blank">2021年12月19日，春蕾教育集团团建活动感受——黄晓丹</a>
                        <span class="text-muted">黄错错加油</span>

                        <div>感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们</div>
                    </li>
                    <li><a href="/article/1835511036317364224.htm"
                           title="Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断" target="_blank">Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断</a>
                        <span class="text-muted">尐尐呅</span>

                        <div>结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序</div>
                    </li>
                    <li><a href="/article/1835511030260789248.htm"
                           title="c++ 的iostream 和 c++的stdio的区别和联系" target="_blank">c++ 的iostream 和 c++的stdio的区别和联系</a>
                        <span class="text-muted">黄卷青灯77</span>
<a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/iostream/1.htm">iostream</a><a class="tag" taget="_blank" href="/search/stdio/1.htm">stdio</a>
                        <div>在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in</div>
                    </li>
                    <li><a href="/article/1835510909070569472.htm"
                           title="瑶池防线" target="_blank">瑶池防线</a>
                        <span class="text-muted">谜影梦蝶</span>

                        <div>冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而</div>
                    </li>
                    <li><a href="/article/1835510656011431936.htm"
                           title="爬山后遗症" target="_blank">爬山后遗症</a>
                        <span class="text-muted">璃绛</span>

                        <div>爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！</div>
                    </li>
                                <li><a href="/article/24.htm"
                                       title="tomcat基础与部署发布" target="_blank">tomcat基础与部署发布</a>
                                    <span class="text-muted">暗黑小菠萝</span>
<a class="tag" taget="_blank" href="/search/Tomcat+java+web/1.htm">Tomcat java web</a>
                                    <div>从51cto搬家了，以后会更新在这里方便自己查看。 
做项目一直用tomcat，都是配置到eclipse中使用，这几天有时间整理一下使用心得，有一些自己配置遇到的细节问题。 
Tomcat：一个Servlets和JSP页面的容器，以提供网站服务。 
一、Tomcat安装 
    安装方式：①运行.exe安装包 
     &n</div>
                                </li>
                                <li><a href="/article/151.htm"
                                       title="网站架构发展的过程" target="_blank">网站架构发展的过程</a>
                                    <span class="text-muted">ayaoxinchao</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E6%9E%B6%E6%9E%84/1.htm">网站架构</a>
                                    <div>1.初始阶段网站架构：应用程序、数据库、文件等资源在同一个服务器上 
2.应用服务和数据服务分离：应用服务器、数据库服务器、文件服务器 
3.使用缓存改善网站性能：为应用服务器提供本地缓存，但受限于应用服务器的内存容量，可以使用专门的缓存服务器，提供分布式缓存服务器架构 
4.使用应用服务器集群改善网站的并发处理能力：使用负载均衡调度服务器，将来自客户端浏览器的访问请求分发到应用服务器集群中的任何</div>
                                </li>
                                <li><a href="/article/278.htm"
                                       title="[信息与安全]数据库的备份问题" target="_blank">[信息与安全]数据库的备份问题</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
                                    <div> 
 
      如果你们建设的信息系统是采用中心-分支的模式,那么这里有一个问题 
  
 如果你的数据来自中心数据库,那么中心数据库如果出现故障,你的分支机构的数据如何保证安全呢? 
 
   是否应该在这种信息系统结构的基础上进行改造,容许分支机构的信息系统也备份一个中心数据库的文件呢? 
 
 &n</div>
                                </li>
                                <li><a href="/article/405.htm"
                                       title="使用maven tomcat plugin插件debug关联源代码" target="_blank">使用maven tomcat plugin插件debug关联源代码</a>
                                    <span class="text-muted">商人shang</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/debug/1.htm">debug</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E7%9C%8B%E6%BA%90%E7%A0%81/1.htm">查看源码</a><a class="tag" taget="_blank" href="/search/tomcat-plugin/1.htm">tomcat-plugin</a>
                                    <div>*首先需要配置好'''maven-tomcat7-plugin'''，参见[[Maven开发Web项目]]的'''Tomcat'''部分。 
*配置好后，在[[Eclipse]]中打开'''Debug Configurations'''界面，在'''Maven Build'''项下新建当前工程的调试。在'''Main'''选项卡中点击'''Browse Workspace...'''选择需要开发的</div>
                                </li>
                                <li><a href="/article/532.htm"
                                       title="大访问量高并发" target="_blank">大访问量高并发</a>
                                    <span class="text-muted">oloz</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E8%AE%BF%E9%97%AE%E9%87%8F%E9%AB%98%E5%B9%B6%E5%8F%91/1.htm">大访问量高并发</a>
                                    <div>大访问量高并发的网站主要压力还是在于数据库的操作上，尽量避免频繁的请求数据库。下面简 
 
要列出几点解决方案： 
 
01、优化你的代码和查询语句，合理使用索引 
 
02、使用缓存技术例如memcache、ecache将不经常变化的数据放入缓存之中 
 
03、采用服务器集群、负载均衡分担大访问量高并发压力 
 
04、数据读写分离 
 
05、合理选用框架，合理架构(推荐分布式架构)。 
 </div>
                                </li>
                                <li><a href="/article/659.htm"
                                       title="cache 服务器" target="_blank">cache 服务器</a>
                                    <span class="text-muted">小猪猪08</span>
<a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a>
                                    <div>Cache   即高速缓存.那么cache是怎么样提高系统性能与运行速度呢？是不是在任何情况下用cache都能提高性能？是不是cache用的越多就越好呢？我在近期开发的项目中有所体会，写下来当作总结也希望能跟大家一起探讨探讨，有错误的地方希望大家批评指正。 
　　1.Cache   是怎么样工作的? 
　　Cache   是分配在服务器上</div>
                                </li>
                                <li><a href="/article/786.htm"
                                       title="mysql存储过程" target="_blank">mysql存储过程</a>
                                    <span class="text-muted">香水浓</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>Description:插入大量测试数据 
 
use xmpl;

drop procedure if exists mockup_test_data_sp;

create procedure mockup_test_data_sp(
	in number_of_records int
)
begin
	declare cnt int;
	declare name varch</div>
                                </li>
                                <li><a href="/article/913.htm"
                                       title="CSS的class、id、css文件名的常用命名规则" target="_blank">CSS的class、id、css文件名的常用命名规则</a>
                                    <span class="text-muted">agevs</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                                    <div>  CSS的class、id、css文件名的常用命名规则 
    (一)常用的CSS命名规则 
　　头：header 
　　内容：content/container 
　　尾：footer 
　　导航：nav 
　　侧栏：sidebar 
　　栏目：column 
　　页面外围控制整体布局宽度：wrapper 
　　左右中：left right </div>
                                </li>
                                <li><a href="/article/1040.htm"
                                       title="全局数据源" target="_blank">全局数据源</a>
                                    <span class="text-muted">AILIKES</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a><a class="tag" taget="_blank" href="/search/JNDI/1.htm">JNDI</a>
                                    <div>实验目的：为了研究两个项目同时访问一个全局数据源的时候是创建了一个数据源对象，还是创建了两个数据源对象。 
1：将diuid和mysql驱动包（druid-1.0.2.jar和mysql-connector-java-5.1.15.jar）copy至%TOMCAT_HOME%/lib下；2：配置数据源，将JNDI在%TOMCAT_HOME%/conf/context.xml中配置好,格式如下：&l</div>
                                </li>
                                <li><a href="/article/1167.htm"
                                       title="MYSQL的随机查询的实现方法" target="_blank">MYSQL的随机查询的实现方法</a>
                                    <span class="text-muted">baalwolf</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>MYSQL的随机抽取实现方法。举个例子，要从tablename表中随机提取一条记录，大家一般的写法就是：SELECT * FROM tablename ORDER BY RAND() LIMIT 1。但是，后来我查了一下MYSQL的官方手册，里面针对RAND()的提示大概意思就是，在ORDER BY从句里面不能使用RAND()函数，因为这样会导致数据列被多次扫描。但是在MYSQL 3.23版本中，</div>
                                </li>
                                <li><a href="/article/1294.htm"
                                       title="JAVA的getBytes()方法" target="_blank">JAVA的getBytes()方法</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a><a class="tag" taget="_blank" href="/search/OS/1.htm">OS</a>
                                    <div>    在Java中，String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组。这个表示在不同OS下，返回的东西不一样！  
    String.getBytes(String decode)方法会根据指定的decode编码返回某字符串在该编码下的byte数组表示，如： 
    byte[] b_gbk = "</div>
                                </li>
                                <li><a href="/article/1421.htm"
                                       title="AngularJS中操作Cookies" target="_blank">AngularJS中操作Cookies</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/Cookies/1.htm">Cookies</a>
                                    <div>        如果你的应用足够大、足够复杂，那么你很快就会遇到这样一咱种情况：你需要在客户端存储一些状态信息，这些状态信息是跨session(会话)的。你可能还记得利用document.cookie接口直接操作纯文本cookie的痛苦经历。 
        幸运的是，这种方式已经一去不复返了，在所有现代浏览器中几乎</div>
                                </li>
                                <li><a href="/article/1548.htm"
                                       title="[Maven学习笔记五]Maven聚合和继承特性" target="_blank">[Maven学习笔记五]Maven聚合和继承特性</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                                    <div>Maven聚合 
  
在实际的项目中，一个项目通常会划分为多个模块，为了说明问题，以用户登陆这个小web应用为例。通常一个web应用分为三个模块：   
1. 模型和数据持久化层user-core, 
2. 业务逻辑层user-service以 
3. web展现层user-web， 
user-service依赖于user-core 
user-web依赖于user-core和use</div>
                                </li>
                                <li><a href="/article/1675.htm"
                                       title="【JVM七】JVM知识点总结" target="_blank">【JVM七】JVM知识点总结</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a>
                                    <div>  1. JVM运行模式 
1.1 JVM运行时分为-server和-client两种模式，在32位机器上只有client模式的JVM。通常，64位的JVM默认都是使用server模式，因为server模式的JVM虽然启动慢点，但是，在运行过程，JVM会尽可能的进行优化 
1.2 JVM分为三种字节码解释执行方式：mixed mode, interpret mode以及compiler </div>
                                </li>
                                <li><a href="/article/1802.htm"
                                       title="linux下查看nginx、apache、mysql、php的编译参数" target="_blank">linux下查看nginx、apache、mysql、php的编译参数</a>
                                    <span class="text-muted">ronin47</span>

                                    <div>在linux平台下的应用，最流行的莫过于nginx、apache、mysql、php几个。而这几个常用的应用，在手工编译完以后，在其他一些情况下（如：新增模块），往往想要查看当初都使用了那些参数进行的编译。这时候就可以利用以下方法查看。 
1、nginx 
[root@361way ~]# /App/nginx/sbin/nginx -V
nginx: nginx version: nginx/</div>
                                </li>
                                <li><a href="/article/1929.htm"
                                       title="unity中运用Resources.Load的方法？" target="_blank">unity中运用Resources.Load的方法？</a>
                                    <span class="text-muted">brotherlamp</span>
<a class="tag" taget="_blank" href="/search/unity%E8%A7%86%E9%A2%91/1.htm">unity视频</a><a class="tag" taget="_blank" href="/search/unity%E8%B5%84%E6%96%99/1.htm">unity资料</a><a class="tag" taget="_blank" href="/search/unity%E8%87%AA%E5%AD%A6/1.htm">unity自学</a><a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a><a class="tag" taget="_blank" href="/search/unity%E6%95%99%E7%A8%8B/1.htm">unity教程</a>
                                    <div>问：unity中运用Resources.Load的方法？ 
答：Resources.Load是unity本地动态加载资本所用的方法,也即是你想动态加载的时分才用到它,比方枪弹,特效,某些实时替换的图像什么的,主张此文件夹不要放太多东西,在打包的时分,它会独自把里边的一切东西都会集打包到一同,不论里边有没有你用的东西,所以大多数资本应该是自个建文件放置 
1、unity实时替换的物体即是依据环境条件</div>
                                </li>
                                <li><a href="/article/2056.htm"
                                       title="线段树-入门" target="_blank">线段树-入门</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E6%AE%B5%E6%A0%91/1.htm">线段树</a>
                                    <div>


/**
 * 线段树入门
 * 问题：已知线段[2,5] [4,6] [0,7]；求点2,4,7分别出现了多少次
 * 以下代码建立的线段树用链表来保存，且树的叶子结点类似[i,i]
 * 
 * 参考链接：http://hi.baidu.com/semluhiigubbqvq/item/be736a33a8864789f4e4ad18
 * @author lijinna</div>
                                </li>
                                <li><a href="/article/2183.htm"
                                       title="全选与反选" target="_blank">全选与反选</a>
                                    <span class="text-muted">chicony</span>
<a class="tag" taget="_blank" href="/search/%E5%85%A8%E9%80%89/1.htm">全选</a>
                                    <div>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>全选与反选</title>
</div>
                                </li>
                                <li><a href="/article/2310.htm"
                                       title="vim一些简单记录" target="_blank">vim一些简单记录</a>
                                    <span class="text-muted">chenchao051</span>
<a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a>
                                    <div>mac在/usr/share/vim/vimrc linux在/etc/vimrc 
  
1、问：后退键不能删除数据，不能往后退怎么办？ 
      答：在vimrc中加入set backspace=2 
  
2、问：如何控制tab键的缩进？ 
      答：在vimrc中加入set tabstop=4 (任何</div>
                                </li>
                                <li><a href="/article/2437.htm"
                                       title="Sublime Text 快捷键" target="_blank">Sublime Text 快捷键</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/%E5%BF%AB%E6%8D%B7%E9%94%AE/1.htm">快捷键</a><a class="tag" taget="_blank" href="/search/sublime/1.htm">sublime</a>
                                    <div>[size=large][/size]Sublime Text快捷键：Ctrl+Shift+P：打开命令面板Ctrl+P：搜索项目中的文件Ctrl+G：跳转到第几行Ctrl+W：关闭当前打开文件Ctrl+Shift+W：关闭所有打开文件Ctrl+Shift+V：粘贴并格式化Ctrl+D：选择单词，重复可增加选择下一个相同的单词Ctrl+L：选择行，重复可依次增加选择下一行Ctrl+Shift+L：</div>
                                </li>
                                <li><a href="/article/2564.htm"
                                       title="php 引用(&)详解" target="_blank">php 引用(&)详解</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a>
                                    <div>在PHP 中引用的意思是：不同的名字访问同一个变量内容. 与Ｃ语言中的指针是有差别的．Ｃ语言中的指针里面存储的是变量的内容在内存中存放的地址 变量的引用 PHP 的引用允许你用两个变量来指向同一个内容   复制代码代码如下:   
<?  
$a="ABC";  
$b =&$a;  
echo</div>
                                </li>
                                <li><a href="/article/2691.htm"
                                       title="SVN中trunk,branches,tags用法详解" target="_blank">SVN中trunk,branches,tags用法详解</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a>
                                    <div>Subversion有一个很标准的目录结构，是这样的。比如项目是proj，svn地址为svn://proj/，那么标准的svn布局是svn://proj/|+-trunk+-branches+-tags这是一个标准的布局，trunk为主开发目录，branches为分支开发目录，tags为tag存档目录（不允许修改）。但是具体这几个目录应该如何使用，svn并没有明确的规范，更多的还是用户自己的习惯。</div>
                                </li>
                                <li><a href="/article/2818.htm"
                                       title="对软件设计的思考" target="_blank">对软件设计的思考</a>
                                    <span class="text-muted">e200702084</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a><a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a>
                                    <div>软件设计的宏观与微观  
 
   软件开发是一种高智商的开发活动。一个优秀的软件设计人员不仅要从宏观上把握软件之间的开发，也要从微观上把握软件之间的开发。宏观上，可以应用面向对象设计，采用流行的SSH架构，采用web层，业务逻辑层，持久层分层架构。采用设计模式提供系统的健壮性和可维护性。微观上，对于一个类，甚至方法的调用，从计算机的角度模拟程序的运行情况。了解内存分配，参数传</div>
                                </li>
                                <li><a href="/article/2945.htm"
                                       title="同步、异步、阻塞、非阻塞" target="_blank">同步、异步、阻塞、非阻塞</a>
                                    <span class="text-muted">geeksun</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%9E%E9%98%BB%E5%A1%9E/1.htm">非阻塞</a>
                                    <div>同步、异步、阻塞、非阻塞这几个概念有时有点混淆，在此文试图解释一下。 
  
同步：发出方法调用后，当没有返回结果，当前线程会一直在等待（阻塞）状态。 
场景：打电话，营业厅窗口办业务、B/S架构的http请求-响应模式。 
  
异步：方法调用后不立即返回结果，调用结果通过状态、通知或回调通知方法调用者或接收者。异步方法调用后，当前线程不会阻塞，会继续执行其他任务。 
实现：</div>
                                </li>
                                <li><a href="/article/3072.htm"
                                       title="Reverse SSH Tunnel 反向打洞實錄" target="_blank">Reverse SSH Tunnel 反向打洞實錄</a>
                                    <span class="text-muted">hongtoushizi</span>
<a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a>
                                    <div>實際的操作步驟：  
# 首先，在客戶那理的機器下指令連回我們自己的 Server，並設定自己 Server 上的 12345 port 會對應到幾器上的 SSH port
ssh -NfR 12345:localhost:22 fred@myhost.com

# 然後在 myhost 的機器上連自己的 12345 port，就可以連回在客戶那的機器
ssh localhost -p 1</div>
                                </li>
                                <li><a href="/article/3199.htm"
                                       title="Hibernate中的缓存" target="_blank">Hibernate中的缓存</a>
                                    <span class="text-muted">Josh_Persistence</span>
<a class="tag" taget="_blank" href="/search/%E4%B8%80%E7%BA%A7%E7%BC%93%E5%AD%98/1.htm">一级缓存</a><a class="tag" taget="_blank" href="/search/Hiberante%E7%BC%93%E5%AD%98/1.htm">Hiberante缓存</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2%E7%BC%93%E5%AD%98/1.htm">查询缓存</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BA%A7%E7%BC%93%E5%AD%98/1.htm">二级缓存</a>
                                    <div>Hibernate中的缓存 
  
一、Hiberante中常见的三大缓存：一级缓存，二级缓存和查询缓存。 
Hibernate中提供了两级Cache，第一级别的缓存是Session级别的缓存，它是属于事务范围的缓存。这一级别的缓存是由hibernate管理的，一般情况下无需进行干预；第二级别的缓存是SessionFactory级别的缓存，它是属于进程范围或群集范围的缓存。这一级别的缓存</div>
                                </li>
                                <li><a href="/article/3326.htm"
                                       title="对象关系行为模式之延迟加载" target="_blank">对象关系行为模式之延迟加载</a>
                                    <span class="text-muted">home198979</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD/1.htm">延迟加载</a>
                                    <div>形象化设计模式实战     HELLO!架构 
  
一、概念 
Lazy Load：一个对象，它虽然不包含所需要的所有数据，但是知道怎么获取这些数据。 
延迟加载貌似很简单，就是在数据需要时再从数据库获取，减少数据库的消耗。但这其中还是有不少技巧的。 
  
  
二、实现延迟加载 
实现Lazy Load主要有四种方法：延迟初始化、虚</div>
                                </li>
                                <li><a href="/article/3453.htm"
                                       title="xml 验证" target="_blank">xml 验证</a>
                                    <span class="text-muted">pengfeicao521</span>
<a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/xml%E8%A7%A3%E6%9E%90/1.htm">xml解析</a>
                                    <div>有些字符，xml不能识别，用jdom或者dom4j解析的时候就报错 
 
public static void testPattern() { 
 
 // 含有非法字符的串 
 String str =       "Jamey&#52828;&#01;&#02;&#209;&#1282</div>
                                </li>
                                <li><a href="/article/3580.htm"
                                       title="div设置半透明效果" target="_blank">div设置半透明效果</a>
                                    <span class="text-muted">spjich</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%8D%8A%E9%80%8F%E6%98%8E/1.htm">半透明</a>
                                    <div>为div设置如下样式： 
  
div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}  
  
  
  
 说明： 
1、filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认2、-moz-opaci</div>
                                </li>
                                <li><a href="/article/3707.htm"
                                       title="你真的了解单例模式么？" target="_blank">你真的了解单例模式么？</a>
                                    <span class="text-muted">w574240966</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a>
                                    <div>    单例模式，很多初学者认为单例模式很简单，并且认为自己已经掌握了这种设计模式。但事实上，你真的了解单例模式了么。 
  
一，单例模式的5中写法。（回字的四种写法，哈哈。） 
    1，懒汉式 
          （1）线程不安全的懒汉式 
    public cla</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </div>
    </div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>





</body>

</html>