@前端

動態 列表
@suporka

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

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

suporka 頭像

@suporka

昵稱 suporka

@renzhongdaoyuan_59170ca258c53

手把手教你繪製小程序海報

海報分享功能在許多應用中應該是很常見的,因為它作為一種常用的應用推廣和拉新的方式。 接下來看個實際的案例,如下: 把任務拆解下: 如何繪製海報 如何把繪製後的海報保存到相冊 繪製海報 用 canvas 來繪製海報。 這裏需要了解基本的 canvas api,不熟悉可以先去了解下相關 Canvas API 定義 canvas 元素 template view class="

@huanjinliu

開源 | Warpvas 實現扭曲的畫布

介紹 名字靈感源於 warped + canvas,扭曲的畫布。 畫布可以被扭曲嗎? 如果你使用過canvas,可能你對setTransform API也有所瞭解,那你可能會給出一個偏消極的答案:只能整體傾斜變形,但做不到扭曲變形。 但這真的做不到嗎? 我們可以先來想一個問題:如果對於一個方方正正的圖像來説,setTransform API施加的變形效果只能作用於整體,那如果把它從斜對角切成兩份三

huanjinliu 頭像

@huanjinliu

昵稱 歡進

@mengwenping

設備管理系統是什麼?功能、應用、價值

一、設備管理系統定義 設備管理系統(EAM)是一種用於有效管理和監控企業內部設備的信息系統。它涵蓋了從設備採購、部署、管理、設備報修維修、設備維保到報廢的整個生命週期。設備管理系統的目標是確保設備在其整個壽命週期內能夠高效運行,降低設備故障率,提高生產效率,並確保設備合規性和安全性。 二、設備管理工作面臨的痛點 1、設備管理信息零散,缺乏長期、完整的信息管理 傳統的管理模式信息記錄在紙質介質

mengwenping 頭像

@mengwenping

昵稱 孟文平

@old_it

本地部署 Dify,構建智能內容生成工作流

近期我們的技術小夥伴研究並部署了一個基於 Dify 工作流,融合 FLUX 生圖模型、多模態識別模塊以及語音合成與播放功能,構建了一個智能內容生成鏈路。 通過 Dify 工作流流程編排與低代碼擴展能力實現跨模態的任務(文本輸入-語義理解-圖像生成-語音輸出)。這個工作流同時可以本地化部署至贊奇AI一體機,形成一套安全可控、開箱即用的軟硬件一體交付方案。 完整工作流鏈路 下面我們會從硬件配置

old_it 頭像

@old_it

昵稱 老IT人

@huobaodejianpan

HTTP 請求優化指南:Axios 和 Fetch 的比較

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

huobaodejianpan 頭像

@huobaodejianpan

昵稱 火爆的鍵盤

@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

dirackeeko 頭像

@dirackeeko

昵稱 DiracKeeko

@dirackeeko

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

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

dirackeeko 頭像

@dirackeeko

昵稱 DiracKeeko

@dirackeeko

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

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

dirackeeko 頭像

@dirackeeko

昵稱 DiracKeeko

@luxigaola

如何啓動一個靜態的前端工程的服務

使用場景 在前端開發過程中,可能會要對發佈到生產的包做驗證或者要本地運行一個開源的包的實例,這時候就需要在本地啓動一個前端服務,一般有以下兩種方式 運行方式 Live-Server 通過VsCode去安裝插件LiveServer,然後打開靜態工程,點擊右下角的Live Server按鈕 即可運行工程 優點:使用簡單,方便快捷 缺點:不支持自定義配置,如工程裏面需要代理請求,則無法實現 ex

luxigaola 頭像

@luxigaola

昵稱 luxigaola

@jueqiangqingtongsan

NodeJS項目架構設計,看這一篇就足夠了!

NodeJS項目架構設計,看這一篇就足夠了! 前言 大家好,我是倔強青銅三。我是一名熱情的軟件工程師,我熱衷於分享和傳播IT技術,致力於通過我的知識和技能推動技術交流與創新,歡迎關注我,微信公眾號:倔強青銅三。 1. 🧩 整潔架構簡介 Clean Architecture(整潔架構)由Robert C. Martin(Uncle Bob)提出,它強調應用程序內部關注點的分離。該架構提倡業務邏輯

jueqiangqingtongsan 頭像

@jueqiangqingtongsan

昵稱 倔強青銅三

@ailvyoudemaojin

[開源] 又一款快速開發的後台管理系統

一、簡介 這是一款ThinkPHP v8.0 和 Layui v2.9.x 的快速開發的後台管理系統 使用MIT開源協議 寬鬆性:與其他常見的軟件許可協議(如 GPL、LGPL、BSD)相比,MIT 協議相對寬鬆,賦予軟件被許可人更大的權利與更少的限制 兼容性高:對軟件的再使用限制較少,因此具有較高的兼容性,可以與其他許可協議並存,也與 GPL 兼容 商業友好:

ailvyoudemaojin 頭像

@ailvyoudemaojin

昵稱 JavaCodexPro

@jizaodebangbangtang

快碼故事|兩句話,0代碼開發一個跨端文件上傳系統

