程序员白彬-CSDN博客

原创 JWT 没那么神秘，用它换掉 Session + Cookie 认证

本项目代码已开源，具体见。数据库初始化脚本：关注公众号，回复关键词“博客数据库脚本”，即可获取。

2024-07-22 09:04:10 2572

原创我的 VSCode 彻底崩溃了，重新安装无效，踩坑分享

换句话说，如果不删除这些，仅仅是卸载 VScode 程序，重新安装 VSCode 就会保持卸载前的状态。理性思考后，我想着既然系统功能都正常了，那多多少少还是 VSCode 自己的问题，会不会卸载过程中还留下了什么数据没删掉？而当我们遇到不可解决的 bug 时，此时的状态是一个糟糕的状态，也就没有保持的必要，如果不彻底清理 VSCode 用户数据，就无法正常使用。只要卸载程序后，将这两个文件夹顺手清空，就能恢复到一个干净的状态，重新运行 VSCode 安装程序就能正常使用了，也就不会遇到这个。

2024-07-21 19:29:26 867

原创使用 Docker 搭建 NodeJS 开发环境是一种什么体验？

最近和一些小伙伴在沟通这个博客全栈项目时，会发现其中一些朋友在安装依赖这个阶段就出现问题了，总是会问我“为什么依赖安装失败？”这个问题可能是前端或者 node 领域最常见的问题了，基本上每个人都遇到过，拉取一个项目后，依赖都装不成功，何谈继续使用呢？依赖安装阶段就失败，一部分原因来自于依赖版本锁的宽松性，很多时候我们不会锁死一个依赖的版本号，而是会采用这种范围限制，这就会导致在的时候，可能会尝试去安装一个更高版本的依赖，而这个更高版本的依赖可能会带来它的一些依赖项的兼容性问题，引起安装阶段报错。

2024-07-21 19:23:34 869

原创轻松学会生产环境 Docker 部署 Nodejs Express 项目

在前面的分享中，我们学会了使用 Docker 部署 Vue 前端项目，也学会了在 github actions 进行自动化部署。本文就来继续学习一下使用 Docker 部署 Express 项目，并最终将其移植到 github actions 中。

2024-07-21 19:19:50 989

原创在 CI/CD 中怎么使用 Docker 部署前端项目？

在上一篇文章《前端不懂 Docker？先用它换掉常规的 Vue 项目部署方式》中，我们学会了怎么使用 docker 制作镜像、推送镜像到 aliyun 私有镜像仓库，也学会了怎么在服务器上拉取最新的镜像进行容器部署。不过，这些都是过程式的命令，我们需要把这些过程提炼出来做成脚本，最终在 CI/CD 工具中直接使用，以实现全自动化的部署。具体怎么做呢？我们来看看！

2024-07-21 11:21:15 698

原创五分钟学会 Docker Registry 搭建私有镜像仓库

在上一篇文章《》中，我们学习了如何使用 aliyun 私有镜像仓库，也了解到可以使用 Docker Registry 搭建私有镜像仓库。这篇文章就分享下实操过程。是官方提供的 registry 镜像，可以用来搭建私有镜像 registry，有了它，我们就可以建立起私有的镜像仓库。

2024-07-21 11:11:48 1275

原创前端不懂 Docker ？先用它换掉常规的 Vue 项目部署方式

本项目代码已开源，具体见：数据库初始化脚本：关注公众号，回复关键字“博客数据库脚本”，即可获取。

2024-07-20 12:07:57 1360

原创小程序博客搭建分享，纯微信小程序原生实现

我是在 2019 年启动这个全栈博客项目的，当时自己的前端技术其实也不怎么样，但是我脑子里就一个想法，必须掌握一点点全栈技术，了解整个系统全栈是怎么运行起来的。于是，我就决定自己动手做一个全栈的博客，当时也还从没在公司做过小程序项目，就想着也做个小程序版的博客练练手。我学习一个新东西不太喜欢一来就上框架，我会先开始学一点最原始的基础，有了基础后，再换框架做，这样效率高，同时遇到框架问题也不至于由于没有了解过底层基础而无从下手去解决。

2024-07-20 12:06:16 827

原创前端上手全栈自动化部署，让你看起来像个“高手”

