立于浮华之世，奏响天籁之音

原创 h5弹幕动画——解决部分手机兼容问题

前言上次的弹幕动画效果是已经实现了，但是由于手上的手机有限，没有测试出对部分手机的兼容问题， 同事测试出了，该弹幕效果在iPhone6s上不兼容，弹幕未移动到屏幕左侧就已经消失了。解决过程我初步的想了一下，未到屏幕左侧就消失，那一定是动画结尾所处位置计算的不正确，也就是transform: translateX(calc(-100vw - 100%))这句代码中calc内的100%为0，这就导致了bug的发生我首先想从兼容问题上下手解决，后来发现这个实在不大可行之后我就想，可不可以像其他动画效果

原创 h5移动端循环弹幕动画实现

需求有一个不定长度的数组，数组中是弹幕的文字内容，移动到弹幕页面时从数组第一项开始循环滚动，与顶部距离随机、两条弹幕间隔时间随机、弹幕速度随机。先看一下最终效果：思路做好一个div的弹幕动画效果，记下影响其高度、速度的css属性循环遍历数组，通过定时器函数根据不同间隔依次添加dom元素递归进行函数调用，并且在离开页面时销毁所有定时器、清空弹幕div代码首先先做一个带动画的div，编写动画keyframes，其实动画就是从屏幕的最右侧到屏幕的最左侧加上弹幕自身宽度的距离，这个距离是可以通过

原创 关于Code Review的文章读后感

前言文章链接：万字详文告诉你如何做 Code Review！最近看了这篇关于Code Review的文章，进行一些总结，记录一下体会。为什么要做Code Review代码可以呈现出一个程序员的思维，是设计理念、原则真正落地的地方，在review中，大家可以真正意义上进行思想的碰撞，互相学习，可以营造出浓厚的工程师交流氛围，使大家都掌握团队中最好的实践方式。像我们这种普通工程师，就是要不断打磨最佳实践方法论、落地细节。什么样的代码是坏的代码在review的过程中，总会遇到一些坏的代码的，在文章

原创 前端管理（思维导图）

前端管理（思维导图）

原创 微前端（思维导图）

微前端（思维导图）

原创 linux对已有lvm分区进行扩容

linux对已有lvm分区进行扩容问题描述服务器原本有一个1t的硬盘，后新加了一个1t硬盘，现在要把这个新加的合并到原有的分区上。分区pv(physical volume)即物理卷,就是物理磁盘,可以通过fdisk -l 查看操作系统有几块硬盘vg(volume group)即卷组,就是一组物理磁盘的组合,里面可以有一块硬盘也可以有多块硬盘lv(logical volume)及逻辑卷,就是在VG(指定的物理磁盘组)里面划分出来的简单来说，pv就是硬盘，vg就是负责管理硬盘的，lv就是展现给

原创 vue + element-ui + vue-i18n 前端国际化

vue + element-ui 前端国际化项目要求支持中英双语，所以就进行了一下前端的国际化，我这里是使用了vue-i18n，下面是我进行的步骤package.json中dependencies节点添加vue-i18n"vue-i18n": "7.3.2",src目录下创建lang目录，存放国际化文件，分别创建index.js、en.js、zh.js三个文件// index.jsimport Vue from 'vue'import VueI18n from 'vue-i18n'

原创 vue项目部署到非根路径时需要进行的修改

vue项目部署到非根路径时需要进行的修改由于项目需要，我们将项目部署到了非根路径

原创 office2016、2019提示office正在更新，卡住一分钟之后提示0xc0000142错误解决办法

office2016、2019提示office正在更新，卡住一分钟之后提示0xc0000142错误win+R输入services.msc2. 将Microsoft Office即点即用服务设为自动，并重启3. 启动成功！

原创 vue-cli实现权限控制（思维导图）

vue-cli实现权限控制

原创 webpack核心概念（思维导图）

webpack核心概念

原创 基于node.js实现简单的微信公众号接口（思维导图）

原创 常见Web攻击总结（思维导图）

思维导图

原创 node.js全栈部署解决方案（思维导图）

思维导图

原创 用egg.js实现⼀套⽤户系统的Restful接⼝（思维导图）

思维导图

原创 对vue服务端渲染的理解以及其使用场景

理解本质上，服务端渲染其实是生成了应用程序的“快照”，将vue及其对应的库运行在服务端，令其去访问接口去预加载数据，然后将获取到的数据作为组件的初始状态首先拉取数据，此后，组件的beforeCreate和created生命周期会在服务端调用，初始化完成后将生成的html字符串交由客户端浏览器托管，继续进行挂载，从而实现前后端同构优点由于搜索引擎爬虫抓取工具可以直接查看到已经完全渲染了的页面，所以可以达到更好的 SEO可以具备更快的首屏内容到达时间，特别是对于缓慢的网络情况或运行缓慢的设备比如

原创 统一邮件服务（用于统一各个系统发送邮件功能，记录历史信息）

业务场景统一各个系统发送邮件功能，记录历史信息，未来会添加短信、服务间通信等功能，算是一个消息中心的雏形泳道图文字流程用户登录注册以及历史信息查看用户注册：1）、用户输入用于发送邮件的ad账号及密码，通过ldaaps验证之后将密码加密存入数据库等待发送邮件使用2）、注册成功后跳转到用户信息页面，展示用户基本信息以及用于调用发送邮件接口的key用户登录：用户输入注册的ad账号及密码，与数据库中的密码进行校验，如果不一致则提示“若您已经修改邮箱密码，请点击修改密码按钮进行密码修改”用户修

