重新认识受控和非受控组件

作者：霜序

校稿：袋鼠云数栈前端团队运营小组

该文章包含如下内容

• 受控与非受控组件
  • 非受控组件
  • 受控组件
• 受控和非受控组件边界
• 反模式
• 解决方案

前言

在 HTML 中，表单元素(/</code>/<code><select></code>)，通常自己会维护 state，并根据用户的输入进行更新</p> <pre><code class="language-jsx"><form> <label> 名字: <input type="text" name="name" /> </label> <input type="submit" value="提交" /> </form> </code></pre> <p>在这个 HTML 中，我们可以在 input 中随意的输入值，如果我们需要获取到当前 input 所输入的内容，应该怎么做呢？</p> <h2 id="受控与非受控组件">受控与非受控组件</h2> <h3 id="非受控组件uncontrolled-component">非受控组件(uncontrolled component)</h3> <p>使用非受控组件，不是为每个状态更新编写数据处理函数，而是将表单数据交给 DOM 节点来处理，可以使用 Ref 来获取数据<br> 在非受控组件中，希望能够赋予表单一个初始值，但是不去控制后续的更新。可以采用<code>defaultValue</code>指定一个默认值</p> <pre><code class="language-jsx">class Form extends Component { handleSubmitClick = () => { const name = this._name.value; // do something with `name` } render() { return ( <div> <input type="text" defaultValue="Bob" ref={input => this._name = input} /> <button onClick={this.handleSubmitClick}>Sign up</button> </div> ); } } </code></pre> <h3 id="受控组件controlled-component">受控组件(controlled component)</h3> <p>在 React 中，可变状态(mutable state)通常保存在组件的 state 属性中，并且只能够通过<code>setState</code> 来更新</p> <pre><code class="language-jsx">class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: 'shuangxu'}; } render() { return ( <form onSubmit={this.handleSubmit}> <label> 名字: <input type="text" value={this.state.value}/> </label> <input type="submit" value="提交" /> </form> ); } } </code></pre> <p>在上述的代码中，在 Input 设置了 value 属性值，因此显示的值始终为<code>this.state.value</code>，这使得 state 成为了唯一的数据源。</p> <pre><code class="language-jsx">const handleChange = (event) => { this.setState({ value: event.target.value }) } <input type="text" value={this.state.value} onChange={this.handleChange}/> </code></pre> <p>如果我们在上面的示例中写入<code>handleChange</code> 方法，那么每次按键都会执行该方法并且更新 React 的 state,因此表单的值将随着用户的输入而改变</p> <p>React 组件控制着用户输入过程中表单发生的操作并且 state 还是唯一数据源，被 React 以这种方式控制取值的表单输入元素叫做受控组件</p> <h2 id="受控和非受控组件边界">受控和非受控组件边界</h2> <h3 id="非受控组件">非受控组件</h3> <p>Input 组件只接收一个<code>defaultValue</code>默认值，调用 Input 组件的时候，只需要通过 props 传递一个<code>defaultValue</code> 即可</p> <pre><code class="language-jsx">//组件 function Input({defaultValue}){ return <input defaultValue={defaultValue} /> } //调用 function Demo(){ return <Input defaultValue='shuangxu' /> } </code></pre> <h3 id="受控组件">受控组件</h3> <p>数值的展示和变更需要由<code>state</code>和<code>setState</code>，组件内部控制 state，并实现自己的 onChange 方法</p> <pre><code class="language-jsx">//组件 function Input() { const [value, setValue] = useState('shuangxu') return <input value={value} onChange={e=>setValue(e.target.value)} />; } //调用 function Demo() { return <Input />; } </code></pre> <p>请问这时 Input 组件是受控还是非受控？如果我们采用之前的写法更改这个组件以及其调用</p> <pre><code class="language-jsx">//组件 function Input({defaultValue}) { const [value, setValue] = useState(defaultValue) return <input value={value} onChange={e=>setValue(e.target.value)} />; } //调用 function Demo() { return <Input defaultValue='shuangxu' />; } </code></pre> <p>此时的 Input 组件本身是一个受控组件，它是由唯一的 state 数据驱动的。但是对于 Demo 来说，我们并没有 Input 组件的一个数据变更权利，那么对于 Demo 组件来说，Input 组件就是一个非受控组件。(‼️以非受控组件的方式去调用受控组件是一种反模式)</p> <p>如何修改当前的 Input 和 Demo 组件代码，才能够使得 Input 组件本身也是一个受控组件，并且对于 Demo 组件来说它也是受控的讷？</p> <pre><code class="language-jsx">function Input({value, onChange}){ return <input value={value} onChange={onChange} } function Demo(){ const [value, setValue] = useState('shuangxu') return <Input value={value} onChange={e => setValue(e.target.value)} /> </code></pre> <h2 id="反模式-以非受控组件的方式去调用受控组件">反模式-以非受控组件的方式去调用受控组件</h2> <p>虽然受控和非受控通常用来指向表单的 inputs，也能用来描述数据频繁更新的组件。<br> 通过上一节受控与非受控组件的边界划分，我们可以简单的分类为：</p> <ul> <li>如果使用 props 传入数据，有对应的数据处理方法，组件对于父级来说认为是可控的</li> <li>数据只是保存在组件内部的 state 中，组件对于父级来说是非受控的</li> </ul> <p>⁉️什么是派生 state</p> <p>简单来说，如果一个组件的 state 中的某个数据来自外部，就将该数据称之为派生状态。</p> <p>大部分使用派生 state 导致的问题，不外乎两个原因：</p> <ul> <li>直接复制 props 到 state</li> <li>如果 props 和 state 不一致就更新 state</li> </ul> <h3 id="直接复制-prop-到-state">直接复制 prop 到 state</h3> <p>⁉️<code>getDerivedStateFromProps</code>和<code>componentWillReceiveProps</code>的执行时期</p> <ul> <li>在父级重新渲染时，不管 props 是否有变化，这两个生命周期都会执行</li> <li>所以在两个方法里面直接复制 props 到 state 是不安全的，会导致 state 没有正确渲染</li> </ul> <pre><code class="language-jsx">class EmailInput extends React.Component { constructor(props) { super(props); this.state = { email: this.props.email //初始值为props中email }; } componentWillReceiveProps(nextProps) { this.setState({ email: nextProps.email }); //更新时，重新给state赋值 } handleChange = (e) => { this.setState({ email: e.target.value }); }; render() { const { email } = this.state; return <input value={email} onChange={this.handleChange} />; } } </code></pre> <p>点击查看示例</p> <p>给 Input 设置 props 传来的初始值，在 Input 输入时它会修改 state。但是如果父组件重新渲染时，输入框 Input 的值就会丢失，变成 props 的默认值</p> <p>即使我们在重置前比较<code>nextProps.email!==this.state.email</code>仍然会导致更新</p> <p>针对于目前这个小 demo 来说，可以使用<code>shouldComponentUpdate</code>来比较 props 中的 email 是否修改再来决定是否需要重新渲染。但是对于实际应用来说，这种处理方式并不可行，一个组件会接收多个 prop，任何一个 prop 的改变都会导致重新渲染和不正确的状态重置。加上行内函数和对象 prop，创建一个完全可靠的<code>shouldComponentUpdate</code>会变得越来越难。<code>shouldComponentUpdate</code>这个生命周期更多是用于性能优化，而不是处理派生 state。<br> 截止这里，讲清<strong>为什么不能直接复制 prop 到 state</strong>。思考另一个问题，如果只使用 props 中的 email 属性更新组件讷？</p> <h3 id="在-props-变化后修改-state">在 props 变化后修改 state</h3> <p>接着上述示例，只使用<code>props.email</code>来更新组件，这样可以防止修改 state 导致的 bug</p> <pre><code class="language-jsx">class EmailInput extends React.Component { constructor(props) { super(props); this.state = { email: this.props.email //初始值为props中email }; } componentWillReceiveProps(nextProps) { if(nextProps.email !== this.props.email){ this.setState({ email: nextProps.email }); //email改变时，重新给state赋值 } } //... } </code></pre> <p>通过这个改造，组件只有在 props.email 改变时才会重新给 state 赋值，那这样改造会有问题吗？</p> <p>在下列场景中，对拥有两个相同 email 的账号进行切换的时，这个输入框不会重置，因为父组件传来的 prop 值没有任何变化<br> 点击查看示例<br> 这个场景是构建出来的，可能设计奇怪，但是这样子的错误很常见。对于这种反模式来说，有两种方案可以解决这些问题。关键在于，<strong>任何数据，都要保证只有一个数据来源，而且避免直接复制它。</strong></p> <h2 id="解决方案">解决方案</h2> <h3 id="完全可控的组件">完全可控的组件</h3> <p>从 EmailInput 组件中删除 state，直接使用 props 来获取值，将受控组件的控制权交给父组件。</p> <pre><code class="language-jsx">function EmailInput(props){ return <input onChange={props.onChange} value={props.email}/> } </code></pre> <p>如果想要保存临时的值，需要父组件手动执行保存。</p> <h3 id="有-key-的非受控组件">有 key 的非受控组件</h3> <p>让组件存储临时的 email state，email 的初始值仍然是通过 prop 来接受的，但是更改之后的值就和 prop 没有关系了</p> <pre><code class="language-jsx">function EmailInput(props){ const [email, setEmail] = useState(props.email) return <input value={email} onChange={(e) => setEmail(e.target.value)}/> } </code></pre> <p>在之前的切换账号的示例中，为了在不同页面切换不同的值，可以使用<code>key</code>这个 React 特殊属性。当 key 变化时，React 会创建一个新的组件而不是简单的更新存在的组件(获取更多)。我们经常使用在渲染动态列表时使用 key 值，这里也可以使用。</p> <pre><code class="language-jsx"><EmailInput email={account.email} key={account.id} /> </code></pre> <p>点击查看示例</p> <p>每次 id 改变的时候，都会重新创建<code>EmailInput</code>，并将其状态重置为最近 email 值。</p> <h3 id="可选方案">可选方案</h3> <ol> <li>使用 key 属性来做，会使组件整个组件的 state 都重置。可以在<code>getDerivedStateFromProps</code>和<code>componentWillReceiveProps</code> 来观察 id 的变化，麻烦但是可行<br> 点击查看示例</li> </ol> <pre><code class="language-jsx">class EmailInput extends Component { state = { email: this.props.email, prevId: this.props.id }; componentWillReceiveProps(nextProps) { const { prevId } = this.state; if (nextProps.id !== prevId) { this.setState({ email: nextProps.email, prevId: nextProps.id }); } } // ... } </code></pre> <ol start="2"> <li>使用实例方法重置非受控组件<br> 刚刚两种方式，均是再有唯一标识值的情况下。如果在没有合适的<code>key</code>值时，也想要重新创建组件。第一种方案就是生成随机值或者递增的值当作<code>key</code>值，另一种就是使用示例方法强制重置内部状态<br> 父组件使用ref调用这个方法，点击查看示例</li> </ol> <pre><code class="language-jsx">class EmailInput extends Component { state = { email: this.props.email }; resetEmailForNewUser(newEmail) { this.setState({ email: newEmail }); } // ... } </code></pre> <h2 id="那我们如何选">那我们如何选</h2> <p>在我们的业务开发中，尽量选择受控组件，减少使用派生 state，过量的使用 componentWillReceiveProps 可能导致 props 判断不够完善，倒是重复渲染死循环问题。</p> <p>在组件库开发中，例如 Ant Design，将受控与非受控的调用方式都开放给用户，让用户自主选择对应的调用方式。比如 Form 组件，我们常使用 getFieldDecorator 和 initialValue 来定义表单项，但是我们根本不关心中间的输入过程，在最后提交的时候通过 getFieldsValue 或者 validateFields 拿到所有的表单值，这就是非受控的调用方式。或者是，我们在只有一个 Input 的时候，我们可以直接绑定 value 和 onChange 事件，这也就是受控的方式调用。</p> <h2 id="总结">总结</h2> <p>在本文中，首先介绍了非受控组件和受控组件的概念。对于受控组件来说，组件控制用户输入的过程以及 state 是受控组件唯一的数据来源。</p> <p>接着介绍了组件的调用问题，对于组件调用方而言，组件提供方是否为受控组件。对于调用方而言，组件受控以及非受控的边界划分取决于当前组件对于子组件值的变更是否拥有控制权。</p> <p>接着介绍了以非受控组件的方式调用受控组件这种反模式用法，以及相关示例。不要直接复制 props 到 state，而是使用受控组件。对于不受控的组件，当你想在 prop 变化时重置 state 的话，可以选择以下几种方式：</p> <ul> <li>建议: 使用<code>key</code>属性，重置内部所有的初始 state</li> <li>选项一：仅更改某些字段，观察特殊属性的变化(具有唯一性的属性)</li> <li>选项二：使用 ref 调用实例方法</li> </ul> <p>最后总结了一下，应当如何选择受控组件还是非受控组件。</p> <h2 id="参考链接">参考链接</h2> <ul> <li>React 官网——受控组件</li> <li>React 官网——非受控组件</li> <li>controlled vs. uncontrolled form inputs</li> <li>Transitioning from uncontrolled inputs to controlled</li> <li>重新认识受控非受控组件</li> <li>你可能不需要使用派生 state</li> </ul> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1504285826593390592"></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">你可能感兴趣的:(重新认识受控和非受控组件)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <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/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/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/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/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/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/1835510025561403392.htm" title="《投行人生》读书笔记" target="_blank">《投行人生》读书笔记</a> <span class="text-muted">小蘑菇的树洞</span> <div>《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好</div> </li> <li><a href="/article/1835509391361667072.htm" title="Linux下QT开发的动态库界面弹出操作（SDL2）" target="_blank">Linux下QT开发的动态库界面弹出操作（SDL2）</a> <span class="text-muted">13jjyao</span> <a class="tag" taget="_blank" href="/search/QT%E7%B1%BB/1.htm">QT类</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</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/sdl2/1.htm">sdl2</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口</div> </li> <li><a href="/article/1835509266627260416.htm" title="绘本讲师训练营【24期】8/21阅读原创《独生小孩》" target="_blank">绘本讲师训练营【24期】8/21阅读原创《独生小孩》</a> <span class="text-muted">1784e22615e0</span> <div>24016-孟娟《独生小孩》图片发自App今天我想分享一个蛮特别的绘本，讲的是一个特殊的群体，我也是属于这个群体，80后的独生小孩。这是一本中国绘本，作者郭婧，也是一个80厚。全书一百多页，均为铅笔绘制，虽然为黑白色调，但并不显得沉闷。全书没有文字，犹如“默片”，但并不影响读者对该作品的理解，反而显得神秘，梦幻，給读者留下想象的空间。作者在前蝴蝶页这样写到：“我更希望父母和孩子一起分享这本书，使他</div> </li> <li><a href="/article/1835508761310097408.htm" title="店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码" target="_blank">店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码</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%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需</div> </li> <li><a href="/article/1835508130268672000.htm" title="消息中间件有哪些常见类型" target="_blank">消息中间件有哪些常见类型</a> <span class="text-muted">xmh-sxh-1314</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>消息中间件根据其设计理念和用途，可以大致分为以下几种常见类型：点对点消息队列（Point-to-PointMessagingQueues）：在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。队列中的消息只能被一个消费者消费，消费后即被删除。常见的实现包括IBM的MQSeries、RabbitMQ的部分使用场景等。适用于任务分发、负载均衡等场景。发布/订阅消息模型（Pub/Sub</div> </li> <li><a href="/article/1835508131032035328.htm" title="ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）" target="_blank">ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）</a> <span class="text-muted">研学随笔</span> <a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==</div> </li> <li><a href="/article/1835507626276909056.htm" title="水平垂直居中的几种方法（总结）" target="_blank">水平垂直居中的几种方法（总结）</a> <span class="text-muted">LJ小番茄</span> <a class="tag" taget="_blank" href="/search/CSS_%E7%8E%84%E5%AD%A6%E8%AF%AD%E8%A8%80/1.htm">CSS_玄学语言</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>1.使用flexbox的justify-content和align-items.parent{display:flex;justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/height:100vh;/*需要指定高度*/}2.使用grid的place-items:center.parent{display:grid;place-item</div> </li> <li><a href="/article/1835507105168191488.htm" title="本周第二次约练" target="_blank">本周第二次约练</a> <span class="text-muted">2cfbdfe28a51</span> <div>中原焦点团队中24初26刘霞2021.12.3约练161次，分享第368天当事人虽然是带着问题来的，但是咨询过程中发现，她是经过自己不断地调整和努力才走到现在的，看到当事人的不容易，找到例外，发现资源，力量感也就随之而来。增强画面感，或者说重温，会给当事人带来更深刻的感受。</div> </li> <li><a href="/article/1835507103909900288.htm" title="放下是一段成长的修行" target="_blank">放下是一段成长的修行</a> <span class="text-muted">小莳玥</span> <div>人来到这个世界上，只有两件事：生和死。一件事已经做完了，另一件你还急什么呢?是人，都有七情六欲。是心，都有喜怒哀乐，这些再正常不过了。别总抱怨自己活得累，过得辛苦。永远记住：舒坦是留给死人的。苦，才是生活；累，才是工作；变，才是命运；忍，才是历练；容，才是智慧；静，才是修养；舍，才会得到；做，才会拥有。人生，活得太清楚，才是最大的不明白。有些事，看得很清，却说不清；有些人，了解很深，却猜不透；有些</div> </li> <li><a href="/article/1835506996258893824.htm" title="回溯 Leetcode 332 重新安排行程" target="_blank">回溯 Leetcode 332 重新安排行程</a> <span class="text-muted">mmaerd</span> <a class="tag" taget="_blank" href="/search/Leetcode%E5%88%B7%E9%A2%98%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/1.htm">Leetcode刷题学习记录</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a> <div>重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB</div> </li> <li><a href="/article/1835506869838376960.htm" title="Python数据分析与可视化实战指南" target="_blank">Python数据分析与可视化实战指南</a> <span class="text-muted">William数据分析</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE/1.htm">数据</a> <div>在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学</div> </li> <li><a href="/article/1835506616682770432.htm" title="每日一题——第八十四题" target="_blank">每日一题——第八十四题</a> <span class="text-muted">互联网打工人no1</span> <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E6%AF%8F%E6%97%A5%E4%B8%80%E7%BB%83/1.htm">C语言程序设计每日一练</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>题目：编写函数1、输入10个职工的姓名和职工号2、按照职工由大到小顺序排列，姓名顺序也随之调整3、要求输入一个职工号，用折半查找法找出该职工的姓名#define_CRT_SECURE_NO_WARNINGS#include#include#defineMAX_EMPLOYEES10typedefstruct{intid;charname[50];}Empolyee;voidinputEmploye</div> </li> <li><a href="/article/1835506084224266240.htm" title="网易严选官方旗舰店，优质商品，卓越服务" target="_blank">网易严选官方旗舰店，优质商品，卓越服务</a> <span class="text-muted">高省_飞智666600</span> <div>网易严选官方旗舰店是网易旗下的一家电商平台，以提供优质商品和卓越服务而闻名。作为一名SEO优化师，我将为您详细介绍网易严选官方旗舰店，并重点强调其特点和优势。大家好！我是高省APP最大团队&联合创始人飞智导师。相较于其他返利app，高省APP的佣金更高，模式更好，最重要的是，终端用户不会流失！高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几</div> </li> <li><a href="/article/1835505858939809792.htm" title="python os.environ" target="_blank">python os.environ</a> <span class="text-muted">江湖偌大</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a> <div>os.environ['TF_CPP_MIN_LOG_LEVEL']='0'#默认值，输出所有信息os.environ['TF_CPP_MIN_LOG_LEVEL']='1'#屏蔽通知信息（INFO）os.environ['TF_CPP_MIN_LOG_LEVEL']='2'#屏蔽通知信息和警告信息（INFO\WARNING）os.environ['TF_CPP_MIN_LOG_LEVEL']='</div> </li> <li><a href="/article/101.htm" title="数据采集高并发的架构应用" target="_blank">数据采集高并发的架构应用</a> <span class="text-muted">3golden</span> <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a> <div>问题的出发点：          最近公司为了发展需要，要扩大对用户的信息采集，每个用户的采集量估计约2W。如果用户量增加的话，将会大量照成采集量成3W倍的增长，但是又要满足日常业务需要，特别是指令要及时得到响应的频率次数远大于预期。       &n</div> </li> <li><a href="/article/228.htm" title="不停止 MySQL 服务增加从库的两种方式" target="_blank">不停止 MySQL 服务增加从库的两种方式</a> <span class="text-muted">brotherlamp</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/linux%E8%A7%86%E9%A2%91/1.htm">linux视频</a><a class="tag" taget="_blank" href="/search/linux%E8%B5%84%E6%96%99/1.htm">linux资料</a><a class="tag" taget="_blank" href="/search/linux%E6%95%99%E7%A8%8B/1.htm">linux教程</a><a class="tag" taget="_blank" href="/search/linux%E8%87%AA%E5%AD%A6/1.htm">linux自学</a> <div>现在生产环境MySQL数据库是一主一从，由于业务量访问不断增大，故再增加一台从库。前提是不能影响线上业务使用，也就是说不能重启MySQL服务，为了避免出现其他情况，选择在网站访问量低峰期时间段操作。  一般在线增加从库有两种方式，一种是通过mysqldump备份主库，恢复到从库，mysqldump是逻辑备份，数据量大时，备份速度会很慢，锁表的时间也会很长。另一种是通过xtrabacku</div> </li> <li><a href="/article/355.htm" title="Quartz——SimpleTrigger触发器" target="_blank">Quartz——SimpleTrigger触发器</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/SimpleTrigger/1.htm">SimpleTrigger</a><a class="tag" taget="_blank" href="/search/TriggerUtils/1.htm">TriggerUtils</a><a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2208166 一.概述 SimpleTrigger触发器，当且仅需触发一次或者以固定时间间隔周期触发执行；   二.SimpleTrigger的构造函数 SimpleTrigger(String name, String group)：通过该构造函数指定Trigger所属组和名称； Simpl</div> </li> <li><a href="/article/482.htm" title="Informatica应用（1）" target="_blank">Informatica应用（1）</a> <span class="text-muted">18289753290</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/workflow/1.htm">workflow</a><a class="tag" taget="_blank" href="/search/lookup/1.htm">lookup</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E4%BB%B6/1.htm">组件</a><a class="tag" taget="_blank" href="/search/Informatica/1.htm">Informatica</a> <div>1.如果要在workflow中调用shell脚本有一个command组件，在里面设置shell的路径；调度wf可以右键出现schedule，现在用的是HP的tidal调度wf的执行。 2.designer里面的router类似于SSIS中的broadcast（多播组件）;Reset_Workflow_Var：参数重置 （比如说我这个参数初始是1在workflow跑得过程中变成了3我要在结束时还要</div> </li> <li><a href="/article/609.htm" title="python 获取图片验证码中文字" target="_blank">python 获取图片验证码中文字</a> <span class="text-muted">酷的飞上天空</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>根据现成的开源项目 http://code.google.com/p/pytesser/改写 在window上用easy_install安装不上  看了下源码发现代码很少  于是就想自己改写一下   添加支持网络图片的直接解析   #coding:utf-8 #import sys #reload(sys) #sys.s</div> </li> <li><a href="/article/736.htm" title="AJAX" target="_blank">AJAX</a> <span class="text-muted">永夜-极光</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>1.AJAX功能:动态更新页面,减少流量消耗,减轻服务器负担   2.代码结构:    <html> <head> <script type="text/javascript"> function loadXMLDoc() { .... AJAX script goes here ... </div> </li> <li><a href="/article/863.htm" title="创业OR读研" target="_blank">创业OR读研</a> <span class="text-muted">随便小屋</span> <a class="tag" taget="_blank" href="/search/%E5%88%9B%E4%B8%9A/1.htm">创业</a> <div>        现在研一，有种想创业的想法，不知道该不该去实施。因为对于的我情况这两者是矛盾的，可能就是鱼与熊掌不能兼得。                研一的生活刚刚过去两个月，我们学校主要的是</div> </li> <li><a href="/article/990.htm" title="需求做得好与坏直接关系着程序员生活质量" target="_blank">需求做得好与坏直接关系着程序员生活质量</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/IT+%E7%94%9F%E6%B4%BB/1.htm">IT 生活</a> <div>         这个故事还得从去年换工作的事情说起，由于自己不太喜欢第一家公司的环境我选择了换一份工作。去年九月份我入职现在的这家公司，专门从事金融业内软件的开发。十一月份我们整个项目组前往北京做现场开发，从此苦逼的日子开始了。        系统背景：五月份就有同事前往甲方了解需求一直到6月份，后续几个月也完</div> </li> <li><a href="/article/1117.htm" title="如何定义和区分高级软件开发工程师" target="_blank">如何定义和区分高级软件开发工程师</a> <span class="text-muted">aoyouzi</span> <div>在软件开发领域，高级开发工程师通常是指那些编写代码超过 3 年的人。这些人可能会被放到领导的位置，但经常会产生非常糟糕的结果。Matt Briggs 是一名高级开发工程师兼 Scrum 管理员。他认为，单纯使用年限来划分开发人员存在问题，两个同样具有 10 年开发经验的开发人员可能大不相同。近日，他发表了一篇博文，根据开发者所能发挥的作用划分软件开发工程师的成长阶段。 　　初</div> </li> <li><a href="/article/1244.htm" title="Servlet的请求与响应" target="_blank">Servlet的请求与响应</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/get%E6%8F%90%E4%BA%A4/1.htm">get提交</a><a class="tag" taget="_blank" href="/search/java%E5%A4%84%E7%90%86post%E6%8F%90%E4%BA%A4/1.htm">java处理post提交</a> <div>  Servlet是tomcat中的一个重要组成,也是负责客户端和服务端的中介     1,Http的请求方式(get  ,post);   客户端的请求一般都会都是Servlet来接受的,在接收之前怎么来确定是那种方式提交的,以及如何反馈,Servlet中有相应的方法,  http的get方式 servlet就是都doGet(</div> </li> <li><a href="/article/1371.htm" title="web.xml配置详解之listener" target="_blank">web.xml配置详解之listener</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/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/listener/1.htm">listener</a> <div>一.定义 <listener> <listen-class>com.myapp.MyListener</listen-class> </listener>   二.作用        该元素用来注册一个监听器类。可以收到事件什么时候发生以及用什么作为响</div> </li> <li><a href="/article/1498.htm" title="Web页面性能优化（yahoo技术）" target="_blank">Web页面性能优化（yahoo技术）</a> <span class="text-muted">Bill_chen</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/Yahoo/1.htm">Yahoo</a> <div>1.尽可能的减少HTTP请求数 content 2.使用CDN server 3.添加Expires头(或者 Cache-control) server 4.Gzip 组件 server 5.把CSS样式放在页面的上方。 css 6.将脚本放在底部(包括内联的) javascript 7.避免在CSS中使用Expressions css 8.将javascript和css独立成外部文</div> </li> <li><a href="/article/1625.htm" title="【MongoDB学习笔记八】MongoDB游标、分页查询、查询结果排序" target="_blank">【MongoDB学习笔记八】MongoDB游标、分页查询、查询结果排序</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>游标   游标，简单的说就是一个查询结果的指针。游标作为数据库的一个对象，使用它是包括 声明 打开 循环抓去一定数目的文档直到结果集中的所有文档已经抓取完 关闭游标   游标的基本用法，类似于JDBC的ResultSet(hasNext判断是否抓去完,next移动游标到下一条文档)，在获取一个文档集时，可以提供一个类似JDBC的FetchSize</div> </li> <li><a href="/article/1752.htm" title="ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法" target="_blank">ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/ORA-12514/1.htm">ORA-12514</a> <div> 今天通过Oracle SQL*Plus连接远端服务器的时候提示“监听程序当前无法识别连接描述符中请求服务”，遂在网上找到了解决方案： ①打开Oracle服务器安装目录\NETWORK\ADMIN\listener.ora文件，你会看到如下信息：   # listener.ora Network Configuration File: D:\database\Oracle\net</div> </li> <li><a href="/article/1879.htm" title="Eclipse 问题 A resource exists with a different case" target="_blank">Eclipse 问题 A resource exists with a different case</a> <span class="text-muted">bozch</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>在使用Eclipse进行开发的时候，出现了如下的问题： Description Resource Path Location TypeThe project was not built due to "A resource exists with a different case: '/SeenTaoImp_zhV2/bin/seentao'.&</div> </li> <li><a href="/article/2006.htm" title="编程之美-小飞的电梯调度算法" target="_blank">编程之美-小飞的电梯调度算法</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> public class AptElevator { /** * 编程之美 小飞 电梯调度算法 * 在繁忙的时间，每次电梯从一层往上走时，我们只允许电梯停在其中的某一层。 * 所有乘客都从一楼上电梯，到达某层楼后，电梯听下来，所有乘客再从这里爬楼梯到自己的目的层。 * 在一楼时，每个乘客选择自己的目的层，电梯则自动计算出应停的楼层。 * 问：电梯停在哪</div> </li> <li><a href="/article/2133.htm" title="SQL注入相关概念" target="_blank">SQL注入相关概念</a> <span class="text-muted">chenbowen00</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>SQL Injection：就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。 具体来说，它是利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。 首先让我们了解什么时候可能发生SQ</div> </li> <li><a href="/article/2260.htm" title="[光与电]光子信号战防御原理" target="_blank">[光与电]光子信号战防御原理</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%90%86/1.htm">原理</a> <div>       无论是在战场上,还是在后方,敌人都有可能用光子信号对人体进行控制和攻击,那么采取什么样的防御方法,最简单,最有效呢?       我们这里有几个山寨的办法,可能有些作用,大家如果有兴趣可以去实验一下       根据光</div> </li> <li><a href="/article/2387.htm" title="oracle 11g新特性:Pending Statistics" target="_blank">oracle 11g新特性:Pending Statistics</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/dbms_stats/1.htm">dbms_stats</a> <div>oracle 11g新特性:Pending Statistics 转 从11g开始，表与索引的统计信息收集完毕后，可以选择收集的统信息立即发布，也可以选择使新收集的统计信息处于pending状态，待确定处于pending状态的统计信息是安全的，再使处于pending状态的统计信息发布，这样就会避免一些因为收集统计信息立即发布而导致SQL执行计划走错的灾难。 在 11g 之前的版本中，D</div> </li> <li><a href="/article/2514.htm" title="快速理解RequireJs" target="_blank">快速理解RequireJs</a> <span class="text-muted">dengkane</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/requirejs/1.htm">requirejs</a> <div>RequireJs已经流行很久了，我们在项目中也打算使用它。它提供了以下功能： 声明不同js文件之间的依赖 可以按需、并行、延时载入js库 可以让我们的代码以模块化的方式组织 初看起来并不复杂。 在html中引入requirejs 在HTML中，添加这样的 <script> 标签： <script src="/path/to</div> </li> <li><a href="/article/2641.htm" title="C语言学习四流程控制if条件选择、for循环和强制类型转换" target="_blank">C语言学习四流程控制if条件选择、for循环和强制类型转换</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div># include <stdio.h> int main(void) { int i, j; scanf("%d %d", &i, &j); if (i > j) printf("i大于j\n"); else printf("i小于j\n"); retu</div> </li> <li><a href="/article/2768.htm" title="dictionary的使用要注意" target="_blank">dictionary的使用要注意</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/IO/1.htm">IO</a> <div>NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys: user.user_id , @"id", user.username , @"username", </div> </li> <li><a href="/article/2895.htm" title="Android 中的资源访问(Resource)" target="_blank">Android 中的资源访问(Resource)</a> <span class="text-muted">finally_m</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/String/1.htm">String</a><a class="tag" taget="_blank" href="/search/drawable/1.htm">drawable</a><a class="tag" taget="_blank" href="/search/color/1.htm">color</a> <div> 简单的说，Android中的资源是指非代码部分。例如，在我们的Android程序中要使用一些图片来设置界面，要使用一些音频文件来设置铃声，要使用一些动画来显示特效，要使用一些字符串来显示提示信息。那么，这些图片、音频、动画和字符串等叫做Android中的资源文件。 在Eclipse创建的工程中，我们可以看到res和assets两个文件夹，是用来保存资源文件的，在assets中保存的一般是原生</div> </li> <li><a href="/article/3022.htm" title="Spring使用Cache、整合Ehcache" target="_blank">Spring使用Cache、整合Ehcache</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/%40Cacheable/1.htm">@Cacheable</a> <div>Spring使用Cache            从3.1开始，Spring引入了对Cache的支持。其使用方法和原理都类似于Spring对事务管理的支持。Spring Cache是作用在方法上的，其核心思想是这样的：当我们在调用一个缓存方法时会把该方法参数和返回结果作为一个键值对存放在缓存中，等到下次利用同样的</div> </li> <li><a href="/article/3149.htm" title="当druid遇上oracle blob(clob)" target="_blank">当druid遇上oracle blob(clob)</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>http://blog.csdn.net/renfufei/article/details/44887371 众所周知，Oracle有很多坑, 所以才有了去IOE。 在使用Druid做数据库连接池后，其实偶尔也会碰到小坑，这就是使用开源项目所必须去填平的。【如果使用不开源的产品，那就不是坑，而是陷阱了，你都不知道怎么去填坑】 用Druid连接池，通过JDBC往Oracle数据库的</div> </li> <li><a href="/article/3276.htm" title="easyui datagrid pagination获得分页页码、总页数等信息" target="_blank">easyui datagrid pagination获得分页页码、总页数等信息</a> <span class="text-muted">ldzyz007</span> <div>var grid = $('#datagrid');  var options = grid.datagrid('getPager').data("pagination").options;  var curr = options.pageNumber;  var total = options.total;  var max =</div> </li> <li><a href="/article/3403.htm" title="浅析awk里的数组" target="_blank">浅析awk里的数组</a> <span class="text-muted">nigelzeng</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/array/1.htm">array</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a><a class="tag" taget="_blank" href="/search/awk/1.htm">awk</a> <div>awk绝对是文本处理中的神器，它本身也是一门编程语言，还有许多功能本人没有使用到。这篇文章就单单针对awk里的数组来进行讨论，如何利用数组来帮助完成文本分析。   有这么一组数据：   abcd,91#31#2012-12-31 11:24:00 case_a,136#19#2012-12-31 11:24:00 case_a,136#23#2012-12-31 1</div> </li> <li><a href="/article/3530.htm" title="搭建 CentOS 6 服务器(6) - TigerVNC" target="_blank">搭建 CentOS 6 服务器(6) - TigerVNC</a> <span class="text-muted">rensanning</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>安装GNOME桌面环境 # yum groupinstall "X Window System" "Desktop" 安装TigerVNC # yum -y install tigervnc-server tigervnc 启动VNC服务 # /etc/init.d/vncserver restart # vncser</div> </li> <li><a href="/article/3657.htm" title="Spring 数据库连接整理" target="_blank">Spring 数据库连接整理</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a> <div>1、数据库连接jdbc.properties配置详解 　　jdbc.url=jdbc:hsqldb:hsql://localhost/xdb 　　jdbc.username=sa 　　jdbc.password= 　　jdbc.driver=不同的数据库厂商驱动，此处不一一列举 　　接下来，详细配置代码如下： 　　 Spring连接池    </div> </li> <li><a href="/article/3784.htm" title="Dom4J解析使用xpath java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常" target="_blank">Dom4J解析使用xpath java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常</a> <span class="text-muted">xp9802</span> <div>用Dom4J解析xml,以前没注意,今天使用dom4j包解析xml时在xpath使用处报错      异常栈：java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常       导入包 jaxen-1.1-beta-6.jar 解决; &nb</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>