作为前端开发，你或许开发过很多酷酷的界面效果，做过很多复杂的产品需求，但是可能对服务器生产部署还不是很清楚。没关系，本文会分享一个开源博客系统是如何将前后端自动化部署到生产环境的，如果你正好缺乏这项技能，相信本文一定会给你带来巨大的价值，系好安全带，准备发车吧！

2024-07-19 09:16:15 641

原创前端轻松拿捏！最简全栈登录认证和权限设计！

你或许作为前端的课代表，开发了很多高级的登录功能，比如扫码登录、手机号一键登录、第三方授权登录、生物认证登录等，对 OAuth、JWT、双 Token 等关键词也能脱口而出，但是你可能还从未以一个全栈的身份完整地开发过一个登录功能。没关系，本文的目的就是解决你的这份忧虑，从一个极简的全栈登录认证功能入手，打破这个枷锁！前几篇文章提到过，在博客系统中，我们需要后台管理功能去维护我们的文章、留言评论等内容。既然是这样，后台管理的安全问题也得考虑，登录和权限设计是非常有必要的。

2024-07-19 09:00:08 1175

原创别背八股文了，WebSocket 是什么，我劝你花几分钟让面试官惊艳！

作为前端工程师，我们几乎每天都在使用 ajax / fetch 请求与后端进行数据交互，这种基于请求-响应的通讯模式，我们再熟练不过了，无论是C端产品或者是B端产品，都离不开这种通讯模式。但是像即时通讯IM类场景，通常不会选择这种“你来我回”的通信模式，而是会选择 WebSocket 这类的全双工通信模式。本文会带您全方位去了解一下 WebSocket 的本质，方便您搞清楚“Connection: Upgrade 是什么意思，为什么是它？”、“Upgrade: WebSocket 又是什么意思？

2024-07-18 09:39:43 800

原创评论系统的全栈设计思路，学会自己也能快速上手搭建

上篇文章讲完了文章详情页的整体实现思路，但是唯独没有讲到评论的实现，因为我认为评论这个功能的实现用几百到一千的文字根本讲不清楚，必须要单独抽离出来，而且文章评论和留言板又有很多相通之处，或者说本质上是一样的！

2024-07-17 13:54:58 934

原创一篇博客如何来到用户面前，分享前端也能看懂的文章详情页全栈设计

本项目代码已开源，具体见：数据库初始化脚本：关注公众号，回复关键字“博客数据库脚本”，即可获取。根据费曼学习法，把知识传递给别人并让ta懂，你才是真的学会了，好的，不偷懒，继续更新！

2024-07-16 09:33:56 942

原创在 Docker 容器中运行 Vite 开发环境，有这两个问题要注意

容器化开发给我们带来了很多便捷，但是在开发环境下也有一些问题要注意，如果不解决这些问题，你的开发体验不会很好。

2024-07-07 15:41:29 449

原创 Vite 中怎么添加全局 scss 文件

通过这些步骤，你就可以在 Vite 项目中成功添加并使用全局 SCSS 文件了。这种方法可以让你在整个项目中共享 SCSS 变量、mixins 和其他全局样式，提高代码的复用性和维护性。注意，对于 mixin 文件，需要在 vite.config.ts 中进行配置，而不是在 main.ts 中直接导入.当我们使用 scss 时，希望能够把一些定义变量，定义mixin 的文件全局加载，避免每处用到还要单独引入这些文件。在 src 目录下创建一个 styles 文件夹，并添加你的全局 SCSS 文件，例如。

2024-07-05 15:18:20 951

原创用 Coze 挖掘出疑似的掘金标题党，纯娱乐

最近 AI 的热度居高不下，Sora 横空出世又在 AI 话题上掀起了一个新的高潮。虽然每天还是会时不时的用一些平台的大模型工具帮助自己打开思路、提高工作效率，但是像这样的 AI 应用一站式平台，我之前确实没使用过。

2024-07-04 10:23:42 988

原创一键到顶和侧边弹射效果制作，复习巩固“切图仔”基本技能

