# Simple Twitter
## 1. 註冊頁 /regist （RegistForm）

<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：無
</td>
<td rowspan="2">
<strong>Views</strong>： <br>RegistForm
<br><strong>Components</strong>：無
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>：
<br>帳號、名稱、Email、密碼、確認密碼
</td>
</tr>
</table>

## 2. 個人資料設定 - /setting （AccountSetting）

<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：
<br>id、帳號、名稱、Email、密碼、確認密碼
</td>
<td rowspan="2">
<strong>Views</strong>： <br>AccountSetting
<br><strong>Components</strong>： <br>Header
<br>SideNavbar
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>：
<br>帳號、名稱、Email、密碼、確認密碼
</td>
</tr>
</table>

## 3.前台登入頁 - /login （UserLogin）

<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：無
</td>
<td rowspan="2">
<strong>Views</strong>： <br>UserLogin
<br><strong>Components</strong>： <br>LoginForm<br>
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>：
<br>帳號、密碼
</td>
</tr>
</table>

## 4. 首頁 tweets 總表- /main （MainPage）

<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：
<br><li>使用者資料:
<br>頭貼（若沒有資料的話也不能破圖）
<br><li>Tweets資料:
<br>貼文User的id、名稱、帳號、頭貼、貼文內容、貼文上傳時間、
留言數量、按讚數
<br><li>跟隨誰的資料：
<br>TopUsers的id、帳號、名稱、頭貼、使用者是否有followed
</td>
<td rowspan="2">
<strong>Views</strong>：
<br>MainPage
<br><strong>Components</strong>：
<br>Header
<br>SideNavbar
<br>TopUserList
<br>UserPost
<br>TweetsList
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>：
<li>使用者推文內容
<li>跟隨誰是否有新增跟隨者
<li>每篇貼文是否有按讚
</td>
</tr>
</table>

## 5. 單一 tweet 詳情頁 - /reply_list （TweetDetail）

<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：
<br><li>貼文使用者資料:
<br>上傳的User id、名稱、帳號、頭貼、貼文內容、貼文上傳時間、
留言數量、按讚數
<br><li>Tweet貼文留言資料：
<br>留言者的id、名稱、帳號、頭貼、留言內容、留言時間
<br><li>跟隨誰的資料：TopUsers的id、帳號、名稱、頭貼、
使用者是否有followed</td>
<td rowspan="2">
<strong>Views</strong>：
<br>TweetDetail
<br><strong>Components</strong>：
<br>Header
<br>SideNavbar
<br>TopUserList
<br>TweetPostContent
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>：
<br><li>使用者推文內容
<li>跟隨誰是否有新增跟隨者
<li>每篇貼文是否有按讚
</td>
</tr>
</table>

## 6. 新增 tweet - /tweet （CreateTweetModal）

<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：
<br><li>User資料:
<br>User id、頭貼
</td>
<td rowspan="2">
<strong>Views</strong>：
<br>CreateTweetModal
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>：
<br><li>User的Id、貼文內容
</td>
</tr>
</table>

## 7. 回覆 - /replied （ReplyTweetModal）

<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：
<br><li>Tweet貼文資料:
<br>上傳User的 id、名稱、帳號、頭貼、貼文內容、貼文上傳時間
<br><li>使用者資料：
<br>使用者的id、頭貼
</td>
<td rowspan="2">
<strong>Views</strong>：
<br>ReplyTweetModal
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>：
<br><li>使用者id、留言內容
</td>
</tr>
</table>

## 8. 自己的 user profile - /user/self （UserSelfProfile）
<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：
<br><li>使用者資料:
<br>id、名稱、帳號、自我介紹、頭貼、封面、追蹤中數量、追隨者數量
<br><li>Tweet貼文資料（該使用者的）：
<br>推文數量、推文內容、推文時間、留言數、按讚數
</td>
<td rowspan="2">
<strong>Views</strong>：
<br>UserSelfProfile
<br><strong>Components</strong>：
<br>Header
<br>SideNavbar
<br>TopUserList
<br>UserProflie
<br>TweetsList
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>：
<li>跟隨誰是否有切換追蹤狀態
</td>
</tr>
</table>

## 9. 自己的 user profile (喜歡的內容) - /user/self/like （UserSelfLiked）

<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：
<br><li>使用者資料:
<br>id、名稱、帳號、頭貼、封面、追蹤中數量、追隨者數量
<br><li>Tweet貼文資料（喜歡的推文）：
<br>推文內容、時間、留言數、按讚數、該篇推文user的id、名稱、帳號、頭貼
</td>
<td rowspan="2">
<strong>Views</strong>：
<br>UserSelfLiked
<br><strong>Components</strong>：
<br>MainHeader
<br>SideNavbar
<br>TopUserList
<br>UserProflie
<br>TweetsList(只有按讚的)
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>：
<li>是否切換按讚狀態
<li>跟隨誰是否有切換追蹤狀態

</td>
</tr>
</table>

## 10. 自己的 user profile - 編輯資料 - /user/self/edit （UserProfileEditModal）

