kaven

前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口很久没有更新博客了，主要原因是博主一直在补充知识，发现自己还有很多地方不足，等博主学到一定程度再来相互探讨技术。主要是看到评论区的小伙伴说分页该怎么实现，博主就花了几个小时去实现一个小例子。ElementUI的Pagination分页组件：Pagination大家可以先看一下这个组件实现分页的效果怎么样。数据库有数据才能进行展示，为了简单，

分布式篇 - 搭建FastDFS分布式文件系统 & 结合Nginx实现访问服务环境准备两台CentOS7.x虚拟机：192.168.1.102作为FastDFS的tracker。192.168.1.106作为FastDFS的storage。如何创建虚拟机：VirtualBox安装CentOS7使用Xshell连接虚拟机：Kubernetes - Xshell连接虚拟机 & 搭建Kubernetes基础集群下载依赖需要下载的依赖：fastdfs：fastdf

分布式篇 - Nginx添加SSL & 实现HTTPS访问上一篇博文给大家介绍了Nginx的安装与运行：分布式篇 - Nginx安装与运行今天博主给大家分享如何给Nginx添加SSL，实现HTTPS访问Nginx服务，但前提条件是你的服务器有SSL，博主是阿里云的服务器，可以免费申请SSL，其他云服务器平台应该也是如此。如果你没有安装Nginx，跟着博主一起动手即可，如果之前已经安装好了，也不需要担心，步骤其实都是差不多的。安装依赖环境安装gcc环境yum install -y g

分布式篇 - Nginx安装与运行

分布式篇 - 一篇搞懂反向代理和正向代理博主今天终于考完了最难的一门考试，老师说题目会很简单，结果考完都是怨声载道的，哈哈哈。今天就先不分享容器技术啦，开始新的征程，分布式篇。本来博主想自己介绍一下反向代理和正向代理的一些基本概念，但当博主看到这篇博客时，却被征服了，博文非常通俗易懂。原文地址反向代理和正向代理区别一 什么是代理代理其实就是一个中介，A和B本来可以直连，中间插入一个C，C就是中介。刚开始的时候，代理多数是帮助内网client访问外网server用的。后来出现了反向代理，"反

不平凡的2020遇见充满期待的2021不平凡的2020对于博主而言，2020注定是不平凡的一年，不管是来势汹汹的疫情，还是令人回味的经历。这一年，快乐与疲惫相互交织，博主可以用三个阶段来概括：考研、毕业与适应。考研博主参加了2020年的研究生入学考试，初试考的不尽人意，主要是考试时的心态没有及时调整好；博主考完初试后，就两手准备，准备春招和复试。因为初试成绩还没有出来，其实博主自己也觉得没有太大的希望，所以先开始准备的春招，博主本科阶段学的计算机基础课程比较扎实，再加上ACM竞赛的锻炼与对开发的

Kubernetes汇总基础Kubernetes - Kubernetes是什么？Kubernetes - Kubernetes 组件Kubernetes - Xshell连接虚拟机 & 搭建Kubernetes基础集群未完待续扩展阅读VirtualBox安装CentOS7

Kubernetes - Xshell连接虚拟机 & 搭建Kubernetes基础集群博主这里会搭建一个master，两个node的Kubernetes基础集群。博主的环境：三台CentOS7的虚拟机。虚拟内存都是1G，虽然官方推荐2G以上，但博主电脑的内存不太够，况且博主只是为了演示，并不是生产环境，这个问题后面会解决。虚拟硬盘都是8G。创建虚拟机：VirtualBox安装CentOS7现在假设大家已经创建好了三台虚拟机。使用Xshell连接虚拟机在VirtualBox

Windows上查看IP地址是ipconfig命令。Linux上查看IP地址是ifconfig命令。Linux上还有一个ip addr命令可以查看IP地址。博主使用标准版ISO镜像文件安装的CentOS7没有ifconfig命令，但有ip addr命令。其实通过这几个命令查到的IP都是私网IP，想要了解详情可以阅读这篇博客：为什么百度查到的IP和ipconfig命令的结果不一样 、详解公网IP、私网IP、网络分类（A、B、C）ip addr命令结果有两部分，lo和enp0s3，如果有多

VirtualBox安装CentOS7首先下载CentOS7镜像：阿里云镜像CentOS7的ISO镜像文件介绍：CentOS-7-x86_64-DVD-2009.iso：标准安装版（推荐），博主以该CentOS7的ISO镜像文件进行安装。CentOS-7-x86_64-Everything-2009.iso：完整版，集成所有软件。CentOS-7-x86_64-Minimal-2009.iso：精简版，自带的软件最少。CentOS-7-x86_64-NetInstall-2009.is

