tag 前端

標籤
貢獻1,072
2892
06:37 AM · Oct 27 ,2025
tuzixiansen_63d4d65909d62 頭像 smileZAZ 頭像 qaz666 頭像 opentiny 頭像 invalidnull 頭像 dirackeeko 頭像 beishangdejianjidan_cqxuxf 頭像 yayu 頭像 junxiudetuoba 頭像 jdcdevloper 頭像 icecreamlj 頭像 xixindehongjiu 頭像

@前端 / 博客 RSS 訂閱

dirackeeko 頭像

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

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

cors , Nginx , 前端

收藏 評論

nanchengfe 頭像

南城FE - 純 CSS 實現計時器效果

本文翻譯自 How to Make a CSS Timer，作者：PREETHI SAM， 略有刪改。 有時候我們需要再網站中使用計時器。比如下單購物成功後增加倒計時回到首頁；或者一些時間管理工具（番茄工作法），當遇到這些情況時，我會毫不猶豫地使用JavaScript，因為它可能是處理這類事情的更強大的工具。 然而在某些場景下 CSS 替代品也同樣有趣和高效。現在的電子郵件客户端具有很強的 CSS

動畫 , Css , 前端

收藏 評論

huobaodejianpan 頭像

火爆的鍵盤 - 深入淺出: XML HttpRequest 入門指南

XML HttpRequest（XHR） 技術是構建動態、響應式網站的關鍵。這項技術使得網頁能在不重新加載整個頁面的情況下與服務器進行數據交互，極大地優化了用户的交互體驗。 定義 XML HttpRequest XML HttpRequest 是一種瀏覽器與服務器進行數據交換的 API。儘管它的名字包含 “XML”，XHR 實際上支持多種數據格式，如 JSON、HTML 和純文本等。初期，它主要用

xml , Ajax , httprequest , 前端 , Javascript

收藏 評論

fenanjiu 頭像

南玖 - 淺析Vite本地構建原理

前言 隨着Vue3的逐漸普及以及Vite的逐漸成熟，我們有必要來了解一下關於vite的本地構建原理。 對於webpack打包的核心流程是通過分析JS文件中引用關係，通過遞歸得到整個項目的依賴關係，並且對於非JS類型的資源，通過調用對應的loader將其打包編譯生成JS 代碼，最後再啓動開發服務器。 瞭解到webpack的耗時主要花費在打包上，Vite選擇跳過打包，直接以以 原生 ESM 方式提供源

vite , 工程化 , 前端

收藏 評論

kevinzhw 頭像

天涯學館 - Nuxt.js實戰：Vue.js的服務器端渲染框架

創建Nuxt.js項目 首先，確保你已經安裝了Node.js和yarn或npm。然後，通過命令行創建一個新的Nuxt.js項目： yarn create nuxt-app my-nuxt-project cd my-nuxt-project 在創建過程中，你可以選擇是否需要UI框架、預處理器等選項，根據需要配置。 目錄結構 Nuxt.js遵循特定的目錄結構，其中一些關鍵目錄如下： ├── .nux

vue.js , nuxt.js , 前端 , Javascript

收藏 評論

beckyyyy 頭像

beckyyyy - 可視化學習：如何使用後期處理通道增強圖像效果

前言 大家好，本文分享的是如何使用後期處理通道增強圖像效果，通過前面幾篇文章，我們瞭解了一些動態生成紋理的方法，比如符號距離場SDF、基於參數方程生成圖案、基於噪聲生成紋理，等等。這些生成紋理的技術有相似的地方，就是根據片元的紋理座標，對片元着色，直接生成紋理。 因為GPU是並行渲染的，每個像素的着色器程序是並行執行的，這樣的渲染很高效。但是在實際需求中，有時我們計算片元色值時，需要依賴周圍像素點

webgl , canvas , 可視化 , 前端

收藏 評論

littlelyon 頭像

littlelyon - 使用 AST 遷移複雜前端項目的探索

寫在前面 也不知道為什麼，每一次工作變動，所接手的第一個項目，都和項目遷移有關。這次也不例外，在 5 月初入職樂天之後，處理完雜七雜八的事情，第一個接手的項目是將一個大概有 5 年開發週期的 nuxt 2 前端項目，遷移到 nuxt 3 版本。 項目遷移與“屎山” 談及項目遷移，尤其是複雜項目，很容易讓人把它和“屎山”聯繫起來，而事實上也是如此，大多數規模較大的項目，往往都具備“屎山”的各種特徵，

ast , vue.js , nuxt.js , 前端 , Javascript

收藏 評論

zero_dev 頭像

北橋蘇 - hexo實戰：（二）個人獨立博客豪華裝修合集

前言 上次介紹了使用 Hexo+GitHub Pages，零成本搭建一個專屬自己的獨立博客網站。我覺得那篇文章是沒有入門門檻的，不管你是什麼行業，只要想打造個人 IP，又不太想受博客平台約束，那麼讀完後動手操作一下也能輕鬆完成。 而這次呢，上篇也説了 Hexo 會出三篇內容，這裏就要在前者基礎上做進一步升級，將完成下面七個主要的博客常用功能。 指標 Hexo 如何安裝 Butterfly

