SpringCloud（1）基础

一、Spring Cloud

特点

  • 约定优于配置
  • 使用各种环境
  • 隐藏组件复杂性，提供声明式、无xml配置方式
  • 开箱即用
  • 轻量级组件
  • 组件丰富，功能齐全。
  • 选型中立、丰富。
  • 灵活。组成部分解耦。

版本

已发布Angel、Brixton、Camden、Dalston、Edgware、Finchley版本（伦敦地铁名称），按照首字母顺序，是主版本。
以Release版本为初始版本，SR（Service Release）代表Bug修复版本。如Dalston SR4，表示Dalston版本的第4次Bug修复版本。

  • Dalston、Edgware都是基于Spring Boot 1.5.x构建，不兼容Spring Boot 2.0.x。
  • Finchley基于Spring Boot 2.0.x构建，不兼容Spring Boot 1.x。

A全称叫General Available，翻译过来叫”大体上可用”，Spring团队已经对其进行严格的单元测试。
SNAPSHOT是快照版，表示当前仓库的代码随时会变动。
PRE表示预览版，代码相对SNAPSHOT已经变动不大，但没有经过严格测试。
版本号后缀带有M加数字的，表示Milestone里程碑版。
带有RC加数字的，表示Release Candidate候选的正式版。
带有SR加数字的，表示Service Release即正式版。

PRE: 预览版,内部测试版. 主要是给开发人员和测试人员测试和找BUG用的，不建议使用；

SNAPSHOT：快照版，表示开发版本，随时可能修改；

M： 里程碑版本，测试版本，发布版本的前兆

RC： 候选发布版本，稳定版本，并不一定会发布

RELEASE： 发布版本，稳定版本，在项目中真正可用的版本

GA:General Availability,正式发布的版本，官方推荐使用此版本。在国外都是用GA来说明release版本的。

子项目

组件包含spring-cloud-aws、spring-cloud-bus、、spring-cloud-cli、spring-cloud-commons、spring-cloud-contract、spring-cloud-config、spring-cloud-netflix、spring-cloud-security、spring-cloud-cloudfoundry、spring-cloud-consul、spring-cloud-sleuth、spring-cloud-stream、spring-cloud-zookeeper、spring-cloud-task、spring-cloud-vault、spring-cloud-gateway、spring-boot等。

各组件问题汇总

各组件超时

各组件重试

各组件属性调优

参考资源

  • 各项目自身的Github
  • SpringCloud对应项目的Github
  • SpringCloud的StackOverflow
  • SpringCloud的Gitter

展开全文 >>

育儿有感

一、理念

孩子

  • 孩子是上天赐给你的最好的礼物。要时刻记得孩子的健康、安全，是最重要的事情。
  • 你的孩子，是生命对于自身渴望而诞生的孩子。他们借助你来到这世界，却非因你而来。他们在你身旁，却并不属于你。
  • 父母要做孩子的副驾驶。孩子必须自己掌握方向盘，按照自己内心的召唤，不断地去探索，最后走自己的路，获得价值感，实现终身成长。父母需要引导孩子独立思考，给孩子坚定的爱，由他们自己做出选择。
  • 孩子不是我们的附属品，更不是我们情绪的垃圾桶，不要以爱之名做伤害孩子的事情。他们都有自己的天性，要尊重和保护好善良的一面。
  • 孩子幸福人生的密码到底在哪？我觉得最重要的还是让孩子学会努力，学会奋斗，终身成长，来实现自我的价值感。该怎么帮他们，这是父母要做的功课。

几个要点

  • 育儿是个复杂体系，哪怕是最简单的引导。开发个庞大的系统，却是个简单体系。
  • 当孩子犯错的时候，要把他当一个孩子来看。还是个孩子，还在成长，认知水平有限，自控能力不足，请多些包容和耐心。
  • 当你批评孩子的时候，一定要把他当个成年人来看。孩子也是人，被责骂就会伤心，不被尊重就会愤怒，不被理解就有痛苦，受委屈了可能有恨。你给了孩子恨，却妄想从他身上得到爱。你给了孩子阴影，却妄想他永远积极向上。这是不可能的。
  • 教育的成功，是父母和孩子的双赢。和伴侣统一教育理念和方式，也留些时间给伴侣和自己，这很重要。
  • 当你无法做到完美的时候，不用责怪自己。但你不能忽略父母这份最重要的工作，愿意为之学习和改变。认可时候改善都不晚，活在当下，不要迷失在当下。
  • 处理矛盾，请先共情。坚持原则，但要温和。先处理情绪，再处理问题。

父母常见误区

  • 控制型父母。父母什么都无法接受，只会威胁、恐吓、惩罚，只在乎结果，想要立竿见影的解决问题。只注重纠正孩子的不良行为，能一时控制住孩子的行为。但孩子们并不知道为什么要这么做，他们无法以恰当的方式来表达情感和进行沟通。你是希望孩子出于对你的恐惧而听从你的建议，还是出于对你的爱戴和敬重而听从你的建议呢？尽可能的提供选择的机会，让孩子自己做决定。
  • 放任型父母。父母缺乏坚持。孩子缺乏约束和规矩，不懂得去尊重他人的需要，个性散漫，没有得到家庭关系的归属感，进而失去了与父母的亲密关系。
  • 轻视、低估、否定孩子的感受。会让孩子不再依靠你、指望你，导致无法建立亲密关系。要多给予理解、回应和引导。
  • 表扬和奖赏的手段，一切讲条件。用奖励来操纵孩子的表现是不持久的，孩子会缺乏内在的动力。父母不断承诺，孩子不断要求。父母可以给奖励，但不要处处带上条件，因为这不是一笔交易。要多用描述性的赞赏和鼓励，替代表扬和奖赏。描述性赞赏指的是描述已经完成的、你看到的、你的感受，并用一个词总结。特殊情况可以考虑使用精神奖励代替物质奖励。
  • 以消极后果作为惩罚。吃饭只会有饿肚子的直接后果，少穿衣服只会有冷的直接后果，而不能是“不能看电视玩玩具”之类的消极后果。让孩子因为自己会受益而合作，而不是受到威胁而合作。对孩子的错误要宽容。
  • 打屁股、暂停活动等惩罚。父母打屁股，往往没法平和的告诉孩子怎么做是对的。很多父母有种错误观念，以为打孩子能让孩子更皮实。但你打孩子没用，孩子不会不爱你，但他会不爱自己。然后变得脆弱，或者暴力。可用冷静的谈心，邀请孩子一起寻找解决方案。
  • 不切实际的期望，或者和其他孩子比。做出符合现实的期望。包容孩子，提前准备可能会出现的状况，减少自我焦虑，增加一些乐趣。

优秀父母的标准

  • 学会倾听，走进孩子的内心世界
  • 心中有爱，关注孩子的身心健康
  • 控制情绪，在气头上试着冷处理
  • 态度温和，千万别和孩子来硬的
  • 把握尺度，可以宽容但不能纵容
  • 多些夸奖，对孩子多竖起大拇指
  • 少些批评，责备孩子讲艺术和策略
  • 放下架子，跨越代沟与孩子平等交流
  • 接受现实，及时修正对孩子的期望值
  • 言传身教，帮孩子戒掉坏习惯养成好习惯

优秀父母的能力

  • 情绪稳定能力，最基础，在坏情绪面前，所有的教育方法都是扯淡。
  • 教育能力，做好榜样。家长教育能力和家长期望的差距过大，是家长痛苦的根源。
  • 欣赏能力，肯定赞美认同。要有自信，不要夸他聪明，夸细节、夸态度、夸努力。
  • 沟通能力，学会放手，抓大放小，不能吓唬、威胁，告别打骂吼催

说话技巧

  • 你的言语，会关注他的缺点，从而形成恶性循环。要多说正面的话，积极的话。
  • 你觉得孩子的缺点，是与生俱来的，还是在不经意年被你指引出来的？
  • 可以对孩子说不，单独，四不（不打不骂不说教不走开）。
