---
# System prepended metadata

title: 分析設計稿的資料與元件
tags: [twitter_pj]

---

# 分析設計稿的資料與元件

###### tags: `twitter_pj`


## Simple Twit
### /regist
- 會用到的資料
    - user {account, name, password,}
    - Users {account} //確認是否已為User
- 會用到的UI元件
    - Register.vue

### /setting
- 會用到的資料
    - user {account, name, email, password,}
    - Users {account} //確認是否有重複
- 會用到的UI元件
    - Setting.vue
    - @ SideBar.vue

### /login
- 會用到的資料
    - currentUser {email, password,}
    - User {email, password, isAdmin} //確認是否為管理者
- 會用到的UI元件
    - Login.vue
        - InputForm.vue
---
## main
### /main
- 會用到的資料
    - twits[ twit{ id, user{account, name }, creatAt, description, comments[], liked[] }]
    - currentUser {id, image, description}
    - popularUser { user{account, name isfollwed}}
    
- 會用到的UI元件
    - Main.vue
    - @ SideBar.vue
    - @ MainTimeLine.vue
        - TwitCard.vue
    - @ TwitInput.vue
    - @ Popular.vue
    
### /replay_list
- 會用到的資料
    - twit{ id, user{account, name }, creatAt, description, comments[{user{account,name, image},comment, creatAt}], liked[times]
    - currentUser {id, image, description}
    - popularUser { user{account, name isfollwed}}
    
- 會用到的UI元件
    - MainRelpy.vue
        - TwitReplyCard.vue
    - @ SideBar.vue
    - @ Popular.vue

### /main/twit_modal
- 會用到的資料
    - twit{ description,creatAt}
    - currentUser {id, image, description}
    
- 會用到的UI元件
    - MainTwitModal.vue
 
### /reply_list/ replay_modal
- 會用到的資料
    - twit{id, user, image, description}
    - currentUser {id, image, description replay{ description,creatAt}}
    
- 會用到的UI元件
    - MainTwitReplyModal.vue
        - TwitCard.vue
        - TwitReplyForm.vue

---
## User
UserSelf.vue
### /user/self
- 會用到的資料
    - user {twit{ description,creatAt}}
    - currentUser {id, image, description}
    - popularUser { user{account, name isfollwed}}
    
- 會用到的UI元件
    - UserDetail.vue
        - TwitCard.vue
    - @ SideBar.vue
    - @ Popular.vue

### /user/self/
- 會用到的資料
    - user {replay{ description,creatAt}}
    - currentUser {id, image, description}
    - popularUser { user{account, name isfollwed}}
    
- 會用到的UI元件
    - UserReplay.vue
        - TwitReplyCard.vue
    - @ SideBar.vue
    - @ Popular.vue

### /user/self/like
- 會用到的資料
    - twit
    - user {islike}
    - currentUser {id, image, description}
    - popularUser { user{account, name isfollwed}}
    
- 會用到的UI元件
    - UserLike.vue
        - TwitCard.vue
    - @ SideBar.vue
    - @ Popular.vue

### /user/self/edit
- 會用到的資料
    - user { original data}
    - edit data
    
- 會用到的UI元件
    - UserEdit.vue

### /user/self/follower
- 會用到的資料
    - follower{ id, name...}
    - popularUser { user{account, name isfollwed}}
    
- 會用到的UI元件
    - UserFollower.vue
        - TwitCard.vue
    - @ SideBar.vue
    - @ Popular.vue

### /user/self/following
- 會用到的資料
    - following{ id, name...}
    - popularUser { user{account, name isfollwed}}
    
- 會用到的UI元件
    - UserFollowing.vue
        - TwitCard.vue
    - @ SideBar.vue
    - @ Popular.vue

### user/other
UserOther.vue
- 會用到的資料
    - user {twit{ description,creatAt}}
    - currentUser {id, image, description}
    - popularUser { user{account, name isfollwed}}
    
- 會用到的UI元件
    - UserDetail.vue
        - TwitCard.vue
    - @ SideBar.vue
    - @ Popular.vue

### user/other/noti
- 會用到的資料
    - user {twit{ description,creatAt}}
    - currentUser {id, image, description}
    - popularUser { user{account, name isfollwed}}
    - isnoted
    
- 會用到的UI元件
    - UserDetail.vue
        - TwitCard.vue
    - @ SideBar.vue
    - @ Popular.vue


---

## Admin
### admin
- 會用到的資料
    - currentUser {email, password,}
    - User {email, password, isAdmin} //確認是否為管理者
- 會用到的UI元件
    - Admin.vue
        - InputForm.vue
### admin/main
- 會用到的資料
    - twits
- 會用到的UI元件
    - AdminTwits.vue
        - TwitCard.vue
    - AdminSideBar.
    
### admin/usrs
- 會用到的資料
    - users
- 會用到的UI元件
    - AdminUsers.vue
        - TwitUser.vue
    - AdminSideBar.vue
        
