http实现文件分片下载

文章目录

    • 检测是否支持
    • HTTP Range 语法
    • Range请求cURL示例
      • 单一范围
      • 多重范围
      • 条件式分片请求
    • Range分片请求的响应
    • 文件整体下载
    • 文件分片下载
      • 文本下载
      • 图片下载
      • 封装下载方法

HTTP分片异步下载是一种下载文件的技术,它允许将一个大文件分成多个小块(分片),然后分别下载这些分片,从而实现更快速、稳定的下载过程。这种技术常用于大文件的下载,例如视频、游戏、软件等。或者与文件下载的断点续传功能搭配使用时非常有用。

比如当你正在看大片时,网络断了,你需要继续看的时候,文件服务器不支持断点的话,则你需要重新等待下载这个大片,才能继续观看。而支持HTTP Range的话,客户端就会记录了之前已经看过的视频文件范围,网络恢复之后,则向服务器发送读取剩余Range的请求,服务端只需要发送客户端请求的那部分内容,而不用整个视频文件发送回客户端,以此节省网络带宽,带来更流畅的用户体验。

检测是否支持

检测服务器端是否支持分片请求。

假如在响应头中存在 Accept-Ranges(并且它的值不为none),那么表示该服务器支持分片请求。例如,你可以使用 cURL 发送一个 HEAD 请求来进行检测。

curl -I https://xxx.jpg

HTTP/1.1 200 OK
...
Accept-Ranges: bytes
Content-Length: 146515

在上面的响应中, Accept-Ranges: bytes 表示界定范围的单位是 bytes。这里 Content-Length 也是有效信息,因为它提供了要检索的图片的完整大小。

如果站点未响应 Accept-Ranges,那么它们有可能不支持分片请求。一些站点会明确将其值设置为 none,以此来表明不支持。在这种情况下,某些应用的下载管理器会将暂停按钮禁用。

curl -I https://xxx.movie

HTTP/1.1 200 OK
...
Accept-Ranges: none

HTTP Range 语法

Range是一个HTTP请求头,告知服务器要返回文件的哪一部分,即:哪个区间范围(字节)的数据。

Range: <unit>=<range-start>-
Range: <unit>=<range-start>-<range-end>
Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end>
Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end>, <range-start>-<range-end>
  • :范围所采用的单位,通常是字节(bytes)

  • :一个整数,表示在特定单位下,范围的起始值。(下标从0开始)

  • :一个整数,表示在特定单位下,范围的结束值。这个值是可选的,如果不存在,表示此范围一直延伸到文档结束。

Range: bytes=200-1000 就是下载 200-1000 字节的内容(两边都是闭区间),服务端返回 206 的状态码,并带上这部分内容。

可以省略右边部分,代表一直到结束:Range: bytes=200-

也可以省略左边部分,代表从头开始:Range: bytes=-1000

而且可以请求多段 range,服务端会返回多段内容:Range: bytes=200-1000, 2000-6576, 19000-

Range请求cURL示例

从服务器端请求特定的范围。

单一范围

我们可以请求资源的某一部分。这次我们依然用 cURL 来进行测试。-H 选项可以在请求中追加一个首部行,在这个例子中,是用 Range 首部来请求图片文件的前 1024 个字节。

curl http://xxx.jpg -i -H "Range: bytes=0-1023"

这样生成的请求如下:

GET /xxx.jpg HTTP/1.1
Host: i.imgur.com
Range: bytes=0-1023

服务器端会返回状态码为 206 Partial Content 的响应:

HTTP/1.1 206 Partial Content
Content-Range: bytes 0-1023/146515
Content-Length: 1024
...
(binary content)

在这里,Content-Length 首部现在用来表示先前请求范围的大小(而不是整张图片的大小)。Content-Range 响应首部则表示这一部分内容在整个资源中所处的位置。

多重范围

Range 头部也支持一次请求文档的多个部分。请求范围用一个逗号分隔开。

curl https://xxx.jpg -i -H "Range: bytes=0-50, 100-150"

服务器返回 206 Partial Content 状态码,Content-Type:multipart/byteranges,boundary=3d6b6a416f9b5 头部。

  • Content-Type:multipart/byteranges 表示这个响应有多个 byterange。
  • 每一部分 byterange 都有他自己的 Content-type 头部和 Content-Range,并且使用 boundary 参数对 body 进行划分。
HTTP/1.1 206 Partial Content
Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
Content-Length: 282

--3d6b6a416f9b5
Content-Type: text/html
Content-Range: bytes 0-50/1270




    Example Do
--3d6b6a416f9b5
Content-Type: text/html
Content-Range: bytes 100-150/1270

eta http-equiv="Content-type" content="text/html; c
--3d6b6a416f9b5--
</code></pre> 
  <h3>条件式分片请求</h3> 
  <p>当(中断之后)重新开始请求更多资源片段的时候,必须确保自从上一个片段被接收之后该资源没有进行过修改。</p> 
  <p><code>The If-Range</code> 请求首部可以用来生成条件式分片请求:</p> 
  <ul> 
   <li>假如条件满足的话,条件请求就会生效,服务器会返回状态码为 206 Partial 的响应,以及相应的消息主体。</li> 
   <li>假如条件未能得到满足,那么就会返回状态码为 200 OK 的响应,同时返回整个资源。</li> 
  </ul> 
  <p>该首部可以与 <code>Last-Modified</code> 验证器或者 <code>ETag</code> 一起使用,但是二者不能同时使用。</p> 
  <pre><code class="prism language-cmd">If-Range: Wed, 21 Oct 2015 07:28:00 GMT
</code></pre> 
  <h2>Range分片请求的响应</h2> 
  <p>与分片请求相关的有三种状态:</p> 
  <ul> 
   <li>在请求成功的情况下,服务器会返回 <code>206 Partial Content</code> 状态码。请求多个部分,服务器会以 <code>multipart</code> 文件的形式将其返回。</li> 
   <li>在请求的范围越界的情况下(范围值超过了资源的大小),服务器会返回 <code>416 Requested Range Not Satisfiable</code> (请求的范围无法满足)状态码。</li> 
   <li>在不支持分片请求的情况下,服务器会返回 <code>200 OK</code> 状态码。</li> 
  </ul> 
  <h2>文件整体下载</h2> 
  <p>以下实例采用node作为后端。</p> 
  <p>下载文件是一个常见的需求,只要服务端设置 <code>Content-Disposition</code> 为 <code>attachment</code> 就可以。</p> 
  <p>比如这样:</p> 
  <pre><code class="prism language-javascript"><span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'express'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/download'</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    res<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">'Content-Disposition'</span><span class="token punctuation">,</span><span class="token string">'attachment; filename="test.txt"'</span><span class="token punctuation">)</span>
    res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'donwloadfileContent'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">server is running at port 3000</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
  <p>设置 <code>Cotent-Disposition</code> 为 <code>attachment</code>,指定 <code>filename</code>。</p> 
  <p>然后 html 里加一个 a 标签:</p> 
  <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://localhost:3000/download<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>download<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre> 
  <ol> 
   <li>下载<code>http-server</code> npm包,在当前文件目录运行<code>http-server</code>命令跑起静态服务器。</li> 
   <li>点击链接就可以下载。若需要在服务器端js文件修改后动态生效,则可以安装<code>nodemon</code> npm包,进而执行<code>nodemon index.js</code>命令。</li> 
  </ol> 
  <p>当文件过大,则需要对文件进行分片来下载,下面使用案例进行讲解。</p> 
  <h2>文件分片下载</h2> 
  <h3>文本下载</h3> 
  <p>添加这样一个路由:</p> 
  <pre><code class="prism language-javascript">app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/downloadRange'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    res<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">'Access-Control-Allow-Origin'</span><span class="token punctuation">,</span> <span class="token string">'*'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    res<span class="token punctuation">.</span><span class="token function">download</span><span class="token punctuation">(</span><span class="token string">'downloadRange.txt'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">acceptRanges</span><span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
  <p>downloadRange.txt与index.js在同级目录下。</p> 
  <p>设置允许跨域请求,因为前端起的静态服务为http://localhost:8080,而node服务为http://localhost:3000,非同域。</p> 
  <p><code>res.download</code> 是读取文件内容返回,<code>acceptRanges</code> 选项为 true 就是会处理 range 请求(其实默认就是 true)。</p> 
  <p>文件 downloadRange.txt 的内容是这样的:</p> 
  <pre><code class="prism language-txt">0123456789
