菜鳥工程師肉豬: 1月 2026

2026/1/25

Vue Nuxt 3 刪除訂單

本篇在Vue Nuxt 3專案使用DELETE API刪除資料。

Vue Nuxt 3 Toast通知

本篇在Vue Nuxt 3專案實作Toast通知效果。

今日風情 20260125

2026年1月25日星期日。

2026/1/24

Vue Nuxt 3 新增訂單資料（表單 + POST API）

本篇介紹在Vue Nuxt 3專案使用表單和POST API新增資料。

2026/1/23

Vue Nuxt 3 Skeleton載入中效果

本篇介紹在Vue Nuxt 3專案使用Skeleton來呈現載入中的效果。

2026/1/22

Vue Nuxt 3 分頁

本篇在Vue Nuxt 3專案實作分頁查詢(Pagination)。

2026/1/21

Vue Nuxt 3 使用Page Meta管理頁面角色存取

本篇介紹Vue Nuxt 3使用Page Meta來管理頁面的角色存取。

AI 時代的工程師困境：從 Vibe Coding 到產業斷層

Powered by ChatGPT

Vue Nuxt 3 登出

本篇介紹Vue Nuxt 3的登出(Logout)實作。

2026/1/20

Vue Nuxt 3 側邊選單權限控管

本篇介紹Vue Nuxt 3的側邊功能選單(Sidebar)的權限控管實作。

2026/1/19

Vue Nuxt 3 登入狀態管理

本篇介紹Vue Nuxt 3的前端登入狀態管理。

2026/1/17

今日風情 20260117

2026年1月17日星期六。

2026/1/15

Vue Nuxt 3 登入驗證

本篇介紹使用Vue Nuxt 3的中間件(Middleware)來做登入驗證。

今日風情 20260115

2026年1月15日星期四。

Vue Nuxt 3 使用路由中間件(Middleware)

本篇介紹Vue Nuxt 3的路由中間件(Route Middleware)的使用。

2026/1/14

Java Google Map Platform Maps Static API 範例

Java程式呼叫Google Map Platform Maps Static API的簡單範例

2026/1/13

Java Google Map Platform Routes API computeRouteMatrix簡單範例

Java程式呼叫Google Map Platform Routes API的computeRouteMatrix簡單範例

2026/1/12

Java Google Map Platform Routes API簡單範例

Java程式呼叫Google Map Platform Routes API的簡單範例

VS Code 建立Spring Boot 3專案

本篇介紹在VS Code中建立Spring Boot 3專案。

2026/1/11

今日風情 20260111

2026年1月11日星期日。

2026/1/10

今日風情 20260110

2026年1月10日星期六。

2026/1/8

Vue Nuxt 3 抽取下拉選單為元件(Components)

本篇把Vue Nuxt 3頁面中的下拉選單抽出為元件/組件(Components)。

2026/1/7

Vue Nuxt 3 抽取共用邏輯為組合式函式(Composables)

本篇把Vue Nuxt 3頁面中的下拉選單的邏輯抽出為Vue 3的組合式函式(Composables)。

今日風情 20260107

2026年1月7日星期三。

Vue Nuxt 3 code mapping

本篇把Vue Nuxt 3頁面中的下拉選單改用code mapping的方式改寫。

2026/1/6

Vue Nuxt 3 useFetch 多查詢參數

本篇介紹Vue Nuxt 3的useFetch呼叫API時帶入頁面輸入的多個參數。

Vue Nuxt 3 同步網址列查詢參數

本篇介紹Vue Nuxt 3如何將查詢參數同步到網址列。

Vue Nuxt 3 useFetch 輸入查詢參數

本篇介紹Vue Nuxt 3的useFetch呼叫API時帶入搜尋欄的值為查詢參數(Query Parameter)。

Vue Nuxt 3 useFetch 查詢參數

本篇介紹Vue Nuxt 3的useFetch呼叫API時帶入查詢參數(Query Parameter)。

2026/1/5

Vue Nuxt 3 useFetch error

本篇介紹Vue Nuxt 3的useFetch回傳值的error屬性。

Vue Nuxt 3 useFetch pending

本篇介紹Vue Nuxt 3的useFetch回傳值的pending屬性。

Vue Nuxt 3 使用useFetch從API獲取資料

本篇介紹Vue Nuxt 3的useFetch。

Vue Nuxt 3 捕捉所有路由 Catch-all Route

本篇介紹如何在Vue Nuxt 3的捕捉所有路由(Catch-all Route)。

Vue Nuxt 3 程式式導航 Programmatic Navigation

本篇介紹如何在Vue Nuxt 3中使用程式式導航(Programmatic Navigation)，白話一點就是「使用程式來進行路由頁面跳轉」。

Vue Nuxt 3 動態路由 Dynamic Route

本篇介紹如何在Vue Nuxt 3中使用動態路由(Dynamic Route)。

2026/1/4

Vue Nuxt 3 加入側邊選單

本篇在簡單的Nuxt 3網頁加入側邊選單(Sidebar)。

Vue 建立簡單的Nuxt 3網頁

本篇是透過建立一個簡單的Nuxt 3網頁來學習Vue的基礎知識。

今日風情 20260104

2026年1月4日星期日。

2026/1/2

前端CSR和SSR區別

最近學習前端知道原來有分CSR和SSR，差別如下。

Vue 使用pnpm建立Nuxt 3專案

Nuxt是一個基於Vue的框架，透過約定好的專案結構與規範，讓開發者能輕鬆開發支援SPA(Single Page Application，單頁應用程式)、SSR(Server-Side Rendering，伺服器渲染)與SSG(Static Site Generation，靜態網站生成)的應用，並自動處理路由設定。

使用pnpm建立Nuxt 3專案的方式如下。

2026/1/1

Windows 11 關閉智慧型應用程式控制 (Smart App Control)

Windows的「智慧型應用程式控制 (Smart App Control)」我不知道能提高什麼安全性，我只知道在安裝應用程式或軟體時常會造成問題。

Vue 使用Vite建立Vue專案

Vite是可以快速建置Vue專案的工具，建立方式如下。

Windows 11 安裝nvm

Windows 11安裝node版本管理工具nvm的方式如下。