Young & Akebi's Tech Blog

2025 OEM 網站開發筆記 [101] - 從單一到多個 apps 的 Django 管理指南：專案結構調整、模組化後端設計與維護策略

目錄結構由於大多數網路上及教學，專案大都只含一個 app，而實際上多數商用......

Posted by Young on 2025-03-05

2025 OEM 網站開發筆記 [98] - Django 連線 MySQL、資料遷移流程

apps 註冊、資料庫遷移、MySQL 資料表命名

註冊 Django 應用程式(APP)在專案中會將大部分功能模組化，每個模......

Posted by Young on 2025-03-05

Django SQL

Django + React 電商專案練習 [18] - 透過 Nginx 部署 Django 至私有主機(No PaaS)

讓 Nginx 透過 uWSGI 代理 Django，也不用受第三方平台的任何流量及檔案限制

Tech Stack Linux(Ubuntu 20.04+) 主機：本專......

Posted by Young on 2022-12-08

Django Linux Nginx uWSGI

Hexo 部署至 Nginx 設置 CI/CD 流程

除了 GitHub Pages 其實還有第二種選擇

PrerequisiteDNS、VPS,Shared Host,Serve......

Posted by Young on 2022-11-20

Linux Nginx CI/CD Vim

Integrating GPT-3.5-Turbo with DC for Custom Bot Development

Create a custom Discord bot with OpenAI's GPT API

Tech Stack本篇文章將會使用到以下的技術：基本的 JavaScr......

Posted by Young on 2024-01-22

node.js discord.js JavaScript GPT

深入了解 SQL JOINS - Mastering SQL Joins [1]

A Comprehensive Guide to Inner, Outer, Self, and Cross Joins

Cross-table Queries 的種類有 4 種常用的跨表查詢的方......

Posted by Young on 2022-12-17

SQL

2025 OEM 網站開發筆記 [番外] - GSAP target [元素類別名稱] not found 問題解決

問題 GSAP target .page-title not found.......

Posted by Young on 2025-04-02

React GSAP

2025 OEM 網站開發筆記 [9999] - Django 郵件伺服器設定，前端代入寄送者資訊代入郵件

前言像這種郵件發送的功能，通常會在後端進行處理，前端只需要提供一個表單讓使......

Posted by Young on 2025-04-01

React Tailwind CSS Django MySQL

2025 OEM 網站開發筆記 [999] - 打造後台 Markdown 編輯器並於前端成功渲染

前言本專案選擇 martor 作為後台的文章內文 Markdown 編輯器......

Posted by Young on 2025-03-28

React Tailwind CSS Django MySQL

2025 OEM 網站開發筆記 [xxx] - 導入多語系 react-i18n 升級成國際化網站

下載套件1npm install react-i18next i18nex......

Posted by Young on 2025-03-22

React TypeScript npm

2025 OEM 網站開發筆記 [100] - 後端文章管理系統 & 列表

ER Model 設計、ORM 模型設計，建立關聯資料表、資料庫遷移、文章列表 API 設計

後端整體後端大致工作流程為 ORM 模型設計 serializer 開發......

Posted by Young on 2025-03-20

2025 OEM 網站開發筆記 [99] - 後端產品列表 API 開發

從 dummydata 切換到真實資料庫，ER Model 設計、ORM 模型設計，建立 Product、ProductImage、Specification、Tag、ProductTag 關聯資料表、資料庫遷移、CORS Header 設定、產品列表 API 設計

後端整體後端大致工作流程為 ORM 模型設計 serializer 開發......

Posted by Young on 2025-03-19

2025 OEM 網站開發筆記 [80] - Django CORS Header 設定

為什麼需要 CORS Header？當 React 前端（運行於 http......

Posted by Young on 2025-03-12

Django

2025 OEM 網站開發筆記 [5] - 製作 Timeline 里程碑

下載現成套件此專案追求的是在最短的時間開發出成果，因此直接找到並使用：由......

Posted by Young on 2025-03-05

2025 OEM 網站開發筆記 [4] - 套用 GSAP 動畫至首頁元件