</code></pre> 
  <p>然后在 html 里访问一下这个接口:</p> 
  <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
        <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'http://localhost:3000/downloadRange'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">Range</span><span class="token operator">:</span> <span class="token string">'bytes=0-4'</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> res<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
            <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token comment">// 输出01234</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre> 
  <p>访问页面,可以看到返回的是 206 的状态码!</p> 
  <p><a href="http://img.e-com-net.com/image/info8/ed267ef9762745789a37cdb60cfa09d0.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/ed267ef9762745789a37cdb60cfa09d0.png" alt="http实现文件分片下载_第1张图片" width="471" height="708" style="border:1px solid black;"></a></p> 
  <p>这时候 <code>Content-Length</code> 就代表返回的内容的长度。</p> 
  <p>还有个 <code>Content-Range</code> 代表当前 range 的长度以及总长度。</p> 
  <p>此时响应内容为01234</p> 
  <p><a href="http://img.e-com-net.com/image/info8/fd32b028778a4db9a59dbaf8cf926fef.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/fd32b028778a4db9a59dbaf8cf926fef.png" alt="" width="481" height="91"></a></p> 
  <p>当然,你也可以访问 5 以后的内容</p> 
  <pre><code class="prism language-javascript"><span class="token literal-property property">Range</span><span class="token operator">:</span> <span class="token string">'bytes=5-'</span>
</code></pre> 
  <p>响应头内容是这样的:</p> 
  <pre><code class="prism language-cmd">Content-Length: 5
Content-Range: bytes 5-9/10
</code></pre> 
  <p>返回的内容是这样的:</p> 
  <pre><code class="prism language-cmd">56789
</code></pre> 
  <p>这俩连接起来就是整个文件的内容。这样就实现了简易版的断点续传。</p> 
  <p>我们再来试试如果超出 range 会怎么样:</p> 
  <pre><code class="prism language-javascript"><span class="token literal-property property">Range</span><span class="token operator">:</span> <span class="token string">'bytes=50-60'</span><span class="token punctuation">,</span>
</code></pre> 
  <p>请求 50-60 字节的内容,这时候响应头是这样的:</p> 
  <pre><code class="prism language-cmd">Status Code: 416 Range Not Satisfiable
</code></pre> 
  <p>返回的是 416 状态码,代表 range 不合法。</p> 
  <p>Range 不是还可以设置多段么?多段内容是怎么返回的呢?</p> 
  <p>我们来试一下:</p> 
  <pre><code class="prism language-javascript"><span class="token literal-property property">Range</span><span class="token operator">:</span> <span class="token string">'bytes=0-1, 3-4, 6-'</span>
</code></pre> 
  <p>重新访问一下,这时候报了一个跨域的错误,说是发送预检请求失败。</p> 
  <pre><code class="prism language-text">Access to fetch at 'http://localhost:3000/downloadRange' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
</code></pre> 
  <p>浏览器会在三种情况下发送预检(preflight)请求:</p> 
  <ul> 
   <li>用到了非 GET、POST 的请求方法,比如 PUT、DELETE 等,会发预检请求看看服务端是否支持</li> 
   <li>用到了一些非常规请求头,比如用到了 Content-Type,会发预检请求看看服务端是否支持</li> 
   <li>用到了自定义 header,会发预检请求</li> 
  </ul> 
  <p>为啥 Range 头单个 range 不会触发预检请求,而多个 range 就触发了呢?</p> 
  <p>因为多个 range 的时候返回的 Content-Type 是不一样的,是 <code>multipart/byteranges</code> 类型,比较特殊。</p> 
  <p>预检请求是 <code>options</code> 请求,那我们就支持一下:</p> 
  <pre><code class="prism language-javascript">app<span class="token punctuation">.</span><span class="token function">options</span><span class="token punctuation">(</span><span class="token string">'/downloadRange'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    res<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">'Access-Control-Allow-Origin'</span><span class="token punctuation">,</span> <span class="token string">'*'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    res<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">'Access-Control-Allow-Headers'</span><span class="token punctuation">,</span> <span class="token string">'Range'</span><span class="token punctuation">)</span>
    res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
  <p>然后重新访问,这时候你会发现虽然状态码为200,且返回的是整个内容!</p> 
  <p>这是因为 express 只做了单 range 的支持,多段 range 可能它觉得没必要支持吧。</p> 
  <p>毕竟你发多个单 range 请求就能达到一样的效果。</p> 
  <h3>图片下载</h3> 
  <p>下面我们就用 range 来实现下文件的分片下载,最终合并成一个文件的功能。</p> 
  <p>我们来下载一个图片吧,分成两块下载,然后下载完合并起来。</p> 
  <p>就用这个图片好了:</p> 
  <p><a href="http://img.e-com-net.com/image/info8/d260975d8478492583619495d789907f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d260975d8478492583619495d789907f.jpg" alt="http实现文件分片下载_第2张图片" width="650" height="189" style="border:1px solid black;"></a></p> 
  <p>node代码修改如下</p> 
  <pre><code class="prism language-javascript">app<span class="token punctuation">.</span><span class="token function">options</span><span class="token punctuation">(</span><span class="token string">'/downloadPicRange'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    res<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">'Access-Control-Allow-Origin'</span><span class="token punctuation">,</span> <span class="token string">'*'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    res<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">'Access-Control-Allow-Headers'</span><span class="token punctuation">,</span> <span class="token string">'Range'</span><span class="token punctuation">)</span>
    res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/downloadPicRange'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    res<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">'Access-Control-Allow-Origin'</span><span class="token punctuation">,</span> <span class="token string">'*'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    res<span class="token punctuation">.</span><span class="token function">download</span><span class="token punctuation">(</span><span class="token string">'1681859964629.png'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">acceptRanges</span><span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
  <p>我们写下分片下载的代码,就分两段:这个图片是 56585 字节,也就是大概55.2k,那我们就分成 0-20000 和 20001- 两段:</p> 
  <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
        <span class="token keyword">const</span> p1 <span class="token operator">=</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'http://localhost:3000/downloadPicRange'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">Range</span><span class="token operator">:</span> <span class="token string">'bytes=0-20000'</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        
        <span class="token keyword">const</span> p2 <span class="token operator">=</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'http://localhost:3000/downloadPicRange'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">Range</span><span class="token operator">:</span> <span class="token string">'bytes=20001-'</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>

        Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>p1<span class="token punctuation">,</span> p2<span class="token punctuation">]</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
           <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">resBody</span> <span class="token operator">=></span> resBody<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
            <span class="token keyword">const</span> completeBlob <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span>res<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> res<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type<span class="token punctuation">}</span><span class="token punctuation">)</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>completeBlob<span class="token punctuation">)</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>completeBlob<span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre> 
  <p>两个响应头Content-Range分别是这样的:</p> 
  <pre><code class="prism language-text">Content-Range: bytes 0-20000/56585