情景 不要说 请说
不理你 我和你说话呢，你这个孩子怎么回事？ 我感觉你今天有心事，能不能和我说说看？看看爸爸妈妈能不能帮你
晚上不睡觉 还不回房间去，这么晚了，别玩了，听到没有？我都说了好几遍了 还有十分钟就要睡觉了，你是先刷牙还是先洗脸？
孩子顶嘴 小孩子懂什么？你怎么这么犟啊？我都是为你好 你可以说不，但我需要知道你说不的理由，才能理解你呀
孩子拖延 赶快，别磨蹭 是**的时间了，再不起床后孩子在意的结果
孩子因吃和玩具问题哭闹 大庭广众之下训斥、由着她来 1对1单独，开始不骂不打不讲道理不走开，做一件事情，说不行然后陪伴。哭完了再讲道理，要交流，要说，闹时没有用的，谁对听谁的，用自己的表现去争取要的东西
孩子想玩手机 不给玩 可以的，同意你放松一下。规定时间，提前提醒，那你的作业怎么办呢？

二、情感引导

撇开或控制自己的情绪，然后站在孩子的角度感同身受，做出反应。并通过这种方式引导孩子辨认情感，并以恰当的方式来表达。进而认识情感、人际关系、社会行为和所在的世界。

情感引导的作用

  • 可以帮助孩子认识、表达和调节自己的情绪
  • 提高孩子的语言表达能力
  • 减少发脾气的现象
  • 促进家长和孩子的沟通，加深感情
  • 孩子学会结交新朋友
  • 学会忍耐，学会面对逆境
  • 让孩子学会尊重别人的情感

情感引导步骤

  • 播下种子，让孩子提前知道你对他要求是什么。
  • 观察和判断孩子的行为，清楚他们的需求。
  • 聆听孩子的需求，理解并回应孩子的感受。
  • 引导孩子解决问题。不用直接帮他们解决，引导孩子学会怎么做。

情感引导的原则

  • 情感引导的关键在于你和孩子之间的亲密程度
  • 不要让你的情绪左右了和孩子的沟通
  • 如果你连自己的情绪都控制不了，怎能要求你的孩子听话
  • 无条件的爱，不是溺爱，而是任何时候都愿意理解、倾听、帮助孩子成长，要讲原则。无论他一岁、五岁、十岁还是二十岁
1
2
3
4
5
6
7
什么是无条件的爱？
1. 当孩子说了脏话，你没有骂他，而是告诉孩子，如果表达自己很生气，可以直接说出来
2. 当孩子考了很低的分数，你没有失望，而是关心孩子失不失落，并鼓励他把没有学会的学会
3. 当孩子在众人面前犯错，你不会责怪他丢人，而是接纳犯错的他，然后告诉他要努力改正
4. 当孩子撒谎，你没有羞辱他，而是让孩子知道犯错不可怕，比撒谎更好的解决方法，是勇敢承担责任
5. 当孩子失败了，你没有数落他没用，而是陪着他不轻易放弃，知道再次做成它
6. 是尽管孩子看起来有点胆小、懦弱、自私...你也不给他们贴上标签，允许孩子的不完美，并引导帮助他

不同时期亲密关系

  • 0-1岁，生理、安全感。孩子哭的时候要拥抱和安抚，多陪伴和满足，开始种下亲密基因。1岁的哭是真哭，3岁后的哭是有目的的。
  • 1-3岁，情感。不听话是听不懂，所以3岁前不要讲道理。无意识专注，只对新奇特感兴趣。3岁孩子打人，不是学坏了，是想表达他的情绪，当家长气急败坏时，会模仿，并家长很好玩。学会设定限度，温柔但有边界。
  • 3-6岁，性格。就是立规矩，克制任性（3岁，学会说不），自律（4岁），吃苦（5岁），克制诱惑和冲动（6岁）。三岁之前慈母，三岁之后严母，恩威并施。
  • 6-12岁，习惯、能力培养。

常见问题

  • 好奇心重、固执且意志坚强、探索欲旺盛、爱说不、衣服弄脏，是正常的，不必执念。
  • 发脾气，是本能。想要实现全部的愿望，但是生理和情感的发育超过了沟通能力，而非常生气，但不会表达。有表达不满和寻求关注这两种情况，表达不满需要关注鼓励，寻求关注要适当的不予理睬，但父母千万不要针锋相对、火上浇油。如果在公共场合发脾气，不要当众管教，私下沟通。
  • 爱哭鼻子，哭有积极的作用，不必把他当做软弱和控制力弱的体现。当孩子很难过时，不要指望他们勇敢，要让他们勇敢表达。
  • 咬人/打人，立即制止/管教。鼓励他们用语言和跺脚表达愤怒，但不能打人。如果语言解决不了问题，找父母寻求帮助，问他下一次会怎么做，并告诉孩子会帮助他。为了防止孩子打别人，首先要杜绝的是孩子打你。
  • 在外乱跑，提前提醒，对危险有正确的认识，指导和沟通。玩“停止”游戏，找个专门时间让孩子释放能量。
  • 不会分享，这不是一个严重的毛病。转移注意力，做榜样让孩子习惯分享，感受分享的乐趣。
  • 没有礼貌，理解孩子的感受，确认孩子的想法，引导进行思考，邀请孩子合作来解决问题
  • 吵闹。聆听（找出是兴奋还是愤怒的原因）、理解、提供帮助。
  • 害羞，不能不以为意，也不要施加太大压力
  • 说谎，反省孩子说了真话后你是否反应过度，从而导致孩子害怕。当孩子把真相告诉你后，要给予欣赏和鼓励。
  • 胆小自卑，不能否定、轻视他们的恐惧。要给予耐心、支持和鼓励，多社交
  • 抱怨，让孩子知道光抱怨没有用，让孩子用正常的语调说话，引导他该如何正确看待和表达。
  • 不爱吃法/挑食，饥饿疗法，不必担心他们的营养摄入，可以一口尝试，不用强迫。尽量少的提供甜食。让孩子自己决定吃多少。
  • 我要我要，这是孩子的权利，父母可以拒绝，不纵容，但需要解释。可采用延迟满足，放到后面某个时机。比如玩具不轻易买，下次再买。
  • 乱扔玩具和物品，天生的。请孩子当小帮手，给所有物品固定位置。
  • 磨蹭。晚上睡觉，早上起床，回家作业。生活上的磨蹭不能惯着，学习上的磨蹭需要鼓励。协助制定计划，有时间观念。
  • 爱看电视和玩手机。家长自己的手机先收起来。适当安排，提前约定好时间，不要戛然而止。

三、德智体

  • 德，品质。
  • 智，素质。
  • 体，体质。

品质

  • 学会沟通，哭闹吼叫和暴力是没用的，有话要好好说
  • 练就意志，行知、吃苦。不断体验真实生活
  • 学会分享，感恩。不能自我中心，食物分享，家务分享
  • 克制冲动、抵制诱惑、感受痛苦（饥饿），经历挫折
  • 自信与表达，有见识，不必学霸，不能说不得
  • 诚实，言而有信
  • 耐心和专注力，坚持阅读和输出
  • 上进心，求知欲，专注度
  • 努力，少表扬他们的聪明，多表扬他们的努力

素质

  • 教育的关键是通过一定的方法，可重复实现不同人素质的提高。人的很多素质是不能简单地通过教育提高。教育的德、智、体应当是品质、素质和体质。
  • 人的素质有三个能力一个基础，其中能力包括洞察力（耳聪目明）、分析力（睿智）、执行力（努力），基础则为信息面（知识和情报）。知识分为学识（需要学习）和见识（需要经历）。情报分为公开（搜索）和私密（人脉）
  • 对于学识、分析力，可以用考试来衡量。对于其他，需要通过测评来体现。所以这也是素质教育和应试教育的区别在于“识”和“习”。“识”是你知道的，“习”是你能够使用的！
  • 素质教育的背后是拼爹。好老师、素质教育，是通过金钱堆砌起来的。但最贵的，不是补课费，而是孩子的时间。时间利用效率很重要，孩子拼的是时间管理。
  • 学习习惯、学习态度、学习方法、学习能力、学习兴趣、学习成绩等要素的培养顺序

体质

  • 坚持户外运动，长跑、游泳
  • 保护孩子兴趣

用过的东西放回原处，这叫习惯
不可以打断别人说话，这叫尊重
不可以说脏话，这叫素质
遇到长辈要先打招呼，这叫礼仪
至少要有一样爱好，这叫健康
食物不能浪费，这叫节俭
主动为自己的过失和错误买单，这叫担当
别人的东西不能拿，这叫教养

四大神器

  • RAZ，3岁开始，分级
  • 海淀小红书，中华古诗文诵读，6岁
  • 高思导引，3年级，奥数
  • 倾听者，音频播放器

