標籤「網頁開發」的 3 篇文章

查看所有標籤

資料庫前端備忘錄

2024年1月30日 · 4 分鐘閱讀

ひかり

這篇備忘錄記錄了資料庫前端。

資訊

資料庫前端通常指那些用於管理、可視化或與後端資料庫交互的用戶界面應用程式。這些應用程式可以是桌面應用、網頁應用或 CLI 工具，它們提供了一種非程式設計師也能輕鬆操作資料庫的方式。

1. 資料庫前端的類型

A. 桌面資料庫管理工具

這些是安裝在本地電腦上的獨立應用程式，通常功能非常強大，支持多種資料庫類型。

DBeaver：一個通用資料庫客戶端，支持幾乎所有主流資料庫（MySQL, PostgreSQL, Oracle, SQL Server, SQLite 等）。提供數據編輯器、SQL 編輯器、ERD 繪製等功能。
DataGrip (by JetBrains)：專為資料庫開發者設計的 IDE，支持多種資料庫，提供智能程式碼補全、重構工具、數據導出等高級功能。
TablePlus：一個現代化的原生資料庫管理工具，支持多種資料庫，界面簡潔美觀，響應迅速。
SQL Server Management Studio (SSMS)：微軟官方的 SQL Server 管理工具。
MySQL Workbench：MySQL 官方的圖形化工具，用於資料庫設計、開發和管理。

B. 基於網頁的資料庫管理工具

這些工具運行在瀏覽器中，通常更容易部署和跨平台訪問，但功能可能相對簡潔。

phpMyAdmin：最廣泛使用的 MySQL/MariaDB 網頁管理工具，基於 PHP 開發。
Adminer：單文件 PHP 腳本，支持多種資料庫，比 phpMyAdmin 更輕量。
pgAdmin：PostgreSQL 官方的網頁管理界面。
Metabase / Superset：這類工具更側重於數據可視化和商業智能 (BI)，允許用戶通過拖放界面創建儀表板和報告，而非直接進行資料庫管理操作。

C. CLI 資料庫客戶端

對於熟悉命令行的開發者和資料庫管理員，CLI 工具效率更高。

psql (PostgreSQL)：PostgreSQL 的官方命令行客戶端。
mysql (MySQL)：MySQL 的官方命令行客戶端。
sqlite3 (SQLite)：SQLite 的官方命令行客戶端。

D. 自定義網頁前端

在許多應用程式中，前端開發者會為特定需求構建自定義的網頁界面，以便用戶能夠方便地與資料庫交互（通過後端 API）。

技術棧：React, Vue, Angular (前端框架) + Node.js (Express), Python (Django/Flask), Ruby on Rails (後端框架)。
用途：企業內部管理系統、CRM、CMS、數據儀表板等。

2. 選擇合適的工具

選擇資料庫前端工具時，考慮以下因素：

資料庫類型：你使用的資料庫是什麼？(MySQL, PostgreSQL, SQL Server, MongoDB, Redis 等)
功能需求：你需要什麼功能？(數據編輯、SQL 查詢、ERD 設計、數據導入導出、性能監控、用戶管理等)
使用習慣：你偏好桌面應用、網頁應用還是命令行？
團隊協作：團隊成員是否需要共享訪問或使用相同的工具？
安全考量：特別是對於網頁工具，需要考慮認證和授權。
預算：開源免費工具還是商業付費工具？

3. 常見操作

無論使用哪種資料庫前端，常見的操作包括：

連接資料庫：配置連接參數（主機、端口、用戶名、密碼、資料庫名稱）。
執行 SQL 查詢：編寫並執行 SQL 語句。
瀏覽和編輯數據：以表格形式查看數據並直接修改。
管理表結構：創建、修改、刪除表、索引、視圖等。
導入/導出數據：將數據從文件導入資料庫，或將資料庫數據導出到文件（CSV, JSON, SQL）。
用戶和權限管理：創建用戶、分配角色和權限。

