- 博客(84)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 Salt Stack - Schedule
Schedule在实际运维过程中经常碰到这样的情况，比如在minion上安装了nginx，但是不小心将nginx卸载了或者将nginx服务停掉了。这时不容易发现问题或者需要手动来进行修复。那么就需要使用salt stack的schedule功能了，它可以定期的检查minion状态是否是我们想要的，如果不是则自动进行恢复。Pillar SchedulerSalt stack提供了多种定义S...
2019-04-05 22:44:43
590
原创 Salt Stack - Jinja模版
Jinja模版Jinja可以基于Grains和pillar动态生成配置文件。Jinja简单示例比如，在/srv/salt中定义test_jinja.sls:{% set var= 'test jinja' %} #变量test_var: cmd.run: - name: echo "my var is {{ var }}"运行如下命令查看：salt '*' sta...
2019-04-05 13:57:10
340
原创 Salt Stack - Pillar
数据系统 - PillarPillar是Salt非常重要的一个组件，它用于给特定的minion定义任何需要的数据。Pillar的一个特点，Pillar数据是与特定minion关联的，也就是说每一个minion都只能看到自己的数据。存储位置存储在master端，修改/etc/salt/master：pillar_roots: base: - /srv/pillar其中/sr...
2019-04-05 13:56:35
410
原创 Salt Stack - Grains
数据系统 - GrainsGrains是Salt的组件，在minion启动时收集信息。Grains查看命令salt '*' grains.ls //查看内容salt '*' grains.items //查看内容和值salt '*' grains.get name //查看名为name的grains可以看到grains中包含了minion的配置信息，比如ip地址、操作系统等。Gra...
2019-04-05 13:56:08
310
原创 Salt Stack - 配置管理
配置管理在这里使用salt stack来安装nginx。配置salt状态文件的存放目录在salt的主配置/etc/salt/master中修改file_roots:file_roots: base: - /srv/salt其中base环境是必要的, 指定top.sls存放的位置。默认没指定环境时则从base目录获取文件。注意： 修改完配置后重启master。编写状态文件...
2019-04-05 13:55:31
268
原创 Salt stack -安装和配置
Salt stack -安装和配置运行master和minion的系统为Ubuntu。salt安装安装masterapt-get install salt-master -y安装minionapt-get install salt-minion -y配置配置mastersalt master的配置文件默认在/etc/salt/master下，修改interface为当前服务器...
2019-04-05 13:54:38
345
原创 HTML中文件上传
文章目录如何获取本地文件表单输入获取文件拖拽获取文件读取文件内容读取文件如何获取本地文件表单输入获取文件该方式是比较常见对方式，只需要将input的type设置为file，同时监听input的change时间即可。在change时间中可以获取文件对象。function handleFileSelect(event) { console.log(event.target.files);...
2019-03-23 17:30:07
7404
原创 HTML中的Drag和Drop
HTML中的Drag和Drop在HTML5中为元素添加了draggable属性用来表示元素是否可以拖动。而且该值必须设置为true，否则不生效。示例如下： function drop(event) { var elementId = event.dataTransfer.getData("dragElement"); event.target.appe...
2019-03-23 17:29:06
695
原创 CSS中的单位
CSS中的单位pxpx像素是相对于屏幕分辨率的em相对于文字大小的如果元素设置了文字大小，1em = 1/父元素font-size，浏览器body默认文字大小16px如果自身设置了文字大小，em相对于自身的，也就是1em = 1/自身文字大小remr是root的缩写，也就是说相对于根元素html文字大小vw、vh1vh 等于1/100的视口高度，1vw 等于1/100的视口...
2019-03-23 17:28:40
360
原创 css中的过渡Transition
文章目录css中的过渡Transition简单示例过渡函数steps如何触发过渡css中的过渡Transition过渡Transition（property duration timing-function delay）属性有：transition-property：指定css属性的名字来应用transition效果。比如：widthtransition-duration：指定过渡效果需...
2019-03-23 17:28:20
204
原创 CSS中的height
文章目录CSS中的heightauto百分比示例一示例二示例三CSS中的heightheight用来给块级元素（包括行块级元素）设置高度，行级元素设置高度是不生效的。autoheight默认为auto。浏览器会计算出实际的高度，也就是自子元素的高度。百分比height设置为百分比时，高度基于包含它的块级对象的百分比高度。注意是块级父元素。示例一 <div style="he...
2019-03-23 17:27:47
1069
原创 Spring cloud中的基于Zuul的Api Gateway
在微服务架构中，后端的服务会存在多个。如果没有API Gateway就会存在以下的问题：客户端需要知道每个每个微服务的存在一次业务场景的交互需要发多次请求到多个微服务不同的微服务调用协议有可能是不同的每个微服务都需要进行权限校验针对以上的需求，我们引入API Gateway。这里介绍基于Zuul的APIGateway的配置。在gradle中添加依赖buildscript { ...
2019-03-23 17:25:56
370
原创 Spring Cloud中的契约测试
文章目录Provider添加gradle插件和依赖编写Contract创建测试基类在gradle指定gradle plugin使用的基类运行测试发布ArtifactConsumer添加gradle插件和依赖配置stub runner添加测试代码这里契约测试基于Spring Cloud Contract来编写，大致流程如下所示：在Provider使用groovy DSL编写Contract通...
2019-03-23 17:23:25
1502
原创 debounce 和 throttle
debounce 和 throttle为什么要使用 debounce 和 throttle 在实际开发过程中会遇到这样对问题:点击事件：连续点击按钮鼠标事件：拖动鼠标滑动实时搜索，在输入过程中不触发搜索方法 由于这样对行为会导致对应对方法被执行多次，所以如果不进行处理就会带来性能问题、页面卡顿和多次提交ajax请求等。这时就会考虑使用debounce和throttle来解决该...
2019-03-23 17:22:32
179
原创 Angular中动态创建组件
动态创建组件通常来说组件不需要动态来创建，因为直接在模板中使用可以满足大部分的需求。可是如果有这样的需求模板中存在多个组件是否显示依赖特定的条件，那么就需要定义多个bool类型的变量来控制，而且还需要考虑bool类型变量的修改，这样操作起来比较繁琐。这个时候可以考虑使用动态创建组件的方式。大致流程如下所示。创建组件@Component({ template: `<span>...
2019-03-23 17:21:31
1868
原创 如何容器化web工程
如何容器化web工程工程容器化在实际中越来越重要，那么如何对前端工程怎样容器化呢？编写DockfileFROM nginxMAINTAINER rdzhaoCOPY dist/ /usr/share/nginx/htmlCOPY nginx.conf /etc/nginx/nginx.confEXPOSE 80 443From：指定基础镜像MAINTAINER：指定镜像...
2019-03-23 17:20:39
396
原创 Azure中的Blob存储
在实际中，如果我们需要对文件进行存储时该如何处理呢？由于我们对应用是多实例对，所以不能将其存储在应用所在服务器中。这时，我们可以依赖于Azure为我们提供对Blob来存储。下面我们来看看如何来进行文件对上传和下载。创建存储帐号其中存储账户名称只能是小写字母和数字，创建成功后帐号对访问地址为：https://myblob2.blob.core.chinacloudapi.cn生成共享访问...
2019-02-16 15:14:07
2907
1
原创 RXJS中CombineLatest/ForkJoin/Zip的区别
这几个操作符都可以将多个Observable进行组合，那么它们有什么不同呢？组合Observable发射一个值首先我们来看如下的示例：// combineLatestconst combineLatestExample = Rx.Observable.combineLatest(Rx.Observable.interval(1000).take(1),Rx.Observable.inter...
2018-11-05 21:19:18
1211
原创 Rxjs中的操作符
过滤操作distinct去除重复数据，和所有的数据进行对比。示例一Rx.Observable.of(1,2,3,4,1) .distinct( ) .subscribe( x =&amp;gt; console.log( x ))输出为：1,2,3,4示例二当然，也可以为distinct传递方法， Rx.Observable.of( { age: 4, nam...
2018-09-25 22:49:42
1060
原创 每天实现一个Rxjs中的Operator之combineLatest操作（二）
在上一篇中介绍了combineLatest的使用，下面我们列出其核心代码实现：class CombineLatestSubscriber extends OuterSubscriber { _next(observable) { this.values.push(none); this.observables.push(observable); } _complet...
2018-09-23 18:09:03
626
1
原创 AWS中简单的Stack模板
下述yml文件简单配置了Stack模板，Resources: MyEC2Instance: Type: AWS::EC2::Instance Properties: ImageId: !Ref ImageIdParameter KeyName: !Ref KeyNameParameter InstanceType: !Ref Ins...
2018-09-15 22:07:55
668
原创 在AWS中创建IAM用户
当在AWS中注册完账号后，AWS会创建一个根用户。虽然可以使用这个根用户进行操作，，但是我们不建议使用这个根用户访问AWS，而是创建AWS IAM（Identity and Access Management）用户。下面我们一步步来创建IAM用户。使用根用户登陆到IAM控制台在控制台到导航栏中选中Users，然后选中Add user填写User name和Access type，其中Ac...
2018-09-15 21:40:42
3967
1
原创 每天实现一个Rxjs中的Operator之combineLatest操作（一）
在动手实现之前，我们先来简单介绍下combineLatest的作用。combineLatest可以将多个Observable进行合并，并将它们最新的值作为输出。它存在以下几个特点：combineLatest会等到所有的Observable都emit一次数据之后才开始emit数据在收集完一次数据之后，任何一个Observable emit了数据，则会emit数据，并不会再次等待所有Obser...
2018-09-14 23:10:47
4041
原创 每天实现一个Rxjs中的Operator之Map操作
在上一篇我们简单实现了Observable.create，那么如何在此基础上实现Map操作呢。 对于如下代码，我们希望输出2，4Observable.create((observer) => { observer.next(1); observer.next(2);}) .map(value => value * 2) .subscribe((value) ...
2018-09-13 20:40:39
3069
原创 每天实现一个Rxjs中的Operator之Observable.create
Rxjs被越来越多的采用，尤其在Angular中。为了更好的理解Rxjs的工作原理。在这里我们会仿照Rxjs的源码，实现一个简易版的Rxjs 我们知道Rxjs的实现是基于观察者模式来实现的，比如：Observable.create((observer) =&gt; { observer.next(1); observer.next(2);}).subscribe({next:(va...
2018-09-13 19:58:50
1789
原创 Webpack多环境配置
当我们使用webpack进行多环境打包的时候会有如下时需求：在执行代码中使用不同的变量，比如：API的请求地址在webpack的config文件中使用不同的配置，比如：只在dev环境配置dev server针对这两个需求，我们逐一进行介绍。创建多环境配置文件由于dev和prod环境存在大量通用的配置，所以我们将通用的配置放在common文件中，并使用webpack-mer...
2018-09-09 12:51:07
1921
2
原创 微服务之API Gateway
在微服务架构中，后端的服务会存在多个。如果没有API Gateway就会存在以下的问题：客户端需要知道每个每个微服务的存在一次业务场景的交互需要发多次请求到多个微服务不同的微服务调用协议有可能是不同的每个微服务都需要进行权限校验针对以上的需求，我们引入API Gateway。这里介绍基于Zuul的APIGateway的配置。在gradle中添加依赖buildscrip...
2018-09-08 21:08:10
576
翻译 实现自己react之添加componentWillMount和componentDidMount
在实现自己的react之简单rendering中我们实现了简单的render方法。在这节中将会为我们的Feact添加componentWillMount和componentDidMount方法。完善createClass在上一节中的createClass方法中只支持render方法，如下：const Feact = { createClass(spec) { ...
2018-08-20 20:44:23
2924
翻译 实现自己的react之简单rendering
在这里我们将会从0到1来实现我们自己到react。这样我们可以更好的了解react是如何工作的，为什么存在这么多生命周期的方法以及每个方法在什么时候调用。 需要提出来的是，我们的实现是基于React 15.3，虽然React 16中存在很大的变动，但是我认为去了解这些依然是有用的。元素和组件在React中存在三种不同类型的对象：原生DOM元素、虚拟元素和组件。下面它们进行简要的介绍。...
2018-08-19 16:31:01
585
原创 微服务之构建服务镜像
在上一篇微服务之搭建nexus私服中，我们使用nexus搭建了私服。下面我们将spring boot工程来构建镜像并push到nexus私服中。创建Dockerfile文件FROM gradle:3.5-jre8COPY ./build/libs/goods-service-0.0.1-SNAPSHOT.jar /app/goods-service-0.0.1-SNAPSHOT.jar...
2018-08-18 22:59:02
1416
原创 微服务之搭建nexus私服
在这里我们搭建nexus来作为我们的私服，用于存储构建好的服务镜像。安装nexus镜像mkdir ~/mstcd ~/mstdocker run -d -u root -v $(pwd)/nexus-data:/nexus-data -p 5000:5000 -p 8081:8081 sonatype/nexus3可以看到基于镜像安装nexus是非常简单的。等待大概1～2分钟后...
2018-08-18 12:10:25
984
原创 JS中new和Object.create()区别
new操作符首先我们来看new操作符：function Animal(){}var animal = new Animal();如果你熟悉原型链的话（原型链分享），就会知道new操作符会在执行的时候将Animal.prototype赋值给animal.[[Prototype]]。Object.create我们先看下Object.create的语法：Object...
2018-07-12 23:47:04
5656
3
原创 双箭头函数词法作用域
在这里我们先来看看词法作用域和动态作用域的区别，然后在来介绍双箭头函数的词法作用域。词法作用域 词法作用域就是定义在词法阶段的作用域。也就是说词法作用域是由你在写代码时将变量和块作用域写在哪里决定的。比如： var a = 4;function foo(){ console.log(a)}function bar(){ var b = 3; foo...
2018-06-03 21:25:34
918
1
原创 Redux中的bindActionCreators
在这里我们结合react-redux来介绍bindActionCreators。 在react中使用redux时，通常我们会使用react-redux库。那么为什么我们执行connect(mapStateToProps, mapDispatchToProps)(MyContainer)后就可以通过this.props.myAction()的方式来触发action呢？ 在connect方法中对参...
2018-05-06 21:32:28
1340
原创 微服务服务间调用传递token
微服务间的调用通常我们使用FeignClient来实现。那么如何在调用的时候传递token来保证服务间调用的安全校验呢？ 没错，我们可以配置一个拦截器。该拦截器的功能就是在请求发出去前在header中添加token。代码如下：@Componentpublic class FeignHeaderInterceptor implements RequestInterceptor { ...
2018-05-06 15:25:47
11515
1
原创 Spring Cloud中的Consul的相关配置
在这里主要介绍在Consul的相关配置。在这里使用yml的格式进行配置。spring: cloud: consul: enabled: true //是否启用consul host: ip // consul server的ip地址 port: 8500 // consul运行的端口号 ...
2018-05-05 16:18:15
8218
1
原创 SpringBoot中的HandlerInterceptorAdapter
在SpringBoot中我们可以使用HandlerInterceptorAdapter这个适配器来实现自己的拦截器。这样就可以拦截所有的请求并做相应的处理。 在HandlerInterceptorAdapter中主要提供了以下的方法：preHandle：在方法被调用前执行。在该方法中可以做类似校验的功能。如果返回true，则继续调用下一个拦截器。如果返回false，则中断执行，也就是说我们...
2018-05-05 15:38:48
23226
1
原创 Hibernate中的一对一、一对多
一对一单向一对一首先来定义我们的实体，People。一个人只能有一个身份证，所以在IdentityCard上我们添加@OneToOne注解用于修饰该关系。@Entity(name = "people")public class People { @Id @GeneratedValue private Long id; @OneToOne ...
2018-05-01 16:12:36
356
空空如也
React中的ajax调用为什么不建议在componentWillMount中呢
2016-09-16
TA创建的收藏夹 TA关注的收藏夹
TA关注的人