四、亲子游戏

  • 有游戏精神的父母，孩子最喜欢。送孩子一堆玩具不如陪他一起玩耍
  • 家庭是孩子游戏的舞台，游戏是孩子的学习形式
  • 亲子关系是所有人际关系的基石，游戏需要保持有效的亲子沟通
  • 游戏是培养孩子情商的最佳手段

七个能力+三心二意

  • 角色认知游戏，培养孩子的自我认知能力。比如角色扮演，如导游、邮递员、老师
  • 我能行游戏，培养孩子的自我激励能力。比如设定挫折后的激励
  • 分配任务游戏，培养孩子的独立能力。比如当一天的值班家长，负责打扫卫生、一日三餐、日程安排
  • 抵制诱惑游戏，培养孩子的自控能力。比如糖果游戏
  • 跌倒爬起游戏，培养孩子的抗挫折能力。比如面对失败、输赢
  • 一起做游戏，培养孩子的团队合作能力。比如蒙眼牵手走路
  • 小主人与小客人游戏，培养孩子的沟通与交际能力。比如扮演小朋友来家里玩
  • 我是最棒的游戏，培养孩子的自信心。比如个人兴趣的引导和坚持
  • 亲善大使游戏，培养孩子的爱心。比如养宠物、植物。
  • 站好最后一班岗游戏，培养孩子的责任心。比如多交给孩子一些家庭事务
  • 过节游戏，培养孩子的感恩意识。比如生日会，节日会
  • 给猫画鼻子游戏，培养孩子的诚信意识。比如蒙眼转圈画鼻子，不能作弊，避免破坏游戏规则

五、摘录

  • 你不必生来勇敢、天赋过人，只要能投入勤奋、诚诚恳恳。
  • 跟孩子讲道理，要讲他能理解的道理。
  • 脾气暴躁的父母，也会有脾气暴躁的孩子。很可能他会变得自卑，畏畏缩缩，害怕与人交流，没有了孩子的灵气。
  • 什么是刻意感动？与真心相反，是有目的性的，虚伪的；孩子天生对虚伪是排斥的。比如“我打你，是为了你好。”
  • 你凭什么替孩子选择平庸？现在流行快乐教育，但人类的追求就只有快乐吗？追求卓越是人类更高的追求。
  • “天才是百分之一的灵感，百分之九十九的汗水。”爱迪生的这句名言广泛流传。这句话后面还有半句：“但那1％的灵感是最重要的，甚至比那99％的汗水都要重要。”不过，我要说的是没有那99％的汗水，多出来的1％灵感是看不到的，如果能付出99％的汗水，你就已经超过了99％人。所以孩子你必须努力，即使你不是改变世界的那不到1％的天才，但当你努力到位了，也能超过99％成为英才。
  • 孩子很小时学会了两件事情，一个是底线测试，另外一个是期望值管理。他会不断地测试你对他的底线，从而让你不断地降低对他的底线。同时他还会管理你对他的期望，通过谈判得到他的利益。
  • 培养孩子，假手于人或者寄希望于孩子自己成长，无异于是痴人说梦
  • 孩子想要玩《植物大战僵尸》，想要看秘籍不？想看就要自己想办法认字！引导他去认识各种植物。
  • 求知欲的培养，看纪录片
  • 对奥数，孩子越小学习越好，4岁就可以学习了，就算孩子以后不是学习奥数的料，也能提前训练逻辑能力，这比长大了上数学补习班好多了。
  • 我们的孩子是动物园、古脊椎博物馆、自然博物馆的常客，我们还带着孩子夜宿了国家动物博物馆
  • 我从小教育孩子要追求卓越！让孩子追求快乐，是否能够保障孩子一辈子无忧？快乐经常是暂时的，取得卓越的成就，快乐才是长久的。
  • 学习的强度与孩子是否反感有关，孩子自愿是第一位。
  • 政治正确和事实正确是有差距的，我们听到的往往是政治正确的声音，而我们要做的是，为了自己和孩子要做事实正确的事情。
  • 我们家就是一个小孩一个iPad，不像一些家长被“鸡汤”说的，孩子一动电脑就跟他要吸毒一样，而且女儿的学习效率比同龄的孩子高了不少。当今新时代离不开电脑，为何不让孩子早一点地接触和学习呢？

展开全文 >>

Vue基础

一、概念

基础概念

  • 单页面应用（Single Page Application，SPA），资源是动态加载到页面，不需要服务器控制页面跳转
  • 响应式设计（Responsive web design，RWD），不同设备分辨率自适应。
  • 数据导向，区别于页面导向，通过后台REST服务获取JSON，而不是通过服务器渲染动态页面来实现。
  • 数据链，连通数据的链路，修改元数据的值来触发一系列数据的更新。
  • 函数式编程（Functional Programming），是一种结构化的编程方式，核心是根据元数据生成新的衍生数据，可通过lambda表达式。Vue中通过computed计算属性选项，以生成衍生数据对象。

MVVM（Model-View-ViewModel）

从MVC过度到MVVM，使用ViewModel替代Controller，分离View和Model，它们之间的松散耦合，通过数据绑定起到两者的桥梁作用。常见的有Vue、React、和angular。

  • View，视图层负责展示视图
  • ViewModel，一方面响应用户事件并向模型层发送请求，另一方面将模型层返回的数据通过数据绑定在视图中展现
  • Model，模型层负责处理交互请示并返回响应的数据

Vue

简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

  • 虚拟DOM，DOM操作成本很高，在渲染流程中采用虚拟DOM性能更好。
  • 双向数据绑定，解耦视图与数据。由于实现原理使用的Object.defineProperty是ES5中一个无法shim（自定义扩展）的特性，因此无法在IE8及以下使用。
  • 轻量级
  • 可复用的组件
  • 前端路由

Vue Devtools

一个拓展程序，用于在浏览器查看Vue组件和Vuex数据。

源码编译方法如下。

1
2
3
4
5
6
7
8
$ npm install yarn -g # 安装yarn
$ yarn -V

$ git clone https://www.github.com/vuejs/devtools.git
$ cd devtools
$ yarn install
$ yarn run build
# chrome开发者模式，加载已解压的拓展程序

双向数据绑定原理

  • 核心是采用数据劫持结合发布者订阅者模式，通过Object.defineProperty()对每个属性的get和set进行拦截。在数据发生变化的时候发布消息给订阅者，触发相应的监听回调。
  • 使用Object,defineProperty()就能完成一个简单的双向绑定，但是效率比较低。
  • 观察者模式让双向绑定更有效率，它是一对多的模式，一指的是修改的一处数据，凡是用了这个数据的地方都更新。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <p id="name1"></p>
  <input id="name2" type="text">
  <script>
    let name1=document.getElementById("name1");
    let name2=document.getElementById("name2");
    let key ='profile';
    let store ={};
    let obj={
      profile:''
    }
    //对象属性配置表，包含configurable，enumerable，writable，value，set，get等。可以通过defineProperty进行配置
    console.log(Object.getOwnPropertyDescriptor(obj,'profile'))

    // Object.defineProperty是ES5中一个无法被shim的特性，所以Vue无法运行在IE8及以下版本浏览器上
    Object.defineProperty(obj,key,{
      set(value){
        name1.innerText=value;
        store[key]=value;
      },
      get(){
        return store[key]
      }
    })
    name2.addEventListener('keyup',function (){
      obj[key]=this.value;
      console.log(obj[key])
    })
  </script>
</body>
</html>

二、Vue语法

插值绑定

  • 文本绑定，使用双大括号（Mustache语法）绑定变量、值或表达式
  • HTML插值，使用v-html指令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>文本插值</title>
  <!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
<div id="app">
  <!--数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。
  Mustache 标签将会被替代为对应数据对象上property的值。
  无论何时，绑定的数据对象上property发生了改变，插值处的内容都会更新。-->
  <p>{{message}}</p>
  <!--v-once 指令，能执行一次性地插值，当数据改变时，插值处的内容不会更新-->
  <p v-once>{{message}}</p>
  <p>{{date}}</p>
  <!--双大括号会将数据解释为普通文本，而非 HTML 代码-->
  <p>{{rawHtml}}</p>
  <!--使用 v-html 指令输出真正的 HTML-->
  <p v-html="rawHtml"></p>
  <!--js表达式-->
  <p>{{message.split('').reverse().join('')}}</p>
</div>

