@前端

動態 列表
@tanking

使用marked.min.js編寫Markdown文檔頁面,可做知識庫、技術文檔、使用文檔、教程文檔等!

摘要 marked.min.js 是一個高效的 JavaScript Markdown 解析器,它能夠將 Markdown 格式的文本轉換為 HTML。作為一個輕量級的庫,marked 在處理大規模的 Markdown 內容時表現出色,並且具備廣泛的兼容性和可定製性。 本文將深入探討如何使用 marked.min.js 來構建一個自定義的 Markdown 解析器,涵蓋其核心功能、配置選項以及如何

tanking 頭像

@tanking

昵稱 TANKING

@fanjiapeng

掌握 CORS 跨域請求,讀這一篇文章就夠了

在 Web 前後端分離架構模式下,跨域(跨源)請求屬於日常的基本情況了。瀏覽器出於安全考慮,會限制 JavaScript(簡稱 JS)腳本內發起跨源 HTTP 請求,同源沒有此類限制。前端解決跨域方法有很多,比如 WebSocket 協議跨域、JSONP 請求跨域和跨域資源共享 CORS 等。 1、CORS 簡介 CORS 全稱為 Cross-Origin Resource Sharing,被譯為

fanjiapeng 頭像

@fanjiapeng

昵稱 範家鵬

@laomao_5902e12974409

一篇搞定面試中的跨域問題

什麼是CORS(跨源資源共享)? CORS(Cross-Origin Resource Sharing)是一種機制,允許網頁從不同的域訪問服務器上的資源。 在同源策略下,瀏覽器限制了跨域訪問,CORS允許服務器指定哪些源可以訪問其資源。 同源策略(Same-origin policy) 同源策略在web應用安全模型中是一個重要的概念。在這個策略下,瀏覽器允許第一個網頁中包含的腳本可以獲取第二個網頁

laomao_5902e12974409 頭像

@laomao_5902e12974409

昵稱 來了老弟

@dirackeeko

[nginx] 一個CORS的漏洞修復

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

dirackeeko 頭像

@dirackeeko

昵稱 DiracKeeko

@doupifaner

CSS3實戰:實現一個旋轉的3D金幣

CSS3實戰:實現一個旋轉的3D金幣 最近親愛的產品同學,提了一個需求:在頁面某個角落增加一個旋轉的金幣來吸引用户參加活動~越快上越好,我們的“未見”同學直接上手用css擼了一個旋轉的金幣的動畫,讓我們來看一下是如何實現的吧~ 作者:未見 如下圖 拿到這個需求,第一反應gif+a標籤,簡單粗暴+便捷。即將實施就碰到一個問題,UI小姐姐還沒有做設計,排期需要在x天后~怎麼辦?沒有難做的工作,只有解

doupifaner 頭像

@doupifaner

昵稱 豆皮範兒

@susuhhhhhh

css實現炫酷的圓環相交轉動動畫