Kubernetes - Kubernetes 组件当部署Kubernetes时，将会得到一个集群。Kubernetes集群由一组称为节点（ nodes）的工作机器组成，它们运行容器化的应用程序。每个集群至少有一个工作节点。工作节点承载作为应用程序工作负载组件的Pod。控制平面（control plane）管理集群中的工作节点和Pod。在生产环境中，控制平面通常跨多台计算机运行，集群通常运行多个节点，从而提供容错性和高可用性。这是一张Kubernetes集群的图，所有组件都绑定在一起。1. 控制

Kubernetes - Kubernetes是什么？Kubernetes是一个可移植的、可扩展的、开源的平台，用于管理容器化的工作负载和服务，它促进了声明式配置和自动化。它有一个庞大的，快速增长的生态系统。Kubernetes的服务、支持和工具是广泛可用的。时光倒流通过时光倒流，让我们来看看为什么Kubernetes如此有用。传统部署时代：早期，在物理服务器上运行应用程序。在物理服务器中无法为应用程序定义资源边界，这导致了资源分配问题。例如，如果多个应用程序在一个物理服务器上运行，则可能存在这样

STOPSIGNAL格式STOPSIGNAL signal。STOPSIGNAL指令设置将发送到容器以退出的系统调用信号。这个信号可以是一个有效的无符号数字，与内核的syscall表中的位置相匹配，例如9，或者是SIGNAME格式的信号名，例如SIGKILL。HEALTHCHECK用于指定某个程序或者指令来监控 docker 容器服务的运行状态。格式HEALTHCHECK [OPTIONS] CMD command 设置检查容器健康状况的命令HEALTHCHECK NONE

Docker - Docker远程安全访问上一篇博客介绍了关于Docker远程访问的内容：Docker - Docker开启远程访问。但直接把Docker这样对外暴露是非常危险的，就跟你服务器上的Redis对外开放（无保护暴露6379端口），还不设置密码一样。其实官方文档已经提供基于CA证书的加密方法：Protect the Docker daemon socket。创建CA私钥和CA公钥首先创建一个ca文件夹用来存放密钥。[root@izoq008ryseuupz ~]# mkdir -p c

Docker - Docker开启远程访问Docker守护进程套接字选项Docker守护进程可以通过三种不同类型的套接字监听Docker Engine API请求：unix、tcp和fd。默认情况下，在/var/run/docker.sock处创建一个unix域套接字（或IPC套接字），需要root权限或docker组成员身份。如果需要远程访问Docker守护进程，则需要启用tcp套接字。请注意，默认设置提供了对Docker守护进程的未加密和未经身份验证的直接访问，并且应该使用内置的HTTPS加密套

WORKDIR格式WORKDIR /path/to/workdir。工作目录，类似于cd命令。为后续的 RUN、CMD、ENTRYPOINT 指令配置工作目录。可以使用多个 WORKDIR 指令，后续命令如果参数是相对路径，则会基于之前命令指定的路径。例如WORKDIR /aWORKDIR bWORKDIR cRUN pwdONBUILD格式ONBUILD <INSTRUCTION>。配置当所创建的镜像作为其它新创建镜像的基础镜像时，所执行的操作指令。例如，

Dockerfile介绍Dockerfile是什么Dockerfile是一个包含用于组装镜像的所有指令的文本文档。Docker可以使用docker build命令读取Dockerfile中的指令自动生成镜像。Dockerfile由一行行指令组成，支持以#开头的注释行。一般的，Dockerfile分为四部分：基础镜像信息、维护者信息、镜像操作指令和容器启动时执行指令。FROM用来指定基础镜像，必须是第一个指令。格式FROM [--platform=<platform>] <im

Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标博主很久之前就想使用Element-UI，总是因为学习后端的技术鸽了很久（博主目前是偏后端），这里博主通过Vue来整合Element-UI（不是Vue项目整合Element-UI，Vue项目整合Element-UI不久就会有的，因为最近博主有一个项目需要）。引入Element-UInpm安装Vue项目整合Element-UI会用到，这里博主就介绍一下。npm i element-u

Ubuntu16.04.6 - sudo: yum: command not found很明显是找不到yum命令，所以我们需要先安装yum。而Ubuntu默认情况下，并没有提供C/C++的编译环境，因此还需要手动安装。但是如果单独安装gcc以及g++就显得比较麻烦了，幸运的是，Ubuntu提供了一个build-essential软件包。通过apt-cache depends build-essential这条命令可以查看build-essential软件包的依赖关系：root@a9c755ae3d9f

推荐：Vue汇总Vue项目 - 单文件组件和Vue中的路由什么是单文件组件在之前的博客中，博主使用Vue.component来定义全局组件，紧接着用new Vue({ el: '#container '})在每个页面内指定一个挂载点。<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>组件</title> <script sr

Vue项目 - 项目文件介绍上一篇博客介绍了三种方式创建Vue项目：Vue - vue create、vue ui、vue init三种方式创建Vue项目。这里博主使用第三种方式创建Vue项目，并且介绍一下项目文件的组成部分。首先创建一个Vue项目：C:\Users\Kaven>e:E:\>cd E:\workspace\WebStorm\blogE:\workspace\WebStorm\blog>vue init webpack project下面是创建Vue项目的