</code></pre> 
  <pre><code class="prism language-text">Content-Range: bytes 20001-56584/56585
</code></pre> 
  <p>第一个响应还能看到图片的预览,只能看到上部分:</p> 
  <p></p> 
  <p>然后我们要把两段给拼起来,怎么拼呢?</p> 
  <ol> 
   <li>这里由于使用fetch进行请求,我们可以直接获取响应内容的文件对象为<code>blob</code>类型。</li> 
   <li>然后将两段blob类型文件对象,合并到新的blob文件对象中。</li> 
   <li>通过<code>URL.createObjectURL</code>获取文件对象的资源在本地的链接,将其粘贴到浏览器中,可以看到组合的图片正常显示。</li> 
  </ol> 
  <h3>封装下载方法</h3> 
  <p>当然,一般不会这么写死来用,我们可以封装一个通用的文件分片下载工具。</p> 
  <p>但分片之前需要拿到文件的大小,所以要增加一个接口,调用这个接口返回文件大小:</p> 
  <pre><code class="prism language-javascript"><span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/length'</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    res<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">'Access-Control-Allow-Origin'</span><span class="token punctuation">,</span> <span class="token string">'*'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">''</span> <span class="token operator">+</span> fs<span class="token punctuation">.</span><span class="token function">statSync</span><span class="token punctuation">(</span><span class="token string">'./1681859964629.png'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>size<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
  <p>然后我们来做分片:</p> 
  <pre><code class="prism language-javascript"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">fileDownloadRange</span><span class="token punctuation">(</span><span class="token parameter">path<span class="token punctuation">,</span> size<span class="token punctuation">,</span> chunkSize</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> chunkNum <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span>size <span class="token operator">/</span> chunkSize<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> downloadTask <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> chunkNum<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> rangeStart <span class="token operator">=</span> chunkSize <span class="token operator">*</span> <span class="token punctuation">(</span>i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">const</span> rangeEnd <span class="token operator">=</span> chunkSize <span class="token operator">*</span> i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span>

        downloadTask<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>
            <span class="token function">fetch</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                    <span class="token literal-property property">Range</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">bytes=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>rangeStart<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>rangeEnd<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>downloadTask<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">task</span> <span class="token operator">=></span> task<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> res<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p>这部分代码不难理解:</p> 
  <p>首先根据 chunk 大小来计算一共几个 chunk,通过 <code>Math.ceil</code> 向上取整。</p> 
  <p>然后计算每个 chunk 的 range,构造下载任务的 promise。</p> 
  <p><code>Promise.all</code> 等待所有下载任务完成,并获取下载内容为<code>blob</code>文件类型</p> 
  <p>我们来验证下:</p> 
  <pre><code class="prism language-javascript"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">fileDownloadRange</span><span class="token punctuation">(</span><span class="token parameter">path<span class="token punctuation">,</span> size<span class="token punctuation">,</span> chunkSize</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> chunkNum <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span>size <span class="token operator">/</span> chunkSize<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> downloadTask <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> chunkNum<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> rangeStart <span class="token operator">=</span> chunkSize <span class="token operator">*</span> <span class="token punctuation">(</span>i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">const</span> rangeEnd <span class="token operator">=</span> chunkSize <span class="token operator">*</span> i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span>

        downloadTask<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>
            <span class="token function">fetch</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                    <span class="token literal-property property">Range</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">bytes=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>rangeStart<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>rangeEnd<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>downloadTask<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">task</span> <span class="token operator">=></span> task<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> res<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> fileLength <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'http://localhost:3000/length'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> res<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token keyword">const</span> blobArr <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fileDownloadRange</span><span class="token punctuation">(</span><span class="token string">'http://localhost:3000/downloadPicRange'</span><span class="token punctuation">,</span> fileLength<span class="token punctuation">,</span> <span class="token number">15000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> fileCompleted <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span>blobArr<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> blobArr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>fileCompleted<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1699549036547223552"></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">你可能感兴趣的:(HTTP,http,网络协议,网络,前端)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1835511912843014144.htm"
                           title="理解Gunicorn:Python WSGI服务器的基石" target="_blank">理解Gunicorn:Python WSGI服务器的基石</a>
                        <span class="text-muted">范范0825</span>
<a class="tag" taget="_blank" href="/search/ipython/1.htm">ipython</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
                        <div>理解Gunicorn:PythonWSGI服务器的基石介绍Gunicorn,全称GreenUnicorn,是一个为PythonWSGI(WebServerGatewayInterface)应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具,Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置,帮助初学者快速上手。1.什么是Gunico</div>
                    </li>
                    <li><a href="/article/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/1835509770287673344.htm"
                           title="swagger访问路径" target="_blank">swagger访问路径</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a>
                        <div>Swagger2.x版本访问地址:http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口,通常为8080。{context-path}是你的应用上下文路径,如果应用部署在根路径下,则为空。Swagger3.x版本对于Swagger3.x版本(也称为OpenAPI3)访问地址:http://{ip</div>
                    </li>
                    <li><a href="/article/1835504218178416640.htm"
                           title="Google earth studio 简介" target="_blank">Google earth studio 简介</a>
                        <span class="text-muted">陟彼高冈yu</span>
<a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a>
                        <div>GoogleEarthStudio是一个基于Web的动画工具,专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库,使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具,专为创作使用G</div>
                    </li>
                    <li><a href="/article/1835502451877310464.htm"
                           title="基于社交网络算法优化的二维最大熵图像分割" target="_blank">基于社交网络算法优化的二维最大熵图像分割</a>
                        <span class="text-muted">智能算法研学社(Jack旭)</span>
