杜尼卜

自动增长Textareas的最干净技巧

想法是使 </code> 更像 <code><div></code>，因此它的高度可以扩展以包含当前值。这几乎是奇怪的，没有一个简单的原生解决方案，不是吗？</p> <p>现在我得到了一个非常好的原生解决方案。</p> <p>这里是演示，如果你只是想要一个工作的例子</p> <pre><code class="html"><h1>Auto-Growing <code><textarea></code></h1> <form action="#0"> <label for="text">Text:</label> <div class="grow-wrap"> <textarea name="text" id="text" onInput="this.parentNode.dataset.replicatedValue = this.value">

.grow-wrap {
  /* 简单的方法将元素叠加在一起，并根据最高者的高度确定它们的大小。 */
  display: grid;
}
.grow-wrap::after {
  /* 注意奇怪的空间！需要预防跳动行为 */
  content: attr(data-replicated-value) " ";

  /* 这就是textarea文本的表现形式 */
  white-space: pre-wrap;

  /* 隐藏在视图，点击和屏幕阅读器中 */
  visibility: hidden;
}
.grow-wrap > textarea {
  /* 您可以保留此设置，但是在用户调整大小后，它将破坏自动调整大小 */
  resize: none;

  /* Firefox显示增长的滚动条，您可以像这样隐藏。 */
  overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
  /* 需要相同的样式！ */
  border: 1px solid black;
  padding: 0.5rem;
  font: inherit;

  /* 放在彼此之上 */
  grid-area: 1 / 1 / 2 / 2;
}

body {
  margin: 2rem;
  font: 1rem/1.4 system-ui, sans-serif;
}

label {
  display: block;
}

效果