<script type="text/javascript">
  var data = {
    message: 'hello vue',
    date: '对象：' + new Date().toLocaleString(),
    rawHtml: '<span style="color: red">red</span>'
  }

  // freeze会阻止修改现有的property，也意味着响应系统无法再追踪变化
  Object.freeze(data)

  // 将创建的Vue应用挂载到一个DOM元素上（#app）
  var app = new Vue({
    el: '#app',
    //对象写法，同时写会被覆盖
    data: data,
    //函数写法，同时写会被覆盖
    data: function () {
      return {
        message: 'hello vue',
        date: '函数：' + this.getTime(),
        rawHtml: '<span style="color: red">red</span>'
      }
    },
    // es6写法，同时写会被覆盖
    data() {
      return {
        message: 'hello vue',
        date: 'ES6：' + this.getTime(),
        rawHtml: '<span style="color: red">red</span>'
      }
    },
    methods: {
      getTime() {
        return new Date().toLocaleString()
      }
    }
  })
  // app是上方创建的vue对象名，可更改。
  // get
  console.log(app.message)
  // set，当使用data函数时可以实时改变DOM。如果使用data对象，会由于freeze方法导致失效
  app.message = 'hello vue2'

  //$代表是vue实例本身的方法
  console.log(app.$data) //数据对象
  console.log(app.$el) //挂载元素
</script>

<!-- 数据和DOM都是响应式的。在chrome里的console，get和set数据，DOM会实时响应
 > app.message
 "hello vue"
 > app.message='hello herr'
 "hello herr"-->

</body>
</html>

属性绑定

  • v-bind指令，将元素的某个属性和vue实例的某个属性绑定。支持属性、类名和样式等绑定，可省略不写，只保留冒号。
  • 类名和样式绑定， 比较特殊，除了字符串，还可以通过数组和对象的方式，来为节点动态绑定类名属性。
  • 加冒号的，说明值是一个变量或者表达式，没加冒号的后面就是对应的字符串字面量。
  • Vue中父组件通过prop传值给子组件时，只有传递字符串常量时，不采用v-bind形式，其余情况(Number类型，Boolean类型，数组，对象等）均采用v-bind形式传递。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>操作Class和Style</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<!--操作元素的 class 列表和内联样式，可以用 v-bind 处理它们，只需要通过表达式计算出字符串结果即可。
不过，字符串拼接麻烦且易错。因此做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。-->
<body>
<div id="app">
  <!--类名绑定，可以使用字符串、对象和数组三种方式-->
  <!--字符串方式-->
  <p class="bigSize" v-bind:class="classStr">{{message}}</p>
  <!--对象方式。将类名作为对象键名，当键值判定js为真，类名被绑定到节点上-->
  <p class="bigSize" v-bind:class="{red:isRed,bold:isBold}">{{message}}</p>
  <!--数组方式，以应用一个 class 列表-->
  <p v-bind:class="[isRed?'red':'',isBold?'bold':'']">{{message}}</p>

  <!--样式绑定，样式必须是键值对的形式-->
  <!--使用对象语法绑定内联样式-->
  <p v-bind:style="{color:redColor,fontSize:size}">{{message}}</p>
  <!--直接绑定到一个样式对象-->
  <p v-bind:style="styleObject">{{message}}</p>
  <!--数组语法可以将多个样式对象应用到同一个元素-->
  <p v-bind:style="[styleObject, boldStyleObject]">{{message}}</p>
</div>

<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    data:{
      message: 'hello',
      isRed: true,
      isBold: true,
      classStr:'red bold',
      redColor:'red',
      size:'20px',
      styleObject: {
        color: 'red',
        // 可以用驼峰式 (camelCase)
        fontSize: '20px',
        // 当短横线分隔，记得用引号
        // 'font-size':'20px'
      },
      boldStyleObject: {
        fontWeight:700
      }

    }
  })
</script>

<style>
  .bigSize{
    font-size: 20px;
  }
  .red{
    color: red;
  }
  .bold{
    font-weight: 700;
  }

</style>
</body>
</html>

事件绑定

  • v-on指令，将事件代码绑定到DOM节点上。可简写成@形式。
  • 修饰符，可按顺序叠加
  • 点击事件@click。键盘事件@keyup，@keydown。鼠标事件@mouseup，@mousedown。
  • 事件有捕获阶段和冒泡阶段，捕获阶段由外向内触发（window->document->body->div->a），冒泡阶段由内向外触发（a->div->body->document->window）
名称 说明
.stop 事件触发时，阻止事件冒泡
.prevent 事件触发时，阻止元素默认行为
.capture 添加事件侦听器时使用事件捕获模式，会在捕获时直接触发。会比冒泡优先执行。
.once 事件触发一次后解除监听
.self 限制事件仅作用于节点自身时触发，冒泡到该元素时不会触发，2.1.4以上
.passive 移动端，限制事件永不调用preventDefault方法，2.3.0以上。一般用在滚动监听@scoll，@touchmove等，让内核线程跳过判断，提高流畅度
  • 按键修饰符，允许将按键键值作为修饰符来使用。
名称 说明
.delete/tab/enter/esc/left/right/up/down 删除/制表/回车/退出/左/右/上/下，配合键盘事件使用。
.left/right/middle 左键/右键/中键，配合鼠标事件使用，2.2.0以上
.ctrl/alt/shift/meta ctrl键/alt键/Shift键/meta键，配合点击事件使用，2.1.0以上 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>事件绑定修饰符</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
<div id="app">
  <!--未指定form表单的action，会提交到当前url，页面会被重新加载，console清空-->
  <form @submit="handleSubmit">
    <h2>不使用修饰符</h2>
    <button type="submit">提交</button>
  </form>

  <!--添加prevent修饰符后，会阻止form的提交事件-->
  <form @submit.prevent="handleSubmit">
    <h2>使用修饰符</h2>
    <button type="submit">提交</button>
  </form>

  <!--事件函数不必传参时，不能带()。也可手动传入$event对象-->
  <p><input type="text" @keyup.enter="enterKeyup" @keyup.esc="escKeyup($event)" @keyup.left="leftKeyup" @keyup.up="upKeyup" @mousedown.right="rightMousedown"></p>

  <h1 @click.ctrl="ctrlClick" @click="notCtrlClick">按住ctrl再点我</h1>

  <button onClick="console.log('button clicked')">DOM原生事件，正常</button>
  <button @click="btnClick">在methods中定义方法，正常</button>
  <!--以下写法会报错，Vue默认会解析为this.console.log，导致会去当前实例化vue的methods中找console方法-->
  <button @click="console.log('button clicked')">直接console.log，报错</button>

    <div @click="log(1)">
    <div @click.stop="log(2)">
      <div @click="log(3)" style="background-color: gray">
        <a href="javascript:console.log('x')">嵌套点击，事件2使用了stop，触发后会阻止冒泡，最后才会执行a默认href事件。如点击a标签，会依次打印3、2、x。如点击div标签，会依次打印3、2。</a>
      </div>
    </div>
  </div>
  
  <div @click="log(1)">
    <div @click="log(2)">
      <div @click="log(3)" style="background-color: gray">
        <a @click.prevent="log(4)" href="javascript:console.log('x')">嵌套点击，prevent阻止了a标签默认href事件。如点击a标签，会依次打印4、3、2、1。如点击div标签，会依次打印3、2、1。</a>
      </div>
    </div>
  </div>

  <div @click="log(1)">
    <div @click.capture="log(2)">
      <div @click="log(3)" style="background-color: gray">
        <a @click="log(4)" href="javascript:console.log('x')">嵌套点击，事件2使用了capture，优先捕获执行。如点击a标签，会依次打印2、4、3、1、x。如点击div标签，会依次打印2、3、1。</a>
      </div>
    </div>
  </div>

  <div @click="log(1)">
    <div @click="log(2)">
      <div @click.self="log(3)" style="background-color: gray">
        <a @click="log(4)" href="javascript:console.log('x')">嵌套点击，事件3使用了self，只有当事件是从元素本身点击时才触发。如点击a标签，事件3不是本身触发，不会执行，会依次打印4、2、1、x。如点击div标签，会依次打印3、2、1。</a>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    data:{
      times:0
    },
    methods: {
      handleSubmit() {
        //`${ }`是模版字符串
        console.log(`submit ${++this.times} times`)
      },
      enterKeyup(event){
        console.log(event)
      },
      escKeyup(event){
        console.log(event)
      },
      leftKeyup(event){
        console.log(event)
      },
      upKeyup(event){
        console.log(event)
      },
      rightMousedown(event){
        console.log(event)
      },
      ctrlClick(event){
        console.log(event)
      },
      notCtrlClick(event){
        if (event.ctrlKey){
          console.log(event)
        }
      },
      btnClick(){
        console.log('button clicked')
      }
    }
  })
