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
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言