Centos7.3安装Jenkins因为Jenkins是用Java语言开发的，所以需要安装Java环境：yum install -y java使用-y选项，系统就不会询问一些问题，像是否允许为该应用添加环境变量（yes or no），系统会默认你对这些问题的回答都是yes。 -y, --assumeyes answer yes for all questions安装成功。第一步添加Jenkins库到yum库，Jenkins将从这里下载安装。wget -O /etc/yum

Redis - HyperLogLog的PFADD、PFCOUNT、PFMERGE命令介绍HyperLogLog是什么Redis在2.8.9版本添加了HyperLogLog结构。Redis HyperLogLog是用来做基数统计的算法，HyperLogLog的优点是，在输入元素的数量或者体积非常非常大时，计算基数所需的空间总是固定的，并且是很小的。在Redis里面，每个HyperLogLog键只需要花费12KB内存，就可以计算接近2^64个不同元素的基 数。这和计算基数时，元素越多耗费内存就越多的集

XXL-JOB初使用XXL-JOB是什么XXL-JOB是一个分布式任务调度平台，其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线，开箱即用。环境Maven3+JDK1.8+Mysql5.7+调度数据库初始化SQL脚本XXL-JOB(版本2.2.0)的调度数据库初始化SQL脚本如下：# XXL-JOB v2.2.0# Copyright (c) 2015-present, xuxueli.CREATE database if NOT EXI

Redis学习（十五） - 有序集ZRANGE、ZREVRANGE、ZRANGEBYSCORE、ZREVRANGEBYSCORE、ZRANK合、ZREVRANK命令介绍ZRANGEZRANGE key start stop [WITHSCORES]可用版本： >= 1.2.0时间复杂度: O(log(N)+M)， N 为有序集的基数，而 M 为结果集的基数。返回有序集key中，在指定区间内的成员。其中成员的位置按score值从小到大来排序。具有相同score值的成员按字典序来排序。下标

Docker学习（七）- Docker初级网络配置 - 容器通信使用docker run命令的--link选项可以用来链接两个容器，使得源容器（被链接的容器）和接收容器（主动去链接的容器）之间可以互相通信，并且接收容器可以获取源容器的一些数据，如源容器的环境变量。虽然Docker官方已经不推荐使用docker run --link来链接两个容器，从而进行互相通信，随后的版本中会删除--link，但了解其原理，对如何使两个容器之间互相通信还是有帮助的。创建源容器通过下面这条命令在镜像nginx上创建源容

Docker容器中使用PING报错：bash: ping: command not found在Docker容器中想要ping另外一个容器，比如是建立链接的源容器，却提示找不到ping命令。root@dcad73196349:/# ping sourcebash: ping: command not found解决方法apt-get updateroot@dcad73196349:/# apt-get updateGet:1 http://security.debian.org/debia

Vue学习（十九）- 三种方式创建Vue项目（vue create、vue ui、vue init）安装@vue/cli为npm安装的包配置环境变量。运行下面这条命令。npm install -g @vue/cli在CMD中运行vue --version命令，如果输出了@vue/cli的版本，则说明@vue/cli安装成功了。C:\Users\Kaven>vue --version@vue/cli 4.5.9创建Vue项目 - vue create通过下面这条命令可以查看v

Vue学习（十八）- 安装Node.js和使用Webpack打包Vue项目安装Node.jsNode.js下载地址根据自己的操作系统下载相应的安装包。一直下一步即可。配置环境变量。在CMD中运行node -v和npm -v两条命令，如果都能输出版本号，说明nodejs安装成功。博主习惯将npm安装的包放在安装nodejs的目录下，方便统一管理。npm config set prefix "E:\tools
odejs
ode_global"npm config set cach

Docker学习（六）- Docker初级网络配置端口映射Docker容器启动之前，如果不进行端口映射，在容器外部是无法通过网络来访问容器内的网络应用和服务。因为容器中常常会运行一些网络应用和服务，如果想在容器外部通过网络来访问容器内的网络应用和服务，就必须对该容器进行端口映射，可以通过docker run命令中的-P或-p选项来进行端口映射。随机端口映射当通过docker run命令中的-P选项来进行端口映射时，Docker会随机映射一个端口到容器开放的网络端口。以nginx为例，先拉取ngin

Docker学习（五）- Docker数据持久化Docker的数据持久化主要有两种方式：Bind Mount。Volume。Docker的数据持久化，即是数据不随着容器的结束而结束，数据存储于宿主机上，要么存储于宿主机某个指定目录中（使用Bind Mount），要么存储于Docker管理的Volume中（/var/lib/docker/volumes下）。Bind Mount在Docker早期便开始使用了，用于将宿主机中的目录挂载（mount）到容器中。但是当Bind Mount在不同的宿主机