<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：
<br><li>使用者資料:
<br>id、名稱、頭貼、封面、自我介紹
</td>
<td rowspan="2">
<strong>Views</strong>：
<br>UserProfileEditModal
<br><strong>Components</strong>：無
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>：
<br><li>使用者資料:
<br>名稱、頭貼、封面、自我介紹
</td>
</tr>
</table>

## 11. user 的跟隨者清單 - /user/self/follower （UserSelfFollowed）

<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：
<br><li>使用者資料:
<br>id、名稱、追蹤者帳號資料
<br><li>追蹤者帳號資料：
<br>追蹤者的Id、名稱、帳號、頭貼、自我介紹、是否有被該使用者追蹤
</td>
<td rowspan="2">
<strong>Views</strong>：
<br>UserSelfFollowed
<br><strong>Components</strong>：
<br>Header
<br>SideNavbar
<br>TopUserList
<br>UserList
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>:
<br><li>追蹤者帳號資料:
<br>使用者是否有切換追者的追蹤狀態
</td>
</tr>
</table>

## 12. user 的正在跟隨清單 - /user/self/following （UserSelfFollowing）

<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：
<br><li>使用者資料:
<br>id、名稱、正在追隨的帳號資料
<br><li>正在追隨的帳號資料：
<br>正在追隨的Id、名稱、帳號、頭貼、自我介紹、被該使用者追蹤狀態
</td>
<td rowspan="2">
<strong>Views</strong>：
<br>UserSelfFollowing
<br><strong>Components</strong>：
<br>Header
<br>SideNavbar
<br>TopUserList
<br>UserList
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>:
<br><li>正在追隨帳號資料:
<br>使用者是否有切換追蹤狀態
</td>
</tr>
</table>

## 13. 別人的 user profile - /user/other （UserOtherProfile）

<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：
<br><li>other user資料:
<br>id、名稱、帳號、自我介紹、頭貼、封面、追蹤中數量、追隨者數量
<br><li>Tweet貼文資料（other user的）：
<br>推文數量、推文內容、推文時間、留言數、按讚數
</td>
<td rowspan="2">
<strong>Views</strong>：
<br>UserOtherProfile
<br><strong>Components</strong>：
<br>Header
<br>SideNavbar
<br>TopUserList
<br>UserProfile
<br>TweetsList
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>:
<br><li>追蹤及訂閱狀態:
<br>使用者是否有切換追蹤或訂閱狀態
</td>
</tr>
<tr>
<td colspan="3" style="color: red">注意：UserProfile 會要注意私訊及小鈴鐺的功能</td>
</tr>
</table>

## 14. 別人的 user profile (已訂閱/開啟小鈴鐺) - /user/other/noti （UserOtherProfileSubscribe）
<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：
<br><li>other user資料:
<br>id、名稱、帳號、自我介紹、頭貼、封面、追蹤中數量、追隨者數量
<br><li>Tweet貼文資料（other user的）：
<br>推文數量、推文內容、推文時間、留言數、按讚數
</td>
<td rowspan="2">
<strong>Views</strong>：
<br>UserOtherProfileSubscribe
<br><strong>Components</strong>：
<br>Header
<br>SideNavbar
<br>TopUserList
<br>UserProfile
<br>TweetsList
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>:
<br><li>追蹤及訂閱狀態:
<br>使用者是否有切換追蹤或訂閱狀態
</td>
</tr>
<tr>
<td colspan="3" style="color: red">注意：UserProfile 會要注意私訊及小鈴鐺的功能<br>＊架構圖同上</td>
</tr>
</table>

## 15. 後台登入頁 - /admin（AdminLogin）

<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：無
</td>
<td rowspan="2">
<strong>Views</strong>： <br>AdminLogin
<br><strong>Components</strong>： <br>LoginForm<br>
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>：
<br>帳號、密碼
</td>
</tr>
</table>

## 16. 後台推文清單 - /admin_main （AdminTweets）

<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：
<br><li>Tweet貼文資料（全部）：
<br>推文內容、推文時間、推文者的Id、頭貼、名稱、帳號
</td>
<td rowspan="2">
<strong>Views</strong>：
<br>AdminTweets
<br><strong>Components</strong>：
<br>Header
<br>SideNavbar
<br>AdminTweetsList
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>：
<li>貼文是否被刪除
</td>
</tr>
</table>

## 17. 後台使用者列表 - /admin_users （AdminUsers）

<table>
<tr>
<th width="8%"> </th>
<th width="62%">頁面資料</th>
<th width="30%">頁面元件</th>
</tr>
<tr>
<td rowspan="2">內容</td>
<td>
<strong>使用資料</strong>：
<br><li>使用者資料（全部）：
<br>全部使用者的Id、頭貼、名稱、帳號、封面、總推文數、總按讚數、
追蹤中數量、跟隨者數量
</td>
<td rowspan="2">
<strong>Views</strong>：
<br>AdminUsers
<br><strong>Components</strong>：
<br>Header
<br>SideNavbar
<br>UsersCards
</td>
</tr>
<tr>
<td>
<strong>接收資料</strong>：暫無
</td>
</tr>
</table>