總結

資料庫前端工具極大地簡化了與資料庫的交互，使得開發者和非技術用戶都能高效地管理數據。從功能豐富的桌面 IDE 到輕量級的網頁客戶端，再到簡潔的 CLI 工具，選擇最適合你需求的工具是提高工作效率的關鍵。

CSS Grid 備忘錄

2023年10月9日 · 4 分鐘閱讀

ひかり

這篇備忘錄記錄了 CSS Grid。

資訊

CSS Grid Layout 是一個強大的二維佈局系統，它允許你將網頁內容劃分為行和列，並將元素精確放置在這些網格單元中。它非常適合於設計複雜的網頁佈局，提供了比 Flexbox（一維佈局）更全面的控制。

1. 核心概念

網格容器 (Grid Container)：應用 display: grid 或 display: inline-grid 的元素。
網格項目 (Grid Items)：網格容器的直接子元素。
網格線 (Grid Lines)：構成網格的水平和垂直分隔線。
網格軌道 (Grid Tracks)：網格線之間的空間，可以是行 (grid-row) 或列 (grid-column)。
網格單元 (Grid Cells)：一個網格軌道交叉形成的最小單位。
網格區域 (Grid Areas)：由多個網格單元組成的矩形區域。

2. 創建網格容器

要創建一個網格佈局，首先將元素的 display 屬性設置為 grid 或 inline-grid。

.container {
  display: grid;
  /* 其他網格屬性 */
}

3. 定義網格軌道 (行和列)

`grid-template-columns` 和 `grid-template-rows`

這些屬性定義了網格的列和行的數量和大小。

固定大小：使用 px, em, rem, % 等單位。

.container {
  grid-template-columns: 100px 200px auto; /* 三列：100px, 200px, 剩餘空間 */
  grid-template-rows: 50px 1fr; /* 兩行：50px, 剩餘空間 */
}

fr 單位 (Fraction)：表示網格容器中可用空間的比例。

.container {
  grid-template-columns: 1fr 2fr 1fr; /* 三列，比例為 1:2:1 */
}

repeat() 函數：用於重複定義軌道。

.container {
  grid-template-columns: repeat(3, 1fr); /* 創建三列，每列佔用相同比例的空間 */
  grid-template-rows: repeat(2, 100px); /* 創建兩行，每行 100px */
}

minmax() 函數：設置軌道大小的最小和最大值。

.container {
  grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 每列最小 100px，最大 1fr */
}

4. 網格項目放置

根據網格線放置

grid-column-start, grid-column-end, grid-row-start, grid-row-end
簡寫：grid-column, grid-row

.item1 {
  grid-column-start: 1; /* 從第 1 條垂直網格線開始 */
  grid-column-end: 3;   /* 在第 3 條垂直網格線結束 (佔用第 1 和第 2 列) */
  /* 或者簡寫：grid-column: 1 / 3; */

  grid-row: 1 / span 2; /* 從第 1 條水平網格線開始，跨越 2 行 */
}

根據網格區域放置

定義網格區域：使用 grid-template-areas 在網格容器上定義具名區域。

.container {
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
}

將項目放置到區域：使用 grid-area 屬性將網格項目分配給這些區域。

.header { grid-area: header; }
.nav    { grid-area: nav;    }
.main   { grid-area: main;   }
.aside  { grid-area: aside;  }
.footer { grid-area: footer; }

5. 網格間距 (Gutters)

使用 gap, row-gap, column-gap 設置網格軌道之間的間距。

.container {
  gap: 10px; /* 行間距和列間距都是 10px */
  /* 或者分別設置 */
  /* row-gap: 10px; */
  /* column-gap: 15px; */
}

6. 對齊內容

容器級對齊 (對齊網格內的網格項目)

justify-items (水平方向)
align-items (垂直方向)
簡寫：place-items

值：start, end, center, stretch (默認)

