2023-07-28|閱讀時間 ‧ 約 4 分鐘

Supabase的資料庫和表格

supabase的資料庫與表格封面
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。

Supabase的資料庫

PostgreSQL
Supabase的資料庫基底是PostgreSQL,在PostgreSQL中又是有著各種表格,以及各種欄位所構成,接下來搭配介面介紹。
如果想要對PostgreSQL更加瞭解可以去這裡。

新增第一個表格
在上篇文章中我們創了第一個專案,這裡就開始為這個專案創幾個表格來看看。
創第一個Supabase專案
Table editor頁籤
首先進到專案首頁以後可以看到左邊側邊有很多個頁籤,直接去Table Editor,Supabase中主要資料庫的表格都是在這裡新增或刪除。
supabase表格介面
左邊側邊欄位這邊會顯示這個資料庫中所有的表格,目前因為是剛建立的資料庫所以沒有顯示任何表格,直接點Create a new table按鈕來新增第一個表格。

表格介面導覽
每次新增一個新的表格都會有這個介面要填表格的欄位名稱格式等資料,目前手機版還沒辦法完整瀏覽需要用網頁開啟。
先設定一個情境,我要新增一個表格用來記錄使用者的資料,裡面要有使用者的信箱,並且以信箱當作唯一key,用這個情境來新增一個表格。
supabase中新增表格介面
首先name的欄位對應的是表格的名字,這裡就先用members作為名稱,下面有一個勾勾Enable Row Level Security(RLS)這個就先勾起來,下篇文章再對這個做完整說明。
supabase新增欄位
下方有提供id和created_at這兩個預設的欄位,包含主要欄位和預設值都已經設定好直接沿用,這裡再新增一個email用來記錄使用者信箱,右邊設定值的按鈕點開來把is Unique的選項給勾起來,如此一來就完成基本表格欄位的設定。
沒有設定好也沒關係,這些內容之後都還可以再改,當然如果裡面有資料的時候才改就會有點煩人,點擊右下方save按鈕新增第一個表格吧。

新增第一筆資料

supabase新增一筆資料
新增第一個表格以後就可以原本左邊的列表就多出一個members的表格,右邊目前還沒有資料所以是空的,點擊Insert按鈕裡面的Insert row新增第一筆資料。
supabase新增資料介面
在剛剛新增表格的時候知道只有email這個欄位需要填入,其餘欄位都會自動生成預設值,隨意輸入一個email以後按save新增一筆資料。
supabase後台資料庫介面
完成後就可以看到資料庫裡面已經有一筆資料囉!

總結

以上這個方式就是手動新增一筆資料的過程,當然之後串接前端程式以後就可以使用js去新增資料、刪除、修改資料,不過新增表格以及定義欄位內容的過程還是需要進到後台介面去設定。

有興趣的內容
  • Zeabur:一個讓您的服務部署變得輕而易舉的平台,無論您使用何種程式語言或開發框架,都能快速上手,釋放您的創造力!
  • 六角學院的Vue直播班課程:掌握Vue 3的神秘面紗,透過專業指導和實戰練習,打造屬於您的獨特網站作品,讓您在前端開發的道路上一馬當先!

分享至
成為作者繼續創作的動力吧!
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。 Supabase將為前端開發帶來創新、便利和效率。
從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

技術叢林 的其他內容

發表回應

成為會員 後即可發表留言
© 2024 vocus All rights reserved.