Element 2 组件源码剖析之Steps 步骤条(下)-核心逻辑

简介

前文步骤组件状态管理主要从生命周期的角度介绍了步骤组件实例化时组件之间的状态管理，本文将介绍步骤组件具体实现，耐心读完，相信会对您有所帮助。

更多组件剖析详见 Element 2 源码剖析组件总览 。

步骤组件 step.vue

步骤条主要功能实现都在该组件中。

HTML

模板渲染成一个类名el-step的div元素，元素包含两部分内容

  1. 用于图标、轴线的渲染。
  2. 用于标题、描述的渲染。
// packages\steps\src\step.vue

下图是不同状态步骤的展示效果：

Element 2 组件源码剖析之Steps 步骤条(下)-核心逻辑_第1张图片

步骤元素通过内联样式和动态类名渲染不同配置下组件样式。


  // ...

根元素自定义类名

文档中提到当设置 simple 可应用简洁风格，该条件下 align-center 、 direction 、 space 都将失效。

接下将一一分析为什么设置会失效。

属性 direction 用于设置显示方向，生成类名 is-vertical或 is-horizontal。根据计算属性isSimple判断设置简洁风格时，只会生成类名 is-simple。

!isSimple && `is-${$parent.direction}`,  // 生成类名 is-vertical/is-horizontal
isSimple && 'is-simple', // 生成类名 is-simple

// computed 是否简洁风格
isSimple() {
  return this.$parent.simple;
},

顶层组件中也会根据属性simple、direction生成根元素类名el-steps--simple 、el-steps--vertical或el-steps--horizontal。

// packages\steps\src\steps.vue

如果未设置间距 space和居中对齐 alignCenter，步骤条末元素会生成类名 is-flex用于自适应宽度。 如果设置了简洁风格，计算属性space中属性space设置无效。

isLast && !space && !isCenter && 'is-flex', // 生成类名is-flex

// computed
// 是否步骤条末元素
isLast() {
  const parent = this.$parent;
  return parent.steps[parent.steps.length - 1] === this;
},
// 间隔设置
space() {
  const { isSimple, $parent: { space } } = this;
  return isSimple ? '' : space ;
},
// 标题描述是否居中对齐
isCenter() {
  return this.$parent.alignCenter;
},

非简洁模式和竖直方向下，设置居中对齐 alignCenter才会生效，生成类名is-center。

isCenter && !isVertical && !isSimple && 'is-center' // 生成类名 is-center


// computed 是否竖直方向
isVertical() {
  return this.$parent.direction === 'vertical';
},

根元素内联样式

顶层组件 steps 的根元素采用 flex布局。

.el-steps { 
  display: flex;
}  
.el-steps--vertical {
  height: 100%; 
  flex-flow: column;
}

计算属性style根据属性 space 设置flex-basis，指定了 flex 元素在主轴方向上的初始大小，也就是内容盒（content-box）的尺寸。相当于设置了步骤元素的 width 或 height。

当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级。

传入的属性 space值类型为 number时生成格式 {20}px。不设置根据步骤个数自动计算百分比实现自适应间距。

水平方向时，步骤末元素设置属性max-width值,其余设置属性margin-right值（属性stepOffset值没有相关计算或赋值，始终为 0）。

//  computed 根元素样式
style: function() {
  const style = {};
  const parent = this.$parent;
  const len = parent.steps.length;

  const space = (typeof this.space === 'number'
    ? this.space + 'px' // 值为 number,生成 {20}px
    : this.space
      ? this.space
      : 100 / (len - (this.isCenter ? 0 : 1)) + '%'); // 未指定，则自适应间距

  style.flexBasis = space;
  if (this.isVertical) return style;
  if (this.isLast) {
    style.maxWidth = 100 / this.stepsCount + '%';
  } else {
    style.marginRight = -this.$parent.stepOffset + 'px';
  }
  return style;
}

属性 space 可设置值可以参考以下内容：

/* 指定<'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* 固有的尺寸关键词 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* 在 flex item 内容上的自动尺寸 */
flex-basis: content;

