wzy_PROTEIN的博客

antvG6是一个简单、易用、完备的图可视化引擎，官网上有很多图表示例，大家可以选用不同的布局来进行开发。本篇主要讲解的是antvG6的节点和连线的动画、以及不同节点展示不同图标如何实现

最近一个项目刚收工，分享一个常用的封装echarts的组件。如果想用饼图、柱状图之类的就可以直接传相应的配置即可，这样可以灵活控制每个图的不用样式。之前我封装过几个组件都是把echarts的配置写进组件里面，但是后面发现如果一个页面需要七八个echarts图表，并且样式都是不一样的，那么就比较适用该文介绍的封装方法。

前言：一般在一些后台的流程资料以及审核的场景中会需要电子签名，介绍一种用canvas实现的电子签名，此案例用的是原生js。1、需要定义三个值：是否按下、当前的x坐标和y坐标，鼠标按下的时候就开始画。/4、鼠标移入并且status状态为true的时候就是可以画的。整个电子签名的流程无非就是按下鼠标、画线、松开鼠标、停止画线。二、js实现逐步分析：（如果着急实现功能可以直接下滑到三）2、鼠标松开时就改变status的值为false。这样就已经可以绘制了。

该篇文章介绍了前端实现下载功能的五种情况，可复制源码直接使用。将后端传过来的二进制流文件下载（需要提取headers里面的文件名）、将后端传过来的二进制流文件下载（不需要提取文件名，前端来决定下载下来的文件叫什么）、将表格数据（数组）下载成csv文件、将16进制转化为pcap包并下载、将两个文件合成zip下载

后端传给我一个没有处理过的json串，但是我要传入el-tree做渲染，此篇来记录一下整个数据处理过程以及el-tree的使用。需求描述：一、树结构可以展开可以收缩，默认全部展开二、有一些关键词需要高亮展示红色三、树结构左边加线条，使得树结构看起来更直观

前言：在很多后台管理系统开发时总会有很多分页组件的使用，如果我们每次都用elementui官网的el-pagination去写的话，调整所有分页的样式就会很麻烦，而且页面内容也会很累赘繁琐。一般来说listQueryFn函数需要在页面刚加载的时候就调用一下、页面按搜索按钮的时候也要调用一下，再就是用户点击下一页的时候调用。listQueryFn是放前端请求接口的函数，我这里红框只是个示意，用的时候写成自己的接口就行。（我一般都是搭配el-table去使用的，表格组件封装请看我的另一篇帖子）

TS中函数定义和JS是一模一样的，可以是普通函数申明，也可以函数表达式但是在TS中针对函数做了很多的约束、函数的参数进行约束、函数的返回值进行了约束一、函数的参数在函数形参进行了约束，在传递值的时候，就必须按照指定的参数类型传递参数个数必须满足要求每个位置参数，数据类型一定要匹配参数是数字和字符串时：二、函数的返回值你在TS中定义每个函数都应该有返回结果。就算函数不需要返回，我们也应该告诉调用者，当前函数没有返回结果

TypeScript编程语言是微软推出的一款开源的开发语言TypeScript是JavaScript的超集。TypeScript也是基于JavaScript来进行开发的，具备JavaScript所有特性，支持完整的ES6\ES5等等语法。学习TypeScript就相当于在学习JavaScript，更多要学习的TypeScript中编程规范比如TypeScript中我们可以进行数据类型约束，一旦有了约束后我们程序设计会更加规范

如何在节点旁添加多个标签方法一：使用换行符将不同的标签连接在一起。这种方式简单，但不够灵活。方法二：通过在节点的 attrs 中添加自定义 SVG 创建多个文本标签。你可以根据需要调整这些标签的位置和样式。

在写好输入框背景色样式之后，正常输入账号密码时样式显示正常，但是使用了google浏览器记住的账号密码时，浏览器自动填充账户和密码后会自动添加背景色，如下图。

专栏的上篇文章只写了一个find（）用来查询，实际上mongoose的api还有很多，为了后续更方便操作MongoDB数据库，本篇总结一下常用的api合集。

Node.js是一个基于 Chrome V8引擎的JavaScript运行环境，是对于前端工程师来说学习成本最小的后端实现方法，本篇文章总结如何从0-1写一个后端的登录接口。

在日常开发中我们离不开打包工具webpack，但是不同的配置会影响我们项目的运行构建时间，也会影响打包之后项目包的大小，这篇文章记录一下我使用过的可以优化webpack的配置。2、在vue.config.js的module.exports上面先定义设置值。注：以本专栏上篇文章里面的vue.config.js为基础，去加配置。①默认设置：（4M的图片使用默认设置压缩成1.4M）2、在vue.config.js的第一行引入依赖。options中可以切换使用默认还是自定义。三、对代码进行压缩，并移除控制台输出。

vue-cli3以前的版本中把webpack的配置都写在config文件中，可以vue-cli3以上的版本中没有了config目录，可以将配置webpack的文件写在vue.config.js文件里面。是一个可选的配置文件，如果项目的 (和同级的) 根目录中存在这个文件，那么它会被自动加载。你也可以使用中的vue字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

将数组、字符串、对象进行展开，并将展开的数据赋值给指定变量，以达到语法简化的目的，日常开发中可以大大提升我们的效率。

扩展运算符又称为Rest运算符，可以实现数组、对象、字符串在语法层面上的展开，达到简化语法的目的，使得我们提高开发效率。在需要解构的变量前加三个点（...xxx）

由前端直接调列表的git接口，把后端传给我们的数组直接下载成csv文件，tableData.value的数据格式：[{aaa:1,bbb:2},{aaa:3,bbb:4}]下载下来的csv文件：aaa bbb1 23 4

在日常开发中，前端工程师可以把打好的前端包直接放到测试服务器上，自己再验证功能是否改好，这样可以提高开发效率，写篇笔记记录一下我个人用到的命令。用MobaXterm完成相关操作，直接可以在官网下载，下载后解压，运行.exe文件即可listen 80表示监听服务器端口为80，第二个有【：：】的表示的是IPV6地址的监听器server_name是服务名root后面放的就是我们打包好的前端代码，一般我们就要根据这个路径去放，要确保在该目录下有index.html

在用户选择一页五十条时，页面加载速度会比较慢。为了提高性能，选择用Intersection Observer API实现图片懒加载。调整webpak配置，在chainWebpack方法中查找到处理 SVG 文件的规则，类似地，可以添加相应的规则来处理其他类型的图片文件

使用css手写一个抽屉，并且不能遮挡住原来的页面1、这里主要使用了transition属性，transition属性是css3中的一个重要属性，可以为一个元素在不同样式之间变化添加补间动画。相较于传统的js实现的动画，transition属性实现的动画效果更细腻而且内存开销小。（1）所有数值属性都可以参与过度，比如width,height,left,top,border-radius。2、transition属性有4个基本要素，分别是要过度的属性，动画时长，动画演变速度，延迟时间。