Zwwxd666的博客

原创 vue2在v-for时出现循环渲染问题You may have an infinite update loop in a component render function.

使用了v-for循环，且v-for循环渲染出来的组件修改了数据，从而又驱动了响应式渲染，然后继续渲染v-for循环，然后v-for循环出来的数据里又修改了数据，从而达到死循环。那就是说，v-for里的变量在渲染结束前不能被修改，否则渲染到一半变量突然一变，新旧DOM一笔对，又得重新重新，然后死循环。究其原因是在v-for渲染结束前修改了变量，导致重新渲染，然后又修改变量…修改为独立的变量即可。

原创 vue2文章添加多个标签思路代码及效果展示

效果展示思路data数据结构第一个数组，用来存放标签库，供创建文章时选择第二个数组，用来存放从标签库选中后的标签， 且选中后需在可选的标签库里删除，否则出现同一个标签被多次添加js代码点击输入框，可展示所有标签/也可不展示，取决于组件身上属性（激活时展示or不展示）点击想要的标签，标签库移除，添加到选中数组内移除标签，标签库添加回去（后续还想选），然后从选中数组内移除是不是听的云里雾里？这里放一段gif演示确定的时候就把选中标签数组提交到后台这没什么好说的，数组转字符串扔过去即可

原创 网站底部的水波纹效果，结尾附带源代码

同样的图片，当作背景，设置关键帧一直往右运动即可，延迟时间透明度和 bottom，速度也就是animation总持续时长微调可达到波纹效果。

原创 springboot评论回复邮件提醒，附带工具类代码-开箱即用

获取qq或其他第三方登录邮箱发邮件的授权码，相当于qq密码，让别人登录后拿你账号发邮件用的。邮箱和授权码即可，其他默认， debug属性为true可以在控制台输出错误信息。记得在Application入口类添加@EnableAsync注解。在评论保存时发送邮件给站长，异步，否则堵塞占用用户时间。

原创 springboot实现文章浏览量

用户第一次访问时 浏览量加一。然后设置一个cookie 存活时间一小时，一小时内再次请求携带该cookie 进行判断，不增加浏览量。

原创 vue2集成markdown编辑器及前台渲染

使用set集合的不重复特性,获取所有h标签,后续根据标签名,确定缩进值大小,h1-> 缩进级别为1,根据级别*padding-left的固定值实现分层。结尾设置监听器,等待文章目录的a标签映射上去之后监听,点击后调用高亮方法.将自身作用参数传递过去,增加类样式。操作文章的组件里挂载时判断是编辑还是新增，编辑则获取vuex数据到form表单对象。如果是发布新增，路径参数为0，如果是修改，参数为文章id，以此区分编辑还是发布。监听滚动视窗原理 在以往的文章有提及,可自行查找,这里不过多赘述了。

原创 vue+springboot实现主流软件都在使用的二级评论的详细思路

由于子评论通常以最早发送的在最上面，也就是升序排列，这里可以使用list身上的api，sort传入Comparator的静态方法comparing根据时间对比如果大的则交换位置，类似于冒泡排序，好像这里还可以传入一个匿名内部类自定义排列规则。由于list列表只能通过下标index，0，1，2，3获取对应的评论，我们这里用map给index映射一个id值，就可以根据评论id来获取list对应的评论。但是如果是这样的话，那我们给二级评论回复时，二级评论的父评论还是二级评论，这样就变成了3级节点。

原创 博客都在使用的主题切换使用vue2实现思路

mutation使用commitaction使用dispatch。

原创 vue里完成一个简单的评论功能，博客必备

效果展示步骤1-表单收集输入信息<div class="commentorInfo"> <div style="position: relative"> <i class="fa fa-user" style="position:absolute;top: 50%;transform: translateY(-50%)transl

原创 vue实现动态文章目录高亮效果，提供全代码及详细讲解

好比电梯门，每次都会进来新的人，只有最后一次进来的人之后，电梯门才会关上，否则每一个人进来了， 都会重置关门倒计时，也就是防止了持续的scroll事件而不持续的触发回调，也就是说不持续的关门开门关门开门。

原创 vue里实现点击按钮回到页面顶部功能，博客必备！

回调判断滚动高度是否大于视口高度的1/2如果是，则设置动态样式的opacity为1，不是则隐藏为0。点击按钮触发置顶，scrollTo(0,0)滚动到 x y都为0的位置，也就是左上角。动态绑定样式style，监听点击事件，后续控制opacity透明度。实例及组件挂载后监听。

原创 wangEdtior富文本编辑器 结合element使用，博客必备，通俗易懂

template>">props: {content: {required: false, // 是否必填},data() {return {html: '',},},},editor.destroy() // 组件销毁时，及时销毁编辑器console.log('wangEditor销毁了')},methods: {

原创 css简单易懂的加载动画，看不会算我输好吧