/* 全局数值 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

下面通过运行实例对比分析下，各属性设置的渲染效果。



  
  
  
  



  // ...



  // ...

步骤元素内容个数相同情况下，不同设置的效果如下:
Element 2 组件源码剖析之Steps 步骤条(下)-核心逻辑_第2张图片

各步骤元素DOM结构如下（此处不考虑内部内容样式区别），除了第一个示例，其余每个步骤都是等分。
Element 2 组件源码剖析之Steps 步骤条(下)-核心逻辑_第3张图片

那问题来了，第一个示例中 space 未设置,组件会自适应宽度操作，那么末步骤元素发生了什么导致其宽度跟其他步骤元素不一致？

第一个示例DOM结构渲染如下，虽然都设置了flex-basis: 33.3333%;,但是末元素的未生效。

因为末元素添加了样式类名is-flex，覆盖了flex-basis，等同于 flex: none 或 flex: 0 0 auto。元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。

.is-flex {
  flex-basis: auto !important; 
  flex-shrink: 0; 
  flex-grow: 0;
}

上文中提到非简洁模式下，只有未设置间距 space和居中对齐 alignCenter时，步骤条末元素会生成类名 is-flex。这也是第二、三示例末元素跟其他元素宽度一致原因。

isLast && !space && !isCenter && 'is-flex', // 生成类名is-flex

竖直方向样式逻辑与水平一致（alignCenter设置无效）,此处不再赘述。

图标 & 轴线

根据计算属性currentStatus生成当前步骤状态对应的主题样式 is-[wait/process/finish/error/success]




  

    // 轴线...
  
 
  
 
    // 图标...

图标

图标元素是类名el-step__icon的div元素，提供了具名icon插槽自定义步骤节点图标。插槽内容默认展示Icon图标或表示节点顺序圆环数字（从1开始）。简洁风格下，只有Icon设置生效。

当组件状态值为 success 或 error 时，使用系统提供图标。


  
    
    
    
    
{{ index + 1 }}

数字圆环的样式is-text设置的。

:class="`is-${icon ? 'icon' : 'text'}`"

.el-step__icon.is-text {
  border-radius: 50%;
  border: 2px solid;
  border-color: inherit;
}

不同设置组件效果对比如下：

Element 2 组件源码剖析之Steps 步骤条(下)-核心逻辑_第4张图片

设置居中对齐 alignCenter时，图标的居中效果是通过样式控制的。

.el-step.is-center .el-step__head {
  text-align: center; 
}

轴线

轴线元素是类名el-step__line的div元素，使用了绝对布局。

通过偏移量、height、width等属性设置轴线位置、长度以及粗细。

.el-step__line {
  position: absolute;
  border-color: inherit;
  background-color: #c0c4cc;
}
/* 水平方向 */
.el-step.is-horizontal .el-step__line {
  height: 2px;
  top: 11px;
  left: 0;
  right: 0;
}
/* 水平居中 */
.el-step.is-center .el-step__line {
  left: 50%;
  right: -50%;
}
/* 竖直方向 */
.el-step.is-vertical .el-step__line {
  width: 2px;
  top: 0;
  bottom: 0;
  left: 11px;
}

使用了伪类:last-of-type 设置最后一个步骤元素中轴线不显示。

.el-step:last-of-type .el-step__line {
  display: none;
}

居中对齐下的轴线偏移量有些特殊，渲染效果如下。
Element 2 组件源码剖析之Steps 步骤条(下)-核心逻辑_第5张图片

实际元素DOM结构如下：
Element 2 组件源码剖析之Steps 步骤条(下)-核心逻辑_第6张图片

轴线进度状态效果通过类名el-step__line-inner元素实现，该元素内联样式绑定属性lineStyle。

属性lineStyle通过方法calcProgress根据当前步骤的状态计算而来。 方法updateStatus作用在生命周期中详细介绍过。

当前步骤元素不是第一个，此时步骤的状态为已完成，就会更新其上一元素的 lineStyle 值，显示进度效果。

updateStatus(val) { 
  // 存在上一步骤节点  计算进度
  if (prevChild) prevChild.calcProgress(this.internalStatus); 
},

calcProgress(status) {
  let step = 100;
  const style = {}; 
  
  style.transitionDelay = 150 * this.index + 'ms'; // 延迟响应过渡效果
  if (status === this.$parent.processStatus) { 
    step = this.currentStatus !== 'error' ? 0 : 0;
  } else if (status === 'wait') {
    step = 0;
    style.transitionDelay = (-150 * this.index) + 'ms'; // 负时会导致过渡立即开始
  }
  // 简洁风格无效
  style.borderWidth = step && !this.isSimple ? '1px' : 0;
  // 方向不同 赋值不同属性
  this.$parent.direction === 'vertical'
    ? style.height = step + '%'
    : style.width = step + '%';

  this.lineStyle = style;
}

