- 博客(63)
- 收藏
- 关注
RSS订阅原创 vue3中使用Antv G6渲染树形结构并支持节点增删改
在一些管理系统中，会对组织架构、级联数据等做一些管理，你会怎么实现呢？在经过调研很多插件之后决定使用 Antv G6 实现，文档也比较清晰，看看怎么实现吧，先来看看效果图。title: vue3中使用Antv G6渲染树形结构并支持节点增删改。先在项目中安装 antv g6。节点的增加、删除、编辑时间。dom 节点渲染后渲染树图。vue 文件创建容器渲染。渲染方法和初始化树图。
2024-07-01 10:04:57
388
原创 electron开发桌面应用
Electron + Vue3 项目搭建npm i @vue/cli -gvue create electron-vue-democd electron-vue-demovue add electron-builder问题：由于网络的原因，Electron 可能会安装失败：解决：我是 mac 开发，只介绍 mac 的方法打开链接https://github.com/electron/electron/releases/tag/v$VERSION这个地址下载文件（这里的 $VERSION 是
2021-10-18 18:42:58
709
原创 开发谷歌插件
入门谷歌插件一个谷歌扩展其实就是一个配置(入口)文件 manifest.json 和一系列 html、css、js、图片文件的集合manifest.json 说明{ // 插件的名称 "name": "测试插件", // 插件的描述 "description": "april的谷歌插件", "version": 0.1, "manifest_version": 2, // 图标位置 "icons": { "19": "icons/icon19.png",
2021-08-10 18:42:14
438
原创 document.cookie无法获取到cookie
背景在前后端联调的时候，后端需要在入参中传入 cookie。于是想通过 document.cookie 来获取，但是发现浏览器有 cookie 但是无法获取到。场景复现打开谷歌调试工具，可以看到浏览器中是有记录 cookie 的；在控制台执行 documen.cookie 发现获取不到[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qrm2NS3T-1627532987813)(https://raw.githubusercontent.com/AprilTong/
2021-07-29 12:30:50
7200
2
原创 前端导出excel
xlsx 介绍由 SheetJS 出品的 js-xlsx 是一款非常方便的只需要纯 JS 即可读取和导出 excel 的工具库，功能强大，支持格式众多，支持 xls、xlsx、ods(一种 OpenOffice 专有表格文件格式)等十几种格式。也可以设置样式等。导出 excel 实现下载 xlsx 然后引入使用 npm 进行下载npm install xlsximport XLSX from 'xlsx'导出文件/** * * @param sheetData 数组表格数据
2021-07-27 11:04:04
507
原创 call和apply的那些事
二者用途更改 this 的指向。????：var name = 'april'var boyfriend = { name: 'bran',}function getName() { console.log(this.name)}getName() // april,返回的是全局环境下的name变量// 如果想要获取变量boyfriend的name，可以怎么获取呢getName.apply(boyfriend)getName.call(boyfriend)call
2021-07-08 11:19:38
112
原创 js中的变量提升和函数提升
js 执行词法分析阶段：包括分析形参、分析变量声明、分析函数声明三个部分。通过词法分析将我们写的 js 代码转成可以执行的代码。执行阶段变量提升只有声明被提升，初始化不会被提升声明会被提升到当前作用域的顶端???? 1:console.log(num)var numnum = 6预编译之后var numconsole.log(num) // undefinednum = 6???? 2:num = 6console.log(num)var num预编译之后
2021-07-06 16:09:50
201
原创 拖动鼠标更改 DIV 高度
背景如图所示，实现拖动更改高度。实现添加一条线，用来控制拖动，鼠标拖动时，计算拖动距离更改 div 的高度。主要是通过 mousedown、mousemove、mouseup 等鼠标事件来实现。<div id="drag-box"> <div class="data-list" id="drag-top"></div> <!-- 辅助线(用于调整文本框高度) --> <div id="resize" class="res
2021-07-05 10:40:17
2054
原创 你还不知道用 nvm 管理 node 吗
你还不知道用 nvm 管理 node 吗背景一个同事让我帮他看看项目打包报错的问题，后来经测试，发现是他那边 node 版本太高导致的，然后他说降低版本需要卸载，就给他安利了一波 nvm。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PqYlYw3R-1623208861824)(https://raw.githubusercontent.com/AprilTong/image/master/img/nvm1.png)]nvm 介绍nvm 是 node 的版本管理工
2021-06-09 11:22:11
152
原创 金额格式化
背景在用 echarts 显示柱状图的时候，希望在柱状图的外面显示数据。通过设置 label 为 true，是显示了，但因为 echarts 内部做了处理，纵坐标和鼠标滑上去显示的都是千分位逗号隔开的形式，所以手动显示的 label 也希望保持同样的格式。实现export function toMoney(num) { num = parseFloat(num) num = num.toLocaleString() return num}方法介绍num = num.
2021-06-03 16:46:52
489
原创 html 静态网页进行真机调试
html 静态网页进行真机调试背景其他部门暂时没有招到前端，需要写一个活动页面，让我去协助一下。我最初是在浏览器里写好里然后调试。但是这个页面是嵌到 app 里面的，所以就想着怎么进行真机调试。解决将需要在手机上查看的 html 文件，css 文件及图片放入一个文件夹中在全局安装 BrowserSync npm install -g browser-sync在项目文件夹下执行下面明令，用以监听 css 和 html 文件，该文件夹下最好有 index 命名的 html 文件 bro
2021-06-02 18:55:13
729
原创 在相等比较中使用 Object.is()
前言JavaScript 是弱类型的，在使用 == 作比较时，在一些情况下由于类型转换，会出现意想不到的结果。0 == ' ' //truenull == undefined //trueJavaScript 提供了全等操作符===，它比更加严格并且不会发生类型转换，但是用 **=** 来进行比较也不是最好的解决方案，也会出现问题。NaN === NaN // false敲重点Es6 中提供了新的 Object.is(x, y)方法，它具有 === 的一些特点，而且更好、更精确，一些特殊的
2021-05-12 09:56:22
117
原创 告别 CV 大法，plop 生成模板文件
告别 CV 大法，plop 生成模板文件背景在写博客中，需要不停的新建页面，需要经历一遍又一遍重复的初始化过程：先建一个 md 文件然后复制粘贴标题、日期、标签等最后才是具体的文章内容Plop 能帮我们解决这些重复工作。Plop 的用法Plop 是一个很容易上手的脚手架工具。它能通过终端命令，接收参数，创建指定的模板文件。在项目中安装 Plopnpm install --save-dev plop在项目根目录下新建 plopfile.js,是 plop 的配置文件con
2021-04-09 17:13:51
209
原创 有最小高度的父盒子里面的子元素不能继承高度
有最小高度的父盒子里面的子元素不能继承高度现象：对父元素使用 min-height 为 300px，在子元素不脱离文档流的情况下，对子元素设置为 30%，但实际显示的时候，子元素的 height 是 0。当你让一个元素的高度设定为百分比高度时，是相对于父元素的高度根据百分比来计算高度。当没有给父元素设置高度（height）时，浏览器会根据其子元素来确定父元素的高度，所以当无法根据获取父元素的高度，也就无法计算自己高度。原因：webkit 的 bug，有最小高度的父盒子里面的子元素不能继承高度原文链
2021-04-08 14:25:27
1837
原创 HTML5 自动聚焦 autofocus 属性
HTML5 自动聚焦 autofocus 属性定义autofocus 属性是一个布尔属性autofocus 属性为 true 时，页面加载时自动聚焦到此控件支持 autofocus 属性的标签有 input、textarea、button使用<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="vie
2021-03-10 20:44:34
6708
1
原创 webpack中hash&chunkhash&contenthash的使用
问题背景修改代码后，重新打包发布代码之后，打开页面之后控制台有些 css 文件会出现 404，如下图所示：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ygY9JLmO-1614681559215)(http://chuantu.xyz/t6/741/1614658703x992245862.png)]需求：如果当前文件没有改变，则每次打包之后对应文件的哈希值不会改变。hash 的应用hash 一般结合 CDN 缓存来使用，通过 webpack 构建之后，生成对应
2021-03-02 18:40:35
912
原创 Javascript 获取数组中最大和最小值
排序法将数组进行排序，按照从小到大的顺序来排，排序之后的数组中的第一个元素就是我们想要的最小值，最后一个元素为最大值。let arr = [12, 33, 8, 54, 36]// sort方法会改变原数组arr.sort(function(a, b) { return a - b})// 最小值let min = arr[0]// 最大值let max = arr[arr.length - 1]假设法假设数组中的第一个元素是最大值，然后拿这个最大值和后面的项逐一比较，如果
2021-02-07 11:07:06
1281
原创 事件触发一次
vue 中实现大家都知道，vue 中在事件处理程序中提供了事件修饰符stoppreventonce<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 点击事件将只会触发一次 --><a v-on:click.
2021-02-03 15:15:06
452
原创 跨域学习
跨域浏览器具有同源策略。所谓同源是指’协议、域名、端口’三者都相同，其中一个不相同，都是不同源。同源策略限制以下行为：（1）Cookie、LocalStorage 和 IndexDB 无法读取（2）DOM 和 JS 对象无法获得（3）Ajax 请求不能发送解决方法JSONP 跨域原理：利用 script 标签没有跨域限制，通过标签 src 属性，发送带有回调函数的 GET 请求，服务端将接口返回的数据拼凑到回调函数中，返回给浏览器，前端可以在回调函数中拿到返回的数据。<scrip
2021-01-28 18:44:58
129
2
原创 vue中很实用的知识点
动态路由复用组件对于复用组件（只是路由参数发生改变），生命周期函数钩子不会被调用解决：监听路由变化 watch: { '$route'(to, from) { // 对路由变化作出响应 } }vue-router 的钩子方法beforeRouteUpdate(ro, from, next) { // 在当前路由改变， 但是该组件被复用时调用 // 举例： 对于带有动态参数的路径 /foo/:id，在/foo/
2021-01-28 14:25:59
267
原创 element-ui el-table 多列排序
element-ui el-table 多列排序需求：el-table 需要支持多列排序，后端排序。即就是在点击后重新发送请求，点击一列的排序，另一列的排序样式能够保留问题: element table 排序默认是单列排序最终实现效果：思路:header-click 事件 结合 header-cell-class-name在点击表头的时候排序的列以及是升降序保存到一个数组对象里, 然后通过header-cell-class-name属性设置选中的样式<el-table :d
2020-11-02 10:24:02
12282
9
原创 css 实现圆形渐变进度条
css 实现圆形渐变进度条实现思路最外面是一个大圆（渐变色）内部里面绘制两个半圆，将渐变的圆遮住(为了看起来明显，左右两侧颜色不一样,设置为灰蓝)顺时针旋转右侧蓝色的半圆，下面渐变的圆会暴露出来，比如旋转 45 度(45/360 = 12.5%)，再将蓝色的右半圆设为灰色，一个 12.5 的饼图就绘制出来了。尝试旋转更大的度数，旋转 180 度之后右半圆重合，再旋转，度数好像越来越小，不符合我们需求，应该将右侧的圆回归原位，把其背景色设置成和底色一样的，顺时针旋转左侧的半圆，最后，最里面加上白
2020-09-23 18:34:25
4244
3
原创 vue+axios 以文件流的形式下载文件
vue+axios 以文件流的形式下载文件需求：点击导出按钮，发送 POST 请求，接口返回文件流，前端下载 Excel 文件后端在响应头上返回文件名注意的点：前端调用接口， 需要把 axios 的 responseType 改为arraybuffer或者blob， 不然下载的文件打不开；如果文件名中有中文，需要进行 URL 解码，使用*decodeURI()*方法通过 a 标签实现下载文件接口返回的响应头： axios({ method: 'post',
2020-09-07 16:55:34
2469
原创 vue 中使用 eventBus兄弟组件传数据
vue 中使用 eventBus场景：需要兄弟组件传数据建立 eventBusimport Vue from 'vue'export default new Vue()在需要往外传值和接受值的兄弟组件中使用 eventBusimport Bus from '@/utils/eventBus'往外传值的组件eventBus.$emit('getParams',data)接收数据的组件处理created(){ eventBus.$on('getParams'
2020-07-17 16:53:56
571
2
原创 axios请求
axios 传递数据get 请求中传递数据import qs from 'qs'http.get = function (url: string, params: any) { return axios.get(url, { params: params, paramsSerializer: (params) => { return qs.stringify(params, { indices: false }) }
2020-06-12 16:07:31
509
原创 element-ui Upload 上传文件
element-ui Upload 上传文件需求描述：如图所示，upload 只是用来选择文件，在点击提交的时候再和其他的数据统一上传，并且要限制该文件只能上传一个，为用户最后选择的那个文件。不使用 action 属性 上传官方文档文档中描述到：action：是必选参数，上传的地址；http-request: 覆盖默认的上传行为，可以自定义上传的实现， 使用该属性的时候设置action 的属性值为#只能上传单个文件，并能覆盖上传官网 API 里有一个属性，limit（number
2020-05-17 21:02:23
22848
15
原创 objtect.fit属性
objtect.fit 属性用来指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框可以取的值contain: 被替换的内容将被缩放，已在填充元素时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。效果是这样的cover 被替换的内容在保持宽高比的同时填元素的整个内容框，如果对象的宽高比与内容框不相匹配，该对象将被裁剪以适应内容框很明显看到图片左右被裁剪fill 被替换的内容正好填充元素的内容框，整个对象将完全
2020-05-15 14:59:35
195
原创 js获取图片和视频的宽高等
获取图片和视频的宽高日常开发中，在提交给后端视频和图片等文件之前，需要控制文件的的宽高，大小等。图片// 上传文件的方法uploadFile(e) { let that = this // 该file中可以获取到文件名，大小等信息 let file = e.target.files[0] let img = new Image() let reader = new Fi
2020-05-15 10:35:19
3113
原创 Vue 实现企业微信扫码登录
前端 Vue 实现企业微信扫码登录需求：公司用的企业微信，PC 端的管理后台，想通过企业微信扫码登录。相比传统的账号密码方便很多。企业微信扫码登录流程文档：（链接）对于前端来说，重要的是如何构造扫码登录链接：有两种方法：构造独立窗口登录二维码（不太符合需求）内嵌登录二维码（主讲）步骤一：引入 js 文件在 index.html 中通过 script 标签引入<!DOCTYPE html><html lang="zh-CN"> <head>
2020-05-14 18:14:10
6323
原创 Element通过v-for循环渲染的form表单校验
普通的form表单校验日常业务开发中，对于中后台管理系统，form表单校验是一个很常见的问题。查阅Element官方文档，我们了解到，form表单校验是这样的，需要给所校验的el-form-item添加prop属性值，这个属性值便就是当前元素v-model 所绑定的值。如图所示：v-for 循坏的表单校验那么问题来了，通过v-for 遍历循环渲染的form表单怎么添加校验呢？主要问题就在...
2020-03-15 22:31:38
12442
原创 Element-table表格多选的使用
需求如图所示：左边是一个可以多选的表格，右边需要实时展示选中的数据。需要实现：表格中的数据选中或取消选中时，右边需要实时展示。右边删除某一项时，表格中对应的那一项需要取消选中。切换页数的时候，之前列表的是否选中状态需要回显。踩坑第一次阅读文档，使用的是selection-change的事件，该事件是在 选择项发生变化时会触发该事件，所以当进行切换页数时，tableDat...
2020-03-06 19:02:52
10951
7
原创 FormData学习
FormDataFormData 提供了表单数据的键值对，经过其的数据可以通过 XMLHttpRequest 向后端发送，编码类型需要被设为‘multipart/form-data’.构造函数FormData() 创建一个新的 FormData 对象方法FormData.append()向 FormData 中添加新的属性值，如果属性存在，也不会被覆盖，会新增，属性不存...
2020-01-07 15:06:51
756
原创 Webpack4+vue2从零开始搭建项目
从零开始使用 webpack4 + vue2 搭建项目项目搭建创建文件夹 vueProject，进入文件夹后 npm initc 初始化项目安装 webapck 相关东西npm i webpack webpack-cli webpack-dev-server webpack-merge --save-dev安装后package.json文件就有其相关版本，如下："webpack"...
2019-12-31 18:23:14
1266
原创 js实现链表
链表链表是一组节点组成的集合，每个节点都使用一个对象的引用指向他的后一个节点。它分为单向链表、双向链表、单向循环链表和双向循环链表。插入节点：在需要插入节点的位置的节点（前驱）指向新插入的节点，将新节点指向前驱本来指向的节点。删除节点：将待删节点的前驱指向待删节点指向的节点，将待删除节点的指向设置为 null链表设计：两个类，一个用来表示节点【Node】，另一个类提供删除、插入节点...
2019-12-19 12:40:09
385
原创 javaScript的问题
js 中的值传递和引用传递js 函数传参的时候，如果是基本类型，则按值传递，如果是引用类型，则是引用传递（按地址传递）var num = 1function foo(num) { num = num + 1 return num}foo(num) // 2num // 1function changeAgeImpure(person) { person.ag...
2019-12-19 12:35:44
191
原创 vue组件通信
父子组件通信问题只有父元素和子元素父元素通过 props 给子元素传递数据，子元素通过$emit 方法通过事件的方法向父元素传递数据// 父元素<Tab :currentTab="currentTab" :tablist="tablist" @change-tab="tabChange"></Tab><script>import Tab from...
2019-11-20 16:23:00
161
原创 web安全
web安全那些事XSSSQL注入CSRFXSS【跨站脚本攻击】介绍：允许攻击者将恶意代码植入到提供给其他用户使用的页面中。不同于大多数攻击（只涉及攻击者和受害者），XSS涉及三方（攻击者、客户端、web应用）。XSS的攻击目标是为了盗取存储在客户端的cookie或者用于识别客户端身份的敏感信息。一旦获取到合法的信息后，攻击者甚至可以假冒合法用户与网站进行交互。分类：存储型XSS...
2019-11-04 11:58:21
140
原创 代码输出问题
// example 1var a={}, b=‘123’, c=123;a[b]=‘b’;// c 的键名会被转换成字符串’123’，这里会把 b 覆盖掉。a[c]=‘c’;// 输出 cconsole.log(a[b]);// example 2var a={}, b=Symbol(‘123’), c=Symbol(‘123’);// b 是 Symbol 类型，不需要转换。...
2019-05-20 10:02:50
433
原创 sku商品选择
需求（商城购物，规格的选择）商品属性（多种）：尺寸，颜色，款式存在的组合方式是确定的：即就是所存在的库存并且大于0的sku思路：点击的时候，记录当前点击的值，遍历sku，当前点击的sku中的每个元素，合并去重，还等于当前本身，则该元素里的子规格都是可点击的，子规格的其他就说不可点击，置灰。再次点击，拿到已经点击过的值。重复上述操作。主要有三组数据：所有的主规格(去重）数组对象 ma...
2019-05-07 17:59:40
4669
原创 小程序开发
css设置z-index不生效：让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。条件渲染样式:class=“isAllocate ? ‘scroll’ : ‘scroll-view’”:class="[{‘left’: index == 0}, {‘right’: index === dateClass -1}]"微...
2019-02-25 16:20:48
223
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人