2023 年再写一键到顶和侧边菜单栏弹射效果显得过于简单，不过既然是目录里规划好的一篇内容，咱还是按计划把它完成。首先通过两个动图看看具体效果，再来研究怎么实现！一键到顶：侧边菜单栏弹射效果：既然上面两种方法的兼容性不是很好，那么我们可以尝试自己用 JS 实现一下。得益于 JS 的灵活性，整个滚动行为的缓动效果和时长我们都能很好地控制。这里有两个问题要考虑，一个是总时长，一个是缓动效果。假设网页当前滚动的距离是1000px，计划0.5秒完成滚动到顶部的效果，假设是匀速滚动，那么相当于每个px。

2024-07-03 09:38:50 645

原创 git commit 怎么跳过 husky, commitlint 的检查

我们引入 commitlint 是为了保障代码入库的质量，但是有些时候，我们需要应急处理，比如你在升级框架时，通常不是一两天能解决的，可能希望临时把代码提交到一个分支，而这个时候，你改造的代码可能会有很多报错，这就意味着很难通过 commitlint 的检查。需要注意的是,这仅仅是应急使用，不要在正常开发节奏中跳过 commitlint 检查，这可能会导致 commit 质量下降,应该谨慎使用这些方法。可以在 commitlint 配置中设置忽略包含特定关键词的 commit。可以临时重命名或删除。

2024-07-02 23:34:09 746

原创 vue2 遇到 ?? 操作符不兼容问题，只要这两步就解决

我的 Vue2 项目是用 Vue CLI 搭建的，使用的 @vue/cli-service 是 4.5.x 版本。最后修改 vue.config.js，将 mermaid 加入到 transpileDependencies。研究过后，发现是?操作符不兼容，这个可以用 babel 配置解决。重新启动项目就不会报错了。

2024-07-02 15:13:15 274

原创跨域不一定不能共享 cookie

例如,baidu.com可以设置cookie的域名为.baidu.com,使其子域名如www.baidu.com、map.baidu.com等都能访问该cookie.然而，值得注意的是，虽然端口不同在理论上应该被视为跨域，但在实际的 cookie 共享机制中，同一域名下的不同端口可以共享 cookie。同一域名下的不同子域名可以共享cookie。虽然端口不同的情况下可以共享cookie，但完全不同的域名（例如example.com和example.org）之间默认情况下仍然不能共享cookie。

2024-07-01 17:50:21 536

原创解决 prettier/prettier 和 indent 冲突问题和一点简单思考

用过 prettier 的都知道，经常会遇到 prettier 与 eslint 的某些规则冲突的情况。在之前的一篇文章中，我简单地描述过怎么搭建起应用 eslint/prettier 的基本配置，也提到了怎么解决 prettier 与 eslint 的一些冲突问题。

2024-07-01 10:15:47 1190

原创为什么 npm run serve 正常，npm run build 就报错：digital envelope routines::unsupported

这个错误通常与 Node.js 版本和使用的加密算法有关。

2024-06-30 12:42:11 763

原创关于 pnpm monorepo 项目中 TS2742 Error 的 workaround

最近我在使用 pnpm 作为包管理器开发一个 monorepo 项目，从个人体验来说，在 monorepo 项目中，pnpm 确实要比 yarn classic 用得舒心，最让我欣喜的是 pnpm 对 workspace 协议的支持度很好；另外感受比较明显的一点就是，开发过程中感知到的由于依赖层级导致的 bug 也变少了。但是任何事情都不可能是完美的。果不其然，一个关键的 bug 就在等着我。

2024-06-23 21:13:50 1245

原创昨天发的 npm 包，却因为 registry 同步问题无法安装使用

如果你需要用到 HBuilderX 安卓云打包，就必须及时跟进 HBuilderX 的版本更新，否则可能会因为编译时和运行时版本不一致而在APP运行时爆出提示，如果这个提示被用户看见，那就有点尴尬。我想大概率是 registry 的问题，在国内环境，我们通常会用到 npmmirror，如果镜像站和源站的资源信息不同步，就有可能会出现这个问题。用过 HBuilderX 云打包的都知道，云上面的 Android 环境很有限，其实并不能覆盖 uniapp 生态所有的版本，甚至说只能覆盖最新的一两个版本。

2024-06-20 11:08:53 518

空空如也

空空如也