<a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E4%BC%98%E5%8C%96%E7%AE%97%E6%B3%95%E5%BA%94%E7%94%A8/1.htm">智能优化算法应用</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E5%83%8F%E5%88%86%E5%89%B2/1.htm">图像分割</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>智能优化算法应用:基于社交网络优化的二维最大熵图像阈值分割-附代码文章目录智能优化算法应用:基于社交网络优化的二维最大熵图像阈值分割-附代码1.前言2.二维最大熵阈值分割原理3.基于社交网络优化的多阈值分割4.算法结果:5.参考文献:6.Matlab代码摘要:本文介绍基于最大熵的图像分割,并且应用社交网络算法进行阈值寻优。1.前言阅读此文章前,请阅读《图像分割:直方图区域划分及信息统计介绍》htt</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/1835499052125483008.htm"
                           title="Git常用命令-修改远程仓库地址" target="_blank">Git常用命令-修改远程仓库地址</a>
                        <span class="text-muted">猿大师</span>
<a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>查看远程仓库地址gitremote-v返回结果originhttps://git.coding.net/*****.git(fetch)originhttps://git.coding.net/*****.git(push)修改远程仓库地址gitremoteset-urloriginhttps://git.coding.net/*****.git先删除后增加远程仓库地址gitremotermori</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/1835498349264990208.htm"
                           title="2023-04-17|篮球女孩" target="_blank">2023-04-17|篮球女孩</a>
                        <span class="text-muted">长一木</span>

                        <div>1小学抑或初中阶段,在课外书了解到她的故事。“篮球女孩”。当时佩服她的顽强,也对生命多了一丝敬畏。今天刚好在公众号看到,长大后的“篮球女孩”。佩服之余又满是心疼。网络侵删祝那素未蒙面的女孩,未来一切顺遂。</div>
                    </li>
                    <li><a href="/article/1835497792265613312.htm"
                           title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a>
                        <span class="text-muted">加密社</span>
<a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a>
                        <div>加密社引言在Solidity合约开发过程中,事件(Events)是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更,还能够让外部系统(如前端应用)监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时,该事件会被记录在区块链的交易收据中。具体而言,事件</div>
                    </li>
                    <li><a href="/article/1835497537369370624.htm"
                           title="利用Requests Toolkit轻松完成HTTP请求" target="_blank">利用Requests Toolkit轻松完成HTTP请求</a>
                        <span class="text-muted">nseejrukjhad</span>
<a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>RequestsToolkit的力量:轻松构建HTTP请求Agent在现代软件开发中,API请求是与外部服务交互的核心。RequestsToolkit提供了一种便捷的方式,帮助开发者构建自动化的HTTP请求Agent。本文旨在详细介绍RequestsToolkit的设置、使用和潜在挑战。引言RequestsToolkit是一个强大的工具包,可用于构建执行HTTP请求的智能代理。这对于想要自动化与外</div>
                    </li>
                    <li><a href="/article/1835496780066811904.htm"
                           title="在一台Ubuntu计算机上构建Hyperledger Fabric网络" target="_blank">在一台Ubuntu计算机上构建Hyperledger Fabric网络</a>
                        <span class="text-muted">落叶无声9</span>
<a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E8%B6%85%E7%BA%A7%E8%B4%A6%E6%9C%AC/1.htm">超级账本</a><a class="tag" taget="_blank" href="/search/Hyperledger/1.htm">Hyperledger</a><a class="tag" taget="_blank" href="/search/fabric/1.htm">fabric</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/%E6%9E%84%E5%BB%BA/1.htm">构建</a><a class="tag" taget="_blank" href="/search/hyperledger/1.htm">hyperledger</a><a class="tag" taget="_blank" href="/search/fabric/1.htm">fabric</a>
                        <div>在一台Ubuntu计算机上构建HyperledgerFabric网络Hyperledgerfabric是一个开源的区块链应用程序平台,为开发基于区块链的应用程序提供了一个起点。当我们提到HyperledgerFabric网络时,我们指的是使用HyperledgerFabric的正在运行的系统。即使只使用最少数量的组件,部署Fabric网络也不是一件容易的事。Fabric社区创建了一个名为Cello</div>
                    </li>
                    <li><a href="/article/1835496402042580992.htm"
                           title="GitHub上克隆项目" target="_blank">GitHub上克隆项目</a>
                        <span class="text-muted">bigbig猩猩</span>
