昨日正晴

xss-domcobble绕过XSSfilter

DOM破坏的原理

例题

多层标签

HTMLCollection

一些常见的标签的关系

三层标签如何获取

例题

DOM破坏的原理

DOMClobber是一种攻击技术，它利用了DOM（文档对象模型）的特性来破坏或修改网页的结构和功能。

DOMClobber攻击通常发生在Web应用程序中，其中攻击者能够注入恶意代码或修改网页的DOM结构。DOMClobber攻击的目标是修改网页中的关键元素，例如修改表单的提交目标、修改链接的目标URL等。

攻击者可以通过修改网页的DOM结构来欺骗用户或实施其他恶意行为。例如，攻击者可以修改网页中的表单目标，使用户的输入数据被发送到攻击者控制的服务器，从而窃取用户的敏感信息。攻击者还可以修改网页中的链接，使用户被重定向到恶意网站。

为了防止DOMClobber攻击，开发人员应该对用户输入进行充分的过滤和验证，并使用安全的编码方式来处理和显示用户输入。此外，开发人员还应该使用安全的DOM操作方法，避免使用直接的innerHTML或eval等危险的操作。

我们来举一个例子

打印出来如下

通过打印标签中的id或者name属性值，我们获取到了整个标签，从中我们也发现了规律，直接打印x，y不管是id还是name都可以打印出来，而通过document来获取x，y只能打印出name属性的标签，window和直接打印的结果是一样的，都可以打印。

再看下面的例子

下面这个例子可以看到cookie开始是空值，然后创建了一个div元素，在div里面添加了标签，然后添加到body里面去，这时候再打印cookie，发现变成了，这个例子成功地让本来为空值的cookie有了值，而且是我们可以控制的。

然而得到一个标签对象并不是我们想要的，有些函数的参数并不是一个对象，而是字符串这就需要函数在调用自己时，自己本身有一个ToString函数能够转换为字符串，然后让函数执行，所以我们需要一个自身拥有ToString函数的标签，而不是继承父类Object的ToString函数

