---
# System prepended metadata

title: Simple Twitter

---

# Simple Twitter
## 1. 註冊頁 /regist （RegistForm）
![](https://i.imgur.com/nh0rHXt.png)

<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）
![](https://i.imgur.com/YB55g8S.png)

<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）
![](https://i.imgur.com/zJCo44Y.png)

<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）
![](https://i.imgur.com/YWW6Q2F.png)

<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）
![](https://i.imgur.com/ykgwuKQ.png)

<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）
![](https://i.imgur.com/SGs4GZ5.png)

<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）
![](https://i.imgur.com/ECfbvup.png)

<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）
![](https://i.imgur.com/aHjGv5S.png)
<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）
![](https://i.imgur.com/lL7C81M.png)

<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）
![](https://i.imgur.com/FXx76A9.png)

<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）
![](https://i.imgur.com/nTNFb66.png)

<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）
![](https://i.imgur.com/COQpPfa.png)

<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）
![](https://i.imgur.com/cEs2nP8.png)

<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）
![](https://i.imgur.com/aB6wOPF.png)

<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）
![](https://i.imgur.com/Xv9JoP0.png)

<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）
![](https://i.imgur.com/kui8T05.png)

<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>


