- 博客(222)
- 资源 (6)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 部分面试笔记
1.数据一致性问题1.1redis一致性(容灾)原面试题：redis集群数据一致性如何保证，如果挂了一台机会怎样？可以从故障检测和从节点选举说起。故障检测集群中每个节点都会定期的向集群中的其他节点发送PING信息。如果在一定时间内，发送ping的节点A没有收到某节点B的pong回应，那么A将B标识为pfail。A在后续发送ping时，会带上B的pfail信息，通知给其他节点。如果B被标记为pfail的个数大于集群主节点个数的一半（N/2 + 1）时，B会被标记为fail，A向整个集群广播，该节
2021-08-20 10:28:02
388
原创 Redis 缓存过期和淘汰策略
Redis性能高： 官方数据 读：110000次/s 写：81000次/s 长期使用，key会不断增加，Redis作为缓存使用，物理内存也会满 内存与硬盘交换（swap） 虚拟内存 ，频繁IO 性能急剧下降maxmemory不设置的场景Redis的key是固定的，不会增加 Redis作为DB使用，保证数据的完整性，不能淘汰 ， 可以做集群，横向扩展 缓存淘汰策略：禁止驱逐 （默认）设置的场景 Redis是作为缓存使用，不断增加Key maxmemory
2021-08-11 09:28:12
369
1
原创 Redis数据类型选择和应用场景
Redis是一个Key-Value的存储系统，使用ANSI C语言编写。key的类型是字符串。value的数据类型有：常用的：string字符串类型、list列表类型、set集合类型、sortedset（zset）有序集合类型、hash类型。不常见的：bitmap位图类型、geo地理位置类型。Redis5.0新增一种：stream类型注意：Redis中命令是忽略大小写，（set SET），key是不忽略大小写的 （NAME name）Redis的Key的设计1. 用:分割2. 把表名转..
2021-08-05 23:01:00
384
1
原创 Redis 安装 使用
官网地址：http://redis.io/中文官网地址：http://www.redis.cn/下载地址：http://download.redis.io/releases/Redis安装环境Redis 没有官方的 Windows 版本，所以建议在 Linux 系统上安装运行。我们使用 CentOS 7 作为安装环境Redis安装第一步：安装 C 语言需要的 GCC 环境yum install -y gcc-c++ yum install -y wget第二步：下载并.
2021-08-05 22:47:54
117
原创 缓存架构的设计思路
缓存架构的设计思路：多层次分布式缓存宕机，本地缓存还可以使用数据类型简单数据类型Value是字符串或整数或二进制Value的值比较大（大于100K）只进行setter和getter可采用MemcachedMemcached纯内存缓存，多线程 K-V复杂数据类型Value是hash、set、list、zset需要存储关系，聚合，计算可采用Redis要做集群分布式缓存集群方案（Redis）codis哨兵+主从RedisCluster缓存的数据.
2021-08-05 22:36:48
99
原创 Vue 路由
什么是路由路由是负责将进入的浏览器请求映射到特定的 组件 代码中。 即决定了由谁(组件)去响应客户端请求。路由入门1.<div id="app">2.<router-link to="/product">公司产品</router-link>3.<router-link to="/about">关于我们</router-link>4.<hr/>5.<router-view>...
2021-08-04 09:24:35
82
原创 Vue 组件
组件组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 js 特性进行了扩展的原生 HTML 元素。总结:组件是用来完成特点功能的一个自定义的HTML标签例如:<body><mytag></mytag></body>注意: mytag就是一个组件,...
2021-08-04 09:16:58
297
原创 缓存原理是什么？先知道为什么？才能更好的使用！
缓存的使用场景DB缓存，减轻服务器压力一般情况下数据存在数据库中，应用程序直接操作数据库。当访问量上万，数据库压力增大，可以采取的方案有：读写分离，分库分表当访问量达到10万、百万，需要引入缓存。将已经访问过的内容或数据存储起来，当再次访问时先找缓存，缓存命中返回数据。不命中再找数据库，并回填缓存。提高系统响应数据库的数据是存在文件里，也就是硬盘。与内存做交换（swap）在大量瞬间访问时（高并发）MySQL单机会因为频繁IO而造成无法响应。MySQL的InnoDB是有行锁.
2021-08-03 23:33:12
521
原创 Vue 计算属性
计算属性是一种特殊的属性.用法和methods一样，里面写函数，函数必须有一个唯一的返回值。语法1 使用计算属性{{计算属性的方法名字}}2 定义计算属性对应的方法var app = new Vue({el: "#app",data: {message: "it"},computed:{计算属性的方法名字: function(){return 处理结果.}}});优点...
2021-08-03 09:09:04
128
原创 Vue 过滤器
过滤器就是数据在页面上输出之前对其进一步进行格式化.语法1. 语法:1.1 在视图页面中使用过滤a. {{表达式|过滤器1|过滤器2}}b. <标签 v-bind:属性名字="表达式|过滤器1|过滤器2"></标签>简写形式:<标签 :属性名字="表达式|过滤器1|过滤器2"></标签>1.2 在Vue实例中定义过滤器var app = new ...
2021-08-03 09:01:30
146
原创 Vue 事件
1语法:1.1 使用v-on指令注册事件<标签 v-on:事件句柄="表达式或者事件处理函数"></标签>1.2 简写方式<标签 @事件句柄="表达式或者事件处理函数"></标签>2. 注意事项:事件处理函数作为事件句柄的值不需要调用.<div id="app"><h1>结果</h1>{{num}}<h1>...
2021-08-03 08:57:38
296
原创 Vue指令
指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.常见的指令v-text=“表达式” 设置标签中的文本v-html=“表达式” 设置标签中的htmlv-if=“表达式” 判断条件v-for=“表达式” 循环v-model=“表达式” 数据双向绑定v-on=“表达式” 注册事件指令作用1.作用: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。2.一个标签元素上可以出现多个指令属性3.指令只能够出现在Vue对象...
2021-08-02 22:19:45
143
原创 VueJS表达式
表达式是Vue中视图模板的一种语法结构. 将数据绑定(输出)到HTML中表达式语法VueJS表达式写在双大括号内：{{ expression }}。VueJS表达式把数据绑定到 HTML。VueJS将在表达式书写的位置"输出"数据。VueJS表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。简单表达式在{{ }}中可以进行简单的运算<div
2021-08-02 21:41:46
803
原创 Vue 基础入门
Vue是什么Vue（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue只关注视图层。Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue学习起来非常简单。<!doctype html><html> &l...
2021-07-30 10:11:42
287
原创 jQuery 自定义动画animate()
用于创建自定义动画的函数animate(params,[duration],[easing],[callback])这个函数的关键在于制定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如height、top或opacity)。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left。而每个属性的值表示这个样式属性到多少是动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是hide、show、t
2021-07-29 21:56:33
923
原创 jQuery 动画
显示隐藏匹配元素Show()这个就是'show( speed, [callback] )'。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。例如：显示所有段落，$("p").show()show(speed,[callback])以优雅的动画显示匹配的元素，并且在显示完成后可选择返回一个回调函。可根据指定的速度动态改变每个匹配元素高度、宽度和不透明度。例如：用缓慢的动画.
2021-07-29 21:47:08
111
原创 jQuery 表单事件和表单样式
表单有2个基本组成部分表单域：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器端的方法。表单元素：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。单行文本框应用文本框是表单域中最基本的元素，基于文本框的应用有很多。设置添加和失去焦点事件：$(funciton(){$(":input").focus(func.
2021-07-29 21:36:27
232
原创 jQuery 事件
文档和窗口加载事件DOM加载完毕后执行的事件特别注意：DOM加载完毕并不代表其关联文件加载完毕。例如：<img src=”https://www.baidu.com/img/2016_8_14female_better_47932c92937c2b1c84bfbb1c28bb2193.gif” />DOM加载完毕仅仅是这个标签节点字符串加载完毕，但是这个节点的属性对应的资源可能还没加载完毕，即：src属性对应的：https://www.baidu.com/img/2
2021-07-29 21:28:09
73
原创 jQuery 定位和偏移操作
offset()方法offset()方法用于获取元素相对当前窗体的偏移量。其返回对象包括两个属性：top和left。方法如下：$(selector).offset()var offset= $("p").offset();var left=offset.left;var top=offset.top;该示例用于获得元素p的偏移量。offset()只对可见元素有效。position()方法position()方法用于获取元素与最近的个position样式属性设置为r.
2021-07-29 15:59:18
545
原创 jQuery each()
1.对象和数组遍历 $.each(object, [callback])$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n );});2.元素集合遍历 $(ele).each(callback)$(“ul li”).each(function(index,item){ alert( "index" + index + ": " + item );});...
2021-07-29 15:54:34
63
原创 jQuery DOM操作
jQuery中DOM基本操作jQuery中的DOM操作主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的DOM操作将围绕上面的DOM树进行学习jQueryDOM操作。【查】查找结点查找节点非常容易，使用选择器就能轻松完成各种查找工作。就是利用我们前面学习的选择器来查找节点的。例：查找元素节点p返回p内的文本内容。$("p").text();例：查找元素节点p的属性返回属性名称对应的属性值$("p").attr("title"); //.
2021-07-29 15:52:13
1344
原创 jQuery 选择器
根据标签的属性id,class的值或者是标签的名字查找文档元素的功能称之为选择器。选择器是jquery的根基，在jquery中，对事件的处理，遍历DOM,ajax操作等都依赖于选择器，熟练使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。为什么要使用选择器通过Javascript改变html中元素效果之前首先要找到元素,采用jQuery选择器寻找元素简单快捷.原生javascript代码:document.ge
2021-07-28 22:20:39
122
原创 jQuery 基础
官方介绍：jQuery is a fast, small, and feature-rich JavaScript library.jQuery是一个开源的产品，任何人都可以自由的使用，jQuery强调的理念是写的少，做的多(write less, do more)，其独特的选择器、链式DOM操作方式、事件绑定机制、出色的浏览器兼容性、封装完善的Ajax都是其它JavaScript库望尘莫及的，是继prototype之后又一个优秀的Javascript框架 (框架指已经封装好的，据有一定结构和功...
2021-07-28 21:50:27
149
原创 JavaScript 实现音乐播放器
效果HTML代码<!--播放器--><div id="player"> <!--播放控件--> <div id="playerControl"> <div class="playerImg"> <img src="../images/demo3/1.jpg" alt="" width="150" height="150"> <..
2021-07-28 10:52:15
2729
3
原创 JavaScript Event对象
event对象：也就是“事件对象”: 代表一个网页上的事件发生时的相关信息。具体比如：鼠标的位置，按键的键值/键名，事件发生在谁身上（就是所谓的事件源）。事件对象的组成注意：event对象在FF浏览器中，必须在事件调用函数的位置传如函数中事件的实例按钮改变点击数----练习事件源瞄准---鼠标坐标(鼠标事件)事件注册与捕获往元素上添加事件的三种方式直接在元素标签上添加事件句柄在元素标签的DOM对象上添加事件句柄属性事件注...
2021-07-28 10:48:44
142
原创 JavaScript 事件
什么是事件与事件处理函数事件：是用户与计算机交互的方法。比如：单击、鼠标放上、双击等，当然有的事件是由对象发出,比如onload事件；事件处理函数：就是JS中，当事件发生时，去调用函数。在事件前加“on”，比如：onclick、ondblclick(双击事件)、onchange(改变事件)事件例子：HTML 事件的例子：当用户点击鼠标时当网页已加载时 onload（文档加载完毕）当网页被卸载时 onbeforeunload（文档即将从浏览器中卸载）当图片已加载时当鼠标移动
2021-07-28 09:57:58
127
原创 JavaScript HTML DOM Node对象
HTML文档中的每一个成员都是一个节点对象，节点对象具有自己的属性和方法。找到HTML节点和Body节点document.documentElement -> html标签可返回存在于 XML 以及 HTML 文档中的文档根节点document.body ->body标签对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。如果我们要对页面上添加显示元素,一般来说会使用这种方式我们要注意的区别:document.documentEl..
2021-07-28 09:50:20
149
原创 JavaScript BOM其他对象
screen对象 availWidth 显示器屏幕可用宽度，除任务栏外 availHeight 显示器屏幕可用高度，除任务栏外 Width 实际宽 Height 实际高 location对象对象存储了当前显示的文档的地址，包括完整的URL地址以及组成URL地址的各个部分。其中各个属性被重新赋值后，浏览器将自动刷新，载入新的URL地址
2021-07-27 15:27:03
64
原创 JavaScript Window对象
Window对象是BOM与DOM的顶层对象，表示浏览器窗口或者网页中的框架。Window对象是脚本中的全局对象，可以在任何地方调用，脚本中任何对象的使用最终都要追溯到对window对象的访问，所以在使用window对象的各种属性和方法时，window前缀可以省略。访问window对象或子对象属性和方法，要按照层次关系，使用“.”运算符将它们连接起来。window.alert(); 简写方式 alert();window.document.write();
2021-07-27 15:10:51
124
原创 JavaScript DOM和BOM
JavaScript组成JavaScript和ECMAScript通常都被人们用来表达相同的含义，但JavaScript的含义却比ECMA-262中规定的要多得多。一个运行在的JavaScript实现应该由下列三个不同的部分组成:1、核心( ECMAScript)：JavaScript语言的核心，包含基本语法、数据类型、关键字...2、文档对象模型( DOM)：提供访问和操作网页内容的方法和接口；可操作HTML中的标签内容、样式、结构；document.write(“你好”)，输出内容至
2021-07-27 14:38:59
113
原创 JavaScript Date对象
Date 对象用于处理日期和时间。创建Date对象1.new Date()2.new Date(dateVal)3.new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]]):创建date代表指定当前系统时间字符串的格式:短日期可以使用“/”或“-”作为日期分隔符，但是必须用月/日/年的格式来表示，例如"7/20/96"。小时、分钟、和秒钟之间用冒号分隔，尽管不是这三项都需要指明。"10:"、"10:11".
2021-07-26 22:19:55
109
原创 JavaScript Math对象
JavaScript自身定义了很多数学运算的方法被定义在Math对象中. Math自身就是一个对象无需创建直接使用自身中的方法和属性Math的属性PIPI属性代表圆周率Math.abs(x)返回数x的绝对值。Math.ceil(x)对一个数x进行上舍入Math.floor(x)对一个数x进行下舍入Math.max(x)返回指定数中带有较大的值的那个数。…表示可以传递无限个参数Math.min(x,y)返回指定数中带...
2021-07-26 22:02:59
166
原创 JavaScript 对象
什么是对象1.在现实世界中，任何(实体/所有的东西)都可叫对象，比如“人”可看作一个对象。“人”具有姓名、性别、年龄、身高、体重等特征，“人”可以吃饭、可以开车、可以运动等动作(具有这些功能)。一个杯子就是一个对象，杯子有什么特征：形状、用途、花纹。。。 杯子：装水；圆、喝水、无 功能：装水。2.简单的讲，对象就是一组属性与方法的集合，比如：“人”的属性(特征)有身高、体重，“人”的功能有吃饭、开车、睡觉等。3.对象是一种复合数据类型，或者称为引用类型。基本数据类型只能用于描述
2021-07-26 21:53:16
95
原创 JavaScript 数组
数组是一组数据有序排列的集合。将一组数据按一定顺序组织为一个组合，并对这个组合命名，这样便构成了数组。数组元素：组成数组的每一个数据称为数组的一个数组元素。数组索引：每一个数组元素对应一个整数值，称为数组元素索引，或者数组元素下标。元素索引为非负整数，由0开始依次增加，即第一个元素索引为0，依次为1，2等。数组元素的访问：对数组中各个元素，使用数组名加上以方括号”[ ]”括起来的元素索引进行访问。元素索引为元素在数组中的位置序号。数组的长度：数组元素的个数称为数组的长度。数组是复合数
2021-07-26 21:30:42
428
3
原创 JavaScript 函数 变量的作用域
函数:函数其实就是对一段代码进行封装，被封装的代码总是完成某项功能，函数不会主动的运行，需要在程序中手动的调用函数（比如：用户点击的时候），并且可以多次调用这个函数；函数的定义为什么要使用函数呢?因为函数可以封装一个功能,该功能可以被多次使用从而达到代码重复使用.函数是代码封装和代码复用的体现.最简单的定义语法方式一：函数声明，必须指定函数名function函数的名字(){//功能代码}通过函数的名字调用执行,如果先多次执行,那么就多次调用:函数的名字...
2021-07-26 21:09:48
175
原创 【重学前端】CSS常用命名
头部：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink
2021-07-21 09:22:56
144
原创 【重学前端】CSS常见事项
1)ul 标签在 Mozilla 中默认是有 padding 值的，而在 IE 中只有 margin 值。 2)同一个的 class 选择符可以在一个文档中重复出现，而 id 选择符却只能出现一次；对一个标签同时使用 class和 id 进行 CSS 定义，如果定义有重复，id 选择符做的定义有效。 3)如果一组要嵌套的标签之间需要些间距的话，那就外面标签的 padding 属性，而不要去定义位于里面的标签的 margin 4)li 标签前面的图标推荐使用 background-image 而.
2021-07-21 09:19:11
47
原创 【重学前端】常用CSS样式
CSS制作三角符号<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"/> <title>标题</title> <style type="text/css"> h3{width:200px;background:#ccc;overflow:hidden;} h3 span{ width:0;height:0;overflo
2021-07-21 09:17:57
57
原创 【重学前端】CSS hack
CSS hack由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!CSS hack的原理由于不同的浏览器和浏览器各版本对CSS的支持及解析结...
2021-07-21 09:15:17
157
原创 【重学前端】CSS 图像拼合技术
图片精灵css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。主要用于网页中的小图标。如京东右侧浮动导航优势：减少http iis请求数 提升了网站性能 减少图片文件数目缺点：1.开发过程比较繁琐2.需要测量计算每一个背景单元的精确位置，进行定位3.后期新加或删除图标比较麻烦怎么使用图片精灵准备工作HTML：.
2021-07-21 09:01:02
446
1
typora.zip
2020-06-26
行政区划数据库行政区划-省市区邮编区号拼音经纬度-全面标准数据库
2018-10-23
MySQL统计时间段数据，没有该天数据则为0
2018-04-20
TA创建的收藏夹 TA关注的收藏夹
TA关注的人