<a class="tag" taget="_blank" href="/search/github/1.htm">github</a>
                        <div>从GitHub上克隆项目是一个简单且直接的过程,它允许你将远程仓库中的项目复制到你的本地计算机上,以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南,帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前,你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统,用于跟踪和管理代码变更。你可以从Git的官方网站(https://git-scm.</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/1835493373906087936.htm"
                           title="libyuv之linux编译" target="_blank">libyuv之linux编译</a>
                        <span class="text-muted">jaronho</span>
<a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</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><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a>
                        <div>文章目录一、下载源码二、编译源码三、注意事项1、银河麒麟系统(aarch64)(1)解决armv8-a+dotprod+i8mm指令集支持问题(2)解决armv9-a+sve2指令集支持问题一、下载源码到GitHub网站下载https://github.com/lemenkov/libyuv源码,或者用直接用git克隆到本地,如:gitclonehttps://github.com/lemenko</div>
                    </li>
                    <li><a href="/article/1835493247179386880.htm"
                           title="Faiss Tips:高效向量搜索与聚类的利器" target="_blank">Faiss Tips:高效向量搜索与聚类的利器</a>
                        <span class="text-muted">焦习娜Samantha</span>

                        <div>FaissTips:高效向量搜索与聚类的利器faiss_tipsSomeusefultipsforfaiss项目地址:https://gitcode.com/gh_mirrors/fa/faiss_tips项目介绍Faiss是由FacebookAIResearch开发的一个用于高效相似性搜索和密集向量聚类的库。它支持多种硬件平台,包括CPU和GPU,能够在海量数据集上实现快速的近似最近邻搜索(AN</div>
                    </li>
                    <li><a href="/article/1835491859351302144.htm"
                           title="Python 实现图片裁剪(附代码) | Python工具" target="_blank">Python 实现图片裁剪(附代码) | Python工具</a>
                        <span class="text-muted">剑客阿良_ALiang</span>

                        <div>前言本文提供将图片按照自定义尺寸进行裁剪的工具方法,一如既往的实用主义。环境依赖ffmpeg环境安装,可以参考我的另一篇文章:windowsffmpeg安装部署_阿良的博客-CSDN博客本文主要使用到的不是ffmpeg,而是ffprobe也在上面这篇文章中的zip包中。ffmpy安装:pipinstallffmpy-ihttps://pypi.douban.com/simple代码不废话了,上代码</div>
                    </li>
                    <li><a href="/article/1835491354004779008.htm"
                           title="【华为OD技术面试真题 - 技术面】-测试八股文真题题库(1)" target="_blank">【华为OD技术面试真题 - 技术面】-测试八股文真题题库(1)</a>
                        <span class="text-muted">算法大师</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>华为OD面试真题精选专栏:华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.黑盒测试和白盒测试的区别2.假设我们公司现在开发一个类似于微信的软件1.0版本,现在要你测试这个功能:打开聊天窗口,输入文本,限制字数在200字以内。问你怎么提取测试点。功能测试性能测试安全性测试可用性测试跨平台兼容性测试网络环境测试3.接口测试的工具你了解哪些</div>
                    </li>
                    <li><a href="/article/1835486185015832576.htm"
                           title="【无标题】达瓦达瓦" target="_blank">【无标题】达瓦达瓦</a>
                        <span class="text-muted">JhonKI</span>
<a class="tag" taget="_blank" href="/search/%E8%80%83%E7%A0%94/1.htm">考研</a>
                        <div>博客主页:https://blog.csdn.net/2301_779549673欢迎点赞收藏⭐留言如有错误敬请指正!本文由JohnKi原创,首发于CSDN未来很长,值得我们全力奔赴更美好的生活✨文章目录前言111️‍111❤️111111111111111总结111前言111骗骗流量券,嘿嘿111111111111111111111111111️‍111❤️111111111111111总结11</div>
                    </li>
                    <li><a href="/article/1835486185468817408.htm"
                           title="上图为是否色发" target="_blank">上图为是否色发</a>
                        <span class="text-muted">JhonKI</span>
<a class="tag" taget="_blank" href="/search/%E8%80%83%E7%A0%94/1.htm">考研</a>
                        <div>博客主页:https://blog.csdn.net/2301_779549673欢迎点赞收藏⭐留言如有错误敬请指正!本文由JohnKi原创,首发于CSDN未来很长,值得我们全力奔赴更美好的生活✨文章目录前言111️‍111❤️111111111111111总结111前言111骗骗流量券,嘿嘿111111111111111111111111111️‍111❤️111111111111111总结11</div>
                    </li>
                    <li><a href="/article/1835484742221393920.htm"
                           title="《在战“疫”中成长致敬生活》观后感" target="_blank">《在战“疫”中成长致敬生活》观后感</a>
                        <span class="text-muted">梅子刘的刀</span>

                        <div>(作者:周晨)今天上午,我看了“我是接班人”网络大课堂《在战役中成长致敬生活》。有很多人拿出自己攒下的钱,默默地捐给了武汉,有几千块钱的、有几万块钱的,也有十几万块钱的。连小朋友也把自己的压岁钱捐给了武汉。有名环卫工人把自己五年的积蓄全部捐给了武汉。有名外卖小哥为医护人员买鞋子送吃的。还有已经治愈出院的新型肺炎病人捐了400毫升的血浆。还有位叫大树的叔叔,虽然他没有钱,但是他地里有蔬菜,捐了几大卡</div>
                    </li>
                    <li><a href="/article/1835483159140069376.htm"
                           title="143234234123432" target="_blank">143234234123432</a>
                        <span class="text-muted">JhonKI</span>
<a class="tag" taget="_blank" href="/search/%E8%80%83%E7%A0%94/1.htm">考研</a>
                        <div>博客主页:https://blog.csdn.net/2301_779549673欢迎点赞收藏⭐留言如有错误敬请指正!本文由JohnKi原创,首发于CSDN未来很长,值得我们全力奔赴更美好的生活✨文章目录前言111️‍111❤️111111111111111总结111前言111骗骗流量券,嘿嘿111111111111111111111111111️‍111❤️111111111111111总结11</div>
                    </li>
                    <li><a href="/article/1835477362700021760.htm"
                           title="Python中深拷贝与浅拷贝的区别" target="_blank">Python中深拷贝与浅拷贝的区别</a>
                        <span class="text-muted">yuxiaoyu.</span>

                        <div>转自:http://blog.csdn.net/u014745194/article/details/70271868定义:在Python中对象的赋值其实就是对象的引用。当创建一个对象,把它赋值给另一个变量的时候,python并没有拷贝这个对象,只是拷贝了这个对象的引用而已。浅拷贝:拷贝了最外围的对象本身,内部的元素都只是拷贝了一个引用而已。也就是,把对象复制一遍,但是该对象中引用的其他对象我不复</div>
                    </li>
                    <li><a href="/article/1835476350190841856.htm"
                           title="ExpRe[25] bash外的其它shell:zsh和fish" target="_blank">ExpRe[25] bash外的其它shell:zsh和fish</a>
                        <span class="text-muted">tritone</span>
<a class="tag" taget="_blank" href="/search/ExpRe/1.htm">ExpRe</a><a class="tag" taget="_blank" href="/search/bash/1.htm">bash</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a>
                        <div>文章目录zsh基础配置实用特性插件`autojump`语法高亮自动补全fish优点缺点时效性本篇撰写时间为2021.12.15,由于计算机技术日新月异,博客中所有内容都有时效和版本限制,具体做法不一定总行得通,链接可能改动失效,各种软件的用法可能有修改。但是其中透露的思想往往是值得学习的。本篇前置:ExpRe[10]Ubuntu[2]准备神秘软件、备份恢复软件https://www.cnblogs</div>
                    </li>
                    <li><a href="/article/1835475963543121920.htm"
                           title="中原焦点团队网络初中级30期阴丽丽坚持分享第三百八十八次2022.10.18分享 约练次数(74) 咨询师(6) 来访者(53) 观察者(15)" target="_blank">中原焦点团队网络初中级30期阴丽丽坚持分享第三百八十八次2022.10.18分享 约练次数(74) 咨询师(6) 来访者(53) 观察者(15)</a>
                        <span class="text-muted">阴丽丽</span>

                        <div>今天是忙碌的一天,一早起来,总想着找点把事情弄完,可总也弄不完。就这样弄着吧!孩子的事,自己的事都在那里搁置着,不想做,有点欧!今天总体还不错,只是在下午起床时走神了俩小时,也算是给自己的放松吧!今日难得1.儿子乖巧、听话,努力配合,一天下来也是忙忙碌碌,这真的很难得!2.儿子今天录的视频被班主任认可,这真的很难得3.我今天早上做核酸时,自己把教案整了一下,这真的很难得</div>
                    </li>
                    <li><a href="/article/1835475216080400384.htm"
                           title="openssl+keepalived安装部署" target="_blank">openssl+keepalived安装部署</a>
                        <span class="text-muted">_小亦_</span>
<a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E9%83%A8%E7%BD%B2/1.htm">项目部署</a><a class="tag" taget="_blank" href="/search/keepalived/1.htm">keepalived</a><a class="tag" taget="_blank" href="/search/openssl/1.htm">openssl</a>
                        <div>文章目录OpenSSL安装下载地址编译安装修改系统配置版本Keepalived安装下载地址安装遇到问题安装完成配置文件keepalived运行检查运行状态查看系统日志修改服务service重新加载systemd检查配置文件语法错误OpenSSL安装下载地址考虑到后面设备可能没法连接到外网,所以采用安装包的方式进行部署,下载地址:https://www.openssl.org/source/old/</div>
                    </li>
                    <li><a href="/article/1835473957185220608.htm"
                           title="网络编程基础" target="_blank">网络编程基础</a>
                        <span class="text-muted">记得开心一点啊</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
                        <div>目录♫什么是网络编程♫Socket套接字♪什么是Socket套接字♪数据报套接字♪流套接字♫数据报套接字通信模型♪数据报套接字通讯模型♪DatagramSocket♪DatagramPacket♪实现UDP的服务端代码♪实现UDP的客户端代码♫流套接字通信模型♪流套接字通讯模型♪ServerSocket♪Socket♪实现TCP的服务端代码♪实现TCP的客户端代码♫什么是网络编程网络编程,指网络上</div>
                    </li>
                    <li><a href="/article/1835471059135066112.htm"
                           title="你可能遗漏的一些C#/.NET/.NET Core知识点" target="_blank">你可能遗漏的一些C#/.NET/.NET Core知识点</a>
                        <span class="text-muted">追逐时光者</span>
<a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/.NET/1.htm">.NET</a><a class="tag" taget="_blank" href="/search/DotNetGuide%E7%BC%96%E7%A8%8B%E6%8C%87%E5%8D%97/1.htm">DotNetGuide编程指南</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/.netcore/1.htm">.netcore</a><a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a>
                        <div>前言在这个快速发展的技术世界中,时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NETCore拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节,以帮助大家更全面地了解这些技术栈的特性和发展方向。拾遗补漏GitHub开源地址https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/D</div>
                    </li>
                    <li><a href="/article/1835470931783413760.htm"
                           title="「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验" target="_blank">「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验</a>
                        <span class="text-muted">张风捷特烈</span>
<a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</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/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
                        <div>theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言,但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里,我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站,可通过下面的链接访问https://www</div>
                    </li>
                                <li><a href="/article/114.htm"
                                       title="戴尔笔记本win8系统改装win7系统" target="_blank">戴尔笔记本win8系统改装win7系统</a>
                                    <span class="text-muted">sophia天雪</span>
<a class="tag" taget="_blank" href="/search/win7/1.htm">win7</a><a class="tag" taget="_blank" href="/search/%E6%88%B4%E5%B0%94/1.htm">戴尔</a><a class="tag" taget="_blank" href="/search/%E6%94%B9%E8%A3%85%E7%B3%BB%E7%BB%9F/1.htm">改装系统</a><a class="tag" taget="_blank" href="/search/win8/1.htm">win8</a>
                                    <div>戴尔win8 系统改装win7 系统详述  
 
第一步:使用U盘制作虚拟光驱: 
        1)下载安装UltraISO:注册码可以在网上搜索。 
        2)启动UltraISO,点击“文件”—》“打开”按钮,打开已经准备好的ISO镜像文 
