tag 前端

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

@前端 / 博客 RSS 訂閱

refanbanzhang 頭像

熱飯班長 - flex佈局常見問題

flex無法創建滾動條 flex的孫元素使用overflow: auto無法出現滾動條 原因： 子元素沒有設置寬度，這會導致子元素的寬度由孫元素決定，從而子元素被撐大，孫元素無法達到出現滾動條的條件。 解決方案： 給子元素設置寬度，比如width:100%; flex佈局和文字溢出省略遭遇的問題 https://segmentfault.com/a/1190000045

react , flex , Css , 前端 , Javascript

收藏 評論

xingfudenaozhong 頭像

幸福的鬧鐘 - AJAX是如何憑一己之力提高前端程序員的工資水平的？

作者：阿達西 鏈接：juejin.cn/post/7395396352183009290 emmm，今天無意間聽到一個比較奇怪的信息，就是在很早之前，前端工程師只是一個切圖崽，而且工資也不是很高。説白了，就是沒含金量的工作。因為那時候的Web應用相對簡單，主要關注於頁面的靜態內容和基本的交互。所以前端開發的工作主要集中在HTML、CSS和基礎的JavaScript上。 但是自從AJAX出現後

Ajax , 程序員 , 前端

收藏 評論

hightopo 頭像

hightopo - 圖撲 HT for Web 輕鬆構建組態拓撲結構

在現代的數據可視化和網絡管理中，拓撲圖是一種非常重要的工具。它可以直觀地展示節點(Node)和節點之間的關係(Edge)。無論是在 2D 還是 3D 環境中，拓撲圖都可以幫助我們更好地理解和管理複雜的系統。 然而，由於這些拓撲圖通常極為複雜，傳統的手動佈局方式不僅繁瑣且耗時。鑑於此，圖撲軟件自研 HT for Web 產品（以下簡稱為 HT）推出了自動佈局、彈力佈局插件，從根本上解決了這一問題。

佈局 , 拓撲圖 , 可視化 , 前端 , Javascript

收藏 評論

chenbimo 頭像

前端之虎陳隨易 - 【代碼故事】VSCode知名主題material-theme倉庫代碼清空

大家好，我是前端之虎陳隨易。 這是我的個人網站 https://chensuiyi.me。 出大事了 看到了一篇前端社區開源扛把子 Anthony Fu 的帖子。 經過一番瞭解，出大事了！ 知名 VSCode 主題 material-theme 倉庫清空了！ 連帶着所有提交的歷史紀錄，統統沒了。。。 背景知識 在進一步的對這個事情報道之前，根據我查到的資料，我們先對 material-theme

visual-studio-code , webstorm , 程序員 , 前端

收藏 評論

laomao_5902e12974409 頭像

來了老弟 - nginx在同一域名下部署多個vue項目

本文介紹使用nginx服務器在同一個域名下如何部署多個前端項目，在vue3使用vite打包時配置文件vite.config.ts中的base的配置方式，以及vue-router中history的配置方式，以及如何在nginx中配置才能使前端項目正常解析等關鍵步驟，結束你在前端項目部署時的苦惱。 項目場景描述 假設你有一個域名admin.iicoom.fun 現在有兩個前端項目，普通的前

Nginx , spa , 前端

收藏 評論

nanchengfe 頭像

南城FE - CSS螢火蟲按鈕特效

如圖所示，這是一個很炫酷的按鈕懸浮特效，鼠標懸停時，按鈕呈現發光的效果，周邊還出現類型螢火蟲的效果。本文將解析如何實現這個按鈕特效，基於這個動圖可以分析出需要實現的要點： 有一個跟隨鼠標移動的圓點 按鈕懸停時有高亮發光的效果 懸停時按鈕周邊的螢火中效果 實現過程 跟隨鼠標移動的圓點 這個部分需要基於JS實現，但不是最主要的實現代碼 如果單純做一個跟隨鼠標移動的點很簡單，只需要監聽鼠標事

css3 , 動畫 , 前端

收藏 評論

zch681990 頭像

太羽 - 基於viewUI框架自定義表單交互表格

template scrollContent :minusHeight='140' div class="zd-white-b" Table :columns="columns" :data="dataList" template #name="{ row, index }"

vue.js , iview , 前端 , Javascript

收藏 評論

kevinzhw 頭像

天涯學館 - Redux Toolkit：簡化Redux應用狀態管理

Redux Toolkit 是官方推薦用來簡化Redux開發的工具集。它包含了一些預設的最佳實踐，使得創建和管理Redux狀態變得更簡單。 1. 創建Store 使用configureStore函數來創建Redux store，它會自動配置中間件，如redux-thunk用於處理異步操作。 import { configureStore } from '@reduxjs/toolkit';

react , redux , 前端 , Javascript