标题 & 描述

标题是类名el-step__title的div元素,提供了具名title插槽用于自定义标题，后备插槽内容为属性 title值。

描述类名el-step__description的div元素,提供了具名description插槽用于自定义描述性文字，后备插槽内容为属性 description值。简洁风格下，description 设置失效。

它们根据计算属性currentStatus生成当前步骤状态对应的主题样式 is-[wait/process/finish/error/success]。




  

    {{ title }}
  

  
  

  

    {{ description }}

简洁风格

前面章节中介绍了简洁风格会导致很多设置无效，接下来整体的看下简洁风格的实现效果。

Element 2 组件源码剖析之Steps 步骤条(下)-核心逻辑_第7张图片

此时DOM结构渲染如下。


  
  

    

      

        
      

      

        
      

    

    

      
步骤 1

此时步骤元素使用flex布局，所以图标、标题、 箭头元素都在一行内展示。

.el-step.is-simple {
  display: flex;
  align-items: center;
}

.el-step.is-simple .el-step__main {
  display: flex;
  align-items: stretch;
}

轴线元素DOM渲染了，但是没有设置宽、高、边框粗细，页面就无法展示。

.el-step.is-horizontal .el-step__line {
  height: 2px; 
}
.el-step.is-vertical .el-step__line {
  width: 2px; 
}

calcProgress(status) {
  // ...
  // 简洁风格无效
  style.borderWidth = step && !this.isSimple ? '1px' : 0; 
}

箭头样式使用伪类:before、:after定义。

.el-step.is-simple .el-step__arrow::after,
.el-step.is-simple .el-step__arrow::before {
  content: "";
  display: inline-block;
  position: absolute;
  height: 15px;
  width: 1px;
  background: #c0c4cc;
}
.el-step.is-simple .el-step__arrow::before { 
  transform: rotate(-45deg) translateY(-4px); 
  transform-origin: 0 0;
}
.el-step.is-simple .el-step__arrow::after { 
  transform: rotate(45deg) translateY(4px); 
  transform-origin: 100% 100%;
}
.el-step.is-simple:last-of-type .el-step__arrow {
  display: none;
}

样式实现

组件样式源码 packages\theme-chalk\src\steps.scss 使用混合指令嵌套生成组件样式。

// packages\theme-chalk\src\steps.scss

// 生成 .el-steps
@include b(steps) {
  // ...
  
  // 生成 .el-steps--simple
  @include m(simple) {
    // ...
  }
  // 生成 .el-steps--horizontal
  @include m(horizontal) {
    // ...
  }
  // 生成 .el-steps--vertical
  @include m(vertical) {
    // ...
  }
}

组件样式源码 packages\theme-chalk\src\step.scss 使用混合指令嵌套生成组件样式。

// packages\theme-chalk\src\step.scss