</div>
                                </li>
                                <li><a href="/article/241.htm"
                                       title="BeanUtils.copyProperties使用笔记" target="_blank">BeanUtils.copyProperties使用笔记</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>BeanUtils.copyProperties VS PropertyUtils.copyProperties 
 
两者最大的区别是: 
BeanUtils.copyProperties会进行类型转换,而PropertyUtils.copyProperties不会。 
既然进行了类型转换,那BeanUtils.copyProperties的速度比不上PropertyUtils.copyProp</div>
                                </li>
                                <li><a href="/article/368.htm"
                                       title="MyEclipse中文乱码问题" target="_blank">MyEclipse中文乱码问题</a>
                                    <span class="text-muted">0624chenhong</span>
<a class="tag" taget="_blank" href="/search/MyEclipse/1.htm">MyEclipse</a>
                                    <div>一、设置新建常见文件的默认编码格式,也就是文件保存的格式。 
在不对MyEclipse进行设置的时候,默认保存文件的编码,一般跟简体中文操作系统(如windows2000,windowsXP)的编码一致,即GBK。 
在简体中文系统下,ANSI 编码代表 GBK编码;在日文操作系统下,ANSI 编码代表 JIS 编码。 
Window-->Preferences-->General -</div>
                                </li>
                                <li><a href="/article/495.htm"
                                       title="发送邮件" target="_blank">发送邮件</a>
                                    <span class="text-muted">不懂事的小屁孩</span>
<a class="tag" taget="_blank" href="/search/send+email/1.htm">send email</a>
                                    <div>  
import org.apache.commons.mail.EmailAttachment;  
import org.apache.commons.mail.EmailException;  
import org.apache.commons.mail.HtmlEmail;  
import org.apache.commons.mail.MultiPartEmail;  
</div>
                                </li>
                                <li><a href="/article/622.htm"
                                       title="动画合集" target="_blank">动画合集</a>
                                    <span class="text-muted">换个号韩国红果果</span>
<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>动画 指一种样式变为另一种样式 keyframes应当始终定义0 100 过程 
1 transition  制作鼠标滑过图片时的放大效果 
 

