- 博客(19)
- 收藏
- 关注
RSS订阅原创 VueUse学习
⚡️ VueUse 学习VueUse学习什么是VueUse为什么用VueUse如何使用⏳Install????简单栗子????useFetchVueUse常用方法总结什么是VueUse如果你了解react的hook，那么VueUse可以看做是vue版的hook库。如果不太了解，简单概括的话，VueUse是基于Composition API的常用函数集合。功能类似于lodash，免去用户自己去重复写一些常见的函数，如：防抖、节流、fetch等。目前，VueUseStar数已经达到6.5k，npm周下
2021-11-22 22:53:46
2921
原创 Vite学习
Vite 学习什么是Vite为什么用Vite创建Vite项目配置文件什么是ViteVite是一种新型前端构建工具，最大的特点是快！冷启动快，热更新快，打包也快。主要包含两部分功能：1.开发服务器：基于原生ES模块特性，提供丰富的内建功能；2.构建指令：使用Rollup打包代码，可输出高度优化后的静态资源。为什么用Vite随着项目越来越大，JavaScript代码量指数级增长，此时诸如webpack等工具启动开发服务器需要很长时间，即使热更新HMR也需要几秒钟才能在浏览器中反应，严重影响了开
2021-11-08 22:48:43
557
原创 Fetch 学习
Fetch 学习什么是Fetch优点缺点注意点基本使用fetch()完整配置处理响应判断状态读取内容取消fetch()Fetch + ts封装公共request.ts什么是FetchFetch API是XMLHttpRequest的升级版，浏览器原生提供，用于发送HTTP请求，属于HTML5新增的API。优点fetch()使用Promise，更符合现代主流的ES规范采用模块化设计，设计有Headers、Request、Response，相比XHR更符合关注分离（Separation of Co
2021-10-12 20:39:23
616
1
原创 Vue中组件嵌套引用
Vue中组件嵌套引用需求问题解决需求工作中难免会遇到需要在父组件中使用子组件，子组件中又需要引用父组件的情况，简称“套娃引用”。一般出现场景有Menu、Nav组件。小乌龟在最近工作中遇到一种情况，组件A有个子组件B，组件B回去判断当前应用依赖的应用是否已经部署，如果未部署，再打开一个组件A先部署依赖应用（套娃地狱）。问题功能逻辑都不复杂，但是当在组件B中引用组件A时，会报组件未定义或应用错误。反复检查拼写、路径是否错误，结果都没问题。想到了应该是组件嵌套引用的问题，导致Vue运行时不是知道先加载那个
2021-05-28 09:56:37
886
原创 encodeURIComponent转义后java获取到的+变成了空格
encodeURIComponent转义后java获取到的+变成了空格今天遇到一个跟后台联调的问题，通过encodeURIComponent转义后的字符串，后台java解析完，“+”转成了空格。万能搜索之后，从茫茫解决方法中找到一个最简单的。const encodeStr = encodeURIComponent(encodeURIComponent(str))由于java在request.getParameter的时候，会自动进行一次解码，所以进行两次编码后，后台通过**URLDecoder.de
2021-05-17 23:13:21
758
原创 iframe解决跳转登录界面问题
iframe解决跳转登录界面问题前端开发中难免会遇到需要通过iframe嵌入其他界面的需求。这时候如果被嵌入的页面需要登录获取权限，会出现iframe内出现登录页的情况。一般都会要求做到无感知登录。具体如何实现，视情况而定，大致如下：同源环境下，可提前进行登录请求，在localstorage、cookie、session存储token、userId等信息后，进行iframe访问。跨域时较为复杂，需要同时修改iframe内外部两个系统，本文主要是解决这种情况整体思路1.外部系统调用特定接口获取
2021-03-13 21:30:18
18043
原创 js获取客户端ip
js获取客户端ipjs获取客户端ip方法一：第三方接口方法二：利用WebRTC(Chrome/Firefox)方法三：求助后台大佬js获取客户端ip最近需要个需求，需要实现上次登录用户的IP及登录时间，如果两次登录ip不同，前端给出提示。服务端可以通过HttpServletRequest获取，前端如何获取当前客户端ip呢？方法一：第三方接口$.getJSON('//freegeoip.net/json/?callback=?', function(data) { console.log(JSON
2021-03-13 21:28:36
5636
原创 使用vis-network进行图数据库可视化（一）
使用vis-network进行图数据库可视化（一）什么是vis-network安装Demodatas数据1.数组格式2.DataSet格式3.两者之间区别4.从Gephi导入数据options配置项configurenodes节点edges边groups组layout布局interaction交互manipulation可视化操作physics物理引擎cluster集群methods方法destroy()setData({nodes, edges})on、off、oncecluster(options)cl
2021-02-23 21:03:22
3833
1
原创 vue-element-admin项目打包后，生产环境再chrome浏览器下偶尔存在element-ui中的icon乱码
vue-element-admin项目打包后，生产环境再chrome浏览器下偶尔存在element-ui中的icon乱码在将vue-element-admin或者vue-element-template打包发布到生产环境后，在chrome浏览器中刷新时，偶尔存在element-ui的icon出现乱码。F12查看乱码的icon元素，发现.el-icon-close:before { content: "□"}，同时html界面通过link标签引入的css文件都未被浏览器正常加载。非乱码情况下，icon元素也
2020-12-30 20:57:32
4263
3
原创 如何使用axios下载文件
如何使用axios下载文件整体思路设置请求blob格式结果下载成对应格式文件异常处理最近有个需求是后台返回io流，前端调用后下载。之前这种情况都是直接挂a标签解决，这次遇到的接口是post，a标签的方式行不通，面向百度后找到了解决方法。整体思路设置请求结果为blob格式，get、post相同；window.URL.createObjectURL(blob)方法生成唯一的对象url，通过a标签进行下载设置请求核心就是设置responseType: ‘blob’，具体axios设置如下：{
2020-12-16 17:12:12
4124
原创 前端每日一题记录
每日一题记录利用 setTimeout 实现 setInterval和clearInterval扁平数组转树typescript+react hooks手写useFetch自定义hookURL search 的序列化与反序列化对象深拷贝找出两个数组的交集元素快速排序数组去重节流函数防抖函数利用 setTimeout 实现 setInterval和clearIntervalexport interface MySetInterValReturn { id: number | null}expor
2020-09-14 21:00:15
171
转载 setTimeout和Promise执行顺序
setTimeout和Promise执行顺序代码解析异步原理浏览器任务队列主线程Event Loop代码setTimeout(function () { console.log(1);}, 0);new Promise(function (resolve) { console.log(2) for (let i = 0; i < 10000; i++) { i == 9999 && resolve(); } console.log(3)}).th
2020-09-12 15:12:53
2424
原创 防抖与节流总结记录
防抖和节流函数介绍防抖（debounce）节流（thorttle）区别介绍防抖、节流的概念老生常谈，而且基本也都会用在平时工作中。平时用的较多的是防抖函数，主要解决像自动补全搜索功能中避免多次调用后台接口。节流相对使用较少，今天有空，打算写下记录方便记忆。防抖（debounce）触发事件后，n秒内函数只会执行最后一次，如果n秒内事件再次被触发，就会重置时间。主要用于像使用AutoComplete等组件，频繁调用接口影响性能。主要思路是利用setTimeout定时器，延迟执行函数，在未到延迟时间时再次
2020-08-16 20:22:25
172
原创 基于Proxy实现vue双向绑定
基于Proxy实现vue双向绑定介绍代码index.htmlmyVue.js效果总结介绍今天看了个视频，讲解的关于使用Proxy实现vue数据双向绑定的玩意，代码逻辑不是很复杂，但是很多原生的知识点需要后续继续学习。在此简单记录下跟着写的代码，避免明天就忘！代码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Ti
2020-08-13 23:27:15
343
原创 平铺节点数组转嵌套树
平铺节点数组转嵌套树介绍代码总结介绍最近笔试遇到一个题是要求将平铺节点数组转嵌套树，一眼看上去挺简单的，当时花了几分钟写了个很low方法，只能勉强实现功能。试后网上查了下，有更好的方法，自己又实现了一遍，记录下。代码// 输入数据const TEST_DATA = [ { title: '1', depth: 1 }, { title: '1-1', depth: 2 }, { title: '1-1-1', depth: 3 }, { title: '1-1-2', depth:
2020-08-09 21:02:37
380
原创 ECMAScript版本介绍
ECMAScript介绍历史版本介绍ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）在标准ECMA-262中定义的脚本语言规范。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。——百度百科历史版本年份版本描述1997ECMAScript 1第一个版本1998ECMAScript 2版本变更1999ECMAScript 3强大的正则表达式，更好的词法作用域
2020-08-06 22:32:19
339
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人