1.實現效果 2.實現原理 CSS perspective 屬性:屬性定義 3D 元素距視圖的距離,以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。當為元素定義 perspective 屬性時,其子元素會獲得透視效果,而不是元素本身。 perspective 屬性隻影響 3D 轉換元素。(請與 perspective-origin 屬性一同使用該屬性,這樣您就能夠改變 3

susuhhhhhh 頭像

@susuhhhhhh

昵稱 用户bPcSPjP

@susuhhhhhh

css的rotate3d實現炫酷的圓環轉動動畫

1.實現效果 2.實現原理 2.1 rotate3d rotate3d:rotate3d() CSS 函數定義一個變換,它將元素圍繞固定軸移動而不使其變形。運動量由指定的角度定義; 如果為正,運動將為順時針,如果為負,則為逆時針。 語法: rotate3d(x, y, z, a) 含義: x number 類型,可以是 0 到 1 之間的數值,表示旋轉軸 X 座標方向的矢量。 y numb

susuhhhhhh 頭像

@susuhhhhhh

昵稱 用户bPcSPjP

@nulidexiaocongmang

探究幾種CSS視差動畫實現方案及原理

滾動視差 介紹 視差滾動(Parallax Scrolling)是指多層背景以不同的速度移動,形成立體的運動效果,帶來非常出色的視覺體驗。 實現原理 方式一: 利用 background-attachment 屬性,我們可以把網頁解刨成:背景層、內容層、懸浮層 background-attachment 的作用是設置背景圖像隨着頁面滾動的時候固定,即使一個元素有滾動機制,背景也不會隨着元素

nulidexiaocongmang 頭像

@nulidexiaocongmang

昵稱 MangoGoing

@jsliang

CSS 實例系列 - 01 - Tab 滑動門

Hello 小夥伴們早上、中午、下午、晚上和深夜好,這裏是 jsliang~ 本 CSS 系列文章: 主推學以致用。結合面試題和工作實例,讓小夥伴們深入體驗 61 個工作常見的 CSS 屬性和各種 CSS 知識。 主推純 CSS。儘可能使用 HTML + CSS 完成學習目的,但仍然有 “一小部分” 功能需要用到 JavaScript 知識,適合新人學習 + 大佬複習。 如果文章在一些細節

jsliang 頭像

@jsliang

昵稱 jsliang

@jsliang

CSS 實例系列 - 03 - Rate 愛心評分

Hello 小夥伴們早上、中午、下午、晚上和深夜好,這裏是 jsliang~ 今兒要實現的是:Rate 評分 本期將和小夥伴們探討: √ 通過 CSS,配合簡單的 HTML + JS 完成評分組件 本實例的代碼地址: Github - all for one 碼上掘金 - 03 - Rate 愛心評分 一 前言 本 CSS 系列文章: 主推學以致用。結合面試題和工作實例,讓小夥

jsliang 頭像

@jsliang

昵稱 jsliang

@jsliang

CSS 實例系列 - 04 - Dropdown 下拉麪板

Hello 小夥伴們早上、中午、下午、晚上和深夜好,這裏是 jsliang~ 今兒要實現的是:Dropdown 下拉麪板 本期將和小夥伴們探討: √ 通過精簡結構,講解 HTML 和 CSS 搭配如何實現 Dropdown 下拉麪板 本實例的代碼地址: Github - all for one 碼上掘金 - 04 - Dropdown 下拉麪板 視頻講解 一 前言 本 CSS 系

jsliang 頭像

@jsliang

昵稱 jsliang

@dengzhanyong

利用CSS延遲動畫,打造令人驚豔的複雜動畫效果!

動畫在前端開發中是經常遇到的場景之一,加入動畫後頁面可以極大的提升用户體驗。 絕大多數簡單的動畫場景可以直接通過CSS實現,對於一些特殊場景的動畫可能會使用到JS計算實現,通過本文的學習,可以讓你在一些看似需要使用JS實現的動畫場景,使用純CSS一樣可以實現,並且更方便快捷。 先看一個簡單的例子:一個方塊的位置隨着滑條滑動的位置改變 這個場景實現起來很簡單,滑條值改變後,使用JS計

dengzhanyong 頭像

@dengzhanyong

昵稱 鄧佔勇

@qinyuanqiblog

前端直傳七牛雲 3.0 sdk詳細使用

前言 最近產品大哥説要把電商項目改成支持視頻播放,視頻要在後管項目上可以上傳到七牛雲,100M以上的這種視頻,因為我們nginx限制了只能上傳30m,所以只能採用前端直傳七牛雲的這個方案 項目介紹 這是一個基於若依的前後端不分離的項目,前端代碼卸載jsp裏面,主要是後台大哥在維護,我們需要幫助後台做好前端直傳這個動作。 前端直傳七牛雲 如何註冊賬號,創建空間 一般這一步,不需要我們做,可以做為

qinyuanqiblog 頭像

@qinyuanqiblog

昵稱 qinyuanqiblog

@tuzixiansen_63d4d65909d62

vue項目打包electron-將已有web項目打包為桌面端

當你需要將一個vue項目打包成electron時,只需要正常的安裝electron依賴、electron-builder依賴,正常的配置好主進程、預加載腳本、渲染進程即可。 依賴安裝 這裏默認你已經寫好了一個vue項目,腳手架為vite,然後需要打包成electron。 安裝electron pnpm add -D electron 安裝electron打包依賴 pnpm install e

tuzixiansen_63d4d65909d62 頭像

@tuzixiansen_63d4d65909d62

昵稱 兔子先森

@tuzixiansen_63d4d65909d62

electron打包報錯-image格式問題(.ico報錯)

這種報錯是ico資源文件出錯導致的,可以看看gitHub對此問題的解釋:https://github.com/electron-userland/electron-builder/issues/3889 上圖中打包的logo.ico資源文件格式不對,看起來資源文件後綴是.ico實際上是png格式,你有可能是在一些網站將png轉換為ico,它沒有被正常的轉換為ico,只是將資源文件的後

tuzixiansen_63d4d65909d62 頭像

@tuzixiansen_63d4d65909d62

昵稱 兔子先森

@tuzixiansen_63d4d65909d62

electron打包報錯errorOut=ERROR: Cannot create symbolic link

這種打包報錯實際上是缺少對應文件,由於electron在打包時會下載資源,有些資源需要科學上網,所以正常打包網速過慢會導致資源丟失。 像上圖報錯,很明顯是丟失winCodeSign-2.6.0資源,所以我們需要去下載對應資源 資源下載鏈接:https://github.com/electron-userland/electron-builder-binaries/release

tuzixiansen_63d4d65909d62 頭像

@tuzixiansen_63d4d65909d62

昵稱 兔子先森

@shoushoudeqie

2025年電商運營進階的2項核心能力:算法理解力與生態整合力

2025電商運營進階指南:從“流量焦慮”到“全域增長”的破局之道 ——AI與短視頻紅利下,如何抓住新賽道實現指數級躍遷? 2025年,電商人的“生死時速”與突圍機遇 []() “流量越來越貴,ROI越來越低,用户越來越難伺候!”——這是2025年電商行業最真實的寫照。據《2025中國電商生態白皮書》顯示,超60%的中小商家因運營模式僵化陷入增長瓶頸,而頭部玩家卻通過AI驅動、全域營銷、精細化運營

shoushoudeqie 頭像

@shoushoudeqie

昵稱 瘦瘦的企鵝

@mincloud

第九章:小程序表單與醫療急救卡(上)

作者:知曉雲 - 小程序開發快人一步 來源:知曉課堂 醫療急救卡小程序是什麼? 該小程序主要為一個表單的填寫與提交。示例表單的內容包括姓名、性別、血型、醫療情況、服藥情況、是否為器官捐獻者和緊急聯繫人電話號碼。提交成功後表單顯示用户已填寫的信息,如果用户想更新,直接更改表單內容再次提交即可。 我們所用到的組件和 API 所需組件 表單:form,將組件內用户輸入的 input/ swit

mincloud 頭像

@mincloud

昵稱 知曉雲