Redis学习（十四） - 有序集合ZADD、ZSCORE、ZINCRBY、ZCARD、ZCOUNT命令介绍ZADDZADD key [NX|XX] [CH] [INCR] score member [score member ...] 可用版本： >= 1.2.0时间复杂度: O(M*log(N))， N 是有序集的基数， M 为成功添加的新成员的数量。将一个或多个member元素及其score值加入到有序集key当中，并且以score值的大小来确定member元素在有序集key中的位

Redis学习（十三） - 集合命令介绍SINTERSINTER key [key …]可用版本： >= 1.0.0时间复杂度: O(N * M)， N 为给定集合当中基数最小的集合， M 为给定集合的个数。返回所有给定集合的交集。不存在的key会被视为空集。演示当给定的key中有不存在或者是空集的情况时，根据集合运算定律，结果很显然也为空集。127.0.0.1:6379> scard set(integer) 23127.0.0.1:6379> scard set

Redis学习（十二） - 集合SADD、SISMEMBER、SPOP、SRANDMEMBER、SREM、SMOVE、SCARD、SMEMBERS、SSCAN命令介绍SADDSADD key member [member …]可用版本： >= 1.0.0时间复杂度: O(N)， N 是被添加的元素的数量。将一个或多个member元素加入到集合key当中，已经存在于集合的member元素将被忽略（集合中的元素各不相同）。演示当key不存在时，会先创建一个空集合，再执行SADD命令将这些

Docker学习（四）- Docker Volume及Volume命令详解什么是数据卷（Volume）Docker镜像被存储在一系列的只读层中。当我们创建一个容器时，Docker会读取镜像（只读），并在其顶部添加一层读写层。如果正在运行中的容器修改了现有文件，该文件将会被拷贝出底层的只读层，放到最顶层的读写层中。读写层中原来的旧版本文件（未被更改过的文件）仍然存在于镜像中。所以当Docker容器被删除后，再基于原来的镜像创建容器时，将创建一个没有任何数据更改的容器，在之前那个容器中的数据更改会被丢失掉

Redis学习（十一） - 列表RPOPLPUSH、BLPOP、BRPOP、BRPOPLPUSH命令介绍RPOPLPUSHRPOPLPUSH source destination可用版本： >= 1.2.0时间复杂度： O(1)RPOPLPUSH命令是一个原子命令，在一个原子时间内，会执行以下两个动作（都执行成功或者都执行失败）：将列表source中的表尾元素弹出，并返回给客户端。将列表source弹出的表尾元素插入到列表destination的表头位置。演示RPOPLPUS

Redis学习（十） - 列表LREM、LLEN、LINDEX、LINSERT、LSET、LRANGE、LTRIM命令介绍LREMLREM key count value可用版本： >= 1.0.0时间复杂度： O(N)， N 为列表的长度。根据参数count的值，移除列表中与参数value相等的元素。演示先push一些值进去。127.0.0.1:6379> lpush list kaven jojo java kaven docker redis kaven vue kav

Docker学习（三）- Docker容器及容器命令详解什么是Docker容器（Docker Container）上一篇博客介绍了Docker镜像（Docker Image）以及Image的一些命令：Docker学习（二）- Docker Image及Image命令详解。其实镜像（Image）和容器（Container）的关系，就像是程序和进程一样，镜像是静态的定义，容器则是动态的定义，是镜像运行时的实体。容器可以被创建、启动、停止、删除、暂停等。每个容器都是相互隔离的、保证安全的平台。可以把容器看做

Redis学习（九） - 列表命令介绍LPUSHLPUSH key value [value …]可用版本： >= 1.0.0时间复杂度： O(1)将一个或多个值value插入到列表key的表头，并且各个值value按从左到右的顺序依次插入。演示如果key不存在，一个空列表key会被创建并执行LPUSH操作。对空列表key执行命令LPUSH key a b c，列表的值将是c b a，等同于执行LPUSH key a 、LPUSH key b和LPUSH key c三个命令。执行LP

Redis学习（八） - 哈希表命令介绍HLENHLEN key时间复杂度：O(1)返回哈希表key中域的数量。演示当哈希表key不存在时，返回 0。HSTRLENHSTRLEN key field可用版本：>= 3.2.0时间复杂度：O(1)返回哈希表key中给定域field对应的字符串长度。演示如果给定的哈希表key或者域field不存在， 那么命令返回 0 。HINCRBYHINCRBY key field increment可用版本：>

安装Centos7.3安装Docker19.03.13DockerDocker学习（一）- 这应该就是你想要的Docker架构分析Docker学习（二）- Docker Image及Image命令详解未完待续

Docker学习（二）- Docker Image及Image命令详解什么是镜像（Image）Docker镜像（Docker Image）就是一个只读的模板。比如，一个镜像可以包含一个完整的Ubuntu操作系统环境。镜像可以用来创建Docker容器。在Docker的术语里，一个只读层被称为镜像，一个镜像是永久不会变的。由于Docker使用一个统一文件系统，Docker进程认为整个文件系统是以读写方式挂载的。 但是所有的变更都发生在顶层的可写层，而下层的原始的只读镜像文件并未变化。由于镜像不可写，