收藏 評論

nanchengfe 頭像

南城FE - CSS炫酷光暈按鈕特效

如圖所示，這是一個很炫酷的發光按鈕特效，鼠標懸停時，按鈕呈現旋轉動畫發光的效果，這樣的動畫效果可以顯著提升用户體驗和視覺吸引力。本文將解析如何實現這個按鈕特效，基於這個動圖可以分析出實現這個效果的主要功能要點： 按鈕背景為漸變顏色 懸停時按鈕有放大效果 懸停時文案有發光漸變動畫 懸停時按鈕有旋轉發光效果 實現過程 漸變按鈕 漸變色背景我們設置background-image的line

css3 , 動畫 , Css , 前端

收藏 評論

kevinzhw 頭像

天涯學館 - PWA離線優先策略：提升用户體驗的關鍵步驟

Progressive Web Apps (PWA) 的離線優先策略是通過Service Worker和Cache API實現的，它允許在沒有網絡連接時仍然可以訪問網站的部分或全部內容。 1. 創建Service Worker註冊文件（service-worker.js）： self.addEventListener('install', (event) = { event.waitUntil

pwa , 前端 , Javascript

收藏 評論

rife 頭像

凌虛 - 圖解計算機網絡：一條 HTTP 請求的網絡拓撲之旅

引言 常見的網絡拓撲結構如下圖所示： 在此拓撲中，終端設備通過 WiFi 連接到路由器，路由器再連接到光貓（或終端設備通過移動網絡 4G/5G 連接到基站），之後 ISP 網絡服務提供商接管網絡通信，將請求最終轉發至應用服務器。 從用户設備發出的 HTTP 請求是如何穿越網絡的？我們將深入探討這一過程。 HTTP 請求的網絡旅途 OSI 網絡體系結構 先從計算機網絡的基礎架構開始： 上圖展示了

架構 , 程序員 , 計算機網絡 , 後端 , 前端

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - 從0到1：React項目中的Webpack配置實戰

公司項目一般都是使用集團封裝好的腳手架，腳手架內部實現咱看不到也摸不着，好不容易組內推行新的UI框架，需要自行定義 webpack 配置，這可是個絕佳的好機會，我對配置過程進行了梳理，把商業項目的成熟配置小跑着送上。 初始化 首先新建一個空文件夾，執行 npm init 初始化生成 package.json 文件。 創建 src 文件夾，項目的業務代碼都放在這裏，再創建 index.js，這是項目

react , webpack-dev-server , webpack , 前端 , Javascript

收藏 評論

qinyuanqiblog 頭像

qinyuanqiblog - vue-cli3 本地無法代理到生產環境的問題分析

問題描述 一個古老項目，之前是基於vuecli2 後來被我遷移到vue cli3, webpack 版本是4.46, vue-cli版本是4.4.4 vuecli配置，之前這個配置是可以直接訪問到生產環境的，後來同樣的配置，無法代理到生產環境，問了下運維大哥，他説就nginx加了個認證來源而已，別的啥都沒做，肯定是前端代理的姿勢不對 解決辦法 輾轉反側，經過一年終於解決了這個問題。

vue-cli , 前端

收藏 評論

minnanitkong 頭像

王大冶 - 5分鐘內理解 .prototype 鏈 | 2024

CSS技巧與案例詳解 vue2與vue3技巧合集 VueUse源碼解讀 在JavaScript的世界裏,原型(prototype)系統是一個常被討論但不易掌握的概念。作為JavaScript繼承模型的基石,理解原型對於構建大型應用或進行對象操作至關重要。讓我們一起探索這個迷人的話題,揭開原型系統的神秘面紗。 什麼是原型? 在JavaScript中,每個對象都有一個內部屬性[[Proto

ecmascript-6 , 前端 , Javascript

收藏 評論

gqkmiss 頭像

月恆 - JS 中 structuredClone 和 JSON.parse(JSON.stringify()) 克隆對象的區別

JavaScript 中 structuredClone 和 JSON.parse(JSON.stringify()) 克隆對象的異同點 一、什麼是 structuredClone？ 1. structuredClone 的發展 structuredClone 是在 ECMAScript 2021（ES12）標準中引入的，ECMAScript 2021 規範正式發佈於 2021 年 6 月 自 2

ecmascript-6 , clone , 前端 , Javascript

收藏 評論

conan_66cdbb657e1e3 頭像

Conan - uniapp方式實現視頻播放加密統計

uniapp方式實現視頻播放加密統計 在移動應用開發中，視頻播放功能是常見的需求之一，而視頻內容的加密保護和統計則成為了開發者需要關注的問題。本文將分享如何使用uniapp結合視頻雲點播插件，實現視頻播放的加密和統計功能。 環境準備 在開始之前，請確保你已經安裝了HBuilderX，並創建了一個uniapp項目。接下來，你需要從插件市場購買並下載視頻雲點播插件。 集成插件 購買插件：在插件市場

音視頻 , 加密 , uni-app , 前端

收藏 評論

nanchengfe 頭像

南城FE - 純CSS實現海浪文字效果

如圖所示，這是一個很炫酷的文字波動效果，文字呈現出一個海浪波動的效果，這樣的動畫效果可以顯著加強文案本身的含義。本文將解析如何使用純CSS實現這個特效，基於這個動圖可以分析出實現這個效果的主要功能要點： 整體呈現出3D文案效果 文案呈現波動狀態動畫 文案有漸變顏色的變化 文案在變化過程中有傾斜分層的效果 1. 基礎樣式 首先我們從佈局和基礎樣式開始。 通過上面的圖片可以看出動畫中的

css3 , 動畫 , Css , 前端

收藏 評論

zxl20070701 頭像

zxl20070701 - React 相關插件之 Redux 基本使用入門

引入和定義 首先，你需要創建Store實例並暴露出來： // stores/login.store.js const loginInstance = (preState, action) = { switch (action.type) { // 修改狀態 case "changeLoginState": preState.isLo

react , redux , 前端

收藏 評論

aqiongbei 頭像

aqiongbei - 來學一個值錢的知識，Chrome插件如何優雅的捕獲頁面的請求結果

背景 今天在寫一個某網站限流檢測的chrome插件，需要捕獲頁面的某個請求結果。那麼問題就來了，我們該如何捕獲頁面的請求結果呢？我們來捋捋都有哪些方案。 我開發的時候的配置為manifest_version: 3，下文內容也是在這個基礎上展開的。 本文只列舉方案，一些需同步在manifest_version進行配置地方並未提及，請自行配置。 可行的方案 一、chrome.webReques

chrome , chrome-extension , chrome-devtools , 前端 , Javascript

收藏 評論

refanbanzhang 頭像

熱飯班長 - chrome插件實現監聽ajax請求，然後修改請求參數

1 修改manifast.json manifest_version必須為3，因為這個declarativeNetRequest是3中新增的api { "manifest_version": 3, "permissions": ["declarativeNetRequest"], "host_permissions": ["all_urls"] } 2 在background.j

chrome-extension , typescript , 前端 , html5 , Javascript

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - 全面掌握 Jest：從零開始的測試指南（下篇）

在上一篇測試指南中，我們介紹了Jest 的背景、如何初始化項目、常用的匹配器語法以及鈎子函數的使用。這一篇篇將繼續深入探討 Jest 的高級特性，包括 Mock 函數、異步請求的處理、Mock 請求的模擬、類的模擬以及定時器的模擬、snapshot 的使用。通過這些技術，我們將能夠更高效地編寫和維護測試用例，尤其是在處理複雜異步邏輯和外部依賴時。 Mock 函數 假設存在一個 runCallBac

單元測試 , 自動化測試 , jest , 前端 , Javascript

收藏 評論

momeak9 頭像

泯瀧 - 「譯」如何寫出更好的Typescript代碼

鏈接：https://medium.com/@technicadil_001/how-to-write-better-types... 作者：Debabrata Dash 原標題：How to write better Typescript codes? 在本文中，我們將討論大約 15 個編寫更好的 Typescript 代碼的技巧。 譯者：本文討論了 15 個實用技巧，以幫助開發者編

ecmascript-6 , typescript , HTML , 前端 , Javascript

收藏 評論

tanking 頭像

TANKING - jQuery國內大廠CDN加速鏈接

摘要 jQuery 的CDN有很多，但都很不穩定，例如國內的 bootcdn 經常抽風，還有其他的常見的例如 jQuery 官方的 code.jquery.com、jsDeliver、unpkg.com、staticfile，這些都是經常抽風的。導致使用了線上的CDN的頁面打開受到影響，那麼就沒有國內好用的CDN嗎？下面是我彙總的一些大廠的！ 大廠jQuery靜態資源CDN 百度 https://

cdn , jquery , jq , 前端 , Javascript

收藏 評論

nihaojob 頭像

秦少衞 - 使用 fabric.js 開發移動端 H5 圖片編輯器

大家好，我是開源圖片編輯器的 https://github.com/ikuaitu/vue-fabric-editor 的作者，它是一款基於 PC 版本的開源圖片編輯器。 最近很多開發者諮詢，是否可以將開源圖片編輯器改造為一款適用於移動端的 H5 版本圖片編輯器，最近 H5 版本的圖片編輯器剛剛上線，就將實現思路和產品細節整理成筆記分享出來，供大家參考。 基礎 開源的圖片編輯器的基本功能都

圖片 , fabric.js , 前端 , Javascript

收藏 評論