All gists

timmy / Mermaid Diagram Example

0 likes
0 forks
1 files
Last active 9 months ago
此 HTML 範例展示如何使用 Mermaid CDN 與 JavaScript 將 Mermaid 語法轉換為流程圖，以快速視覺化流程設計。
Diagram HTML Mermaid
1 <!doctype html>
2 <html lang="zh-TW">
3 <head>
4 <meta charset="UTF-8" />
5 <title>Mermaid Diagram Example</title>
6 <!-- 載入 Mermaid CDN -->
7 <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
8 <script>
9 mermaid.initialize({ startOnLoad: true })
10 </script>

timmy / MySQL 資料庫與表格查詢

0 likes
0 forks
1 files
Last active 9 months ago
這組 SQL 指令可查詢資料庫與各表的紀錄數及大小，方便監控與管理資料庫資源。
database management monitoring mysql query tables
1 SHOW DATABASES;
2
3 USE myapp;
4 SHOW TABLES;
5
6 SELECT TABLE_NAME, TABLE_ROWS
7 FROM INFORMATION_SCHEMA.TABLES
8 WHERE TABLE_SCHEMA = 'myapp';
9
10 SELECT TABLE_NAME,

timmy / Docker Compose 部署 MySQL

1 likes
0 forks
6 files
Last active 9 months ago
此 docker-compose.yml 配置 MySQL 8.0，透過環境變數管理使用者帳密，並使用 Volume 持久化資料庫資料，確保資料不因容器重啟而遺失。適用於開發及測試環境，可搭配 .env 檔案提升安全性。
compose database docker env mysql persistent-storage
1 MYSQL_USER=user
2 MYSQL_PASSWORD=password
3 MYSQL_ROOT_PASSWORD=rootpassword

timmy / 系統與網路狀態檢查

1 likes
0 forks
2 files
Last active 9 months ago
此腳本用於快速檢視 Linux 系統的基本資訊，包括作業系統、CPU、記憶體、檔案描述符、網路設定、TCP 參數、連線追蹤與當前開啟的 TCP 連線狀況，方便系統管理與效能調校。
bash linux monitoring network performance sysadmin system 
chmod +x system_info.sh
./system_info.sh > system_report.txt

timmy / SortableJS Grid 拖曳排序

0 likes
0 forks
1 files
Last active 9 months ago
本範例使用 SortableJS 實現 Grid 佈局的可拖放排序，允許用戶調整區塊順序，適用於 視覺化管理、儀表板排序、圖片排列與動態 UI 佈局 等應用。
dom-manipulation drag-and-drop grid-layout html javascript sortablejs ui-interaction
1 <!DOCTYPE html>
2 <html lang="zh-TW">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>SortableJS Grid 拖曳排序</title>
7 <style>
8 .grid-container {
9 display: flex;
10 flex-wrap: wrap;

timmy / SortableJS 巢狀清單拖放排序

0 likes
0 forks
1 files
Last active 9 months ago
本範例展示如何使用 SortableJS 實現可拖放的巢狀清單，允許用戶調整層級結構與順序，適用於 層級式資料管理、分類管理、階層式 UI 排序 等應用。
dom-manipulation drag-and-drop html javascript nested-list sortablejs ui-interaction
1 <!DOCTYPE html>
2 <html lang="zh-TW">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>SortableJS 巢狀清單</title>
7 <style>
8 .nested-list {
9 list-style: none;
10 padding-left: 20px;

timmy / SortableJS 多清單拖放排序

0 likes
0 forks
1 files
Last active 9 months ago
本範例展示如何使用 SortableJS 在多個清單之間拖放項目，允許用戶在不同分類間移動內容，適用於 任務管理、拖放式分類、視覺化數據管理 等應用。
dom-manipulation drag-and-drop html javascript multi-list sortablejs ui-interaction
1 <!DOCTYPE html>
2 <html lang="zh-TW">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>SortableJS 多清單範例</title>
7 <style>
8 .container {
9 display: flex;
10 gap: 20px;

timmy / SortableJS 進階拖放排序

0 likes
0 forks
1 files
Last active 9 months ago
本範例展示如何使用 SortableJS 來實現可拖放排序功能，並即時顯示更新後的順序，適用於動態 UI、可視化管理、任務清單與數據重組等應用。
dom-manipulation drag-and-drop dynamic-list html javascript sortablejs ui-interaction
1 <!DOCTYPE html>
2 <html lang="zh-TW">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>SortableJS 進階範例</title>
7 <style>
8 .list {
9 list-style: none;
10 padding: 0;

timmy / SortableJS 拖放排序

0 likes
0 forks
1 files
Last active 9 months ago
SortableJS 是一個輕量級 JavaScript 函式庫，可讓使用者透過拖放方式重新排序 HTML 清單項目，適用於動態 UI、可視化管理及交互式應用。
dom-manipulation drag-and-drop html javascript sortablejs ui-interaction
1 <!DOCTYPE html>
2 <html lang="zh-TW">
3 <head>
4 <meta charset="UTF-8">
5 <title>SortableJS 範例</title>
6 <style>
7 .list {
8 list-style-type: none;
9 padding: 0;
10 width: 200px;

timmy / 使用 FastAPI 進行 API 身份驗證與請求處理

0 likes
0 forks
3 files
Last active 9 months ago
FastAPI 可透過 Header 讀取請求標頭，並透過 Depends 進行依賴注入（Dependency Injection），適用於 API Token 驗證、身份驗證、請求處理 等場景。
api authentication fastapi header python security
1 from fastapi import FastAPI, Header, HTTPException
2
3 app = FastAPI()
4
5 @app.get("/secure-data")
6 async def secure_data(api_key: str = Header(None)):
7 if api_key != "my_secure_token":
8 raise HTTPException(status_code=401, detail="無效的 API 金鑰")
9 return {"message": "驗證成功，提供安全數據"}
Newer Older

Powered by Opengist ⋅ Load: 224ms⋅

English