Redis学习（七） - 哈希表命令介绍HSETHSET hash field value可用版本： >= 2.0.0时间复杂度： O(1)将哈希表hash中域field的值设置为value。演示如果给定的哈希表并不存在， 那么一个新的哈希表将被创建并执行HSET操作。当HSET命令在哈希表中新创建 field域并成功为它设置值时， 命令返回 1 。如果域field已经存在于哈希表中， 那么它的旧值将被新值value覆盖，并且HSET命令返回 0 。HSETNXHSETNX

Docker学习（一）- Docker架构原文地址Docker：架构分解Docker项目的目标是实现轻量级的操作系统虚拟化解决方案，它的基础是Linux 容器（LXC）等技术。在LXC的基础上Docker进行了进一步的封装，让用户不需要去关心容器的管理，使得操作更为简便。用户操作 Docker的容器就像操作一个快速轻量级的虚拟机一样简单。下面的图片比较了Docker和传统虚拟化方式的不同之处，可见容器是在操作系统层面上实现虚拟化，直接复用本地主机的操作系统，而传统方式则是在硬件层面实现。

Centos7.3安装Docker如果已安装旧版本的Docker，先卸载Docker以及相关的依赖项。$ sudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-latest-l

Redis学习（六） - 位图SETBIT、GETBIT、BITCOUNT、BITPOS、BITOP命令介绍SETBITSETBIT key offset value可用版本：>= 2.2.0时间复杂度: O(1)对键key对应的位图（其实是字符串，只不过该字符串的每一位都是字符0或者字符1，下面都叫它位图），设置或清除指定偏移量上的位(bit)，位的设置或清除取决于value的值，它可以是0，也可以是1。演示当键key不存在时，会自动生成一个位图。如果偏移量大于键key对应的位图长

Redis学习（五） - 字符串MSET、MSETNX、MGET命令介绍MSETMSET key value [key value …]可用版本： >= 1.0.1时间复杂度： O(N)，其中 N 为被设置的键数量。同时为多个键key设置值。演示如果某个给定键key已经存在， 那么MSET命令将使用新值覆盖掉旧值。MSET命令总是返回 OK 。MSET命令是一个原子(atomic)操作， 所有给定键key都会在同一时间内被设置， 不会出现某些键key被设置了，而有一些键key没

Redis学习（四） - 字符串命令介绍INCRINCR key可用版本： >= 1.0.0时间复杂度： O(1)为键key对应的数字字符串（整数）加上一。演示如果键key不存在， 那么它的值会先被初始化为 0 ， 然后再执行INCR命令。INCR命令会返回键key对应的数字字符串转换成数字后，再执行加一操作之后的值。如果键key对应的字符串不能被解释成数字， 那么INCR命令将返回一个错误。INCR命令是一个针对字符串的操作。 因为Redis并没有专用的整数类型， 所以键

Redis学习（三） - 字符串命令介绍STRLENSTRLEN key可用版本： >= 2.2.0复杂度： O(1)返回键 key 储存的字符串的长度。演示STRLEN命令返回键key对应字符串的长度。当键key不存在时， 命令返回 0 。当键key对应的不是字符串时， 返回一个错误。APPENDAPPEND key value可用版本： >= 2.0.0时间复杂度： 平摊O(1)演示如果键key已经存在，并且对应的值是一个字符串， APPEND命令

