- 博客(60)
- 收藏
- 关注
RSS订阅原创 前端如何检测项目中新版本的发布？
你是否也曾遇到过这种情况，每次发完版之后都还会有用户反馈问题没有被修复，一顿排查之后发现他用的还是旧的版本。用户：在 XX 页面 XX 字段还是不展示我：刷新下页面用户：刷新了啊我：强刷一下，Ctrl + F5这一切都要归咎于浏览器缓存，那么如何解决这一痛点呢？这篇文章将介绍如何检测版本变更并通知用户刷新页面。1.1 安装..."build": {},...},"serve": {...1.3 配置// 这里配置插件2.1 创建插件，参考文档");})
2025-04-07 12:06:51
311
原创 CSS 锚点定位
Chrome 125 引入了一个 CSS Anchor Position API，它能够让元素相对于页面上的其它元素（锚点）进行定位。相比于传统的定位方式，锚点定位则更加简单灵活。接下来就简单介绍下锚点定位的基本使用从以上几个示例来看，只用简单的几行代码，就能够实现复杂的布局效果，足以见得这个功能的强大！CSS Anchor Positioning API 的推出或许是 Web 开发领域的颠覆性改变，大家可以尝试使用这项新特性，以便为未来的广泛应用做好准备。
2025-04-07 12:05:39
622
原创 如何管理多个 Git 身份
不知道大家有没有这样一个困扰：在同一台设备下开发公司项目和个人项目需要频繁切换 git 身份，一不小心忘记切换，就会导致项目中的git提交信息混乱。假如你已经在项目中使用错误的 git 身份提交代码，不用担心，看完这篇文章为什么你的 GitHub Contributions 没有被正确统计，相信你会知道如何补救的。
2025-04-03 14:06:30
525
原创 Angular 国际化
国际化，通常被称作i18n，是指设计和开发软件产品，使其能够轻松地适应不同的语言、地区和文化的过程。提取出用于翻译的文本将文本翻译成各个区域的语言。
2025-04-03 14:04:49
402
原创 检测无后缀名的文件类型
一般情况下我们判断一个文件是什么类型都是通过看它的后缀名，例如xx.mp3xx.mp4xx.jpg，但是这并不准确！假如我把xx.wav文件的后缀手动改成了.mp3，但它的文件类型依旧是 wav，因为计算机是通过读取文件二进制的前几个字节来区分文件类型，对于大多数类型的文件，起始字节都是固定的，这些字节通常被称为 “魔数” （Magic Number）
2025-03-31 17:21:05
419
原创 The Open Graph Protocol（开放图谱协议）
当今互联网时代，社交媒体成为了人们分享信息和互动的主要平台之一。为了优化网站在社交媒体上的展示，提高网站内容的可分享性和可访问性，开放图谱协议（The Open Graph Protocol）应运而生。开放图谱协议是一种开放标准，旨在帮助网站确定如何在社交媒体上分享页面的内容。它由Facebook于2010年首次推出，后来成为开放社交图谱的一部分，支持包括Facebook、Twitter、LinkedIn等在内的多个社交媒体平台。该协议使用HTML标签来定义页面的元数据，以提供更丰富的社交分享信息。
2025-03-14 10:31:43
424
原创 为什么你的 GitHub Contributions 没有被正确统计
在公司摸鱼的时候写了点自己的代码，但是当我打开 Github 主页查看贡献图的时候发现我的提交没有被记录，于是我通过。查询 Commit 记录，检查出作者信息中的邮箱地址有误，没有切换成个人的邮箱地址。3、脚本运行成功后，查看 Commit 信息是否替换成功。4、将正确的 Commit 历史推送到远程仓库。1、通过以下命令拉取一个新的仓库。方法一：在项目根路径执行以下命令。给项目单独设置用户名和邮箱。5、删除刚创建的本地仓库。
2025-03-13 18:04:03
373
原创 Git 修改 Commit 记录
当你使用Git进行版本控制时，难免会遇到需要修改提交记录（commit history）的情况。可能是因为提交信息写错了、忘记添加某个文件、需要重新排列提交的顺序，或者其他各种原因。不过，要注意的是，修改提交记录可能会影响到团队协作，因此需要谨慎处理。
2025-02-10 16:33:57
1168
原创 解决 Video 中设置字幕出现的跨域问题
最近在写一个视频播放器，但是当我给视频添加字幕之后，出现了跨域问题，这里记录一下。以下是用于测试的视频和字幕的链接视频：https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4字幕：https://cdn.plyr.io/static/demo/thumbs/240p.vtt。
2025-02-10 16:33:16
474
原创 Node.js 实现简单爬虫
爬虫是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。本文将使用 Nodejs 编写一个简单的爬虫脚本，爬取一个美食网站，获取菜品的标题和图片链接，并以表格的形式输出。通过学习这个简单的示例，您可以进一步探索更复杂的爬虫应用，处理更多类型的网页和数据，并加入更多功能来实现您自己的爬虫项目。
2025-02-07 18:36:31
1498
1
原创 VSCode 换行符问题
默认情况下，VSCode 在不同操作系统上使用适当的换行符格式。例如，在 Windows 上，默认使用 CRLF 格式，而在 macOS 和 Linux 上，默认使用 LF 格式。中，换行符问题通常涉及两种常见的换行符格式：CRLF（Carriage Return Line Feed）和 LF（Line Feed）。团队开发中因为要统一格式，所以都会配置 ESlint 格式校验，当两个不同操作系统的人一起开发，难免会遇到换行符格式的问题。文件 - 首选项 - 设置 - 搜索 eol - 修改 eol 为。
2025-02-07 18:34:35
1090
原创 用 Node.js 实现一个上传图片接口
是一个流行的 Node.js Web 框架；的新文件夹，并初始化一个包含默认设置的。入口文件，并实现简单的上传图片逻辑。是一个用于处理文件上传的中间件。在当前目录下创建一个名为。
2025-02-05 10:37:45
628
原创 如何生成 SSH 密钥
SSH 密钥是一种安全连接到远程服务器的方式。通过使用 SSH 密钥，您可以实现更安全、更便捷的身份验证，并免去传统的用户名和密码登录方式。
2025-02-05 10:36:34
1011
原创 “万能” 的 reduce
reduce是 JavaScript 数组的一个高阶函数，它用于将数组的每个元素按照指定的方式进行归约（合并）操作。reducecallback回调函数，它执行数组的归约逻辑。初始累加器的值，可选，如果未提供初始值，则将使用数组的第一个元素作为初始值，然后从第二个元素开始进行归约。callback累加器（accumulator）：用于累积回调函数的返回值。它在每次调用回调函数时更新。当前值（current value）：正在处理的当前元素。
2025-01-23 10:03:58
329
原创 React 项目更换成 Vite 构建
通过传统方式(CRA) 来创建的 react 项目，CRA 是基于 webpack 打包的，每次将整个项目打包完成之后才能启动，太慢了，尤其是当代码量增加的时候，会越来越明显。所以打算将公司的 react 项目替换成 Vite 构建，Vite 基于 Esuild 打包依赖，采用按需编译的方式，速度比 webpack 快了 5-10 倍！
2025-01-23 10:02:30
655
原创 博客搭建 — 添加图片放大功能
Fancybox是一个流行的 JavaScript 图片和媒体轻盒效果库，用于在网页中展示图片、视频、内联内容和多媒体内容。它提供了一种优雅而灵活的方式来创建响应式的弹出窗口，使用户能够以漂亮的方式浏览和交互。
2025-01-22 09:45:37
978
原创 博客搭建 — 站点优化之图片懒加载
图片懒加载是一种优化网页性能的技术，它延迟加载页面中的图片，只在用户需要时才进行加载，从而减少初始页面加载时的资源请求和传输量。不是浏览器识别的属性，浏览器遇到具有该属性的图片标签时不会加载图片。如果不更改属性，所有图片将立即加载，而不是延迟加载。脚本决定何时加载图像，而不是由浏览器决定。让该技术成为非常简单的实现策略。
2025-01-22 09:44:00
164
原创 Git 分支合并
当执行rebase操作时，git会从两个分支的共同祖先开始提取待变基分支上的修改，然后将待变基分支指向基分支的最新提交，最后将刚才提取的修改应用到基分支的最新提交的后面。当你想要将一个分支的更改合并到另一个分支时，你可以使用Merge操作。一般来说，在合并公共分支（如主分支）时，应该使用Merge，因为Rebase可能会产生潜在的冲突和提交丢失。而在合并个人分支或本地分支时，Rebase可以帮助你保持提交历史的整洁性，提供更好的开发体验。，将基分支上的更改同步到待变基分支上。
2025-01-20 12:10:21
567
原创 前端如何实现分页
虽然在实际开发中，大多数分页都是由后端处理，但还是有小部分场景需要前端来实现分页。实现并不难，仅作为记录，方便下次拿来直接使用。list是用于切割出每页数据的原数组，不可更改，通过点击页码调用pagination方法生成一个新的数组。是用于展示在页面上的当前页数据。
2025-01-20 12:09:21
837
原创 博客搭建 — Algolia DocSearch 实现站点搜索
DocSearch会定期爬取你网站的内容并分析，并对标题和内容建立索引，用户输入关键字查询，匹配站点内容然后将结果返回给客户端。DocSearch提供了一套精美的样式，以及完善的api，只需要少量的代码就能实现一个强大的搜索功能。帮助您在站点和应用程序上实现高效、灵活和有见地的搜索。为您的用户提供快速而丰富的搜索体验。3、在页面上使用Search组件，已经能够看到基本的样式。1、安装Docsearch的js库。DocSearch分为爬虫和前端库。2、封装一个Search组件。
2025-01-19 09:46:37
916
原创 Vercel Serverless 部署 Node API
Vercel是一个面向现代Web应用程序的全球托管平台。从开发到生产，Vercel的内置CI/CD可以轻松自动化您的工作流程，从而简化协作。专为Web设计的无服务器存储Vercel与Github仓库关联，当仓库代码有变动的时候，就会自动触发Vercel的部署。支持自定义域名支持很多前端框架，例如next.jsvitepress等。支持ServerlessFunction，可以很方便的写一些后端API接口。Serverless。
2025-01-19 09:39:40
966
原创 SVG To Font 创建自己的字体图标库
字体图标是一种特殊的字体，它可以像文字一样，通过CSS来控制它的大小和颜色。SVG虽然也能在网站中直接使用，但是它如果要修改大小或者颜色的话，就需要更改SVG的源码，特别不方便！字体图标是一种特殊的字体，它可以像文字一样，通过CSS来控制它的大小和颜色。网上有许多SVG转Font的方式，这里介绍一种js库。，可以免费下载各种SVG文件。准备SVG文件，推荐使用。
2025-01-18 21:11:33
629
原创 关于我的博客建站经历
我是一名前端开发工程师，从大四的时候开始自学前端，荒废了三年时光，在大四的时候才算真正走进“编程”这扇大门。也是从那个时候开始学着搭建自己的个人博客，用来记录自己的学习笔记，但是却坚持不下来。而且发现一个奇怪的现象，对于搭建站点的过程我很感兴趣，内容输出却坚持不下来，这是我需要反思的地方。我也翻了翻过往的文章，大多都是记录单一知识点，而且内容很少，缺乏自己的思考。现在AI技术已经很成熟了，再记录这类的文章已经没有意义了，用AI工具一搜就出来了，而且更精准，更丰富。所以我觉得分享自己的踩坑记录会更
2025-01-18 21:08:56
1133
原创 博客搭建 — GitHub Pages 部署
GitHub Pages 是一项静态站点托管服务，它直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件，通过构建过程运行文件，然后发布网站。
2025-01-17 09:57:34
1791
原创 博客搭建 — 接入 giscus 评论插件
静态站点在没有服务器的情况下想要接入评论功能，使用第三方插件是一个不错的选择，这里介绍一款好用的评论插件：Giscus，Giscus 是一个基于 GitHub Discussion 的评论系统，仓库中的 Discussions 便是存放评论的地方。
2025-01-17 09:54:35
399
原创 Node.js 写一个登录中间件
在上述示例中，中间件首先从请求头中获取 JWT（通常放在标头中）。然后，它使用提供的密钥（与生成 JWT 时相同）验证 JWT 的有效性。如果验证成功，它将从 JWT 中提取用户信息，并将其存储在请求对象的user属性中，以便后续中间件或路由处理程序使用。如果 JWT 验证失败或未提供 JWT，则返回未授权的错误响应。请注意，上述示例使用了简化的密钥（secretKey在实际应用中，请使用更长且安全的密钥，并将其存储在环境变量或配置文件中，而不是直接硬编码在代码中。
2025-01-16 16:31:39
673
1
原创 Git 规范
遵循 Git commit 规范可以提高代码提交信息的可读性和可维护性，方便团队成员之间的沟通和代码审查。功能开发分支，从 develop 分支创建，开发完成后合并回 develop 分支。Git commit 规范是一种约定俗成的方式，用于规范化提交信息的格式和内容。预发布分支，在合并好 feature 分支的 develop 分支上创建。开发分支，feature 分支都是基于 develop 分支下创建的。主分支，用于部署生产环境，不能直接在该分支上开发。功能 bug 修复分支。
2025-01-16 16:23:20
278
原创 前端如何排查内存泄漏
使用浏览器开发者工具（如 Chrome DevTools）进行内存分析。确保移除不再需要的事件监听器和定时器。避免在闭包中持有不再使用的对象引用。使用工具和日志来帮助识别和跟踪内存使用。通过持续关注这些方面，可以有效避免内存泄漏，保证应用的性能。
2024-12-31 18:24:25
2188
原创 交互式 Node 脚本
交互式脚本允许用户通过命令行输入数据或做出选择，程序根据用户的输入执行相应的操作。要求用户在运行时提供参数或选择。用户通过交互式方式选择配置选项。用户通过一系列提示进行操作（例如选择安装路径、确认安装等）。交互式脚本的目标是让程序能够“理解”并“响应”用户的输入，增强脚本的灵活性和智能化。
2024-12-31 18:14:35
1100
原创 CSS 文本超出省略
需要注意的是，这种多行省略的效果只在使用 WebKit 内核的浏览器中起作用，如 Chrome 和 Safari。对于其他浏览器，可能需要使用其他技术或 JavaScript 库来实现类似的效果。
2023-09-10 10:43:06
422
原创 解决跨域的几种方式
前端通过代理方式实现跨域，可以通过配置一个 Node.js 的 Express 代理服务器，然后在前端发送请求时，将请求发送至代理服务器，代理服务器再将请求转发至目标服务器，获取响应后再返回给前端。标签并添加到 DOM 中，指定 src 属性为带有 callback 参数的请求 URL，服务端会将响应数据以回调函数的参数形式返回，从而实现获取数据的目的。当响应数据返回后，客户端自行定义的回调函数会被触发。在同源域名下，通过服务端代理请求目标网站的资源，再将响应结果返回给客户端，从而实现跨域访问目标资源。
2023-09-09 12:23:25
539
原创 React + Antd 实现一个TodoList
打工人的一天，没用TodoList之前，先完成优先级高的任务，做完之后花一分钟思考下一个任务，突然间又插一个任务进来，然后又忘了下一步要干什么，弄的手忙脚乱。下班前写日报，翻聊天记录，看代码，看cr，总结自己做了什么。用了TodoList之后，首先列一个待办清单写下这一天所需要完成的工作内容，完成之后勾选一下，中间有需求插入，就再新建一个任务，有条不紊的完成一天的工作，最后再根据已完成项总结出工作成果，输出工作日报。
2023-02-19 21:12:09
576
1
原创 Node.js — 搭建一个简单的node服务器
使用node + express 搭建的简单服务器，支持mock数据，支持跨域。方便我们在后端未提供接口之前更好的开发。
2022-11-26 18:41:16
609
原创 Git — husky + eslint 实现代码提交检测
1.1 安装eslint1.2 初始化eslint，生成配置文件1.3 在编辑器安装插件1.4 通过执行命令检测文件代码规范二、配置husky2.1 安装husky2.2 在 package.json 中加入prepare脚本，每次在 npm i 安装完依赖后都会执行这个命令2.3 添加 pre-commit 钩子运行完之后会在 .husky 文件下新增 pre-commit 文件若 pre-commit 文件生成失败，可手动添加三、配置 commit 提交规范3.1 安装 commit
2022-10-19 22:03:21
2053
原创 nrm的安装与使用
nrm 是一个 Node.js 的 npm registry 管理工具，它允许你在不同的 npm registry 之间切换，方便你在不同的网络环境下使用 npm。
2022-01-06 20:54:06
944
1
原创 Javascript — 数组常用方法
定义一个数组，接下来操作的数组都以这个为例const arr = [3, 10, 18, 20];forEach遍历数组中的每一项，跟 for 循环的作用是一样的arr.forEach(item => { console.log(item);});// 依次输出：3、10、18、20some依次遍历数组中的元素，若有满足条件的则返回 true，剩余的不会执行。若无满足条件的则返回 falseconst result = arr.some(item => { return
2021-08-29 09:31:42
188
原创 Echarts — 绘制省级地图
版本：vue@3.0.5 + echarts@5.1.2本文将介绍如何使用 echarts 绘制一个省级地图（以江西省为例）
2021-08-28 20:26:03
3452
2
原创 Vue.js — 拦截页面跳转
本文介绍的是全局前置守卫 `router.beforeEach` ，它常用作登录拦截，该函数会在每次路由跳转前执行，在此期间做一个登录判断，只有登录过后才具有访问路由的权限
2021-08-26 22:01:39
2141
原创 JavaScript — resize事件监听窗口变化
前言resize 事件是在浏览器窗口大小发生变化时触发，利用该事件可以跟踪窗口大小的变化来动态调整页面的元素显示。接下来利用 resize 事件实现一个小案例：监听浏览器窗口变化，实时获取该窗口的宽度和高度。实现首先写一个获取窗口宽高的方法const getWindowInfo = () => { const windowInfo = { width: window.innerWidth, hight: window.innerHeight } console.log(wind
2021-08-26 21:12:10
37058
7
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人