博客搭建與配置 , hexo , 前端

收藏 評論

kevinzhw 頭像

天涯學館 - 前端安全：XSS攻擊與防禦策略

XSS（Cross-Site Scripting）攻擊是前端安全中的一個重要問題，它發生在攻擊者能夠注入惡意腳本到網頁中，這些腳本在用户瀏覽器中執行時可以獲取用户的敏感信息，例如會話令牌、個人信息等。防禦XSS攻擊通常涉及以下幾個策略： 1. 輸入驗證： 對用户提交的數據進行嚴格的驗證，確保只有預期的字符和格式被接受。 使用正則表達式或預定義的白名單模式來過濾無效字符。 限制字符串長度以防

xss , typescript , 前端 , Javascript

收藏 評論

kevinzhw 頭像

天涯學館 - 前端工程化實踐：Monorepo與Lerna管理

前端工程化實踐中，Monorepo（單倉庫）管理和Lerna是兩種流行的方式，用於大型項目或組件庫的組織和版本管理。 Monorepo簡介 Monorepo（單倉庫）是指在一個Git倉庫中管理多個相關項目的開發方式。這種方式的優點在於： 集中式管理：所有項目都在一個倉庫中，方便代碼共享、版本同步和協同開發。 模塊化：可以創建獨立的模塊，方便複用和維護。 統一的CI/CD：一次配置，全倉

前端工程化 , lerna , monorepo , 前端 , Javascript

收藏 評論

huobaodejianpan 頭像

火爆的鍵盤 - HTTP 請求優化指南：Axios 和 Fetch 的比較

在前端開發中，處理 HTTP 請求是一個常見且重要的任務。JavaScript 提供了多種方式來發送網絡請求，其中最受歡迎的兩種方式分別就是 Fetch API 和 Axios。儘管兩者都能完成同樣的任務，即從客户端向服務器發送請求並接收響應，但它們在使用方式、功能及靈活性方面各有千秋，下面我們簡單瞭解下。 1. 基礎介紹 Fetch API Fetch API 是現代瀏覽器內置的一個標準 Jav

HTTP , fetch , Axios , 前端 , Javascript

收藏 評論

1227 頭像

1227 - 一文搞定前端多種主題配置及全局引入scss文件

前言 本文中所採取的方案主要是css預處理（less/scss）方案，適用於項目中有多套主題需要進行配置，有着很強的擴展性和易用性，如果你的項目臨時需要加上主題切換，可以採用；如果你的項目需要很多套主題配置，也非常適用！ 一、變量配置的代碼部分 1、主題變量的配置 theme.scss（在項目中存放在style文件夾下面，這個文件夾主要用於系統一些公共樣式的存放和管理） // 主題配置 $the

vue.js , scss , 工程化 , 前端

收藏 評論

jackzhoumine 頭像

JackZhouMine - 前端項目如何規範文件命名