// 生成 .el-step
@include b(step) {
  // ...
  
  // 生成 .el-step:last-of-type .el-step__line
  @include pseudo(last-of-type) {
    @include e(line) {
      // ...
    } 
    // 生成 .el-step:last-of-type.is-flex 
    @include when(flex) {
      // ...
    }
    // 生成 .el-step:last-of-type .el-step__description,.el-step:last-of-type .el-step__main
    @include e((main, description)) {
      // ...
    }
  }
  // 生成.el-step__head
  @include e(head) {
    // ...
    
    // 生成 .el-step__head.is-[wait/process/finish/error/success]
    @include when(process) {
      // ...
    }
    // wait/finish/error/success ... 
  }
  // 生成 .el-step__icon 
  @include e(icon) {
    // ...
    
    // 生成 .el-step__icon.is-text
    @include when(text) {
      // ...
    }
    // 生成 .el-step__icon.is-icon
    @include when(icon) {
      // ...
    }
  }
  // 生成 .el-step__icon-inner
  @include e(icon-inner) {
    // ...
    
    // 生成 .el-step__icon-inner[class*="el-icon"]:not(.is-status)
    &[class*=el-icon]:not(.is-status) {
      // ...
    }

    // 生成 .el-step__icon-inner.is-status
    @include when(status) {
      // ...
    }
  }
  // 生成 .el-step__line
  @include e(line) {
    // ...
  }
  // 生成 .el-step__line-inner
  @include e(line-inner) {
    // ...
  }
  // 生成 .el-step__main
  @include e(main) {
    // ...
  }
  // 生成 .el-step__title
  @include e(title) {
    // ...
    
    // 生成  .el-step__title.is-[wait/process/finish/error/success]
    @include when(process) {
      // ...
    } 
    // wait/finish/error/success
  }
  // 生成 .el-step__description
  @include e(description) {
    // ...
    // 生成  .el-step__description.is-[wait/process/finish/error/success]
    @include when(process) {
      // ...
    }
    // wait/finish/error/success
 
  }
  // 生成 .el-step.is-horizontal
  @include when(horizontal) {
    // ...
    
    // 生成 .el-step.is-horizontal .el-step__line
    @include e(line) {
      // ...
    }
  }
  // 生成.el-step.is-vertical
  @include when(vertical) {
    // ...
    
    // 生成.el-step.is-vertical .el-step__head/main/title/line
    @include e(head) { /*...*/ }
    @include e(main) { /*...*/ } 
    @include e(title) { /*...*/ } 
    @include e(line) { /*...*/ }
     
    // 生成.el-step.is-vertical .el-step__icon.is-icon 
    @include e(icon) {
      @include when(icon) {
        // ...
      }
    }
  }
  
  @include when(center) { 
    // 生成.el-step.is-center .el-step__head/description/line
    @include e(head) { /*...*/ }
    @include e(description) { /*...*/ } 
    @include e(line) { /*...*/ }  
  }
  // 生成.el-step.is-simple
  @include when(simple) {
    // ...
    
    // 生成.el-step.is-simple .el-step__head/icon/main/title
    @include e(head) { /*...*/ }
    @include e(icon) { /*...*/ }
    @include e(main) { /*...*/ }
    @include e(title) { /*...*/ }
    
    
    @include e(icon-inner) {
      // 生成 .el-step.is-simple .el-step__icon-inner[class*="el-icon"]:not(.is-status) 
      &[class*=el-icon]:not(.is-status) {
        // ...
      }
      // 生成 .el-step.is-simple .el-step__icon-inner.is-status
      &.is-status {
        // ...
      }
    }
    
    // 生成 .el-step.is-simple:not(:last-of-type) .el-step__title 
    @include pseudo('not(:last-of-type)') {
      @include e(title) {
        // ...
      }
    }
    // 生成 .el-step.is-simple .el-step__arrow
    @include e(arrow) {
      // ...
      
      // 生成 .el-step.is-simple .el-step__arrow::after,.el-step.is-simple .el-step__arrow::after 
      &::before,
      &::after {
        // ...
      }
      // 生成 .el-step.is-simple .el-step__arrow::before  
      &::before {
        // ...
      }
      // 生成 .el-step.is-simple .el-step__arrow::after 
      &::after {
        // ...
      }
    }
    // 生成 .el-step.is-simple:last-of-type .el-step__arrow 
    @include pseudo(last-of-type) {
      @include e(arrow) {
        // ...
      }
    }
  }
}

参考&关联阅读

'CSS/flex',MDN\
'CSS/:last-of-type',MDN

关注专栏

如果本文对您有所帮助请关注➕、 点赞、 收藏⭐！您的认可就是对我的最大支持！