</script>

</body>
</html>

双向绑定

  • v-model指令，为可输入元素创建双向数据绑定，根据元素类型自动更新元素。
  • v-model和v-show是Vue内置，开发者无法自定义的指令。
  • v-model修饰符，为其后缀以丰富用户输入的行为。
名称 说明
.lazy 将用户输入的数组赋值于变量的时机由输入时延迟到数据改变时
.number 自动转换用户输入为数值类型
.trim 自动过滤用户输入的首尾空白字符

条件渲染和列表渲染

  • v-if,v-elseif,v-else
  • v-show,切换元素的display属性
  • v-for,可以实现数组或对象键值对的列表渲染，数组使用index，键值对使用key。

当使用push、pop、shift、unshift、sort、reverse等方法时，视图会同步更新。如直接使用下标/键名为数组/对象设置成员时，不会将其加入数据响应式系统。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>指令</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<!-- 指令 (Directives) 是带有 v- 前缀的特殊 attribute。
  指令 attribute 的值预期是单个 JavaScript 表达式-->
<body>
	<div id="app">

    <!--绑定元素属性-->
		<p v-bind:title="alert">鼠标悬停几秒钟查看此处动态绑定的提示信息！</p>
    <!--v-bind 缩写-->
		<p :title="alert">鼠标悬停几秒钟查看此处动态绑定的提示信息！</p>
    <!--2.6.0新增的动态参数-->
    <p v-bind:[attr]="attrVal" v-on:[event]="eventVal">动态参数</p>

    <!--条件，if如果是false，不会渲染在dom中-->
		<p v-if="seen">用v-if看到你了</p>

    <!--条件，和if的区别是无论如何都会渲染在dom中，使用display来切换-->
    <h1 v-show="seen">用v-show看到你了</h1>

    <!--多个元素，可以把一个template元素当做不可见的包裹元素-->
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else-if="loginType === 'mobile'">
      <label>Mobile</label>
      <!--相同key值用来复用，当username输入后，app.loginType='mobile'切换后，输入内容不会丢失。-->
      <input placeholder="Enter your mobile" key="username-input">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input">
    </template>

    <!--循环-->
		<div>
			<ol>
        <!--index可选，key用于复用dom节点，不指定不影响功能，但会有警告-->
				<li v-for="(todo,index) in todos" :key="todo.id">{{todo.text}} , index:{{index}}</li>
        <!--也可以使用of作为分隔符-->
        <li v-for="todo of todos">{{todo.text}}</li>
			</ol>

      <ul>
        <!--也可以用 v-for 来遍历一个对象的 property，后两个参数可选-->
          <li v-for="(value,name,index) in object">
            {{name}}:{{ value }}
          </li>
      </ul>
		</div>

    <!--表单输入和应用状态之间的双向绑定-->
		<input type="text" v-model="message">

    <select multiple v-model="multiSelect">
      <option value=1>选项1</option>
      <option value=2>选项2</option>
      <option value=3>选项3</option>
    </select>

    <!--事件监听，v-on缩写-->
    <p>{{message}}<button v-on:click="reversemessage">反转消息1</button><button @click="reversemessage">反转消息2</button></p>

    <!--双向绑定的等价写法，需要属性绑定+事件监听-->
		<input type="text" v-bind:value="message2" v-on:input="message2=$event.target.value">

	</div>

	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
      data:{
        message: 'hello vue',
        message2: 'hello vue2',
        alert: '时间：' + new Date().toLocaleString(),
        seen: false,
        loginType:'username',
        todos: [{id:1, text: '学习 JavaScript' }, { id:2,text: '学习 css' }, { id:3,text: '学习 html' }],
        attr:'style',
        attrVal:'color:red',
        event:'click',
        eventVal:'alert("click")',
        object:{
          id:1,
          text: '学习 JavaScript'
        },
        multiSelect:[1,3]
      },
			methods: {
				reversemessage: function () {
					this.message = this.message.split('').reverse().join('')
				}
			}
		})
	</script>

</body>
</html>

生命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>生命周期</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
<div id="app">
  <p>{{title}}</p>
  <button @click="update">update</button>
  <button @click="destroy">destroy</button>
</div>

<script type="text/javascript">

  var app = new Vue({
    el: '#app',
    data() {
      return {
        title: 'hello data'
      }
    },
    methods: {
      hello() {
        console.log('hello method')
      },
      update(){
        this.title='update data'
      },
      destroy(){
        this.$destroy()
      }
    },
    // 生命周期钩子的 this 上下文指向调用它的 Vue 实例
    beforeCreate(){
      console.log("...beforeCreate...")
      console.log(this.$el)  //undefined
      console.log(this.$data) //undefined
      this.hello() // TypeError: this.hello is not a function
    },
    created(){
      console.log("...created...")
      console.log(this.$el)  //undefined
      console.log(this.$data) //title: "hello data"
      this.hello() // 后续都可调用
    },
    beforeMount(){
      console.log("...beforeMount...")
      console.log(this.$el)//还未渲染数据，如下
      /*<div id="app">
        <p>{{title}}</p>
        <button @click="update">update</button>
        <button @click="destroy">destroy</button>
      </div>*/
      console.log(this.$data)
    },
    mounted(){
      console.log("...mounted...")
      console.log(this.$el)// 已加载
      /*<div id="app"><p>hello data</p> <button>update</button> <button>destroy</button></div>*/
      console.log(this.$data) //title: "hello data"
    },
    beforeUpdate(){ //点击update按钮触发
      console.log("...beforeUpdate...")
      console.log(this.$el) // el还未update
      /*<div id="app"><p>hello data</p> <button>update</button> <button>destroy</button></div>*/
      console.log(this.$data) // data已更新，title: "update data"
    },
    updated(){
      console.log("...updated...")
      console.log(this.$el) // el已更新
      // /*<div id="app"><p>update data</p> <button>update</button> <button>destroy</button></div>*/
      console.log(this.$data) // data已更新，title: "update data"
    },
    beforeDestroy(){ //点击destroy按钮触发
      console.log("...beforeDestroy...")
      console.log(this.$el)
      console.log(this.$data)
    },
    destroyed(){
      console.log("...destroyed...")
      console.log(this.$el)
      console.log(this.$data)
    }
  })
</script>

</body>
</html>

三、Vue选项

数据和方法

  • 数据(data)

data可接受的类型有对象和函数两种，定义组件时只能使用函数类型。

  • 属性(props)

props可以为组件注册动态特性，props选项可以是数组或者对象类型，用于接受从父组件传递过来的参数。可使用类型检测type、默认值default、校验规则required、validator等。

  • 方法(methods)

methods中的方法将被绑定到Vue实例上，因此方法中的this会自动指向Vue实例。如使用箭头函数，this将会指向浏览器内置对象windows，因此不要用箭头函数在其中定义方法。

  • 计算属性(computed)

当数据链上出现复杂衍生数据时，可以使用computed减轻模板上的业务负担。computed依赖于响应式属性，因此当且仅当响应式属性变化时，computed才会重新计算。computed和methods一样，不能通过箭头函数声明，也会被混入Vue实例，可以通过this调用。

  • 侦听属性(watch)

watch属性更注重于处理数据变化时的业务逻辑，相比computed，还可以异步修改数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>计算属性和侦听属性</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
<div id="app">
  <p>Original message: "{{message}}"</p>
  <p>Reversed message: "{{message.split('').reverse().join('')}}"</p>
  <p>Computed Reversed message: "{{ reversedMessage }}"</p>
  <p>Method Reversed message: "{{ reversedMessage2() }}"</p>
  <p>First name:{{firstName}}</p>
  <p>Last name:{{lastName}}</p>
  <p>Full name:{{fullName}}</p>
</div>

<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    data:{
      message: 'hello',
      firstName: 'Foo',
      lastName: 'Bar',
    },
    // 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时（message值变化）才会重新求值。
    // 计算属性以函数形式声明，但不接受参数只能以属性的方式调用。this指向vue实例，因此可以获取vue实例的可见属性
    computed: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('')
      },
      fullName: {
        // computed默认只有getter，没有setter。
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // 可自行指定setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    },
    // 侦听器，需要在数据变化时执行异步或开销较大的操作时使用
    watch:{
      // 如果 `message` 发生改变，这个函数就会运行
      message: function (newVal,oldVal){
        alert("new value:"+newVal + " ,old value:"+oldVal)
      }
    },
    // 每当触发重新渲染时，调用方法将总会再次执行函数。如果你不希望有缓存，请用方法来替代，但会造成大量性能开销
    methods: {
      reversedMessage2: function () {
        return this.message.split('').reverse().join('')
      }
    }
  })
