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

常用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> <!--PC和WAP自适应版--> <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"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(Vue,前端,vue.js)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1834843152423415808.htm" title="刷刷前端手写题" target="_blank">刷刷前端手写题</a> <span class="text-muted">・T・T・</span> <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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>闭包用途闭包闭包让你可以在一个内层函数中访问到其外层函数的作用域防抖描述前面所有触发都被取消,最后一次执行,在规定时间之后才会触发,也就是说如果连续快速的触发,用户操作频繁,但只会执行一次。常用场景:输入框输入代码实现1、lodash的debounce函数2、当用户点击按钮时,debounce包装的getBtnValue函数会延迟3000毫秒执行。如果在这3000毫秒内用户再次点击按钮,那么之前的</div> </li> <li><a href="/article/1834840000068415488.htm" title="treeselect只选了分支节点全选_vue Treeselect 树形下拉框:获取选中节点的ids和lables操作..." target="_blank">treeselect只选了分支节点全选_vue Treeselect 树形下拉框:获取选中节点的ids和lables操作...</a> <span class="text-muted">weixin_39637285</span> <div>API:https://vue-treeselect.js.org/#events1.ids:即value1.lable:需要用到方法:@select(node,instanceId)和@deselect(node,instanceId)v-model="DRHA_EFaultModeTree_value":multiple="true":options="DRHA_EFaultModeTree_</div> </li> <li><a href="/article/1834835713846243328.htm" title="Vue 和 React 的对比" target="_blank">Vue 和 React 的对比</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/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>React和Vue有许多相似之处:使用VirtualDOM提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。运行时性能React在React应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。如要避免不必要的子组件的重渲染,你需要在所有可能的地方使用PureComponent,</div> </li> <li><a href="/article/1834832183529926656.htm" title="用前端的语言写后端——Node.js之Express" target="_blank">用前端的语言写后端——Node.js之Express</a> <span class="text-muted">tabzzz</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/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/express/1.htm">express</a> <div>ExpressExpress是一种流行的模型视图控制器(MVC)Node.js框架,具有快速、极简和灵活的优点,为Web和移动应用程序开发提供了强大的功能集合。最受欢迎的Node.js框架!文章目录Express安装ExpressHelloWorld路由中间件全局中间件应用中间件开放跨域请求几种常用的Express内置中间件函数1.JSON格式数据中间件函数2.静态文件中间件函数3.路由中间件函数</div> </li> <li><a href="/article/1834831426961371136.htm" title="从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南" target="_blank">从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南</a> <span class="text-muted">Sam9029</span> <a class="tag" taget="_blank" href="/search/Webpack/1.htm">Webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a> <div>**‍‍若此文你认为写的不错,不要吝啬你的赞扬,求收藏,求评论,求一个大大的赞!**由于文章有一万字左右的,故而内容中部分不免冗余,或许有写了些废话进去,但整体也无伤大雅**‍‍文章是初次实践总结,若有错误或某个内容有更优的解决方案,还望指正!**附录中有脚手架文件夹目录大纲(Vue3+Webpack5)脚手架项目源码:https://github.com/sam9029/s9_webpack_g</div> </li> <li><a href="/article/1834824106613239808.htm" title="前端技能树,面试复习第 29 天—— 简述 Babel 的原理 | Webpack 构建流程 | Webpack 热更新原理 | Git 常用命令" target="_blank">前端技能树,面试复习第 29 天—— 简述 Babel 的原理 | Webpack 构建流程 | Webpack 热更新原理 | Git 常用命令</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%E5%A4%8D%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">前端面试复习笔记</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%9D%A2%E7%BB%8F/1.htm">前端面试面经</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/1.htm">前端工程化</a><a class="tag" taget="_blank" href="/search/Webpack/1.htm">Webpack</a><a class="tag" taget="_blank" href="/search/Babel/1.htm">Babel</a><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%A4%A7%E5%8E%82%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">大厂面试题</a> <div>31b3479814f74acbb70b9f63f2e80012.gif"width=“100%”>⭐️本文首发自前端修罗场(点击加入社区,参与学习打卡,获取奖励),是一个由资深开发者独立运行的专业技术社区,我专注Web技术、答疑解惑、面试辅导以及职业发展。。1.Babel的原理是什么?babel的转译过程也分为三个阶段,这三步具体是:解析、转换、生成解析Parse:将代码解析⽣成抽象语法树(AS</div> </li> <li><a href="/article/1834818562884202496.htm" title="前端开发深入了解webpack" target="_blank">前端开发深入了解webpack</a> <span class="text-muted">史努比的大头</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>什么是webpackWebpack是一个现代JavaScript应用程序的模块打包工具。它主要用于将各种资源(如JavaScript、CSS、图片等)打包成一个或多个文件,以优化Web应用的加载性能。Webpack的核心功能包括:模块化:支持将代码拆分为模块,便于管理和重用。打包:将多个模块和资源打包成一个或多个文件,减少HTTP请求。加载器(Loaders):处理不同类型的文件(如转换ES6到E</div> </li> <li><a href="/article/1834818182758625280.htm" title="【Webpack】了解Webpack" target="_blank">【Webpack】了解Webpack</a> <span class="text-muted">Sam9029</span> <a class="tag" taget="_blank" href="/search/Webpack/1.htm">Webpack</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主‍若此文你认为写的不错,不要吝啬你的赞扬,求收藏,求评论,求一个大大的赞!*文章若有错误或某个内容有更优的解决方案,还望指正!*Webpack了解webpack指南https://webpack.docschina.org/guides/webpack文档https://webpack.docschina.org/前</div> </li> <li><a href="/article/1834796002360520704.htm" title="最好用的e2e框架,使用 Cypress 让产品持续稳定交付" target="_blank">最好用的e2e框架,使用 Cypress 让产品持续稳定交付</a> <span class="text-muted">Node全栈</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>以前我们经常使用nightwatch,现在都已经切换到cypress了,可以说cypress目前最好用的e2e框架。具体原因和对比,就是本文要讲的内容。背景ApacheAPISIXDashboard的设计是为了让用户通过前端界面尽可能方便地操作ApacheAPISIX。从项目初始化到现在,已经有552commits、发布了10个版本。在如此之快的产品迭代过程中,确保开源产品质量显的尤为重要。为此,</div> </li> <li><a href="/article/1834793357197537280.htm" title="生成一个完整的App代码通常不会仅仅通过单一的文件或几种语言的简单组合来完成,因为App的开发涉及前端用户界面、后端逻辑处理、数据库管理以及可能的第三方服务集成等多个方面。不过,我可以为你提供一个概念" target="_blank">生成一个完整的App代码通常不会仅仅通过单一的文件或几种语言的简单组合来完成,因为App的开发涉及前端用户界面、后端逻辑处理、数据库管理以及可能的第三方服务集成等多个方面。不过,我可以为你提供一个概念</a> <span class="text-muted">NewmanEdwarda2</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%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>前端(用户界面)yinanjinying.comHTML/CSS/JavaScript(原生Web开发)对于简单的WebApp,你可以直接使用HTML来构建页面结构,CSS来设置样式,JavaScript来添加交互性。React(JavaScript/TypeScript)对于更复杂的单页应用(SPA),React是一个流行的选择。它允许你构建可复用的UI组件。Flutter(Dart)如果你想要</div> </li> <li><a href="/article/1834791969054879744.htm" title="Java 基于 SpringBoot+vue 的大学生科创项目在线管理系统(附源码)" target="_blank">Java 基于 SpringBoot+vue 的大学生科创项目在线管理系统(附源码)</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/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%AD%A6%E7%94%9F%E7%A7%91%E5%88%9B%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/1.htm">大学生科创项目管理系统</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%AD%A6%E7%94%9F%E7%A7%91%E5%88%9B%E9%A1%B9%E7%9B%AE/1.htm">大学生科创项目</a> <div>博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w+、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌文末获取源码联系精彩专栏推荐订阅不然下次找不到哟2022-2024年最全的计算机软件毕业设计选题大全:1000个热门选题推荐✅Java项目精品实战案例《100套》Java微信小程序项目实战《100套》Python项目实战《100套》</div> </li> <li><a href="/article/1834786297240186880.htm" title="由于直接在回答中完整展示一个复杂如游戏商城的代码系统并不现实(会超出限制且难以维护),我将为你概述一个简化的游戏商城系统的架构,并提供关键部分的示例代码,这些代码将涵盖几种不同的编程语言。" target="_blank">由于直接在回答中完整展示一个复杂如游戏商城的代码系统并不现实(会超出限制且难以维护),我将为你概述一个简化的游戏商城系统的架构,并提供关键部分的示例代码,这些代码将涵盖几种不同的编程语言。</a> <span class="text-muted">NewmanEdwarda2</span> <a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>架构概述pzswcc.cn前端:用于展示商品、处理用户交互(如查看商品详情、添加到购物车、结账等)。后端:处理业务逻辑(如商品库存管理、订单处理、用户认证等),与数据库交互。数据库:存储商品信息、用户信息、订单信息等。示例代码前端(HTML+JavaScript)HTML(简单页面布局)html游戏商城游戏商城JavaScript(使用FetchAPI调用后端API)javascript//假设后</div> </li> <li><a href="/article/1834780499281801216.htm" title="解锁网页交互利器:深入浅出 AJAX,用 JavaScript 与后端服务器对话,局部请求刷新数据" target="_blank">解锁网页交互利器:深入浅出 AJAX,用 JavaScript 与后端服务器对话,局部请求刷新数据</a> <span class="text-muted">微特尔普拉斯</span> <a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</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>在当今互联网时代,网页早已不再是静态的信息展示平台,而是充满动态交互的应用体验场。而实现这种流畅交互体验的关键技术之一,便是AJAX(AsynchronousJavaScriptandXML)。它允许网页在后台悄无声息地与服务器交换数据,无需刷新整个页面,便可实现内容的动态更新,为用户带来行云流水般的操作体验。在AJAX出现之前,网页开发采用的是前后端不分离的模式。前端开发者编写好HTML和CSS</div> </li> <li><a href="/article/1834780498128367616.htm" title="写一个图片裁剪的js,JavaScript图片裁剪插件PlusCropper" target="_blank">写一个图片裁剪的js,JavaScript图片裁剪插件PlusCropper</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/node/1.htm">node</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</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>在前端开发中,图片裁剪是一个常见的需求。本文将深入解析一个功能完善的JavaScript图片裁剪插件——PlusCropper,带你一步步了解其实现原理和使用方法。一、插件概述PlusCropper是一个轻量级的JavaScript插件,它允许用户在网页上交互式地裁剪图片。它提供了以下功能:可拖拽和缩放的裁剪框:用户可以通过鼠标或触摸操作来调整裁剪区域的大小和位置。图片旋转:支持图片的顺时针和逆时</div> </li> <li><a href="/article/1834780371770765312.htm" title="数据库datetime时间前端显示格式化" target="_blank">数据库datetime时间前端显示格式化</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93datetime/1.htm">数据库datetime</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4%E6%A0%BC%E5%BC%8F%E8%BD%AC%E6%8D%A2/1.htm">时间格式转换</a> <div>后台查询数据库返回的这种时间格式2019-04-24T02:30:00.000+0000第一种方法:vartime="2019-11-04T08:04:52.000+0000";vard=newDate(time);vartimes=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+''+d.getHours()+':'+d.getMinut</div> </li> <li><a href="/article/1834776588835713024.htm" title="echarts象形渐变柱状图" target="_blank">echarts象形渐变柱状图</a> <span class="text-muted">星星跌入梦境*</span> <a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</a><a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、效果图如下:二、代码如下(1)父组件importitemfrom'../bigdata/components/item.vue'exportdefault{components:{item}}.page-con{width:100%;height:100%;.main-con{width:35%;height:33%;}}(2)子组件importechartsfrom"echarts";exp</div> </li> <li><a href="/article/1834770162801274880.htm" title="Vue项目中实现AES加密解密" target="_blank">Vue项目中实现AES加密解密</a> <span class="text-muted">小金子J</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/JavaScript%E5%88%86%E4%BA%AB/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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>在前端开发中,保护用户数据的安全性至关重要。AES(高级加密标准)作为一种广泛使用的对称加密算法,因其高效性和安全性而受到青睐。本文将介绍如何在Vue项目中实现AES加密解密,包括ECB和CBC两种模式。环境搭建在Vue项目中使用AES加密解密功能之前,需要先安装crypto-js库。通过执行以下命令,可以轻松地将crypto-js添加到项目中:npminstallcrypto-js--save-</div> </li> <li><a href="/article/1834768522685804544.htm" title="uni-app开发微信小程序" target="_blank">uni-app开发微信小程序</a> <span class="text-muted">hong161688</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><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>uni-app是一个使用Vue.js开发所有前端应用的框架,它支持编译到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/字节跳动/QQ/京东等)平台。使用uni-app开发微信小程序,可以充分利用Vue.js的开发效率和小程序平台的原生能力,实现跨平台的高效开发。以下将详细介绍使用uni-app开发微信小程序的全过程,包括项目搭建、开发、调试、测试及发布等环节,内容将尽量达到或超</div> </li> <li><a href="/article/1834756301549301760.htm" title="使用 uni-app 开发微信小程序:深入教程与技巧" target="_blank">使用 uni-app 开发微信小程序:深入教程与技巧</a> <span class="text-muted">代码伐木匠</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0%E6%9C%AC/1.htm">笔记本</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><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/notepad%2B%2B/1.htm">notepad++</a> <div>使用uni-app开发微信小程序:深入教程与技巧uni-app是一个使用Vue.js语法开发跨平台应用的框架,能够编译到iOS、Android、H5、微信小程序等多个平台。通过uni-app,你可以一套代码同时生成多个端的应用,极大提升开发效率。本文将带你深入了解如何使用uni-app开发微信小程序,并提供大量实践经验与技巧。1.环境配置与项目创建要开始使用uni-app开发微信小程序,首先需要搭</div> </li> <li><a href="/article/1834751763526283264.htm" title="vue3打包 error in node_modules/@types/node/stream/web.d.ts 错误解决办法" target="_blank">vue3打包 error in node_modules/@types/node/stream/web.d.ts 错误解决办法</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>ue3项目打包的时候突然报错,错误如下ERRORFailedtocompilewith1error14:13:57errorinnode_modules/@types/node/stream/web.d.ts:469:56TS1005:'?'expected.467|//IfReportingObservercheckisremoved,thetypeherewillformacircularre</div> </li> <li><a href="/article/1834743823390044160.htm" title="微信小程序集成前端日志库" target="_blank">微信小程序集成前端日志库</a> <span class="text-muted">人工智能的苟富贵</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">前端小程序</a><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%89%8D%E7%AB%AF/1.htm">前端</a> <div>在微信小程序内接入日志库的记录在开发微信小程序时,为了更好地调试和维护代码,通常需要记录日志信息。我尝试了多种日志库,包括Winston、pion和loglevel,并最终选择了loglevel作为日志库,并实现了日志上传到服务器的功能。本文详细记录了这一过程,以供参考。使用Winston失败最初,我尝试在微信小程序中使用Winston日志库。然而,Winston依赖Node.js的部分核心模块(</div> </li> <li><a href="/article/1834741917271814144.htm" title="vue IE因Promise无法显示解决办法" target="_blank">vue IE因Promise无法显示解决办法</a> <span class="text-muted">Yao请输入昵称</span> <div>一、ie11打开vue2.0项目空白,控制台报错vuexrequiresaPromisepolyfillinthisbrowserPromise为ES6语法,有的浏览器不支持ES6,所以需要安装babel-polyfill来将ES6转换为浏览器可识别的ES5语法①npminstall--save-devbabel-polyfill②在main.js中引入import"babel-polyfill"</div> </li> <li><a href="/article/1834741676413906944.htm" title="【vue】el-table格式化el-table-column内容(主要的三种方法)" target="_blank">【vue】el-table格式化el-table-column内容(主要的三种方法)</a> <span class="text-muted">m0_67401499</span> <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/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E7%99%BE%E5%BA%A6/1.htm">百度</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>el-table格式化el-table-column内容遇到一个需求,一个循环展示的table中的某项,或者某几项需要格式化。对于格式化的方法,主要有templatescope、formatter;一、templatescope、v-if判断男女二、利用formatter、slot属性查看帮助文档<el-table-columnprop="xb1"label=&</div> </li> <li><a href="/article/1834738272555855872.htm" title="Vue Router push方法的使用" target="_blank">Vue Router push方法的使用</a> <span class="text-muted">hzw0510</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>VueRouterpush方法的使用this.$router.push是VueRouter提供的一个方法,用于在Vue.js应用中进行编程式导航。它的作用是将用户导航到应用中的不同路由。基本作用this.$router.push方法会在浏览器历史记录中添加一个新的记录,并导航到指定的路由。它的工作方式类似于点击一个组件,或者在浏览器中手动输入URL后点击回车。使用示例以下是一些使用this.$ro</div> </li> <li><a href="/article/1834718092807204864.htm" title="vue中给打包的文件指定自定义文件名以及加上哈希值解决每次打包上线存在缓存问题" target="_blank">vue中给打包的文件指定自定义文件名以及加上哈希值解决每次打包上线存在缓存问题</a> <span class="text-muted">miao_zz</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>vue中给打包的文件指定自定义文件名以及加上哈希值解决每次打包上线存在缓存问题vue.config.jsvue.config.jsconstport=process.env.port||8081//端口constTimestamp=newDate().getTime();constMiniCssExtractPlugin=require("mini-css-extract-plugin")modu</div> </li> <li><a href="/article/1834697926161559552.htm" title="vue前端根据接口返回的url 下载图片" target="_blank">vue前端根据接口返回的url 下载图片</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>downloadPicture(imgSrc,name){constimage=newImage();//解决跨域Canvas污染问题image.setAttribute("crossOrigin","anonymous");image.src=imgSrc;image.onload=()=>{constcanvas=document.createElement("canvas");canvas.</div> </li> <li><a href="/article/1834679976411099136.htm" title="前端学习之三种css样式写法" target="_blank">前端学习之三种css样式写法</a> <span class="text-muted">MissPSTime</span> <div>选择器/*内嵌式样式书写*/-->,不使用-->后代选择器标签选择器标签选择器标签选择器</div> </li> <li><a href="/article/1834676125096308736.htm" title="GIN日志和日志格式" target="_blank">GIN日志和日志格式</a> <span class="text-muted">一叶知秋@qqy</span> <a class="tag" taget="_blank" href="/search/GO%E6%8A%80%E6%9C%AF%E9%A2%84%E7%A0%94/1.htm">GO技术预研</a> <div>前言感谢开源项目gin-vue-admin,以及1010工作室的教程,项目文档我只是在跟着学习,然后记录下笔记而已,可能会有新的代码加入,但是本质还是跟着学习的一个过程。为什么要使用日志记录参数信息猜测用户行为复现系统bug并修复不推荐使用GIN自带的日志GIM虽然自带日志写入中间件,但是自定义比较蛮烦,而且使用起来也不能随心所欲。第三方日志工具go-logginglogrus看见go-loggi</div> </li> <li><a href="/article/1834673478599536640.htm" title="vue2与vue3的区别" target="_blank">vue2与vue3的区别</a> <span class="text-muted">longfan_</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>1.vue2和vue3响应式原理发生了改变vue2的响应式原理是利⽤es5的⼀个API,Object.defineProperty()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。vue3中使⽤了es6的proxyAPI对数据代理,通过reactive()函数给每⼀个对象都包⼀层Proxy,通过Proxy监听属性的变化,从⽽实现对数据的监控。这⾥是引相⽐于vue2版本,使⽤proxy的优势如下1.</div> </li> <li><a href="/article/1834671207056764928.htm" title="组件通信——provide 和 inject 实现爷孙组件通信" target="_blank">组件通信——provide 和 inject 实现爷孙组件通信</a> <span class="text-muted">你不讲 wood</span> <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>provide和inject实现爷孙组件通信介绍provide和inject是Vue.js提供的一种在组件之间共享数据的机制,它允许在组件树中的任何地方注入依赖项。这对于跨越多个层级的组件间通信特别有用,因此无需手动将prop数据逐层传递下去。provide:在一个组件中使用provide方法来定义要提供的数据或方法。provide方法返回一个对象,该对象包含了要提供的数据或方法。inject:在</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. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>