Neil-

跨域请求小结

跨域的定义

同源策略：是浏览器避免浏览器收到XSS、CSRF等恶意攻击的一种安全策略，指的是两个url具有完全相同的协议、域名及端口号；
一般我们所说的跨域是指访问非同源的资源的行为；浏览器通常会允许发送跨域请求，但是会拦截跨域请求的响应；这主要是为了防止恶意网站读取其他网站的可信任信息，以及合理读取其他网站的网页内容；
IE中同源策略的特殊性：a、在IE中，如果两个域名在相同的高度信任区域（如企业的内网），那么同源策略不适用；b、IE的同源策略检测会忽略端口号。
通常，嵌入式的跨域资源请求方式是被允许的，这类请求包括：
4. video及audio标签
5. @font-face()：该方法在不同的浏览器存在一定的差异，部分浏览器仍然有同源策略限制
6. 及</code></li> </ol> </li> </ol> <h3>跨域的方法</h3> <h5>JSONP</h5> <ol> <li>原理： JSONP跨域的原理是<code>script</code>标签请求的资源不受同源策略的限制；JSONP跨域是比较常见的，但JSONP跨域需要服务器端相应的处理才能支持； 通常可以动态创建一个<code>script</code>标签，然后在请求的url中带上一些处理参数，一般是一个回调函数；服务端在接收到请求后，从请求中获得处理参数，然后将处理结果返回给客户端；如果返回的是函数调用，那么客户端的回调函数就会被调用执行；</li> <li>限制：JSONP只支持<code>GET</code>请求方式，本质上是因为<code>script</code>标签请求资源的方式就是<code>GET</code>；另外，根据实现过程可以看到，jsonp的返回是一个函数调用，容易导致XSS攻击等安全问题；</li> <li>实现 客户端代码如下，其URL为<code>http://localhost:8001/test/test1.html</code>；请求的服务器地址为：<code>http://localhost:8080/</code>；为了跨域，在请求的url加入一个callback参数指定jsonp回调函数名称；服务端接收到请求后从中提取请求参数及回调函数名，然后将对应的回调函数包裹相应参数返回给客户端<code>handleCallback(id)</code>；这时客户端的<code>handleCallback()</code>函数就会被自动调用。<pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="hook"></div> <script> var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'http://localhost:8080/?callback=handleCallback'; document.head.appendChild(script); // jquery请求方式 function ajax() { $.ajax({ url: 'http://localhost:8080', type: 'GET', dataType: 'jsonp', jsonpCallback: 'handleCallback', }) } function handleCallback(res) { document.querySelector('.hook').innerHTML = `请求次数： ${res}`; } </script> </body> </html> </code></pre> <pre><code class="prism language-js">var qs = require('querystring'); var http = require('http'); var server = http.createServer(); var id = 0; server.on('request', function (req, res) { console.log(req.url); console.log(req.url.split('?')); var params = qs.parse(req.url.split('?')[1]); var fn = params.callback; res.writeHead(200, {'Content-Type': 'text/javascript'}); res.write(fn + '(' + id++ + ')'); res.end(); }) server.listen('8080'); console.log('server is running at port 8080...'); </code></pre> </li> </ol> <h5>CORS</h5> <ol> <li> 定义：CORS（Cross-ORigin Resource Sharing），即跨站资源共享机制，通过在服务端和客户端添加一定的标头进行跨域访问控制，；<code>XHR</code>及<code>Fetch</code>等API均支持CORS。 <blockquote> 跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。 </blockquote> 在使用CORS时，如果请求的方法可能修改或影响服务端数据，那么浏览器通常会发送一个预检请求<code>Option</code>，以确认服务器是否允许跨域，并且在允许跨域时，告知浏览器是否要携带相应的身份认证信息（cookie、token等）；预检请求确认可以进行跨域请求时才会发起真正的请求； </li> <li> 适用情形： <ol> <li><code>XHR</code>或<code>Fetch</code>请求；</li> <li><code>@font-face</code>加载跨域字体；</li> <li>canvas中使用<code>drawImage</code>绘制<code>audio</code>或<code>video</code>；</li> </ol> </li> <li> 简单请求： 前面已经提到，触发预检请求的请求方式只有一部分，通常将不会触发CORS预检请求的称为简单请求，通常满足以下所有条件： <ol> <li>使用<code>GET</code>、<code>POST</code>或<code>HEAD</code>请求；</li> <li><code>Content-Type</code>的值仅限于：<code>text/plain</code>、<code>multipart/form-data</code>、<code>application/x-www-form-urlencoded</code>之一；</li> <li>自定义的首部字段不超出CORS安全的首部字段集合范围：<code>Accept</code>、<code>Accept-Language</code>、<code>Content-Type</code>、<code>Content-Language</code></li> <li>请求中未使用<code>Fetch API</code>的<code>ReadableStream</code>二进制流对象；</li> <li> <blockquote> 请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。 </blockquote> </li> </ol> </li> <li> 非简单请求方式： 请求头包含<code>Origin</code>请求头（包含协议、域名、端口号），用于指示请求来源；服务端设置`Access-Control-Allow-Origin: xxx’，可以设置为*或者指定的域名； 前端不需要特别处理： <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="hook"></div> <script> var target = document.querySelector('.hook'); var xhr = new XMLHttpRequest(); xhr.onload = function(){ if(xhr.readyState == 4) { if(xhr.status >= 200 && xhr.status <300 || xhr.status == 304) { target.innerHTML = xhr.responseText; console.log(xhr.responseText); } else { target.innerHTML = 'Reuqest failed:' + xhr.status; console.log("Request failed:", xhr.status); } } } // xhr.widthCredientials = true; xhr.open('post', 'http://localhost:8080', true); // xhr.setRequestHeader('Access-Control-Allow-Methods', 'OPTIONS, GET, POST') // xhr.setRequestHeader('Content-Type', 'application/x-wwww-urlencoded'); xhr.send('name=fn&id=12377'); </script> </body> </html> </code></pre> 后端需要设定相应的响应头： <pre><code class="prism language-js">var qs = require('querystring'); var http = require('http'); var server = http.createServer(); server.on('request', function (req, res) { var _data = ''; req.on('data', function (chunk){ _data += chunk; }); req.on('end', function () { res.writeHead(200, 'Success', { 'Content-Type': 'application/x-www-urlencoded', 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'PUT, GET, POST', 'Access-Control-ALlow-Headers': 'Content-Type', }); res.end("messages from client: \n" + _data); }) }); server.listen(8080); function finishedReq() { console.log('write end...') } console.log('server is running at port 8080...'); </code></pre> 以下是一个非简单请求的请求结果： <a href="http://img.e-com-net.com/image/info8/179249111f87438490ae0c213a03a8cf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/179249111f87438490ae0c213a03a8cf.jpg" alt="跨域请求小结_第1张图片" width="650" height="226" style="border:1px solid black;"></a> </li> </ol> <h5>document.domain + iframe</h5> document.domain跨域的基础是二级域名、协议及端口号要一致，通过<code>document.domain</code>修改页面的域名，从而达到同一顶级域名下的子域名间的跨域；举个例子： 比如一主页面的域名是<code>sale.game.abc.com</code>，内嵌一个<code>iframe</code>，如下： <pre><code class="prism language-html"><iframe id="demo" src="http://gamestatic.abc.com/game/test/a.html"> </code></pre> 由于主页面的域名与嵌入的子页面的二级域名是一致的，都是<code>abc.com</code>，因此可以使用该方法进行跨域；需要在主页面和子页面的脚本中分别使用以下语句将页面的域名置为<code>abc.com</code>； <pre><code class="prism language-js">document.domain = 'abc.com'; </code></pre> 这样，父级页面就可以获取<code>iframe</code>子页面的<code>document</code>对象，并且获取和操作子页面的dom元素了；否则，受跨域限制直接在不同子域名下的两个关联页面也无法操作对方的dom； <h5>window.name + iframe跨域</h5> <ol> <li> window.name特性： <ol> <li>window.name是一个全局变量；</li> <li>每个窗口有一个独立的window.name与之对应，默认值为空字符串；</li> <li>window.name与每个窗口的生命周期相关，同一个窗口载入的多个页面同享同一个<code>window.name</code>值，窗口关闭则对应的<code>window.name</code>也被销毁；</li> <li>不同窗口打开的同一域名的两个页面的<code>window.name</code>不能共享；</li> <li><code>window.name</code>数据格式可以自定义，大小一般不超过2M；</li> </ol> </li> <li> 跨域原理：利用同一窗口载入的多个页面共享同一个<code>window.name</code>，结合<code>iframe</code>载入不同域的页面，在<code>iframe</code>子页面内使用<code>window.name=data</code>赋值，<code>data</code>是要传递的数据，然后在主页面通过window.name从子页面获取需要的数据； </li> </ol> <pre><code class="prism language-html">// 主页面域名为http://localhost:8001/test/index.html // iframe内嵌页域名为http://localhost:8888/test/iframe.html // proxy.html：代理页是空页面，与主页面同域名 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>window.name + iframe</p> <script> window.flag = false; var iframe = document.createElement('iframe'); var loadData = function () { if (flag) { var data = iframe.contentWindow.name; console.log(data); iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); } else { flag = true; iframe.contentWindow.location = 'http://localhost:8001/test/proxy.html'; } } iframe.src = 'http://localhost:8888/test/iframe.html'; iframe.onload = loadData; document.body.appendChild(iframe); </script> </body> </html> </code></pre> <pre><code class="prism language-html">// iframe内嵌页 iframe.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> window.name = 'message from iframe' </script> </body> </html> </code></pre> <h5>location.hash + iframe</h5> <ol> <li> 跨域原理 <code>location.hash</code>通过页面链接地址中的hash部分进行数据传递；缺点：数据明文，具有长度限制（收链接长度限制）；下边的例子中，<code>index.html</code>是主页面，域名是<code>http://localhost:8080</code>；页面内部嵌入了一个<code>src=http://localhost:8888/test/iframe.html#id=123</code>的<code>iframe</code>；由于嵌入的<code>iframe</code>是跨域的，无法直接通信，因此需要一个与<code>index.html</code>同域名的中转代理页<code>proxy.html</code>； </li> <li> 代码实现 <pre><code class="prism language-html">// index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>window.name + iframe</p> <iframe src="http://localhost:8888/test/iframe.html#id=123" frameborder="0"></iframe> <script> window.onhashchange = function () { console.log(location.hash); } </script> </body> </html> </code></pre> <pre><code class="prism language-html">// iframe.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> var proxy = document.createElement('iframe'); proxy.src = 'http://localhost:8001/test/proxy.html#name=fn'; document.body.appendChild(proxy); </script> </body> </html> </code></pre> <pre><code class="prism language-html">// proxy.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> console.log('hash: ', location.hash); window.parent.parent.location.hash = self.location.hash; </script> </body> </html> </code></pre> </li> </ol> <h5>postMessage</h5> <ol> <li> postMessage API介绍 语法： <blockquote> 发送消息：targetWindow.postMessage(message, targetOrigin, [transfer]); 监听消息： window.onmessage = function (e) { // console.log(e.data); e对象下具有data，source及origin属性} </blockquote> 其中，targetWindow是想要通信的其他页面的window对象；targetOrigin是预通信的其他页面的域名，可以设置为<code>*</code>与任何页面通信，但出于安全考虑不建议；<code>mesage</code>是要进行通信的数据，已经可以支持字符串、对象等多种数据类型；<code>transfer</code>是可选参数，表示一个与<code>message</code>同时发送到接收方的Transferable对象，控制权由发送方转移到接收方； onmessage监听消息，回调函数传入对象e，具有属性<code>data</code>、<code>source</code>、<code>origin</code>；<code>data</code>是传递的数据；<code>source</code>是对发送方window对象的引用；<code>origin</code>是发送方的域名； </li> <li> 代码实现： <pre><code class="prism language-html">// index.html 域名localhost:8001 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>HTML5 postMessage</h1> <p></p> <iframe src="http://localhost:8888/test/sub.html" frameborder="0" onload="load()"></iframe> <script> function load() { var iframe = document.querySelector('iframe'); iframe.contentWindow.postMessage('i need some msg from you.', 'http://localhost:8888'); // window.postMessage({'name': 'post', method: 'cors'}, 'http://localhost:8880/test/sub.html'); window.onmessage = function (e) { console.log(e.data); } } </script> </body> </html> </code></pre> <pre><code class="prism language-html">// sub.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> window.onmessage = function (e) { console.log(e.data); e.source.postMessage({'name': 'post', method: 'cors'}, e.origin); } </script> </body> </html> </code></pre> 运行结果： <pre><code class="prism language-js">i need some msg from you. // sub.html输出 {name: "post", method: "cors"} // index.html输出 </code></pre> </li> </ol> <h5>node中间件</h5> <ol> <li>原理：同源策略是浏览器端的安全策略；如果把请求通过node服务器代理请求，那么就没有跨域限制了；<code>http-proxy-middleware</code>是node中常用的设置代理的插件库，可以与express、connet等配合使用</li> <li>代码实现：<pre><code class="prism language-js">// server.js const http = require('http'); const server = http.createServer(); const qs = require('querystring'); const url = require('url'); let count= 0; server.on('request', (req, res) => { count++; const query = url.parse(req.url, true).query; res.writeHead(200, { 'Set-Cookie': 'name=fn;Path:/;Domain:localhost:6688;Httponly' }); query.count == 1 ? res.write(`Response from Server -- localhost:6688; visit count: ${count}`) : res.write(`Response from Server -- localhost:6688; no tracking...`); res.end(); }) server.listen(6688); console.log('server is running at port 6688...') </code></pre> <pre><code class="prism language-js">// proxy.js const express = require('express'); const proxy = require('http-proxy-middleware'); const app = express(); const options = { target: 'http://localhost:6688', changeOrigin: true, onProxyRes: (proxyRes, req, res) => { res.header('Access-Control-Allow-Origin', 'http://localhost'); res.header('Access-Control-Allow-Credentials', 'true'); proxyRes.headers['x-self-defined'] = 'node middleware'; }, } app.use('/api', proxy(options)); app.use(express.static( './public')); app.listen(8002); console.log('proxy server is listen at port 8002'); </code></pre> 运行结果： <a href="http://img.e-com-net.com/image/info8/bc7268a7e1a343f48229a7a413c1946e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bc7268a7e1a343f48229a7a413c1946e.jpg" alt="跨域请求小结_第2张图片" width="650" height="316" style="border:1px solid black;"></a></li> </ol> <h5>nginx反向代理</h5> <ol> <li>原理：与node中间件的原理一样，都是利用服务端不受同源策略限制的特点，使用同域名的反向代理服务器转发请求，从而进行跨域；</li> <li>实现：<pre><code class="prism language-conf"># nginx配置 worker_processes 1; // 工作进程数，与CPU数相同 events { connections 1024; // 每个进程的最大连接数 } http { sendfile on; // 高效文件传输模式 server { listen 80; server_name localhost; # 负载均衡与反向代理 location / { root html; index index.html index.htm; } location /test.html { proxy_pass http://localhost:6688; } } } </code></pre> <pre><code class="prism language-js">// server.js http://localhost:6688 const http = require('http'); const server = http.createServer(); const qs = require('querystring'); const url = require('url'); let count= 0; server.on('request', (req, res) => { // var params = url.parse(req.url, true); var params = qs.parse(req.url.split('?')[1]); res.write(JSON.stringify(params)); res.end(`port: 6688`); }) server.listen(6688); console.log('server is running at port 6688...') </code></pre> 此时，直接访问localhost/test.html域名时nginx会将请求代理到localhost:6688域名下，从而实现跨域；</li> </ol> <h5>WebSocket</h5> <ol> <li>介绍：WebSocket是HTML5新增的一种用于客户端和服务端进行全双工通信的协议，可以在客户端和服务端建立一个持久化的连接，并且在一个TCP连接中高效双向数据传递； <ol> <li>语法：<code>var Socket = new WebSocket(url, [protocol] );</code></li> <li>属性：<code>readyState</code> —— 0 (WebSocket.CONNECTING) / 1(WebSocket.OPEN) / 2(WebSocket.CLOSING) / 3(WebSocket.CLOSED)；<code>WebSocket.bufferedAmount</code> —— 已调用<code>send()</code>方法在缓冲区等待发送的数据字节数；</li> <li>事件：<code>onopen</code>、<code>onmessage</code>、<code>onclose</code>、<code>onerror</code>；</li> <li>方法：<code>send(data)</code>、<code>close([code [, reason]])</code>；可选的code及文本表明连接关闭的原因，默认code=1005;</li> </ol> </li> <li>代码实现：<pre><code class="prism language-js">// server.js const http = require('http'); const server = http.createServer(); const url = require('url'); const WebSocket = require('ws'); const socket = new WebSocket.Server({port: 5555}); socket.on('connection', ws => { ws.on('message', (data) => { console.log('data from client: ', data) ws.send('hello websocket...'); console.log('server end send data...'); }) }) console.log('server is running at port 5555...') </code></pre> <pre><code class="prism language-html">// index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="hook"></div> <script> SocketEvent = () => { if (window.WebSocket) { console.log('llll') var socket = new WebSocket('ws://localhost:5555'); socket.onopen = function () { console.log('client socket opening...'); socket.send(`I'm requesting some data from you...`); } socket.onmessage = function (e) { console.log(e); console.log(e.data); } socket.onclose = function (e) { console.log('client socket closing...'); } } } </script> <button onclick="SocketEvent()">socket</button> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/8b064b6f5c4b4d57a76ccd3117a865e6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8b064b6f5c4b4d57a76ccd3117a865e6.jpg" alt="跨域请求小结_第3张图片" width="650" height="316" style="border:1px solid black;"></a></li> </ol> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1275610133614837760"></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">  <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>  <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>  <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">你可能感兴趣的:(web前端,计算机基础)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1950144218282389504.htm" title="为什么学习Web前端一定要掌握JavaScript？" target="_blank">为什么学习Web前端一定要掌握JavaScript？</a> web前端学习指南 <div>为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。</div> </li> <li><a href="/article/1950020001654173696.htm" title="Web前端交互利用Python跟大模型操作" target="_blank">Web前端交互利用Python跟大模型操作</a> 哥本哈士奇 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E4%BA%A4%E4%BA%92/1.htm">交互</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>Web前端交互利用Python跟大模型操作一个简单的演示，如何把大模型应用集成到自己的应用场景当中。这里的场景我们模拟的是在吃鸡游戏中，一个作战计划，是否符合老六的行为规范。吃鸡游戏已经风靡很多年，游戏里每个人的游戏风格都不一样，有喜欢钢枪的，有喜欢随机应变的，也有喜欢当老六苟分的。每种风格的游戏方式以及游戏里的行为都不同，所以这里将演示如何应用大模型，去判断一个人的游戏方式，是否符合一个老六的行</div> </li> <li><a href="/article/1949861487262625792.htm" title="Rust 全栈应用框架 Dioxus：从前端到桌面再到 WASM 的统一开发体验" target="_blank">Rust 全栈应用框架 Dioxus：从前端到桌面再到 WASM 的统一开发体验</a> 掘金安东尼 <a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82/1.htm">字节</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C/1.htm">阿里</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/wasm/1.htm">wasm</a> <div>如果你正在寻找一个能用Rust写前端、桌面应用、移动应用甚至WebAssembly的统一框架，Dioxus是目前生态中最具潜力的选择之一。为什么需要Dioxus？随着WebAssembly（WASM）与Rust的发展，越来越多开发者开始思考：Rust是否能做“全栈”？是否能有像React一样的组件模型？是否可以用Rust写桌面GUI，甚至Web前端？Dioxus正是这个愿景下的产物。它是一个受Re</div> </li> <li><a href="/article/1949810806984077312.htm" title="专升本重庆第一章计算机基础知识" target="_blank">专升本重庆第一章计算机基础知识</a> <div>1.1.1历史人物1.图灵阿兰・麦席森・图灵（AlanMathisonTuring，1912年6月23日-1954年6月7日）是英国著名的计算机科学家、数学家、逻辑学家、密码学家和理论生物学家，被誉为“计算机科学与人工智能之父。图灵相关事件：（1）提出“图灵机”概念（1936年）：一种抽象的计算模型，不是真正的计算机。(2)提出“图灵测试”与人工智能构想（1950年）：用人机对话的方式检验机器是否</div> </li> <li><a href="/article/1949767053955100672.htm" title="web前端总复习（一）：http和https" target="_blank">web前端总复习（一）：http和https</a> 做一个暴躁的开发 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%80%BB%E5%A4%8D%E4%B9%A0/1.htm">web前端总复习</a><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/1.htm">网络</a><a class="tag" taget="_blank" href="/search/https/1.htm">https</a> <div>http和https的基本概念http：超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一种用于从服务器传输超文本到本地浏览器的传输协议。它可以使得浏览器更加高效，减少网络传输。https：是http的安全版。是一种以安全为目标的http通道。http和https的区别①http传输信息不加密，https传输信息加密。②端口不同，http为80端口，https为443端口。③https协议</div> </li> <li><a href="/article/1949397350233468928.htm" title="前端“武林”争“盟主”？我有我的看法！" target="_blank">前端“武林”争“盟主”？我有我的看法！</a> 秋风_bdfd <div>了解过web前端的都知道前端的三大框架，这也是前端攻城狮们向来争论的话题。下面就由小编来发表一下自己的一点小小的看法，如有别的看法，轻喷~前端这三大框架的争议那么大，就是因为使用的人太多了。对于小白来说，一开始接触前端，学习的都是HTML、CSS、JS。但是你学完这3样之后，你还得深入的往后期学，那么要学什么呢？当然就是我们今天所说的框架啦。因为在实际工作中，基本都是直接在框架上构建网站的，很少会</div> </li> <li><a href="/article/1949230177275932672.htm" title="【自动化测试】web前端组件测试范围梳理" target="_blank">【自动化测试】web前端组件测试范围梳理</a> 阿槿吃糖 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">前端自动化测试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>测试组件范围划分按钮文字链接单选框多选框输入框计数器选择器级联选择器开关日期选择器上传分页弹窗导航菜单表格富文本编辑器前端组件测试范围梳理-png</div> </li> <li><a href="/article/1949167129051852800.htm" title="学习web前端开发的经验分享" target="_blank">学习web前端开发的经验分享</a> 小猿圈加加 <div>我们不管学习什么，必不可缺少的一定是恒心和毅力，学习web也一样，更需要不断地学习和练习，因为语言嘛，就是不断地练习才能说得更好，所以不要偷懒，偷懒一定学不会，这就是计算机语言，下面看一下小编的分享吧。感想：1.学习一个技术，不是一看见源代码就是copy，而是仔细阅读后，找到自己想要的，并且自己写出来，自己理解了，下次遇到同样的问题，自己才能解决。2.在电脑上学习的过程中，我总是先建立一个txt，</div> </li> <li><a href="/article/1949105090912645120.htm" title="CCF-GESP编程能力等级认证课程安排" target="_blank">CCF-GESP编程能力等级认证课程安排</a> 天秀信奥编程培训 <a class="tag" taget="_blank" href="/search/%E5%8C%97%E4%BA%ACBCSP-X%E8%AF%95%E9%A2%98%E8%AE%B2%E8%A7%A3%E4%B8%93%E6%A0%8F/1.htm">北京BCSP-X试题讲解专栏</a><a class="tag" taget="_blank" href="/search/GESP/1.htm">GESP</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%AD%A6%E5%A5%A5%E8%B5%9B/1.htm">信息学奥赛</a><a class="tag" taget="_blank" href="/search/GESP%E7%AD%89%E7%BA%A7%E8%AE%A4%E8%AF%81/1.htm">GESP等级认证</a><a class="tag" taget="_blank" href="/search/CSP-J/1.htm">CSP-J</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E7%AE%97%E6%B3%95/1.htm">基础算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>天秀信奥GESP考级课程安排开始时间：2024年6月-7月GESP一级考级Level-1（21课时）课时知识模块知识点教学目标备注1-3计算机基础与编程环境计算机历史,计算机硬件组成,操作系统基础,集成开发环境的安装与使用,项目的创建与管理,代码的编写与调试了解计算机的发展历史,掌握计算机硬件的基本组成,熟悉常用操作系统的基本操作,掌握集成开发环境的安装与基本使用方法,能够创建与管理项目,编写并调</div> </li> <li><a href="/article/1949091974061551616.htm" title="大学生HTML期末大作业——HTML+CSS+JavaScript音乐网站（爱莫）" target="_blank">大学生HTML期末大作业——HTML+CSS+JavaScript音乐网站（爱莫）</a> 无·糖 <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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%AD%A6%E7%94%9F/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/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a> <div>HTML+CSS+JS【音乐网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目音乐网站7页含网页设计报告二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图</div> </li> <li><a href="/article/1948891766690213888.htm" title="HTML5和SVG篝火动画实战：月亮下的野营炊烟效果" target="_blank">HTML5和SVG篝火动画实战：月亮下的野营炊烟效果</a> 申增浩 <div>本文还有配套的精品资源，点击获取简介：HTML5是网页标记语言的最新标准，支持更加动态和丰富的用户体验。本项目源码展示了如何使用HTML5的SVG来绘制篝火和炊烟动画，通过CSS3动画、JavaScript交互、Canvas与SVG的选择以及Web动画性能优化，实现了一个月亮下的篝火和野营炊烟效果。项目还考虑了响应式设计和数据结构的使用，为开发者提供了一个学习Web前端开发的实践案例。1.HTML</div> </li> <li><a href="/article/1948219078472691712.htm" title="网络安全基础作业三" target="_blank">网络安全基础作业三</a> Csxyzj <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>回顾web前端的代码用户登录body{font-family:'Arial',sans-serif;background-color:#f0f2f5;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;}.login-container{background-color:white;padding</div> </li> <li><a href="/article/1948182010426093568.htm" title="嵌入式day1-计算机基础" target="_blank">嵌入式day1-计算机基础</a> EggrollOrz <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>1.计算机组成讲解计算机是现代一种用于高速计算的电子机器，可以进行数值计算，又可以进行逻辑判断，还具有存储记忆功能，且能够按照程序的运行，自动、高速处理数据。2.计算机语言发展机器语言-->汇编语言-->高级语言计算机语言的发展越来越易于人的理解，但会减慢计算机的执行速度按实现方式‌：分为编译型语言和解释型语言按编程方式‌：可以分为面向对象语言、面向过程(函数式)语言等。3.进制的知识点3.1进制</div> </li> <li><a href="/article/1948102027871580160.htm" title="web前端进阶之Javascript设计模式面向对象篇" target="_blank">web前端进阶之Javascript设计模式面向对象篇</a> jia林 <div>前言：在此说明Javascript设计模式所讲内容和知识点来自双越老师（wangEditor富文本开源作者）的视频，内容通俗易懂，受益匪浅，结合自己的学习心得整理成笔记，与大家分享，愿在前端的道路上越走越远.....从“写好代码”到“设计代码”的过程，不仅是技术的提升，更是编程思维的提升，而这其中最关键的就是设计模式，是否理解并掌握设计模式，也是衡量程序员能力的标准之一。学习前提使用过jquery</div> </li> <li><a href="/article/1948078882737418240.htm" title="01-C语言：第01天笔记" target="_blank">01-C语言：第01天笔记</a> Star在努力 <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>C语言：第1天笔记内容提要C语言概述数据类型常量变量C语言概述计算机基础计算机的组成计算机组成计算机：能进行计算以及逻辑处理的设备硬件：组成计算机的物理部件。（内存条、CPU、硬盘…）开发中对于硬件的认知：硬件包括电子设备、单片机、集成电路和嵌入式系统。软件：计算机中运行的程序和数据。开发中对于软件的认知：软件分为系统软件（OS）、应用软件和编程工具（编译器）计算机的六大部件中央处理器（CPU）：</div> </li> <li><a href="/article/1948048756935028736.htm" title="WEB前端登陆页面（复习）" target="_blank">WEB前端登陆页面（复习）</a> En¥ <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>1.登陆界面显示2.代码登录界面/*重置所有元素的默认样式，让所有浏览器都从同一起点开始*/*{margin:0;padding:0;box-sizing:border-box;/*让元素的宽度和高度包含内边距和边框*/font-family:'SegoeUI',Tahoma,Geneva,Verdana,sans-serif;/*设置默认字体*/}body{/*使用flex布局让登录框在页面中</div> </li> <li><a href="/article/1948044217209122816.htm" title="Xss漏洞总结" target="_blank">Xss漏洞总结</a> <div>一、XSS漏洞简介XSS（Cross-SiteScripting，跨站脚本攻击）是一种常见的Web前端安全漏洞，其主要危害对象是网站的访问用户。攻击者通过在网页中注入恶意脚本代码（如JavaScript、Flash等），诱使用户访问后在其浏览器中执行这些代码，从而达到窃取数据、控制会话等攻击目的。二、XSS漏洞原理XSS的根本原因在于服务器未对用户提交的输入内容进行严格过滤和转义处理，导致用户提供</div> </li> <li><a href="/article/1948032365196537856.htm" title="Python,C++,Go开发芯片电路设计APP" target="_blank">Python,C++,Go开发芯片电路设计APP</a> Geeker-2025 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a> <div>#芯片电路设计APP-Python/C++/Go综合开发方案##系统架构设计```mermaidgraphTDA[Web前端]-->B(Python设计界面)B-->C(GoAPI网关)C-->D[C++核心引擎]D-->E[硬件加速]F[数据库]-->CG[EDA工具链]-->DH[云服务]-->C```##技术栈分工|技术|应用领域|优势||------|----------|------||</div> </li> <li><a href="/article/1947517195252723712.htm" title="大学专业科普 | 计算智能、信息学与大数据" target="_blank">大学专业科普 | 计算智能、信息学与大数据</a> 鸭鸭鸭进京赶烤 <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>一、专业背景随着信息技术的飞速发展，数据的产生速度呈爆炸式增长，传统数据处理技术已经无法满足如此庞大的数据量和复杂的数据类型，大数据专业应运而生，旨在培养能够应对大数据挑战的专业人才。二、主要课程内容数学基础课程高等数学、概率论与数理统计、线性代数是大数据分析的核心数学基础，为数据处理、算法优化和模型构建提供必要的理论支持。计算机基础课程数据结构与算法、计算机网络、操作系统是大数据技术的重要支撑，</div> </li> <li><a href="/article/1947182339083792384.htm" title="我在黑马程序员学web前端" target="_blank">我在黑马程序员学web前端</a> 新手来了@click <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1网页由三部分组成1.、html负责网页的结构2.css、负责网页的美化，控制网页元素的样式3、js，负责网页交互html常见的标签：1、form表单input输入框select下拉菜单option下拉列表2、table表格thead表头ｔｂｏｄｙ是表体tr行th表头加粗ｔｄ是列ｂｒ是换行2/CＳＳ常见的三种引入方式行内样式、内部样式、外部样式用ｌｉｎｋ关键字常用的元素选择器：标签选择器、id选择</div> </li> <li><a href="/article/1946838386601947136.htm" title="前端转后端学习路线整理" target="_blank">前端转后端学习路线整理</a> <div>一、背景本人是一名Web前端开发，技术栈是Vue和React，不会Node。之前学过，但是因为一些原因（比如没有使用场景，很多概念无法理解，学完就忘等）一直也没有掌握。因为在CMS部门耳濡目染时间久了，感觉不学点后端有点说不过去，而且学起来之后发现也挺有兴趣的。但是对于一名前端开发（而且在学校的时候基本没学习）来说要学习的内容实在太多了，开始的困难在于理清各种技术都是干什么的以及它们之间的关系。现</div> </li> <li><a href="/article/1946830189489090560.htm" title="web前端入门到实战：CSS实现8种炫酷按钮" target="_blank">web前端入门到实战：CSS实现8种炫酷按钮</a> 大前端世界 <div>今天给大家分享8种炫酷按钮的CSS实现。1.3D按钮1现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从技术角度去分析如何实现这个3D按钮该按钮的立体效果主要由按钮多出的左、下两个侧面衬托出来，我们可以使用box-shadow模拟出这两个侧面：HTML：3DButton1CSS:.button-3d-1{position:relative;background:orangered;bo</div> </li> <li><a href="/article/1946765248237203456.htm" title="运维技术干货 — 不仅是 Linux 运维最佳实践" target="_blank">运维技术干货 — 不仅是 Linux 运维最佳实践</a> python算法小白 <a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a> <div>附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全：书单导航页（点击右侧极客侠栈即可打开个人博客）：极客侠栈①【Java】学习之路吐血整理技术书从入门到进阶最全50+本（珍藏版)②【算法数据结构+acm】从入门到进阶吐血整理书单50+本（珍藏版)③【数据库】从入门到进阶必读18本技术书籍网盘吐血整理网盘(珍藏版)④【Web前端】从HTML到JS到AJ</div> </li> <li><a href="/article/1946744961370222592.htm" title="web前端期末大作业实例 (1500套) 集合" target="_blank">web前端期末大作业实例 (1500套) 集合</a> <div>文章目录web前端期末大作业(1500套)集合一、网页介绍二、网页集合表白网页125套(集合)Echarts大屏数据展示150套(集合)一、基于HTML+Echarts技术制作二、基于VUE+Echarts技术制作更多源码web前端期末大作业(1500套)集合临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页</div> </li> <li><a href="/article/1943946255763828736.htm" title="《Java前端开发全栈指南：从Servlet到现代框架实战》" target="_blank">《Java前端开发全栈指南：从Servlet到现代框架实战》</a> <div>前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处</div> </li> <li><a href="/article/1943888397881896960.htm" title="计算机科学与技术" target="_blank">计算机科学与技术</a> 柳依依@ <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/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/c4%E5%89%8D%E7%AB%AF/1.htm">c4前端</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>计算机科学是一个庞大且关联性强的学科体系，初学者常面临以下痛点：-**知识点零散**：容易陷入"只见树木不见森林"的学习困境-**方向不明确**：面对海量技术栈不知从何入手-**体系缺失**：难以建立完整的知识网络1.计算机基础-计算机组成原理-冯·诺依曼体系-CPU/内存/IO设备-操作系统-进程与线程-内存管理-文件系统-计算机网络-TCP/IP模型-HTTP/HTTPS-网络安全2.编程能力</div> </li> <li><a href="/article/1943836822647926784.htm" title="小学计算机基础知识汇总,电脑基础知识：内存条知识大全，看完小学生都了解..." target="_blank">小学计算机基础知识汇总,电脑基础知识：内存条知识大全，看完小学生都了解...</a> <div>一、基础知识1、定义、作用内存条又叫随机存取存储器，是一种存储技术，但是和硬盘存储不同，内存条一断电，那么所有数据都会丢失。由于CPU处理器速度很快，而硬盘读写速度完全跟不上CPU的速度，即使是固态硬盘也一样，所以一个急着用，一个慢吞吞，因此就需要一个中间者来帮忙，这就是内存条，硬盘中的数据可以先传输到内存条保存着，如果CPU需要，那么可以直接从内存条中快速读取，相反的，CPU快速处理完后，先放到</div> </li> <li><a href="/article/1943790915952898048.htm" title="前端每周清单第 16 期：JavaScript 模块化现状；Node V8 与V6 真实性能对比" target="_blank">前端每周清单第 16 期：JavaScript 模块化现状；Node V8 与V6 真实性能对比</a> <div>前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指南为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的Web前端入门与工程实践的前端每周清单系列系列；部分文章需要自备梯子。前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指</div> </li> <li><a href="/article/1943173605189808128.htm" title="使用ENO将您的JSON对象生成HTML显示" target="_blank">使用ENO将您的JSON对象生成HTML显示</a> 土族程序员 <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/eno/1.htm">eno</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>ENO是简单易用，性能卓越，自由灵活开源的WEB前端组件；实现JSON与HTML互操作的JavaScript函数库。没有任何其它依赖，足够轻量。WEBPackNPM工程安装。npminstall@joyzl/eno然后在JS中引用import"@joyzl/eno";将JS实体对象填充到表单假设有一个如下的HTML表单TYPE1TYPE2通过以下代码将实体对象，设置到表单中，实体对象可以从服务器请</div> </li> <li><a href="/article/1943151915655294976.htm" title="Web 前端性能优化：从代码到加载速度的全面剖析" target="_blank">Web 前端性能优化：从代码到加载速度的全面剖析</a> 码力无边-OEC <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a> <div>Web前端性能优化：从代码到加载速度的全面剖析当用户访问你的网站时，如果页面加载时间超过3秒，跳出率会飙升至40%以上。更糟糕的是，移动端用户的耐心只有2秒。这意味着性能优化不仅仅是技术问题，更直接关系到业务成果。经过多年的前端开发实践，我发现很多开发者在性能优化时存在一个误区：过分关注工具和框架的选择，却忽略了最基础但最关键的优化策略。今天我们就来深入剖析前端性能优化的核心要点。性能优化的核心指</div> </li> <li><a href="/article/49.htm" title="辗转相处求最大公约数" target="_blank">辗转相处求最大公约数</a> 沐刃青蛟 <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E6%BC%8F%E6%B4%9E/1.htm">漏洞</a> <div>无言面对”江东父老“了，接触编程一年了，今天发现还不会辗转相除法求最大公约数。惭愧惭愧！   为此，总结一下以方便日后忘了好查找。   1.输入要比较的两个数a,b   忽略：2.比较大小（因为后面要的是大的数对小的数做%操作）   3.辗转相除（用循环不停的取余，如a%b,直至b=0）   4.最后的a为两数的最大公约数 &</div> </li> <li><a href="/article/176.htm" title="F5负载均衡会话保持技术及原理技术白皮书" target="_blank">F5负载均衡会话保持技术及原理技术白皮书</a> bijian1013 <a class="tag" taget="_blank" href="/search/F5/1.htm">F5</a><a class="tag" taget="_blank" href="/search/%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1/1.htm">负载均衡</a> <div>一.什么是会话保持？        在大多数电子商务的应用系统或者需要进行用户身份认证的在线系统中，一个客户与服务器经常经过好几次的交互过程才能完成一笔交易或者是一个请求的完成。由于这几次交互过程是密切相关的，服务器在进行这些交互过程的某一个交互步骤时，往往需要了解上一次交互过程的处理结果，或者上几步的交互过程结果，服务器进行下</div> </li> <li><a href="/article/303.htm" title="Object.equals方法：重载还是覆盖" target="_blank">Object.equals方法：重载还是覆盖</a> Cwind <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/generics/1.htm">generics</a><a class="tag" taget="_blank" href="/search/override/1.htm">override</a><a class="tag" taget="_blank" href="/search/overload/1.htm">overload</a> <div>本文译自StackOverflow上对此问题的讨论。原问题链接   在阅读Joshua Bloch的《Effective Java（第二版）》第8条“覆盖equals时请遵守通用约定”时对如下论述有疑问： “不要将equals声明中的Object对象替换为其他的类型。程序员编写出下面这样的equals方法并不鲜见，这会使程序员花上数个小时都搞不清它为什么不能正常工作：” pu</div> </li> <li><a href="/article/430.htm" title="初始线程" target="_blank">初始线程</a> 15700786134 <div>      暑假学习的第一课是讲线程，任务是是界面上的一条线运动起来。            既然是在界面上，那必定得先有一个界面，所以第一步就是，自己的类继承JAVA中的JFrame，在新建的类中写一个界面，代码如下： public class ShapeFr</div> </li> <li><a href="/article/557.htm" title="Linux的tcpdump" target="_blank">Linux的tcpdump</a> 被触发 <a class="tag" taget="_blank" href="/search/tcpdump/1.htm">tcpdump</a> <div>用简单的话来定义tcpdump，就是：dump the traffic on a network，根据使用者的定义对网络上的数据包进行截获的包分析工具。 tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支持针对网络层、协议、主机、网络或端口的过滤，并提供and、or、not等逻辑语句来帮助你去掉无用的信息。实用命令实例默认启动 tcpdump 普通情况下，直</div> </li> <li><a href="/article/684.htm" title="安卓程序listview优化后还是卡顿" target="_blank">安卓程序listview优化后还是卡顿</a> 肆无忌惮_ <a class="tag" taget="_blank" href="/search/ListView/1.htm">ListView</a> <div>最近用eclipse开发一个安卓app，listview使用baseadapter，里面有一个ImageView和两个TextView。使用了Holder内部类进行优化了还是很卡顿。后来发现是图片资源的问题。把一张分辨率高的图片放在了drawable-mdpi文件夹下，当我在每个item中显示，他都要进行缩放，导致很卡顿。解决办法是把这个高分辨率图片放到drawable-xxhdpi下。 &nb</div> </li> <li><a href="/article/811.htm" title="扩展easyUI tab控件，添加加载遮罩效果" target="_blank">扩展easyUI tab控件，添加加载遮罩效果</a> 知了ing <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>(function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs(&</div> </li> <li><a href="/article/938.htm" title="gradle上传jar到nexus" target="_blank">gradle上传jar到nexus</a> 矮蛋蛋 <a class="tag" taget="_blank" href="/search/gradle/1.htm">gradle</a> <div>原文地址： https://docs.gradle.org/current/userguide/maven_plugin.html configurations {     deployerJars } dependencies {     deployerJars "org.apache.maven.wagon</div> </li> <li><a href="/article/1065.htm" title="千万条数据外网导入数据库的解决方案。" target="_blank">千万条数据外网导入数据库的解决方案。</a> alleni123 <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>从某网上爬了数千万的数据，存在文本中。然后要导入mysql数据库。悲剧的是数据库和我存数据的服务器不在一个内网里面。。 ping了一下， 19ms的延迟。于是下面的代码是没用的。 ps = con.prepareStatement(sql); ps.setString(1, info.getYear())............; ps.exec</div> </li> <li><a href="/article/1192.htm" title="JAVA IO InputStreamReader和OutputStreamReader" target="_blank">JAVA IO InputStreamReader和OutputStreamReader</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/JAVA.io%E6%93%8D%E4%BD%9C+%E5%AD%97%E7%AC%A6%E6%B5%81/1.htm">JAVA.io操作字符流</a> <div>这是第三篇关于java.io的文章了，从开始对io的不了解-->熟悉--->模糊，是这几天来对文件操作中最大的感受，本来自己认为的熟悉了的，刚刚在回想起前面学的好像又不是很清晰了，模糊对我现在或许是最好的鼓励我会更加的去学加油！： JAVA的API提供了另外一种数据保存途径，使用字符流来保存的，字符流只能保存字符形式的流   字节流和字符的难点：a,怎么将读到的数据</div> </li> <li><a href="/article/1319.htm" title="MO、MT解读" target="_blank">MO、MT解读</a> bijian1013 <a class="tag" taget="_blank" href="/search/GSM/1.htm">GSM</a> <div>MO= Mobile originate，上行，即用户上发给SP的信息。MT= Mobile Terminate，下行，即SP端下发给用户的信息；上行:mo提交短信到短信中心下行:mt短信中心向特定的用户转发短信，你的短信是这样的，你所提交的短信，投递的地址是短信中心。短信中心收到你的短信后，存储转发，转发的时候就会根据你填写的接收方号码寻找路由，下发。在彩信领域是一样的道理。下行业务：由SP</div> </li> <li><a href="/article/1446.htm" title="五个JavaScript基础问题" target="_blank">五个JavaScript基础问题</a> bijian1013 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/call/1.htm">call</a><a class="tag" taget="_blank" href="/search/apply/1.htm">apply</a><a class="tag" taget="_blank" href="/search/this/1.htm">this</a><a class="tag" taget="_blank" href="/search/Hoisting/1.htm">Hoisting</a> <div>下面是五个关于前端相关的基础问题，但却很能体现JavaScript的基本功底。问题1：Scope作用范围考虑下面的代码：  (function() { var a = b = 5; })(); console.log(b); 什么会被打印在控制台上？  回答：         上面的代码会打印 5。 &nbs</div> </li> <li><a href="/article/1573.htm" title="【Thrift二】Thrift Hello World" target="_blank">【Thrift二】Thrift Hello World</a> bit1129 <a class="tag" taget="_blank" href="/search/Hello+world/1.htm">Hello world</a> <div>本篇，不考虑细节问题和为什么，先照葫芦画瓢写一个Thrift版本的Hello World，了解Thrift RPC服务开发的基本流程   1. 在Intellij中创建一个Maven模块，加入对Thrift的依赖，同时还要加上slf4j依赖，如果不加slf4j依赖，在后面启动Thrift Server时会报错 <dependency> </div> </li> <li><a href="/article/1700.htm" title="【Avro一】Avro入门" target="_blank">【Avro一】Avro入门</a> bit1129 <a class="tag" taget="_blank" href="/search/%E5%85%A5%E9%97%A8/1.htm">入门</a> <div>本文的目的主要是总结下基于Avro Schema代码生成，然后进行序列化和反序列化开发的基本流程。需要指出的是，Avro并不要求一定得根据Schema文件生成代码，这对于动态类型语言很有用。   1. 添加Maven依赖   <?xml version="1.0" encoding="UTF-8"?> <proj</div> </li> <li><a href="/article/1827.htm" title="安装nginx+ngx_lua支持WAF防护功能" target="_blank">安装nginx+ngx_lua支持WAF防护功能</a> ronin47 <div>需要的软件:LuaJIT-2.0.0.tar.gz                   nginx-1.4.4.tar.gz          &nb</div> </li> <li><a href="/article/1954.htm" title="java-5.查找最小的K个元素-使用最大堆" target="_blank">java-5.查找最小的K个元素-使用最大堆</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.Arrays; import java.util.Random; public class MinKElement { /** * 5.最小的K个元素 * I would like to use MaxHeap. * using QuickSort is also OK */ public static void</div> </li> <li><a href="/article/2081.htm" title="TCP的TIME-WAIT" target="_blank">TCP的TIME-WAIT</a> bylijinnan <a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a> <div>原文连接： http://vincent.bernat.im/en/blog/2014-tcp-time-wait-state-linux.html 以下为对原文的阅读笔记说明：主动关闭的一方称为local end，被动关闭的一方称为remote end 本地IP、本地端口、远端IP、远端端口这一“四元组”称为quadruplet，也称为socket 1、TIME_WA</div> </li> <li><a href="/article/2208.htm" title="jquery ajax 序列化表单" target="_blank">jquery ajax 序列化表单</a> coder_xpf <a class="tag" taget="_blank" href="/search/Jquery+ajax+%E5%BA%8F%E5%88%97%E5%8C%96/1.htm">Jquery ajax 序列化</a> <div>   checkbox 如果不设定值，默认选中值为on；设定值之后，选中则为设定的值   <input type="checkbox" name="favor" id="favor" checked="checked"/> $("#favor&quo</div> </li> <li><a href="/article/2335.htm" title="Apache集群乱码和最高并发控制" target="_blank">Apache集群乱码和最高并发控制</a> cuisuqiang <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91/1.htm">并发</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E7%BE%A4/1.htm">集群</a><a class="tag" taget="_blank" href="/search/%E4%B9%B1%E7%A0%81/1.htm">乱码</a> <div>都知道如果使用Http访问，那么在Connector中增加URIEncoding即可，其实使用AJP时也一样，增加useBodyEncodingForURI和URIEncoding即可。最大连接数也是一样的，增加maxThreads属性即可，如下，配置如下： <Connector maxThreads="300" port="8019" prot</div> </li> <li><a href="/article/2462.htm" title="websocket" target="_blank">websocket</a> dalan_123 <a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a> <div>一、低延迟的客户端-服务器和服务器-客户端的连接很多时候所谓的http的请求、响应的模式，都是客户端加载一个网页，直到用户在进行下一次点击的时候，什么都不会发生。并且所有的http的通信都是客户端控制的，这时候就需要用户的互动或定期轮训的，以便从服务器端加载新的数据。   通常采用的技术比如推送和comet（使用http长连接、无需安装浏览器安装插件的两种方式：基于ajax的长</div> </li> <li><a href="/article/2589.htm" title="菜鸟分析网络执法官" target="_blank">菜鸟分析网络执法官</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>  最近在论坛上看到很多贴子在讨论网络执法官的问题。菜鸟我正好知道这回事情.人道"人之患好为人师" 手里忍不住,就写点东西吧. 我也很忙.又没有MM,又没有MONEY....晕倒有点跑题. OK,闲话少说,切如正题. 要了解网络执法官的原理. 就要先了解局域网的通信的原理. 前面我们看到了.在以太网上传输的都是具有以太网头的数据包.&nbsp</div> </li> <li><a href="/article/2716.htm" title="Android相对布局属性全集" target="_blank">Android相对布局属性全集</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>RelativeLayout布局android:layout_marginTop="25dip" //顶部距离android:gravity="left" //空间布局位置android:layout_marginLeft="15dip //距离左边距 // 相对于给定ID控件android:layout_above 将该控件的底部置于给定ID的</div> </li> <li><a href="/article/2843.htm" title="Tomcat内存设置详解" target="_blank">Tomcat内存设置详解</a> eksliang <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/tomcat%E5%86%85%E5%AD%98%E8%AE%BE%E7%BD%AE/1.htm">tomcat内存设置</a> <div>Java内存溢出详解   一、常见的Java内存溢出有以下三种：   1. java.lang.OutOfMemoryError: Java heap space ----JVM Heap（堆）溢出JVM在启动的时候会自动设置JVM Heap的值，其初始空间(即-Xms)是物理内存的1/64，最大空间(-Xmx)不可超过物理内存。可以利用JVM提</div> </li> <li><a href="/article/2970.htm" title="Java6 JVM参数选项" target="_blank">Java6 JVM参数选项</a> greatwqs <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jvm%E5%8F%82%E6%95%B0/1.htm">jvm参数</a><a class="tag" taget="_blank" href="/search/JVM+Options/1.htm">JVM Options</a> <div>Java 6 JVM参数选项大全（中文版）   作者：Ken Wu Email: ken.wug@gmail.com 转载本文档请注明原文链接 http://kenwublog.com/docs/java6-jvm-options-chinese-edition.htm！   本文是基于最新的SUN官方文档Java SE 6 Hotspot VM Opt</div> </li> <li><a href="/article/3097.htm" title="weblogic创建JMC" target="_blank">weblogic创建JMC</a> i5land <a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/jms/1.htm">jms</a> <div>进入 weblogic控制太 1.创建持久化存储 --Services--Persistant Stores--new--Create FileStores--name随便起--target默认--Directory写入在本机建立的文件夹的路径--ok 2.创建JMS服务器 --Services--Messaging--JMS Servers--new--name随便起--Pers</div> </li> <li><a href="/article/3224.htm" title="基于 DHT 网络的磁力链接和BT种子的搜索引擎架构" target="_blank">基于 DHT 网络的磁力链接和BT种子的搜索引擎架构</a> justjavac <a class="tag" taget="_blank" href="/search/DHT/1.htm">DHT</a> <div>上周开发了一个磁力链接和 BT 种子的搜索引擎 {Magnet & Torrent}，本文简单介绍一下主要的系统功能和用到的技术。系统包括几个独立的部分：使用 Python 的 Scrapy 框架开发的网络爬虫，用来爬取磁力链接和种子；使用 PHP CI 框架开发的简易网站；搜索引擎目前直接使用的 MySQL，将来可以考虑使</div> </li> <li><a href="/article/3351.htm" title="sql添加、删除表中的列" target="_blank">sql添加、删除表中的列</a> macroli <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>添加没有默认值：alter table Test add BazaarType char(1) 有默认值的添加列：alter table Test add BazaarType char(1) default(0) 删除没有默认值的列：alter table Test drop COLUMN BazaarType 删除有默认值的列：先删除约束（默认值）alter table Test DRO</div> </li> <li><a href="/article/3478.htm" title="PHP中二维数组的排序方法" target="_blank">PHP中二维数组的排序方法</a> abc123456789cba <a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div><?php/*** @package     BugFree* @version     $Id: FunctionsMain.inc.php,v 1.32 2005/09/24 11:38:37 wwccss Exp $*** Sort an two-dimension array by some level </div> </li> <li><a href="/article/3605.htm" title="hive优化之------控制hive任务中的map数和reduce数" target="_blank">hive优化之------控制hive任务中的map数和reduce数</a> superlxw1234 <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/hive%E4%BC%98%E5%8C%96/1.htm">hive优化</a> <div>一、    控制hive任务中的map数: 1.    通常情况下，作业会通过input的目录产生一个或者多个map任务。主要的决定因素有： input的文件总个数，input的文件大小，集群设置的文件块大小(目前为128M, 可在hive中通过set dfs.block.size;命令查看到，该参数不能自定义修改)；2.&nbsp</div> </li> <li><a href="/article/3732.htm" title="Spring Boot 1.2.4 发布" target="_blank">Spring Boot 1.2.4 发布</a> wiselyman <a class="tag" taget="_blank" href="/search/spring+boot/1.htm">spring boot</a> <div>Spring Boot 1.2.4已于6.4日发布，repo.spring.io and Maven Central可以下载(推荐使用maven或者gradle构建下载)。   这是一个维护版本，包含了一些修复small number of fixes,建议所有的用户升级。   Spring Boot 1.3的第一个里程碑版本将在几天后发布，包含许多</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <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.  </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>