Initial connection超時接口無法正常請求Status canceled
問題描述 最近上了一版需求，其中有一個接口因為後端的計算量超級巨大，導致接口時間要達到七八秒才能返回對應結果。 上了生產環境以後，請求總是失敗。 測試環境是好好的... 查看控制枱請求發送的報文相關信息如下： 筆者看一下報文，發現請求的狀態從開始的pending等待到最後的canceled取消。 點開請求的Timing面板查看，發現請求卡在Connection Star的Initial conn
水冗水孚 Blog
Stories
List
力扣之 4 的冪 & 3 的冪 & 2 的冪（遞歸思想）
題目描述 給定一個整數，寫一個函數來判斷它是否是 4 的冪次方。如果是，返回true；否則，返回false。 整數n是 4 的冪次方需滿足：存在整數x使得n == 4x 示例 1： 輸入： n = 16 輸出： true 示例 2： 輸入： n = 5 輸出： false 示例 3： 輸入： n = 1 輸出： true 力扣原題目地址 4 的冪：https://leetcode.cn/probl
長風網視頻—網課刷課腳本&console控制枱粘貼回車即用
思路 一些視頻學習網站，在學生觀看一段時間後，就自動暫停，防止學生掛機 針對於這個情況，我們可以寫一個腳本去處理，從而做到電腦不關機 睡覺的時候，也能夠自動播放，就很嗨皮 大致就是，通過setInterval定時檢查判斷視頻狀態 並且派發點擊事件讓視頻播放 這樣的話，就可以掛機了 其他的視頻類網站也是類似的思路... 腳本一 document.querySelector(".btn
手寫一個簡單的谷歌瀏覽器拓展插件（附github源碼）
前言 閲讀本文，可以自己寫一個簡單的瀏覽器插件 以及前端瀏覽器插件相關東西 附上github源碼：https://github.com/shuirongshuifu/browser-plugin 接下來學學這個不常用的知識點吧... 效果圖 我們先看一下，自己手寫的簡單插件的操作效果圖（點擊彈出時間） 拓展程序部分 或者地址欄輸入：chrome://extensions/ 回
算法的應用場景之尋找最近數&時間線組件錨點跳轉對應位置
需求描述 前兩天和以前公司的同事聊天，他提到在刷leetcode，並提到算法感覺不接地氣 似乎也沒有什麼應用場景 於是乎，筆者翻出一個案例需求給到他 看完以後，他感嘆道： 還是自己見得少了... 需求：假設有一個時間線組件，按照時間順序展示對應內容，如下圖 這個時間線可能很長，能有好幾個月 為了提高用户體驗，當用户進入這個頁面的時候 我們需要看看當天是哪一天，同時滾動到，距
fastify-sse-v2搭配EventSource實現SSE中的AI流式回覆打字機效果
本文不贅述具體概念，通過具體案例效果，學習sse （Server-SentEvents）的具體實現，以react框架為例 SSE具體應用場景 SSE（Server-Sent Events，服務器推送事件）是一種基於 HTTP 的單向實時通信協議，核心特點是服務器主動向客户端推送數據，客户端僅被動接收，無需頻繁輪詢，且天然支持斷線重連、事件標識等特性。其應用場景主要集中在 “服務器需主動向客户端推送
效能工具（八）之vite開發或生產環境下的命令行變量傳參（比如啓動項目時多視圖選擇其一）
需求描述 前段時間有這樣的一個需求： 筆者有一個項目，在啓動或者打包的時候 需要根據一些實際情況，去選擇展示那個視圖 就是我們在項目啓動或者打包的時候，需要注入一個全局變量（保存在.env.development或.env.production文件中）通過命令行npm run dev的方式 一般來説，vue-router就可以實現這個需求 但是，某些情況下，這個需求不太適合用vue-
彈性盒佈局之從左往右，空間不夠換行繼續從左往右（從左往右，從上往下，between效果）
本文記錄一個css小技巧，不難，不過可能自己一時間想不到 問題描述 我們有這樣的需求，大容器中有很多的盒子，從左往右排列，空間不夠的話，然後換行，繼續從左往右排列，如下效果圖 看到這樣的需求，我們第一時間想到的就是彈性盒佈局，給大容器開啓彈性盒、允許換行，兩側分佈，於是會寫下如下代碼： display: flex; flex-wrap: wrap; justify-content: space-
通俗易懂講解並手寫一個vue數據雙向綁定案例
問題描述 面試中，面試官除了問基礎知識以外，還喜歡問一些框架原理。比如：你對vue的數據雙向綁定mvvm是如何理解的？網上的部分貼子可能寫的有點抽象，不便於快速閲讀理解。本篇文章就使用通俗易懂的簡單方式，來講解並實現一個簡單的vue數據雙向綁定原理demo，希望對大家有一定的幫助 先複習基本知識 為了便於大家更好的理解下文數據雙向綁定的代碼，我們最好先複習一下舊知識，如果基礎知識紮實的道友，可以直
50多張圖詳細記錄——使用Jenkins完成前端項目CICD自動化部署教程（不踩坑！）
前言概述 本文記錄使用docker安裝jenkins以後，推送代碼到gitee和gitlab上，而後執行構建前端項目的過程，對應cicd的操作設置流程環節 包含：手動觸發構建和webhook自動化構建 50多張圖，詳細記錄過程，且按照筆者的這篇文章操作，不會踩坑被卡好久（筆者已經踩過坑了） 前端CICD自動化部署角色分工 前端開發過程中，關於項目發佈上線，標準化而言涉及四個角色（假設是四台硬件設備
vue3中實現live2D技術的應用虛擬角色數字人live2d-render、pixi-live2d-display
什麼是live2D技術？可以用來做什麼？ 請點擊看效果：http://ashuai.work:8890/#/16 簡而言之： 可以用來創建虛擬角色、數字人的技術 達到類似於動漫、插畫、遊戲中的人物效果 可動作交互、語音發聲 可以用到的平台很多，比如Web、Native、Unity、遊戲引擎、JAVA等平台 就前端而言，3D項目使用threejs，2D項目使用pixijs 所以，pix
連接mysql：Error: connect ECONNREFUSED ::1:3306 at TCPConnectWrap
問題描述 筆者把服務器上的node，從14升級到18 再次使用express的連接池連接mysql的時候（mysql版本：2.18.1） 出現連接不上的報錯 報錯信息如下： Error: connect ECONNREFUSED ::1:3306 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
使用nodejs的express框架實現大文件上傳的功能，附完整前後端github代碼
問題描述 兩年前，筆者寫過一篇文章 《面試官桀桀一笑：你沒做過大文件上傳功能？那你回去等通知吧！》 當時，後端是用java語言寫的 本篇文章，就是講解一下，後端的nodejs如何實現大文件上傳 後端使用node的express框架寫 完整代碼在github上：https://github.com/shuirongshuifu/bigfile 在看本篇文章之前，建議看一下之前的筆者的大
面試官：你是前端你瞭解oss嗎？我反手寫了一個react+express+minio實現oss文件存儲功能
我有一個朋友，前端，最近在找工作，面試官就問了他，對oss瞭解嗎，他沒回答上來，於是就有了這篇文章... 介紹 本文簡介 本文使用react實現前端，node的express框架實現後端，搭配開源的minio 實現一個oss文件存儲服務功能 有助於前端更好地理解文件存儲的過程 完整項目代碼：https://github.com/shuirongshuifu/react-node-mini
express使用node-schedule實現定時任務，比如定時清理文件夾中的文件寫入日誌功能
需求描述 日常開發中，我們常常會要執行一些定時任務 比如定時清理文件夾，定時發郵件等 本文是在node的express框架中用node-schedule這個包 來實現定時清理文件夾功能 node-schedule介紹 node-schedule 是一個用於在 Node.js 環境中調度和執行任務的庫。 這個包可以設置定時任務、週期性任務以及一次性任務 很靈活，很強大，精度高，也
面對業務需求，多思考一下如何更好實現，不要成為麻木的前端npm調包俠
前言 前段時間，有一個業務需求，就是要實現類似excel單元格可以選中的需求，需求如下： ✅ 單擊切換選中狀態 ✅ 按住Ctrl鍵進行拖拽多選 ✅ 禁用項處理 ✅ 右鍵清空所有選中 ✅ 連續選中的視覺效果優化（邊框合併處理） 效果圖 線上預覽地址：https://ashuai.site/reactExamples/verticalSelection github地址：https:/
實現el-table樹結構表格展開摺疊且合併單元格功能（兩種思路）
需求描述 樹結構表格 可展開摺疊，有children子集項 並且對應列還需要合併單元格（大類合併） 筆者試了試 使用el-table自帶的樹結構表格似乎沒法實現 就這個：:tree-props="{children: 'children', hasChildren: 'hasChildren'}" 於是，只能換種思路實現了 添加行、刪除行方式，同時動態計算需要合併的單元格信息 效
從外包跳槽甲方，BOSS上1910個溝通、353次簡歷發送、21場面試，通過9家，最終選18K的offer，最高漲幅26.7%
前言 筆者的一個好友（女生），學歷普通一本，非科班出身，在國內一家大型外包公司上班 因遲遲無法轉正成為正式甲方員工（當初入職的時候承諾，有一定的機率轉正成為甲方員工） 且在這家公司認真工作了三年多了，三年只漲工資500塊錢 遂在六月份開始準備跳槽去甲方 歷時將近三個月，總算是在8月底拿到了自己滿意的offer 一共是通過了9家的面試，其中有6家是外包公司（練手的面試） 當然，外包的
存在風險的javascript庫發現存在漏洞的'jquery'庫的快速解決方案
問題描述 某些公司的項目可能偶爾會有安全掃描軟件去掃描漏洞 然後項目中使用了jquery包 然後，因為jquery的版本低了 導致安全掃描軟件提示，版本低，存在漏洞，請升級到高版本 但是，高版本的jquery有一些語法發生變化了 假若是老項目，會牽一髮動全身，會出現一些奇怪的報錯 就是不太好升級 解決方案很簡單，直接修改版本號（障眼法） 安全掃描漏洞簡要報告
雙指針算法在實際開發中的具體應用之代碼Review文章字符串的片段分割
本文是筆者在實際中具體遇到的場景，從中提取具體的核心的部分，使用前後指針進行性能優化的具體案例 開發需求場景 前段時間，筆者在做代碼Review的時候，發現了一個需求的前端實現方案不太優雅 組員選擇使用了循環加切割的方案去處理這個字符串 筆者最終將其改為，使用快慢指針的方式，讓其變得更加優雅，性能更佳 需求描述 後端有一個字段返回一篇中文文章的具體內容 比如有一個artical文章
你用過docker部署前端項目嗎？Tell Me Why 為何要用docker部署前端項目呢？
需求開發場景 在説docker之前，我們先來看看一般的需求開發和部署場景，是否需要安裝node 需求開發部署場景 開發環境，我們使用windows或mac，開發前端項目，正常來説，都是要安裝好對應node版本 ，使用node提供的npm包管理（構建）工具【除非是一個簡單的只有hello world的html文件不用node】 生產環境，要發佈到服務器上 1. 靜態SPA單頁面應用部署 服務器
Ubuntu服務器上使用docker-compose部署 gitlab（圖文並茂記錄）
為何使用docker-compose進行GitLab的部署安裝 原因：docker-compose便於對GitLab 容器進行資源控制進行（如優化節省服務器資源、便捷刪除等） GitLab本身是一個笨重的應用服務，一般來説，需要4核CPU和8GB內存才能正常運行，再低一些也行，不過需要把gitlab自帶的一些功能服務給進行優化，比如有： Puma Worker Processes
從一個動畫需求，來學習js中animation動畫事件的具體應用
本文通過一個具體的動畫需求，來講解一下js中animationend事件使用 在線演示效果一：https://ashuai.site/reactExamples/animationEvent 在線演示效果二：https://ashuai.work:8890/27 前言 平常，我們代碼中，會做一些事件的監聽 比如點擊事件、右鍵事件、滾動事件等 實際上，js中還提供了動畫事件的相關ap
每天進步一點點——學習高度過渡的四種方式
每天學點知識點，每天進步一點點，本文記錄了高度過渡變化的四種方式，大家一塊來查漏補缺，或者回顧知識吧😉😉😉 常見的四種方式的高度過渡 目前常見的高度過渡的方式有四種 transition + height transition + max-height transition + tranform:scale(0/1) JS方式計算元素的高度 實際上，還有一個height: c