</script>

</body>
</html>

DOM渲染

  • 指定被挂在元素(el)

el选项用于指定Vue实例的挂载目标，属性值仅限于CSS选择器或者DOM节点对象。当然也可以使用Vue实例的mount方法手动挂载。

  • 视图的字符串模板(template)

Vue允许使用字符串作为实例的模板，模板字符串由template选项接收。

  • 渲染函数(render)

render函数用于渲染视图，提供了回调方法createElement以供创建DOM节点。render创建的不是真实的DOM节点，而是虚拟节点（Virtual Node，VNode）。Vue通过VNode在页面中渲染出真实的DOM。

DOM渲染时，el、template和render三个选项的功能是一致的，都是获取实例模板。他们优先级是，render > template > el。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>DOM渲染</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
<div id="app1">
  <p> el方式，使用css选择器：{{msg}}</p>
</div>
<div id="app2">
  <p>el方式，使用DOM节点：{{msg}}</p>
</div>
<div id="app3">
  <p>$mount方法，点击下方按钮手动挂载：{{msg}}</p>
</div>
<button onclick="handleMount()">手动挂载</button>
<div id="app4">template方式</div>
<div id="app5">render方式</div>

<script type="text/javascript">

  // 将创建的Vue应用挂载到一个选择器上（#app1）
  let vm1 = new Vue({
    el: '#app1',
    data() {
      return {
        msg: 'hello app1'
      }
    }
  })

  // 将创建的Vue应用挂载到一个DOM节点上
  let vm2 = new Vue({
    el: document.getElementById("app2"),
    data() {
      return {
        msg: 'hello app2'
      }
    }
  })

  // 不使用el挂载，点击按钮手动挂载
  let vm3 = new Vue({
    // el: document.getElementById("app3"),
    data() {
      return {
        msg: 'hello app3'
      }
    }
  })

  let handleMount= function () {
    vm3.$mount('#app3')
  }

  let vm4 = new Vue({
    el: '#app4',
    template:'<h1>template: {{msg}}</h1>', // 模板节点将替换原有DOM节点
    data() {
      return {
        msg: 'hello app4'
      }
    }
  })

  let vm5 = new Vue({
    el: '#app5',
    //使用render创建虚拟节点（Virtual Node，VNode）。虚拟节点组成的树形结构即“虚拟DOM”，VUe通过虚拟DOM在页面中渲染出真实的DOM
    render(createElement){
      /*createElement可接收3个参数。
      1、html标签字符串/组件选项对象/节点解析函数
      2、定义节点特性的对象
      3、子节点，可使用createElement构建*/
      return createElement('h1','render: ' + this.msg)
    },
    data() {
      return {
        msg: 'hello app5'
      }
    }
  })
</script>

</body>
</html>

封装复用

  • 过滤器(filter)

用于在双括号插值中的JS表达式尾部添加管道符号”|”，表达式的值将作为参数传入filter。当有多个filter时从左向右执行。

  • 自定义指令

Vue提供一些钩子函数，通过directives选项进行自定义。自定义指令提供了几个钩子函数：

1、bind，指令与元素绑定时调用
2、inserted，指令绑定的元素被挂载到父元素上时调用
3、update，指令所在VNode更新时调用
4、componentUpdated，指令所在VNode和子VNode全部更新后调用
5、unbind，指令与元素解绑时调用

钩子函数会被传入以下参数：

1、el，指令绑定元素，可用于操作DOM
2、binding，包含指令相关属性的对象。

binding包含以下属性：

1、name，指令名称
2、value，指令绑定的值
3、oldValue，指令值改变前的值
4、arg，传给指令的参数
5、modifiers，修饰符对象
6、vnode，虚拟节点
7、oldNode，虚拟节点更新前的值

  • 组件的注册(components)

components用于为组件注册从外部引入的组件。

  • 混入(mixins)

默认策略为，data优先采用组件的数据，钩子函数全部调用且先调用mixin的钩子函数，methods、components等优先采用组件的键值对，watch全部调用且优先mixin的watch方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>封装复用</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
<div id="app">
  <p>{{title}}</p>
  <p>{{title | supplyFilter1}}</p>
  <p>{{title | supplyFilter1 | supplyFilter2}}</p>
  <p v-some.upper>{{ title }}</p>
  <p v-some.lower>{{ title }}</p>
  <p v-a="test">{{ title }}</p>
  <p v-b="test">{{ title }}</p>
  <button @click="change">点击改变a的值</button>
  <component1></component1>
  <component2></component2>
</div>

<script type="text/javascript">
  let mixin ={
    data(){
      return {
        test:'b'
      }
    },
    methods:{
      change(){
        this.test='c'
      }
    },
    mounted(){
      console.log('mixin mounted')
    }
  }
  
  // 全局注册过滤器
  Vue.filter('supplyFilter2',value=>{
    console.log('Supply Filter2')
    return value.replace(/%/g,' ')
  })

  // 全局注册自定义指令a
  Vue.directive('a',function (el,binding){
    let v = binding.value
    el.innerText = v
  })

  // 全局注册组件
  Vue.component('component1', {
    template:'<h1>自定义组件1</h1>'
  })

  let component2={
    name:'component2',
    template:'<h1>自定义组件2</h1>'
  }

  let vm = new Vue({
    el: '#app',
    mixins:[mixin],
    components:{ component2 },
    //data优先采用
    data() {
      return {
        title: 'Test#%For#%Filter',
        test:'a'
      }
    },
    //methods优先采用
    methods:{
      change(){
        this.test='d'
      }
    },
    //钩子函数全部采用，但先调用mixin的钩子函数
    mounted(){
      console.log('instance mounted')
    },
    //filters选项用于定义可用的过滤器，在插值中添加在js表达式的尾部，以管道符号'|'与表达式隔开
    filters:{
      supplyFilter1(value){
        console.log('Supply Filter1')
        return value.replace(/#/g,' ')
      }
    },

    directives:{
      //当bind和update函数相同时可直接简写
      some(el,binding){
        let text=el.innerText
        let modifiers=binding.modifiers //修饰符对象
        if (modifiers.upper){
          el.innerText=text.toUpperCase()
        }
        if (modifiers.lower){
          el.innerText=text.toLowerCase()
        }
      },
      b: {
        bind(el, binding){
          let v = binding.value
          el.innerText = v
        },
        update(el, binding){
          let v = binding.value
          el.innerText = v + ' updated'
        }
      }
    }
  })


</script>

</body>
</html>

内置组件

  • 动态组件
  • 插槽
  • 组件缓存
  • 过度效果

vue-cli

1
2
3
$ npm uninstall vue-cli -g
$ npm install -g @vue/cli
$ npm install -g vue-cli
1
2
3
4
$ vue init webpack NAME
$ vue create
$ vue ui 
$ npm run serve
  • Babel
  • TypeScript
  • PWA
  • Vue-router
  • Vuex
  • CSS预处理
  • eslint prettier
  • Unit测试
  • e2e测试
1
$ npm install sass-loader node-sass --save-dev

其他

v-model 只是语法糖， 下面的两行代码是一致的

1
2
<input v-model="message"> 
<input v-bind:value="message" v-on:input="message = $event.target.value" />

es6函数
属性名 + 左小括号 + 参数列表(可为空) + 右小括号 + 左大括号 + 函数体 + 右大括号。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data() {
            return {
                isLogin: false
            }
        }
    })
</script>

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data: function(){
            return {
                isLogin: false
            }
        }
    })
</script>

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            isLogin: false
        }
    })
</script>

Vue的render函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
    Vue.component('elem', {
        render: function(createElement) {
            return createElement('div');//一个HTML标签字符
        }
    });
    new Vue({
        el: '#app'
    });
</script>


new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

https://www.jianshu.com/p/7508d2a114d3 Vue render函数

https://www.jianshu.com/p/b12d0d3ad4c1 Vue事件修饰符（二）.prevent .passive

展开全文 >>

招靠谱的同事 

1
面试了没有1000，也有800了。因为不是专业的HR，所以具体到技术招聘不是太专业。你非要问有什么经验之谈，小弟不才，愿意分享。