先准备结构，并且放置12个div，每一个div旋转30*n度， 做一个圆圈。

原创 npm安装完yarn还是用不了？

找到你的包全局安装目录复制路径，配置到Path全局环境变量。

原创 MybatisPlus实现插入/修改数据自动设置时间

使用MybatisPlus的扩展接口MetaObjectHandler。插入数据时自动设置当前时间，更新数据时自动修改日期为修改时的日期。，我们在前端增加一个 时间戳转换的js，引入并在method里调用。不过这里的Date给到前端是时间戳格式的。

原创 css导航栏遮挡住垂直滚动条，以及100vw引起的横向滚动条出现

一开始想要body的宽度为整个视口的宽度 100vw view width不过出现了横向滚动条于是乎想着给所有元素增加 x轴溢出时隐藏问题解决，不过顶部的导航栏由于设置了fixed又把右边导航栏挡住了可能因为body占100视口宽度vw，而滚动条属于多余部分给他隐藏了可以将该隐藏设置在body处看样子虽然问题得到解决了，不过还是有点问题，由于设置了100vw视口宽度，这个宽度是不把滚动条算进去的 也就是说滚动条把body挡住了一部分，这也。

原创 vue2响应式原理+模拟实现v-model

劫持数据，说的挺好听的，就是加工数据嘛，多了set变化触发了模板重新渲染，该渲染方式使用观察者模式，获取观察者收集的各个dom的所有属性 div，观察的属性，div的属性textContent，同时根据最新值渲染模板。data数据劫持，给data的每个属性增加get和set函数，当值改变时触发观察者的update方法，更新所有与当前属性值相关的dom元素。给每个dom节点增加观察者实例，由观察者群组管理，内部每一个键值含有多个对不同dom的观察者。配置对象传入vue实例。

原创 Javascript正则表达式

简写上述的类型。

原创 node版本控制工具nvm，让你不用再重装node来更新版本。

由于项目的nodejs版本不一致，导致需要卸载安装换版本，十分麻烦，使用nvm node版本控制器来快速切换node版本。项目目录下插件.nvmrc 指定版本，交给别人维护时使用nvm use自动切换node版本。在nvm安装目录下的setting.txt粘贴 以下地址。github下载nvm-setup.zip。先把你原来的node安装目录删掉。*号表示当前使用的版本。

原创 axios的底层实现及手动封装ajax居然这么简单？

关键词promise对象处理异步操作xhr发送请求promise异步操作触发成功/失败回调函数更新状态为成功fulfilled还是rejected根据状态触发then还是catch。通俗点举个例子就是 买了彩票，然后去菜市场买菜，其过程不会被阻塞，也就是不用一直在彩票店等到开奖才做其他事情，留下电话号码，也就是设置回调then还是catch，当中奖了（resolve）触发then回调， 没中奖（reject）触发catch。

原创 axios的底层ajax，XMLHttpRequest原理解释及使用方法

ajax全称asychronous JavaScript and XML意思是异步的 JavaScript和xml， 也就是通过javascript创建XMLHttpRequest （xhr）对象与服务器进行通信。

原创 EasyCode——idea插件根据表快速构建对应的基础类，让你从此不再反复造轮子

包名（默认为你entity，dao包的上一级，注意包名需统一，不然你就不写，后面一个一个剪切过去）去除掉表名前缀 也就是zww_user => user。根据表快速生成对应类。

原创 css美化滚动条样式

scrollbar设置宽度，高度不设，自适应页面内容即可。thumb滑块设置颜色， 伪类选择器hover 悬浮样式。track背景色fff白色。

原创 点击按钮页面滚动到指定区域，且不遮挡导航条的实现

实现点击按钮跳转到 当前页面的某个位置。

原创 博客都在使用的打字机效果，居然这么简单？

文本超出标签换行的属性设置为 white-space: nowrap;出场grow关键帧中间顶峰时保持不变，40，60% 为300px最大值，设置边框作为光标，增加动画 有颜色到透明 持续时间500ms制造闪烁效果。宽度0时溢出的部分设置 overflow: hidden;steps 为帧数， 越小越卡，越像光标闪烁。设置grow的delay属性为其增加停顿感。从宽度0到300px来显示标签内容，

原创 大多数博客首页都在使用的文字打字机出现效果

关键帧名字 总耗时（文字数量/2） steps(一共做了多少步也就是总帧数，帧数就是一秒几张图片，越大越丝滑，越小越卡，由于这里的光标闪烁属于那种卡卡的闪的很慢的我们给小一点，文字的总帧数尽量和文字数量一致，例如5个字，steps就为5也就是一帧一个字的变化)因此需要给外面的盒子加相对定位，否则就会以body的左顶点作为初始点，就会跑到左上角去了，且该元素的width 100%将会是整个body的100%子绝父相， 绝对定位的初始位置x，y是以父盒子的左顶点x，y开始的。