.container {
  justify-items: center; /* 所有項目在網格單元中水平居中 */
  align-items: center;   /* 所有項目在網格單元中垂直居中 */
}

項目級對齊 (對齊單個網格項目)

justify-self (水平方向)
align-self (垂直方向)
簡寫：place-self

值：start, end, center, stretch (默認)

.item1 {
  justify-self: end; /* 在其網格單元中水平靠右 */
  align-self: start; /* 在其網格單元中垂直靠上 */
}

對齊網格軌道 (當網格容器有額外空間時)

justify-content (水平方向)
align-content (垂直方向)
簡寫：place-content

值：start, end, center, stretch, space-around, space-between, space-evenly

.container {
  height: 500px; /* 確保容器有足夠的額外空間 */
  justify-content: space-around; /* 軌道之間和兩側均勻分佈空間 */
  align-content: center;       /* 將所有行居中對齊 */
}

7. 總結

CSS Grid Layout 是一個強大的二維佈局工具，它提供了一種直觀且靈活的方式來創建複雜的網頁佈局。通過理解其核心概念（容器、項目、軌道、線、區域）以及各種屬性（如 grid-template-areas、gap、對齊屬性），你可以設計出響應式且結構良好的網頁。

建立個人主頁

2023年6月26日 · 4 分鐘閱讀

ひかり

這篇備忘錄記錄了如何建立個人主頁。

資訊

建立個人主頁是展示個人作品、技能、簡歷和聯絡方式的重要方式。它可以用作個人品牌建設、求職或僅僅作為一個分享興趣愛好的平台。

1. 選擇技術棧

建立個人主頁有許多種方法，從靜態網頁到複雜的內容管理系統 (CMS)。選擇合適的技術棧取決於你的需求和技術熟練度。

A. 靜態站點生成器 (SSG) - 推薦

靜態站點生成器是建立個人主頁的流行選擇，因為它們易於部署、加載速度快、安全且通常免費託管。

Docusaurus：用於建立文檔網站（如本網站）。它基於 React，支持 Markdown，並提供內置的搜尋、版本控制和國際化功能。
Jekyll：基於 Ruby 的 SSG，與 GitHub Pages 緊密集成。
Hugo：基於 Go 語言的 SSG，以其極快的構建速度而聞名。
Next.js / Gatsby：基於 React 的框架，可以生成靜態站點。

B. 前端框架 (SPA)

如果你需要更多互動性或動態內容，可以使用前端框架創建單頁應用程式 (SPA)。

React
Vue.js
Angular

C. 內容管理系統 (CMS)

如果你希望有管理界面來輕鬆更新內容，可以使用 CMS。

WordPress
Joomla
Ghost

2. 規劃內容

在開始編寫程式碼之前，先規劃你的主頁應該包含哪些內容。常見的內容區塊包括：

首頁 / 關於我：簡要介紹自己、你的興趣和目標。
作品集 / 專案：展示你的最佳作品，包括截圖、鏈接和簡要說明。
技能：列出你的技術技能、程式語言、工具和框架。
經歷 / 簡歷：你的教育背景、工作經歷和成就。
部落格 / 文章：如果你喜歡寫作，可以分享你的知識和見解。
聯絡方式：電子郵件、GitHub、LinkedIn、Twitter 等社交媒體鏈接。

3. 建立個人主頁 (以 Docusaurus 為例)

本網站就是使用 Docusaurus 建立的，所以這裡以 Docusaurus 為例。

A. 建立 Docusaurus 專案

npx create-docusaurus@latest my-website classic --typescript
cd my-website

B. 配置 Docusaurus

編輯 docusaurus.config.ts 文件以配置網站標題、導航欄、腳註等。

C. 建立個人主頁內容

修改首頁：默認的首頁是 src/pages/index.tsx。你可以編輯這個 React 組件來設計你的首頁。

// src/pages/index.tsx
import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.css';
import HomepageFeatures from '../components/HomepageFeatures';