招聘总体原则

  • 人才是企业的第一要务，不要在招聘上偷工减料，优先级高。如小的公司HR无足够人手，或者大公司HR对技术不是太了解，需要从简历筛选到最后发offer的全流程跟进。
  • 尤其注重简历筛选，以期节约面试双方的时间和成本。简历筛选，需要通过尽可能短的时间，选出相对来讲靠谱/合适的候选人。不是绝对，也可能会遗漏人才，那就当做是运气吧。
  • 技术水平固然重要，但诚实和努力的品质更难得可贵。

必须要求

  • 学历，要求统招本科以上，可根据具体岗位、经验放宽。
  • 专业，要求计算机相关，如在简历中看出对计算机有极强的兴趣或实践可考虑培养。我一直认为，是计算机专业的，哪怕在学校混日子，也是能耳濡目染的。
  • 工作经历和项目完整、真实、可信。
  • 沟通起来起码是不难受的。

需要打起精神的点

  • 上家单位是异地的小公司
  • 无社保/上家公司不给交社保
  • 毕业后缺少了前几年的工作经验
  • 薪资要求和工作经验不匹配，例如工作经验丰富但薪资要求低
  • 毕业前的工作经验丰富
  • 大量且频繁的外包项目堆砌，项目没有关联或者架构雷同
  • 简历可以美化，需要区别于作假
  • 培训出来的，是打起精神，并不是直接pass掉。如果培训出来能在笔试和面试中脱颖而出，欢迎，这是人才，请不要在意。
  • 注重上家公司的离职原因

一定要pass掉的情形

  • 十项技能，九项“精通”（大神除外）
  • 工作经历、个人信息（学历等）作假
  • 项目作假（例如项目和归属公司不匹配，上线时间版本和工作时间不匹配，上线的项目不存在等）
  • 笔试时手机搜索答案
  • 不懂装懂、叽叽喳喳
  • 沟通起来很费劲的
  • 面试无故不来的

技术能力认可情况下的加减分项

more >>

展开全文 >>

微服务架构（7）微服务测试

一、SpringBoot单元测试

单元测试，用来配合敏捷开发中的TDD（Test-Driven Development，测试驱动开发）。

添加pom依赖。

1
2
3
4
5
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-test</artifactId>
  <scope>test</scope>
</dependency>

使用JUnit的Assert.assertXxx()断言方法来验证期望和实际是否一致。SpringBoot支持AssertJ类库。

JUnit断言 AssertJ断言
Assert.assertNotNull(“product is null”, product); Assertions.assertThat(product).isNotNull();
Assert.assertEquals(“product.price is wrong”, 9000, product.getPrice()); Assertions.assertThat(product.getPrice()).isEqualTo(9000);
Assert.assertTrue(“delete failure”, result); Assertions.assertThat(result).isTrue();
Assert.assertEquals(“productList.size is wrong”, 3, productList.size()); Assertions.assertThat(productList).hasSize(3);

测试时使用的注解

  • @RunWith(SpringRunner.class)
  • @SpringBootTest，和RunWith一起使用Junit和SpringBoot框架。
  • @FixMethodOrder(MethodSorters.NAME_ASCENDING)，测试顺序按照字符升序方式
  • @Test ，每个单元测试的方法都带有
  • @SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)，随机暴露端口号，而不是默认的8080。

REST API测试

使用TestRestTemplate的getForObject、postForObject、exchange等方法进行API接口调用。

针对JSON断言，可使用JSONAssert来实现。

二、自动化测试

Postman

有人说Postman是个手工的测试工具呀，其实里面还是有些脚本化的东东的。

1、环境变量

新建一个url的环境，设置r1的变量值为“localhost:8080”，即可使用“”来用。

另外提供了timestamp、guid、randomInt等全局变量，当然也可自己新建全局变量。

2、测试脚本

请求地址栏下方有Pre-request Script和Tests选项卡，分别用于在发送请求前后执行。

在Pre-request Script前置脚本中，可以设置一些环境变量或全局变量。

1
2
3
4
5
6
7
8
//设置环境变量
postman.setEnvironmentVariable("var_key","var_value");
//清除环境变量
postman.clearEnvironmentVariable("var_key");
//设置全局变量
postman.setGlobalVariable("var_key","var_value");
//清除全局变量
postman.clearGlobalVariable("var_key");
more >>

展开全文 >>

微服务架构（6）微服务通信

一、HTTP同步调用

服务器端

一般采用REST API，调用方始终处于等待返回调用的状态，直到调用完成。

可使用Spring的@RequestParam，@PathVariable，@RequestHeader等注解传入参数，使用@RestController来表明是个Rest接口。

客户端-RestTemplate

客户端调用，可使用Spring的RestTemplate的getForObject、exchange等方法发起请求。

客户端-OkHttp

如在Android开发中，也可以使用Square公司的OkHttp来调用，依赖如下。

1
2
3
4
5
<dependency>
  <groupId>com.squareup.okhttp3</groupId>
  <artifactId>okhttp</artifactId>
  <version>3.6.0</version>
</dependency>
1
2
3
4
5
6
7
8
9
10
@Autowired
private OkHttpClient okHttpClient;

