SEU_YL

常用Iview组件集合以及常用特性

Button

可以选择不同类型代表会以不同颜色呈现
可以选择边框是否为虚线或者为文本模式的按钮
可设置为幽灵按钮
可设置loading状态
可禁用
size只可选small、default、large三种

Icon

可根据type来选择不同的图标样子
size可设置大小，单位px
color可设置颜色

Typography文字排版

分别有 <Txt> <Pragraph>三种组件，分别适用于标题、不同样式的文本、段落，这三个组件都可设置是否可复制、添加删除线样式、是否可编辑、文本类型，其中Pragraph可以设置超过多少行显示省略号并且是否可展开</p> <h3>Divider</h3> <p>方向可选vertical、horizental<br> 是否为虚线<br> 若有文本，文本的位置左、中、右</p> <h3>Grid栅格</h3> <p>栅格其实可以做水平布局<br> Row中放置Col，col的总数小于24<br> 可以给Row中的Col设置间隔，可设置改变栅格顺序<br> 可设置左右偏移量<br> flex布局的justify、align属性可以使用<br> 可响应式布局</p> <h3>Layout</h3> <p>布局的组件<br> 里面可放置Header、Content、Sider、Footer<br> 可设置折叠属性</p> <h3>Space间隔</h3> <p>设置间隔<br> 可以设置水平间隔和垂直间隔<br> 可用v-model双向绑定自定义间隔</p> <h3>Split面板分隔</h3> <p>可以将一片区域分割为可以拖拽调整宽度或高度的两部分区域<br> 可嵌套使用</p> <h3>Cell单元格</h3> <p>用于固定的菜单列表<br> 每一项单元格可设置禁用以及选中</p> <h3>Affix图钉</h3> <p>可以将内容固定在屏幕上，位置是相对于浏览器的位置而定的</p> <h3>Breadcrumb面包屑</h3> <p>显示网站的层级结构并标识当前所在位置，并可添加导航和vue-router结合使用</p> <h3>Dropdown下拉菜单</h3> <p>可以设置如何触发，hover、click、右键、custom自定义<br> 可嵌套</p> <h3>Menu导航菜单</h3> <p>可选择主题风格<br> 可选vertical、horizontal</p> <h3>Page分页</h3> <p>用于分页快速切换<br> 可以设置快速跳转<br> 可以设置每页数量</p> <h3>PageHeader页头</h3> <p>用于做页头<br> 可带面包屑、可带内容<br> 可用slot嵌套一些内容</p> <h3>Steps步骤条</h3> <p>用于显示某项流程的步骤</p> <h3>AutoComplete自动完成</h3> <p>输入框自动完成<br> 可通过data属性自定义自动完成数据源<br> 也可通过传入Option组件作为选项<br> 可不区分大小写<br> 自定义Option显示复杂的布局</p> <h3>Checkbox多选框</h3> <p>用于多项选择，用v-model双向绑定选中数据<br> 可设置全选</p> <h3>Cascader级联选择</h3> <p>通常用语一组相关联并且递进的数据集合<br> 可与搜索合并，搜索并选择</p> <h3>DatePicker日期选择器</h3> <p>年月日选择时间点或者时间段<br> 可添加具体日子的快捷方式<br> 可多选<br> 可选择时间</p> <h3>Form表单</h3> <p>具有数据收集、校验和提交功能的表单<br> 此组件非常重要，特别是校验功能</p> <h3>InputNumber数字输入框</h3> <p>只允许输入数字的输入框，并且可以设置一定的范围<br> 可设置禁用、可编辑、小数等功能</p> <h3>Input输入框</h3> <p>输入框，可设置三种尺寸，可设置是否可清空<br> 可设置Icon，可设置slot前缀后缀<br> 可设置文本域输入，输入段落</p> <h3>Mentions提及</h3> <p>用于在输入中提及某人或某事，等同于@功能<br> 可与Form配合使用<br> 可自定义匹配字符</p> <h3>Rate评分</h3> <p>评分组件<br> 可半星、可显示提示<br> 只读<br> 可自定义字符</p> <h3>Radio单选框</h3> <p>可用v-model双向绑定，可选择button样式单选框</p> <h3>Switch开关</h3> <p>进行两种状态切换<br> 可禁用、可加载</p> <h3>Slider滑块</h3> <p>可单方向滑<br> 可设置range，双方向滑<br> 可用离散值，离散值时可显示间断点<br> 可用输入框输入值</p> <h3>Select选择器</h3> <p>支持单选、多选、搜索以及键盘快捷操作<br> transfer属性很重要，可以避免在position：fixed的定位中被覆盖</p> <h3>Transfer穿梭框</h3> <p>双栏穿梭选择框，常用于将多个项目从一边移到另一边<br> 详情例子请官网</p> <h3>TimerPicker时间选择器</h3> <p>选择或输入标准时间，支持选择范围</p> <h3>Upload上传</h3> <p>可支持上传单个文件、多个文件<br> 支持拖拽上传<br> 还可以自定义上传列表，如上传照片并展示</p> <h3>ColorPicker颜色选择器</h3> <p>v-model双向绑定颜色数据<br> 可默认选择<br> 可预设选择</p> <h3>Avatar头像</h3> <p>设置src获取头像<br> 可设置徽标</p> <h3>Badge徽标</h3> <p>可设置为右上角或者dot型<br> 颜色可选</p> <h3>Comment评论</h3> <p>基本用法带有作者名、头像、时间和操作（点赞、评论、转发）<br> 可配合List组件<br> 可嵌套评论<br> 提供评论框</p> <h3>Collapse折叠面板</h3> <p>可绑定默认打开、可手风琴模式<br> 可嵌套</p> <h3>Carousel走马灯</h3> <p>通常用于轮播一组图片或卡片轮播<br> 可自动切换<br> 包括切换速度、指示器样式、指示器位置、切换箭头显示、指示器触发都可调整</p> <h3>Card卡片</h3> <p>基础容器，用来显示文字、列表、图文等内容，也可以配合其他组件一起使用，基本上用于数据展示或者名片展示，也可以用于布局，基本上相当于div，可嵌套</p> <h3>Calendar日历</h3> <p>按照日历形式展示数据的容器<br> 可显示通知事项<br> 可用卡片模式<br> 可选择</p> <h3>Description描述列表</h3> <p><em>用于显示多个只读字段<br> 很类似于只读的Table，可设置边框和背景颜色</em><br> 其实不对，这几天自己用了一下，原来它并不是放只读字段的，也可以嵌套组件，感觉他的真实用途应该是以一种表格的方式但又没有Table那么强大，当然也没有Table使用起来那么复杂</p> <h3>Empty空状态</h3> <p>展示空数据时的页面</p> <h3>List列表</h3> <p>列表展示，最基础的用法<br> Loading和栅格布局也都有</p> <h3>Poptip气泡提示</h3> <p>可hover，click，focus触发<br> 位置可调<br> mask可关<br> 可嵌套复杂内容</p> <h3>Statistic统计数值</h3> <p>可展示一些需要突出的数值<br> 可prefix或者suffix内容，加单位、icon或者百分比都可以<br> 可以做倒计时组件Countdown</p> <h3>Tree树形控件</h3> <p>可以做级联展示<br> 可用show-checkbox多选<br> 也可以自定义结点</p> <h3>Tooltip文字提示</h3> <p>hover时会显示<br> 可调位置<br> 可禁用<br> transfer属性很重要，可以避免在position：fixed的定位中被覆盖</p> <h3>TimeLine时间轴</h3> <p>对一系列信息进行时间排序，用法很基础</p> <h3>Tag标签</h3> <p>可删除<br> 颜色可选</p> <h3>Tabs标签页</h3> <p>通常用于切换一些比较简单的页面，如果切换较复杂页面，建议Menu</p> <h3>Table表格</h3> <p>这个组件可就复杂了<br> 可单独设计每列的render<br> 可多选<br> 可筛选</p> <h3>Time相对时间</h3> <p>常用于表示几秒钟前，几分钟前，几天前</p> <h3>Alert警告提示</h3> <h3>Circle进度环</h3> <p>用于显示百分比进度，可配合外部组件使用<br> 可设置成仪表盘样式</p> <h3>Drawer抽屉</h3> <p>用于侧边栏的显示<br> 可嵌套多层抽屉<br> 可自定义内容</p> <h3>Modal对话框</h3> <h3>Message全局提示</h3> <h3>Notice通知提醒</h3> <h3>Progress进度条</h3> <p>。。。未完待续</p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1682027717442220032"></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">你可能感兴趣的:(Vue,前端,vue.js)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1938922034490830848.htm" title="关于uniapp+vue2 升级 Vue3 后无法获取 query的问题" target="_blank">关于uniapp+vue2 升级 Vue3 后无法获取 query的问题</a> <span class="text-muted">代码简单说</span> <a class="tag" taget="_blank" href="/search/2025%E5%BC%80%E5%8F%91%E5%BF%85%E5%A4%87%28%E9%99%90%E6%97%B6%E7%89%B9%E6%83%A0%29/1.htm">2025开发必备(限时特惠)</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/vue2%E8%BF%81%E7%A7%BB%E5%88%B0vue3/1.htm">vue2迁移到vue3</a><a class="tag" taget="_blank" href="/search/%E8%8E%B7%E5%8F%96%E4%B8%8D%E5%88%B0query/1.htm">获取不到query</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%8E%B7%E5%8F%96%E4%B8%8D%E5%88%B0query/1.htm">小程序获取不到query</a><a class="tag" taget="_blank" href="/search/mp%E8%8E%B7%E5%8F%96%E4%B8%8D%E5%88%B0%E8%B7%AF%E7%94%B1/1.htm">mp获取不到路由</a><a class="tag" taget="_blank" href="/search/%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E8%8E%B7%E5%8F%96/1.htm">路由参数获取</a><a class="tag" taget="_blank" href="/search/url%E5%8F%82%E6%95%B0%E8%8E%B7%E5%8F%96/1.htm">url参数获取</a> <div>关于uniapp+vue2升级Vue3后无法获取query的问题tag：vue3迁移、uniapp兼容性、$mp变更、vue2升级、前端坑点记录在升级公司项目的时候，从uniapp+Vue2迁移到uniapp+Vue3，想着应该是个平滑过渡，没成想，一个小小的$mp把我绊了一脚。事情是这样的项目中有这么一段代码，用于判断当前页面的路由参数：onLoad(){constscene=this.</div> </li> <li><a href="/article/1938918505453776896.htm" title="vue3 添加onShow,每次显示都执行" target="_blank">vue3 添加onShow,每次显示都执行</a> <span class="text-muted">萧大侠jdeps</span> <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>vue3的生命周期没有onShow,uniapp有提供onShow.有时候我们希望用户离开在回到页面时，把他最关心的可能变化比较平繁的数据刷新出来。constonShow=()=>{//这里执行刷新}onMounted(()=>{initData();document.addEventListener('visibilitychange',onShow);});onUnmounted(()=>{d</div> </li> <li><a href="/article/1938916864654635008.htm" title="【vue.js之夯实基础-3】TypeScript 入门之简介" target="_blank">【vue.js之夯实基础-3】TypeScript 入门之简介</a> <span class="text-muted">alwarse</span> <a class="tag" taget="_blank" href="/search/vuejs/1.htm">vuejs</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>教程实例参照->入门教程详细教程参照->详细教程完全教程->完全教程什么是TypeScriptTypedJavaScriptatAnyScale.添加了类型系统的JavaScript，适用于任何规模的项目。TypeScript的特性类型系统从TypeScript的名字就可以看出来，「类型」是其最核心的特性。我们知道，JavaScript是一门非常灵活的编程语言：它没有类型约束，一个变量可能初始化时</div> </li> <li><a href="/article/1938916612388220928.htm" title="【DeepSeek实战】3、Ollama实战指南：LobeChat+多网关架构打造高可用大模型集群" target="_blank">【DeepSeek实战】3、Ollama实战指南：LobeChat+多网关架构打造高可用大模型集群</a> <span class="text-muted">无心水</span> <a class="tag" taget="_blank" href="/search/Ollama%E5%AE%9E%E6%88%98%E6%8C%87%E5%8D%97/1.htm">Ollama实战指南</a><a class="tag" taget="_blank" href="/search/LobeChat%E5%AE%9E%E6%88%98/1.htm">LobeChat实战</a><a class="tag" taget="_blank" href="/search/DeepSeek%E5%AE%9E%E6%88%98/1.htm">DeepSeek实战</a><a class="tag" taget="_blank" href="/search/DeepSeek%E5%85%A8%E6%A0%88%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/1.htm">DeepSeek全栈应用开发</a><a class="tag" taget="_blank" href="/search/AI%E5%85%A5%E9%97%A8/1.htm">AI入门</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/CSDN%E6%8A%80%E6%9C%AF%E5%B9%B2%E8%B4%A7/1.htm">CSDN技术干货</a> <div>一、企业级大模型集群架构全景解析在人工智能落地应用的过程中，大模型服务的高可用性、成本控制和灵活扩展能力成为企业关注的核心痛点。本方案通过LobeChat前端、AI网关层和Ollama模型集群的三层架构设计，实现了无需复杂运维即可部署的生产级大模型服务体系。该架构不仅支持负载均衡、故障转移和模型热切换等企业级特性。还通过量化技术将硬件成本降低60%以上，为中小企业提供了与商业云服务相当的性能体验。</div> </li> <li><a href="/article/1938913206118445056.htm" title="uniapp vue3版本的一些小细节！" target="_blank">uniapp vue3版本的一些小细节！</a> <span class="text-muted">养乐多～ch</span> <a class="tag" taget="_blank" href="/search/uni/1.htm">uni</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</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> <div>1,生命周期的引用import{onShow,onHide,onLoad}from"@dcloudio/uni-app"onShow(()=>{showLog('onShow')})onLoad((options)=>{showLog('onLoad')})需要引入，才可以调用2，全局引入css在main.js或者ts中，导入就可以//例如引入全局CSS文件import'./util/baseCs</div> </li> <li><a href="/article/1938903752467607552.htm" title="移动端iOS调试与问题解决：WebView调试多工具协作" target="_blank">移动端iOS调试与问题解决：WebView调试多工具协作</a> <span class="text-muted">游戏开发爱好者8</span> <a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/udp/1.htm">udp</a><a class="tag" taget="_blank" href="/search/https/1.htm">https</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/tcp%2Fip/1.htm">tcp/ip</a> <div>在开发过程中，调试工作不仅仅是前端开发者的职责。当出现复杂的线上问题，调试往往需要涉及到多个团队的协作：前端、后端、测试和运营等。尤其是在移动端WebView页面和原生页面混合开发中，调试工作通常是多部门之间的互动与配合。这篇文章分享了我们在一个社交平台项目中的调试实践，重点讲解了跨团队合作调试中的问题解决策略，并介绍了我们如何通过工具协同与有效沟通，解决了上线后部分用户出现的问题。背景：移动端W</div> </li> <li><a href="/article/1938888241293881344.htm" title="computed()、watch() 与 watchEffect()" target="_blank">computed()、watch() 与 watchEffect()</a> <span class="text-muted">前端岳大宝</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6Vue/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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>下面，我们来系统的梳理关于computed、watch与watchEffect的基本知识点：一、核心概念与响应式基础1.1响应式依赖关系Vue的响应式系统基于依赖收集和触发更新的机制：响应式数据依赖收集创建依赖关系数据变更触发更新执行副作用1.2三大API对比特性computedwatchwatchEffect返回值Ref对象停止函数停止函数依赖收集自动手动指定自动执行时机惰性求值响应变化立即执行</div> </li> <li><a href="/article/1938888240522129408.htm" title="ref() 与 reactive()" target="_blank">ref() 与 reactive()</a> <span class="text-muted">前端岳大宝</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6Vue/1.htm">前端框架Vue</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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>下面，我们来系统的梳理关于ref()与reactive()的基本知识点：一、响应式编程核心概念1.1什么是响应式编程？响应式编程是一种声明式编程范式，它使数据变化能够自动传播到依赖它的代码部分。在Vue中，响应式系统实现了：数据驱动视图：数据变化自动更新DOM依赖追踪：自动跟踪数据依赖关系高效更新：最小化不必要的DOM操作1.2Vue响应式系统演进版本响应式实现特点Vue2Object.defin</div> </li> <li><a href="/article/1938885086799785984.htm" title="2025 VUE常见面试题" target="_blank">2025 VUE常见面试题</a> <span class="text-muted">hmildj</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%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> <div>前言总结一些VUE面试的基础知识，共同学习1.什么是Vue？答案：Vue.js（通常简称为Vue）是一个用于构建用户界面的‌渐进式JavaScript框架，Vue3是Vue.js框架的最新版本，它引入了许多改进和优化，包括性能提升、更好的类型支持、组合API等。2.MVVM模式是什么？Vue如何体现这一模式？‌答案：MVVM将视图（View）与数据（Model）通过ViewModel层解耦，Vue</div> </li> <li><a href="/article/1938883445610573824.htm" title="Vue 3 的＜script setup＞语法糖与 TypeScript 的深度整合" target="_blank">Vue 3 的＜script setup＞语法糖与 TypeScript 的深度整合</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/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/script/1.htm">script</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在Vue单文件组件中，标签除了lang、async、defer、src和name属性外，还有一些其他重要属性和用法值得关注。以下是补充说明及优化建议：一、setup属性（CompositionAPI核心）作用：通过setup属性启用Vue3的CompositionAPI，简化逻辑组织和复用。代码示例：import{ref,onMounted}from'vue'constcount=ref(0)on</div> </li> <li><a href="/article/1938882559177977856.htm" title="平台再升级！接入DeepSeek AI，三大能力一键生成" target="_blank">平台再升级！接入DeepSeek AI，三大能力一键生成</a> <span class="text-muted">橙武科技</span> <a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/deepseek/1.htm">deepseek</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>在数字化项目落地过程中，很多企业都会面临相同的问题：数据库建模要写SQL表结构；业务流程需要画LogicFlow流程图；前端页面还要写AMISJSON配置。从想法到实现，中间至少要经历产品经理、架构师、后端、前端多轮沟通。每个环节都耗时，改起来还要推翻重来。demo地址：https://admin.cwcode.top✨我们的平台，现在直接整合了DeepSeekAI大模型只要输入一句需求，就能：✅</div> </li> <li><a href="/article/1938879407628283904.htm" title="＜script setup＞语法糖" target="_blank">＜script setup＞语法糖</a> <span class="text-muted">前端岳大宝</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6Vue/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>下面，我们来系统的梳理关于Vue3语法糖的基本知识点：一、核心概念1.1什么是？是Vue3中CompositionAPI的编译时语法糖，它通过简化组件声明方式，显著减少样板代码，提供更符合直觉的开发体验。1.2设计目标与优势目标实现方式优势减少样板代码自动暴露顶层绑定代码更简洁提升开发体验更自然的响应式写法开发更高效更好的类型支持原生TypeScript集成类型安全编译时优化编译阶段处理运行时更高</div> </li> <li><a href="/article/1938846381716336640.htm" title="前端用MQTT协议通信的场景和好处" target="_blank">前端用MQTT协议通信的场景和好处</a> <span class="text-muted">CreatorRay</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%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/MQTT/1.htm">MQTT</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94%E7%BD%91/1.htm">物联网</a> <div>上家公司中前端项目有用MQTT协议和硬件通信的场景，虽然很早就听说过MQTT协议，但是这是第一次在前端项目里基于MQTT协议做网络通信。当时没了解太多，工作中只做好了代码层面的工作，并没有深入了解MQTT协议的好处和适合的应用场景。在前端项目中，应该99%的情况都会基于HTTP和WebSocket来进行网络通信，使用MQTT在前端里确实比较小众。目前可能只会在物联网项目中，需要跟硬件通信的前提下，</div> </li> <li><a href="/article/1938820917333389312.htm" title="Vue SPA 路由跳转无法回到顶部问题排查与解决" target="_blank">Vue SPA 路由跳转无法回到顶部问题排查与解决</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a><a class="tag" taget="_blank" href="/search/pinia/1.htm">pinia</a><a class="tag" taget="_blank" href="/search/router/1.htm">router</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>VueSPA路由跳转无法回到顶部问题排查与解决1.问题现象描述在使用Vue3+VueRouter4开发单页应用（SPA）时，遇到如下问题：点击导航栏或页脚的路由跳转后，页面没有自动回到顶部。即使配置了VueRouter的scrollBehavior，页面依然没有回到顶部的效果。有时内容会被导航栏遮住，看起来像"没有回到顶部"。2.常见原因分析内容区没有为导航栏预留空间导航栏是fixed或stick</div> </li> <li><a href="/article/1938811461899972608.htm" title="uniapp中表格固定列（Vue）" target="_blank">uniapp中表格固定列（Vue）</a> <span class="text-muted">ᥬ 小月亮</span> <a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F%2BH5/1.htm">小程序+H5</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</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>一、编写表格：主要是使用了position:sticky;进行固定，不要忘记写top/left/right/bottom的数值哦~表头1表头2表头3表头4表头5表头6操作{{item.data1}}{{item.data2}}{{item.data3}}{{item.data4}}{{item.data5}}{{item.data6}}详情exportdefault{data(){return{t</div> </li> <li><a href="/article/1938810579296776192.htm" title="HTML页面设计——动态照片环" target="_blank">HTML页面设计——动态照片环</a> <span class="text-muted"></span> <div>#前端开发##html超文本标记语言结构学习他的标签##css美化页面其实一部分的网站首页应用了照片环的原理，使得页面看起来更加美观，这里为大家分享一个简单的照片环编写。一、准备好以下素材：二、新建一个HTML文件，这里就取名“01-照片环”好了。三、现在开始编写具体内容，照片环说白了就是几个照片构成的所以body只要写就可以了，编写的时候注意图片的格式是.jpg、.png还是.gif(动态图)。</div> </li> <li><a href="/article/1938803012491341824.htm" title="微信小程序封装loading 修改" target="_blank">微信小程序封装loading 修改</a> <span class="text-muted">-嘻嘻哈哈~</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>1.custom-loading.vue{{text}}{{dots}}exportdefault{props:{visible:Boolean,text:{type:String,default:'加载中'}},data(){return{dots:'',timer:null}},mounted(){this.startAnimation()},beforeDestroy(){clearInte</div> </li> <li><a href="/article/1938792042582831104.htm" title="推荐使用：Vue-Cron —— 简易CRON表达式生成器" target="_blank">推荐使用：Vue-Cron —— 简易CRON表达式生成器</a> <span class="text-muted">乌昱有Melanie</span> <div>推荐使用：Vue-Cron——简易CRON表达式生成器项目地址:https://gitcode.com/gh_mirrors/vu/vue-cronVue-Cron是一款专为Vue.js和Element-UI设计的高效、易用的CRON表达式生成插件。它能帮助开发者轻松创建和管理定时任务策略，提供直观的界面和完善的国际化支持。项目介绍Vue-Cron提供了一个简洁的交互界面，让用户能够通过可视化的操</div> </li> <li><a href="/article/1938792043065176064.htm" title="vue-cron: Cron表达式UI组件开发指南" target="_blank">vue-cron: Cron表达式UI组件开发指南</a> <span class="text-muted">刘通双Elsie</span> <div>vue-cron:Cron表达式UI组件开发指南项目地址:https://gitcode.com/gh_mirrors/vu/vue-cron项目介绍vue-cron是一个基于Vue框架设计的cron表达式UI组件库.该项目特别适用于那些需要在前端界面中提供cron表达式编辑功能的应用场景。通过简洁直观的接口，开发者可以轻松地将此组件集成到他们的Vue应用程序中，以实现对定时任务计划的精确控制。该</div> </li> <li><a href="/article/1938784481305489408.htm" title="vue3 实现文件上传" target="_blank">vue3 实现文件上传</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/1.htm">vue</a> <div>1、上传文件html上传文件将文件拖到此处，或点击上传只支持pdf、doc、docx、png、jpg提交import{ref,reactive}from'vue'import{uploadImg}from'@/api/common.js';letuploadFile=ref(false);letfileList=ref([]);constupload=(val)=>{fileLis</div> </li> <li><a href="/article/1938784229022298112.htm" title="vue el-date-picker 直接赋值时控件失效" target="_blank">vue el-date-picker 直接赋值时控件失效</a> <span class="text-muted">梓暮</span> <a class="tag" taget="_blank" href="/search/IT/1.htm">IT</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/elementui/1.htm">elementui</a> <div>项目场景：前端vueel-date-picker控件无故失效问题描述本人是主打后端，新进的公司要求前后端全干，然后又因为前端做得少，所以经常碰到一些奇怪的问题，比如以下操作，是给vue前端el-date-picker这个时间控件赋值，但是发现，数据是赋值上去了，但是控件失效了，怎么点都没用if(resData.batchEntity.manage_scene_start_time!=null&&r</div> </li> <li><a href="/article/1938779818720030720.htm" title="适用于vue3的移动端Vant4组件库" target="_blank">适用于vue3的移动端Vant4组件库</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/vue.js/1.htm">vue.js</a> <div>适用于vue3的移动端Vant4组件库地址：（https://vant-ui.github.io/vant/#/zh-CN/home）安装：npmivant</div> </li> <li><a href="/article/1938779566541697024.htm" title="在vue3项目中使用el-upload实现文件上传" target="_blank">在vue3项目中使用el-upload实现文件上传</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/%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/vscode/1.htm">vscode</a> <div>在vue3项目中使用el-upload实现文件上传template将文件拖到此处，或点击上传是否更新已经存在的用户数据仅允许导入xls、xlsx格式文件。下载模板确定取消相关属性说明limit：允许上传文件的最大数量accept：接受上传的文件类型headers：设置上传的请求头部action：请求URLdisabled：是否禁用上传on-progress：文件上传时的钩子on-success：文</div> </li> <li><a href="/article/1938777422228942848.htm" title="vue3 使用 Univer Sheets 电子表格组件" target="_blank">vue3 使用 Univer Sheets 电子表格组件</a> <span class="text-muted">小云小白</span> <a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/excel/1.htm">excel</a><a class="tag" taget="_blank" href="/search/Univer/1.htm">Univer</a><a class="tag" taget="_blank" href="/search/Sheet/1.htm">Sheet</a> <div>背景部门要进行在线数据填报：excel表格样式不限;因为要支持直接从excel直接粘贴，经筛选选择：UniverSheetsUniverSheets官网地址https://docs.univer.ai/zh-CN/guides/sheets1、安装和配置#安装核心包pnpmadd@univerjs/presets正常到这就可以了，但是我这边前台报react版本错误，所以去源码包看了一下版本，单独指</div> </li> <li><a href="/article/1938776162532651008.htm" title="java毕业设计房产中介系统mybatis+源码+调试部署+系统+数据库+lw" target="_blank">java毕业设计房产中介系统mybatis+源码+调试部署+系统+数据库+lw</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/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>java毕业设计房产中介系统mybatis+源码+调试部署+系统+数据库+lwjava毕业设计房产中介系统mybatis+源码+调试部署+系统+数据库+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址</div> </li> <li><a href="/article/1938775532384612352.htm" title="vue+Element 动态表单动态增减表单项" target="_blank">vue+Element 动态表单动态增减表单项</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/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>动态增减表单项也是比较常用的，除了在Form组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则，在一些需求下面很灵活方便。下面来看看怎么样实现动态增加，验证，删除表单项。直接上代码点击打开动态表单1"class="box_threeel-icon-delete"@click="removeDomain(item)">现在有({{quantity||"1"}})个最多45个新增</div> </li> <li><a href="/article/1938775153911590912.htm" title="Three.js + Vue 处理glb文件过大问题（DRACOLoader加载压缩glb）" target="_blank">Three.js + Vue 处理glb文件过大问题（DRACOLoader加载压缩glb）</a> <span class="text-muted">printf_824</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E4%B8%8E/1.htm">与</a><a class="tag" taget="_blank" href="/search/three/1.htm">three</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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> <div>起因，three.jsediter导出的glb文件过于庞大，导致部署后文件加载过久解决方法：第一步（得有个blender），压缩：导出时把压缩勾选上这时候我们会得到一个glb文件，但与three.jsediter导出不同的的是，这个文件引入代码中会报如下错误这个警告表明在使用THREE.GLTFLoader时，没有提供DRACOLoader实例。DRACOLoader是用于加载Draco压缩格式的</div> </li> <li><a href="/article/1938774522299740160.htm" title="【ElementUI】日期选择器时间选择范围限制" target="_blank">【ElementUI】日期选择器时间选择范围限制</a> <span class="text-muted">前端Joy姐</span> <a class="tag" taget="_blank" href="/search/element/1.htm">element</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a> <div>ElementUI是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细，这里做一个element-ui日期插件的补充。官方文档中使用picker-options属性来限制可选择的日期，这里举例子稍做补充。单个输入框的组件代码：情景1:设置选择今天以及今天之后的日期data(){return{pickerOptions0:{disabledDate(time){returntime.g</div> </li> <li><a href="/article/1938773764976209920.htm" title="vue大数据量列表渲染性能优化：虚拟滚动原理" target="_blank">vue大数据量列表渲染性能优化：虚拟滚动原理</a> <span class="text-muted">Java小卷</span> <a class="tag" taget="_blank" href="/search/Vue3%E5%BC%80%E6%BA%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E6%88%98/1.htm">Vue3开源组件实战</a><a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89Tree/1.htm">自定义Tree</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E6%BB%9A%E5%8A%A8/1.htm">虚拟滚动</a> <div>前面咱完成了自定义JuanTree组件各种功能的实现。在数据量很大的情况下，我们讲了两种实现方式来提高渲染性能：前端分页和节点数据懒加载。前端分页小节：Vue3扁平化Tree组件的前端分页实现节点数据懒加载小节：ElementTreePlus版功能演示：数据懒加载关于扁平化结构Tree和嵌套结构Tree组件的渲染嵌套结构的Tree组件是一种递归渲染，性能上比起列表结构的v-for渲染比较一般。对于</div> </li> <li><a href="/article/1938773007992418304.htm" title="Vue3+ element 实现导入导出" target="_blank">Vue3+ element 实现导入导出</a> <span class="text-muted">青柠97</span> <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><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、导入功能相关代码分析相关变量定义importVisible：这是一个ref类型的响应式变量，用于控制导入对话框的显示与隐藏，初始值为false。当用户点击“导入”按钮时，会尝试将其值设为true来显示导入对话框，若出现异常则提示相应错误信息。file：同样是ref类型的变量，用于存储用户选择要上传的文件对象，后续在文件上传等操作中会以此文件对象作为基础数据进行处理。pre_import：ref</div> </li> <li><a href="/article/8.htm" title="LeetCode[Math] - #66 Plus One" target="_blank">LeetCode[Math] - #66 Plus One</a> <span class="text-muted">Cwind</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a> <div>原题链接：#66 Plus One 要求：给定一个用数字数组表示的非负整数，如num1 = {1, 2, 3, 9}, num2 = {9, 9}等，给这个数加上1。注意： 1. 数字的较高位存在数组的头上，即num1表示数字1239 2. 每一位（数组中的每个元素）的取值范围为0~9 难度：简单分析：题目比较简单，只须从数组</div> </li> <li><a href="/article/135.htm" title="JQuery中$.ajax()方法参数详解" target="_blank">JQuery中$.ajax()方法参数详解</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和 delete也可以使用，但仅部分浏览器支持。 timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局</div> </li> <li><a href="/article/262.htm" title="JConsole & JVisualVM远程监视Webphere服务器JVM" target="_blank">JConsole & JVisualVM远程监视Webphere服务器JVM</a> <span class="text-muted">Kai_Ge</span> <a class="tag" taget="_blank" href="/search/JVisualVM/1.htm">JVisualVM</a><a class="tag" taget="_blank" href="/search/JConsole/1.htm">JConsole</a><a class="tag" taget="_blank" href="/search/Webphere/1.htm">Webphere</a> <div> JConsole是JDK里自带的一个工具，可以监测Java程序运行时所有对象的申请、释放等动作，将内存管理的所有信息进行统计、分析、可视化。我们可以根据这些信息判断程序是否有内存泄漏问题。　　使用JConsole工具来分析WAS的JVM问题，需要进行相关的配置。　　首先我们看WAS服务器端的配置. 　　1、登录was控制台https://10.4.119.18</div> </li> <li><a href="/article/389.htm" title="自定义annotation" target="_blank">自定义annotation</a> <span class="text-muted">120153216</span> <a class="tag" taget="_blank" href="/search/annotation/1.htm">annotation</a> <div>Java annotation 自定义注释@interface的用法一、什么是注释说起注释，得先提一提什么是元数据(metadata)。所谓元数据就是数据的数据。也就是说，元数据是描述数据的。就象数据表中的字段一样，每个字段描述了这个字段下的数据的含义。而J2SE5.0中提供的注释就是java源代码的元数据，也就是说注释是描述java源</div> </li> <li><a href="/article/516.htm" title="CentOS 5/6.X 使用 EPEL YUM源" target="_blank">CentOS 5/6.X 使用 EPEL YUM源</a> <span class="text-muted">2002wmj</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>CentOS 6.X 安装使用EPEL YUM源1. 查看操作系统版本[root@node1 ~]# uname -a Linux node1.test.com 2.6.32-358.el6.x86_64 #1 SMP Fri Feb 22 00:31:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux [root@node1 ~]#</div> </li> <li><a href="/article/643.htm" title="在SQLSERVER中查找缺失和无用的索引SQL" target="_blank">在SQLSERVER中查找缺失和无用的索引SQL</a> <span class="text-muted">357029540</span> <a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a> <div>--缺失的索引 SELECT avg_total_user_cost * avg_user_impact * ( user_scans + user_seeks ) AS PossibleImprovement , last_user_seek , </div> </li> <li><a href="/article/770.htm" title="Spring3 MVC 笔记（二） —json+rest优化" target="_blank">Spring3 MVC 笔记（二） —json+rest优化</a> <span class="text-muted">7454103</span> <a class="tag" taget="_blank" href="/search/Spring3+MVC/1.htm">Spring3 MVC</a> <div>接上次的 spring mvc 注解的一些详细信息！其实也是一些个人的学习笔记呵呵！ </div> </li> <li><a href="/article/897.htm" title="替换“\”的时候报错Unexpected internal error near index 1 \ ^" target="_blank">替换“\”的时候报错Unexpected internal error near index 1 \ ^</a> <span class="text-muted">adminjun</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E2%80%9C%5C%E6%9B%BF%E6%8D%A2%E2%80%9D/1.htm">“\替换”</a> <div>发现还是有些东西没有刻子脑子里,,过段时间就没什么概念了,所以贴出来...以免再忘... 在拆分字符串时遇到通过 \ 来拆分，可是用所以想通过转义 \\ 来拆分的时候会报异常 public class Main { /*</div> </li> <li><a href="/article/1024.htm" title="POJ 1035 Spell checker(哈希表)" target="_blank">POJ 1035 Spell checker(哈希表)</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/%E6%9A%B4%E5%8A%9B%E6%B1%82%E8%A7%A3--%E5%93%88%E5%B8%8C%E8%A1%A8/1.htm">暴力求解--哈希表</a> <div>/* 题意：输入字典，然后输入单词，判断字典中是否出现过该单词，或者是否进行删除、添加、替换操作，如果是，则输出对应的字典中的单词要求按照输入时候的排名输出题解：建立两个哈希表。一个存储字典和输入字典中单词的排名，一个进行最后输出的判重 */ #include <iostream> //#define using namespace std; const int HASH =</div> </li> <li><a href="/article/1151.htm" title="通过原型实现javascript Array的去重、最大值和最小值" target="_blank">通过原型实现javascript Array的去重、最大值和最小值</a> <span class="text-muted">ayaoxinchao</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/array/1.htm">array</a><a class="tag" taget="_blank" href="/search/prototype/1.htm">prototype</a> <div>用原型函数（prototype）可以定义一些很方便的自定义函数，实现各种自定义功能。本次主要是实现了Array的去重、获取最大值和最小值。实现代码如下： <script type="text/javascript"> Array.prototype.unique = function() { var a = {}; var le</div> </li> <li><a href="/article/1278.htm" title="UIWebView实现https双向认证请求" target="_blank">UIWebView实现https双向认证请求</a> <span class="text-muted">bewithme</span> <a class="tag" taget="_blank" href="/search/UIWebView/1.htm">UIWebView</a><a class="tag" taget="_blank" href="/search/https/1.htm">https</a><a class="tag" taget="_blank" href="/search/Objective-C/1.htm">Objective-C</a> <div> 什么是HTTPS双向认证我已在先前的博文 ASIHTTPRequest实现https双向认证请求中有讲述，不理解的读者可以先复习一下。本文是用UIWebView来实现对需要客户端证书验证的服务请求，网上有些文章中有涉及到此内容，但都只言片语，没有讲完全，更没有完整的代码，让人困扰不已。但是此知</div> </li> <li><a href="/article/1405.htm" title="NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存)" target="_blank">NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存)</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a> <div>3.事务处理 Redis对事务的支持目前不比较简单。Redis只能保证一个client发起的事务中的命令可以连续的执行，而中间不会插入其他client的命令。当一个client在一个连接中发出multi命令时，这个连接会进入一个事务上下文，该连接后续的命令不会立即执行，而是先放到一个队列中，当执行exec命令时，redis会顺序的执行队列中</div> </li> <li><a href="/article/1532.htm" title="各数据库分页sql备忘" target="_blank">各数据库分页sql备忘</a> <span class="text-muted">bingyingao</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/%E5%88%86%E9%A1%B5/1.htm">分页</a> <div>ORACLE 下面这个效率很低 SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_FS_RETURN order by id desc) A ) WHERE RN <20; 下面这个效率很高 SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_</div> </li> <li><a href="/article/1659.htm" title="【Scala七】Scala核心一：函数" target="_blank">【Scala七】Scala核心一：函数</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>1. 如果函数体只有一行代码，则可以不用写{},比如 def print(x: Int) = println(x) 一行上的多条语句用分号隔开，则只有第一句属于方法体，例如 def printWithValue(x: Int) : String= println(x); "ABC" 上面的代码报错，因为，printWithValue的方法</div> </li> <li><a href="/article/1786.htm" title="了解GHC的factorial编译过程" target="_blank">了解GHC的factorial编译过程</a> <span class="text-muted">bookjovi</span> <a class="tag" taget="_blank" href="/search/haskell/1.htm">haskell</a> <div>GHC相对其他主流语言的编译器或解释器还是比较复杂的，一部分原因是haskell本身的设计就不易于实现compiler，如lazy特性，static typed，类型推导等。关于GHC的内部实现有篇文章说的挺好，这里，文中在RTS一节中详细说了haskell的concurrent实现，里面提到了green thread，如果熟悉Go语言的话就会发现，ghc的concurrent实现和Go有点类</div> </li> <li><a href="/article/1913.htm" title="Java-Collections Framework学习与总结-LinkedHashMap" target="_blank">Java-Collections Framework学习与总结-LinkedHashMap</a> <span class="text-muted">BrokenDreams</span> <a class="tag" taget="_blank" href="/search/LinkedHashMap/1.htm">LinkedHashMap</a> <div> 前面总结了java.util.HashMap，了解了其内部由散列表实现，每个桶内是一个单向链表。那有没有双向链表的实现呢？双向链表的实现会具备什么特性呢？来看一下HashMap的一个子类——java.util.LinkedHashMap。 </div> </li> <li><a href="/article/2040.htm" title="读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory" target="_blank">读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/abstract/1.htm">abstract</a> <div>声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * Abstract Factory Pattern * 抽象工厂模式的目的是： * 通过在抽象工厂里面定义一组产品接口，方便地切换“产品簇” * 这些接口是相关或者相依赖的</div> </li> <li><a href="/article/2167.htm" title="压暗面部高光" target="_blank">压暗面部高光</a> <span class="text-muted">cherishLC</span> <a class="tag" taget="_blank" href="/search/PS/1.htm">PS</a> <div>方法一、压暗高光&重新着色当皮肤很油又使用闪光灯时，很容易在面部形成高光区域。下面讲一下我今天处理高光区域的心得：皮肤可以分为纹理和色彩两个属性。其中纹理主要由亮度通道（Lab模式的L通道）决定，色彩则由a、b通道确定。处理思路为在保持高光区域纹理的情况下，对高光区域着色。具体步骤为：降低高光区域的整体的亮度，再进行着色。如果想简化步骤，可以只进行着色（参看下面的步骤1</div> </li> <li><a href="/article/2294.htm" title="Java VisualVM监控远程JVM" target="_blank">Java VisualVM监控远程JVM</a> <span class="text-muted">crabdave</span> <a class="tag" taget="_blank" href="/search/visualvm/1.htm">visualvm</a> <div>Java VisualVM监控远程JVM JDK1.6开始自带的VisualVM就是不错的监控工具. 这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到界面通过JMX连接远程机器, 需要经过下面的配置: 1. 修改远程机器JDK配置文件 (我这里远程机器是linux). </div> </li> <li><a href="/article/2421.htm" title="Saiku去掉登录模块" target="_blank">Saiku去掉登录模块</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/saiku/1.htm">saiku</a><a class="tag" taget="_blank" href="/search/%E7%99%BB%E5%BD%95/1.htm">登录</a><a class="tag" taget="_blank" href="/search/olap/1.htm">olap</a><a class="tag" taget="_blank" href="/search/BI/1.htm">BI</a> <div> 1、修改applicationContext-saiku-webapp.xml <security:intercept-url pattern="/rest/**" access="IS_AUTHENTICATED_ANONYMOUSLY" /> <security:intercept-url pattern=&qu</div> </li> <li><a href="/article/2548.htm" title="浅析 Flex中的Focus" target="_blank">浅析 Flex中的Focus</a> <span class="text-muted">dsjt</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Flex/1.htm">Flex</a><a class="tag" taget="_blank" href="/search/Flash/1.htm">Flash</a> <div>关键字：focus、 setFocus、 IFocusManager、KeyboardEvent 焦点、设置焦点、获得焦点、键盘事件一、无焦点的困扰——组件监听不到键盘事件原因：只有获得焦点的组件（确切说是InteractiveObject）才能监听到键盘事件的目标阶段；键盘事件（flash.events.KeyboardEvent）参与冒泡阶段，所以焦点组件的父项（以及它爸</div> </li> <li><a href="/article/2675.htm" title="Yii全局函数使用" target="_blank">Yii全局函数使用</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>由于YII致力于完美的整合第三方库，它并没有定义任何全局函数。yii中的每一个应用都需要全类别和对象范围。例如，Yii::app()->user;Yii::app()->params['name'];等等。我们可以自行设定全局函数，使得代码看起来更加简洁易用。(原文地址) 我们可以保存在globals.php在protected目录下。然后，在入口脚本index.php的，我们包括在</div> </li> <li><a href="/article/2802.htm" title="设计模式之单例模式二（解决无序写入的问题）" target="_blank">设计模式之单例模式二（解决无序写入的问题）</a> <span class="text-muted">come_for_dream</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a><a class="tag" taget="_blank" href="/search/volatile/1.htm">volatile</a><a class="tag" taget="_blank" href="/search/%E4%B9%B1%E5%BA%8F%E6%89%A7%E8%A1%8C/1.htm">乱序执行</a><a class="tag" taget="_blank" href="/search/%E5%8F%8C%E9%87%8D%E6%A3%80%E9%AA%8C%E9%94%81/1.htm">双重检验锁</a> <div> 在上篇文章中我们使用了双重检验锁的方式避免懒汉式单例模式下由于多线程造成的实例被多次创建的问题，但是因为由于JVM为了使得处理器内部的运算单元能充分利用，处理器可能会对输入代码进行乱序执行（Out Of Order Execute）优化，处理器会在计算之后将乱序执行的结果进行重组，保证该</div> </li> <li><a href="/article/2929.htm" title="程序员从初级到高级的蜕变" target="_blank">程序员从初级到高级的蜕变</a> <span class="text-muted">gcq511120594</span> <a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>软件开发是一个奇怪的行业，市场远远供不应求。这是一个已经存在多年的问题，而且随着时间的流逝，愈演愈烈。我们严重缺乏能够满足需求的人才。这个行业相当年轻。大多数软件项目是失败的。几乎所有的项目都会超出预算。我们解决问题的最佳指导方针可以归结为——“用一些通用方法去解决问题，当然这些方法常常不管用，于是，唯一能做的就是不断地尝试，逐个看看是否奏效”。现在我们把淫浸代码时间超过3年的开发人员称为</div> </li> <li><a href="/article/3056.htm" title="Reverse Linked List" target="_blank">Reverse Linked List</a> <span class="text-muted">hcx2013</span> <a class="tag" taget="_blank" href="/search/list/1.htm">list</a> <div>Reverse a singly linked list. /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * ListNode(int x) { val = x; } * } */ p</div> </li> <li><a href="/article/3183.htm" title="Spring4.1新特性——数据库集成测试" target="_blank">Spring4.1新特性——数据库集成测试</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/spring+4.1/1.htm">spring 4.1</a> <div>目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T</div> </li> <li><a href="/article/3310.htm" title="C# Ajax上传图片同时生成微缩图(附Demo)" target="_blank">C# Ajax上传图片同时生成微缩图(附Demo)</a> <span class="text-muted">liyonghui160com</span> <div> 1.Ajax无刷新上传图片,详情请阅我的这篇文章。（jquery + c# ashx） 2.C#位图处理 System.Drawing。 3.最新demo支持IE7,IE8,Fir</div> </li> <li><a href="/article/3437.htm" title="Java list三种遍历方法性能比较" target="_blank">Java list三种遍历方法性能比较</a> <span class="text-muted">pda158</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>从c/c++语言转向java开发，学习java语言list遍历的三种方法，顺便测试各种遍历方法的性能，测试方法为在ArrayList中插入1千万条记录，然后遍历ArrayList，发现了一个奇怪的现象，测试代码例如以下： package com.hisense.tiger.list; import java.util.ArrayList; import java.util.Iterator;</div> </li> <li><a href="/article/3564.htm" title="300个涵盖IT各方面的免费资源（上）——商业与市场篇" target="_blank">300个涵盖IT各方面的免费资源（上）——商业与市场篇</a> <span class="text-muted">shoothao</span> <a class="tag" taget="_blank" href="/search/seo/1.htm">seo</a><a class="tag" taget="_blank" href="/search/%E5%95%86%E4%B8%9A%E4%B8%8E%E5%B8%82%E5%9C%BA/1.htm">商业与市场</a><a class="tag" taget="_blank" href="/search/IT%E8%B5%84%E6%BA%90/1.htm">IT资源</a><a class="tag" taget="_blank" href="/search/%E5%85%8D%E8%B4%B9%E8%B5%84%E6%BA%90/1.htm">免费资源</a> <div> A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板。 Bootswatch:免费的Bootstrap主题。 Templated:收集了845个免费的CSS和HTML5网站模板。 Wordpress.org|Wordpress.com:可免费创建你的新网站。 Strikingly:关注领域中免费无限的移动优</div> </li> <li><a href="/article/3691.htm" title="localStorage、sessionStorage" target="_blank">localStorage、sessionStorage</a> <span class="text-muted">uule</span> <a class="tag" taget="_blank" href="/search/localStorage/1.htm">localStorage</a> <div>W3School 例子 HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不</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>