原创 element-ui使用Message，出现相同消息提示时只弹出一个的解决方案

最近在项目的使用过程中，出现了网络异常时所有接口同时报了同样的错误消息提示，所以为了解决这个问题决定要出现相同的消息时只弹出一个提示框。在这里我找到了以下两篇文章：https://blog.csdn.net/dongguan_123/article/details/101290164https://blog.csdn.net/Linho/article/details/105856686创建一个js文件/**重写elemen-ui的message，防止出现同一时间弹出多个相同信息的messag

原创 如何快速对接一个开发中的项目

工作上周项目组新来了几位技术大佬，过来负责带领我们做项目的重构、升级、完善等工作，在与我们这些菜鸟对接时候，主要关注了：项目的各方面信息，通过项目组成员叙述、需求文档、汇报PPT、项目源代码、部署平台环境等等方面进行全面了解，对项目状况形成一个清晰的判断。项目现存的问题及其出现频率，并通过具体的场景判断问题本质原因。了解项目当前所处于的阶段，对工作内容进行一个具体的划分。在上周初步对接的过程中，也有一些BUG出现，在他们不是很熟悉的情况下，与我们沟通了BUG出现的场景以及出现的频率，捋顺了项目

原创 element-ui的el-autocomplete组件（带建议的输入框）根据输入进行提示，并在以特定符号分割时重新提示

需求我这里需要对用户输入的内容进行提示，然后用户输入了特定的分割符号时，重新匹配提示遇到的问题以及解决问题方法这个组件本身是点击某个建议就将对应的value直接赋值给v-model绑定的值，所以不符合现在的需求，这里赋的值需要更改为“最后一个分割符号及其之前的值 + 所点击的建议项的值”。解决的方法是在返回建议项的方法中（fetch-suggestions），给每一个建议项添加一个msg的属性用于存储输入框中应该展示的值，之后在点击建议项的回调函数中（select）将msg的值赋值给v-model绑

原创 echarts图例组件限制文字宽度及点击图例高亮对应数据图形

限制文字宽度由于图例多并且每一个部分文字比较长，而图表又限制在右侧比较小的一个位置，导致无法看到翻页按钮，所以就决定限制一下文字宽度。legend: { type: 'scroll', pageIconColor: '#409eff', tooltip: { show: true, trigger: "item", triggerOn: "mousemove", }, // 主要是这里实现的，给每个文字设置了textstyle限制其宽度 // 使其超过这个宽度换行 for

原创 Vue项目实践（1）

项目配置策略基础配置：指定应用上下文、端口号，vue.config.js修改后需要重启const port = 7070;module.exports = { publicPath: '/practice', // 部署应⽤包时的基本 URL devServer: { port, } }配置webpack：configureWebpack我们在项目过程中主要也是与wepack打交道，所配置的选项都会与原有的进行合并webpack-merge 合并出终选项对象形式配置：不是特

原创 Vue源码思维导图

Vue初始化过程Vue异步更新过程Vue组件化流程

原创 vue组件化相关：组件间通信及插槽

组件化vue组件系统提供了⼀种抽象，让我们可以使⽤独⽴可复⽤的组件来构建⼤型应⽤，任意类型的应⽤界 ⾯都可以抽象为⼀个组件树。组件化能提⾼开发效率，⽅便重复使⽤，简化调试步骤，提升项⽬可维护 性，便于多⼈协同开发。组件通信常⽤⽅式propseventvuex自定义事件边界情况$parent$chidren$root$refsprovide/inject非prop特性$attrs$listeners组件通信props父给子传值// childpro

原创 基于vuedraggable实现拖拽排序组件

基于vuedraggable实现拖拽排序组件安装npm install vuedraggable引入import draggable from 'vuedraggable'使用<template> <section id="home"> <article class="container"> <div class="middle"> <draggable v-model="middleContent" hand

原创 微服务架构视频笔记 - OAuth2定义和原理

OAuth2定义和原理OAuth2最简向导首先有用户数据，然后有个资源服务器，负责管理用户数据，有时候会有客户应用需要访问用户的数据，这时候，我们一般会给资源服务器按个门来暴露用户数据，被称为API,有了这个API之后，客户应用就可以通过API来访问用户数据，这个时候，如果客户应用通过API提出“给我用户的数据”的请求，我们的资源服务器收到这个请求之后，就可以把相应的用户数据返回给客户应用，这样的话客户应用就拿到了用户数据。这时，如果来了个恶意客户应用会发生什么，当恶意客户应用通过API发送“给我用户

原创 微服务架构视频笔记 - OAuth2解决问题域和场景

OAuth2解决问题域和场景目录文章目录OAuth2解决问题域和场景目录课程概述课程大纲课程特点课程参考书课程预览架构和技术栈预览OAuth2解决问题域和场景开放系统间授权传统单块应用安全现代微服务安全小结课程概述课程大纲课程概述问题域和场景OAuth2定义和原理典型OAuth Flow和选型OAuth2授权服务器和资源服务器案例实操（lab）OAuth2客户端案例实操（lab）JWT令牌原理JWT案例实操（lab）Android无线应用接入OAuth2案例实操（lab）Ang

原创 将天气抓取到数据库并通过ip以及城市行政编码获取当前城市天气

思路首先需要获得访问者的ip所在城市，之后通过该城市获得当前天气信息，而天气数据通过定时任务的形式定时爬取到本地数据库。实现过程获取访问者ip对应城市信息通过太平洋网络提供的API接口以在页面script访问的形式获得json<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="referrer" content="no-referrer"/> &l