css
.wrap{
		width: 340px;height: 340px;
		position: absolute;
		top: 30%;
		left: 20%;
		overflow: hidden;
		bor</div>
                                </li>
                                <li><a href="/article/749.htm"
                                       title="网络最常见的攻击方式竟然是SQL注入" target="_blank">网络最常见的攻击方式竟然是SQL注入</a>
                                    <span class="text-muted">蓝儿唯美</span>
<a class="tag" taget="_blank" href="/search/sql%E6%B3%A8%E5%85%A5/1.htm">sql注入</a>
                                    <div>NTT研究表明,尽管SQL注入(SQLi)型攻击记录详尽且为人熟知,但目前网络应用程序仍然是SQLi攻击的重灾区。 
信息安全和风险管理公司NTTCom Security发布的《2015全球智能威胁风险报告》表明,目前黑客攻击网络应用程序方式中最流行的,要数SQLi攻击。报告对去年发生的60亿攻击 行为进行分析,指出SQLi攻击是最常见的网络应用程序攻击方式。全球网络应用程序攻击中,SQLi攻击占</div>
                                </li>
                                <li><a href="/article/876.htm"
                                       title="java笔记2" target="_blank">java笔记2</a>
                                    <span class="text-muted">a-john</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>类的封装: 
1,java中,对象就是一个封装体。封装是把对象的属性和服务结合成一个独立的的单位。并尽可能隐藏对象的内部细节(尤其是私有数据) 
2,目的:使对象以外的部分不能随意存取对象的内部数据(如属性),从而使软件错误能够局部化,减少差错和排错的难度。 
3,简单来说,“隐藏属性、方法或实现细节的过程”称为——封装。 
4,封装的特性: 
      4.1设置</div>
                                </li>
                                <li><a href="/article/1003.htm"
                                       title="[Andengine]Error:can't creat bitmap form path “gfx/xxx.xxx”" target="_blank">[Andengine]Error:can't creat bitmap form path “gfx/xxx.xxx”</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0Android%E9%81%87%E5%88%B0%E7%9A%84%E9%94%99%E8%AF%AF/1.htm">学习Android遇到的错误</a>
                                    <div>        最开始遇到这个错误是很早以前了,以前也没注意,只当是一个不理解的bug,因为所有的texture,textureregion都没有问题,但是就是提示错误。 
 
昨天和美工要图片,本来是要背景透明的png格式,可是她却给了我一个jpg的。说明了之后她说没法改,因为没有png这个保存选项。 
 
我就看了一下,和她要了psd的文件,还好我有一点</div>
                                </li>
                                <li><a href="/article/1130.htm"
                                       title="自己写的一个繁体到简体的转换程序" target="_blank">自己写的一个繁体到简体的转换程序</a>
                                    <span class="text-muted">asialee</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%BD%AC%E6%8D%A2/1.htm">转换</a><a class="tag" taget="_blank" href="/search/%E7%B9%81%E4%BD%93/1.htm">繁体</a><a class="tag" taget="_blank" href="/search/filter/1.htm">filter</a><a class="tag" taget="_blank" href="/search/%E7%AE%80%E4%BD%93/1.htm">简体</a>
                                    <div>          今天调研一个任务,基于java的filter实现繁体到简体的转换,于是写了一个demo,给各位博友奉上,欢迎批评指正。 
         实现的思路是重载request的调取参数的几个方法,然后做下转换。 
          </div>
                                </li>
                                <li><a href="/article/1257.htm"
                                       title="android意图和意图监听器技术" target="_blank">android意图和意图监听器技术</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E6%98%BE%E7%A4%BA%E6%84%8F%E5%9B%BE/1.htm">显示意图</a><a class="tag" taget="_blank" href="/search/%E9%9A%90%E5%BC%8F%E6%84%8F%E5%9B%BE/1.htm">隐式意图</a><a class="tag" taget="_blank" href="/search/%E6%84%8F%E5%9B%BE%E7%9B%91%E5%90%AC%E5%99%A8/1.htm">意图监听器</a>
                                    <div>Intent是在activity之间传递数据;Intent的传递分为显示传递和隐式传递 
  
显式意图:调用Intent.setComponent() 或 Intent.setClassName() 或 Intent.setClass()方法明确指定了组件名的Intent为显式意图,显式意图明确指定了Intent应该传递给哪个组件。 
  
隐式意图;不指明调用的名称,根据设</div>
                                </li>
                                <li><a href="/article/1384.htm"
                                       title="spring3中新增的@value注解" target="_blank">spring3中新增的@value注解</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/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%40Value/1.htm">@Value</a>
                                    <div>        在spring 3.0中,可以通过使用@value,对一些如xxx.properties文件中的文件,进行键值对的注入,例子如下: 
1.首先在applicationContext.xml中加入:    
<beans xmlns="http://www.springframework.</div>
                                </li>
                                <li><a href="/article/1511.htm"
                                       title="Jboss启用CXF日志" target="_blank">Jboss启用CXF日志</a>
                                    <span class="text-muted">sunjing</span>
<a class="tag" taget="_blank" href="/search/log/1.htm">log</a><a class="tag" taget="_blank" href="/search/jboss/1.htm">jboss</a><a class="tag" taget="_blank" href="/search/CXF/1.htm">CXF</a>
                                    <div>1. 在standalone.xml配置文件中添加system-properties: 
    <system-properties>        <property name="org.apache.cxf.logging.enabled" value=&</div>
                                </li>
                                <li><a href="/article/1638.htm"
                                       title="【Hadoop三】Centos7_x86_64部署Hadoop集群之编译Hadoop源代码" target="_blank">【Hadoop三】Centos7_x86_64部署Hadoop集群之编译Hadoop源代码</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a>
                                    <div>  编译必需的软件 
 
 Firebugs3.0.0 
 Maven3.2.3 
 Ant 
 JDK1.7.0_67 
 protobuf-2.5.0 
 Hadoop 2.5.2源码包 
 
  
  
  
 
 Firebugs3.0.0 
 
  
http://sourceforge.jp/projects/sfnet_findbug</div>
                                </li>
                                <li><a href="/article/1765.htm"
                                       title="struts2验证框架的使用和扩展" target="_blank">struts2验证框架的使用和扩展</a>
                                    <span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/struts/1.htm">struts</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>struts2能够对前台提交的表单数据进行输入有效性校验,通常有两种方式: 
1、在Action类中通过validatexx方法验证,这种方式很简单,在此不再赘述; 
2、通过编写xx-validation.xml文件执行表单验证,当用户提交表单请求后,struts会优先执行xml文件,如果校验不通过是不会让请求访问指定action的。 
本文介绍一下struts2通过xml文件进行校验的方法并说</div>
                                </li>
                                <li><a href="/article/1892.htm"
                                       title="记录-感悟" target="_blank">记录-感悟</a>
                                    <span class="text-muted">braveCS</span>
<a class="tag" taget="_blank" href="/search/%E6%84%9F%E6%82%9F/1.htm">感悟</a>
                                    <div>再翻翻以前写的感悟,有时会发现自己很幼稚,也会让自己找回初心。 
  
2015-1-11  1. 能在工作之余学习感兴趣的东西已经很幸福了; 
2. 要改变自己,不能这样一直在原来区域,要突破安全区舒适区,才能提高自己,往好的方面发展; 
3. 多反省多思考;要会用工具,而不是变成工具的奴隶; 
4. 一天内集中一个定长时间段看最新资讯和偏流式博</div>
                                </li>
                                <li><a href="/article/2019.htm"
                                       title="编程之美-数组中最长递增子序列" target="_blank">编程之美-数组中最长递增子序列</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a>
                                    <div>
import java.util.Arrays;
import java.util.Random;

public class LongestAccendingSubSequence {

	/**
	 * 编程之美 数组中最长递增子序列 
	 * 书上的解法容易理解
	 * 另一方法书上没有提到的是,可以将数组排序(由小到大)得到新的数组,
	 * 然后求排序后的数组与原数</div>
                                </li>
                                <li><a href="/article/2146.htm"
                                       title="读书笔记5" target="_blank">读书笔记5</a>
                                    <span class="text-muted">chengxuyuancsdn</span>
<a class="tag" taget="_blank" href="/search/%E9%87%8D%E5%A4%8D%E6%8F%90%E4%BA%A4/1.htm">重复提交</a><a class="tag" taget="_blank" href="/search/struts2%E7%9A%84token%E9%AA%8C%E8%AF%81/1.htm">struts2的token验证</a>
                                    <div>1、重复提交 
2、struts2的token验证 
3、用response返回xml时的注意 
 
1、重复提交 
(1)应用场景 
(1-1)点击提交按钮两次。 
(1-2)使用浏览器后退按钮重复之前的操作,导致重复提交表单。 
(1-3)刷新页面 
(1-4)使用浏览器历史记录重复提交表单。 
(1-5)浏览器重复的 HTTP 请求。 
(2)解决方法 
(2-1)禁掉提交按钮 
(2-2)</div>
                                </li>
                                <li><a href="/article/2273.htm"
                                       title="[时空与探索]全球联合进行第二次费城实验的可能性" target="_blank">[时空与探索]全球联合进行第二次费城实验的可能性</a>
                                    <span class="text-muted">comsci</span>

                                    <div> 
 
     二次世界大战前后,由爱因斯坦参加的一次在海军舰艇上进行的物理学实验 -费城实验 
  至今给我们大家留下很多迷团..... 
 
     关于费城实验的详细过程,大家可以在网络上搜索一下,我这里就不详细描述了 
 
     在这里,我的意思是,现在</div>
                                </li>
                                <li><a href="/article/2400.htm"
                                       title="easy connect 之 ORA-12154: TNS: 无法解析指定的连接标识符" target="_blank">easy connect 之 ORA-12154: TNS: 无法解析指定的连接标识符</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/ORA-12154/1.htm">ORA-12154</a>
                                    <div>用easy connect连接出现“tns无法解析指定的连接标示符”的错误,如下: 
C:\Users\Administrator>sqlplus username/pwd@192.168.0.5:1521/orcl 
SQL*Plus: Release 10.2.0.1.0 – Production on 星期一 5月 21 18:16:20 2012 
Copyright (c) 198</div>
                                </li>
                                <li><a href="/article/2527.htm"
                                       title="简单排序:归并排序" target="_blank">简单排序:归并排序</a>
                                    <span class="text-muted">dieslrae</span>
<a class="tag" taget="_blank" href="/search/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F/1.htm">归并排序</a>
                                    <div>
    public void mergeSort(int[] array){
        int temp = array.length/2;
        
        if(temp == 0){
            return;
        }
        
        int[] a = new int[temp];
        int</div>
                                </li>
                                <li><a href="/article/2654.htm"
                                       title="C语言中字符串的\0和空格" target="_blank">C语言中字符串的\0和空格</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a>
                                    <div>   \0 为字符串结束符,比如说: 
                      abcd (空格)cdefg; 
存入数组时,空格作为一个字符占有一个字节的空间,我们</div>
                                </li>
                                <li><a href="/article/2781.htm"
                                       title="解决Composer国内速度慢的办法" target="_blank">解决Composer国内速度慢的办法</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/Composer/1.htm">Composer</a>
                                    <div>用法: 
有两种方式启用本镜像服务: 
1 将以下配置信息添加到 Composer 的配置文件 config.json 中(系统全局配置)。见“例1” 
2 将以下配置信息添加到你的项目的 composer.json 文件中(针对单个项目配置)。见“例2” 
为了避免安装包的时候都要执行两次查询,切记要添加禁用 packagist 的设置,如下      1   2   3   4   5    </div>
                                </li>
                                <li><a href="/article/2908.htm"
                                       title="高效可伸缩的结果缓存" target="_blank">高效可伸缩的结果缓存</a>
                                    <span class="text-muted">shuizhaosi888</span>
<a class="tag" taget="_blank" href="/search/%E9%AB%98%E6%95%88%E5%8F%AF%E4%BC%B8%E7%BC%A9%E7%9A%84%E7%BB%93%E6%9E%9C%E7%BC%93%E5%AD%98/1.htm">高效可伸缩的结果缓存</a>
                                    <div>/**
 * 要执行的算法,返回结果v
 */
public interface Computable<A, V> {
	public V comput(final A arg);

}
 
  
/**
 * 用于缓存数据
 */
public class Memoizer<A, V> implements Computable<A, </div>
                                </li>
                                <li><a href="/article/3035.htm"
                                       title="三点定位的算法" target="_blank">三点定位的算法</a>
                                    <span class="text-muted">haoningabc</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a>
                                    <div>三点定位, 
已知a,b,c三个顶点的x,y坐标 
和三个点都z坐标的距离,la,lb,lc 
 
求z点的坐标 
原理就是围绕a,b,c 三个点画圆,三个圆焦点的部分就是所求 
但是,由于三个点的距离可能不准,不一定会有结果, 
所以是三个圆环的焦点,环的宽度开始为0,没有取到则加1 
运行 
gcc -lm test.c 
test.c代码如下 
 

#include "stdi</div>
                                </li>
                                <li><a href="/article/3162.htm"
                                       title="epoll使用详解" target="_blank">epoll使用详解</a>
                                    <span class="text-muted">jimmee</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E7%BC%96%E7%A8%8B/1.htm">服务端编程</a><a class="tag" taget="_blank" href="/search/epoll/1.htm">epoll</a>
                                    <div>epoll - I/O event notification facility在linux的网络编程中,很长的时间都在使用select来做事件触发。在linux新的内核中,有了一种替换它的机制,就是epoll。相比于select,epoll最大的好处在于它不会随着监听fd数目的增长而降低效率。因为在内核中的select实现中,它是采用轮询来处理的,轮询的fd数目越多,自然耗时越多。并且,在linu</div>
                                </li>
                                <li><a href="/article/3289.htm"
                                       title="Hibernate对Enum的映射的基本使用方法" target="_blank">Hibernate对Enum的映射的基本使用方法</a>
                                    <span class="text-muted">linzx0212</span>
<a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a>
                                    <div>  
枚举 
  
/**
 * 性别枚举
 */
public enum Gender {

    MALE(0), FEMALE(1), OTHER(2);

    private Gender(int i) {
        this.i = i;
    }

    private int i;

    public int getI</div>
                                </li>
                                <li><a href="/article/3416.htm"
                                       title="第10章 高级事件(下)" target="_blank">第10章 高级事件(下)</a>
                                    <span class="text-muted">onestopweb</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%8B%E4%BB%B6/1.htm">事件</a>
                                    <div>index.html 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/</div>
                                </li>
                                <li><a href="/article/3543.htm"
                                       title="孙子兵法" target="_blank">孙子兵法</a>
                                    <span class="text-muted">roadrunners</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%99%E5%AD%90/1.htm">孙子</a><a class="tag" taget="_blank" href="/search/%E5%85%B5%E6%B3%95/1.htm">兵法</a>
                                    <div>始计第一 
 
孙子曰: 
兵者,国之大事,死生之地,存亡之道,不可不察也。 
故经之以五事,校之以计,而索其情:一曰道,二曰天,三曰地,四曰将,五 
曰法。道者,令民于上同意,可与之死,可与之生,而不危也;天者,阴阳、寒暑 
、时制也;地者,远近、险易、广狭、死生也;将者,智、信、仁、勇、严也;法 
者,曲制、官道、主用也。凡此五者,将莫不闻,知之者胜,不知之者不胜。故校 
之以计,而索其情,曰</div>
                                </li>
                                <li><a href="/article/3670.htm"
                                       title="MySQL双向复制" target="_blank">MySQL双向复制</a>
                                    <span class="text-muted">tomcat_oracle</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>本文包括: 
 
  主机配置  
  从机配置  
  建立主-从复制  
  建立双向复制  
 
  背景 
按照以下简单的步骤: 
参考一下: 
 
  在机器A配置主机(192.168.1.30)  
  在机器B配置从机(192.168.1.29)  
  我们可以使用下面的步骤来实现这一点  
 
  
步骤1:机器A设置主机 
 
  在主机中打开配置文件 , </div>
                                </li>
                                <li><a href="/article/3797.htm"
                                       title="zoj 3822 Domination(dp)" target="_blank">zoj 3822 Domination(dp)</a>
                                    <span class="text-muted">阿尔萨斯</span>
<a class="tag" taget="_blank" href="/search/Mina/1.htm">Mina</a>
                                    <div> 题目链接:zoj 3822 Domination 
 题目大意:给定一个N∗M的棋盘,每次任选一个位置放置一枚棋子,直到每行每列上都至少有一枚棋子,问放置棋子个数的期望。 
 解题思路:大白书上概率那一张有一道类似的题目,但是因为时间比较久了,还是稍微想了一下。dp[i][j][k]表示i行j列上均有至少一枚棋子,并且消耗k步的概率(k≤i∗j),因为放置在i+1~n上等价与放在i+1行上,同理</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>