為什麼選擇 GSAP？原本想直接選跟 React 最契合的 framer ......

Posted by Young on 2025-03-03

2025 OEM 網站開發筆記 [4-1] - shadcn/ui's Accordion with GSAP Expand/Collapse Animation

用 GSAP 撰寫手風琴折疊動畫

問題重點由於專案使用 GSAP 而非 framer motion 導致 s......

Posted by Young on 2025-03-03

Typescript Path Alias 設定及錯誤解決

設置 @ 路徑別名到 tsconfig.json 加入 compilerO......

Posted by Young on 2025-02-10

React TypeScript npm

2025 OEM 網站開發筆記 [1] - 📌 Tech Stack

記錄一下專案使用到的技術，會隨著專案進行時更新

前言這次開發 OEM 代工網站會多使用 Vite 來簡化前端建構的流程與時......

Posted by Young on 2025-02-07

React Tailwind CSS Django MySQL TypeScript Vite TanStack Query

2025 OEM 網站開發筆記 [2] - 用 Dummy Data 熟悉前端開發 Workflow

React + Vite + TypeScript + Tailwind CSS + TanStack Query + Django + MySQL

前言先不用實際去後端寫 API Endpoint，直接用 Dummy da......

Posted by Young on 2025-02-07

React Tailwind CSS Django MySQL TypeScript Vite TanStack Query

2025 OEM 網站開發筆記 [3] - Swiper JS + shadcn/ui + Tailwind CSS 實作高質感產品卡片 Swiper

順便複習 useRef vs useState 的差異

在 React + TypeScript 專案中導入 Swiper JSS......

Posted by Young on 2025-02-07

React Tailwind CSS TypeScript Vite

Ext JS 筆記：異步函數(async/await) 的重要性

網速影響發生錯誤的機率

問題說明前陣子看到了同事 A 與老闆不斷爭執一個內部系統的其中一個問題，一......

Posted by Young on 2023-05-10

JavaScript Ext JS

在沒有 Webpack 的非現代化專案 localize TailwindCSS CDN

紀錄 plain php 專案 Localize Tailwind CSS CDN 的步驟

Why don’t just simply use CDN?CDN 只適合......

Posted by Young on 2023-02-13

Tailwind CSS CSS

深入了解 SQL JOINS - 實戰篇 [2]

A Comprehensive Guide to Inner, Outer, Self, and Cross Joins

實戰範例 INNER JOIN目標：優化 SQL 查詢效能必須要有可......

Posted by Young on 2022-12-18

SQL

Django + React 電商專案練習 [19] - 用戶頭貼更換/上傳功能

後端在 UserProfile 模型中加入 avatar 欄位建立 A......

Posted by Young on 2022-12-09

React Django Redux Linux

Django + React 電商專案練習 [17] - Hash Route

為何需要 Hash Route？解決 React Router 在部署到伺......

Posted by Young on 2022-12-07

React Django Redux Linux

Django + React 電商專案練習 [16] - 整合前端(React)與後端(Django)

不再需要特地去前端執行 npm run start

流程首先將 frontend 資料夾直接移動至 backend 資料夾內，......

Posted by Young on 2022-12-06

React Django Redux Linux

Django + React 電商專案練習 [15] - 產品輪播圖

輪播顯示高評價的產品

後端view(篩選+排序高評分產品) gte: greater than ......

Posted by Young on 2022-12-05

React Django Redux Linux

Django + React 電商專案練習 [14] - 分頁功能

後端由於我們並不是使用 Django template 來渲染前端頁面，......

Posted by Young on 2022-12-04

React Django Redux Linux

Django + React 電商專案練習 [13] - 產品評論功能(含星數計算)

後端需要一個 Review 的 endpoint 來處理產品評論的新增邏......

Posted by Young on 2022-12-03

React Django Redux Linux

Django + React 電商專案練習 [12] - 搜尋產品功能

前端整體搜尋功能架構： SearchBar - 前端搜尋欄位，捕捉使用者......

