iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 9
0
Modern Web

使用Vue.js製作個人blog系列 第 9

【Day 9】資料庫設計

資料表規劃


*提出所需要的資料

資料庫是把所需的資訊儲存的方式。以Blog來說,文章的相關資訊是非常中樣的。從前幾天的需求討論中,可以看到會需要的資料不外乎:

  • 文章資訊:包含標題、內容、標籤、發佈時間
  • 登入資訊:帳號、密碼
  • 首頁資訊:標題、Blog說明、版權聲明

首先是「文章資訊」。文章一定會標題、文章內容,還有文章標籤,也就是Facebook或是IG上面使用「#」,如「#2016」,這樣的格式就是幫文章內容增加屬性。這樣的設計對於找相關資訊,或是搜尋會很容易找出。而發佈時間,就是會顯示於首頁旁邊的「年」、「月」,這地方的超連結,是根據文章編輯的時間進行排序,所以這個時間很重要。
所以可以得到這樣的內容:

序號 欄位
1 標題
2 內容
3 標籤
4 發佈時間

接著是「登入資訊」,也就是作者的登入所需的資訊,包含著帳號、密碼。甚至可以另外成立Table,記錄一些登入的動作,例如登入時間等等。不過這就是後話!
因此可以得到這樣的表格:

序號 欄位
1 帳號
2 密碼

最後是「首頁資訊」,就是首頁中會出現的資訊。目前規劃是首頁上方的標題、簡單說明,以及下方的版權聲明等資訊。東西不多,僅只是一些blog的資訊顯示而已。
而這樣的內容是:

序號 欄位
1 標題
2 Blog說明
3 版權聲明

*安排資料的格式

上面就完成了Blog的簡易資料庫結構。接著就放入MySQL的格式。

文章內容

由於「標題」不會太長,所以限制長度為30。而「標籤」,由於一篇文章可以會有多個標籤,所以不應放在裡面,而是單獨拉出一個table「Tag」

序號 欄位 型別
1 標題 VARCHAR(30)
2 內容 Text
3 發佈時間 DATETIME

標籤(Tag)

序號 欄位 型別
1 名稱 VARCHAR(20)

登入資訊

帳號的長度只給到20,沒有給予太多;密碼的長度給予32,而且是CHAR的格式。主要是因為密碼打算使用MD5的加密方式,因為輸出有一定的長度,因此直接限制其長度。

序號 欄位 型別
1 帳號 VARCHAR(20)
2 密碼 CHAR(32)

首頁資訊

由於這麼部分大都是提供資訊,所以保留的長度會比較高,因此都拉到200,以備不時之需。其中標題為顯示「內容」標題,說明則表示「說明」這筆資料的用途,「內容」則是要顯示於網頁種的內容。

序號 欄位 型別
1 資料標題 VARCHAR(10)
2 資料說明 VARCHAR(20)
3 資料內容 VARCHAR(200)

*最後一步:設計PK和關連

文章內容:Article

序號 欄位 名稱 型別 備註
1 文章編號 ArticleID SMALLINT PK
2 文章標題 Title VARCHAR(30)
3 文章內容 Content Text
4 發佈時間 PublishTime DATETIME

標籤:Tag

序號 欄位 名稱 型別 備註
1 標籤編號 TagID SMALLINT PK
2 標籤名稱 TagName VARCHAR(20)

文章與標籤:ArticleTag

此表示文章與標籤做的連連結。

序號 欄位 名稱 型別 備註
1 標籤編號 TagID SMALLINT PK
2 文章編號 ArticleID SMALLINT PK

登入資訊:UserData

序號 欄位 名稱 型別 備註
1 帳號 UserAccount VARCHAR(20) PK
2 密碼 USerPWD CHAR(32)

首頁資訊:IndexData

序號 欄位 名稱 型別 備註
1 資訊編號 IndexDataID SMALLINT PK
1 資料標題 DataTitle VARCHAR(10)
2 資料說明 DataDes VARCHAR(20)
3 資料內容 DataContext VARCHAR(200)

這樣就設計完資料庫內容。


下一篇,開始做開發囉~


上一篇
【Day 8】畫面設計
下一篇
【Day 10】資料庫設定
系列文
使用Vue.js製作個人blog17

尚未有邦友留言

立即登入留言