你可能感兴趣的:(Element 2 组件源码剖析之Steps 步骤条(下)-核心逻辑)

  • 斤斤计较的婚姻到底有多难？ 白心之岂必有为
    很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
  • 关于沟通这件事，项目经理不需要每次都面对面进行 流程大师兄
    很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • android系统selinux中添加新属性property 辉色投像
    1.定位/android/system/sepolicy/private/property_contexts声明属性开头：persist.charge声明属性类型：u:object_r:system_prop:s0图12.定位到android/system/sepolicy/public/domain.te删除neverallow{domain-init}default_prop:property
  • 2020-01-25 晴岚85
    郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
  • 【iOS】MVC设计模式 Magnetic_h iosmvc设计模式objective-c学习ui
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • C语言宏函数 南林yan C语言c语言
    一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
  • 谢谢你们，爱你们！ 鹿游儿
    昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • 微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务java架构
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
  • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹 黄错错加油
    感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
  • 瑶池防线 谜影梦蝶
    冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
  • 《投行人生》读书笔记 小蘑菇的树洞
    《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
  • 《策划经理回忆录之二》 路基雅虎
    话说三年变六年，飘了，飘了……眨眼，2013年5月，老吴回到了他的家乡——油城从新开启他的工作幻想症生涯。很庆幸，这是一家很有追求，同时敢于尝试的，且实力不容低调的新星房企——金源置业(前身泰源置业)更值得庆幸的是第一个盘就是油城十路的标杆之一:金源盛世。2013年5月，到2015年11月，两年的陪伴，迎来了一场大爆发。2000个筹，5万/筹，直接回笼1个亿！！！这……让我开始认真审视这座看似五线
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • 如何在 Fork 的 GitHub 项目中保留自己的修改并同步上游更新？github_fork_update iBaoxing github
    如何在Fork的GitHub项目中保留自己的修改并同步上游更新？在GitHub上Fork了一个项目后，你可能会对项目进行一些修改，同时原作者也在不断更新。如果想要在保留自己修改的基础上，同步原作者的最新更新，很多人会不知所措。本文将详细讲解如何在不丢失自己改动的情况下，将上游仓库的更新合并到自己的仓库中。问题描述假设你在GitHub上Fork了一个项目，并基于该项目做了一些修改，随后你发现原作者对
  • 扫地机类清洁产品之直流无刷电机控制 悟空胆好小 清洁服务机器人单片机人工智能
    扫地机类清洁产品之直流无刷电机控制1.1前言扫地机产品有很多的电机控制，滚刷电机1个，边刷电机1-2个，清水泵电机，风机一个，部分中高端产品支持抹布功能，也就是存在抹布盘电机，还有追觅科沃斯石头等边刷抬升电机，滚刷抬升电机等的，这些电机有直流有刷电机，直接无刷电机，步进电机，电磁阀，挪动泵等不同类型。电机的原理，驱动控制方式也不行。接下来一段时间的几个文章会作个专题分析分享。直流有刷电机会自动持续
  • Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类qt开发语言sdl2linux
    需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
  • 绘本讲师训练营【24期】8/21阅读原创《独生小孩》 1784e22615e0
    24016-孟娟《独生小孩》图片发自App今天我想分享一个蛮特别的绘本，讲的是一个特殊的群体，我也是属于这个群体，80后的独生小孩。这是一本中国绘本，作者郭婧，也是一个80厚。全书一百多页，均为铅笔绘制，虽然为黑白色调，但并不显得沉闷。全书没有文字，犹如“默片”，但并不影响读者对该作品的理解，反而显得神秘，梦幻，給读者留下想象的空间。作者在前蝴蝶页这样写到：“我更希望父母和孩子一起分享这本书，使他
  • 30天风格练习-DAY2 黄希夷
    Day2（重义）在一个周日/一周的最后一天，我来到位于市中心/市区繁华地带的一家购物中心/商场，中心内人很多/熙熙攘攘。我注意到/看见一个独行/孤身一人的年轻女孩/，留着一头引人注目/长过腰际的头发，上身穿一件暗红色/比正红色更深的衣服/穿在身体上的东西。走下扶梯的时候，她摔倒了/跌向地面，在她正要站起来/让身体离开地面的时候，过长/超过一般人长度的头发被支撑身体/躯干的手掌压/按在下面，她赶紧用
  • 店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码 说私域 人工智能小程序
    摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需
  • 向内而求 陈陈_19b4
    10月27日，阴。阅读书目:《次第花开》。作者:希阿荣博堪布，是当今藏传佛家宁玛派最伟大的上师法王，如意宝晋美彭措仁波切颇具影响力的弟子之一。多年以来，赴海内外各地弘扬佛法，以正式授课、现场开示、发表文章等多种方法指导佛学弟子修行佛法。代表作《寂静之道》、《生命这出戏》、《透过佛法看世界》自出版以来一直是佛教类书籍中的畅销书。图片发自App金句:1.佛陀说，一切痛苦的根源在于我们长期以来对自身及外
  • 2021-08-26 影幽
    在生活中，女人与男人的感悟往往有所不同。人生最大的舞台就是生活，大幕随时都可能拉开，关键是你愿不愿意表演都无法躲避。在生活中，遇事不要急躁，不要急于下结论，尤其生气时不要做决断，要学会换位思考，大事化小小事化了，把复杂的事情尽量简单处理，千万不要把简单的事情复杂化。永远不要扭曲，别人善意，无药可救。昨天是张过期的支票，明天是张信用卡，只有今天才是现金，要善加利用！执着的攀登者不必去与别人比较自己的
  • ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值） 研学随笔 arcgis经验分享
    我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
  • 高级编程--XML+socket练习题 masa010 java开发语言
    1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j
  • 抖音乐买买怎么加入赚钱?赚钱方法是什么 测评君高省
    你会在抖音买东西吗?如果会，那么一定要免费注册一个乐买买，抖音直播间，橱窗，小视频里的小黄车买东西都可以返佣金!省下来都是自己的，分享还可以赚钱乐买买是好省旗下的抖音返佣平台，乐买买分析社交电商的价值，乐买买属于今年难得的副业项目风口机会，2019年错过做好省的搞钱的黄金时期，那么2022年千万别再错过乐买买至于我为何转到高省呢？当然是高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自
  • 开心 蒋泳频
    从无比抗拒来上课到接受，感动，收获～看着波哥成长，晶晶幸福笑容满面。感觉自己做的事情很有意义，很开心！还有3个感召目标就是还有三个有缘人，哈哈。明天感召去明日计划：8：30-11：00小公益11：00-21点上班，感召图片发自App图片发自App图片发自App
  • Maven Array_06 eclipsejdkmaven
    Maven Maven是基于项目对象模型(POM)， 信息来管理项目的构建，报告和文档的软件项目管理工具。 Maven 除了以程序构建能力为特色之外，还提供高级项目管理工具。由于 Maven 的缺省构建规则有较高的可重用性，所以常常用两三行 Maven 构建脚本就可以构建简单的项目。由于 Maven 的面向项目的方法，许多 Apache Jakarta 项目发文时使用 Maven，而且公司
  • ibatis的queyrForList和queryForMap区别 bijian1013 javaibatis
    一.说明         iBatis的返回值参数类型也有种：resultMap与resultClass，这两种类型的选择可以用两句话说明之：         1.当结果集列名和类的属性名完全相对应的时候，则可直接用resultClass直接指定查询结果类
  • LeetCode[位运算] - #191 计算汉明权重 Cwind java位运算LeetCodeAlgorithm题解
    原题链接：#191 Number of 1 Bits 要求： 写一个函数，以一个无符号整数为参数，返回其汉明权重。例如，‘11’的二进制表示为'00000000000000000000000000001011', 故函数应当返回3。 汉明权重：指一个字符串中非零字符的个数；对于二进制串，即其中‘1’的个数。 难度：简单 分析： 将十进制参数转换为二进制，然后计算其中1的个数即可。 “
  • 浅谈java类与对象 15700786134 java
          java是一门面向对象的编程语言，类与对象是其最基本的概念。所谓对象，就是一个个具体的物体，一个人，一台电脑，都是对象。而类，就是对象的一种抽象，是多个对象具有的共性的一种集合，其中包含了属性与方法，就是属于该类的对象所具有的共性。当一个类创建了对象，这个对象就拥有了该类全部的属性，方法。相比于结构化的编程思路，面向对象更适用于人的思维
  • linux下双网卡同一个IP 被触发 linux
    转自： http://q2482696735.blog.163.com/blog/static/250606077201569029441/ 由于需要一台机器有两个网卡，开始时设置在同一个网段的IP，发现数据总是从一个网卡发出，而另一个网卡上没有数据流动。网上找了下，发现相同的问题不少： 一、 关于双网卡设置同一网段IP然后连接交换机的时候出现的奇怪现象。当时没有怎么思考、以为是生成树
  • 安卓按主页键隐藏程序之后无法再次打开 肆无忌惮_ 安卓
    遇到一个奇怪的问题，当SplashActivity跳转到MainActivity之后，按主页键，再去打开程序，程序没法再打开（闪一下），结束任务再开也是这样，只能卸载了再重装。而且每次在Log里都打印了这句话"进入主程序"。后来发现是必须跳转之后再finish掉SplashActivity   本来代码：   // 销毁这个Activity fin
  • 通过cookie保存并读取用户登录信息实例 知了ing JavaScripthtml
    通过cookie的getCookies()方法可获取所有cookie对象的集合；通过getName()方法可以获取指定的名称的cookie；通过getValue()方法获取到cookie对象的值。另外，将一个cookie对象发送到客户端，使用response对象的addCookie()方法。 下面通过cookie保存并读取用户登录信息的例子加深一下理解。 （1）创建index.jsp文件。在改
  • JAVA 对象池 矮蛋蛋 javaObjectPool
    原文地址： http://www.blogjava.net/baoyaer/articles/218460.html Jakarta对象池       ☆为什么使用对象池   恰当地使用对象池化技术，可以有效地减少对象生成和初始化时的消耗，提高系统的运行效率。Jakarta Commons Pool组件提供了一整套用于实现对象池化
  • ArrayList根据条件+for循环批量删除的方法 alleni123 java
    场景如下： ArrayList<Obj> list Obj-> createTime, sid. 现在要根据obj的createTime来进行定期清理。（释放内存） ------------------------- 首先想到的方法就是 for(Obj o:list){ if(o.createTime-currentT>xxx){
  • 阿里巴巴“耕地宝”大战各种宝 百合不是茶 平台战略
    “耕地保”平台是阿里巴巴和安徽农民共同推出的一个 “首个互联网定制私人农场”，“耕地宝”由阿里巴巴投入一亿 ，主要是用来进行农业方面，将农民手中的散地集中起来 不仅加大农民集体在土地上面的话语权，还增加了土地的流通与 利用率，提高了土地的产量，有利于大规模的产业化的高科技农业的 发展，阿里在农业上的探索将会引起新一轮的产业调整，但是集体化之后农民的个体的话语权 将更少，国家应出台相应的法律法规保护
  • Spring注入有继承关系的类（1） bijian1013 javaspring
    一个类一个类的注入 1.AClass类 package com.bijian.spring.test2; public class AClass { String a; String b; public String getA() { return a; } public void setA(Strin
  • 30岁转型期你能否成为成功人士 bijian1013 成功
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • [Velocity三]基于Servlet+Velocity的web应用 bit1129 velocity
    什么是VelocityViewServlet 使用org.apache.velocity.tools.view.VelocityViewServlet可以将Velocity集成到基于Servlet的web应用中，以Servlet+Velocity的方式实现web应用   Servlet + Velocity的一般步骤 1.自定义Servlet，实现VelocityViewServl
  • 【Kafka十二】关于Kafka是一个Commit Log Service bit1129 service
    Kafka is a distributed, partitioned, replicated commit log service.这里的commit log如何理解？   A message is considered "committed" when all in sync replicas for that partition have applied i
  • NGINX + LUA实现复杂的控制 ronin47 lua nginx 控制
    安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty Centos和debian的安装就简单了。。 这里说下freebsd的安装： fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxvf lua-5.1.4.tar.gz cd lua-5.1.4 ma
  • java-14.输入一个已经按升序排序过的数组和一个数字， 在数组中查找两个数，使得它们的和正好是输入的那个数字 bylijinnan java
    public class TwoElementEqualSum { /** * 第 14 题： 题目：输入一个已经按升序排序过的数组和一个数字， 在数组中查找两个数，使得它们的和正好是输入的那个数字。 要求时间复杂度是 O(n) 。如果有多对数字的和等于输入的数字，输出任意一对即可。 例如输入数组 1 、 2 、 4 、 7 、 11 、 15 和数字 15 。由于
  • Netty源码学习-HttpChunkAggregator-HttpRequestEncoder-HttpResponseDecoder bylijinnan javanetty
    今天看Netty如何实现一个Http Server org.jboss.netty.example.http.file.HttpStaticFileServerPipelineFactory： pipeline.addLast("decoder", new HttpRequestDecoder()); pipeline.addLast(&quo
  • java敏感词过虑-基于多叉树原理 cngolon 违禁词过虑替换违禁词敏感词过虑多叉树
    基于多叉树的敏感词、关键词过滤的工具包，用于java中的敏感词过滤 1、工具包自带敏感词词库，第一次调用时读入词库，故第一次调用时间可能较长，在类加载后普通pc机上html过滤5000字在80毫秒左右，纯文本35毫秒左右。   2、如需自定义词库，将jar包考入WEB-INF工程的lib目录，在WEB-INF/classes目录下建一个 utf-8的words.dict文本文件，
  • 多线程知识 cuishikuan 多线程
    T1，T2，T3三个线程工作顺序，按照T1，T2，T3依次进行 public class T1 implements Runnable{           @Override      
  • spring整合activemq dalan_123 java spring jms
    整合spring和activemq需要搞清楚如下的东东1、ConnectionFactory分：     a、spring管理连接到activemq服务器的管理ConnectionFactory也即是所谓产生到jms服务器的链接      b、真正产生到JMS服务器链接的ConnectionFactory还得
  • MySQL时间字段究竟使用INT还是DateTime？ dcj3sjt126com mysql
      环境：Windows XPPHP Version 5.2.9MySQL Server 5.1 第一步、创建一个表date_test（非定长、int时间） CREATE TABLE `test`.`date_test` (`id` INT NOT NULL AUTO_INCREMENT ,`start_time` INT NOT NULL ,`some_content`
  • Parcel: unable to marshal value dcj3sjt126com marshal
    在两个activity直接传递List<xxInfo>时，出现Parcel: unable to marshal value异常。   在MainActivity页面（MainActivity页面向NextActivity页面传递一个List<xxInfo>）：   Intent intent = new Intent(this, Next
  • linux进程的查看上（ps） eksliang linux pslinux ps -llinux ps aux
    ps:将某个时间点的进程运行情况选取下来 转载请出自出处：http://eksliang.iteye.com/admin/blogs/2119469 http://eksliang.iteye.com         ps 这个命令的man page 不是很好查阅，因为很多不同的Unix都使用这儿ps来查阅进程的状态，为了要符合不同版本的需求，所以这个
  • 为什么第三方应用能早于System的app启动 gqdy365 System
    Android应用的启动顺序网上有一大堆资料可以查阅了，这里就不细述了，这里不阐述ROM启动还有bootloader，软件启动的大致流程应该是启动kernel -> 运行servicemanager 把一些native的服务用命令启动起来（包括wifi, power, rild, surfaceflinger, mediaserver等等）-> 启动Dalivk中的第一个进程Zygot
  • App Framework发送JSONP请求(3) hw1287789687 jsonp跨域请求发送jsonpajax请求越狱请求
    App Framework 中如何发送JSONP请求呢? 使用jsonp,详情请参考:http://json-p.org/ 如何发送Ajax请求呢? (1)登录 /*** * 会员登录 * @param username * @param password */ var user_login=function(username,password){ // aler
  • 发福利，整理了一份关于“资源汇总”的汇总 justjavac 资源
    觉得有用的话，可以去github关注：https://github.com/justjavac/awesome-awesomeness-zh_CN 通用 free-programming-books-zh_CN 免费的计算机编程类中文书籍 精彩博客集合 hacke2/hacke2.github.io#2 ResumeSample 程序员简历
  • 用 Java 技术创建 RESTful Web 服务 macroli java编程WebREST
    转载：http://www.ibm.com/developerworks/cn/web/wa-jaxrs/   JAX-RS (JSR-311) 【 Java API for RESTful Web Services 】是一种 Java™ API，可使 Java Restful 服务的开发变得迅速而轻松。这个 API 提供了一种基于注释的模型来描述分布式资源。注释被用来提供资源的位
  • CentOS6.5-x86_64位下oracle11g的安装详细步骤及注意事项 超声波 oraclelinux
    前言： 这两天项目要上线了，由我负责往服务器部署整个项目，因此首先要往服务器安装oracle，服务器本身是CentOS6.5的64位系统，安装的数据库版本是11g，在整个的安装过程中碰到很多的坑，不过最后还是通过各种途径解决并成功装上了。转别写篇博客来记录完整的安装过程以及在整个过程中的注意事项。希望对以后那些刚刚接触的菜鸟们能起到一定的帮助作用。   安装过程中可能遇到的问题（注
  • HttpClient 4.3 设置keeplive 和 timeout 的方法 supben httpclient
    ConnectionKeepAliveStrategy kaStrategy = new DefaultConnectionKeepAliveStrategy() { @Override public long getKeepAliveDuration(HttpResponse response, HttpContext context) { long keepAlive
  • Spring 4.2新特性-@Import注解的升级 wiselyman spring 4
    3.1 @Import @Import注解在4.2之前只支持导入配置类 在4.2,@Import注解支持导入普通的java类,并将其声明成一个bean 3.2 示例 演示java类 package com.wisely.spring4_2.imp; public class DemoService { public void doSomethin
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他