- 博客(66)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 将闲置电脑搭建成私有云盘，使用ipv6外网使用
最近买了一台台式电脑，然后想安装photoshop cc最新版，在找到资源下载时，需要百度网盘下载，非会员的我欲哭无泪，100kb的下载速度，等它下完要什么时候去了，只能开了几个小时的会员。虽然将它存在了自己的硬盘上，但是要是我到其他地方又想安装这个，不可能随时带个硬盘上吧，反正我这个台式机平时低频使用，就把它利用起来，搭建一个自己的私有云盘吧，云盘平台还存在数据丢失的风险！然后构思了方案：1、利用开源云盘程序部署在电脑开启服务->2、使用内网穿透将服务暴露到外网->3、使用向日葵远程关机电脑
2020-12-12 14:37:46
24724
11
原创 Vite实用技巧
在Vue3的开发过程中，Vite 框架的底层实现已经非常优秀，往往都是借助 Vite 的内置功能来实现的。所以总结一些Vite 的一些技巧。
2025-11-03 11:32:59
620
原创 Vue3x实用技巧
自定义Hooks，可以复用代码，提高代码复用性。可以封装一个请求挂载loading状态，包含请求结果，成功回调的集合hooks。类似React的ahooks中的useRequest。list?: any[];},});})});}, 200);return res;在models中使用return {});在组件中使用// 在computed中使用，组装原始数据，保证原始数据与接口一致return `${const {
2025-10-31 10:32:43
428
原创 PDF导出服务
在前端开发中，经常遇到pdf导出的需求，处理这类需求能实现的方式也很多，包括前端导出，服务端导出。由于有的内容过多，导出时间过长，不适宜前端导出，所以一般还是选择服务端导出，然后通知客户端导出结果。
2025-10-30 14:04:34
808
原创 AI在前端工作中的应用
在AI的高速发展中，也离不开前端，前端开发也在AI工具中发挥着举足轻重的作用。同时，一些AI工具也是的前端开发工作提效不少，合理利用工具，能在工作中提升效率。本文介绍一些前端与AI结合的场景，不限于接入，也包含一些工具的使用。
2025-10-30 09:43:45
1142
原创 qiankun微前端实践经验
qiankun 是阿里开源的微前端框架， 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。
2025-10-29 10:48:28
996
原创 前端响应式及大屏优化
响应式设计的核心是让页面在不同设备（手机、平板、电脑、大屏显示器）上自动调整布局、内容和交互方式，确保一致的用户体验；而大屏优化是响应式设计的延伸，针对高分辨率、宽屏比例的设备（如数据可视化大屏、企业展厅大屏、4K+/8K 显示器）解决 “内容适配、视觉层次、性能负载” 等专项问题。以下是系统的优化方案：
2025-10-28 14:03:41
794
原创 Vue3子应用在umi中qiankun接入
当项目比较庞大，集成平台之类的，需要耦合多种业务，那么采用微前端维护是比较合理的，这里介绍如何将vue子应用接入umi主应用，并实现子应用与主应用之间的通信。
2025-10-22 10:25:05
655
原创 记录一次DIY主机经历
现在品牌主机溢价太多，电脑城或者DIY店价格便宜很多，但是货源无保障，可能用的二手回收的零件，所以DIY主机可以解决这个问题。
2025-10-20 14:58:36
1347
6
原创 umijs 服务端渲染（SSR） 指南
Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。Umi 是蚂蚁集团的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。
2024-06-06 12:00:56
1729
原创 如何向开源项目提交PR（pull rquest）
Pull Request（PR）是 GitHub 上用于请求将代码合并到主分支的机制。就是在 GitHub 上提交代码，然后向开源项目发起请求，让开源项目将代码合并到主分支。
2024-06-05 14:35:49
1222
原创 Echarts-丝带图
丝带图是Power BI中独有额可视化视觉对象，它的工具提示能展示指标当期与下期的数据以及排名。需求：使用丝带图展示"2022年点播订单表"不同月份不同点播套餐对应订单数据。
2024-04-19 17:42:51
1800
原创 uni-app开发小程序实用技巧
uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。......
2022-07-26 11:16:14
1487
原创 rollup配置工具库开发环境
使用rollup配置ts打包前端工具库，类似lodash，dayjs之类的函数工具库，丰富函数编程的生态。Git仓库我配置好的仓库地址放在github的：https://github.com/mySkey/myskey一、生成package.json我们可以使用以下命令创建一个默认的package.json：npm init -y生成以下内容：{ "name": "ktools", "version": "1.0.0", "description": "", "main"
2021-02-06 11:25:40
520
1
原创 git使用经验
git使用经验从工作到现在都一直使用git作为代码管理工具，总结一下工作中常用的场景和它们相关的命令，还有自己的一些见解！一、相关平台以下平台都是使用git作为代码管理工具的，并且各有自己特色，我4种都有使用，都算稳定可靠！gitlab通常自建代码托管，都首选gitlab，搭建公司自己的代码管理平台，能保证数据安全性，稳定性嘛就看公司人咋样了码云码云是开源中国 Git 代码托管平台，也支持svn，带宽都高，非常放心托管codingcoding以前只提供给个人5个免费仓库，被腾讯
2021-01-23 21:18:19
328
原创 基于百度翻译API的node插件
基于百度翻译API的node插件背景做过国际化的项目就明白要把每处的文案翻译成不同的语言版本，如果只是一点点，自己去百度上翻译成对应语言版本，copy过来就ok了，但是如果这个项目文案特别多的话，自己去翻译，可能会烦死umijs如果构建国际化，会有一个locals的目录，里面存放前端项目中不需要存进数据库的各种语言版本文件，我就想实现只写中文的，其他版本通过nodejs+百度翻译api直接生成一、百度API文档地址需要注册开发者（使用时需要开发者的appid+密钥），并开通通用翻译API，每
2021-01-23 21:13:02
1945
原创 Fiddler抓包工具
Fiddler抓包工具Fiddler是一款免费的windows系统的抓包工具，可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作。我是在项目中需要代理项目的前端打包文件时接触到的，目前都在使用，为了防止忘记了一些功能，还是记录下来。一、下载安装https://www.telerik.com/download/fiddler官网下载的话要翻墙，还是在国内找资源吧，还是很多地方都有链接的！二、原理Fiddler是位于客户端和服务器端之间的HTTP代理， 它能够记录客户端和服务器之间的所
2021-01-23 21:10:22
556
原创 盘点ES6之后每次版本更新
盘点平常使用频繁，对开发者有重大意义的变更，无感的基本就没写，感兴趣的可以参考这篇 ES3到ES11都增加了什么ES61、let 和 const新的申明变量的方式和变量的作用域区别1：var声明的变量会挂载在window上，而let和const声明的变量不会区别2：var声明的变量存在变量提升，而let和const不存在变量提升区别3：let和const声明形成快作用域区别4：同一作用域下的let和const不能声明同名变量，而var可以2、字符串方法和模板字符串// 模板字符串
2020-12-12 14:57:50
654
原创 内网、外网、内网穿透、端口映射、IPV4、IPV6场景探讨
先附上各自概念，概念性的东西对于我们有一个大概的认识，那么实际使用与生活中又有哪些场景，来一一列举一些，了解下互联网的魅力！一、内网内网也叫局域网（Local Area Network，LAN），是在一个局部的地理范围内（如bai一个学校、工厂和机关内），一般是方圆几千米以内，将各种计算机，外部设备和数据库等互相联接起来组成的计算机通信网。如何形成内网1、最常见的通过路由器内网通信路由器只需一个外网IP就可以供下面的N多电脑联网，基于ipv4协议分配给每台连接的终端一个内网ip，关闭防火墙的
2020-12-12 14:36:53
11893
2
原创 Chrome控制台使用技巧
一、常用功能1、查看BOM，变量，简单计算2、copy和saving你可以通过全局的方法 copy() 在 console 里复制任何能拿到的资源，比如一些嵌套层级深的数据结构，使用copy可以直接拿到假如你在 console 中打印了一堆数据 (例如你在 App 中计算出来的一个数组) ，然后想对数据做额外的操作，比如刚刚说的 copy (在不影响它原来值的情况下) 。 那就可以将它转换成一个全局变量，只需要 右击 它，并选择 “ Store as global variable ”
2020-07-01 22:41:08
2164
原创 前端体验优化
一、UED用户体验设计（英语：User Experience Design），是以用户为中心的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。其目的就是保证：1、对用户体验有正确的预估2、认识用户的真实期望和目的3、在功能核心还能够以低廉成本加以修改的时候对设计进行修正4、保证功能核心同人机界面之间的协调工作，减少BUG。二、视觉体验前端出现的BUG基本上在测试阶段就能被发现，然后得到更正，实在没发现的，也无法从
2020-07-01 22:39:57
1296
原创 前端性能优化
浏览器渲染机制Html解析成DOM树，Css解析成CSS树，将DOM树与CSSDOM规则树合并在一起生成Render树，遍历渲染树开始布局，计算每个节点的位置大小信息，将渲染树每个节点绘制到屏幕阻塞渲染当浏览器遇到一个script标记时，DOM构建将暂停，直至脚本完成执行，然后继续构建DOM。每次去执行JavaScript脚本都会严重的阻塞DOM树的构建，如果JavaScript脚本还操作了CSSOM，而正好这个CSSOM还没下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM
2020-07-01 22:39:13
1003
原创 网页 SEO 优化（搜索引擎优化）
网页 SEO 优化什么是 SEO？全称：Search English Optimization，搜索引擎优化利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；SEO 包含站外 SEO 和站内 SEO 两方面；为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理...
2020-03-15 22:16:53
4207
原创 react 拖拽排序组件
react 拖拽排序组件git 仓库源码基于 html5 的 dragable 属性，可以自己封装个拖拽组件，react 相关的拖拽组件都非常的难以使用。只要掌握拖拽的原理，那么封装个这样的组件也不是难事，我最开始的难点就是，只能知道拖拽后在哪一个 element 上，但是并不知道放在哪个位置上去。最后观察拖拽组件，发现这个放置的位置是跟现在拖拽的元素和最后停留的元素位置上有关系的。安装n...
2020-03-15 18:51:04
3987
7
原创 前端图片裁剪组件
前端图片裁剪组件前端图片裁剪已经是很常见的需求了，在 react 的项目中推荐使用 react-image-crop 库，能勾勒出裁剪区域、宽高比例限制等等，但是还是有很多东西需要我们来做的，比如以下问题：react-image-cropreact-image-crop 的基本使用import ReactCrop from "react-image-crop";import "react...
2020-03-15 17:47:13
1977
原创 前端项目相关规范
前端项目相关规范为什么要规范项目？阅读体验差接手过别人代码的人都深有体会，有的代码动不动 3-5 千行，有的 aa，bb，，cc 的变量命名，还有 a1，a2，a3 的命名，还有换行、空格各种各样的，甚至不换行、不空格的。哎，说多了都是泪，所以这严重影响工作效率和团队协作。简单来说，太过随意的代码会让强迫症患者难以容忍，难以阅读理解的代码有时甚至不如推倒重来。低质量的代码产生 BUG...
2019-12-19 10:13:44
1544
原创 ECharts 在省份地图上定制自定义图标
ECharts 在省份地图上定制自定义图标原型上有个生态分布的板块，就像是每个国家想把国旗插到月球啊，北极，南极之类的，然后点击右侧的 lenged 能够打开关闭相应的部分。具体情况如下：要想实现这个功能需要以下几个步骤：引入 echartsnpm install --save echarts然后在文件中引入import echarts from "echarts";注册该省份...
2019-12-13 16:26:12
11558
2
原创 前端图片裁剪 react-image-crop
前端图片裁剪 react-image-crop前端图片裁剪已经是很常见的需求了，在 react 的项目中推荐使用 react-image-crop 库，能勾勒出裁剪区域、宽高比例限制等等，但是还是有很多东西需要我们来做的，比如以下问题：react-image-cropreact-image-crop 的基本使用import ReactCrop from "react-image-crop"...
2019-11-26 11:08:29
4184
原创 Quill 富文本编辑器二次封装
Quill 富文本编辑器二次封装Quill 是一个很流行的富文本编辑器，github 上 star 大约 21k。但是很少项目中使用时直接使用它，都要对其进行二次封装，你作为一个页面仔是挡不住有想法的产品经理的。安装 quill 库原生应用中使用<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="style...
2019-11-26 10:32:30
2421
原创 EventLoop
EventLoopeventLoop 是由 JS 的宿主环境（浏览器）来实现的；事件循环可以简单的描述为以下四个步骤:/*1. 函数入栈，当Stack中执行到异步任务的时候，就将他丢给WebAPIs,接着执行同步任务,直到Stack为空；2. 此期间WebAPIs完成这个事件，把回调函数放入队列中等待执行（微任务放到微任务队列，宏任务放到宏任务队列）3. 执行栈为空时，Event Loo...
2019-10-30 14:24:03
1606
原创 网络安全与常见攻击形式
常见web安全攻防网站安全的重要性大家能达成一致意见，作为web作业人员必须的在设计和开发的过程中考虑安全问题，并且能有效防御。这篇文章主要的内容就是分析几种常见的攻击的类型以及防御的方法。服务器之前听说朋友公司服务器使用windows系统，我大吃一惊，因为windows是用户交互系统，图形界面就需要占很多内存，而且稳定性不足，你windows电脑要是一个月不关机重启一定卡的要死。所以以下几...
2019-08-20 11:32:07
4140
原创 如何编写一个d.ts文件
如何编写一个d.ts文件.d.ts文件是ts模块，变量一系列的申明文件。比如要使用react，就需要安装"@types/react"，之后还会有提示。自定义全局声明文件，往往在根目录新建一个typings.d.ts文件全局类型变量有一个全局变量，那对应的d.ts文件里面这样写。如果一个.ts、.d.ts文件如果没有用到import或者export语法的话，那么最顶层声明的变量就是全局变...
2019-08-08 09:54:46
4835
全国省市区的名称、经纬度、等级的JSON文件
2019-11-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人