诀窍是，你要准确地将 </code> 的内容复制到一个可以自动展开高度的元素中，并匹配它的大小。</strong></p> <p>所以你有一个 <code><textarea></code>，它不能自动展开高度。</p> <p>相反，您可以在另一个元素中完全复制该元素的外观，内容和位置，再复制的元素隐藏起来。</p> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/df1ffebb8a9348ecbbae4ac2662d7748.jpg" target="_blank"><img alt="自动增长Textareas的最干净技巧_第1张图片" title="" src="http://img.e-com-net.com/image/info9/df1ffebb8a9348ecbbae4ac2662d7748.jpg" width="650" height="430" style="border:1px solid black;"></a></span></p> <p>现在，这三个元素都是相互联系的。无论哪一个子元素最高，都会把父元素推到那个高度，而另一个子元素也会跟随。这意味着 <code><textarea></code> 的最小高度将成为“基础”高度，但是如果复制的文本元素碰巧变高了，所有的东西也会随之变高。</p> <p>好聪明，我太喜欢了。</p> <p><strong>您需要确保复制的元素完全相同</strong></p> <p>相同的字体，相同的填充，相同的页边距，相同的边框...所有内容。这是一个相同的副本，只是在视觉上隐藏了 <code>visibility: hidden;</code>；如果不是完全一样的，那么所有的东西都不会完全正确地生长在一起。</p> <p>我们还需要在复制的文本上 <code>white-space: pre-wrap;</code> ，因为这就是textareas的表现。</p> <p><strong>这是最奇怪的部分</strong></p> <p>在我的演示中，我将 <code>::after</code> 用于复制的文本。我不确定这是否是最好的方法。对我来说感觉很干净，但是我想知道使用 <code><div aria-hidden =“ true”></code> 对于屏幕阅读器是否更安全？</p> <p>或 <code>visibility: hidden;</code> 够了吗？无论如何，那不是奇怪的部分。这是奇怪的部分：</p> <pre><code class="css">content: attr(data-replicated-value) " ";</code></pre> <p>因为我使用的是伪元素，伪元素是将 <code>data</code> 属性从元素中取出并以额外的空间将内容呈现到页面的行(这是奇怪的部分)。如果你不这样做，最终的结果会让人感觉 "跳脱"。我不能说我完全理解它，但它似乎更好地尊重了跨textarea和文本元素的换行行为。</p> <p>如果你不想使用伪元素，嘿嘿，我没意见，只要注意跳动的行为即可。</p> </article> </div> </div> </div>  <div id="SOHUCS" sid="1341044798773092352"></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">你可能感兴趣的:(前端,html5,css,css3)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1901916599753961472.htm" title="前端面试：ajax 和 xhr 是什么关系？" target="_blank">前端面试：ajax 和 xhr 是什么关系？</a> <span class="text-muted">returnShitBoy</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><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a> <div>在前端开发中，AJAX（AsynchronousJavaScriptandXML）和XHR（XMLHttpRequest）是两个密切相关但有些不同的概念。以下是对这两者的详细解释及其关系：1.AJAX定义：AJAX是一个用于创建异步web应用程序的技术。它允许网页在不完全重新加载整页的情况下，与服务器交换数据并更新部分网页内容。主要特征：异步操作：AJAX使得页面可以在后台与服务器进行数据交换，用</div> </li> <li><a href="/article/1901911685459931136.htm" title="axios在前后端分离的仓储管理系统中的作用" target="_blank">axios在前后端分离的仓储管理系统中的作用</a> <span class="text-muted">PLJJ685</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E7%9A%84%E4%BB%93%E5%BA%93%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%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/vue.js/1.htm">vue.js</a> <div>在前后端分离的仓储管理系统中，axios是一个非常重要的工具，用于在前端（通常是Vue.js、React等框架）和后端（通常是SpringBoot、Node.js、Django等框架）之间进行HTTP通信。以下是axios在仓储管理系统中的作用和具体应用场景：1.前后端分离架构在前后端分离的架构中：前端：负责页面的渲染和用户交互。后端：负责数据处理、业务逻辑和数据库操作。通信方式：前后端通过HTT</div> </li> <li><a href="/article/1901899964313825280.htm" title="构建AngularJS动态Web应用的示例教程" target="_blank">构建AngularJS动态Web应用的示例教程</a> <span class="text-muted">你这人真狗</span> <div>本文还有配套的精品资源，点击获取简介：AngularJS是一个由Google支持的前端JavaScript框架，用于创建动态Web应用程序。本文将通过一个名为“angular-sample-app”的示例应用程序，详细介绍AngularJS的核心特性，包括双向数据绑定、控制器、指令系统、服务与依赖注入、表单处理、路由与导航、模板和局部存储以及其他高级特性。通过这个示例应用的深入剖析，开发者可以学习</div> </li> <li><a href="/article/1901897696445263872.htm" title="【css酷炫效果】纯CSS实现3D翻转卡片动画" target="_blank">【css酷炫效果】纯CSS实现3D翻转卡片动画</a> <span class="text-muted">冰夏之夜影</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>【css酷炫效果】纯CSS实现3D翻转卡片动画缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490472缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构正面内容背面内容...css样式/*容器设置透视*/.card-containe</div> </li> <li><a href="/article/1901888236280672256.htm" title="CSS语言的数论算法" target="_blank">CSS语言的数论算法</a> <span class="text-muted">宇瞳月</span> <a class="tag" taget="_blank" href="/search/%E5%8C%85%E7%BD%97%E4%B8%87%E8%B1%A1/1.htm">包罗万象</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>CSS语言的数论算法引言数论作为数学的一个重要分支，主要研究整数及其性质。数论的基本问题包括素数的性质、最大公约数、最小公倍数、同余等，同时数论在密码学、计算机科学等领域具有广泛的应用。而CSS（层叠样式表）本身是一种样式表语言，用于控制HTML文档的样式和布局，虽然CSS本身并不能直接进行复杂的数论运算，但它可以和JavaScript等编程语言结合使用，实现数论算法的可视化与交互。本文将探讨数论</div> </li> <li><a href="/article/1901885085544673280.htm" title="【开原宝藏】30天学会CSS - DAY1 第一课" target="_blank">【开原宝藏】30天学会CSS - DAY1 第一课</a> <span class="text-muted">hikktn</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E5%AE%9D%E8%97%8F/1.htm">开源宝藏</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>下面提供一个由浅入深、按步骤拆解的示例教程，让你能从零开始，逐步理解并实现带有旋转及悬停动画的社交图标效果。为了更简单明了，以下示例仅创建四个图标（Facebook、Twitter、Google+、LinkedIn），并在每一步都附带代码展示和讲解。第0步：项目结构说明先准备两个文件：index.htmlHTML的主体结构style.css样式代码，控制图标外观与动画目录结构如下：project/</div> </li> <li><a href="/article/1901884704676704256.htm" title="轻量级模块化前端框架：快速构建强大的Web界面" target="_blank">轻量级模块化前端框架：快速构建强大的Web界面</a> <span class="text-muted">小杰~</span> <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> <div>轻量级模块化前端框架：快速构建强大的Web界面在当今快节奏的Web开发环境中，选择一个高效且灵活的前端框架至关重要。UIkit是一个轻量级的模块化前端框架，旨在帮助开发者快速构建功能强大且响应迅速的Web界面。UIkit提供了丰富的组件和工具，使开发者能够轻松实现现代化的设计效果。无论是构建复杂的用户界面还是简单的网页布局，UIkit都能提供出色的支持。其模块化设计使得开发者可以根据项目需求灵活选</div> </li> <li><a href="/article/1901881552879546368.htm" title="解决MybatisPlus updateById更新数据时将没传的数据也更新成了null" target="_blank">解决MybatisPlus updateById更新数据时将没传的数据也更新成了null</a> <span class="text-muted">善我</span> <a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>首先，MybatisPlus在调用自带的更新接口updateById时，如果没加任何配置，默认是不会将前端没传的数据也更新成null的。即MyBatisPlus不会更新传入实体中为null的字段，只会更新设置了不为null的值。如果发现没传的也更新成null了的话，可以看看问题是否出在以下几个方面。可能原因1、后端定义的字段类型是否为包装类型？比如应该定义成Integer，结果你定义的是int，那</div> </li> <li><a href="/article/1901879406662578176.htm" title="GTP生成UI代码" target="_blank">GTP生成UI代码</a> <span class="text-muted">酒江</span> <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a> <div>使用GPT生成UI代码，通常是指利用GPT模型生成前端界面的代码，例如HTML、CSS、JavaScript等。GPT可以帮助开发人员快速创建界面元素的代码，减少手动编写的工作量。下面是一些关键步骤，详细说明如何用GPT生成UI代码：1.明确UI需求和设计界面元素：首先明确需要哪些UI元素。例如：按钮、输入框、表单、表格等。布局：确定页面的布局结构，例如：一栏布局、两栏布局、响应式设计等。交互功能</div> </li> <li><a href="/article/1901873226611486720.htm" title="云贝餐饮独立连锁版v3源码扫码点餐毕业设计参考好选择可二开" target="_blank">云贝餐饮独立连锁版v3源码扫码点餐毕业设计参考好选择可二开</a> <span class="text-muted">DeepinThinks</span> <a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E5%88%86%E4%BA%AB/1.htm">源码分享</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/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>云贝V3最新版，采用PHP语言和Laravel9框架，前端使用VUE3和小程序uniapp开发。️云贝V3特点：全开源：提供完整的源代码，无版权纠纷。免授权：无需支付额外授权费用。可二开：支持二次开发，满足个性化需求。技术支持：提供开发者技术支持，确保项目顺利进行。最新版本号：V1.7.9新增会员价显示会员价开关(设置-订单设置-商品设置)新增异地外卖下单开关(门店-业务设置-外送设置)新增套餐固</div> </li> <li><a href="/article/1901864143464493056.htm" title="下载 CSS 文件阻塞，会阻塞构建 DOM 树吗？会阻塞页面的显示吗？" target="_blank">下载 CSS 文件阻塞，会阻塞构建 DOM 树吗？会阻塞页面的显示吗？</a> <span class="text-muted">liangshanbo1215</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/1.htm">前端性能</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>下载CSS文件会对页面的渲染过程产生影响，具体是否阻塞DOM树的构建和页面的显示，取决于浏览器的渲染机制。1.CSS文件下载是否会阻塞DOM树的构建？一般情况下，CSS文件下载不会阻塞DOM树的构建：DOM树的构建是由HTML解析器完成的，解析器会逐行解析HTML并构建DOM树。即使CSS文件正在下载，HTML解析器仍然会继续工作，构建DOM树。但如果JavaScript访问了样式，CSS文件下载</div> </li> <li><a href="/article/1901859224078577664.htm" title="《突破性能瓶颈，用 Rust + WASM 实现浏览器端FFT加速300%实战》" target="_blank">《突破性能瓶颈，用 Rust + WASM 实现浏览器端FFT加速300%实战》</a> <span class="text-muted">煜bart</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E4%BA%BA/1.htm">机器人</a> <div>引言：当JavaScript遇上硬核计算**“为什么我的音频分析页面卡到崩溃？”这是前端工程师在实现实时频谱可视化时最常见的噩梦。传统JavaScript的FFT计算在万级数据点时就会引发严重卡顿，但今天我们将用**Rust+WebAssembly**的组合拳，在浏览器中实现**零依赖、300%加速的傅里叶变换**。无需WebGL黑魔法，直接上硬核代码！---###**一、血腥现场：JS的Type</div> </li> <li><a href="/article/1901842823418802176.htm" title="Flexbox 布局详细笔记" target="_blank">Flexbox 布局详细笔记</a> <span class="text-muted">.毅晨.</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>Flexbox布局详细笔记Flexbox（弹性盒子布局）是CSS3中用于实现高效、灵活的页面布局的模块，特别适合处理一维布局（行或列）。以下是核心知识点和常见用法：一、Flexbox基础概念容器（FlexContainer）通过display:flex;或display:inline-flex;将一个元素定义为Flex容器。其直接子元素自动成为Flex项目（FlexItems）。主轴（MainAx</div> </li> <li><a href="/article/1901830342008958976.htm" title="芯片制造、汽车制造行业网站，如何用插件增强富文本编辑器的WORD粘贴功能？" target="_blank">芯片制造、汽车制造行业网站，如何用插件增强富文本编辑器的WORD粘贴功能？</a> <span class="text-muted">全武凌(荆门泽优)</span> <a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D/1.htm">金融</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a><a class="tag" taget="_blank" href="/search/umeditor%E7%B2%98%E8%B4%B4word/1.htm">umeditor粘贴word</a><a class="tag" taget="_blank" href="/search/ueditor%E7%B2%98%E8%B4%B4word/1.htm">ueditor粘贴word</a><a class="tag" taget="_blank" href="/search/ueditor%E5%A4%8D%E5%88%B6word/1.htm">ueditor复制word</a><a class="tag" taget="_blank" href="/search/ueditor%E4%B8%8A%E4%BC%A0word%E5%9B%BE%E7%89%87/1.htm">ueditor上传word图片</a> <div>要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,</div> </li> <li><a href="/article/1901830215676522496.htm" title="金融行业网页编辑器对WORD图文混排有哪些特殊需求？" target="_blank">金融行业网页编辑器对WORD图文混排有哪些特殊需求？</a> <span class="text-muted">全武凌(荆门泽优)</span> <a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D/1.htm">金融</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a><a class="tag" taget="_blank" href="/search/umeditor%E7%B2%98%E8%B4%B4word/1.htm">umeditor粘贴word</a><a class="tag" taget="_blank" href="/search/ueditor%E7%B2%98%E8%B4%B4word/1.htm">ueditor粘贴word</a><a class="tag" taget="_blank" href="/search/ueditor%E5%A4%8D%E5%88%B6word/1.htm">ueditor复制word</a><a class="tag" taget="_blank" href="/search/ueditor%E4%B8%8A%E4%BC%A0word%E5%9B%BE%E7%89%87/1.htm">ueditor上传word图片</a> <div>要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,</div> </li> <li><a href="/article/1901827188735406080.htm" title="HTML编辑器CKEDITOR支持哪些格式的WORD内容导入？" target="_blank">HTML编辑器CKEDITOR支持哪些格式的WORD内容导入？</a> <span class="text-muted">2501_90699640</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a><a class="tag" taget="_blank" href="/search/ckeditor%E7%B2%98%E8%B4%B4word/1.htm">ckeditor粘贴word</a><a class="tag" taget="_blank" href="/search/ckeditor%E5%AF%BC%E5%85%A5word/1.htm">ckeditor导入word</a><a class="tag" taget="_blank" href="/search/ckeditor%E5%AF%BC%E5%85%A5pdf/1.htm">ckeditor导入pdf</a><a class="tag" taget="_blank" href="/search/ckeditor%E5%AF%BC%E5%85%A5ppt/1.htm">ckeditor导入ppt</a> <div>要求：开源，免费，技术支持编辑器：ckeditor前端：vue2,vue3.vue-cli后端：asp,java,jsp,springboot,php,asp.net,.netcore功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,Ubuntu,CentO</div> </li> <li><a href="/article/1901827062507827200.htm" title="金融行业Vue应用如何利用wangEditor实现WORD文档高效上传？" target="_blank">金融行业Vue应用如何利用wangEditor实现WORD文档高效上传？</a> <span class="text-muted">2501_90699640</span> <a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D/1.htm">金融</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a><a class="tag" taget="_blank" href="/search/umeditor%E7%B2%98%E8%B4%B4word/1.htm">umeditor粘贴word</a><a class="tag" taget="_blank" href="/search/ueditor%E7%B2%98%E8%B4%B4word/1.htm">ueditor粘贴word</a><a class="tag" taget="_blank" href="/search/ueditor%E5%A4%8D%E5%88%B6word/1.htm">ueditor复制word</a><a class="tag" taget="_blank" href="/search/ueditor%E4%B8%8A%E4%BC%A0word%E5%9B%BE%E7%89%87/1.htm">ueditor上传word图片</a> <div>要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,</div> </li> <li><a href="/article/1901812283240148992.htm" title="Cool Admin5(Go版)后台管理系统开发框架搭建使用记录" target="_blank">Cool Admin5(Go版)后台管理系统开发框架搭建使用记录</a> <span class="text-muted">后青春期的诗go</span> <a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/go/1.htm">go</a> <div>一、环境说明nodejs建议版本：18二、安装安装框架github下载最新的zip压缩包，然后解压。#进入解压缩后的目录cdcool-admin5#直接修改go.mod里面的模块名（或删除原go.mod文件，重新初始化：Gomodinitcool-admin5）#根据需要调整man.go文件里的导入路径#安装依赖gomodtidy#运行后端项目Gorun.#进入前端目录Cdfrontend#安装依</div> </li> <li><a href="/article/1901805226436915200.htm" title="计算机专业的就业方向" target="_blank">计算机专业的就业方向</a> <span class="text-muted">LTPP</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</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/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%80%83%E7%A0%94/1.htm">考研</a> <div>计算机专业的就业方向亲爱的新生们，欢迎你们踏上计算机科学的旅程！作为一名计算机专业的学生，你们即将进入一个充满无限可能的领域。今天，我将为大家介绍计算机专业的一些主要就业方向，帮助你们了解未来的职业选择。1.软件开发软件开发是计算机专业学生最常见的就业方向之一。软件开发涉及编写、测试、维护应用程序、系统软件等。根据工作性质的不同，软件开发可以进一步细分为以下几个方向：前端开发：前端开发主要负责设计</div> </li> <li><a href="/article/1901791476329803776.htm" title="Node.js和webpack入门-个人学习笔记" target="_blank">Node.js和webpack入门-个人学习笔记</a> <span class="text-muted">ksmswq</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>Node.js-入门Node.js基础概念Node.js是一个跨平台JavaScript运行环境，是开发者可以搭建服务器端的JavaStript应用程序。作用1.编写服务端程序2.编写数据接口，提供网页浏览资源等等3.实现“前端工程化”，为Vue和React等框架做铺垫前端工程化-概念开发项目直到上线，过程中集成的所有工具和技术。（Node.js是前端工程化的基础（因为Node.js可以主动读取前</div> </li> <li><a href="/article/1901782145643376640.htm" title="基于python+django+vue.js开发的社区养老管理系统源码+运行步骤" target="_blank">基于python+django+vue.js开发的社区养老管理系统源码+运行步骤</a> <span class="text-muted">冷琴1996</span> <a class="tag" taget="_blank" href="/search/Python%E7%B3%BB%E7%BB%9F%E8%AE%BE%E8%AE%A1/1.htm">Python系统设计</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>业余时间开发的社区养老系统，基于python/vue技术开发。学习过程问题可以留言。功能介绍平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。功能包括：老人管理、护工管理、亲属管理、病史管理、房间管理、活动管理、用户管理、日志管理、系统信息模块。源码地址https://github.com/geeeeeeeek/python_yanglao演示地址ht</div> </li> <li><a href="/article/1901781766990000128.htm" title="基于 Vue 和 Element Plus 的时间范围控制与数据展示" target="_blank">基于 Vue 和 Element Plus 的时间范围控制与数据展示</a> <span class="text-muted">奶糖肥晨</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>文章目录1.核心功能2.实现效果3.代码实现️3.1HTML部分3.2JavaScript部分3.3CSS部分本文将重点讲解如何在Vue项目中使用ElementPlus的el-date-picker组件实现时间范围选择，并结合“日”、“月”、“年”按钮动态控制时间范围。！1.核心功能时间范围选择：使用el-date-picker实现日期范围选择。快速切换：通过“日”、“月”、“年”按钮快速设置时间</div> </li> <li><a href="/article/1901780126065029120.htm" title="Vue.js 事件处理与修饰符详解" target="_blank">Vue.js 事件处理与修饰符详解</a> <span class="text-muted">vvilkim</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.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> <div>Vue.js是一个流行的前端框架，它提供了强大的事件处理机制，使得开发者可以轻松地处理用户交互。Vue的事件处理通过v-on指令实现，同时还提供了丰富的事件修饰符和按键修饰符，帮助我们更高效地处理事件。本文将详细介绍Vue的事件处理机制、修饰符的使用方法，并结合示例代码展示如何在实际开发中应用这些功能。1.v-on指令与事件处理在Vue中，v-on指令用于监听DOM事件，并在事件触发时执行Java</div> </li> <li><a href="/article/1901777478528069632.htm" title="深入理解Vue 3：计算属性与侦听器的艺术" target="_blank">深入理解Vue 3：计算属性与侦听器的艺术</a> <span class="text-muted">qcidyu</span> <a class="tag" taget="_blank" href="/search/%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B/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/%E6%A8%A1%E6%9D%BF/1.htm">模板</a><a class="tag" taget="_blank" href="/search/%E8%B7%AF%E7%94%B1/1.htm">路由</a><a class="tag" taget="_blank" href="/search/%E4%BE%A6%E5%90%AC%E5%99%A8/1.htm">侦听器</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7/1.htm">计算属性</a><a class="tag" taget="_blank" href="/search/Vue3/1.htm">Vue3</a> <div>title:深入理解Vue3：计算属性与侦听器的艺术date:2024/5/30下午3:53:47updated:2024/5/30下午3:53:47categories:前端开发tags:Vue3计算属性侦听器路由模板性能优化实战案例前言Vue3的新特性简介Vue.js作为当今流行的前端框架之一，以其响应式数据绑定和组件化架构著称。随着技术的不断演进，Vue3带来了许多令人期待的新特性，这些特性</div> </li> <li><a href="/article/1901769780763881472.htm" title="前端（vue)学习笔记（CLASS 4）：组件组成部分与通信" target="_blank">前端（vue)学习笔记（CLASS 4）：组件组成部分与通信</a> <span class="text-muted">肥肠可耐的西西公主</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>1、组件的三大组成部分（结构/样式/逻辑）注意点：1、结构只能有一个根元素2、全局样式（默认），影响所有组件；局部样式，scoped下样式，只作用于当前组件3、el根实例独有，data是一个函数，其他配置项一致样式注意点：默认情况下，写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题1、全局样式：默认组件中的样式会作用到全局2、局部样式：可以给组件加上scoped属性，可以让样式</div> </li> <li><a href="/article/1901765497108623360.htm" title="前端学习路线：从零基础到初级工程师的完整指南（2025最新版）" target="_blank">前端学习路线：从零基础到初级工程师的完整指南（2025最新版）</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%AD%A6%E4%B9%A0/1.htm">学习</a> <div>前言作为连接设计与技术的核心岗位，前端开发在数字化时代持续释放强大生命力。本路线图专为初学者设计，通过「渐进式学习路径」+「实战项目驱动」的模式，助你系统掌握现代前端开发技能体系。一、基础筑基阶段（4-6周）三大核心基石HTML5语义化标签（）表单验证与多媒体支持SEO基础与无障碍访问CSS3Flex/Grid布局（重点掌握）动画与过渡（@keyframes+transition）响应式设计（媒体</div> </li> <li><a href="/article/1901765244921901056.htm" title="Tauri+Dotnet+Vue3+Vite桌面应用程序创建" target="_blank">Tauri+Dotnet+Vue3+Vite桌面应用程序创建</a> <span class="text-muted">是楊不是杨</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E5%90%8E%E7%AB%AF/1.htm">前后端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/.netcore/1.htm">.netcore</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%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>环境需求Node.js(已安装)Rust(安装Rust，必要).NETCoreSDK(用于后端)TauriCLI(通过Rust安装)1.创建Vue3+Vite前端项目初始化项目：bash复制代码npmcreatevite@latesttauri-vue3-dotnet--templatevuecdtauri-vue3-dotnet安装必要依赖：bash复制代码npminstall启动开发服务器，确</div> </li> <li><a href="/article/1901765118782402560.htm" title="使用 React 和 Vite 使用 Tauri 构建番茄钟" target="_blank">使用 React 和 Vite 使用 Tauri 构建番茄钟</a> <span class="text-muted">pxr007</span> <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</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> <div>Tauri是一组工具，可让您使用前端框架构建跨平台桌面应用程序。当与React和Vite结合使用时，它可以用于为所有桌面平台构建极其快速的二进制文件。开发人员可以使用Tauri通过Web技术编写安全、精简和快速的跨平台桌面应用程序。对于许多开发人员来说，Electron通常是这些应用程序的首选框架，但Tauri现在已经做好了竞争的准备。在这篇文章中，我们将构建一个简单的番茄钟计时器，我邀请您按照自</div> </li> <li><a href="/article/1901741152277688320.htm" title="uniapp-x 子组件样式覆盖" target="_blank">uniapp-x 子组件样式覆盖</a> <span class="text-muted">陆康永</span> <a class="tag" taget="_blank" href="/search/uniapp-x/1.htm">uniapp-x</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>不支持scoped默认不支持scoped，所以写也没用那如果我想修改子孙节点的样式是不是很方便，不需要v-deep了？的确如此自带页面样式隔离在uni-appx中，不支持cssscoped，样式的作用范围遵循以下规则：App.uvue中的样式作用于全局。页面的样式作用于当前页面及其子组件。组件的样式仅作用于当前组件。(作者补充：以及其子组件)对于uniapp自带ui库的样式拓展例如input在we</div> </li> <li><a href="/article/1901726524248223744.htm" title="通过css和js实现流星雨效果" target="_blank">通过css和js实现流星雨效果</a> <span class="text-muted">郭宝</span> <a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a> <div>页面代码：============================流星雨============================import"./css/style.css"exportdefault{name:'HelloWorld',data(){return{msg:'WelcometoYourVue.jsApp'}},mounted(){this.shootingStar();},meth</div> </li> <li><a href="/article/113.htm" title="windows下源码安装golang" target="_blank">windows下源码安装golang</a> <span class="text-muted">616050468</span> <a class="tag" taget="_blank" href="/search/golang%E5%AE%89%E8%A3%85/1.htm">golang安装</a><a class="tag" taget="_blank" href="/search/golang%E7%8E%AF%E5%A2%83/1.htm">golang环境</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div> 系统： 64位win7，开发环境：sublime text 2， go版本： 1.4.1 1. 安装前准备(gcc, gdb, git) golang在64位系</div> </li> <li><a href="/article/240.htm" title="redis批量删除带空格的key" target="_blank">redis批量删除带空格的key</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>redis批量删除的通常做法： redis-cli keys "blacklist*" | xargs redis-cli del 上面的命令在key的前后没有空格时是可以的，但有空格就不行了： $redis-cli keys "blacklist*" 1) "blacklist:12: 361942420@qq.com</div> </li> <li><a href="/article/367.htm" title="oracle正则表达式的用法" target="_blank">oracle正则表达式的用法</a> <span class="text-muted">0624chenhong</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a> <div> 方括号表达示方括号表达式描述 [[:alnum:]] 字母和数字混合的字符 [[:alpha:]] 字母字符 [[:cntrl:]] 控制字符 [[:digit:]] 数字字符 [[:graph:]] 图像字符 [[:lower:]] 小写字母字符 [[:print:]] 打印字符 [[:punct：]] 标点符号字符 [[:space:]]</div> </li> <li><a href="/article/494.htm" title="2048源码(核心算法有，缺少几个anctionbar，以后补上)" target="_blank">2048源码(核心算法有，缺少几个anctionbar，以后补上)</a> <span class="text-muted">不懂事的小屁孩</span> <a class="tag" taget="_blank" href="/search/2048/1.htm">2048</a> <div>2048游戏基本上有四部分组成， 1：主activity，包含游戏块的16个方格，上面统计分数的模块 2：底下的gridview，监听上下左右的滑动，进行事件处理， 3：每一个卡片，里面的内容很简单，只有一个text，记录显示的数字 4：Actionbar，是游戏用重新开始，设置等功能(这个在底下可以下载的代码里面还没有实现) 写代码的流程 1：设计游戏的布局，基本是两块，上面是分</div> </li> <li><a href="/article/621.htm" title="jquery内部链式调用机理" target="_blank">jquery内部链式调用机理</a> <span class="text-muted">换个号韩国红果果</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>只需要在调用该对象合适(比如下列的setStyles)的方法后让该方法返回该对象（通过this 因为一旦一个函数称为一个对象方法的话那么在这个方法内部this（结合下面的setStyles）指向这个对象） function create(type){ var element=document.createElement(type); //this=element; </div> </li> <li><a href="/article/748.htm" title="你订酒店时的每一次点击背后都是NoSQL和云计算" target="_blank">你订酒店时的每一次点击背后都是NoSQL和云计算</a> <span class="text-muted">蓝儿唯美</span> <a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a> <div>全球最大的在线旅游公司Expedia旗下的酒店预订公司，它运营着89个网站，跨越68个国家，三年前开始实验公有云，以求让客户在预订网站上查询假期酒店时得到更快的信息获取体验。云端本身是用于驱动网站的部分小功能的，如搜索框的自动推荐功能，还能保证处理Hotels.com服务的季节性需求高峰整体储能。 Hotels.com的首席技术官Thierry Bedos上个月在伦敦参加“2015 Clou</div> </li> <li><a href="/article/875.htm" title="java笔记1" target="_blank">java笔记1</a> <span class="text-muted">a-john</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1，面向对象程序设计（Object-oriented Propramming，OOP）：java就是一种面向对象程序设计。 2，对象：我们将问题空间中的元素及其在解空间中的表示称为“对象”。简单来说，对象是某个类型的实例。比如狗是一个类型，哈士奇可以是狗的一个实例，也就是对象。 3，面向对象程序设计方式的特性： 3.1 万物皆为对象。 </div> </li> <li><a href="/article/1002.htm" title="C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题必备考点（一）" target="_blank">C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题必备考点（一）</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/C%2FC%2B%2B%E6%B1%82%E8%81%8C%E9%9D%A2%E8%AF%95%E5%BF%85%E5%A4%87%E8%80%83%E7%82%B9/1.htm">C/C++求职面试必备考点</a> <div> 找工作在即，以后决定每天至少写一个知识点，主要是记录，逼迫自己动手、总结加深印象。当然如果能有一言半语让他人收益，后学幸运之至也。如有错误，还希望大家帮忙指出来。感激不尽。后学保证每个写出来的结果都是自己在电脑上亲自跑过的，咱人笨，以前学的也半吊子。很多时候只能靠运行出来的结果再反过来</div> </li> <li><a href="/article/1129.htm" title="程序员写代码时就不要管需求了吗？" target="_blank">程序员写代码时就不要管需求了吗？</a> <span class="text-muted">asia007</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E4%B8%8D%E8%83%BD%E4%B8%80%E5%91%B3%E8%B7%9F%E9%9C%80%E6%B1%82%E8%B5%B0/1.htm">程序员不能一味跟需求走</a> <div> 编程也有2年了，刚开始不懂的什么都跟需求走，需求是怎样就用代码实现就行，也不管这个需求是否合理，是否为较好的用户体验。当然刚开始编程都会这样，但是如果有了2年以上的工作经验的程序员只知道一味写代码，而不在写的过程中思考一下这个需求是否合理，那么，我想这个程序员就只能一辈写敲敲代码了。我的技术不是很好，但是就不代</div> </li> <li><a href="/article/1256.htm" title="Activity的四种启动模式" target="_blank">Activity的四种启动模式</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E6%A0%88%E6%A8%A1%E5%BC%8F%E5%90%AF%E5%8A%A8/1.htm">栈模式启动</a><a class="tag" taget="_blank" href="/search/Activity%E7%9A%84%E6%A0%87%E5%87%86%E6%A8%A1%E5%BC%8F%E5%90%AF%E5%8A%A8/1.htm">Activity的标准模式启动</a><a class="tag" taget="_blank" href="/search/%E6%A0%88%E9%A1%B6%E6%A8%A1%E5%BC%8F%E5%90%AF%E5%8A%A8/1.htm">栈顶模式启动</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F%E5%90%AF%E5%8A%A8/1.htm">单例模式启动</a> <div>android界面的操作就是很多个activity之间的切换,启动模式决定启动的activity的生命周期 ; 启动模式xml中配置 <activity android:name=".MainActivity" android:launchMode="standard&quo</div> </li> <li><a href="/article/1383.htm" title="Spring中@Autowired标签与@Resource标签的区别" target="_blank">Spring中@Autowired标签与@Resource标签的区别</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%40Resource/1.htm">@Resource</a><a class="tag" taget="_blank" href="/search/%40Autowired/1.htm">@Autowired</a><a class="tag" taget="_blank" href="/search/%40Qualifier/1.htm">@Qualifier</a> <div>Spring不但支持自己定义的@Autowired注解，还支持由JSR-250规范定义的几个注解，如：@Resource、 @PostConstruct及@PreDestroy。 1. @Autowired @Autowired是Spring 提供的，需导入 Package:org.springframewo</div> </li> <li><a href="/article/1510.htm" title="Changes Between SOAP 1.1 and SOAP 1.2" target="_blank">Changes Between SOAP 1.1 and SOAP 1.2</a> <span class="text-muted">sunjing</span> <a class="tag" taget="_blank" href="/search/Changes/1.htm">Changes</a><a class="tag" taget="_blank" href="/search/Enable/1.htm">Enable</a><a class="tag" taget="_blank" href="/search/SOAP+1.1/1.htm">SOAP 1.1</a><a class="tag" taget="_blank" href="/search/SOAP+1.2/1.htm">SOAP 1.2</a> <div>JAX-WS SOAP Version 1.2 Part 0: Primer (Second Edition) SOAP Version 1.2 Part 1: Messaging Framework (Second Edition) SOAP Version 1.2 Part 2: Adjuncts (Second Edition) Which style of WSDL</div> </li> <li><a href="/article/1637.htm" title="【Hadoop二】Hadoop常用命令" target="_blank">【Hadoop二】Hadoop常用命令</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>以Hadoop运行Hadoop自带的wordcount为例， hadoop脚本位于/home/hadoop/hadoop-2.5.2/bin/hadoop，需要说明的是，这些命令的使用必须在Hadoop已经运行的情况下才能执行 Hadoop HDFS相关命令 hadoop fs -ls 列出HDFS文件系统的第一级文件和第一级</div> </li> <li><a href="/article/1764.htm" title="java异常处理（初级）" target="_blank">java异常处理（初级）</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E6%9C%BA/1.htm">虚拟机</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>从学习到现在从事java开发一年多了，个人觉得对java只了解皮毛，很多东西都是用到再去慢慢学习，编程真的是一项艺术，要完成一段好的代码，需要懂得很多。最近项目经理让我负责一个组件开发，框架都由自己搭建，最让我头疼的是异常处理，我看了一些网上的源码，发现他们对异常的处理不是很重视，研究了很久都没有找到很好的解决方案。后来有幸看到一个200W美元的项目部分源码，通过他们对异常处理的解决方案，我终</div> </li> <li><a href="/article/1891.htm" title="记录整理-工作问题" target="_blank">记录整理-工作问题</a> <span class="text-muted">braveCS</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>1）那位同学还是CSV文件默认Excel打开看不到全部结果。以为是没写进去。同学甲说文件应该不分大小。后来log一下原来是有写进去。只是Excel有行数限制。那位同学进步好快啊。 2）今天同学说写文件的时候提示jvm的内存溢出。我马上反应说那就改一下jvm的内存大小。同学说改用分批处理了。果然想问题还是有局限性。改jvm内存大小只能暂时地解决问题，以后要是写更大的文件还是得改内存。想问题要长远啊</div> </li> <li><a href="/article/2018.htm" title="org.apache.tools.zip实现文件的压缩和解压，支持中文" target="_blank">org.apache.tools.zip实现文件的压缩和解压，支持中文</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a> <div>刚开始用java.util.Zip，发现不支持中文（网上有修改的方法，但比较麻烦）后改用org.apache.tools.zip org.apache.tools.zip的使用网上有更简单的例子下面的程序根据实际需求，实现了压缩指定目录下指定文件的方法 import java.io.BufferedReader; import java.io.BufferedWrit</div> </li> <li><a href="/article/2145.htm" title="读书笔记-4" target="_blank">读书笔记-4</a> <span class="text-muted">chengxuyuancsdn</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div>1、JSTL 核心标签库标签 2、避免SQL注入 3、字符串逆转方法 4、字符串比较compareTo 5、字符串替换replace 6、分拆字符串 1、JSTL 核心标签库标签共有13个，学习资料：http://www.cnblogs.com/lihuiyy/archive/2012/02/24/2366806.html 功能上分为4类： (1)表达式控制标签：out</div> </li> <li><a href="/article/2272.htm" title="[物理与电子]半导体教材的一个小问题" target="_blank">[物理与电子]半导体教材的一个小问题</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E9%97%AE%E9%A2%98/1.htm">问题</a> <div> 各种模拟电子和数字电子教材中都有这个词汇-空穴书中对这个词汇的解释是; 当电子脱离共价键的束缚成为自由电子之后,共价键中就留下一个空位,这个空位叫做空穴我现在回过头翻大学时候的教材,觉得这个</div> </li> <li><a href="/article/2399.htm" title="Flashback Database --闪回数据库" target="_blank">Flashback Database --闪回数据库</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/%E9%97%AA%E5%9B%9E%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">闪回数据库</a> <div>Flashback 技术是以Undo segment中的内容为基础的，因此受限于UNDO_RETENTON参数。要使用flashback 的特性，必须启用自动撤销管理表空间。在Oracle 10g中， Flash back家族分为以下成员： Flashback Database， Flashback Drop，Flashback Query(分Flashback Query,Flashbac</div> </li> <li><a href="/article/2526.htm" title="简单排序:插入排序" target="_blank">简单排序:插入排序</a> <span class="text-muted">dieslrae</span> <a class="tag" taget="_blank" href="/search/%E6%8F%92%E5%85%A5%E6%8E%92%E5%BA%8F/1.htm">插入排序</a> <div> public void insertSort(int[] array){ int temp; for(int i=1;i<array.length;i++){ temp = array[i]; for(int k=i-1;k>=0;k--)</div> </li> <li><a href="/article/2653.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 main(void) { int * p; //等价于 int *p 也等价于 int* p; int i = 5; char ch = 'A'; //p = 5; //error //p = &ch; //error //p = ch; //error p = &i; // </div> </li> <li><a href="/article/2780.htm" title="centos下php redis扩展的安装配置3种方法" target="_blank">centos下php redis扩展的安装配置3种方法</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>方法一 1.下载php redis扩展包代码如下复制代码 #wget http://redis.googlecode.com/files/redis-2.4.4.tar.gz 2 tar -zxvf 解压压缩包，cd /扩展包（进入扩展包然后运行phpize 一下是我环境中phpize的目录，/usr/local/php/bin/phpize (一定要</div> </li> <li><a href="/article/2907.htm" title="线程池(Executors)" target="_blank">线程池(Executors)</a> <span class="text-muted">shuizhaosi888</span> <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">线程池</a> <div>在java类库中，任务执行的主要抽象不是Thread，而是Executor，将任务的提交过程和执行过程解耦 public interface Executor { void execute(Runnable command); } public class RunMain implements Executor{ @Override pub</div> </li> <li><a href="/article/3034.htm" title="openstack 快速安装笔记" target="_blank">openstack 快速安装笔记</a> <span class="text-muted">haoningabc</span> <a class="tag" taget="_blank" href="/search/openstack/1.htm">openstack</a> <div>前提是要配置好yum源版本icehouse，操作系统redhat6.5 最简化安装，不要cinder和swift 三个节点 172 control节点keystone glance horizon 173 compute节点nova 173 network节点neutron control /etc/sysctl.conf net.ipv4.ip_forward =</div> </li> <li><a href="/article/3161.htm" title="从c面向对象的实现理解c++的对象（二）" target="_blank">从c面向对象的实现理解c++的对象（二）</a> <span class="text-muted">jimmee</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/1.htm">面向对象</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E5%87%BD%E6%95%B0/1.htm">虚函数</a> <div>1. 类就可以看作一个struct，类的方法，可以理解为通过函数指针的方式实现的，类对象分配内存时，只分配成员变量的，函数指针并不需要分配额外的内存保存地址。 2. c++中类的构造函数，就是进行内存分配(malloc)，调用构造函数 3. c++中类的析构函数，就时回收内存(free) 4. c++是基于栈和全局数据分配内存的，如果是一个方法内创建的对象，就直接在栈上分配内存了。专门在</div> </li> <li><a href="/article/3288.htm" title="如何让那个一个div可以拖动" target="_blank">如何让那个一个div可以拖动</a> <span class="text-muted">lingfeng520240</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml</div> </li> <li><a href="/article/3415.htm" title="第10章高级事件（中）" target="_blank">第10章高级事件（中）</a> <span class="text-muted">onestopweb</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8B%E4%BB%B6/1.htm">事件</a> <div>index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/</div> </li> <li><a href="/article/3542.htm" title="计算两个经纬度之间的距离" target="_blank">计算两个经纬度之间的距离</a> <span class="text-muted">roadrunners</span> <a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97/1.htm">计算</a><a class="tag" taget="_blank" href="/search/%E7%BA%AC%E5%BA%A6/1.htm">纬度</a><a class="tag" taget="_blank" href="/search/LBS/1.htm">LBS</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E5%BA%A6/1.htm">经度</a><a class="tag" taget="_blank" href="/search/%E8%B7%9D%E7%A6%BB/1.htm">距离</a> <div>要解决这个问题的时候，到网上查了很多方案，最后计算出来的都与百度计算出来的有出入。下面这个公式计算出来的距离和百度计算出来的距离是一致的。 /** * * @param longitudeA * 经度A点 * @param latitudeA * 纬度A点 * @param longitudeB * </div> </li> <li><a href="/article/3669.htm" title="最具争议的10个Java话题" target="_blank">最具争议的10个Java话题</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1、Java8已经到来。什么！？ Java8 支持lambda。哇哦，RIP Scala！　　随着Java8 的发布，出现很多关于新发布的Java8是否有潜力干掉Scala的争论，最终的结论是远远没有那么简单。Java8可能已经在Scala的lambda的包围中突围，但Java并非是函数式编程王位的真正觊觎者。　　2、Java 9 即将到来　　 Oracle早在8月份就发布</div> </li> <li><a href="/article/3796.htm" title="zoj 3826 Hierarchical Notation(模拟)" target="_blank">zoj 3826 Hierarchical Notation(模拟)</a> <span class="text-muted">阿尔萨斯</span> <a class="tag" taget="_blank" href="/search/rar/1.htm">rar</a> <div> 题目链接：zoj 3826 Hierarchical Notation 题目大意：给定一些结构体，结构体有value值和key值，Q次询问，输出每个key值对应的value值。解题思路：思路很简单，写个类词法的递归函数，每次将key值映射成一个hash值，用map映射每个key的value起始终止位置，预处理完了查询就很简单了。这题是最后10分钟出的，因为没有考虑value为{}的情</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>