---
# System prepended metadata

title: Simple Twitter - 分析設計稿的資料與元件

---

Simple Twitter - 分析設計稿的資料與元件
===
1.註冊頁 - /regist
---
![](https://i.imgur.com/9ntsNxf.jpg)
-    Views 
     - Regist
     
-    頁面資料 Data

| Data           | variable      | Type   | Components |
| -------------- | ------------- | ------ | ---------- |
| 使用者帳號     | id            | String | -          |
| 使用者姓名     | name          | String | -          |
| 使用者信箱     | email         | String | -          |
| 使用者密碼     | password      | String | -          |
| 使用者密碼確認 | passwordCheck | String | -          | 





```javascript=
export default {
  data () {
    return {
      id: '',
      name: '',
      email: '',
      password: '',
      passwordCheck: '',
    }
  },
```


---
2.個人資料設定 - /setting
===
![](https://i.imgur.com/ajTwWaH.jpg)

- Views
    - UserSetting
- Components
    - UserSettingForm
    - Navbar


| Data                       | variable      | Type   | Components      |
| -------------------------- | ------------- | ------ | --------------- |
| 使用者帳號,e.g. @wonderman | id            | String | UserSettingForm |
| 使用者姓名,e.g. John Doe   | name          | String | UserSettingForm |
| 使用者信箱                 | email         | String | UserSettingForm |
| 使用者密碼                 | password      | String | UserSettingForm |
| 使用者密碼確認             | passwordCheck | String | UserSettingForm |

```javascript=
export default {
  components: {
    Navbar,
    UserSettingForm
  },
  data () {
    return {
      id: '',
      name: '',
      email: '',
      password: '',
      passwordCheck: '',
    }
  },
```

---
3.前台登入頁 - /login
===

![](https://i.imgur.com/jaiBftJ.jpg)
- Views
    - UserLogin

| Data       | variable | Type   | Components |
| ---------- | -------- | ------ | ---------- |
| 使用者帳號 | id       | String | -          |
| 使用者密碼 | password | String | -          |

```javascript=
export default {
  data () {
    return {
      id: '',
      password: '',
    }
  },
```

---
4.首頁 tweets 總表- /main
===
![](https://i.imgur.com/6fHS40P.png)
-    Views 
     - UserMainPage
-    Components
     - Navbar
     - CreateComment
     - UserTweets
     - RelateUsers

-    頁面資料 Data

| Data       | variable      | Type   | Components      |
| ---------- | ------------- | ------ | --------------- |
| 使用者帳號 | id            | Number | CreateComment   |
| 使用者姓名 | name          | String | CreateComment   |
| 使用者信箱 | email         | String | CreateComment   |
| 使用者照片 | image         | String | CreateComment   |
| 使用者評論 | userComments  | Array  | UserTweets    |
| 追蹤者名單 | userfollowers | Array  | RelateUsers |

```javascript=
export default {
  components: {
    Navbar,
    CreateComment,
    UserTweets,
    RelateUsers
  },
data () {
    return {
      User: {
        id: -1,
        name: '',
        image: '',
      },
      userComments: [],
      RelatedUsers: [],
      isLoading: true
    }
  },
```

---
5.單一 tweet 詳情頁 - /reply_list
===
![](https://i.imgur.com/9OjdGhr.png)
-    Views 
     - ReplyList
-    Components
     - Navbar
     - UserTweet
     - RelateUsers

-    頁面資料 Data

| Data                  | variable      | Type   | Components      |
| --------------------- | ------------- | ------ | --------------- |
| 使用者帳號e.g. @apple | id            | Number | UserTweet     |
| 使用者姓名e.g. Apple  | name          | String | UserTweet     |
| 使用者信箱            | email         | String | UserTweet     |
| 使用者照片            | image         | String | UserTweet     |
| 使用者評論            | userComment   | Object | UserTweet     |
| 追蹤者名單            | userfollowers | Array  | RelateUsers |

```javascript=
export default {
  components: {
    Navbar,
    UserTweet,
    RelateUsers
  },
data () {
    return {
      User: {
        id: -1,
        name: '',
        image: '',
      },
      userComment: [],
      RelatedUsers: [],
      isLoading: true
    }
  },
```

---
6.新增 tweet - /tweet
===
![](https://i.imgur.com/fafOeIV.png)
-    直接使用Modal
-    Views : (None)
     
-    Components : (None)

-    頁面資料 Data

| Data       | variable      | Type   | Components      |
| ---------- | ------------- | ------ | --------------- |
| 使用者帳號 | id            | Number |    |
| 使用者姓名 | name          | String |    |
| 使用者照片 | image         | String |    |
| 發布內容   | text          | String |    |
| 追蹤者名單 | userfollowers | Array  |  |

```javascript=
export default {

data () {
    return {
      User: {
        id: -1,
        name: '',
        image: '',
        text:''
      },
      userComment: [],
      RelatedUsers: [],
      isLoading: true
    }
  },
```
---
7.回覆 - /replied
===
![](https://i.imgur.com/5wZ80z6.png)
-    Views 
     - ReplyTweetModal
-    Components


-    頁面資料 Data

| Data       | variable      | Type   | Components      |
| ---------- | ------------- | ------ | --------------- |
| 使用者帳號 | id            | Number |     |
| 使用者姓名 | name          | String |     |
| 使用者照片 | image         | String |     |
| 回覆內容   | text          | String |     |
| 追蹤者名單 | userfollowers | Array  |  |
```javascript=
export default {

data () {
    return {
      User: {
        id: -1,
        name: '',
        image: '',
        text:''
      },
      userComment: [],
      RelatedUsers: [],
      isLoading: true
    }
  },
```

---
8.自己的 user profile (推文清單) - /user/self
===
![](https://i.imgur.com/Euw9stW.png)
-    Views 
     - User
-    Components
     - Navbar
     - UserProfile
     - UserNavtabs
     - UserTweets
     - RelatedUsers

-    頁面資料 Data

| Data           | variable             | Type   | Components      |
| -------------- | -------------------- | ------ | --------------- |
| 使用者帳號     | id                   | Number | UserProfile     |
| 使用者姓名     | name                 | String | UserProfile     |
| 使用者照片     | image                | String | UserProfile     |
| 使用者自我介紹 | UserSelfIntroduction | String | UserProfile     |
| 追蹤者數量     | followers            | Array  | UserProfile     |
| 追蹤中數量     | following            | Array  | UserProfile     |
| 使用者推文     | userComments         | Array  | UserTweets    |
| 追蹤者名單     | userfollowers        | Array  | RelatedUsers |
```javascript=
export default {
  components: {
    Navbar,
    UserProfile,
    UserTweets,
    RelatedUsers
  },
  data () {
    return {
      user: {
        id: 0,
        image: '',
        name: '',
        followingsLength: 0,
        followersLength: 0,
        commentsLength: 0,
      },
      followings: [],
      followers: [],
      RelatedUsers:[]
    }
  },
```

---
9.自己的 user profile (喜歡的內容) - /user/self/like
===
![](https://i.imgur.com/6IHKvFd.png)
-    Views 
     - User
-    Components
     - Navbar
     - UserProfile
     - *UserLikeTweets
     - RelatedUsers

-    頁面資料 Data

| Data           | variable          | Type   | Components            |
| -------------- | ----------------- | ------ | --------------------- |
| 使用者帳號     | id                | Number | UserProfile           |
| 使用者姓名     | name              | String | UserProfile           |
| 使用者照片     | image             | String | UserProfile           |
| 使用者自我介紹 | selfIntroduction  | String | UserProfile           |
| 追蹤者數量     | followers         | Array  | UserProfile           |
| 追蹤中數量     | following         | Array  | UserProfile           |
| 喜歡的內容     | favoritedComments | Array  | UserLikeTweets | 
| 追蹤者名單     | userfollowers     | Array  | RelatedUsers       |
```javascript=
export default {
  components: {
    Navbar,
    UserProfile,
    UserLikeTweets,
    RelatedUsers
  },
  data () {
    return {
      user: {
        id: 0,
        image: '',
        name: '',
        followingsLength: 0,
        followersLength: 0,
        commentsLength: 0,
      },
      followings: [],
      followers: [],
      UserLikeTweets: [],
      RelatedUsers: [],
    }
  },
```
---
10.自己的 user profile - 編輯資料 - /user/self/edit
===
![](https://i.imgur.com/XgHj328.png)
-    Views : Modal跳出
-    Components : (None)

-    頁面資料 Data

| Data       | variable         | Type   | Components |
| ---------- | ---------------- | ------ | ---------- |
| 使用者帳號 | id               | Number | -          |
| 使用者姓名 | name             | String | -          |
| 使用者照片 | image            | String | -          |
| 封面照片   | pageImage        | String | -          |
| 自我介紹   | selfIntroduction | String | -          | 
```javascript=
export default {
  data () {
    return {
      id: 0,
      image: '',
      pageImage:'',
      name: '',
      selfIntroduction:'',
      RelatedUsers:[]
    }
  },
```

---
11.user 的跟隨者清單 - /user/self/follower
===
![](https://i.imgur.com/KMdNQOC.png)

-    Views 
     - UserSelfFollower
-    Components
     - Navbar
     - UserFollowerList
     - RelatedUsers

-    頁面資料 Data

| Data       | variable      | Type   | Components       |
| ---------- | ------------- | ------ | ---------------- |
| 使用者id   | id            | Number | UserFollowerList |
| 跟隨者清單 | follower      | Array  | UserFollowerList |
| 追蹤者名單 | userfollowers | Array  | RelatedUsers  |

```javascript=
export default {
  components: {
    Navbar,
    UserFollowerList,
    RelatedUsers
  },
  data () {
    return {
      user: {
        id: -1,
      },
      follower: [],
      relatedUsers: [],
    }
  },
```

---
12.user 的正在跟隨清單 - /user/self/following
===
![](https://i.imgur.com/XQF5W0A.png)
-    Views 
     - UserSelfFollowing
-    Components
     - Navbar
     - UserFollowingList
     - RelatedUsers

-    頁面資料 Data

| Data       | variable      | Type   | Components       |
| ---------- | ------------- | ------ | ---------------- |
| 使用者id   | id            | Number | UserFollowingList |
| 跟隨者清單 | following     | Array  | UserFollowingList |
| 追蹤者名單 | userfollowers | Array  | RelatedUsers  |

```javascript=
export default {
  components: {
    Navbar,
    UserFollowingList,
    RelatedUsers
  },
  data () {
    return {
      user: {
        id: 0,
      },
      following: [],
      relatedUsers: [],
    }
  },
```

---
13.別人的 user profile - /user/other
===
![](https://i.imgur.com/hN7aMtJ.png)
-    Views 
     - OtherUser
-    Components
     - Navbar
     - UserProfile
     - UserTweets
     - RelatedUsers

-    頁面資料 Data
    
| Data           | variable         | Type   | Components       |
| -------------- | ---------------- | ------ | ---------------- |
| 使用者帳號     | id               | Number | UserProfile |
| 使用者姓名     | name             | String | UserProfile |
| 使用者照片     | image            | String | UserProfile |
| 使用者自我介紹 | selfIntroduction | String | UserProfile |
| 追蹤者數量     | follower         | Array  | UserProfile |
| 追蹤中數量     | following        | Array  | UserProfile      |
| 使用者推文     | userComments     | Array  | UserTweets     |
| 追蹤者名單     | userfollowers    | Array  | RelatedUsers  |

```javascript=
export default {
  components: {
    Navbar,
    UserProfile,
    UserTweets,
    RelatedUsers
  },
  data () {
    return {
      user: {
        id: 0,
        image: '',
        name: '',
        followingsLength: 0,
        followersLength: 0,
        commentsLength: 0,
      },
      following: [],
      follower: [],
      UserTweets: [],
      favoritedComments: [],
      relatedUsers: [],
    }
  },
```

---
14.別人的 user profile (已訂閱/開啟小鈴鐺) - /user/other/noti
===
![](https://i.imgur.com/SZLy160.jpg)
-    Views 
     - OtherUserTweetsNotify
-    Components
     - Navbar
     - UserProfile
     - UserTweets
     - RelatedUsers

-    頁面資料 Data

| Data             | variable          | Type    | Components        |
| ---------------- | ----------------- | ------- | ----------------- |
| 使用者帳號       | id                | Number  | UserProfile  |
| 使用者姓名       | name              | String  | UserProfile  |
| 使用者照片       | image             | String  | UserProfile  |
| 使用者自我介紹   | selfIntroduction  | String  | UserProfile  |
| 追蹤者數量       | followers         | Array   | UserProfile  |
| 追蹤中數量       | following         | Array   | UserProfile  |
| 使用者推文       | userComments      | Array   | UserTweets      |
| 使用者推文與回覆 | replyComments     | Array   | UserReplyTweets |
| 喜歡的內容       | favoritedComments | Array   | UserFollowsCard   |
| 追蹤者名單       | userfollowers     | Array   | UserFollowsCard   |
| 是否開啟通知     | isNoticed         | boolean | OtherUserProfile  |

```javascript=
export default {
  components: {
     Navbar
     UserProfile
     UserTweets
     RelatedUsers
  },
  data () {
    return {
      user: {
        id: 0,
        image: '',
        name: '',
        followingsLength: 0,
        followersLength: 0,
        commentsLength: 0,
      },
      following: [],
      follower: [],
      userComments: [],
      favoritedComments: [],
      relatedUsers: [],
      isFollowed:true,
    }
  },
```

---
15.後台登入頁 - /admin
===
![](https://i.imgur.com/ndFOQbd.jpg)
-    Views 
     - AdminLogin
-    頁面資料 Data

| Data       | variable | Type    | Components |
| ---------- | -------- | ------- | ---------- |
| 帳號       | id       | String  | -          |
| 密碼       | password | String  | -          |
| 管理員權限 | isAdmin  | boolean | -          |
```javascript=
export default {
  data () {
    return {
      id: '',
      password: '',
      isAdmin: false,
    }
  },
```

---
16.後台推文清單 - /admin_main
===
![](https://i.imgur.com/CrfhHFy.jpg)
-    Views 
     - AdminMain
-    Components
     - AdminTweetsList
     - AdminNavbar
-    頁面資料 Data

| Data     | variable     | Type  | Components |
| -------- | ------------ | ----- | ---------- |
| 推文清單 | UserComments | Array | AdminTweetsList | 
```javascript=
export default {
  components: {
    AdminNavbar,
    AdminTweetsList
  },
  data () {
    return {
      UserComments:[]
    }
  },
```
---
17.後台使用者列表 - /admin_users
===
![](https://i.imgur.com/dqpB1UA.jpg)
-    Views 
     - AdminUsers
-    Components
     - AdminNavbar
     - AdminUserCard
-    頁面資料 Data

| Data               | variable  | Type   | Components |
| ------------------ | --------- | ------ | ---------- |
| 名稱 e.g. John     | name      | String | AdminUserCard   |
| 帳號 e.g. @heyJohn | id        | String | AdminUserCard   |
| 推文數             | comments  | Array  | AdminUserCard   |
| Like數             | favorited | Array  | AdminUserCard   |
| 跟隨中人數         | following | Array  | AdminUserCard   |
| 跟隨者人數         | follower  | Array  | AdminUserCard   |

```javascript=
export default {
  components: {
    AdminNavbar,
    AdminUserCard
  },
  data () {
    return {
      Users:[],
    }
  },
```