可以看到一个对象调用父类的toString函数就会返回[object object]，所以我们需要一个本身有toString函数的标签，通过下面的脚本过滤出了自身拥有toString函数的标签，HTMLAreaElement()和HTMLAnchorElement()，也就是和<a>标签，所以这两个标签我们可以利用。</p> <p><span style="color:#333333;">所以我们可以通过以下代码来进⾏</span><span style="color:#333333;">fuzz </span><span style="color:#333333;">得到可以通过</span><span style="color:#333333;">toString </span><span style="color:#333333;">⽅法将其转换成字符串类型的标签</span></p> <pre><code class="language-javascript">Object.getOwnPropertyNames(window) .filter(p => p.match(/Element$/)) .map(p => window[p]) .filter(p => p && p.prototype && p.prototype.toString !== Object.prototype.toString)</code></pre> <p><a href="http://img.e-com-net.com/image/info8/fad3d0895c7c491db4ce3ef0c1836e7a.jpg" target="_blank"><img alt="xss-domcobble绕过XSSfilter_第5张图片" height="325" src="http://img.e-com-net.com/image/info8/fad3d0895c7c491db4ce3ef0c1836e7a.jpg" width="588" style="border:1px solid black;"></a></p> <h1 id="%E4%BE%8B%E9%A2%98">例题</h1> <p>这道题通过get参数将内容写入h2标签内，而且有过滤框架DOMPurify，这个过滤框架由安全团队cure53开发，以我们的技术很难绕过，但是注意setTimeout函数内的ok参数，这里的JS代码是没有任何关于ok参数的定义的，所以我们可以使用DOM破坏。XSS Game - Ok, Boomer | PwnFunction</p> <p><a href="http://img.e-com-net.com/image/info8/e82abd80e4b54bddaa495620d3790cf7.jpg" target="_blank"><img alt="xss-domcobble绕过XSSfilter_第6张图片" height="338" src="http://img.e-com-net.com/image/info8/e82abd80e4b54bddaa495620d3790cf7.jpg" width="650" style="border:1px solid black;"></a></p> <p>构造ok参数，因为setTimeout函数执行字符串，所以需要用到<a>或者<textarea>标签</p> <blockquote> <p><a id=ok href="tel:alert(1)">a</a></p> </blockquote> <p>因为DOMPurify框架过滤了javascript，所以我们用tel，tel也可以执行script脚本</p> <p><a href="http://img.e-com-net.com/image/info8/27519aa44bc7405f9624e404ac11c2d5.jpg" target="_blank"><img alt="xss-domcobble绕过XSSfilter_第7张图片" height="214" src="http://img.e-com-net.com/image/info8/27519aa44bc7405f9624e404ac11c2d5.jpg" width="650" style="border:1px solid black;"></a></p> <h1 id="%E5%A4%9A%E5%B1%82%E6%A0%87%E7%AD%BE">多层标签</h1> <p>如果我们需要获取一个标签下的子标签的内容，怎么获取呢？可以直接x.y吗？</p> <p><a href="http://img.e-com-net.com/image/info8/81c5a0c09d234719b473a6b7aeb2caf3.jpg" target="_blank"><img alt="xss-domcobble绕过XSSfilter_第8张图片" height="211" src="http://img.e-com-net.com/image/info8/81c5a0c09d234719b473a6b7aeb2caf3.jpg" width="531" style="border:1px solid black;"></a></p> <p>很可惜，无法获取。</p> <div> <a href="http://img.e-com-net.com/image/info8/bbfb62997ea14ed88b9eb8d7f2afb1e3.jpg" target="_blank"><img alt="xss-domcobble绕过XSSfilter_第9张图片" height="114" src="http://img.e-com-net.com/image/info8/bbfb62997ea14ed88b9eb8d7f2afb1e3.jpg" width="650" style="border:1px solid black;"></a> </div> <h2 id="HTMLCollection"><span style="color:#333333;"><strong>HTMLCollection </strong></span></h2> <p></p> <div> <span style="color:#333333;">上述结果中，让我们值得注意的是我们可以通过</span> <span style="color:#333333;">collection[name] </span> <span style="color:#333333;">的形式来调⽤其中的元素，所以我们似乎可以通，过先构建⼀个HTMLCollection </span> <span style="color:#333333;">，再通过</span> <span style="color:#333333;">collection[name] </span> <span style="color:#333333;">的形式来调⽤。</span> </div> <blockquote> <div> <span style="color:#117700;"><div </span> <span style="color:#0000cc;">id</span> <span style="color:#333333;">=</span> <span style="color:#aa1111;">"x"</span> <span style="color:#117700;">> </span> </div> <div> <span style="color:#117700;"><a </span> <span style="color:#0000cc;">id</span> <span style="color:#333333;">=</span> <span style="color:#aa1111;">"x" </span> <span style="color:#0000cc;">name</span> <span style="color:#333333;">=</span> <span style="color:#aa1111;">y </span> <span style="color:#0000cc;">href</span> <span style="color:#333333;">=</span> <span style="color:#aa1111;">"1:hasaki"</span> <span style="color:#117700;">></a> </span> </div> <div> <span style="color:#117700;"></div> </span> </div> </blockquote> <div> <a href="http://img.e-com-net.com/image/info8/c6df2ebb7e9b40ceaadcc98de15fa620.jpg" target="_blank"><img alt="xss-domcobble绕过XSSfilter_第10张图片" height="138" src="http://img.e-com-net.com/image/info8/c6df2ebb7e9b40ceaadcc98de15fa620.jpg" width="650" style="border:1px solid black;"></a> </div> <div> 此时x指代了一个集合，既有div也有a标签，然后再获取它的y属性。 </div> <h3 id="%E4%B8%80%E4%BA%9B%E5%B8%B8%E8%A7%81%E7%9A%84%E6%A0%87%E7%AD%BE%E7%9A%84%E5%85%B3%E7%B3%BB">一些常见的标签的关系</h3> <blockquote> <div> <span style="color:#333333;">form->button form->fieldset form->image form->img form->input form->object form->output </span> </div> </blockquote> <div> <a href="http://img.e-com-net.com/image/info8/facb09c6e2304452b91a6aa862a8a003.jpg" target="_blank"><img alt="xss-domcobble绕过XSSfilter_第11张图片" height="510" src="http://img.e-com-net.com/image/info8/facb09c6e2304452b91a6aa862a8a003.jpg" width="650" style="border:1px solid black;"></a> </div> <div> <h3 id="3.%E4%B8%89%E5%B1%82%E6%A0%87%E7%AD%BE%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96">三层标签如何获取</h3> </div> <div> 那么三层标签又该如何处理呢？ </div> <div> <p>如果有三层标签，就需要要⽤到以上两种技巧来构建了，先分析x.y，x是一个集合，然后获取y，利用了第一种方法--集合方式，获取了第一个form标签然后x.y.z，因为form和output标签存在关系，可以直接调用y.z，利用了第二种方法--标签关系最后x.y.z.value就成功拿到output标签内的内容。</p> <p><a href="http://img.e-com-net.com/image/info8/86667efd46ab42c2ac17413914d4485e.jpg" target="_blank"><img alt="xss-domcobble绕过XSSfilter_第12张图片" height="339" src="http://img.e-com-net.com/image/info8/86667efd46ab42c2ac17413914d4485e.jpg" width="650" style="border:1px solid black;"></a></p> <p><br><span style="color:#333333;">这个先⽤⼀个</span><span style="color:#333333;">HTMLCollection </span><span style="color:#333333;">获取第⼆级，再在第⼀个表单中⽤</span><span style="color:#333333;">output </span><span style="color:#333333;">标签。</span></p> <h3 id="%E4%BE%8B%E9%A2%982" style="background-color:transparent;"><span style="color:#333333;">例题2</span></h3> <p><span style="color:#333333;">以下是他的js代码。</span></p> <pre><code class="language-javascript"> const data = decodeURIComponent(location.hash.substr(1)); const root = document.createElement('div'); //data为URL后的hash值，然后创建了一个div标签，把我们输入的hash值放进了div这个标签里面. root.innerHTML = data; // 这里模拟了XSS过滤的过程，方法是移除所有属性 for (let el of root.querySelectorAll('*')) { let attrs = [];//第一个for循环拿出了div元素的所有后代元素，用el表示,并且定义了一个空数组attrs. for (let attr of el.attributes) { attrs.push(attr.name);//第二个for循环拿出了后代元素的所有属性，用attr表示,然后将属性添加到attrs数组里. } for (let name of attrs) { el.removeAttribute(name); }//第三个for循环拿出了attrs数组里面的属性，用name表示,然后移除掉这个元素的该属性. } document.body.appendChild(root); //最后将div添加到body里面去.</code></pre> </div> <div> 我们可以直接看下面这个例子 </div> <div> <a href="http://img.e-com-net.com/image/info8/d39ec2e7617d49a98f349e8430bc79c8.jpg" target="_blank"><img alt="xss-domcobble绕过XSSfilter_第13张图片" height="103" src="http://img.e-com-net.com/image/info8/d39ec2e7617d49a98f349e8430bc79c8.jpg" width="650" style="border:1px solid black;"></a> </div> <div> <a href="http://img.e-com-net.com/image/info8/0fe381d510fa46e38a6665544531560e.jpg" target="_blank"><img alt="" height="59" src="http://img.e-com-net.com/image/info8/0fe381d510fa46e38a6665544531560e.jpg" width="253"></a> </div> <div> 你的img的所有值被删除，这就是上述js代码的功能，移除掉我们输入标签的所有属性。如果还不理解可以进行断点调试。 </div> <div> <a href="http://img.e-com-net.com/image/info8/1ac450aefc4743ee93cb5e95df8618b4.jpg" target="_blank"><img alt="" height="67" src="http://img.e-com-net.com/image/info8/1ac450aefc4743ee93cb5e95df8618b4.jpg" width="650"></a> </div> <div></div> <div> 我们最主要的想法就是让el.attributes不要去实现他原有的功能，而是被我们的自定义代码所取代。 </div> <div> 那么我们来看一下playload </div> <div> <pre><code class="language-javascript"> <style>@keyframes x{}</style><form style="animation-name:x" onanimationstart="alert(1)"><input id=attributes><input id=attributes></form></code></pre> <p>这段代码的主要作用是创建一个带有两个输入字段的表单，并在表单元素的动画开始时触发一个警告框，但实际上由于CSS动画为空，所以没有实际的动画效果，即表单元素的动画开始时，将触发<code>alert(1)。</code></p> <p><code>这是chatgpt对于这段代码的解读，我们这样写</code>就是用来破坏el.attributes属性的，而上文我们的标签关系中有form和input这个关系属性的，可以直接调用x.y，所以代码中的el.attributes正好是我们的input标签，那为什么不用一个input标签，而是两个呢？</p> <p>因为在for循环中el.attributes需要是可迭代的，而一个input标签只是一个对象，所以是不可迭代的</p> <p><a href="http://img.e-com-net.com/image/info8/04fb43b07e5942d4bfe00b7e098fab53.jpg" target="_blank"><img alt="xss-domcobble绕过XSSfilter_第14张图片" height="125" src="http://img.e-com-net.com/image/info8/04fb43b07e5942d4bfe00b7e098fab53.jpg" width="650" style="border:1px solid black;"></a></p> <p>报错如下</p> <p><a href="http://img.e-com-net.com/image/info8/48db9a6680504864b77389ff2577f42d.jpg" target="_blank"><img alt="xss-domcobble绕过XSSfilter_第15张图片" height="109" src="http://img.e-com-net.com/image/info8/48db9a6680504864b77389ff2577f42d.jpg" width="546" style="border:1px solid black;"></a></p> <p>所以我们需要两个input标签来组成一个集合，这时，集合就是可迭代的了根据代码，首先到style标签，没有属性可删，然后到form标签因为迭代对象变成了input标签集合，此时attr就变成了undefined，所以attr.name也就不存在，此时attrs数组获取不到form标签里的任何属性，自然下面的for循环也不会删除form表单的任何属性。</p> <p><a href="http://img.e-com-net.com/image/info8/0b7709b4871845a5832718be1275f970.jpg" target="_blank"><img alt="" height="80" src="http://img.e-com-net.com/image/info8/0b7709b4871845a5832718be1275f970.jpg" width="468"></a></p> <p><a href="http://img.e-com-net.com/image/info8/264c7c3b987a48f5bafadf89848fcc0b.jpg" target="_blank"><img alt="xss-domcobble绕过XSSfilter_第16张图片" height="206" src="http://img.e-com-net.com/image/info8/264c7c3b987a48f5bafadf89848fcc0b.jpg" width="526" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/7f312d3400cd4e0d9e3c308a62f2df55.jpg" target="_blank"><img alt="xss-domcobble绕过XSSfilter_第17张图片" height="136" src="http://img.e-com-net.com/image/info8/7f312d3400cd4e0d9e3c308a62f2df55.jpg" width="513" style="border:1px solid black;"></a></p> <p>最后到我们的两个input标签，因为此时目的已经达到，删除了属性也无妨，最后成功绕过。</p> <p></p> <p><a href="http://img.e-com-net.com/image/info8/a06a12a0da7b4caf85bc7aa3a512d488.jpg" target="_blank"><img alt="xss-domcobble绕过XSSfilter_第18张图片" height="158" src="http://img.e-com-net.com/image/info8/a06a12a0da7b4caf85bc7aa3a512d488.jpg" width="650" style="border:1px solid black;"></a></p> </div> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1701131775876608000"></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">你可能感兴趣的:(xss,前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/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/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/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/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> <span class="text-muted">苹果酱0567</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/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>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> <span class="text-muted">2401_85194651</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> <span class="text-muted">全能全知者</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> <span class="text-muted">jun778895</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</a> <span class="text-muted">余生逆风飞翔</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> <span class="text-muted">2401_85123349</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> <span class="text-muted">马小蜗</span> <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835368019430305792.htm" title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a> <span class="text-muted">九旬大爷的梦</span> <div>最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> <span class="text-muted">ZhangTao_zata</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835352325032603648.htm" title="第三十一节:Vue路由:前端路由vs后端路由的了解" target="_blank">第三十一节:Vue路由:前端路由vs后端路由的了解</a> <span class="text-muted">曹老师</span> <div>1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访</div> </li> <li><a href="/article/1835350917352878080.htm" title="华雁智科前端面试题" target="_blank">华雁智科前端面试题</a> <span class="text-muted">因为奋斗超太帅啦</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98%E6%95%B4%E7%90%86/1.htm">前端笔试面试问题整理</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l</div> </li> <li><a href="/article/1835350535818014720.htm" title="如何建设数据中台（五）——数据汇集—打破企业数据孤岛" target="_blank">如何建设数据中台（五）——数据汇集—打破企业数据孤岛</a> <span class="text-muted">weixin_47088026</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95%E5%92%8C%E6%80%BB%E7%BB%93/1.htm">学习记录和总结</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E5%8F%B0/1.htm">中台</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8F%B0/1.htm">数据中台</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi</div> </li> <li><a href="/article/1835343473629294592.htm" title="分布式锁和spring事务管理" target="_blank">分布式锁和spring事务管理</a> <span class="text-muted">暴躁的鱼</span> <a class="tag" taget="_blank" href="/search/%E9%94%81%E5%8F%8A%E4%BA%8B%E5%8A%A1/1.htm">锁及事务</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据</div> </li> <li><a href="/article/1835340577596600320.htm" title="前端CSS面试常见题" target="_blank">前端CSS面试常见题</a> <span class="text-muted">剑亦未配妥</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子</div> </li> <li><a href="/article/1835331376895848448.htm" title="【JS】前端文件读取FileReader操作总结" target="_blank">【JS】前端文件读取FileReader操作总结</a> <span class="text-muted">程序员-张师傅</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi</div> </li> <li><a href="/article/1835331375377510400.htm" title="【前端】vue 报错:The template root requires exactly one element" target="_blank">【前端】vue 报错:The template root requires exactly one element</a> <span class="text-muted">程序员-张师傅</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行</div> </li> <li><a href="/article/1835302949362954240.htm" title="从单体到微服务：FastAPI ‘挂载’子应用程序的转变" target="_blank">从单体到微服务：FastAPI ‘挂载’子应用程序的转变</a> <span class="text-muted">黑金IT</span> <a class="tag" taget="_blank" href="/search/fastapi/1.htm">fastapi</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/fastapi/1.htm">fastapi</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方</div> </li> <li><a href="/article/1835296397365178368.htm" title="创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几</a> <span class="text-muted">uthRaman</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div> </li> <li><a href="/article/1835293121953492992.htm" title="了解 UNPKG：前端开发者的包管理利器" target="_blank">了解 UNPKG：前端开发者的包管理利器</a> <span class="text-muted">小于负无穷</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n</div> </li> <li><a href="/article/1835291483406692352.htm" title="前端three.js的Sprite模拟下雪动画效果" target="_blank">前端three.js的Sprite模拟下雪动画效果</a> <span class="text-muted">qq_35430208</span> <a class="tag" taget="_blank" href="/search/three.js/1.htm">three.js</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/%E4%B8%89%E7%BB%B4%E5%9C%BA%E6%99%AF%E4%B8%AD%E4%B8%8B%E9%9B%AA%E6%95%88%E6%9E%9C/1.htm">三维场景中下雪效果</a><a class="tag" taget="_blank" href="/search/threejs%E5%AE%9E%E7%8E%B0%E4%B8%8B%E9%9B%AA%E6%95%88%E6%9E%9C/1.htm">threejs实现下雪效果</a> <div>一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add</div> </li> <li><a href="/article/1835243206963458048.htm" title="系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机" target="_blank">系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机</a> <span class="text-muted">rabbit_it</span> <a class="tag" taget="_blank" href="/search/qiankun%E5%AD%A6%E4%B9%A0/1.htm">qiankun学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/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/%E9%98%BF%E9%87%8C%E4%BA%91/1.htm">阿里云</a> <div>一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性</div> </li> <li><a href="/article/1835239047803531264.htm" title="ODOO不同版本与平台选择" target="_blank">ODOO不同版本与平台选择</a> <span class="text-muted">chouchengyin2080</span> <a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架</div> </li> <li><a href="/article/1835221149026447360.htm" title="Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数" target="_blank">Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数</a> <span class="text-muted">qcidyu</span> <a class="tag" taget="_blank" href="/search/%E5%A5%BD%E7%94%A8%E7%9A%84%E5%B7%A5%E5%85%B7%E9%9B%86%E5%90%88/1.htm">好用的工具集合</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E6%95%88%E7%8E%87/1.htm">代码效率</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8A%80%E5%B7%A7/1.htm">前端技巧</a><a class="tag" taget="_blank" href="/search/Vue%E5%BC%80%E5%8F%91/1.htm">Vue开发</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E5%90%88%E5%BC%8F%E5%87%BD%E6%95%B0/1.htm">组合式函数</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E5%9D%97%E7%AE%A1%E7%90%86/1.htm">模块管理</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%AF%BC%E5%85%A5/1.htm">自动导入</a><a class="tag" taget="_blank" href="/search/Nuxt/1.htm">Nuxt</a><a class="tag" taget="_blank" href="/search/Kit/1.htm">Kit</a> <div>title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N</div> </li> <li><a href="/article/108.htm" title="Nginx负载均衡" target="_blank">Nginx负载均衡</a> <span class="text-muted">510888780</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a> <div>Nginx负载均衡一些基础知识: nginx 的 upstream目前支持 4 种方式的分配 1)、轮询（默认）每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。 2)、weight 指定轮询几率，weight和访问比率成正比</div> </li> <li><a href="/article/235.htm" title="RedHat 6.4 安装 rabbitmq" target="_blank">RedHat 6.4 安装 rabbitmq</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/erlang/1.htm">erlang</a><a class="tag" taget="_blank" href="/search/rabbitmq/1.htm">rabbitmq</a><a class="tag" taget="_blank" href="/search/redhat/1.htm">redhat</a> <div>在 linux 下安装软件就是折腾，首先是测试机不能上外网要找运维开通，开通后发现测试机的 yum 不能使用于是又要配置 yum 源，最后安装 rabbitmq 时也尝试了两种方法最后才安装成功机器版本： [root@redhat1 rabbitmq]# lsb_release LSB Version: :base-4.0-amd64:base-4.0-noarch:core</div> </li> <li><a href="/article/362.htm" title="FilenameUtils工具类" target="_blank">FilenameUtils工具类</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/FilenameUtils/1.htm">FilenameUtils</a><a class="tag" taget="_blank" href="/search/common-io/1.htm">common-io</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2217081 一、概述这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。非常的好用。 </div> </li> <li><a href="/article/489.htm" title="xml文件解析SAX" target="_blank">xml文件解析SAX</a> <span class="text-muted">不懂事的小屁孩</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>xml文件解析:xml文件解析有四种方式， 1.DOM生成和解析XML文档(SAX是基于事件流的解析) 2.SAX生成和解析XML文档(基于XML文档树结构的解析) 3.DOM4J生成和解析XML文档 4.JDOM生成和解析XML 本文章用第一种方法进行解析，使用android常用的DefaultHandler import org.xml.sax.Attributes; </div> </li> <li><a href="/article/616.htm" title="通过定时任务执行mysql的定期删除和新建分区，此处是按日分区" target="_blank">通过定时任务执行mysql的定期删除和新建分区，此处是按日分区</a> <span class="text-muted">酷的飞上天空</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>使用python脚本作为命令脚本，linux的定时任务来每天定时执行 #!/usr/bin/python # -*- coding: utf8 -*- import pymysql import datetime import calendar #要分区的表 table_name = 'my_table' #连接数据库的信息 host,user,passwd,db = </div> </li> <li><a href="/article/743.htm" title="如何搭建数据湖架构？听听专家的意见" target="_blank">如何搭建数据湖架构？听听专家的意见</a> <span class="text-muted">蓝儿唯美</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Edo Interactive在几年前遇到一个大问题：公司使用交易数据来帮助零售商和餐馆进行个性化促销，但其数据仓库没有足够时间去处理所有的信用卡和借记卡交易数据 “我们要花费27小时来处理每日的数据量，”Edo主管基础设施和信息系统的高级副总裁Tim Garnto说道：“所以在2013年，我们放弃了现有的基于PostgreSQL的关系型数据库系统，使用了Hadoop集群作为公司的数</div> </li> <li><a href="/article/870.htm" title="spring学习——控制反转与依赖注入" target="_blank">spring学习——控制反转与依赖注入</a> <span class="text-muted">a-john</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div> 控制反转（Inversion of Control，英文缩写为IoC）是一个重要的面向对象编程的法则来削减计算机程序的耦合问题，也是轻量级的Spring框架的核心。控制反转一般分为两种类型，依赖注入（Dependency Injection，简称DI）和依赖查找（Dependency Lookup）。依赖注入应用比较广泛。 </div> </li> <li><a href="/article/997.htm" title="用spool+unixshell生成文本文件的方法" target="_blank">用spool+unixshell生成文本文件的方法</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/xshell/1.htm">xshell</a> <div>例如我们把scott.dept表生成文本文件的语句写成dept.sql,内容如下: 　　set pages 50000; 　　set lines 200; 　　set trims on; 　　set heading off; 　　spool /oracle_backup/log/test/dept.lst; 　　select deptno||','||dname||','||loc </div> </li> <li><a href="/article/1124.htm" title="1、基础--名词解析(OOA/OOD/OOP)" target="_blank">1、基础--名词解析(OOA/OOD/OOP)</a> <span class="text-muted">asia007</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/1.htm">学习基础知识</a> <div>OOA:Object-Oriented Analysis（面向对象分析方法）是在一个系统的开发过程中进行了系统业务调查以后，按照面向对象的思想来分析问题。OOA与结构化分析有较大的区别。OOA所强调的是在系统调查资料的基础上，针对OO方法所需要的素材进行的归类分析和整理，而不是对管理业务现状和方法的分析。　　OOA（面向对象的分析）模型由5个层次（主题层、对象类层、结构层、属性层和服务层）</div> </li> <li><a href="/article/1251.htm" title="浅谈java转成json编码格式技术" target="_blank">浅谈java转成json编码格式技术</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/json%E7%BC%96%E7%A0%81/1.htm">json编码</a><a class="tag" taget="_blank" href="/search/java%E8%BD%AC%E6%88%90json%E7%BC%96%E7%A0%81/1.htm">java转成json编码</a> <div>json编码;是一个轻量级的数据存储和传输的语言在java中需要引入json相关的包,引包方式在工程的lib下就可以了 JSON与JAVA数据的转换（JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非常适合于服务器与 JavaScript 之间的数据的交</div> </li> <li><a href="/article/1378.htm" title="web.xml之Spring配置(基于Spring+Struts+Ibatis)" target="_blank">web.xml之Spring配置(基于Spring+Struts+Ibatis)</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/SSI/1.htm">SSI</a><a class="tag" taget="_blank" href="/search/spring%E9%85%8D%E7%BD%AE/1.htm">spring配置</a> <div>指定Spring配置文件位置 <context-param> <param-name>contextConfigLocation</param-name> <param-value> /WEB-INF/spring-dao-bean.xml,/WEB-INF/spring-resources.xml, /WEB-INF/</div> </li> <li><a href="/article/1505.htm" title="Installing SonarQube（Fail to download libraries from server）" target="_blank">Installing SonarQube（Fail to download libraries from server）</a> <span class="text-muted">sunjing</span> <a class="tag" taget="_blank" href="/search/Install/1.htm">Install</a><a class="tag" taget="_blank" href="/search/Sonar/1.htm">Sonar</a> <div>1. Download and unzip the SonarQube distribution 2. Starting the Web Server The default port is "9000" and the context path is "/". These values can be changed in &l</div> </li> <li><a href="/article/1632.htm" title="【MongoDB学习笔记十一】Mongo副本集基本的增删查" target="_blank">【MongoDB学习笔记十一】Mongo副本集基本的增删查</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>一、创建复本集假设mongod,mongo已经配置在系统路径变量上，启动三个命令行窗口，分别执行如下命令： mongod --port 27017 --dbpath data1 --replSet rs0 mongod --port 27018 --dbpath data2 --replSet rs0 mongod --port 27019 -</div> </li> <li><a href="/article/1759.htm" title="Anychart图表系列二之执行Flash和HTML5渲染" target="_blank">Anychart图表系列二之执行Flash和HTML5渲染</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/Flash/1.htm">Flash</a> <div>今天介绍Anychart的Flash和HTML5渲染功能 HTML5 Anychart从6.0第一个版本起，已经逐渐开始支持各种图的HTML5渲染效果了，也就是说即使你没有安装Flash插件，只要浏览器支持HTML5，也能看到Anychart的图形（不过这些是需要做一些配置的）。这里要提醒下大家，Anychart6.0版本对HTML5的支持还不算很成熟，目前还处于</div> </li> <li><a href="/article/1886.htm" title="Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa" target="_blank">Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa</a> <span class="text-muted">bozch</span> <a class="tag" taget="_blank" href="/search/laravel/1.htm">laravel</a> <div>昨天在为了把laravel升级到最新的版本，突然之间就出现了如下错误： ErrorException thrown with message "Declaration of Illuminate\View\Engines\CompilerEngine::handleViewException() should be compatible with Illuminate\View\Eng</div> </li> <li><a href="/article/2013.htm" title="编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜" target="_blank">编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜</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 Nim { /**编程之美 NIM游戏分析问题：有N块石头和两个玩家A和B，玩家A先将石头随机分成若干堆，然后按照BABA...的顺序不断轮流取石头，能将剩下的石头一次取光的玩家获胜，每次取石头时，每个玩家只能从若干堆石头中任选一堆，</div> </li> <li><a href="/article/2140.htm" title="lunce创建索引及简单查询" target="_blank">lunce创建索引及简单查询</a> <span class="text-muted">chengxuyuancsdn</span> <a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2/1.htm">查询</a><a class="tag" taget="_blank" href="/search/%E5%88%9B%E5%BB%BA%E7%B4%A2%E5%BC%95/1.htm">创建索引</a><a class="tag" taget="_blank" href="/search/lunce/1.htm">lunce</a> <div>import java.io.File; import java.io.IOException; import org.apache.lucene.analysis.Analyzer; import org.apache.lucene.analysis.standard.StandardAnalyzer; import org.apache.lucene.document.Docume</div> </li> <li><a href="/article/2267.htm" title="[IT与投资]坚持独立自主的研究核心技术" target="_blank">[IT与投资]坚持独立自主的研究核心技术</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/it/1.htm">it</a> <div> 和别人合作开发某项产品....如果互相之间的技术水平不同,那么这种合作很难进行,一般都会成为强者控制弱者的方法和手段..... 所以弱者,在遇到技术难题的时候,最好不要一开始就去寻求强者的帮助,因为在我们这颗星球上,生物都有一种控制其</div> </li> <li><a href="/article/2394.htm" title="flashback transaction闪回事务查询" target="_blank">flashback transaction闪回事务查询</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/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E9%97%AA%E5%9B%9E%E4%BA%8B%E5%8A%A1/1.htm">闪回事务</a> <div> 闪回事务查询有别于闪回查询的特点有以下3个：（1）其正常工作不但需要利用撤销数据，还需要事先启用最小补充日志。（2）返回的结果不是以前的“旧”数据，而是能够将当前数据修改为以前的样子的撤销SQL（Undo SQL）语句。（3）集中地在名为flashback_transaction_query表上查询，而不是在各个表上通过“as of”或“vers</div> </li> <li><a href="/article/2521.htm" title="Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件" target="_blank">Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件</a> <span class="text-muted">游其是你</span> <a class="tag" taget="_blank" href="/search/FilenameFilter/1.htm">FilenameFilter</a> <div>这是一个FilenameFilter类用法的例子，实现的列举出“c:\\folder“路径下所有以“.jpg”扩展名的文件。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 </div> </li> <li><a href="/article/2648.htm" title="C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题" target="_blank">C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div># include <stdio.h> int f(void) //括号中的void表示该函数不能接受数据，int表示返回的类型为int类型 { return 10; //向主调函数返回10 } void g(void) //函数名前面的void表示该函数没有返回值 { //return 10; //error 与第8行行首的void相矛盾 } in</div> </li> <li><a href="/article/2775.htm" title="今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl" target="_blank">今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again 处理很简单，修改文件“/etc/yum.repos.d/epel.repo”，将baseurl的注释取消， mirrorlist注释掉。即可。 &n</div> </li> <li><a href="/article/2902.htm" title="单例模式" target="_blank">单例模式</a> <span class="text-muted">shuizhaosi888</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a> <div>单例模式懒汉式 public class RunMain { /** * 私有构造 */ private RunMain() { } /** * 内部类，用于占位，只有 */ private static class SingletonRunMain { priv</div> </li> <li><a href="/article/3029.htm" title="Spring Security（09）——Filter" target="_blank">Spring Security（09）——Filter</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a> <div>Filter 目录 1.1 Filter顺序 1.2 添加Filter到FilterChain 1.3 DelegatingFilterProxy 1.4 FilterChainProxy 1.5</div> </li> <li><a href="/article/3156.htm" title="公司项目NODEJS实践0.1" target="_blank">公司项目NODEJS实践0.1</a> <span class="text-muted">逐行分析JS源代码</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a> <div> 一、前言前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。网上有很多nod</div> </li> <li><a href="/article/3283.htm" title="java.lang.Math" target="_blank">java.lang.Math</a> <span class="text-muted">liuhaibo_ljf</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a><a class="tag" taget="_blank" href="/search/lang/1.htm">lang</a> <div>System.out.println(Math.PI); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1)); System.out.println(Math.abs(111111111)); System.out.println(Mat</div> </li> <li><a href="/article/3410.htm" title="linux下时间同步" target="_blank">linux下时间同步</a> <span class="text-muted">nonobaba</span> <a class="tag" taget="_blank" href="/search/ntp/1.htm">ntp</a> <div>今天在linux下做hbase集群的时候，发现hmaster启动成功了，但是用hbase命令进入shell的时候报了一个错误 PleaseHoldException: Master is initializing，查看了日志，大致意思是说master和slave时间不同步，没办法，只好找一种手动同步一下，后来发现一共部署了10来台机器，手动同步偏差又比较大，所以还是从网上找现成的解决方</div> </li> <li><a href="/article/3537.htm" title="ZooKeeper3.4.6的集群部署" target="_blank">ZooKeeper3.4.6的集群部署</a> <span class="text-muted">roadrunners</span> <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E7%BE%A4/1.htm">集群</a><a class="tag" taget="_blank" href="/search/%E9%83%A8%E7%BD%B2/1.htm">部署</a> <div>ZooKeeper是Apache的一个开源项目，在分布式服务中应用比较广泛。它主要用来解决分布式应用中经常遇到的一些数据管理问题，如：统一命名服务、状态同步、集群管理、配置文件管理、同步锁、队列等。这里主要讲集群中ZooKeeper的部署。 1、准备工作我们准备3台机器做ZooKeeper集群，分别在3台机器上创建ZooKeeper需要的目录。数据存储目录</div> </li> <li><a href="/article/3664.htm" title="Java高效读取大文件" target="_blank">Java高效读取大文件</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>　　读取文件行的标准方式是在内存中读取，Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法：　　Files.readLines(new File(path), Charsets.UTF_8); 　　FileUtils.readLines(new File(path)); 　　这种方法带来的问题是文件的所有行都被存放在内存中，当文件足够大时很快就会导致</div> </li> <li><a href="/article/3791.htm" title="微信支付api返回的xml转换为Map的方法" target="_blank">微信支付api返回的xml转换为Map的方法</a> <span class="text-muted">xu3508620</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/map/1.htm">map</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1api/1.htm">微信api</a> <div>举例如下： <xml> <return_code><![CDATA[SUCCESS]]></return_code> <return_msg><![CDATA[OK]]></return_msg> <appid><</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.  </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>