博客 / 列表

DiracKeeko - [前端] 間接依賴的版本處理

最近工作裏遇到個問題,公司的流水線檢測到了某個前端工程中用到了vite @4.5.2,vite@4.5.2這個版本存在安全漏洞 CVE-2025-31486、CVE-2025-31125、CVE-2025-30208,是風險項,會被阻斷。 修復建議是vite升級到 [4.5.12, 5.0.0) [5.4.17, 6.0.0) [6.0.14, 6.2.0) 或 =6.2.5 版本 我檢查了一下項

npm , 前端

DiracKeeko - [React] react項目keepAlive導致的頁面切換Tooltip不消失

最近在做一個項目,把原來的vue2工程用react重構,遇到了這樣一個場景。 頁面有keepAlive,在vue2項目中,用原生的keepAlive實現。react項目中為了實現keepAlive引入了react-activation依賴。 react-activation的使用,本文不表,下面看我遇到的問題。 在概覽頁(列表頁),鼠標移入之後,出現Tooltip,點擊此選項,頁面跳轉(進

react , tooltip , keep-alive , 前端

DiracKeeko - [JS] javascript中的原型鏈01 prototype&__proto__

先給出名詞的定義: 1、實例對象-被new出來對象稱之為實例對象 例如: const p1 = new Person() p1就是實例對象 2、普通對象-未經new,直接聲明的對象是普通對象 例如:const p2 = { name: "John" } p2就是普通對象 3、prototype, 中文翻譯:原型對象 4、__proto__ ,中文翻譯:原型 (英文可以讀作dunder

原型鏈 , 前端 , Javascript

DiracKeeko - [JS] javascript中的原型鏈02 prototype&constructor

這是構造函數和構造函數的prototype之間的關係 Person.prototype.constructor === Person; // true 那麼對Person創建的實例對象p1 p1.__proto__.constructor === Person; // true 在瀏覽器控制枱中輸入如下代碼 function Person(name) { this.name = name;

原型 , constructor , 原型鏈 , 前端 , Javascript

DiracKeeko - [JS] javascript中的原型鏈03 原型鏈的終點

書接上文[[JS] javascript中的原型鏈02 prototypeconstructor](https://segmentfault.com/a/1190000043925349) 為了邏輯關係的清晰,我們去掉表示constructor的線條,加上Object對象,用.__proto__到達原型鏈的終點null。 javascript中原型鏈的終點是null,(Object.pro

原型 , 原型鏈 , 前端 , Javascript

DiracKeeko - [前端基礎] HTTP請求GET與POST

開發中同事問了我一個問題 Q: GET請求能不能用request body來傳遞數據? 這個問題的場景是,他們的前後端溝通需要攜帶複雜的參數,用POST方法的request body(key value)的形式傳參會更加明瞭,但又覺得不夠語義化,所以想到了GET + request body。 A: HTTP規範rfc2616中是沒有對GET方法的使用body做限制( HTTP 規範並

post , HTTP , get , 前端

DiracKeeko - [CSS] flex佈局+white-space: nowrap寬度異常

在flex佈局中,定義一行三列並列的3個div,其中2個div寬度寫定,第3個div隨着父容器寬度由flex自適應。這是個很常見的佈局,平常使用沒有啥問題。 現在在第3個div中放置一段長的純文本(文本內容單行放置寬度大於第3個div的寬度),且設置white-space: nowrap,此時就會出現第3個div的寬度被文本撐開,變為單行文本的寬度,而不受flex佈局的約束。且由於第3個div的寬

flex , white-space , Css

DiracKeeko - [nginx] 一個CORS的漏洞修復

前端項目被掃描出了一個CORS漏洞,記錄一下漏洞的復現和修復。 首先要明確,這個問題出在哪裏。 我負責的系統是一個前後端分離的應用,前端部署使用Nginx做反向代理。對於前端應用來説client是瀏覽器,瀏覽器發起的請求都是通過nginx配置轉發到不同後端的服務器。 舉個例子,某個用户用瀏覽器瀏覽頁面,發起了4個請求: front.domain/api/auth/login - auth服務

cors , Nginx , 前端

DiracKeeko - [axios] 版本升級,特性變更記錄(高版本post請求異常)

axios 原版本 0.19.2,升級到0.27.2 出現了部分post請求發送異常的情況。 經查發現雖然大版本號同為0,但是0.27.2的內部邏輯有變更。 (0.27.2版本去掉了一些0.19.2版本中的對config的兼容性處理),導致0.19.2中不規範的api使用方式在0.27.2中無法生效。 問題發生在使用類似於下面這種形式發送post請求。 axios.post(ur

Axios , 前端

DiracKeeko - [axios] 實現頁面級批量取消請求

在請求發送階段(未取得返回結果時),前端(瀏覽器)取消請求,捕獲該狀態,並做異常攔截處理。 思路: 1、記錄每個請求的cancelToken。 2、在頁面路由更新時(從頁面A進入頁面B時)取消A頁面未完成的請求。 3、把"取消請求"的異常狀態做一個特殊的異常標記。 4、全局請求攔截器對這種特殊的異常標記做靜默處理。 代碼實現: 1、全局的請求實例攔截器中,增加配置,通

Axios , 前端

DiracKeeko - [axios] axios發送 及 接收處理二進制數據

一、發送攜帶二進制數據的請求 在圖片上傳、文件上傳等場景中,需要發送payload為二進制數據的'POST'請求 注: 只要請求體中不是純 JSON 或字符串,而是包含或完全由二進制數據構成的內容 (如文件、音視頻、圖片),就需要發送payload為二進制數據的'POST'請求。 這裏的重點是設置headers,先介紹如何發送這種特殊的請求。 分別以 1.axios(config) , 2.

文件上傳 , 二進制 , Axios , blob , 前端

DiracKeeko - [前端] webpack + craco項目遷移Rsbuild

對一個非rsbuild的既有項目,遷移到rsbuild,有兩種途徑;其一是用rsbuild官方工具新建空殼項目,將舊項目的代碼文件搬到新的殼項目中,並安裝項目需要的依賴項,編寫rsbuild.config.ts配置;其二是修改舊項目的依賴項,刪除無關依賴和無關配置,安裝rsbuild項目所用的依賴項,編寫rsbuild.config.ts配置。 pnpm i @rsbuild/core @r

webpack , 前端

DiracKeeko - [Java] 一個少見的get請求發送 (生成特殊格式的url)

記錄用java後端(spring boot)發送一個特殊的GET請求時遇到的問題 特殊的GET請求: 形如 http://target.domain.com?params={id: 22, name: "Mike"} 上面這個特殊的GET請求,無論是下面哪種格式(雙引號是否完全),在postman以及瀏覽器中都能正常獲取數據 http://target.domain.com?params={

JAVA , 後端 , get , url

DiracKeeko - [登錄鑑權] cookie、session和token的實現和區別

前言: 本文中的用户端(client)約等於瀏覽器。 服務端就是sever。 cookie、session、token都是由sever生成,保存在client端。 三者最大的不同在於服務端對cookie、session、token的處理。 cookie 1、在client輸入賬號密碼,點擊登錄發送請求 a到sever,sever驗證賬號密碼通過,獲知用户信息。 2、這

token , cookie , 前端 , session

DiracKeeko - [axios] axios中post請求的發送

接上文[《[axios] axios中get請求的發送》](https://segmentfault.com/a/1190000043982778) 針對post請求,建議下面這兩種 1、axios(config) (建議使用) 舉例: axios({ method: 'post', url: '/fund/info', data: { fundId: "00000

Ajax , Axios , httprequest , 前端

DiracKeeko - [JS] js原生 toUpperCase 和 lodash中的upperCase 區別

同事踩了lodash的upperCase的坑。 場景: 基金搜索,輸入字符串搜索基金。選擇器按輸入的字符串過濾並展示過濾後的結果。 例如:搜索 "中證A500" 預期能夠出現"國泰中證A500ETF", "銀華中證A500ETF", "嘉實中證A500ETF", "南方中證A500ETF" 等等包含"中證A500"的結果。 但是結果是用户輸入"中證A500" 之後,過濾後的結果為空。

lodash , 前端 , Javascript

DiracKeeko - [highcharts] 07_在highcharts渲染完成後結束loading

vue2項目 highcharts實例,如何在highcharts渲染開始時加載loading,在渲染結束時結束loading? 好久沒寫highcharts,最近有個同事寫highcharts時遇到了一個問題。 該業務場景的數據處理非常複雜,且存在某些個特定id的情況下,數據量極大,導致頁面上的highcharts卡頓(具體表現是:點了切換之後,有一段時間沒反應,之後highcharts重新渲染

vue2 , loading , highcharts , 前端

DiracKeeko - [瀏覽器] Expires,max-age,判斷緩存過期的瀏覽器實現

Expires (http1.0) 在HTTP Header中通過Expires字段 傳遞一個GMT格式的字符串。 舉例: Expires: Wed Feb 20 2019 11:25:41 GMT Cache-Control: max-age=seconds (http1.1) 在HTTP Header中通過Cache-Control字段中的值max-age傳遞一個max-ag

瀏覽器 , cache-control , 緩存 , expires

DiracKeeko - [leetcode] 0092反轉鏈表2 js實現 圖解

/* 給你單鏈表的頭指針 head 和兩個整數 left 和 right ,其中 left = right 。請你反轉從位置 left 到位置 right 的鏈表節點,返回 反轉後的鏈表 。 */ 前置知識: lc0206 反轉鏈表 Lc0092這題的的思路和206題的反轉鏈表一樣,難在操作。 先貼代碼 拿上示例,來看圖解 1、首先是拼接上dummy,最終返回dummy

leetcode , 鏈表 , 前端 , Javascript

DiracKeeko - [leetcode] 0234迴文鏈表 js實現 圖解

/* 給你一個單鏈表的頭節點 head ,請你判斷該鏈表是否為迴文鏈表。如果是,返回 true ;否則,返回 false 。 */ 前置知識: lc0876 鏈表的中間節點 (用快慢指針找到鏈表的中間節點) Lc0234這題的的思路是 1、用快慢指針找到原鏈表後半部分(找到後半段鏈表的頭指針)。 2、將前半段鏈表反轉。 3、比較反轉後的前半段鏈表和後半段鏈表。

leetcode , 鏈表 , 迴文

DiracKeeko - [動圖] 用css的animation+幀序列實現動畫

[接前文《[動圖] 前端動圖實現方式整理》](https://segmentfault.com/a/1190000044102194) 這篇文檔詳細説一説 第3種,幀序列(png/jpg + css) 的實現 注意下面這段代碼不是原生的CSS語法,在關鍵幀部分使用了SCSS語法來批量for循環處理(需要安裝sass-loader以支持編譯),通過改變背景圖片的位置來實現連續的動畫效果。 st

animation , sass , 動畫 , Css , 前端

DiracKeeko - [axios] axios中get請求的發送

"Axios is a promise-based HTTP Client for node.js and the browser. It is isomorphic (= it can run in the browser and nodejs with the same codebase). On the server-side it uses the native node.js htt

Axios , httprequest , get , 前端

DiracKeeko - [Vue] el-form 表單驗證的異常情況

本文針對的場景是沒有手動觸發el-form的validator驗證,但是async-validator自動觸發(驗證),控制枱async-validator驗證報錯的情況。 先貼一段代碼: template el-form ref="form" :model="formData" :rules="formRules" label-width="100px" size="medium"

validator , vue.js , form , element-ui , 前端

DiracKeeko - [highcharts] 02_02漸變色linearGradient使用説明

本文是對很早一篇文章 《[[highcharts] 02_回調函數實現高級顏色漸變]》的補充(https://segmentfault.com/a/1190000041028581) 先貼個數據的實例 stockOptions.series = { data: [2, 9, 13, null, 50, 17, 19], fillColor: { linearGradient:

highcharts , 前端