Web自动化测试入门 : 前端页面的组成分析详解

Web自动化测试入门 : 前端页面的组成分析详解_第1张图片

目前常见的前端页面是由HTML+css+JavaScript组成。

一、HTML:

作用:定义页面呈现的内容

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

语言特点编辑:

超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下:

  • 简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便。
  • 可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。
  • 平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。
  • 通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点.

Web自动化测试入门 : 前端页面的组成分析详解_第2张图片

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如
  • HTML 标签通常是成对出现的,比如
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
现在我也找了很多测试的朋友,做了一个分享技术的交流群,共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源,没人解答问题,坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化,性能,安全,测试开发等等方面有一定建树的技术大牛
分享他们的经验,还会分享很多直播讲座和技术沙龙
可以免费学习!划重点!开源的!!!
qq群号:110685036

Web自动化测试入门 : 前端页面的组成分析详解_第3张图片

HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:




我的第一个标题

我的第一个段落。

一、css简介

css是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离

二、css四种引入方式

2.1、行内式

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

01

02

--第一种引入方式-->

="color: red; margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important;">>hello yuan </div>

2.2、嵌入式

嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下:

01

02

03

04

05

06

07

08

09

    ="UTF-8">

    Title<</code><code>/</code><code>title></code></p> <p><code>    </code><code><style></code></p> <p><code>        </code><code>p{</code></p> <p><code>            </code><code>background</code><code>-</code><code>color: </code><code>#2b99ff;</code></p> <p><code>        </code><code>}</code></p> <p><code>    </code><code><</code><code>/</code><code>style></code></p> <p><code><</code><code>/</code><code>head></code></p> </td> </tr> </tbody> </table> <h4 id="blogTitle4">2.3、链接式</h4> <p>将一个.css文件引入到HTML文件中(常用)</p> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> </td> <td> <p><code><link href</code><code>=</code><code>"mystyle.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>type</code><code>=</code><code>"text/css"</code><code>/</code><code>></code></p> <p><code><link href</code><code>=</code><code>"test1.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>></code></p> </td> </tr> </tbody> </table> <h4 id="blogTitle5">2.4、导入式</h4> <p>将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中,使用的语法如下:</p> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> </td> <td> <p><code><style </code><code>type</code><code>=</code><code>"text/css"</code><code>></code></p> <p><code> </code> </p> <p><code>          </code><code>@import</code><code>"mystyle.css"</code><code>; 此处要注意.css文件的路径</code></p> <p><code> </code> </p> <p><code><</code><code>/</code><code>style> </code></p> </td> </tr> </tbody> </table> <p>特别注意:导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。</p> <h3 id="blogTitle6">三、css选择器(selector)</h3> <p>“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素</p> <h4 id="blogTitle7">3.1、基础选择器</h4> <p>1)* 通用元素选择器,匹配任何元素</p> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> </td> <td> <p><code>*</code><code>{</code></p> <p><code>   </code><code>color: red;</code></p> <p><code>}</code></p> </td> </tr> </tbody> </table> <p>2)标签选择器,匹配所有使用某标签的元素</p> <table border="0"> <tbody> <tr> <td> <p>01</p> </td> <td> <p><code>p { color:green; }   </code><code>#匹配p标签</code></p> </td> </tr> </tbody> </table> <p>3)id选择器</p> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> </td> <td> <p><code>#littleP{</code></p> <p><code>    </code><code>background</code><code>-</code><code>color: blue;</code></p> <p><code>}</code></p> <p></p> <p><code>......</code></p> <p><code><p </code><code>id</code><code>=</code><code>"littleP"</code><code>>pppp<</code><code>/</code><code>p></code></p> </td> </tr> </tbody> </table> <p>4)class选择器</p> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> </td> <td> <p><code>.info和E.info: </code><code>class</code><code>选择器,匹配所有</code><code>class</code><code>属性中包含info的元素   </code></p> <p><code>.info { background:</code><code>#ff0; }    </code></p> <p><code>p.info { background:blue; }</code></p> </td> </tr> </tbody> </table> <h4 id="blogTitle8">3.2、组合选择器</h4> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> </td> <td> <p><code>E,F         多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔         div,p { color:</code><code>#f00; }</code></p> <p><code>E F         后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔    li a { font</code><code>-</code><code>weight:bold;</code></p> <p><code>E > F       子元素选择器,匹配所有E元素的子元素F                            div > p { color:</code><code>#f00; }</code></p> <p><code>E </code><code>+</code> <code>F       毗邻元素选择器,匹配所有紧随E元素之后的同级元素F                  div </code><code>+</code> <code>p { color:</code><code>#f00; }</code></p> </td> </tr> </tbody> </table> <p>注意<strong>嵌套规则</strong>:</p> <ol> <li>块级元素可以包含内联元素或<strong>某些</strong>块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。</li> <li><strong>有几个特殊的块级元素只能包含内联元素,不能包含块级元素</strong>。如h1,h2,h3,h4,h5,h6,p,dt</li> <li>li内可以包含div</li> <li>块级元素与块级元素并列、内联元素与内联元素并列。</li> </ol> <p>示例一:</p> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> </td> <td> <p><code>#littleP,div.cuihua{      #匹配id为littleP,或者标签为div且class为cuihua的标签</code></p> <p><code>    </code><code>color: chartreuse;</code></p> <p><code>}</code></p> <p></p> <p><code>#++++++++++++++++++++++++++++</code></p> <p><code>#匹配</code></p> <p><code><p </code><code>id</code><code>=</code><code>"littleP"</code><code>>pppp<</code><code>/</code><code>p></code></p> <p><code><div </code><code>class</code><code>=</code><code>"cuihua"</code><code>>div<</code><code>/</code><code>div></code></p> </td> </tr> </tbody> </table> <p>参考地址:</p> <p>JavaScript:</p> <p>  </p> <h4 id="blogTitle9">3.3、属性选择器</h4> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> </td> <td> <p><code>E[att]         匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。)   p[title] { color:</code><code>#f00; }</code></p> <p><code>E[att</code><code>=</code><code>val]     匹配所有att属性等于“val”的E元素                    div[</code><code>class</code><code>=</code><code>”error”] { color:</code><code>#f00; }</code></p> <p><code>E[att~</code><code>=</code><code>val]    匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素  td[</code><code>class</code><code>~</code><code>=</code><code>”name”] { color:</code><code>#f00; }</code></p> <p><code>E[attr^</code><code>=</code><code>val]    匹配属性值以指定值开头的每个元素                     div[</code><code>class</code><code>^</code><code>=</code><code>"test"</code><code>]{background:</code><code>#ffff00;}</code></p> <p><code>E[attr$</code><code>=</code><code>val]    匹配属性值以指定值结尾的每个元素                     div[</code><code>class</code><code>$</code><code>=</code><code>"test"</code><code>]{background:</code><code>#ffff00;}</code></p> <p><code>E[attr</code><code>*</code><code>=</code><code>val]    匹配属性值中包含指定值的每个元素                     div[</code><code>class</code><code>*</code><code>=</code><code>"test"</code><code>]{background:</code><code>#ffff00;}</code></p> </td> </tr> </tbody> </table> <p>示例:</p> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> <p>09</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> </td> <td> <p><code>[alex]{         </code><code>#匹配属性为alex</code></p> <p><code>    </code><code>color: red;</code></p> <p><code>}</code></p> <p></p> <p><code>p[alex</code><code>=</code><code>"dasb"</code><code>]{  </code><code>#匹配标签为p标签,且属性值为alex="dasb"</code></p> <p><code>    </code><code>color: blue;</code></p> <p><code>    </code><code>font</code><code>-</code><code>family: </code><code>"Times New Roman"</code><code>;</code></p> <p><code>    </code><code>font</code><code>-</code><code>size: </code><code>30px</code><code>;</code></p> <p><code>}</code></p> <p></p> <p><code>[alex</code><code>*</code><code>=</code><code>"b"</code><code>]{    </code><code>#匹配属性为alex,且值只要含有b的标签</code></p> <p><code>    </code><code>color: teal;</code></p> <p><code>}</code></p> </td> </tr> </tbody> </table> <h4 id="blogTitle10">3.4、伪类(Pseudo-classes)</h4> <p>CSS伪类是用来给选择器添加一些特殊效果。</p> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> <p>09</p> <p>10</p> <p>11</p> <p>12</p> </td> <td> <p><code>a:link        </code><code>#(没有接触过的链接),用于定义了链接的常规状态。</code></p> <p><code>a:hover       </code><code>#(鼠标放在链接上的状态),用于产生视觉效果。</code></p> <p><code>a:visited     </code><code>#(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。</code></p> <p><code>a:active      </code><code>#(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。</code></p> <p></p> <p><code>#伪类选择器 : 伪类指的是标签的不同状态:</code></p> <p><code>a </code><code>=</code><code>=</code><code>> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态</code></p> <p></p> <p><code>a:link {color: </code><code>#FF0000}       /* 未访问的链接 */</code></p> <p><code>a:visited {color: </code><code>#00FF00}    /* 已访问的链接 */</code></p> <p><code>a:hover {color: </code><code>#FF00FF}      /* 鼠标移动到链接上 */</code></p> <p><code>a:active {color: </code><code>#0000FF}     /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }</code></p> </td> </tr> </tbody> </table> <p>示例:</p> <p>+ View Code</p> <p><strong>before after</strong>伪类 :</p> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> </td> <td> <p><code>:before    p:before       在每个<p>元素之前插入内容</code></p> <p><code>:after     p:after        在每个<p>元素之后插入内容</code></p> <p></p> <p><code>p:before        在每个 <p> 元素的内容之前插入内容                    p:before{content:</code><code>"hello"</code><code>;color:red}</code></p> <p><code>p:after         在每个 <p> 元素的内容之前插入内容                    p:after{ content:</code><code>"hello"</code><code>;color:red}</code></p> </td> </tr> </tbody> </table> <h3 id="blogTitle11">四、css优先级和继承</h3> <h4 id="blogTitle12">4.1、css优先级</h4> <p>所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。</p> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> </td> <td> <p><code>#样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:</code></p> <p><code>1</code> <code>内联样式表的权值最高              style</code><code>=</code><code>""</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>1000</code></p> <p><code>2</code> <code>统计选择符中的</code><code>ID</code><code>属性个数。        </code><code>#id    -------------100</code></p> <p><code>3</code> <code>统计选择符中的CLASS属性个数。     .</code><code>class</code>  <code>-------------</code><code>10</code></p> <p><code>4</code> <code>统计选择符中的HTML标签名个数。    p     -------------</code><code>-</code><code>1</code></p> <p></p> <p><code>#按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。</code></p> </td> </tr> </tbody> </table> <p>优先级示例:</p> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> <p>09</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20</p> <p>21</p> <p>22</p> </td> <td> <p><code><!DOCTYPE html></code></p> <p><code><html lang</code><code>=</code><code>"en"</code><code>></code></p> <p><code><head></code></p> <p><code>    </code><code><meta charset</code><code>=</code><code>"UTF-8"</code><code>></code></p> <p><code>    </code><code><title>Title<</code><code>/</code><code>title></code></p> <p><code>    </code><code><style></code></p> <p><code>        </code><code>#p{</code></p> <p><code>            </code><code>color: rebeccapurple;</code></p> <p><code>        </code><code>}</code></p> <p><code>        </code><code>.p{</code></p> <p><code>            </code><code>color: </code><code>#2459a2;</code></p> <p><code>        </code><code>}</code></p> <p><code>        </code><code>p{</code></p> <p><code>            </code><code>color: yellow;</code></p> <p><code>        </code><code>}</code></p> <p><code>    </code><code><</code><code>/</code><code>style></code></p> <p><code><</code><code>/</code><code>head></code></p> <p><code><body></code></p> <p><code><p </code><code>id</code><code>=</code><code>"p"</code> <code>class</code><code>=</code><code>"p"</code> <code>style</code><code>=</code><code>"color: deeppink"</code><code>>hello yuan<</code><code>/</code><code>p>   </code><code>#优先级最高</code></p> <p><code><!</code><code>-</code><code>-</code><code><p </code><code>id</code><code>=</code><code>"p"</code> <code>class</code><code>=</code><code>"p"</code><code>>hello yuan<</code><code>/</code><code>p></code><code>-</code><code>-</code><code>></code></p> <p><code><</code><code>/</code><code>body></code></p> <p><code><</code><code>/</code><code>html></code></p> </td> </tr> </tbody> </table> <h4 id="blogTitle13">4.2、css继承</h4> <p>继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。</p> <table border="0"> <tbody> <tr> <td> <p>01</p> </td> <td> <p><code>body{color:red;}       <p>helloyuan<</code><code>/</code><code>p></code></p> </td> </tr> </tbody> </table> <p>这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0,发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见:任何显示申明的规则都可以覆盖其继承样式。 此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等</p> <h4 id="blogTitle14">4.3、附加说明</h4> <p>1、文内的样式优先级为1000,所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式,而外部定义指经由<link>或<style>卷标定义的规则。<br> 2、有!important声明的规则高于一切。<br> 3、如果!important声明冲突,则比较优先权。<br> 4、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。<br> 5、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。</p> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> </td> <td> <p><code>#div1 .div3  {</code></p> <p><code>    </code><code>color: chartreuse!important;   </code><code>#优先级最高</code></p> <p><code>}</code></p> </td> </tr> </tbody> </table> <h3 id="blogTitle15">五、css常用属性</h3> <h4 id="blogTitle16">5.1、颜色属性</h4> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> </td> <td> <p><code><div style</code><code>=</code><code>"color:blueviolet"</code><code>>ppppp<</code><code>/</code><code>div></code></p> <p></p> <p><code><div style</code><code>=</code><code>"color:#ffee33"</code><code>>ppppp<</code><code>/</code><code>div></code></p> <p><code> </code> </p> <p><code><div style</code><code>=</code><code>"color:rgb(255,0,0)"</code><code>>ppppp<</code><code>/</code><code>div></code></p> <p><code> </code> </p> <p><code><div style</code><code>=</code><code>"color:rgba(255,0,0,0.5)"</code><code>>ppppp<</code><code>/</code><code>div>   </code><code>#增加了透明度</code></p> </td> </tr> </tbody> </table> <h4 id="blogTitle17">5.2、字体属性</h4> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> </td> <td> <p><code>font</code><code>-</code><code>size: </code><code>20px</code><code>/</code><code>50</code><code>%</code><code>/</code><code>larger   </code><code>#字体大小</code></p> <p><code> </code> </p> <p><code>font</code><code>-</code><code>family:</code><code>'Lucida Bright'</code>  <code>#字体格式</code></p> <p><code> </code> </p> <p><code>font</code><code>-</code><code>weight: lighter</code><code>/</code><code>bold</code><code>/</code><code>border</code><code>/</code>  <code>#字体粗细</code></p> <p><code> </code> </p> <p><code><h1 style</code><code>=</code><code>"font-style: oblique"</code><code>>老男孩<</code><code>/</code><code>h1></code></p> </td> </tr> </tbody> </table> <h4 id="blogTitle18">5.3、背景属性</h4> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> <p>09</p> </td> <td> <p><code>background</code><code>-</code><code>color: cornflowerblue</code></p> <p><code>background</code><code>-</code><code>image: url(</code><code>'1.jpg'</code><code>);</code></p> <p><code>background</code><code>-</code><code>repeat: no</code><code>-</code><code>repeat;(repeat:平铺满)</code></p> <p><code>background</code><code>-</code><code>position: right top(</code><code>20px</code> <code>20px</code><code>);(横向:left center right)(纵向:top center bottom)</code></p> <p></p> <p></p> <p><code>#简写:</code></p> <p><code><body style</code><code>=</code><code>"background: 20px 20px no-repeat #ff4 url('1.jpg')"</code><code>></code></p> <p><code><div style</code><code>=</code><code>"width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')"</code><code>></code></p> </td> </tr> </tbody> </table> <h4 id="blogTitle19">5.4、文本属性</h4> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> <p>09</p> </td> <td> <p><code>font</code><code>-</code><code>size: </code><code>10px</code><code>;</code></p> <p><code>text</code><code>-</code><code>align: center;   </code><code>#横向排列</code></p> <p><code>line</code><code>-</code><code>height: </code><code>200px</code><code>;   </code><code>#文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比</code></p> <p><code>vertical</code><code>-</code><code>align:-</code><code>4px</code>  <code>#设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效</code></p> <p></p> <p><code>text</code><code>-</code><code>indent: </code><code>150px</code><code>;   </code><code>#首行缩进</code></p> <p><code>letter</code><code>-</code><code>spacing: </code><code>10px</code><code>;</code></p> <p><code>word</code><code>-</code><code>spacing: </code><code>20px</code><code>;</code></p> <p><code>text</code><code>-</code><code>transform: capitalize;  </code><code>#首字母大写</code></p> </td> </tr> </tbody> </table> <p>示例:</p> <p>+ View Code</p> <h4 id="blogTitle20">5.5、边框属性</h4> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> </td> <td> <p><code>border</code><code>-</code><code>style: solid;</code></p> <p><code>border</code><code>-</code><code>color: chartreuse;</code></p> <p><code>border</code><code>-</code><code>width: </code><code>20px</code><code>;</code></p> <p><code>#简写:border: 30px rebeccapurple solid;</code></p> </td> </tr> </tbody> </table> <p>示例:</p> <p>+ View Code</p> <h4 id="blogTitle21">5.6、列表属性</h4> <table border="0"> <tbody> <tr> <td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> </td> <td> <p><code>ol,ul{</code></p> <p><code>    </code><code>/</code><code>*</code><code>list</code><code>-</code><code>style: circle;</code><code>*</code><code>/</code></p> <p><code>    </code><code>/</code><code>*</code><code>list</code><code>-</code><code>style: square;</code><code>*</code><code>/</code></p> <p><code>    </code><code>/</code><code>*</code><code>list</code><code>-</code><code>style: lower</code><code>-</code><code>latin;</code><code>*</code><code>/</code></p> <p><code>    </code><code>list</code><code>-</code><code>style: none;  </code><code>#去样式</code></p> <p><code>}</code></p> </td> </tr> </tbody> </table> <h4 id="blogTitle22">5.7、 display属性</h4> <p>display属性有:none,block,inline,inline-block</p> <p>display:inline-block可做列表布局,其中的类似于图片间的间隙小bug可以通过如下设置解决</p> <p><strong>今天的分享就到此结束了,大家还有什么不懂的可以评论区下提问哈,如果我的文章对你有所帮助的话,可以点赞三联支持一下哈</strong></p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1713439454905053184"></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">你可能感兴趣的:(软件测试,安全测试,自动化测试,前端,测试工具,集成测试,功能测试,软件测试,jmeter,自动化测试)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835221149026447360.htm" title="Nuxt Kit 自动导入功能:高效管理你的模块和组合式函数" target="_blank">Nuxt Kit 自动导入功能:高效管理你的模块和组合式函数</a> <span class="text-muted">qcidyu</span> <a class="tag" taget="_blank" href="/search/%E5%A5%BD%E7%94%A8%E7%9A%84%E5%B7%A5%E5%85%B7%E9%9B%86%E5%90%88/1.htm">好用的工具集合</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E6%95%88%E7%8E%87/1.htm">代码效率</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8A%80%E5%B7%A7/1.htm">前端技巧</a><a class="tag" taget="_blank" href="/search/Vue%E5%BC%80%E5%8F%91/1.htm">Vue开发</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E5%90%88%E5%BC%8F%E5%87%BD%E6%95%B0/1.htm">组合式函数</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E5%9D%97%E7%AE%A1%E7%90%86/1.htm">模块管理</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%AF%BC%E5%85%A5/1.htm">自动导入</a><a class="tag" taget="_blank" href="/search/Nuxt/1.htm">Nuxt</a><a class="tag" taget="_blank" href="/search/Kit/1.htm">Kit</a> <div>title:NuxtKit自动导入功能:高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能,您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入,您都可以通过简单的API调用轻松实现。categories:前端开发tags:N</div> </li> <li><a href="/article/1835194426499100672.htm" title="外卖霸王餐返利外卖会员卡小程序开发" target="_blank">外卖霸王餐返利外卖会员卡小程序开发</a> <span class="text-muted">闹小艾</span> <a class="tag" taget="_blank" href="/search/good506070/1.htm">good506070</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤:一、需求梳理:首先,我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略,以及用户体验友好的界面设计。二、技术决策:技术选型是关键。我们采用小程序的开发框架,利用JavaScript作为前端开发语言,并结合微信提供的API进行后端接口调用与数据处理。三、账</div> </li> <li><a href="/article/1835189458316652544.htm" title="关于测试的个人理解" target="_blank">关于测试的个人理解</a> <span class="text-muted">低调_0c1d</span> <div>针对测试,专业的知识可以自行百度我只谈谈我目前的理解:我目前理解的测试包含两方面:单元测试和集成测试我理解的单元测试是,以一个类的一个方法的单元测试为例,我只关心方法是要干什么的,输入是什么,预期输出是什么,将预期输出和实际的输出进行比对(用志勇哥说的断言),想必有些同学可能会说如果这方法依赖了其他的类,那么此时就可以使用睿哥说的mockito了,我理解的mock就是伪造处一个被依赖的类的方法的输</div> </li> <li><a href="/article/1835188875916570624.htm" title="终于搞懂TS中的泛型啦! | typescript 入门指南 04" target="_blank">终于搞懂TS中的泛型啦! | typescript 入门指南 04</a> <span class="text-muted">程序员王天</span> <a class="tag" taget="_blank" href="/search/TypeScript%E5%AE%9E%E8%B7%B5%E6%8C%87%E5%8D%97/1.htm">TypeScript实践指南</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/typescript/1.htm">typescript</a> <div>大家好,我是王天~今天分享的是《ts入门指南》系列中第四篇,主要讲解ts中的泛型应用泛型在ts中是比较重要的概念,我花挺长时间才搞明白,整理输出这篇文章,希望能帮助到大家~《ts入门指南》系列,点击下方蓝色字体即可访问TsvsJs谁适合前端开发?|TypeScript入门指南01详解tsconfig.json配置文件|TypeScript入门指南02必学!TypeScript语法类型基础|Type</div> </li> <li><a href="/article/1835186351805394944.htm" title="前端HTML+CSS+JS的入门学习" target="_blank">前端HTML+CSS+JS的入门学习</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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>一.HTMLHTML(HyperTextMarkupLanguage)即超文本标记语言,是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言,而是一种标记语言,通过一系列的元素(elements)来告诉浏览器如何显示网页上的内容,如文本、图片、链接、表格、列表等。HTML文档由一系列的标签(tags)组成,这些标签告诉浏览器如何显示内容。标签通常成对出现,例如和,其中是开始标签,表示一个</div> </li> <li><a href="/article/1835162742533746688.htm" title="全面指南:用户行为从前端数据采集到实时处理的最佳实践" target="_blank">全面指南:用户行为从前端数据采集到实时处理的最佳实践</a> <span class="text-muted">数字沉思</span> <a class="tag" taget="_blank" href="/search/%E8%90%A5%E9%94%80/1.htm">营销</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E9%87%8F%E8%BF%90%E8%90%A5/1.htm">流量运营</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/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/%E5%86%85%E5%AE%B9%E8%BF%90%E8%90%A5/1.htm">内容运营</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>引言在当今的数据驱动世界,实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析,这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时,需要考虑多种因素,包括事件类型、时间戳、用户信</div> </li> <li><a href="/article/1835158455070060544.htm" title="测试用例设计方法" target="_blank">测试用例设计方法</a> <span class="text-muted">胖球的铲屎官</span> <a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B/1.htm">测试用例</a> <div>一、什么是测试用例?测试用例主要是测试人员整理的一组文档,具体记录软件功能测试的输入和预期输出,描述测试场景。二、测试用例包含哪些内容包括用例编号、测试模块,用例名称、前置条件、优先级、测试步骤、预期结果,实际结果,执行人,测试时间,备注。三、测试用例设计方法可以从以下4个大方面去考虑:1、功能功能可以从黑盒测试和白盒测试考虑;1-1黑盒测试从黑盒测试看,可以用等价类划分法,边界值分析,错误推测,</div> </li> <li><a href="/article/1835133874892533760.htm" title="前端使用react-intl-universal进行国际化" target="_blank">前端使用react-intl-universal进行国际化</a> <span class="text-muted">Stephy_Yy</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E8%B0%83%E7%A0%94/1.htm">调研</a><a class="tag" taget="_blank" href="/search/reactjs/1.htm">reactjs</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>一、国际化/i18n目前国际化,就是开发者写对象,一个key关联若干语种的翻译。相比于浏览器自带的翻译功能,语义更加准确。“国际化”的简称:i18n(其来源是英文单词internationalization的首末字符i和n,18为中间的字符数)二、react项目国际化react-intl是业界最受欢迎的软件包之一:React-intl是雅虎的语言国际化开源项目FormatJS的一部分,通过其提供的</div> </li> <li><a href="/article/1835131605585326080.htm" title="html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示" target="_blank">html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示</a> <span class="text-muted">睿理</span> <div>html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格,可以填数的表格控件?首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以</div> </li> <li><a href="/article/1835125416487120896.htm" title="Java在Controller生成Excel供前端直接下载" target="_blank">Java在Controller生成Excel供前端直接下载</a> <span class="text-muted">pengjunlee</span> <a class="tag" taget="_blank" href="/search/SpringBoot%E9%87%8D%E7%82%B9%E8%AF%A6%E8%A7%A3/1.htm">SpringBoot重点详解</a><a class="tag" taget="_blank" href="/search/%E5%AF%BC%E5%87%BA%E6%96%87%E4%BB%B6/1.htm">导出文件</a><a class="tag" taget="_blank" href="/search/POI/1.htm">POI</a><a class="tag" taget="_blank" href="/search/excel/1.htm">excel</a><a class="tag" taget="_blank" href="/search/Controller/1.htm">Controller</a> <div>在许多企业办公系统中,经常会有用户要求,需要对数据进行统计并且可以直接下载Excel文件,这样子的话,既然客户提出了要求,我们就应该去满足吖,毕竟客户是上帝嘛,那么我们如何去实现呢?且看我为你一一道来。POI简介JakartaPOI是一套用于访问微软格式文档的JavaAPI。JakartaPOI有很多组件组成,其中有用于操作Excel格式文件的HSSF和用于操作Word的HWPF,在各种组件中目前</div> </li> <li><a href="/article/1835118610398408704.htm" title="解决前端导出excel文件,打开为乱码" target="_blank">解决前端导出excel文件,打开为乱码</a> <span class="text-muted">荔枝,你让我拿什么荔枝!</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>前端开发中,导入和导出文件是比较常见的业务场景,常见的情况是:后端返回一个二进制的流文件,前端将其转化为excel文件即可。但是往往会出现转化后的excel文件内容位乱码的情况,本文中提供了两个解决方案:方案一:用户自定义上传方法添加附件添加附件代码解读:上述代码采用了element-ui的el-upload文件上传的组件。改组件有两种文件上传的方式:1.组件自带的上传方法,只需要给其设置acti</div> </li> <li><a href="/article/1835115456457961472.htm" title="JMeter 4.0 mac上配置代理录制脚本" target="_blank">JMeter 4.0 mac上配置代理录制脚本</a> <span class="text-muted">GoGooGooo</span> <div>添加线程组添加http代理服务器设置mac网页代理设置http代理服务器启动,访问指定网站,去线程组里查看拦截的请求</div> </li> <li><a href="/article/1835097184824029184.htm" title="【Java】如何将二进制转换成MultipartFile" target="_blank">【Java】如何将二进制转换成MultipartFile</a> <span class="text-muted">Mxin5</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>业务场景:前端发送请求到后端进行文件上传,后端接收文件并调用第三方接口进行文件处理,响应格式为二进制,然后我们需要将二进制进行转换为MultipartFile进行文件上传。如果你想要将File转换成MultipartFile,可以参考:【Java】如何将File转换成MultipartFile_javafile转multipartfile_MXin5的博客-CSDN博客1.传递二进制respons</div> </li> <li><a href="/article/1835093025827680256.htm" title="【Java将File完美转为MultipartFile】:亲测有效" target="_blank">【Java将File完美转为MultipartFile】:亲测有效</a> <span class="text-muted">阿火~</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>由于multipartFile有很多有用的api,但是有时候我们接收到前台的参数是文件名和文件内容,而不是文件,此时不能使用multipartFile接收,导致处理起来很不方便,比如我用minio上传文件,minio需要multipartFile类型的文件,而我拿到前端传来的文件名和文件内容只能自己通过File类创建文件,所以如果想用multipartFile类型就需要自己转换,然而天不遂人愿,并</div> </li> <li><a href="/article/1835091011232165888.htm" title="基于Google authentic实现的双因子登录认证系统前后台基于SSMP+Vue+Element(解决SecureRandom造成的服务器请求缓慢)" target="_blank">基于Google authentic实现的双因子登录认证系统前后台基于SSMP+Vue+Element(解决SecureRandom造成的服务器请求缓慢)</a> <span class="text-muted">Tate_Brown</span> <a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/JAVA/1.htm">JAVA</a><a class="tag" taget="_blank" href="/search/IDEA/1.htm">IDEA</a><a class="tag" taget="_blank" href="/search/DEBUG/1.htm">DEBUG</a><a class="tag" taget="_blank" href="/search/VUE/1.htm">VUE</a> <div>用md5两次加盐密码,可以灵活更换算法--直接上代码地址:JAVA后台:https://github.com/TateBrownJava/TwoFALogindemoBackendVue前端:https://github.com/TateBrownJava/TwoFALoginDemofrontend-------------------------------------------------</div> </li> <li><a href="/article/1835065671130640384.htm" title="前端基础面试题·第三篇——JavaScript(其二)" target="_blank">前端基础面试题·第三篇——JavaScript(其二)</a> <span class="text-muted">DT——</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/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.深浅拷贝1.浅拷贝浅拷贝会创建一个新的对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝就是改引用类型的地址。//常见的浅拷贝1.Object.assign({},obj)//对象浅拷贝assign⽅法可以⽤于处理数组,不过会把数组视为对象,⽐如这⾥会把⽬标数组视为是属性为0、1、2的对象,所以源数组的0、1属性的值覆盖了⽬标对</div> </li> <li><a href="/article/1835057978672246784.htm" title="nginx部署前端项目的一些配置【刚入门】" target="_blank">nginx部署前端项目的一些配置【刚入门】</a> <span class="text-muted">weixin_30847271</span> <a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/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/ViewUI/1.htm">ViewUI</a> <div>前期准备:在linux上安装nginx,我用的是腾讯云centos7服务器,具体的安装过程可以到腾讯云的开发者实验室里体验,自己先试试水。修改nginx.conf配置文件,我用到的修改只是以下的部分。1.端口号2.项目的存放位置server{listen8088default_server;#访问的端口号。listen[::]:8088default_server;server_name_;#ro</div> </li> <li><a href="/article/1835022806400724992.htm" title="AJAX异步请求数据" target="_blank">AJAX异步请求数据</a> <span class="text-muted">铸键为犁</span> <a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>文章目录前言一、AJAX是什么?二、使用步骤1.语法格式2.示例2.注意事项总结前言本篇主要介绍怎么使用AJAX向服务器请求数据。一、AJAX是什么?异步请求技术,可以实现页面局部刷新,在不刷新页面的情况下发送请求到后台加载数据,并且展现在前端二、使用步骤1.语法格式代码如下:$.get(url,data,function(data){})发送get请求参数1:url是后台服务器地址参数2:dat</div> </li> <li><a href="/article/1835020156800167936.htm" title="软件测试面试题" target="_blank">软件测试面试题</a> <span class="text-muted">爱学习的执念</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95%E9%9D%A2%E8%AF%95/1.htm">软件测试面试</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95%E9%9D%A2%E8%AF%95/1.htm">软件测试面试</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1、测试矿泉水瓶外观界面测试:瓶子外观界面测试主要是测试瓶子的大小、瓶身所体现的各种信息(如字体、颜色)等瓶子的外观特征是否满足公司的最初对瓶子的设计要求。1.瓶身广告和图案的背景颜色是否符合公司设计要求。2.瓶身上所有字体、颜色是否符合公司的设计要求,是否有错别字。3.带广告的图案遇水后是否会掉色或变模糊,广告与图案内容是否合法。4.瓶身是否有防止烫伤、垃圾回收、年龄限制等提示。5.瓶身图标布局</div> </li> <li><a href="/article/1835019650895802368.htm" title="python基于django/flask的NBA球员大数据分析与可视化python+java+node.js" target="_blank">python基于django/flask的NBA球员大数据分析与可视化python+java+node.js</a> <span class="text-muted">QQ_511008285</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a> <div>前端开发框架:vue.js数据库mysql版本不限后端语言框架支持:1java(SSM/springboot)-idea/eclipse2.Nodejs+Vue.js-vscode3.python(flask/django)--pycharm/vscode4.php(thinkphp/laravel)-hbuilderx数据库工具:Navicat/SQLyog等都可以本文针对NBA球员的大数据进行</div> </li> <li><a href="/article/1835019524521422848.htm" title="Java基于spring boot的国产电影数据分析与可视化python+java+node.js" target="_blank">Java基于spring boot的国产电影数据分析与可视化python+java+node.js</a> <span class="text-muted">QQ_511008285</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a> <div>前端开发框架:vue.js数据库mysql版本不限后端语言框架支持:1java(SSM/springboot)-idea/eclipse2.Nodejs+Vue.js-vscode3.python(flask/django)--pycharm/vscode4.php(thinkphp/laravel)-hbuilderx数据库工具:Navicat/SQLyog等都可以  该系统使用进行大数据处理和</div> </li> <li><a href="/article/1835013598070534144.htm" title="外包干了半年,快要废了。。。" target="_blank">外包干了半年,快要废了。。。</a> <span class="text-muted">爱学习的执念</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95%E9%9D%A2%E8%AF%95/1.htm">软件测试面试</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95%E9%9D%A2%E8%AF%95/1.htm">软件测试面试</a> <div>先说一下自己的情况,普通本科,在外包干了半年多的功能测试,这几年因为大环境不好,我整个人心惊胆战的,怕自己卷铺盖走人了,我感觉自己不能够在这样蹉跎下去了,长时间呆在一个舒适的环境真的会让一个人丧失上进心!而我已经干了半年的点点点,都快让自己变成废物了,准备结婚的对象也因为我的不思进取和挣钱能力和我分手了。所以我决定改变一下自己,活得像个样子,于是边工作边自己在网上找资源自己学(主要学习自动化和性能</div> </li> <li><a href="/article/1835012337199837184.htm" title="性能测试的复习2-jmeter的搭建、使用、参数化" target="_blank">性能测试的复习2-jmeter的搭建、使用、参数化</a> <span class="text-muted">暖阳与晚风</span> <a class="tag" taget="_blank" href="/search/jmeter/1.htm">jmeter</a><a class="tag" taget="_blank" href="/search/jmeter/1.htm">jmeter</a> <div>通过网盘分享的文件:性能测试共享文件链接:https://pan.baidu.com/s/1A4Nc8C5Xp6qxQ5QFtecK8g?pwd=s73c提取码:s73c1、性能测试工具2、jmeter环境搭建3、jmeter的基本使用4、jmeter的参数化</div> </li> <li><a href="/article/1835010068240756736.htm" title="vue 表格左右拖拽调整列宽_vue中实现拖动调整左右两侧div的宽度的示例代码" target="_blank">vue 表格左右拖拽调整列宽_vue中实现拖动调整左右两侧div的宽度的示例代码</a> <span class="text-muted">weixin_40008969</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E6%A0%BC%E5%B7%A6%E5%8F%B3%E6%8B%96%E6%8B%BD%E8%B0%83%E6%95%B4%E5%88%97%E5%AE%BD/1.htm">表格左右拖拽调整列宽</a> <div>写在最前最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度,类似于这样这是我最终的实现效果还是老话,因为我不是专业的前端工程师,只是兼职写一些简单的前端,所以这个功能的实现得益于以下博客,《vue拖动调整左右两侧div的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》,而我只是针对于他们提供的代码,加了亿点点自己所需要的细节。实现原理如上图所示,我们需要将要实</div> </li> <li><a href="/article/1835008428129480704.htm" title="深入理解单元测试" target="_blank">深入理解单元测试</a> <span class="text-muted">元闰子</span> <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/log4j/1.htm">log4j</a> <div>荐语本文要介绍的是2020年O’Reilly出版的书籍UnitTestingPrinciples,Practices,andPatterns,一本在豆瓣评分高达9.9的好书。作为一名软件开发工程师,你应该对单元测试(unittest)很熟悉,但单元测试的目的、Mock的正确用法、单元测试和集成测试的区别等等,你真的懂吗?书中对这些内容都做了深入的介绍,并通过实际案例教你如何写出好的单元测试。读完这</div> </li> <li><a href="/article/1835007167686602752.htm" title="rsync exited with code 255.Load key “...“: invalid format Permission denied, please try again." target="_blank">rsync exited with code 255.Load key “...“: invalid format Permission denied, please try again.</a> <span class="text-muted">沧州刺史</span> <a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/actions/1.htm">actions</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a> <div>在配置githubactions自动部署前端项目到服务器上时,登录服务器使用的是秘钥登录。出现报错:[general]GITHUB_WORKSPACE:/home/runner/work/clogin-frontend/clogin-frontend[SSH]Creating/home/runner/.sshdirin/home/runner/work/clogin-frontend/clogin</div> </li> <li><a href="/article/1835005024372092928.htm" title="【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”" target="_blank">【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”</a> <span class="text-muted">coderYYY</span> <a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/bug%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/1.htm">bug解决方案</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a> <div>作者:coderYYY个人简介:前端程序媛,目前主攻web前端,后端辅助,其他技术知识也会偶尔分享欢迎和我一起交流!(评论和私信一般会回!!)个人专栏推荐:《前端项目教程以及代码》自从半月前,通义灵码一运行就会报这个错尝试了以下方法,都无法解决:阿里云官方方法:删除c盘的.lingma卸载重新安装通义灵码以管理员身份运行VSCode防火墙设置准入安装之前的版本最后是在扩展设置里面解决的路径不填也可</div> </li> <li><a href="/article/1835004897926410240.htm" title="微信小程序生成小程序转发链接,携带参数跳转到另外一个页面" target="_blank">微信小程序生成小程序转发链接,携带参数跳转到另外一个页面</a> <span class="text-muted">coderYYY</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E6%95%99%E7%A8%8B%E4%BB%A5%E5%8F%8A%E4%BB%A3%E7%A0%81/1.htm">前端项目教程以及代码</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/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%BE%AE%E4%BF%A1/1.htm">微信</a> <div>作者:coderYYY个人简介:前端程序媛,目前主攻web前端,后端辅助,其他技术知识也会偶尔分享欢迎和我一起交流!(评论和私信一般会回!!)个人专栏推荐:《前端项目教程以及代码》✨一、前言需求:在页面A生成分享链接(携带参数),分享到微信聊天后,好友点击链接可跳转到页面B,页面B可获取到参数二、具体实现pageA(生成链接页面):通过给button组件设置属性</div> </li> <li><a href="/article/1834999618279141376.htm" title="前端性能优化" target="_blank">前端性能优化</a> <span class="text-muted">EdmundChen</span> <div>要做性能优化,首先我们得知道用户从开始访问站点到看结果的这一段时间到底后花在了哪些地方。这就设计到一个经典问题。在游览器输入地址按下回车键之后到用户看到结果经历了哪些过程,这里简单说一下大的几个过程。(假设是输入的一个域名而非IP)1.通过DNS解析获得网址的对应IP地址2.浏览器拿到IP地址与远程web服务器通过TCP三次握手协商来建立一个TCP/IP连接3.浏览器通过HTTP接发送请求4.服务</div> </li> <li><a href="/article/1834998844144840704.htm" title="前端页面实现table可拖动改变列宽" target="_blank">前端页面实现table可拖动改变列宽</a> <span class="text-muted">牧 码 人</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/jQuery/1.htm">jQuery</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E6%A0%BC%E6%8B%96%E5%8A%A8/1.htm">表格拖动</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/colResizable/1.htm">colResizable</a> <div>此处实现页面的table表格可以自由拖动列宽,拖动时表格内文字不换行,超出部分以...代替,实现步骤如下:1.首先引入jQuery和colResizable的js文件,colResizable支持表格拖动改变列宽,但基于jQuery,(1)colResizable可以去:http://www.bacubacu.com/colresizable/#rangeSlider下载(2)引入文件:2.编写j</div> </li> <li><a href="/article/27.htm" title="rust的指针作为函数返回值是直接传递,还是先销毁后创建?" target="_blank">rust的指针作为函数返回值是直接传递,还是先销毁后创建?</a> <span class="text-muted">wudixiaotie</span> <a class="tag" taget="_blank" href="/search/%E8%BF%94%E5%9B%9E%E5%80%BC/1.htm">返回值</a> <div> 这是我自己想到的问题,结果去知呼提问,还没等别人回答, 我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a</div> </li> <li><a href="/article/154.htm" title="java编程思想 -- 数据的初始化" target="_blank">java编程思想 -- 数据的初始化</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%9A%84%E5%88%9D%E5%A7%8B%E5%8C%96/1.htm">数据的初始化</a> <div>  1.使用构造器确保数据初始化      /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }</div> </li> <li><a href="/article/281.htm" title="[航天与宇宙]为什么发射和回收航天器有档期" target="_blank">[航天与宇宙]为什么发射和回收航天器有档期</a> <span class="text-muted">comsci</span> <div>        地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁...        所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &</div> </li> <li><a href="/article/408.htm" title="linux下批量替换文件内容" target="_blank">linux下批量替换文件内容</a> <span class="text-muted">商人shang</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E6%9B%BF%E6%8D%A2/1.htm">替换</a> <div>1、网络上现成的资料   格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径`   linux sed 批量替换多个文件中的字符串   sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir`   例如:替换/home下所有文件中的www.admi</div> </li> <li><a href="/article/535.htm" title="网页在线天气预报" target="_blank">网页在线天气预报</a> <span class="text-muted">oloz</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A9%E6%B0%94%E9%A2%84%E6%8A%A5/1.htm">天气预报</a> <div>网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit</div> </li> <li><a href="/article/662.htm" title="SpringMVC和Struts2比较" target="_blank">SpringMVC和Struts2比较</a> <span class="text-muted">杨白白</span> <a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a> <div>1. 入口 spring mvc的入口是servlet,而struts2是filter(这里要指出,filter和servlet是不同的。以前认为filter是servlet的一种特殊),这样就导致了二者的机制不同,这里就牵涉到servlet和filter的区别了。 参见:http://blog.csdn.net/zs15932616453/article/details/8832343 2</div> </li> <li><a href="/article/789.htm" title="refuse copy, lazy girl!" target="_blank">refuse copy, lazy girl!</a> <span class="text-muted">小桔子</span> <a class="tag" taget="_blank" href="/search/copy/1.htm">copy</a> <div>       妹妹坐船头啊啊啊啊!都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料,结果查到了人家写得完完整整的。我清楚的认识到: 1.那是我自己觉得写不出的高度 2.如果直接拿来用,很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子,都不想写了今儿个,留着作参考吧!拒绝大抄特抄,慢慢一点点写!   </div> </li> <li><a href="/article/916.htm" title="apache与php整合" target="_blank">apache与php整合</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/php+apache+web/1.htm">php apache web</a> <div>一  apache web服务器 1 apeche web服务器的安装   1)下载Apache web服务器   2)配置域名(如果需要使用要在DNS上注册)   3)测试安装访问http://localhost/验证是否安装成功 2 apache管理   1)service.msc进行图形化管理   2)命令管理,配</div> </li> <li><a href="/article/1043.htm" title="Maven常用内置变量" target="_blank">Maven常用内置变量</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al</div> </li> <li><a href="/article/1170.htm" title="java的类和对象" target="_blank">java的类和对象</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/JAVA%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1+%E7%B1%BB+%E5%AF%B9%E8%B1%A1/1.htm">JAVA面向对象 类 对象</a> <div>java中的类:     java是面向对象的语言,解决问题的核心就是将问题看成是一个类,使用类来解决   java使用 class 类名   来创建类 ,在Java中类名要求和构造方法,Java的文件名是一样的   创建一个A类: class A{ }   java中的类:将某两个事物有联系的属性包装在一个类中,再通</div> </li> <li><a href="/article/1297.htm" title="JS控制页面输入框为只读" target="_blank">JS控制页面输入框为只读</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>在WEB应用开发当中,增、删除、改、查功能必不可少,为了减少以后维护的工作量,我们一般都只做一份页面,通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来,实际上就是查看的过程,唯一的区别是修改时,页面上所有的信息能修改,而查看页面上的信息不能修改。因此完全可以将其合并,但通过前端JS将查看页面的所有信息控制为只读,在信息量非常大时,就比较麻烦。   </div> </li> <li><a href="/article/1424.htm" title="AngularJS与服务器交互" target="_blank">AngularJS与服务器交互</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/%24http/1.htm">$http</a> <div>        对于AJAX应用(使用XMLHttpRequests)来说,向服务器发起请求的传统方式是:获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码,最后处理服务端的响应。整个过程示例如下: var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange</div> </li> <li><a href="/article/1551.htm" title="[Maven学习笔记八]Maven常用插件应用" target="_blank">[Maven学习笔记八]Maven常用插件应用</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>常用插件及其用法位于:http://maven.apache.org/plugins/   1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin           1. Jetty Pl</div> </li> <li><a href="/article/1678.htm" title="【Hive六】Hive用户自定义函数(UDF)" target="_blank">【Hive六】Hive用户自定义函数(UDF)</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%87%BD%E6%95%B0/1.htm">自定义函数</a> <div>1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce,提供HQL查询的数据仓库。Hive是一个很开放的系统,很多内容都支持用户定制,包括: 文件格式:Text File,Sequence File 内存中的数据格式: Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本:不管什么</div> </li> <li><a href="/article/1805.htm" title="杀掉nginx进程后丢失nginx.pid,如何重新启动nginx" target="_blank">杀掉nginx进程后丢失nginx.pid,如何重新启动nginx</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/nginx+%E9%87%8D%E5%90%AF+pid%E4%B8%A2%E5%A4%B1/1.htm">nginx 重启 pid丢失</a> <div>nginx进程被意外关闭,使用nginx -s reload重启时报如下错误:nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了,下一次再开启nginx -s reload时无法启动解决办法:nginx -s reload 只是用来告诉运行中的ng</div> </li> <li><a href="/article/1932.htm" title="UI设计中我们为什么需要设计动效" target="_blank">UI设计中我们为什么需要设计动效</a> <span class="text-muted">brotherlamp</span> <a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/ui%E6%95%99%E7%A8%8B/1.htm">ui教程</a><a class="tag" taget="_blank" href="/search/ui%E8%A7%86%E9%A2%91/1.htm">ui视频</a><a class="tag" taget="_blank" href="/search/ui%E8%B5%84%E6%96%99/1.htm">ui资料</a><a class="tag" taget="_blank" href="/search/ui%E8%87%AA%E5%AD%A6/1.htm">ui自学</a> <div>随着国际大品牌苹果和谷歌的引领,最近越来越多的国内公司开始关注动效设计了,越来越多的团队已经意识到动效在产品用户体验中的重要性了,更多的UI设计师们也开始投身动效设计领域。 但是说到底,我们到底为什么需要动效设计?或者说我们到底需要什么样的动效?做动效设计也有段时间了,于是尝试用一些案例,从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯,就是让用户更加爽更加爽的用你的产品。 </div> </li> <li><a href="/article/2059.htm" title="Spring中JdbcDaoSupport的DataSource注入问题" target="_blank">Spring中JdbcDaoSupport的DataSource注入问题</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>参考以下两篇文章: http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin</div> </li> <li><a href="/article/2186.htm" title="数据库连接池的工作原理" target="_blank">数据库连接池的工作原理</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">数据库连接池</a> <div>       随着信息技术的高速发展与广泛应用,数据库技术在信息技术领域中的位置越来越重要,尤其是网络应用和电子商务的迅速发展,都需要数据库技术支持动 态Web站点的运行,而传统的开发模式是:首先在主程序(如Servlet、Beans)中建立数据库连接;然后进行SQL操作,对数据库中的对象进行查 询、修改和删除等操作;最后断开数据库连接。使用这种开发模式,对</div> </li> <li><a href="/article/2313.htm" title="java 关键字" target="_blank">java 关键字</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> 关键字是事先定义的,有特别意义的标识符,有时又叫保留字。对于保留字,用户只能按照系统规定的方式使用,不能自行定义。 Java中的关键字按功能主要可以分为以下几类:    (1)访问修饰符       public,private,protected       p</div> </li> <li><a href="/article/2440.htm" title="Hive中的排序语法" target="_blank">Hive中的排序语法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/order+by/1.htm">order by</a><a class="tag" taget="_blank" href="/search/DISTRIBUTE+BY/1.htm">DISTRIBUTE BY</a><a class="tag" taget="_blank" href="/search/sort+by/1.htm">sort by</a> <div>Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序,这意味着所有的数据会传送到一个Reduce任务上,这样会导致在大数量的情况下,花费大量时间。 与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下,必须指定 limit 否则执行会报错。</div> </li> <li><a href="/article/2567.htm" title="单态设计模式" target="_blank">单态设计模式</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>  单例模式(Singleton)用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。 使用单例模式生成一个对象后,该对象可以被其它众多对象所使用。 <?phpclass Example{    // 保存类实例在此属性中    private static&</div> </li> <li><a href="/article/2694.htm" title="svn locked" target="_blank">svn locked</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/Lock/1.htm">Lock</a> <div>post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a </div> </li> <li><a href="/article/2821.htm" title=" ARM寄存器学习" target="_blank"> ARM寄存器学习</a> <span class="text-muted">e200702084</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/F%23/1.htm">F#</a> <div>无论是学习哪一种处理器,首先需要明确的就是这种处理器的寄存器以及工作模式。     ARM有37个寄存器,其中31个通用寄存器,6个状态寄存器。 1、不分组寄存器(R0-R7)     不分组也就是说说,在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时,由于不同的处理器模式使用一个名字相同的物理寄存器,就是</div> </li> <li><a href="/article/2948.htm" title="常用编码资料" target="_blank">常用编码资料</a> <span class="text-muted">gengzg</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81/1.htm">编码</a> <div> List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) { </div> </li> <li><a href="/article/3075.htm" title="进程 vs. 线程" target="_blank">进程 vs. 线程</a> <span class="text-muted">hongtoushizi</span> <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%9B%E7%A8%8B/1.htm">进程</a> <div>我们介绍了多进程和多线程,这是实现多任务最常用的两种方式。现在,我们来讨论一下这两种方式的优缺点。 首先,要实现多任务,通常我们会设计Master-Worker模式,Master负责分配任务,Worker负责执行任务,因此,多任务环境下,通常是一个Master,多个Worker。 如果用多进程实现Master-Worker,主进程就是Master,其他进程就是Worker。 如果用多线程实现</div> </li> <li><a href="/article/3202.htm" title="Linux定时Job:crontab -e 与 /etc/crontab 的区别" target="_blank">Linux定时Job:crontab -e 与 /etc/crontab 的区别</a> <span class="text-muted">Josh_Persistence</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/crontab/1.htm">crontab</a> <div>一、linux中的crotab中的指定的时间只有5个部分:* * * * * 分别表示:分钟,小时,日,月,星期,具体说来: 第一段 代表分钟 0—59 第二段 代表小时 0—23 第三段 代表日期 1—31 第四段 代表月份 1—12 第五段 代表星期几,0代表星期日 0—6   如: */1 * * * *   每分钟执行一次。 * </div> </li> <li><a href="/article/3329.htm" title="KMP算法详解" target="_blank">KMP算法详解</a> <span class="text-muted">hm4123660</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/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%AD%97%E7%AC%A6%E4%B8%B2/1.htm">字符串</a><a class="tag" taget="_blank" href="/search/KMP/1.htm">KMP</a> <div>     字符串模式匹配我们相信大家都有遇过,然而我们也习惯用简单匹配法(即Brute-Force算法),其基本思路就是一个个逐一对比下去,这也是我们大家熟知的方法,然而这种算法的效率并不高,但利于理解。       假设主串s="ababcabcacbab",模式串为t="</div> </li> <li><a href="/article/3456.htm" title="枚举类型的单例模式" target="_blank">枚举类型的单例模式</a> <span class="text-muted">zhb8015</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a> <div>E.编写一个包含单个元素的枚举类型[极推荐]。代码如下: public enum MaYun {himself; //定义一个枚举的元素,就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候:/** himself = MaYun() {*</div> </li> <li><a href="/article/3583.htm" title="Kafka+Storm+HDFS" target="_blank">Kafka+Storm+HDFS</a> <span class="text-muted">ssydxa219</span> <a class="tag" taget="_blank" href="/search/storm/1.htm">storm</a> <div>cd /myhome/usr/stormbin/storm nimbus &amp;bin/storm supervisor &amp;bin/storm ui &amp;Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk</div> </li> <li><a href="/article/3710.htm" title="Java获取本地服务器的IP" target="_blank">Java获取本地服务器的IP</a> <span class="text-muted">中华好儿孙</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E8%8E%B7%E5%8F%96%E6%9C%8D%E5%8A%A1%E5%99%A8ip%E5%9C%B0%E5%9D%80/1.htm">获取服务器ip地址</a> <div> System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo</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>