前端項目如何規範文件命名 ls-lint 是一個非常快的文件和目錄名稱 linter，可方便約束項目目錄和文件的命名。 特點： 快速 依賴少 適用所有文件 配置簡單 安裝依賴 npm install @ls-lint/ls-lint -D 在 husky 加入 git hook: "husky": { "hooks": { "pre-commit": "ls-lint

vue.js , 工程化 , HTML , 前端 , Javascript

收藏 評論

chai_huo 頭像

柴火 - SVG <pattern> 標籤的用法和應用場景

通過使用 pattern 標籤，可以在 SVG 圖像內部定義可重複使用的任意圖案。這些圖案可以通過 fill 屬性或 stroke 屬性進行引用。 使用場景 例如我們要在 svg 中繪製大量的圓點點，可以通過重複使用 circle 標籤來實現。 svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" circle cx=

前端 , svg

收藏 評論

apifox 頭像

Apifox - 發現 HTTP 和 RPC 的不同之處：技術洞察

隨着互聯網技術的發展，網絡通信在各種應用中扮演着至關重要的角色。無論是構建 Web 應用還是進行服務之間的交互，選擇合適的通訊協議成為開發者們需要深入思考的問題。在眾多協議中，HTTP（HyperText Transfer Protocol）和 RPC（Remote Procedure Call）因各自獨特的特點和優勢而備受關注。那麼，它們之間有何不同，又該如何在實際項目中做出選擇呢？ 什麼是 H

HTTP , rpc , 程序員 , 後端 , 前端

收藏 評論

kevinzhw 頭像

天涯學館 - Prettier與ESLint：代碼風格與質量的自動化保證

Prettier 和 ESLint 是兩個互補的工具，它們共同確保代碼的風格一致性和質量。Prettier 負責格式化代碼，而 ESLint 則執行更復雜的靜態分析和規則檢查。 Prettier 作用： 自動化代碼格式化，確保代碼的縮進、括號、引號、換行等樣式一致。 不需要配置太多的規則，因為Prettier有一套默認的代碼風格。 支持多種編程語言，包括JavaScript、TypeS

eslint , prettier , typescript , 前端 , Javascript

收藏 評論

zero_dev 頭像

北橋蘇 - hexo 實戰：（三）獨立博客運營總結

前言 通過前面兩個步驟，完成了靜態博客從搭建到基本功能添加和界面優化。那麼，這次就要介紹一下搭在 GitHub 上的靜態博客如何運營推廣。也就是如何讓網站被各大搜索引擎收錄？如何提高網站權重，提高收錄量？ 網站收錄 平台選擇 站長相關的平台有：某度站長工具、360 站長平台、搜狗資源平台、必應網站管理員工具、谷歌站長工具等。列出的五個平台，可以按自身情況提交，提交方法也大同小異，以下以某度為例。

hexo , 博客搭建 , 前端

收藏 評論

beckyyyy 頭像

beckyyyy - 可視化學習：如何生成簡單動畫讓圖形動起來

大家好，本文分享的是如何生成簡單動畫讓圖形動起來。 在可視化展現中，動畫它是強化數據表達，吸引用户的重要技術手段。 在具體實現動畫之前，我們先來了解一下動畫的三種形式，分別是固定幀動畫、增量動畫和時序動畫。 graph LR A[動畫的三種形式] -- B[固定幀動畫] A -- D[增量動畫] A -- E[時序動畫] B -- F[使用已生成的靜態圖像，將圖像依次播放] D -- C[動態繪製

shader , css3 , 動畫 , webgl , 前端

收藏 評論

zz_641473ad470bc 頭像

zZ_jie - 使用canvas對圖片進行標註

前言 我們的圖像標註系統中，標註的時候，每人需要一個容器（docker），需要把數據推到去LabelStudio裏面去標註，利用webhook回推標註好的數據。 Canvas的使用，當選中某個矩形框的時候，會變成藍色。 畫布大小 設置的是，圖片有多大，畫布就有多大,然後以畫布的中心點對齊。默認是左上角對齊 this.ctx.drawImage(this.image, -this.image

canvas , HTML , 前端

收藏 評論

suporka 頭像

suporka - “山寨版”《草料二維碼》

背景 之前瀏覽過草料二維碼的網站，他的二維碼美化功能很強大，可以分別自定義碼眼和碼點的形狀和顏色，功能十分強大 💪！ 碰巧之前寫過一個 npm 插件 qrcode-with-logos, 用於前端生成帶 logo 的二維碼。 而且在 github 的 issues 裏有外國友人 👨‍🦱 問我能否實現不同樣式的二維碼，剛好以此作為新需求，模仿草料二維碼的樣式和功能，開發了 qrcode-wit

canvas , 前端 , Javascript

收藏 評論

daishuyunshuzhanqianduan 頭像

袋鼠雲數棧UED - 流程圖渲染方式：Canvas vs SVG

我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：霽明 背景 我們產品中會有一些流程圖應用，例如審批中心的審批流程圖： 我們數棧產品內的流程圖，基本都是使用的 mxGraph 實現的，mxGraph 使用了SVG來渲染圖形。 流程圖組件庫除了 mxGraph，還有其他一些流行的庫，例如：Re

canvas , 前端 , svg

收藏 評論

huobaodejianpan 頭像

火爆的鍵盤 - 【教程】如何使用Postman測試接口？詳細指南

在當前，API（應用程序接口）的使用變得越來越普遍。其中，HTTP/HTTPS API 是最常見的一種。無論是開發前端還是後端，測試 API 都是一個關鍵環節。Postman 是一種流行且強大的 API 測試工具，能夠幫助開發人員輕鬆地進行接口測試和調試。 一、什麼是 Postman？ Postman 是一個專用於 API 開發的跨平台工具。它提供了簡潔易用的界面，幫助開發者和測試人員發送 HTT

API , postman , 接口 , 後端 , 前端

收藏 評論

fenanjiu 頭像

南玖 - Vite本地構建：手寫核心原理

前言 接上篇文章，我們瞭解到vite的本地構建原理主要是：啓動一個 connect 服務器攔截由瀏覽器請求 ESM的請求。通過請求的路徑找到目錄下對應的文件做一下編譯最終以 ESM的格式返回給瀏覽器。 基於這個核心思想，我們可以嘗試來動手實現一下。 搭建靜態服務器 基於koa搭建一個項目： 項目結構如上，服務使用koa搭建，bin指定cli可執行文件的位置 #!/usr/bin/env node

vite , 工程化 , 前端 , Javascript

收藏 評論

danjuanfe 頭像

前端蛋卷 - 快來看看 ECMAScript 2024 (ES15) 發佈了什麼新特性

2024 年 6 月 26 日，第 127 屆 Ecma 大會批准了 ECMAScript 2024 語言規範，這意味着它現在正式成為標準。 https://github.com/tc39/ecma262/releases 1. Group By 分組 Map.groupBy() 將可迭代對象分組為一個新的 Map，Map中的 key由回調提供： Map.groupBy([0, -5, 3, -

ecmascript , 前端 , Javascript

收藏 評論