function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--primary', styles.heroBanner)}>
      <div className="container">
        <h1 className="hero__title">{siteConfig.title}</h1>
        <p className="hero__subtitle">{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
            className="button button--secondary button--lg"
            to="/docs/intro">
            我的簡歷 - 5min 閱讀 ⏱️
          </Link>
        </div>
      </div>
    </header>
  );
}

export default function Home(): JSX.Element {
  const {siteConfig} = useDocusaurusContext();
  return (
    <Layout
      title={`Hello from ${siteConfig.title}`}
      description="Description will go into a meta tag in <head />">
      <HomepageHeader />
      <main>
        <HomepageFeatures />
      </main>
    </Layout>
  );
}

建立個人資料頁面 (例如 about.md)：你可以在 docs/ 目錄下創建 Markdown 文件作為關於你的頁面。

<!-- docs/about.md -->
---
sidebar_position: 1
---

# 關於我

你好！我是 [你的名字]，一位熱愛 [你的興趣] 的 [你的職位/角色]。
我在 [領域] 擁有 [X] 年的經驗，專注於 [你的專長]。

## 我的技能

-   程式語言：Python, JavaScript, C#
-   框架：React, Node.js, .NET
-   工具：Git, Docker, Kubernetes

## 我的專案

-   **專案 A**：[鏈接] - 簡要說明
-   **專案 B**：[鏈接] - 簡要說明

## 聯絡方式

-   電子郵件：[email protected]
-   GitHub：[你的 GitHub]
-   LinkedIn：[你的 LinkedIn]

配置導航欄：在 docusaurus.config.ts 中修改 navbar 配置，添加指向你的關於我頁面、部落格等鏈接。

navbar: {
  title: 'Hikari Dev',
  logo: {
    alt: 'My Site Logo',
    src: 'img/logo.svg',
  },
  items: [
    {
      type: 'doc',
      docId: 'intro', // 指向你的關於我或簡歷文檔
      position: 'left',
      label: '關於我',
    },
    {to: '/blog', label: '部落格', position: 'left'},
    // ... 其他鏈接
  ],
},

D. 部署網站

最簡單的方法是使用 GitHub Pages 或 Vercel / Netlify。Docusaurus 有內置的部署功能。

GitHub Pages：在 docusaurus.config.ts 中配置 baseUrl 和 projectName。

baseUrl: '/<your-repo-name>/', // 例如，如果你的 repo 是 yourusername.github.io/my-website
projectName: 'my-website',
organizationName: 'yourusername',

然後運行部署命令：

GIT_USER=<YOUR_GITHUB_USERNAME> USE_SSH=true yarn deploy

總結

建立個人主頁是一個展現自己的絕佳機會。選擇合適的工具、精心策劃內容，並利用靜態站點生成器等現代技術，你可以輕鬆地建立一個專業且美觀的個人網站。

1. 資料庫前端的類型​

A. 桌面資料庫管理工具​

B. 基於網頁的資料庫管理工具​

C. CLI 資料庫客戶端​

D. 自定義網頁前端​

2. 選擇合適的工具​

3. 常見操作​

總結​

1. 核心概念​

2. 創建網格容器​

3. 定義網格軌道 (行和列)​

grid-template-columns 和 grid-template-rows​

4. 網格項目放置​

根據網格線放置​

根據網格區域放置​

5. 網格間距 (Gutters)​

6. 對齊內容​

容器級對齊 (對齊網格內的網格項目)​

項目級對齊 (對齊單個網格項目)​

對齊網格軌道 (當網格容器有額外空間時)​

7. 總結​

1. 選擇技術棧​

A. 靜態站點生成器 (SSG) - 推薦​

B. 前端框架 (SPA)​

C. 內容管理系統 (CMS)​

2. 規劃內容​

3. 建立個人主頁 (以 Docusaurus 為例)​

A. 建立 Docusaurus 專案​

B. 配置 Docusaurus​

C. 建立個人主頁內容​

D. 部署網站​

總結​