RedisRedis学习（一） - Windows & Centos下安装RedisRedis学习（二） - 字符串SET、SETNX、SETEX、PSETEX、GET、GETSET命令介绍未完待续扩展阅读Spring Boot使用Jedis实现分布式锁Redis启动报错 Creating Server TCP listening socket 127.0.0.1:6379: bind: No errorCentos7.3安装Redis6.0.9 - make时报错 make[1

Redis学习（二） - 字符串SET、SETNX、SETEX、PSETEX、GET、GETSET命令介绍SETSET key value [EX seconds] [PX milliseconds] [NX|XX]可用版本： >= 1.0.0时间复杂度： O(1)将字符串值value关联到 key 。如果key已经持有其他值， SET会覆盖掉旧值。当SET命令对一个带有生存时间（TTL）的键进行设置之后， 该键原有的 TTL 将被清除。这些在演示中会进行说明。可选参数从Redis

Redis学习（一） - Windows & Centos下安装RedisWindows下载地址：Redis - Windows目前是Redis 5.0.10 for Windows，我个人喜欢用zip文件进行安装。下载zip文件，再解压即可。会有以下文件。点击redis-server.exe，得到下图，说明启动成功。或者将Redis的路径添加到环境变量中。直接在cmd中输入redis-server即可启动。点击redis-cli.exe进行连接（启动成功的前提下）。

Centos安装Redis - make时报错 make[1]: *** [server.o] Error 1…make: *** [install] Error 2具体如下图：原因是因为gcc版本过低，因此需要升级gcc，升级过程如下：yum -y install centos-release-sclyum -y install devtoolset-9-gcc devtoolset-9-gcc-c++ devtoolset-9-binutilsscl enable devtoolse

推荐：Vue学习汇总Vue学习（十六）- 插槽如果你对组件不太了解，推荐你先阅读它：Vue学习（七）- Vue组件基础在2.6.0中，为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。插槽使用Vue 实现了一套内容分发的 API，将 <slot> 元素作为承载分发内容的出口。<!DOCTYPE html><html lang="e

推荐：Vue学习汇总Vue学习（十五）- 组件传值（父子组件间传值、非父子组件间传值）如果你对组件不太了解，推荐你先阅读它：Vue学习（七）- Vue组件基础父子组件间传值父组件向子组件传值：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件传值</title> <script src="./js/vue

推荐：Vue学习汇总Vue学习（十四）- Prop如果你对组件不太了解，推荐你先阅读它：Vue学习（七）- Vue组件基础Prop 的大小写 (camelCase vs kebab-case)HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：<!DOCTYPE html><ht

使用Vue和Spring Boot实现文件下载推荐使用Vue和Spring Boot实现文件上传。前端这里介绍三种方式来实现文件下载，跨域问题在后端会进行处理，这个例子是下载MP4文件，我这里是直接使用HTML来写前端，如果用Vue来写，可能要防止mockjs对请求的responseType产生影响（mockjs会创建一个新的XMLHttpRequest对象，并且有着自己的原始配置。所以导致覆盖了axios的配置，如responseType等）。<!DOCTYPE html>&l

推荐：Vue学习汇总Vue学习（十三）- attribute is & refattribute is用于动态组件且基于 DOM 内模板的限制来工作。动态组件有的时候，在不同组件之间进行动态切换是非常有用的。可以通过 Vue的 <component> 元素加一个特殊的 is attribute 来实现：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <ti

推荐：Vue学习汇总Vue学习（十二）- 深入响应式原理现在是时候深入一下了！Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。在这个章节，我们将研究一下 Vue 响应式系统的底层的细节。如何追踪变化当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并

推荐：Vue学习汇总Vue学习（十一）- v-if、v-show、v-else、v-else-ifv-if根据表达式的真假值，来有条件地渲染元素。在切换时元素及它的数据绑定 、组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。代码：<!DOCTYPE html><html lang="en"><head> &

推荐：Vue学习汇总Vue学习（十）- 侦听器 watch 和计算属性 computed代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>computed</title> <script src="./js/vue.js"></script></head><body&

推荐：Vue学习汇总Vue学习（九）- v-text、v-htmlinnerText和innerHTML的区别代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-text v-html</title></head><body> <div id="div1"></d

推荐：Vue学习汇总Vue学习（八）- Vue生命周期钩子官网下图展示了Vue实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。beforeCreate在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

推荐：Vue学习汇总Vue学习（七）- Vue组件基础为了介绍Vue的组件，先用Vue的组件来改造之前实现的TodoList：Vue学习（六）- 用Vue写一个TodoList小栗子代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>TodoList</title> <script src="./js/vue.js">&

推荐：Vue学习汇总Vue学习（五）- 用Vue写一个TodoList小栗子需求在输入框中输入计划，点击提交，可以加入List的最前面。避免输入全是空格。避免按钮点击的冒泡事件。代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>TodoList</title> <script src="./js/vue.js">&l

Vue学习（四）- v-modelv-model可以在表单控件或者组件上创建双向绑定。双向绑定<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>v-model</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <

Vue学习（四）- v-bindv-bind 使用v-bind动态地绑定一个或多个attribute，或一个组件 prop 到表达式。在绑定class或style这种attribute时，支持其它类型的值，如数组或对象。代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>v-bind</title> <script src="ht

Vue学习（三）- v-onv-on 使用v-on是用于绑定事件监听器。事件类型由参数指定，表达式可以是一个方法的名字或一个内联语句。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>v-on</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><

Vue学习（二）- v-forv-for就相当于程序语言中的for一样，可以遍历一个Array、Object、number、string、Iterable(2.6 新增)。遍历Array。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>TodoList</title> <script src="https://cdn.jsdelivr.

VueVue学习（一）- Hello World 初体验未完待续

Vue学习（一）- Hello World 初体验介绍Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。尝试Vue最简单的方法是使用Hello World例子。可以创建一个 .html 文件，然后通过如下方式引入 Vue：<!-- 开发环境版本，包含了有帮助的命令行警告

Spring Cloud 之Zuul初使用介绍在微服务架构中，通常会有多个服务提供者。设想一个电商系统，可能会有商品、订单、支付、用户等多个类型的服务，而每个类型的服务数量也会随着整个系统体量的增大也会随之增长和变更。作为UI端，在展示页面时可能需要从多个微服务中聚合数据，而且服务的划分位置结构可能会有所改变。网关就可以对外暴露聚合API，屏蔽内部微服务的微小变动，保持整个系统的稳定性。当然这只是网关众多功能中的一部分，它还可以做负载均衡，统一鉴权，协议转换，监控监测等一系列功能。Zuul是Spri

Spring Boot使用Jedis实现分布式锁在单机应用中通过使用synchronized关键字、JUC的Lock来实现线程安全是没问题的，但在分布式环境中就有可能出现问题，因为这些同步机制、锁是不能跨机器的，所以实现分布式锁就有很必要。首先创建两个Spring Boot项目。pom.xml（两个项目都一样）:<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0

Spring Boot使用WebSocket实现后台消息推送为什么需要WebSocket？已经有了HTTP协议，为什么还需要另一个协议？这是因为HTTP协议有一个缺陷：通信只能由客户端发起。当客户端想知道某个订单是否已经完成支付，使用HTTP协议只能由客户端向服务器发出请求，服务器返回查询结果，可以知道HTTP协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息

使用Vue和Spring Boot实现前端图片获取前端通过后端请求图片数据也是很常见的业务需求，这里博主给大家演示一下。前端：<template> <div class="blog"> <div class="upload"> <img :src="'data:image;base64,'+image"> <button @click="gain()"><span&

使用Vue和Spring Boot实现文件上传文件上传是开发中很常见的业务需求，这里博主通过使用Vue和Spring Boot实现一个简单的文件上传小例子。前端：<template> <div class="blog"> <div class="upload"> <input type="file" @change="fileChoose($event)"> <button @

Spring Cloud 之Sleuth组件-结合Zipkin实现链路监控随着业务的发展，服务数量会不断增加，那么各个服务之间的调用关系也会变得越来越复杂。一个HTTP请求可能会调用多个不同的服务来实现业务需求，在这个调用过程中，可能会因为某个服务出现网络延迟过高或发生错误导致请求失败，这个时候，对请求链的监控就显得尤为重要了。Spring Cloud Sleuth提供了分布式服务链路监控的解决方案。这里会介绍Spring Cloud Sleuth整合Zipkin实现链路监控。首先创建注册中心。po

原文地址Spring Cloud 之@LoadBalanced注解，看完保证你还懂@Qualifier注解在使用Spring Cloud Ribbon客户端进行负载均衡的时候，可以给RestTemplate（Bean） 加一个@LoadBalanced注解，就能让这个RestTemplate在请求时拥有客户端负载均衡的能力：package com.kaven.client.component;import org.springframework.cloud.client.loadbalancer.

Spring Cloud 之Ribbon负载均衡简单来讲，Ribbon的主要功能是提供客户端的负载均衡。它可以在客户端配置服务名称（服务名称由注册中心维护），然后通过负载均衡算法来确定请求哪个服务（一个服务名称可能有多个服务实例），从而实现客户端负载均衡。我们这里会涉及到Eureka注册中心，两个服务提供者(server-provider)，一个服务消费者（server-consumer）。创建Eureka注册中心。pom.xml如下：<?xml version="1.0" encoding

MyBatis-Plus 之SQL分析打印在我们日常开发工作当中，避免不了查看当前程序所执行的SQL语句，并且还需要了解它的执行时间，以便分析是否出现了慢SQL情况。MP提供了两种SQL分析打印的方式，用于输出每条SQL语句及其执行时间，针对执行较长时间的SQL可以停止运行，有助于发现问题。这两种方式只适用于开发环境，因为这些工具都是有性能损耗的，所以不建议生产环境使用。PerformanceInterceptor插件 3.2.0 以上版本移除。所以我们只介绍MyBatis-Plus官网推荐的方式

MyBatis-Plus 之乐观锁插件适用场景当要更新一条记录时，希望这条记录没有被别人更新过。乐观锁实现方式：取出记录时，获取当前version。更新时，带上这个version。执行更新时， set version = newVersion where version = oldVersion。如果version不对，就更新失败。接下来，我们来演示MyBatis-Plus的乐观锁插件。首先创建一个数据库表，如下图所示：然后创建一个Spring Boot项目。pom.xml如下：

Spring Cloud 之Hystrix熔断器、Hystrix-Dashboard可视化监控中心为了大家能更好的了解Hystrix原理，可以读一下这篇博客：Hystrix原理在之前的博客中，我介绍了Hystrix的基本使用：Spring Cloud 之Hystrix初使用所以这里有一些重复且不相关的代码就不写了，比如注册中心，Server服务的pom.xml和application.yml、Client服务的pom.xml、application.yml以及RestTemplate组件。Serve

Spring Cloud 之Hystrix初使用可以先看一下这篇博客，对Hystrix有一个总体的认识：Hystrix原理先来创建注册中心。pom.xml如下：<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schema

原文地址：Hystrix原理与实战（文章略长）背景分布式系统环境下，服务间类似依赖非常常见，一个业务调用通常依赖多个基础服务。如下图，对于同步调用，当库存服务不可用时，商品服务请求线程被阻塞，当有大批量请求调用库存服务时，最终可能导致整个商品服务资源耗尽，无法继续对外提供服务。并且这种不可用可能沿请求调用链向上传递，这种现象被称为雪崩效应。雪崩效应常见场景硬件故障：如服务器宕机，机房断电，光纤被挖断等。流量激增：如异常流量，重试加大流量等。缓存穿透：一般发生在应用重启，所有缓存失效时，以及短

MyBatis-Plus 之自动填充一个业务场景就是当我们插入或者更新表数据时，数据库会自动帮我们插入或者更新表字段create_time、update_time。那有人会问了，在创建表时不是可以这样设置吗？ `create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间' `update_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TI

MyBatis-Plus 之逻辑删除实现概念逻辑删除：文件没有被真正的删除，只不过是文件名的第一个字节被改成操作系统无法识别的字符，通常这种删除操作是可逆的，就是说用适当的工具或软件可以把删除的文件恢复出来。物理删除：指文件存储所用到的存储区域被真正的擦除或清零，这样删除的文件是不可以恢复的，物理删除是计算机处理数据时的一个概念。逻辑删除就是对要被删除的数据打上一个删除标记，在逻辑上，数据是被删除了，但数据本身依然存在！而物理删除则是把数据从介质上彻底删除掉。正文首先创建一个数据库表，如下图

Spring Cloud 之Feign实现微服务之间相互请求创建第一个Spring Boot项目作为注册中心。pom.xml如下：<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http:/

Spring Cloud 之使用RestTemplate实现微服务之间相互请求的三种方式RestTemplate 简介RestTemplate是由Spring提供的一个HTTP请求工具。RestTemplate是从Spring3.0开始支持的一个HTTP请求工具，它提供了常见的REST请求方案的模版，例如 GET 请求、POST请求、PUT请求、DELETE请求以及一些通用的请求执行方法exchange以及execute。RestTemplate继承自InterceptingHttpAccessor并且

Spring Cloud 之Config配置中心首先创建一个Spring Boot项目作为注册中心。pom.xml如下：<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://mave

Spring Cloud之Eureka高可用我这里就使用三个Eureka Server和一个Eureka Client来演示Eureka高可用，架构图如下：可以把三个Eureka Server想象成跨区域的注册中心。创建第一个Spring Boot项目作为Eureka Server1。pom.xml如下:<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0

原文地址：Eureka工作原理Eureka工作原理上节内容为大家介绍了，注册中心Eureka的使用，以及如何利用Eureka搭建单台和集群的注册中心。这节课我们来继续学习Eureka，了解它的相关概念、工作流程机制等。Eureka作为Spring Cloud体系中最核心、默认的注册中心组件，研究它的运行机制，有助于我们在工作中更好地使用它。Eureka 核心概念回到上节的服务注册调用示意图，服务提供者和服务消费者，本质上也是Eureka Client 角色。整体上可以分为两个主体：Eureka S

Spring CloudSpring Cloud 之Eureka初使用未完待续Spring Cloud Alibaba未完待续扩展阅读Spring Cloud Eureka - Client启动后直接运行结束：Completed shut down of DiscoveryClientSpring Cloud Config使用Github的Webhooks功能出现400状态码Spring Cloud整合Sleuth，当请求完成后，Zipkin没有链路信息...

Spring Cloud 之Eureka初使用首先创建一个Spring Boot项目作为Eureka Server，毕竟Spring Cloud是基于Spring Boot的。pom.xml如下:<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

MyBatis-Plus 之通用Service首先创建一个数据库表，如下图所示：然后创建一个Spring Boot项目，pom.xml和配置如下：<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:sche

MyBatis-Plus 之AR模式Active Record(活动记录)，是一种领域模型模式，特点是一个模型类对应关系型数据库中的一个表，而模型类的一个实例对应表中的一行记录。首先创建一个数据库表，如下图所示：然后创建一个Spring Boot项目，pom.xml和配置如下：<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmln

MyBatis-Plus 之分页查询首先创建一个数据库表，如下图所示：然后创建一个Spring Boot项目，pom.xml和配置如下：<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLoc

MyBatis-Plus 之自定义sql首先创建一个数据库表，如下图所示：然后创建一个Spring Boot项目，pom.xml和配置如下：<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaL

MyBatis-Plus 之Lambda条件构造器首先创建一个数据库表，如下图所示：然后创建一个Spring Boot项目，pom.xml和配置如下：<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:sc

首先创建一个数据库表，如下图所示：然后创建一个Spring Boot项目，pom.xml和配置如下：<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven

MyBatis-Plus allEq的用法首先创建一个数据库表，如下图所示：然后创建一个Spring Boot项目，pom.xml和配置如下：<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schema