大家好,我是FENG吹雨飄飛,一個敲了8年代碼的程序員。最近在推一個項目,需要進行多端測試。結果發現,一個意想不到的小問題成了我的心頭刺: 每次測試過程中,我需要在不同設備間頻繁傳輸報錯截圖、日誌、配置文件等等。 依靠聊天軟件?在不同設備間切來切去太麻煩,還經常找不到歷史記錄。 自己寫個小工具?太耗時了,不值得專門投入時間。 正發愁時,剛好想起來朋友剛分享給我的文心快碼編程智能體 Co

jizaodebangbangtang 頭像

@jizaodebangbangtang

昵稱 文心快碼

@razyliang

只會npm install?這5個隱藏技巧讓你效率翻倍!

原文鏈接:https://mp.weixin.qq.com/s/nijxVWj-E5U08DX2fl3vgg 最近有個剛學前端的小夥伴問我:“為什麼我的node_modules這麼大?為什麼別人裝依賴那麼快?npx到底是啥玩意兒?” 相信不少人都跟他一樣,對npm的認知還停留在“npm install”階段。今天我就來分享幾個超級實用的npm技巧,幫你擺脱依賴安裝的噩夢! 一、package.js

razyliang 頭像

@razyliang

昵稱 良山有風來

@linyuyizhizou_678b9fdc436f1

深度解讀前端包管理器:npm、cnpm、yarn、pnpm 的技術博弈與選型指南

引言:被依賴包支配的前端日常 "為什麼我本地能運行的項目,到服務器就報錯?" "node\_modules 文件夾怎麼佔用了 10GB 磁盤空間?" "安裝依賴為什麼要等 5 分鐘?" 這些前端開發中的經典靈魂拷問,都指向同一個核心問題 —— 包管理器的選擇與使用。從 2010 年 npm 誕生至今,前端包管理生態經歷了多次技術迭代,形成了 npm、cnpm、yarn、pnpm 四分天下的格局。它

linyuyizhizou_678b9fdc436f1 頭像

@linyuyizhizou_678b9fdc436f1

昵稱 小帆聊前端

@qinyuanqiblog

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

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

qinyuanqiblog 頭像

@qinyuanqiblog

昵稱 qinyuanqiblog

@ailvyoudemaojin

[開源]一款可視化提效頁面生成工具

一、簡介 基於 vue3.x 可視化拖拽編輯,頁面生成工具。提升前端開發效率,可集成至移動端項目作為通過定義 JSON 直接生成 UI 界面 項目採用了 Apache 2.0 license協議 允許自由使用:你可以自由地使用受該許可證約束的軟件,用於各種目的,包括商業應用。 源代碼可用性:通常要求在分發衍生作品時,提供相應的源代碼。這有助於確保軟件的透明度和可修改性

ailvyoudemaojin 頭像

@ailvyoudemaojin

昵稱 JavaCodexPro

@yunduanderizi_5c7f6d367b5d0

自定義頭部和左側的日期選擇組件 - 基於elementui的日期組件

代碼倉庫 https://gitee.com/wang-qianyuan/demo/tree/master/src/componen... 實戰效果 坑點resolve 使用node_module的elementui源碼的面板,報錯 內部用了一些webpack不能解析活轉化的內容, 問問ai, 更加具體, 我忘了~ 解決: 在vue.config.js中配置別名和轉化

yunduanderizi_5c7f6d367b5d0 頭像

@yunduanderizi_5c7f6d367b5d0

昵稱 雲端的日子

@yunduanderizi_5c7f6d367b5d0

elementui的遠程搜索select反覆點擊,光標一直可輸入&可拖拽div

問題描述: 點擊一下,聚焦,有光標, 可輸入 點擊第二下, 失去焦點, 無光標, 不可輸入 期望 ld期望不管點擊多少下, 都有光標可輸入 解決方案: 找ai, 不斷調試 注意:如果是可清空的遠程搜索select, 清空會有問題, 自行造一個x圖標, 然後寫功能, 還要注意hover到x圖標的時候不斷閃爍問題, x就讓它一直顯示算了, 不做hoverselect的時候才展示 d

yunduanderizi_5c7f6d367b5d0 頭像

@yunduanderizi_5c7f6d367b5d0

昵稱 雲端的日子

@shuihuyangpinga

el-table在使用fixed固定列,表格錯亂問題

發現表格在初始值的時候,顯示正常,滑動到底部時,左側表格與固定列表高度不對齊,根據網上嘗試很多方法,修改css都不管用。 經過觀察發現,在初次加載時是正常的,只有在滑動到接近底部位置,不對齊。 解決思路:封裝全局指令(通過監聽table滾動到底部事件),避免重複邏輯,進行doLayout操作: el-table

shuihuyangpinga 頭像

@shuihuyangpinga

昵稱 hhffffggg

@weirdo_5f6c401c6cc86

vue2項目同時引用了element ui的Dialog組件和iview ui的Model組件,Dialog遮擋Model內容

今天調試頁面效果的時候遇到這樣一個問題,就是項目中同時引用了element ui的Dialog彈窗組件和iview ui的Model彈窗組件,點擊Dialog彈窗中的某個輸入框需要彈出使用Model組件製作的地圖彈窗,發現如圖Model彈窗被Dialog彈窗遮擋,後面是在element ui的Dialog彈窗組件上加了句z-index:999解決了該問題,彈窗層級默認是自增的,但是使用不同