public String get(String name) throws IOException {
Request request = new Request.Builder()
    .get()
    .url(String.format("http://localhost/hello?name=%s", rootUri, name))
    .build();
Response response = okHttpClient.newCall(request).execute();
return response.body().string();

客户端-Retrofit

也可以使用Square公司的Retrofit来链式调用，在客户端中定义服务接口，通过注解的方式来绑定HTTP请求，依赖如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<dependency>
  <groupId>com.squareup.retrofit2</groupId>
  <artifactId>retrofit</artifactId>
  <version>2.2.0</version>
</dependency>
<dependency>
  <groupId>com.squareup.retrofit2</groupId>
  <artifactId>converter-scalars</artifactId>
  <version>2.2.0</version>
</dependency>
<dependency>
  <groupId>com.squareup.retrofit2</groupId>
  <artifactId>converter-jackson</artifactId>
  <version>2.2.0</version>
</dependency>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//HelloClient.java
public class HelloClient {

  private HelloService helloService;

  @Autowired
  public HelloClient(Retrofit retrofit) {
    helloService = retrofit.create(HelloService.class);
  }

  public String hello(String name) throws IOException {
    return helloService.hello(name).execute().body();
  }
}

//HelloService.java
public interface HelloService {

  @GET("/hello")
  Call<String> say1(@Query("name") String name);
}

二、RPC同步调用

相关概念

远程过程调用RPC（Remote Procedure Call），基于TCP协议。通信过程在传输层完成（相比HTTP通信在应用层完成），因此更高效、支持更高并发。

流行的RPC框架有Google的gRPC，Facebook的Thrift，Twitter的Finagle，阿里的Dubbo，新浪微博的Motan等。

RPC的通信原理如下，两个端的Stub（存根）用于对数据进行序列化和反序列化，调用方式需要服务端和客户端建立Socket连接来实现二进制数据的交换。

gRPC

gRPC使用Protocol Buffers来编写服务定义，拥有强大的二进制序列化工具集。两者都是Google的开源项目。

『gRPC官网传送门』

more >>

展开全文 >>

微服务架构（5）微服务监控

一、Spring Boot Actuator应用监控

SpringBoot有一个Actuator的插件，用来输出应用程序的端点（Endpoint），包括健康检查（/health）、运行指标（/metrics）、线程信息（/dump）等。

1、pom.xml依赖

1
2
3
4
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-actuator</artifactId>
</dependency>

2、配置文件，暴露所有Endpoints

1
management.endpoints.web.exposure.include=*

3、以Spring Boot 2.x版本为例，访问路径/actuator可查看所有endpoints的路径。

端点路径 应用程序说明
/actuator/info 基本信息
/actuator/health 健康状况
/actuator/metrics 运行指标
/actuator/env 环境变量
/actuator/loggers 日志级别配置
/actuator/dump 线程信息
/actuator/httptrace 请求调用轨迹信息

但是以上信息都是以数据形式直接访问，需要通过用户界面的方式呈现数据。

二、Spring Boot Admin开源的应用监控系统

Spring Boot Admin包含了服务端和客户端。功能包括

  • 查看健康状态
  • 查看JVM和内存指标
  • 查看计数器与计量表指标
  • 查看数据源指标
  • 查看缓存指标
  • 查看系统构建信息
  • 查看并下载日志文件
  • 查看JVM系统属性与环境变量
  • 查看线程堆栈信息
  • 查看调用轨迹信息
  • 查看状态变更日志
  • 修改Logback日志级别管理
  • 修改JMX参数
  • 下载JVM堆内存文件
  • 通知状态变更（邮件等）

『源码传送门』

『官方文档传送门』

admin端

1、pom.xml依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>de.codecentric</groupId>
    <artifactId>spring-boot-admin-starter-server</artifactId>
</dependency>
<dependency>
    <groupId>de.codecentric</groupId>
    <artifactId>spring-boot-admin-server-ui</artifactId>
    <version>2.0.1</version>
</dependency>

2、应用主类中使用@EnableAdminServer注解

3、浏览器访问 http://localhost:8080 可查看到2.0新的vue页面。目前Application为0，需要添加client。

more >>

展开全文 >>

微服务架构（4）微服务日志

一、SpringBoot日志框架

默认使用

不推荐使用System.out.println()方式来输出的原因，一是输出到文件，二是采用异步多线程方式提高吞吐率。

SpringBoot使用Apache开源项目Commons Logging作为内部日志框架，默认集成了Logback，同时也提供Log4J等流行的日志实现。

日志分为5个级别：

  • ERROR，错误信息
  • WARN，警告信息
  • INFO，一般信息
  • DEBUG，调试信息
  • TRACE，跟踪信息

Logging插件默认输出到INFO级别。可通过如下配置进行修改

1
2
3
logging.level.root= ERROR
logging.level.com.herr=DEBUG  ##指定com.herr包的日志输出级别为DEBUG。
logging.file = ${user.home}/logs/hello.log

Logging插件无法关闭控制台中的输出。

集成Log4J日志框架

1、Maven配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter</artifactId>
  <exclusions>
    <exclusion>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-logging</artifactId>
    </exclusion>
  </exclusions>
</dependency>
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-log4j2</artifactId>
</dependency>

2、resources/log4j2.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <appenders>
    <File name="file" fileName="${sys:user.home}/logs/msa-hello.log">
      <PatternLayout pattern="%d{HH:mm:ss,SSS} %p %c (%L) - %m%n"/>
    </File>
  </appenders>
  <loggers>
    <root level="ERROR">
      <appender-ref ref="file"/>
    </root>
    <logger name="demo.msa" level="DEBUG"/>
  </loggers>
</configuration>

二、docker容器外输出

1、直接通过Docker数据卷方式挂在

1
$ docker run -v ~/logs:~/logs ***

2、Docker容器日志

docker logs会监控容器操作系统的标准输出设备STDOUT，有数据时会传输到另一个“设备”（日志驱动）中。

1
2
$ docker info | grep "Logging Driver"
Logging Driver: json-file

Docker的日志驱动类型：

  • none，不输出日志。
  • json-file (默认)，以JSON格式写入文件中。
  • syslog，输出日志写入宿主机的Syslog中。
  • …

docker启动时设定日志驱动类型如下：

1
$ docker run -d -p 80:80 --log-driver json-file --log-opt max-size=10m --log-opt max-file=3 --name nginx1 nginx

Syslog

Syslog为Linux的默认日志系统，默认安装了Rsyslog软件包。

1
2
3
4
5
6
$ rsyslogd -v #查看安装信息
$ vi /etc/rsyslog.conf #修改配置手工开启
$ systemctl restart rsyslog #重启Rsyslog服务
$ netstat -anpt | grep 514 #查看是否开启514端口
$ docker run -d -p 80:80 --log-driver syslog --log-opt syslog-address=tcp://localhost:514 --log-opt tag=nginx --name nginx1 nginx #启动nginx容器，使用Syslog作为日志驱动，通过514端口将日志写入Rsyslog中
$ tail -f /var/log/messages #可看到包含docker容器ID的日志，也可使用tag标识来识别

三、日志中心ELK

许多日志分析工具都可以从Syslog中获取日志，如流行的Elastic公司的ELK日志中心。『官网地址传送门』

  • 日志收集：Logstash
  • 日志存储：Elasticsearch
  • 日志查询：Kibana
more >>

展开全文 >>

微服务架构（3）微服务封装和部署

一、微服务的封装

采用Docker实现，Docker相关知识可参考另一篇博文。

SpringBoot和Docker整合

添加插件docker-maven-plugin 『github传送门』，该插件为Spotify公司开发的Maven插件。

可使用带dockerfile和不带dockerfile的两种方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<plugin>
    <groupId>com.spotify</groupId>
    <artifactId>docker-maven-plugin</artifactId>
    <configuration>
        <!--<imageName>${docker.registry}/${project.groupId}/${project.artifactId}:${project.version}</imageName>-->
        <!--<dockerDirectory>${project.build.outputDirectory}</dockerDirectory>-->
        <!--<resources>-->
            <!--<resource>-->
                <!--<targetPath>/</targetPath>-->
                <!--<directory>${project.build.directory}</directory>-->
                <!--<include>${project.build.finalName}.jar</include>-->
            <!--</resource>-->
        <!--</resources>-->
        
        <imageName>${docker.registry}/${project.groupId}/${project.artifactId}:${project.version}</imageName>
        <baseImage>java</baseImage>
        <entryPoint>["java", "-jar", "/${project.build.finalName}.jar"]</entryPoint>
        <!-- copy the service's jar file from target into the root directory of the image -->
        <resources>
            <resource>
                <targetPath>/</targetPath>
                <directory>${project.build.directory}</directory>
                <include>${project.build.finalName}.jar</include>
            </resource>
        </resources>
    </configuration>
</plugin>

执行以下命令，构建Docker镜像

1
$ mvn clean package docker:build

如采用dockerfile文件，需更改上方pom文件注释掉的代码。在resource目录下增加dockerfile文件，内容如下：

1
2
3
4
5
FROM java:8
MAINTAINER "iherr"<herongrong-123@163.com>
ADD @project.build.finalName@.jar app.jar
EXPOSE 8080
CMD java -jar app.jar

使用docker:build命令生成dockerfile和jar包。
使用docker:push推送到docker的本地registry服务器。
使用如下命令运行：

1
docker run -d --name springboot-hello -p 58080:8080 127.0.0.1:5000/com.msa/hello:0.0.1
more >>

展开全文 >>

微服务架构（2）微服务注册与发现

一、Zookeeper

定义

Service Registry（服务注册表）是微服务架构的核心，提供服务注册功能，为服务发现提供支持。开源服务注册组件有Zookeeper『官网传送门』，netflix的Eureka，COreOS的Etcd，hashiCorp的Consul等。

Zookeeper是服务注册表的最佳解决方案之一，由Yahoo使用Java开发，原是Hadoop项目的子项目，基于Google的Chubby的开源实现，设计目标是将那些复杂且容易出错的分布式一致性服务加以封装，构成一个高效可靠的服务。

Zookeeper是一个经典的分布式数据一致性解决方案，分布式应用程序可以基于它实现数据发布与订阅、负载均衡、命名服务、分布式协调和通知、集群管理、领导选举、分布式锁和队列等功能。

Zookeeper一般以集群的方式对外提供服务，包括五大特性

  • 顺序性，同一个客户端的请求确保“先进先出”
  • 原子性，整个集群中所有机器要么都成功的处理了某一个请求，要么就都没有处理。
  • 单一性，无论客户端连接到哪台ZooKeeper，客户端看到的服务端数据模型都是一致的。（ZooKeeper服务器之间会高效的同步）
  • 可靠性，分布式，leader有故障后，别的节点可自动接管
  • 实时性

节点类型

ZooKeeper拥有一个树状的内存模型，将这些目录与文件统称为ZNode，每个ZNode有对应的路径和包含的数据。客户端注册监听它关心的目录节点，当目录节点发生变化（数据改变、被删除、子目录节点增加删除）时，zookeeper会通知客户端。ZNode节点类型：

  • PERSISTENT，持久化节点
  • PERSISTENT_SEQUENTIAL，顺序自动编号持久化节点，这种节点会根据当前已存在的节点数自动加1。
  • EPHEMERAL，临时节点，客户端session超时这类节点就会被自动删除
  • EPHEMERAL_SEQUENTIAL，临时自动编号节点

集群结构：

ZooKeeper没有采用经典的分布式一致性协议Paxos，而是参考设计了一款轻量级协议Zab（ZooKeeper Atomic Broadcast），该协议分为两个阶段，领导选举和原子广播。

more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true