原创 如何制作鼠标悬浮后伸缩的搜索框

（从父盒子的Y起始点和结束点平均增加上下间距,也就是把文字往中间挤压，使得最后input输入框的整体高度和父盒子高度一致，实现输入框文字居中， 直接这样记，行高=盒高为文字居中，且一行的上下边距会将文字挤到中间）初始化输入框/按钮的样式和引入图标，将input一开始状态设置为width 0。/* 让他变胖变圆润一点 *//* 让他变胖变圆润一点 *//* 让他变胖变圆润一点 *//* 居中设置背景色 *//* 居中设置背景色 *//* 居中设置背景色 *//* 居中设置背景色 *//* 初步布局 */

原创 vue项目无后台版本打包上传到服务器

将dist文件夹里的所有文件拷贝到站点的根目录，这里使用宝塔面板进行操作。也可以在文件目录下npm run build。前提你得先创建站点，域名绑定等操作。

原创 尚硅谷vue2的todolist案例解析,基本概括了vue2所有知识点，结尾有具体代码，复制粘贴学习即可

因为vc关闭事件也跟着没，而这里的事件是在 原型上的，一直存在的不受vc关闭而关闭。而emit相当于说，说给耳朵听， 之前单纯的emit只能在父子组件通信，现在引入了一个传话的，隔代通信，事件名相当于一个人名，和谁通信的标识，当然这个on必须在挂载后执行类似于父组件监听子组件的 打个比方，所有子组件只是个可以反复利用的壳子，类似于高达积木，而正在要来拼接他们的是我们的APP组件，有大脑想法，可以决定怎么拼好看，且怎么上色也就是赋予数据得当。

原创 npm全局安装依赖指定存放文件目录

如果环境发生变化，且依赖不是安装在项目文件夹下（一般不会，因为有很多小文件，传输速度极慢），此时npm i即可， 这里的i是install的缩写， 你也可以 npm install。如果带了 --save 安装依赖之后会将依赖及其对应的版本存放到 package.json文件下。学校机房，每次默认在c盘装完 电脑关机重启都得重新安装，十分麻烦。至此以后npm -g 依赖名， 这样全局安装都将存放到该文件夹下。如果不带 -g 则是在当前文件夹下安装依赖。

原创 解决新项目eslint不生效及自动保存时矫正语法

原创 idea项目推送gitee/github

和上述一样，地址变化了而已。推送失败打开git窗口输入。写备注并commit。

原创 idea中脱离git版本控制

原创 element-ui里message抖动问题

且新建了一个class类内容为增加17 内右边距，当弹框取消时 这些属性消失，所有产生抖动行为 ,如下图。由于element默认屏蔽滚动条，导致取消时弹message时 侧边滚动栏突然回来后引起抖动问题。内容太长或是其他情况（没遇到过其他情况）综上，我们只需要在App.vue入口文件里加入如下样式即可。是由于打开弹窗时出现遮罩层dialog对话框 时引起了。overflow可选值。至此完美解决上述问题。

原创 使用MP分页器总是显示所有数据

新建MpConfig配置类，复制如下代码并复制依赖。

原创 手机和电脑，电脑和电脑间在局域网传输文件

ftp://你ftp服务器的IP地址:7955。随便打开一个文件，上面地址输入。输入用户名和密码，手机上的黄字。

原创 idea配置本地maven

第一个为阿里云第二个中央仓库，优先级从上到下。

原创 Typora上传图片到七牛云

如果没有就先用默认的，然后这段时间去整个域名备个案，我那个时候搞了好像快一星期？需要填写以下信息，配置名自定义，接下来我们获取对应的信息并填入。否则30天后图片全部回收清空。先找个txt文件复制下来。总之挺多步骤的...访问地址前加http。

原创 快速生成基于vue-element的后台管理框架，实现短时间二次开发

创建并暴露该含有基础前缀的js给其他api调用 （该js文件可以在发请求的时候拦截interceptor并加工处理，加token值或加基础服务器ip前缀等。类似于提取公因式）在收到响应时处理根据对应的状态码处理不为20000说明向服务端发送的请求失败。Message提示框响应信息，默认为Error，类型type。和消息显示时间duration 5*1000 5秒500打头的为服务端成功处理但不符合某种条件的状态码，例如登录过期等MessageBox弹框提示登录状态过期。提示用户重新登录。

原创 快速开发前后端脚手架——若依框架

把实体，业务，mapper分模块，表现层放admin模块，模块名为 goods（业务主要名）/good（业务下的一个管理，例如商品管理下的商品管理）/list（对这个管理的操作）生成的代码一个一个学着别的业务复制到对应位置js，vue，controller，domain，service/serviceImpl，mapper/mapper.xml。admin下的mybatis包扫描则扫描了mapper下所有模块'mapper/**' 这里的**表示所有， 下的Mapper后缀的代理xml文件。