cypress进行e2e测试之理论

cypress 进行 e2e 测试之理论

cypress 是目前 e2e 很火的一个测试组件,内部绑定了 macha、chai、chai-jquery 之类的断言,为了让代码代码
更有说服力,减少提交测试错误,进行 e2e 测试显然是非常有必要的。

官网 \
GitHub

借鉴官网一句话来说:

Cypress is a next generation front end testing tool built for the modern web. We address the key
pain points developers and QA engineers face when testing modern applications.

本文环境

node v9.5\
npm v5.5

e2e 简介

e2e 测试端对端测试的简称, e2e 即为end to end,
指任意一个人的社交、交易、休闲都可以直接与另外任意一个人产生关系,去中心化、渠道化.

cypress

cypress 环境搭建

做前端怎么少的多的了 npm 呢

$ npm i -D cypress

然后为了方便起见,咱们在package.json中写入下面脚本:

{
  "scripts": {
    "e2e:open": "cypress open",
    "e2e:run": "cypress run"
  }
}

cypress进行e2e测试之理论_第1张图片

运行npm run e2e:open,启动一个 cypress 的服务器,如下:
cypress进行e2e测试之理论_第2张图片

如下图这就完成了一个启动一个 cypress。第一次点开时候,cypress 会帮你创建一个初始化配置目录,这是
cypress 推荐的目录的结构,当然也可以自己创建。

cypress进行e2e测试之理论_第3张图片

点击 example_spec.js 文件,然后可以看到如下界面,cypress 开始测试:

cypress进行e2e测试之理论_第4张图片

上面就看到 cypress 的运行过程了。下面看看 example_spec.js(文件的位置
:projectName/cypress/integration)文件中写了啥:

describe('Kitchen Sink', function() {
  it('.should() - assert that  is correct', function() {
    // ...
  }
})</code></pre> 
 <p>这是主要结构的,下面大部分都是在一个<code>it</code>函数内部,是测试里面的回调函数。详细可以查看 TDD 和 BDD 测试<br>框架,cypress 绑定了这些测试框架。</p> 
 <h2>cy.visit</h2> 
 <p>这是 cypress 里面一个很重要的方法,可以访问一个链接,列入 example.js 文件如下:</p> 
 <pre><code class="js">beforeEach(function() {
  // Visiting our app before each test removes any state build up from
  // previous tests. Visiting acts as if we closed a tab and opened a fresh one
  cy.visit('https://example.cypress.io/commands/querying')
})</code></pre> 
 <p>这里就是在前置钩子函数里面访问了<code>https://...../querying</code>这个链接。如果代码需要浏览器调试,比如用户交<br>互点击,用户输入之类的。第一步就是访问:cy.visit</p> 
 <h2>cy.get</h2> 
 <p>还是从 example_spec.js 问中说起:</p> 
 <pre><code class="js">it('cy.get() - query DOM elements', function() {
  // https://on.cypress.io/get

  // Get DOM elements by id
  cy.get('#query-btn').should('contain', 'Button')

  // Get DOM elements by class
  cy.get('.query-btn').should('contain', 'Button')

  cy.get('#querying .well>button:first').should('contain', 'Button')
  //              ↲
  // Use CSS selectors just like jQuery
})</code></pre> 
 <p>这里定义了一个测试单元,在这个里面做了啥呢?第一步获取 id 为 query-btn 这个按钮。接下来 should 操作<br>,奉上一张表自行查看: <span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/94fd67618f0c42268fdf959961fca421.jpg" target="_blank"><img alt="cypress进行e2e测试之理论_第5张图片" title="" src="http://img.e-com-net.com/image/info9/94fd67618f0c42268fdf959961fca421.jpg" width="650" height="708" style="border:1px solid black;"></a></span></p> 
 <p>cy.get 还有一个玩法就是 cy.get('@app')这种,意思说之前你已经<code>cy.get('.app').as('app')</code>,不需要再次获<br>取了,直接使用别名就好了</p> 
 <p>从官网截图的表格,详<br>细jquery-chai 文档表格</p> 
 <p>这里看到<code>cy.get()</code>和<code>jquery.$</code>是不是很像,在官网这里说了这样一句话:</p> 
 <blockquote>
   The querying behavior of this command matches exactly how $(…) works in jQuery. 
 </blockquote> 
 <p>所以可以将 cy.get()当$一样来用即可,不过这里返回的不过 jquery 对象罢了,这里返回的事通过 cypress 包<br>装过的对象可以在控制台看到这样的东西,见下图:<br><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/dad1171441cf47c182ffd1444787e966.jpg" target="_blank"><img alt="cypress进行e2e测试之理论_第6张图片" title="" src="http://img.e-com-net.com/image/info9/dad1171441cf47c182ffd1444787e966.jpg" width="482" height="800" style="border:1px solid black;"></a></span></p> 
 <p>是一个用于 cypress 所有方法的对象。然后可以操作他的 api 了。</p> 
 <p>第一部分,主要是查询,查询页面元素是否按照我们开发想要的存在,下面看第二部分:</p> 
 <pre><code class="js">context('Actions', function() {
  beforeEach(function() {
    cy.visit('https://example.cypress.io/commands/actions')
  })

  // Let's perform some actions on DOM elements
  // https://on.cypress.io/interacting-with-elements

  it('.type() - type into a DOM element', function() {
    // https://on.cypress.io/type
    cy
      .get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')

      // .type() with special character sequences
      .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
      .type('{del}{selectall}{backspace}')

      // .type() with key modifiers
      .type('{alt}{option}') //these are equivalent
      .type('{ctrl}{control}') //these are equivalent
      .type('{meta}{command}{cmd}') //these are equivalent
      .type('{shift}')

      // Delay each keypress by 0.1 sec
      .type('slow.typing@email.com', { delay: 100 })
      .should('have.value', 'slow.typing@email.com')

    cy
      .get('.action-disabled')
      // Ignore error checking prior to type
      // like whether the input is visible or disabled
      .type('disabled error checking', { force: true })
      .should('have.value', 'disabled error checking')
  })
})</code></pre> 
 <p>这一部分主要是进行获取元素交互, 下面来说交互是如何搞得。 与 cy.get 相似还有:</p> 
 <ul> 
  <li>cy.contains 通过文本获取元素</li> 
  <li>cy.closet 见 jqery</li> 
  <li>cy.next/cy.nextAll 可以和 cy.contains 联合使用获取该节点的下一个节点</li> 
  <li>cy.prev/cy.prevAll 同上</li> 
  <li>cy.children/cy.parents/cy.parent 获取子节点/ 所有的父节点 / 父节点</li> 
  <li>cy.first/cy.last</li> 
  <li>cy.url 获取当前页面 url</li> 
  <li>cy.title 获取当前页面标题</li> 
  <li>... API 挺多的,同样奉<br>上api 文档 </li> 
 </ul> 
 <h2>cypress 交互逻辑</h2> 
 <p>既然要交互肯定需要点击输入滚动,可以还存在拖拽等等。咱们就暂时从输入开始说起啦</p> 
 <h3>cy.type</h3> 
 <p>这不是一个可以直接使用的方法,要配合<code>cy.get</code>使用的,作用是给空间进行输入。例如:</p> 
 <h4>测试输入例如 text, textarea</h4> 
 <pre><code class="js">cy.get('input').type('hello world')</code></pre> 
 <h4>测试 tabIndex</h4> 
 <pre><code class="html">  <div class="el" tabIndex="1">
    This is TabIndex div.
  </div></code></pre> 
 <pre><code class="js">cy.get('.el').type('laldkadaljdkljasf') // 这个里面是随机字符串</code></pre> 
 <h4>测试 input 为日期的</h4> 
 <pre><code class="js">cy.get('input[type=date]').type('2008-8-9')</code></pre> 
 <h4>键盘绑定</h4> 
 <p>下面直接是对 input 进行组合键盘操作</p> 
 <pre><code class="js">cy.get('input').type('{shift}{alt}Q')</code></pre> 
 <p>按住键盘操作</p> 
 <pre><code class="js">cy.get('input').type('{alt}这里是按了一下alt后输入的内容')</code></pre> 
 <p>还有长按键盘之类的操作,详细就看官网了这里之类奉上链<br>接https://docs.cypress.io/api/commands/type.html#Key-Combinations</p> 
 <p>这里就是关于键盘的组合操作。</p> 
 <h4>对于选择例如 radio, checkbox</h4> 
 <p>这些就只需要利用点击事件即可,如下:</p> 
 <pre><code class="js">cy
  .get('input[type=radio]')
  .as('radio')
  .click()
cy.get('@radio').should('be.checked')</code></pre> 
 <h3>定时</h3> 
 <h4>cy.wait</h4> 
 <p>下面是等待 1s</p> 
 <pre><code class="js">cy.wait(1000)</code></pre> 
 <h4>cy.clock 和 cy.tick</h4> 
 <p>自己的代码:</p> 
 <pre><code class="js">var seconds = 0
setInterval(() => {
  $('#seconds-elapsed').text(++seconds + ' seconds')
}, 1000)</code></pre> 
 <p>测试代码</p> 
 <pre><code class="js">cy.clock()
cy.visit('/index.html')
cy.tick(1000)
cy.get('#seconds-elapsed').should('have.text', '1 seconds')
cy.tick(1000)
cy.get('#seconds-elapsed').should('have.text', '2 seconds')</code></pre> 
 <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/c8c5ef555edf404db42fd78dc6a5d670.jpg" target="_blank"><img alt="cypress进行e2e测试之理论_第7张图片" title="" src="http://img.e-com-net.com/image/info9/c8c5ef555edf404db42fd78dc6a5d670.jpg" width="650" height="135" style="border:1px solid black;"></a></span> 这里就会出现关于 clock 和 tick<br>的用法,更多用法看文档,我也有部分迷惑的。待后来再解决。老规矩文档地址:<br>地址</p> 
 <h3>关于 cypress 的配置</h3> 
 <p>先复制一段出来:</p> 
 <pre><code class="json">{
  "baseUrl": "http://localhost:8080",
  "pageLoadTimeout": 3000,
  "viewportHeight": 667,
  "viewportWidth": 375
}</code></pre> 
 <p>这是一个非常精简的配置了:</p> 
 <ul> 
  <li>baseUrl 基础链接,之后在是使用 cy.visit 的时候,只需要访问具体路由例如: cy.visit('/Hello')</li> 
  <li> <p>viewport 两个属性</p> 
   <ul> 
    <li>viewportHeight 测试窗口的高度</li> 
    <li>viewportWidth 测试窗口的宽度</li> 
   </ul> </li> 
  <li>pageLoadTimeout 页面家安在超过 3000ms 即为超时。</li> 
 </ul> 
 <h2>总结</h2> 
 <p>上面是 cypress 的基本用法,cypress 是基于 electron 的一个测试框架,提供 web 环境进行点对点的测试,在<br>programer 思维下,进行自动化的交互操作,必要点检测说明,这是一个非常棒的用处。例如之后拥有数据埋点,<br>可以在固定的位置检测是否有埋点。测试想要的地方是否匹配的数据。模拟用户的点击操作,这都是非常棒的。在<br>jquery 操作年代,各种 id 和 class 奇怪命名下,这些都可以容易找到,在 vue 和 react 大行其道的年代,但<br>是却可以通过文本寻找节点。这也是非常棒的体验,更多秘密需要去体验,奉上官方地址<br>:官网 cypress</p> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1177136944002445312"></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">你可能感兴趣的:(e2e,test,javascript)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1835509897106649088.htm"
                           title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题,尤其是当后端使用Java的Long类型(64位)与前端JavaScript的Number类型(最大安全整数为2^53-1,即16位)进行数据交互时,很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
                    </li>
                    <li><a href="/article/1835499615491813376.htm"
                           title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a>
                        <span class="text-muted">彩云飘过</span>

                        <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记,使用的openlayers5.3.xapi。源码见1032.html,对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div>
                    </li>
                    <li><a href="/article/1835498925755297792.htm"
                           title="DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理</a>
                        <span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
                        <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
                    </li>
                    <li><a href="/article/1835496149843275776.htm"
                           title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
                        <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
                    </li>
                    <li><a href="/article/1835496148601761792.htm"
                           title="HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线</div>
                    </li>
                    <li><a href="/article/1835493267907637248.htm"
                           title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a>
                        <span class="text-muted">dmengmeng</span>

                        <div>需要的loaderfile-loader(让我们可以引入这些资源文件)url-loader(其实是file-loader的二次封装)img-loader(处理图片所需要的)在没有使用任何处理图片的loader之前,比如说css中用到了背景图片,那么最后打包会报错的,因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以,打开网页能准确看到图片。{test:/\.(p</div>
                    </li>
                    <li><a href="/article/1835492740536823808.htm"
                           title="node.js学习" target="_blank">node.js学习</a>
                        <span class="text-muted">小猿L</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a>
                        <div>node.js学习实操及笔记温故node.js,node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础,三大框架vuereactangular离不开node.jsnode.js是什么官网:node.js是一个开源的、跨平台的运行JavaScript的运行</div>
                    </li>
                    <li><a href="/article/1835466142441893888.htm"
                           title="K近邻算法_分类鸢尾花数据集" target="_blank">K近邻算法_分类鸢尾花数据集</a>
                        <span class="text-muted">_feivirus_</span>
<a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%92%8C%E6%95%B0%E5%AD%A6/1.htm">机器学习和数学</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E7%B1%BB/1.htm">分类</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/K%E8%BF%91%E9%82%BB/1.htm">K近邻</a>
                        <div>importnumpyasnpimportpandasaspdfromsklearn.datasetsimportload_irisfromsklearn.model_selectionimporttrain_test_splitfromsklearn.metricsimportaccuracy_score1.数据预处理iris=load_iris()df=pd.DataFrame(data=ir</div>
                    </li>
                    <li><a href="/article/1835465517821947904.htm"
                           title="多线程之——ExecutorCompletionService" target="_blank">多线程之——ExecutorCompletionService</a>
                        <span class="text-muted">阿福德</span>

                        <div>在我们开发中,经常会遇到这种情况,我们起多个线程来执行,等所有的线程都执行完成后,我们需要得到个线程的执行结果来进行聚合处理。我在内部代码评审时,发现了不少这种情况。看很多同学都使用正确,但比较啰嗦,效率也不高。本文介绍一个简单处理这种情况的方法:直接上代码:publicclassExecutorCompletionServiceTest{@TestpublicvoidtestExecutorCo</div>
                    </li>
                    <li><a href="/article/1835452402178813952.htm"
                           title="Linux查看服务器日志" target="_blank">Linux查看服务器日志</a>
                        <span class="text-muted">TPBoreas</span>
<a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</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>一、tail这个是我最常用的一种查看方式用法如下:tail-n10test.log查询日志尾部最后10行的日志;tail-n+10test.log查询10行之后的所有日志;tail-fn10test.log循环实时查看最后1000行记录(最常用的)一般还会配合着grep用,(实时抓包)例如:tail-fn1000test.log|grep'关键字'(动态抓包)tail-fn1000test.log</div>
                    </li>
                    <li><a href="/article/1835448239864770560.htm"
                           title="JavaScript 中,深拷贝(Deep Copy)和浅拷贝(Shallow Copy)" target="_blank">JavaScript 中,深拷贝(Deep Copy)和浅拷贝(Shallow Copy)</a>
                        <span class="text-muted">跳房子的前端</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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/ecmascript/1.htm">ecmascript</a>
                        <div>在JavaScript中,深拷贝(DeepCopy)和浅拷贝(ShallowCopy)是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释,包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝(ShallowCopy)概念定义:浅拷贝是指创建一个新的对象或数组,其中包含了原对象或数组的基本数据类型的值和对引用数</div>
                    </li>
                    <li><a href="/article/1835429202871021568.htm"
                           title="Python 课程10-单元测试" target="_blank">Python 课程10-单元测试</a>
                        <span class="text-muted">可愛小吉</span>
<a class="tag" taget="_blank" href="/search/Python%E6%95%99%E5%AD%B8/1.htm">Python教學</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%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/TDD/1.htm">TDD</a><a class="tag" taget="_blank" href="/search/unittest/1.htm">unittest</a>
                        <div>前言在现代软件开发中,单元测试已成为一种必不可少的实践。通过测试,我们可以确保每个功能模块在开发和修改过程中按预期工作,从而减少软件缺陷,提高代码质量。而测试驱动开发(TDD)则进一步将测试作为开发的核心部分,先编写测试,再编写代码,以测试为指导开发出更稳定、更可靠的代码。Python提供了强大的unittest模块,它是Python标准库的一部分,专门用于编写和执行单元测试。与其他测试框架相比,</div>
                    </li>
                    <li><a href="/article/1835428948339683328.htm"
                           title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a>
                        <span class="text-muted">跳房子的前端</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>在JavaScript中,Map和WeakMap都是用于存储键值对的数据结构,但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序,并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对:set(key,value):将一个键值对添加到Map中。如果键已经存在,则更新其对应的值。get(key):获取指定键的值。如果键</div>
                    </li>
                    <li><a href="/article/1835419870070665216.htm"
                           title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a>
                        <span class="text-muted">hai40587</span>
<a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
                        <div>切换淘宝最新npm镜像源是一个相对简单的过程,但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新,镜像源的具体地址可能会发生变化,因此,我将基于当前可获取的信息,提供一个通用的切换步骤,并附上最新的镜像地址(截至回答时)。一、了解npm镜像源npm(NodePackageManager)是JavaScript的包管理器,用于安装、更新和管理项目依赖。由于npm官方仓库</div>
                    </li>
                    <li><a href="/article/1835399577348435968.htm"
                           title="[Swift]LeetCode943. 最短超级串 | Find the Shortest Superstring" target="_blank">[Swift]LeetCode943. 最短超级串 | Find the Shortest Superstring</a>
                        <span class="text-muted">黄小二哥</span>
<a class="tag" taget="_blank" href="/search/swift/1.htm">swift</a>
                        <div>★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/)➤GitHub地址:https://github.com/strengthen/LeetCode➤原文地址:https://www.cnblogs.com/streng</div>
                    </li>
                    <li><a href="/article/1835394786899619840.htm"
                           title="Dockerfile(1) - FROM 指令详解" target="_blank">Dockerfile(1) - FROM 指令详解</a>
                        <span class="text-muted">小菠萝测试笔记</span>
<a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a>
                        <div>FROM指明当前的镜像基于哪个镜像构建dockerfile必须以FROM开头,除了ARG命令可以在FROM前面FROM[--platform=][AS]FROM[--platform=][:][AS]FROM[--platform=][@][AS]小栗子FROMalpine:latest一个dockerfile可以有多个FROM可以有多个FROM来创建多个镜像,或区分构建阶段,将一个构建阶段作为另</div>
                    </li>
                    <li><a href="/article/1835383919906746368.htm"
                           title="高性能javascript--算法和流程控制" target="_blank">高性能javascript--算法和流程控制</a>
                        <span class="text-muted">海淀萌狗</span>

                        <div>-for,while和do-while性能相当-避免使用for-in循环,==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组,还可以遍历对象。原因:for-in每次迭代操作会同时搜索实例或者原型属性,for-in循环的每次迭代都会产生更多开销,因此要比其他循环类型慢,一般速度为其他类型循环的1/7。因此,除非明确需要迭代一个属性数量未知的对象,否则应避免使用for-i</div>
                    </li>
                    <li><a href="/article/1835373236217540608.htm"
                           title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a>
                        <span class="text-muted">马小蜗</span>

                        <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点:灵活度、可控性、性能</div>
                    </li>
                    <li><a href="/article/1835360244646113280.htm"
                           title="JavaScript中秋快乐!" target="_blank">JavaScript中秋快乐!</a>
                        <span class="text-muted">Q_w7742</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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/ecmascript/1.htm">ecmascript</a>
                        <div>我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候,跳出“中秋节快乐”字样,需要注册鼠标单击事件和计时器。首先定义主要函数:初始化当点击canvas之后转到onCanvasClick函数,绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh</div>
                    </li>
                    <li><a href="/article/1835359727924637696.htm"
                           title="Nginx从入门到实践(三)" target="_blank">Nginx从入门到实践(三)</a>
                        <span class="text-muted">听你讲故事啊</span>

                        <div>动静分离动静分离是将网站静态资源(JavaScript,CSS,img等文件)与后台应用分开部署,提高用户访问静态代码的速度,降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上,后台项目部署到应用服务器上,根据一定规则静态资源的请求全部请求nginx服务器,达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写,Ngin</div>
                    </li>
                    <li><a href="/article/1835354700392787968.htm"
                           title="Nginx的使用场景:构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景:构建高效、可扩展的Web架构</a>
                        <span class="text-muted">张某布响丸辣</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
                        <div>Nginx,作为当今最流行的Web服务器和反向代理软件之一,凭借其高性能、稳定性和灵活性,在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站,还是大型企业级应用,Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景,帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件(如HTML、CSS、JavaScript、图片等)的网站,Ngin</div>
                    </li>
                    <li><a href="/article/1835354447627251712.htm"
                           title="前端知识点" target="_blank">前端知识点</a>
                        <span class="text-muted">ZhangTao_zata</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div>
                    </li>
                    <li><a href="/article/1835339820935770112.htm"
                           title="详解mybatis的一二级缓存以及缓存失效原因" target="_blank">详解mybatis的一二级缓存以及缓存失效原因</a>
                        <span class="text-muted">仰望天花板</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><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/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                        <div>数据库的大部分场景下是从磁盘读取,如果数据从内存进行读取,速度较比磁盘要快得多。但因为内存的容量有限,所以一般只会把使用和查询较多的数据缓存起来,以便快速反应,其他使用率不太多的继续存放在磁盘。mybatis分为一级缓存和二级缓存1.一级缓存一级缓存存放在SqlSqeeion上,默认开启1.1pojo@DatapublicclassRole{privateLongid;privateStringr</div>
                    </li>
                    <li><a href="/article/1835331376895848448.htm"
                           title="【JS】前端文件读取FileReader操作总结" target="_blank">【JS】前端文件读取FileReader操作总结</a>
                        <span class="text-muted">程序员-张师傅</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI,它允许web应用程序异步读取用户计算机上的文件(或原始数据缓冲区)的内容,例如读取文件以获取其内容,并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用,尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先,你需要创建一个Fi</div>
                    </li>
                    <li><a href="/article/1835328352186101760.htm"
                           title="[移动端自动化] AppAgent介绍" target="_blank">[移动端自动化] AppAgent介绍</a>
                        <span class="text-muted">大卫软件测试</span>
<a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a>
                        <div>AUITestAgentAUITestAgent/README_zh.mdatmain·bz-lab/AUITestAgent(github.com)1/MobileAgentX-PLUG/MobileAgent:Mobile-Agent:ThePowerfulMobileDeviceOperationAssistantFamily(github.com)2/AppAgentAppAgent/RE</div>
                    </li>
                    <li><a href="/article/1835321297228361728.htm"
                           title="python比较字符串是否一样,Python如何确定两个字符串是否相同" target="_blank">python比较字符串是否一样,Python如何确定两个字符串是否相同</a>
                        <span class="text-muted">鲁东学子</span>
<a class="tag" taget="_blank" href="/search/python%E6%AF%94%E8%BE%83%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%98%AF%E5%90%A6%E4%B8%80%E6%A0%B7/1.htm">python比较字符串是否一样</a>
                        <div>I'vetriedtounderstandwhenPythonstringsareidentical(akasharingthesamememorylocation).Howeverduringmytests,thereseemstobenoobviousexplanationwhentwostringvariablesthatareequalsharethesamememory:importsy</div>
                    </li>
                    <li><a href="/article/1835303427685576704.htm"
                           title="UI 自动化的页面对象管理神器 PO-Manager" target="_blank">UI 自动化的页面对象管理神器 PO-Manager</a>
                        <span class="text-muted">TesterHome</span>

                        <div>原文由alex发表于TesterHome社区网站,点击原文链接可于作者直接交流。做UI自动化的同学都知道,UI自动化一个难点就是页面元素的变化,让自动化维护成为一个痛点。在此,为了减轻这个痛点,我在基于Page-Object模式的基础上开发了页面对象维护的工具。该工具为vscode的一个插件,可以通过vscode插件市场搜索PO-Manager来下载安装本文中的页面对象库文件基于json.一个元素</div>
                    </li>
                    <li><a href="/article/1835298981362626560.htm"
                           title="webstorm报错TypeError: this.cliEngine is not a constructor" target="_blank">webstorm报错TypeError: this.cliEngine is not a constructor</a>
                        <span class="text-muted">Blue_Color</span>

                        <div>点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:</div>
                    </li>
                    <li><a href="/article/1835296397365178368.htm"
                           title="创建一个完整的购物商城系统是一个复杂的项目,涉及前端(用户界面)、后端(服务器逻辑)、数据库等多个部分。由于篇幅限制,我无法在这里提供一个完整的系统代码,但我可以分别给出一些关键部分的示例代码,涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目,涉及前端(用户界面)、后端(服务器逻辑)、数据库等多个部分。由于篇幅限制,我无法在这里提供一个完整的系统代码,但我可以分别给出一些关键部分的示例代码,涵盖几</a>
                        <span class="text-muted">uthRaman</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a>
                        <div>前端(HTML/CSS/JavaScript)grsyzp.cnHTML页面结构(index.html)html购物商城欢迎来到购物商城JavaScript(Ajax请求商品数据,app.js)javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div>
                    </li>
                    <li><a href="/article/1835293121953492992.htm"
                           title="了解 UNPKG:前端开发者的包管理利器" target="_blank">了解 UNPKG:前端开发者的包管理利器</a>
                        <span class="text-muted">小于负无穷</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
                        <div>在现代前端开发中,JavaScript包管理和模块化是至关重要的,而npm则是最流行的JavaScript包管理器之一。不过,随着前端项目复杂性的增加,有时候我们希望快速引入外部依赖,而无需本地安装和构建。此时,CDN(内容分发网络)成为了一种方便快捷的解决方案,而UNPKG就是这种方式中的佼佼者。什么是UNPKG?UNPKG是一个基于npm的内容分发网络(CDN),它允许开发者直接通过URL从n</div>
                    </li>
                                <li><a href="/article/91.htm"
                                       title="java解析APK" target="_blank">java解析APK</a>
                                    <span class="text-muted">3213213333332132</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/apk/1.htm">apk</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%A7%A3%E6%9E%90APK/1.htm">解析APK</a>
                                    <div>解析apk有两种方法 
1、结合安卓提供apktool工具,用java执行cmd解析命令获取apk信息 
2、利用相关jar包里的集成方法解析apk 
 
这里只给出第二种方法,因为第一种方法在linux服务器下会出现不在控制范围之内的结果。 
 
 

public class ApkUtil
{
	/**
	 * 日志对象
	 */
	private static Logger	 </div>
                                </li>
                                <li><a href="/article/218.htm"
                                       title="nginx自定义ip访问N种方法" target="_blank">nginx自定义ip访问N种方法</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/nginx+%E7%A6%81%E6%AD%A2ip%E8%AE%BF%E9%97%AE/1.htm">nginx 禁止ip访问</a>
                                    <div>   因业务需要,禁止一部分内网访问接口, 由于前端架了F5,直接用deny或allow是不行的,这是因为直接获取的前端F5的地址。 
   所以开始思考有哪些主案可以实现这样的需求,目前可实施的是三种: 
   一:把ip段放在redis里,写一段lua 
          二:利用geo传递变量,写一段</div>
                                </li>
                                <li><a href="/article/345.htm"
                                       title="mysql timestamp类型字段的CURRENT_TIMESTAMP与ON UPDATE CURRENT_TIMESTAMP属性" target="_blank">mysql timestamp类型字段的CURRENT_TIMESTAMP与ON UPDATE CURRENT_TIMESTAMP属性</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>timestamp有两个属性,分别是CURRENT_TIMESTAMP 和ON UPDATE CURRENT_TIMESTAMP两种,使用情况分别如下: 
  
1. 
  
CURRENT_TIMESTAMP  
  
当要向数据库执行insert操作时,如果有个timestamp字段属性设为 
  
CURRENT_TIMESTAMP,则无论这</div>
                                </li>
                                <li><a href="/article/472.htm"
                                       title="struts2+spring+hibernate分页显示" target="_blank">struts2+spring+hibernate分页显示</a>
                                    <span class="text-muted">171815164</span>
<a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a>
                                    <div>分页显示一直是web开发中一大烦琐的难题,传统的网页设计只在一个JSP或者ASP页面中书写所有关于数据库操作的代码,那样做分页可能简单一点,但当把网站分层开发后,分页就比较困难了,下面是我做Spring+Hibernate+Struts2项目时设计的分页代码,与大家分享交流。 
 
  1、DAO层接口的设计,在MemberDao接口中定义了如下两个方法: 
 
 
 
 
 
public in</div>
                                </li>
                                <li><a href="/article/599.htm"
                                       title="构建自己的Wrapper应用" target="_blank">构建自己的Wrapper应用</a>
                                    <span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/rap/1.htm">rap</a>
                                    <div>        我们已经了解Wrapper的目录结构,下面可是正式利用Wrapper来包装我们自己的应用,这里假设Wrapper的安装目录为:/usr/local/wrapper。 
  
        首先,创建项目应用 
  
&nb</div>
                                </li>
                                <li><a href="/article/726.htm"
                                       title="[简单]工作记录_多线程相关" target="_blank">[简单]工作记录_多线程相关</a>
                                    <span class="text-muted">53873039oycg</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a>
                                    <div>     最近遇到多线程的问题,原来使用异步请求多个接口(n*3次请求)     方案一 使用多线程一次返回数据,最开始是使用5个线程,一个线程顺序请求3个接口,超时终止返回     缺点       测试发现必须3个接</div>
                                </li>
                                <li><a href="/article/853.htm"
                                       title="调试jdk中的源码,查看jdk局部变量" target="_blank">调试jdk中的源码,查看jdk局部变量</a>
                                    <span class="text-muted">程序员是怎么炼成的</span>
<a class="tag" taget="_blank" href="/search/jdk+%E6%BA%90%E7%A0%81/1.htm">jdk 源码</a>
                                    <div>转自:http://www.douban.com/note/211369821/ 
  
 学习jdk源码时使用-- 
    学习java最好的办法就是看jdk源代码,面对浩瀚的jdk(光源码就有40M多,比一个大型网站的源码都多)从何入手呢,要是能单步调试跟进到jdk源码里并且能查看其中的局部变量最好了。 
 
可惜的是sun提供的jdk并不能查看运行中的局部变量</div>
                                </li>
                                <li><a href="/article/980.htm"
                                       title="Oracle RAC Failover 详解" target="_blank">Oracle RAC Failover 详解</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
                                    <div>Oracle RAC 同时具备HA(High Availiablity) 和LB(LoadBalance). 而其高可用性的基础就是Failover(故障转移). 它指集群中任何一个节点的故障都不会影响用户的使用,连接到故障节点的用户会被自动转移到健康节点,从用户感受而言, 是感觉不到这种切换。 
 
 Oracle 10g RAC 的Failover 可以分为3种: 
 1. Client-Si</div>
                                </li>
                                <li><a href="/article/1107.htm"
                                       title="form表单提交数据编码方式及tomcat的接受编码方式" target="_blank">form表单提交数据编码方式及tomcat的接受编码方式</a>
                                    <span class="text-muted">antonyup_2006</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/%E4%BA%92%E8%81%94%E7%BD%91/1.htm">互联网</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a>
                                    <div>原帖地址:http://www.iteye.com/topic/266705 
 
form有2中方法把数据提交给服务器,get和post,分别说下吧。 
(一)get提交 
1.首先说下客户端(浏览器)的form表单用get方法是如何将数据编码后提交给服务器端的吧。 
   
对于get方法来说,都是把数据串联在请求的url后面作为参数,如:http://localhost:</div>
                                </li>
                                <li><a href="/article/1234.htm"
                                       title="JS初学者必知的基础" target="_blank">JS初学者必知的基础</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/js%E5%87%BD%E6%95%B0/1.htm">js函数</a><a class="tag" taget="_blank" href="/search/js%E5%85%A5%E9%97%A8%E5%9F%BA%E7%A1%80/1.htm">js入门基础</a>
                                    <div>JavaScript是网页的交互语言,实现网页的各种效果, 
JavaScript 是世界上最流行的脚本语言。

JavaScript 是属于 web 的语言,它适用于 PC、笔记本电脑、平板电脑和移动电话。

JavaScript 被设计为向 HTML 页面增加交互性。

许多 HTML 开发者都不是程序员,但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 </div>
                                </li>
                                <li><a href="/article/1361.htm"
                                       title="iBatis的分页分析与详解" target="_blank">iBatis的分页分析与详解</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/ibatis/1.htm">ibatis</a>
                                    <div>        分页是操作数据库型系统常遇到的问题。分页实现方法很多,但效率的差异就很大了。iBatis是通过什么方式来实现这个分页的了。查看它的实现部分,发现返回的PaginatedList实际上是个接口,实现这个接口的是PaginatedDataList类的对象,查看PaginatedDataList类发现,每次翻页的时候最</div>
                                </li>
                                <li><a href="/article/1488.htm"
                                       title="精通Oracle10编程SQL(15)使用对象类型" target="_blank">精通Oracle10编程SQL(15)使用对象类型</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><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/plsql/1.htm">plsql</a>
                                    <div>/*
 *使用对象类型
 */
--建立和使用简单对象类型
--对象类型包括对象类型规范和对象类型体两部分。
--建立和使用不包含任何方法的对象类型
CREATE OR REPLACE TYPE person_typ1 as OBJECT(
  name varchar2(10),gender varchar2(4),birthdate date
);

drop type p</div>
                                </li>
                                <li><a href="/article/1615.htm"
                                       title="【Linux命令二】文本处理命令awk" target="_blank">【Linux命令二】文本处理命令awk</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/linux%E5%91%BD%E4%BB%A4/1.htm">linux命令</a>
                                    <div>awk是Linux用来进行文本处理的命令,在日常工作中,广泛应用于日志分析。awk是一门解释型编程语言,包含变量,数组,循环控制结构,条件控制结构等。它的语法采用类C语言的语法。 
  awk命令用来做什么? 
1.awk适用于具有一定结构的文本行,对其中的列进行提取信息 
2.awk可以把当前正在处理的文本行提交给Linux的其它命令处理,然后把直接结构返回给awk 
3.awk实际工</div>
                                </li>
                                <li><a href="/article/1742.htm"
                                       title="JAVA(ssh2框架)+Flex实现权限控制方案分析" target="_blank">JAVA(ssh2框架)+Flex实现权限控制方案分析</a>
                                    <span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>  
目前项目使用的是Struts2+Hibernate+Spring的架构模式,目前已经有一套针对SSH2的权限系统,运行良好。但是项目有了新需求:在目前系统的基础上使用Flex逐步取代JSP,在取代JSP过程中可能存在Flex与JSP并存的情况,所以权限系统需要进行修改。 
【SSH2权限系统的实现机制】 
权限控制分为页面和后台两块:不同类型用户的帐号分配的访问权限是不同的,用户使</div>
                                </li>
                                <li><a href="/article/1869.htm"
                                       title="angular.forEach" target="_blank">angular.forEach</a>
                                    <span class="text-muted">boyitech</span>
<a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a><a class="tag" taget="_blank" href="/search/angular.forEach/1.htm">angular.forEach</a>
                                    <div>angular.forEach   描述:   循环对obj对象的每个元素调用iterator, obj对象可以是一个Object或一个Array. Iterator函数调用方法: iterator(value, key, obj), 其中obj是被迭代对象,key是obj的property key或者是数组的index,value就是相应的值啦. (此函数不能够迭代继承的属性.)   </div>
                                </li>
                                <li><a href="/article/1996.htm"
                                       title="java-谷歌面试题-给定一个排序数组,如何构造一个二叉排序树" target="_blank">java-谷歌面试题-给定一个排序数组,如何构造一个二叉排序树</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%8E%92%E5%BA%8F%E6%A0%91/1.htm">二叉排序树</a>
                                    <div>
import java.util.LinkedList;

public class CreateBSTfromSortedArray {

	/**
	 * 题目:给定一个排序数组,如何构造一个二叉排序树
	 * 递归
	 */

	public static void main(String[] args) {
		int[] data = { 1, 2, 3, 4, </div>
                                </li>
                                <li><a href="/article/2123.htm"
                                       title="action执行2次" target="_blank">action执行2次</a>
                                    <span class="text-muted">Chen.H</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/XHTML/1.htm">XHTML</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/Webwork/1.htm">Webwork</a>
                                    <div>xwork 写道   <action name="userTypeAction" 
class="com.ekangcount.website.system.view.action.UserTypeAction"> 
<result name="ssss" type="dispatcher"> </div>
                                </li>
                                <li><a href="/article/2250.htm"
                                       title="[时空与能量]逆转时空需要消耗大量能源" target="_blank">[时空与能量]逆转时空需要消耗大量能源</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E8%83%BD%E6%BA%90/1.htm">能源</a>
                                    <div> 
 
        无论如何,人类始终都想摆脱时间和空间的限制....但是受到质量与能量关系的限制,我们人类在目前和今后很长一段时间内,都无法获得大量廉价的能源来进行时空跨越..... 
 
        在进行时空穿梭的实验中,消耗超大规模的能源是必然</div>
                                </li>
                                <li><a href="/article/2377.htm"
                                       title="oracle的正则表达式(regular expression)详细介绍" target="_blank">oracle的正则表达式(regular expression)详细介绍</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/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a>
                                    <div>    正则表达式是很多编程语言中都有的。可惜oracle8i、oracle9i中一直迟迟不肯加入,好在oracle10g中终于增加了期盼已久的正则表达式功能。你可以在oracle10g中使用正则表达式肆意地匹配你想匹配的任何字符串了。 
正则表达式中常用到的元数据(metacharacter)如下: 
^ 匹配字符串的开头位置。 
$ 匹配支付传的结尾位置。 
* </div>
                                </li>
                                <li><a href="/article/2504.htm"
                                       title="报表工具与报表性能的关系" target="_blank">报表工具与报表性能的关系</a>
                                    <span class="text-muted">datamachine</span>
<a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E5%B7%A5%E5%85%B7/1.htm">报表工具</a><a class="tag" taget="_blank" href="/search/birt/1.htm">birt</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E6%80%A7%E8%83%BD/1.htm">报表性能</a><a class="tag" taget="_blank" href="/search/%E6%B6%A6%E4%B9%BE%E6%8A%A5%E8%A1%A8/1.htm">润乾报表</a>
                                    <div>在选择报表工具时,性能一直是用户关心的指标,但是,报表工具的性能和整个报表系统的性能有多大关系呢? 
要回答这个问题,首先要分析一下报表的处理过程包含哪些环节,哪些环节容易出现性能瓶颈,如何优化这些环节。 
  
一、报表处理的一般过程分析 
1、用户选择报表输入参数后,报表引擎会根据报表模板和输入参数来解析报表,并将数据计算和读取请求以SQL的方式发送给数据库。 
  
2、</div>
                                </li>
                                <li><a href="/article/2631.htm"
                                       title="初一上学期难记忆单词背诵第一课" target="_blank">初一上学期难记忆单词背诵第一课</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/word/1.htm">word</a><a class="tag" taget="_blank" href="/search/english/1.htm">english</a>
                                    <div>what 什么  
your 你 
name 名字 
my 我的 
am 是 
one 一 
two 二 
three 三 
four 四 
five 五 
class 班级,课 
  
six 六 
seven 七 
eight 八 
nince 九 
ten 十 
zero 零 
how 怎样 
old 老的 
eleven 十一 
twelve 十二 
thirteen </div>
                                </li>
                                <li><a href="/article/2758.htm"
                                       title="我学过和准备学的各种技术" target="_blank">我学过和准备学的各种技术</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF/1.htm">技术</a>
                                    <div>语言VB https://msdn.microsoft.com/zh-cn/library/2x7h1hfk.aspxJava http://docs.oracle.com/javase/8/C# https://msdn.microsoft.com/library/vstudioPHP http://php.net/manual/en/Html </div>
                                </li>
                                <li><a href="/article/2885.htm"
                                       title="struts2中token防止重复提交表单" target="_blank">struts2中token防止重复提交表单</a>
                                    <span class="text-muted">蕃薯耀</span>
<a class="tag" taget="_blank" href="/search/%E9%87%8D%E5%A4%8D%E6%8F%90%E4%BA%A4%E8%A1%A8%E5%8D%95/1.htm">重复提交表单</a><a class="tag" taget="_blank" href="/search/struts2%E4%B8%ADtoken/1.htm">struts2中token</a>
                                    <div>struts2中token防止重复提交表单 
  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 
蕃薯耀 2015年7月12日 11:52:32 星期日 
ht</div>
                                </li>
                                <li><a href="/article/3012.htm"
                                       title="线性查找二维数组" target="_blank">线性查找二维数组</a>
                                    <span class="text-muted">hao3100590</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a>
                                    <div>1.算法描述 
  
有序(行有序,列有序,且每行从左至右递增,列从上至下递增)二维数组查找,要求复杂度O(n) 
  
2.使用到的相关知识: 
结构体定义和使用,二维数组传递(http://blog.csdn.net/yzhhmhm/article/details/2045816) 
  
3.使用数组名传递 
这个的不便之处很明显,一旦确定就是不能设置列值 
  
//使</div>
                                </li>
                                <li><a href="/article/3139.htm"
                                       title="spring security 3中推荐使用BCrypt算法加密密码" target="_blank">spring security 3中推荐使用BCrypt算法加密密码</a>
                                    <span class="text-muted">jackyrong</span>
<a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a>
                                    <div>spring security 3中推荐使用BCrypt算法加密密码了,以前使用的是md5, 
Md5PasswordEncoder 和 ShaPasswordEncoder,现在不推荐了,推荐用bcrpt 
Bcrpt中的salt可以是随机的,比如: 
 
 
 

int i = 0;
	while (i < 10) {
		String password = "1234</div>
                                </li>
                                <li><a href="/article/3266.htm"
                                       title="学习编程并不难,做到以下几点即可!" target="_blank">学习编程并不难,做到以下几点即可!</a>
                                    <span class="text-muted">lampcy</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a>
                                    <div>不论你是想自己设计游戏,还是开发iPhone或安卓手机上的应用,还是仅仅为了娱乐,学习编程语言都是一条必经之路。编程语言种类繁多,用途各 异,然而一旦掌握其中之一,其他的也就迎刃而解。作为初学者,你可能要先从Java或HTML开始学,一旦掌握了一门编程语言,你就发挥无穷的想象,开发 各种神奇的软件啦。 
1、确定目标 
学习编程语言既充满乐趣,又充满挑战。有些花费多年时间学习一门编程语言的大学生到</div>
                                </li>
                                <li><a href="/article/3393.htm"
                                       title="架构师之mysql----------------用group+inner join,left join ,right join 查重复数据(替代in)" target="_blank">架构师之mysql----------------用group+inner join,left join ,right join 查重复数据(替代in)</a>
                                    <span class="text-muted">nannan408</span>
<a class="tag" taget="_blank" href="/search/right+join/1.htm">right join</a>
                                    <div>1.前言。 
  如题。 
2.代码 
(1)单表查重复数据,根据a分组 
  


SELECT m.a,m.b, INNER   JOIN (select a,b,COUNT(*) AS rank FROM test.`A` A   GROUP BY a HAVING rank>1 )k ON m.a=k.a



 
(2)多表查询 , 
 使用改为le</div>
                                </li>
                                <li><a href="/article/3520.htm"
                                       title="jQuery选择器小结 VS 节点查找(附css的一些东西)" target="_blank">jQuery选择器小结 VS 节点查找(附css的一些东西)</a>
                                    <span class="text-muted">Everyday都不同</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/name%E9%80%89%E6%8B%A9%E5%99%A8/1.htm">name选择器</a><a class="tag" taget="_blank" href="/search/%E8%BF%BD%E5%8A%A0%E5%85%83%E7%B4%A0/1.htm">追加元素</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E6%89%BE%E8%8A%82%E7%82%B9/1.htm">查找节点</a>
                                    <div>最近做前端页面,频繁用到一些jQuery的选择器,所以特意来总结一下: 
  
测试页面: 
<html>
	<head>
		<script src="jquery-1.7.2.min.js"></script>
		<script>
		/*$(function() {
			$(documen</div>
                                </li>
                                <li><a href="/article/3647.htm"
                                       title="关于EXT" target="_blank">关于EXT</a>
                                    <span class="text-muted">tntxia</span>
<a class="tag" taget="_blank" href="/search/ext/1.htm">ext</a>
                                    <div>  
ExtJS是一个很不错的Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用 javascript编写,与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 
  
  
  
ExtJs最开始基于YUI技术,由开发人员Jack </div>
                                </li>
                                <li><a href="/article/3774.htm"
                                       title="一个MIT计算机博士对数学的思考" target="_blank">一个MIT计算机博士对数学的思考</a>
                                    <span class="text-muted">xjnine</span>
<a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a>
                                    <div> 在过去的一年中,我一直在数学的海洋中游荡,research进展不多,对于数学世界的阅历算是有了一些长进。为什么要深入数学的世界?作为计算机的学生,我没有任何企图要成为一个数学家。我学习数学的目的,是要想爬上巨人的肩膀,希望站在更高的高度,能把我自己研究的东西看得更深广一些。说起来,我在刚来这个学校的时候,并没有预料到我将会有一个深入数学的旅程。我的导师最初希望我去做的题目,是对appe</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>