Posted by Young on 2022-12-02

React Django Redux Linux

2025 OEM 網站開發筆記 [101] - 從單一到多個 apps 的 Django 管理指南：專案結構調整、模組化後端設計與維護策略

2025 OEM 網站開發筆記 [98] - Django 連線 MySQL、資料遷移流程

apps 註冊、資料庫遷移、MySQL 資料表命名

Django + React 電商專案練習 [18] - 透過 Nginx 部署 Django 至私有主機(No PaaS)

讓 Nginx 透過 uWSGI 代理 Django，也不用受第三方平台的任何流量及檔案限制

Hexo 部署至 Nginx 設置 CI/CD 流程

除了 GitHub Pages 其實還有第二種選擇

Integrating GPT-3.5-Turbo with DC for Custom Bot Development

Create a custom Discord bot with OpenAI's GPT API

深入了解 SQL JOINS - Mastering SQL Joins [1]

A Comprehensive Guide to Inner, Outer, Self, and Cross Joins

2025 OEM 網站開發筆記 [番外] - GSAP target [元素類別名稱] not found 問題解決

2025 OEM 網站開發筆記 [9999] - Django 郵件伺服器設定，前端代入寄送者資訊代入郵件

2025 OEM 網站開發筆記 [999] - 打造後台 Markdown 編輯器並於前端成功渲染

2025 OEM 網站開發筆記 [xxx] - 導入多語系 react-i18n 升級成國際化網站

2025 OEM 網站開發筆記 [100] - 後端文章管理系統 & 列表

ER Model 設計、ORM 模型設計，建立關聯資料表、資料庫遷移、文章列表 API 設計

2025 OEM 網站開發筆記 [99] - 後端產品列表 API 開發

從 dummydata 切換到真實資料庫，ER Model 設計、ORM 模型設計，建立 Product、ProductImage、Specification、Tag、ProductTag 關聯資料表、資料庫遷移、CORS Header 設定、產品列表 API 設計

2025 OEM 網站開發筆記 [80] - Django CORS Header 設定

2025 OEM 網站開發筆記 [5] - 製作 Timeline 里程碑

2025 OEM 網站開發筆記 [4] - 套用 GSAP 動畫至首頁元件

2025 OEM 網站開發筆記 [4-1] - shadcn/ui's Accordion with GSAP Expand/Collapse Animation

用 GSAP 撰寫手風琴折疊動畫

Typescript Path Alias 設定及錯誤解決

2025 OEM 網站開發筆記 [1] - 📌 Tech Stack

記錄一下專案使用到的技術，會隨著專案進行時更新

2025 OEM 網站開發筆記 [2] - 用 Dummy Data 熟悉前端開發 Workflow

React + Vite + TypeScript + Tailwind CSS + TanStack Query + Django + MySQL

2025 OEM 網站開發筆記 [3] - Swiper JS + shadcn/ui + Tailwind CSS 實作高質感產品卡片 Swiper

順便複習 useRef vs useState 的差異

Ext JS 筆記：異步函數(async/await) 的重要性

網速影響發生錯誤的機率

在沒有 Webpack 的非現代化專案 localize TailwindCSS CDN

紀錄 plain php 專案 Localize Tailwind CSS CDN 的步驟

深入了解 SQL JOINS - 實戰篇 [2]

A Comprehensive Guide to Inner, Outer, Self, and Cross Joins

Django + React 電商專案練習 [19] - 用戶頭貼更換/上傳功能

Django + React 電商專案練習 [17] - Hash Route

Django + React 電商專案練習 [16] - 整合前端(React)與後端(Django)

不再需要特地去前端執行 npm run start

Django + React 電商專案練習 [15] - 產品輪播圖

輪播顯示高評價的產品

Django + React 電商專案練習 [14] - 分頁功能

Django + React 電商專案練習 [13] - 產品評論功能(含星數計算)

Django + React 電商專案練習 [12] - 搜尋產品功能

FEATURED TAGS

ABOUT ME

RECENT POSTS

FRIENDS

archives

categories