vue3路由跳轉，普通路由和動態路由
vue3路由跳轉分兩種： 1、普通路由 2、動態路由 普通路由 無需在路由配置中聲明，可以隨意添加任意參數 參數以鍵值對的形式出現在 URL 的 ? 之後，用 分隔 例如：/user?id=123name=John，其中 id=123 和 name=John 是 query 參數 參數是可選的非必填項，可以自由傳遞 跳轉方式 const router = useRoute
Nickname 兔子先森
@HTML
Programming Language
Contributes53
Followers0
Contributes
@HTML
Stories List
SSE請求多種實現方式總結
文前推薦一下👉 前端必備工具推薦網站(圖牀、API和ChatAI、智能AI簡歷、AI思維導圖神器等實用工具): 站點入口：http://luckycola.com.cn/ 什麼是SSE SSE（Server-Sent Events）是一種用於實現服務器主動向客户端推送數據的技術，也被稱為“事件流”（Event Stream）。它基於 HTTP 協議，利用了其長連接特性，在
Nickname 六月的可樂🥤
你用過docker部署前端項目嗎？Tell Me Why 為何要用docker部署前端項目呢？
需求開發場景 在説docker之前，我們先來看看一般的需求開發和部署場景，是否需要安裝node 需求開發部署場景 開發環境，我們使用windows或mac，開發前端項目，正常來説，都是要安裝好對應node版本 ，使用node提供的npm包管理（構建）工具【除非是一個簡單的只有hello world的html文件不用node】 生產環境，要發佈到服務器上 1. 靜態SPA單頁面應用部署 服務器
Nickname 水冗水孚
《vue.js設計與實現》——調度執行
調度性的定義：當我們執行trigger動作觸發副作用函數重新執行時，有能力決定副作用函數的時機、次數以及方式 控制執行時機 先來看看如何決定副作用函數的執行方式 const data = { foo: 1 } const obj = new Proxy(data, {}); // 為了演示，省略代理配置 effect(() = { console.log(obj.foo); }) obj.
Nickname 兔子先森
《vue.js設計與實現》——計算屬性computed與lazy
在深入瞭解計算屬性之前，我們需要先知道懶執行的effect，也就是lazy的effect 我們現在實現的effect函數會立即執行傳遞給它的副作用函數，例如： effect( // 這個函數會立即執行 () = { console.log('執行了'); } ) 但有的時候我們不需要他立即執行，而是在需要的時候才執行，這個特性就跟計算屬性很像 我們可以在option
Nickname 兔子先森
《vue.js設計與實現》——watch的實現原理
簡易watch監聽 watch其實就是監聽給定的響應式數據變化，當數據變化時執行的回調函數 watch(obj, () = { console.log("數據變化了"); }) // 修改obj數據，watch自動觸發 obj.foo++ 實際上，watch就是利用了effect以及options.scheduler選項 effect( () = { console
Nickname 兔子先森
《vue.js設計與實現》——立即執行的 watch 與回調執行時機
watch的本質其實是對effect的二次封裝 watch的兩個特性： 1、立即執行的回調函數 2、回調函數的執行時機 立即執行的回調函數 在vue.js中，watch通過immediate屬性來實現立即執行，如下 watch(obj, () = { console.log('變化'); }, { immediate: true }) 當immediate存在並且為tr
Nickname 兔子先森
《vue.js設計與實現》——過期的副作用
我們平時可能不太關注"競態"的問題，但是你在日常的工作中可能或多少遇到過"競態" let finalData; watch(obj, async () = { // 發送一個請求 let res = await fetch('/api/request'); // 將數據保存到finalData finalData = res; }) 這段代碼看起來沒問題，實際上會發
Nickname 兔子先森
一步步教你用 CSS Grid 實現靈活又高效的瀑布流佈局，適配所有屏幕！
摘要 隨着網頁設計越來越複雜，尤其是圖片牆、商品展示、內容卡片這類頁面，瀑布流佈局（也叫 Masonry 佈局）成了非常受歡迎的設計方案。傳統實現往往依賴大量 JavaScript 或第三方庫，但其實利用 CSS Grid 加上少量 JS，就能實現既響應式又性能優越的瀑布流佈局。 本文將深入拆解這種方法的原理，帶你一步步理解關鍵代碼的作用，配合可運行的示例，讓你能輕鬆上手並靈活應用到實際項目中。
Nickname 前端視界
python telnetlib詳解
Python telnetlib 詳解（含 3.13 之後的替代方案） 適用讀者：需要在受控內網/實驗環境使用 Telnet 的同學。生產環境強烈建議優先 SSH（如 Paramiko/Netmiko）。 版本事實：telnetlib 在 span style="color:red"Python 3.11 標記棄用/span，並已在 span style="color:red"Pytho
Nickname 藍易雲
摩天輪（vue）
效果圖 使用示例 script lang="ts" setup import FerrisWheel from "**/FerrisWheel.vue"; import { ref } from "vue"; const defaultUrls = [ "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.
Nickname 你好啊你好
JSP 程序設計之 Web 技術基礎
在 Java Web 開發的世界裏，JSP（Java Server Pages）是一門舉足輕重的動態網頁開發技術。要學好 JSP，首先得紮實掌握 Web 技術基礎，下面就帶大家深入瞭解相關知識。 Web 的起源與發展 Web，本意是蜘蛛網和網，在網頁設計中特指網頁。它誕生於 1989 年 3 月，由歐洲粒子物理研究所的科學家蒂姆・伯納斯・李發明。1990 年 11 月，第一個 Web 服務器正式運
Nickname 衍生星球
div + transform 實現旋轉圖片並得到期望的佔位盒子
效果圖 使用示例 script setup lang="ts" import RotatedImage from "**/RotatedImage.vue"; import { ref } from "vue"; const value = ref(50); const clockwise = ref(true); const src = ref( "https://naive-ui.os
Nickname 你好啊你好
2026年Vue3 Admin前端框架開發技術深度解析
2026年Vue Admin前端框架開發技術深度解析 一、技術趨勢與演進方向 1.1 構建工具革命 2026年，Vite 6已成為默認構建工具，其基於Rust的Rolldown引擎使構建速度較Webpack提升300%。配合模塊聯邦（Module Federation）特性，可輕鬆實現微前端架構，例如將商品管理、支付系統拆分為獨立子應用動態加載。Vue Admin Better已實現通過單一配置項
Nickname 360Web
自制版MC
!DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" title大型3D方塊世界/title style * { margin: 0; paddin
Nickname 星辰大海
論如何製作簡易網頁槍械
武器系統製作：從零開始 第一步：先創造一個武器（用HTML） 把武器想象成一個玩具模型，我們先把它做出來。 !-- 這把槍叫"M4"，傷害35，射速10 -- div class="weapon" id="m4" h3M4 突擊步槍/h3 p傷害：span class="damage"35/span/p p射速：span class="fire-rate"10/span/
Nickname 星辰大海
模擬網頁中國象棋模擬對戰
簡介 本程序有人人對戰和人機對戰，歡迎挑戰 源碼 ''' !DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" title迷你象棋/title style bod
Nickname 星辰大海
網頁自制數學助手
介紹 本論文的數學助手不做過多講解，因為比較簡單，主要是1，本文屬於AI回答，僅供參考。2，他會跟你秀一段。3,它有一定的思維能力，你可以把不會的數學題發給它 源碼 !DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" meta name="viewport" content="width=device-width,
Nickname 星辰大海
uniapp微信小程序請求麥克風授權
首先找到manifest.json文件，開啓微信小程序授權請求 "permission": { "scope.record": { "desc": "需要使用麥克風進行語音錄製" // 此處描述需符合微信規範 } } 然後通過uni.getSetting查詢麥克風授權狀態 麥克風的scope值為scope.record，如果已授權則直接返回，若
Nickname 兔子先森
自制植物大戰殭屍
介紹 1，基本講解 “UTF—8” 防止中文亂碼 "title" 這是網頁標題 “!DOCTYPE”**的作用是聲明這是“HTML5”，防止不同瀏覽器出現報錯信息 ** 如果有不理解的歡迎私信 源碼 !DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" meta name="viewport" conte
Nickname 星辰大海
uniapp微信小程序長按功能
現在要實現一個按鈕長按的功能，大概有如下幾個要點： 1、長按按鈕，按鈕覆蓋整個輸入框 2、長按的過程中移動手指，判斷手指移動的位置是否在按鈕內 3、長按鬆開，按鈕還原 按鈕結構如下： view id="audio-full" :class="[ 'audio-full', isLongpress 'touch-longpress'
Nickname 兔子先森
流式輸出-建立SSE連接-01
什麼是流式輸出 流式輸出，也稱為流式傳輸，指的是服務器持續地將數據推送到客户端，而不是一次性發送完畢。這種模式下，連接一旦建立，服務器就能實時地發送更新給客户端。 人話講就是跟接口建立連接，只要接口不斷開，服務器就能實時的把信息發送給前端，AI流式輸出中，接口每次返回一小段話，前端拿到後流式渲染即可。 有點類似websocket，但SSE是單向的 fetch-event-source
Nickname 兔子先森
流式輸出-流式渲染-02
現在有很多框架實現了流式渲染，我在這裏例舉幾個： React框架 ● Ant-Design-X Vue框架 ● Element-Plus-X ● MateChat （PC/H5雙端兼容） H5移動端 ● ChatUI-React 這裏以MateChat框架做示例，MateChat是一個獨立的AI對話組件，不與其它UI框架關聯，可直接引入項目使用。 一般的流式渲染分兩種
Nickname 兔子先森
一個手寫的vue3錄音組件，支持錄音波紋、外觀自定義調節
該組件有兼容問題，MAC上不可用，需注意，這裏僅用來做記錄，如需音頻功能，可使用Recorder.js，方案很成熟。 組件如下： template div class="container" ref="container" canvas id="visualizer" ref="canvas"/canvas /div /template script setup lang=
Nickname 兔子先森