註冊頁 - SignUp (path: '/signup')
-
data:
-
components:
-
apis:
// sign up POST('api/signup', payLoad) payLoad: { account, // 使用者帳號 name, // 使用者名稱 email, // 使用者email password, // 使用者密碼 passwordCheck // 使用者密碼確認 }
個人資料設定 - Setting (path: '/setting')
-
data:
currentUser: { account, // 當前使用者帳號 name, // 當前使用者名稱 email // 當前使用者email } -
components:
|
Navbar.vue — Tweeting.vue
|
PageHead.vue
-
apis:
// setting PUT(`api/users/${userId}`, payLoad) payLoad: { account, // 使用者帳號 name, // 使用者名稱 email, // 使用者email password, // 使用者密碼 passwordCheck // 使用者密碼確認 }
前台登入頁 - SignIn (path: '/signin' , '/')
-
data:
-
components:
-
apis:
// sign in POST('api/signin', payLoad) payLoad: { account, // 使用者帳號 password // 使用者密碼 } response.data: { token, // 憑證 user: { id, // 使用者id name, // 使用者名稱 account, // 使用者帳號 email, // 使用者email avatar, // 使用者照片 role // 使用者角色 }
首頁 tweets 總表- Tweets (path: '/tweets')
-
data:
tweets: [ // 主推文串 { id, // 迴圈用key值, 連結用tweet.id description, // 推文內容 likesNumber, // 推文like數 repliesNumber, // 推文回復數 createdAt, // 推文發布時間 isLiked, // 是否按過like User: { id, // 連結用user.id name, // 推主名稱 account, // 推主帳號 avatar // 推主照片 } }, {},{},{}... ], final_tweet_id, // 當前推文串最後一個tweet.id final_recommendation_id, // 當前推薦欄位最後一個user.id currentUser: {..., avatar}, // 當前使用者照片 recommendation: [ // 推薦使用者 { id, // 迴圈用key值 name, // 使用者名稱 avatar, // 使用者照片 account, // 使用者帳號 isFollowed // 是否追蹤中 }, {},{},{}... ] -
components:
|
Navbar.vue — Tweeting.vue
|
Recommendation.vue
|
PageHead.vue
|
NewTweet.vue
|
TweetCard.vue — Replying.vue
-
apis:
// 取得主推文串 GET('api/tweets?final_tweet_id=') // 若為空值就從頭開始撈，否則從final_tweet_id的下一個開始 response.data: { tweets: [ { id, // 迴圈用key值, 連結用tweet.id description, // 推文內容 likesNumber, // 推文like數 repliesNumber, // 推文回復數 createdAt, // 推文發布時間 isLiked, // 是否按過like User: { id, // 連結用user.id name, // 推主名稱 account, // 推主帳號 avatar // 推主照片 } }, {},{},{}... ] } // 取得推薦名單 GET('api/users/recommendation?final_recommendation_id=') // 若為空值就從頭開始撈，否則從final_recommendation_id的下一個開始 response.data: { users: [ { id, // 使用者id name, // 使用者名稱 avatar, // 使用者照片 account, // 使用者帳號 isFollowed // 是否追蹤中 }, {},{},{}... ] } // 新增推文 POST('api/tweets', payLoad) payLoad: { userId, // 當前使用者id description // 推文內容 } // 新增回覆 POST(`api/tweets/${tweetId}/replies`, payLoad) payLoad: { userId, // 當前使用者id comment // 回覆內容 } // 追蹤使用者 POST(`api/followings/${userId}`, null) // 退追使用者 DELETE(`api/followings/${userId}`) // 推文按讚 POST(`api/like/${tweetId}`, null) // 推文收回讚 DELETE(`api/like/${tweetId}`)
單一 tweet 詳情頁 - Tweet (path: '/tweets/:id')
-
data:
tweet: { // 推文 id, // 回報,檢舉用（？ description, // 推文內容 likesNumber, // 推文like數 repliesNumber, // 推文回覆數 createdAt, // 推文發布時間 isLiked, // 是否按過like User: { // 推主資料 id, // 連結用user.id name, // 推主名稱 account, // 推主帳號 avatar, // 推主照片 }, Replies: [ //推文回覆串 { id, // 迴圈用key值 comment, // 回覆內容 createdAt, // 回覆發布時間 User: { // 回覆者資料 id, // 連結用user.id name, // 回覆者名稱 account, // 回覆者帳號 avatar // 回覆者照片 } }, {},{},{}... ], final_reply_id, // 當前留言最後一個reply.id final_recommendation_id, // 當前推薦欄位最後一個user.id recommendation: [ // 推薦使用者 { id, // 迴圈用key值 name, // 使用者名稱 avatar, // 使用者照片 account, // 使用者帳號 isFollowed // 是否追蹤中 }, {},{},{}... ] -
components:
|
Navbar.vue — Tweeting.vue
|
Recommendation.vue
|
PageHead.vue
|
TweetExtend.vue — Replying.vue
|
ReplyCard.vue
-
apis:
// 取得單一推文滋資料 GET(`api/tweets/${tweetId}`) response.data: { tweet: { // 推文 id, // 回報,檢舉用（？ description, // 推文內容 likesNumber, // 推文like數 repliesNumber, // 推文回覆數 createdAt, // 推文發布時間 isLiked, // 是否按過like User: { // 推主資料 id, // 連結用user.id name, // 推主名稱 account, // 推主帳號 avatar, // 推主照片 }, Replies: [ //推文回覆串 { id, // 迴圈用key值 comment, // 回覆內容 createdAt, // 回覆發布時間 User: { // 回覆者資料 id, // 連結用user.id name, // 回覆者名稱 account, // 回覆者帳號 avatar // 回覆者照片 } }, {},{},{}... ] } // 取得推薦名單 GET('api/users/recommendation?final_recommendation_id=') // 若為空值就從頭開始撈，否則從final_recommendation_id的下一個開始 response.data: { users: [ { id, // 使用者id name, // 使用者名稱 avatar, // 使用者照片 account, // 使用者帳號 isFollowed // 是否追蹤中 }, {},{},{}... ] } // 新增推文 POST('api/tweets', payLoad) payLoad: { userId, // 當前使用者id description // 推文內容 } // 新增回覆 POST(`api/tweets/${tweetId}/replies`, payLoad) payLoad: { userId, // 當前使用者id comment // 回覆內容 } // 追蹤使用者 POST(`api/followings/${userId}`, null) // 退追使用者 DELETE(`api/followings/${userId}`) // 推文按讚 POST(`api/like/${tweetId}`, null) // 推文收回讚 DELETE(`api/like/${tweetId}`)
新增 tweet - Tweeting
-
data:
... currentUser: { ..., avatar: '' // 當前使用者照片 } -
components:
|
Tweeting.vue
-
apis:
// 新增推文 POST('api/tweets', payLoad) payLoad: { userId, // 當前使用者id description // 推文內容 }
回覆 - Replying
-
data:
... tweet: { // 回覆中的推文 id, // description, // 推文內容 createdAt, // 推文發佈時間 User: { // 推主資料 id, // 推主連結用user.id name, // 推主名稱 avatar, // 推主照片 account, // 推主帳號 } } currentUser: { ..., avatar // 當前使用者照片 } -
components:
|
Replying.vue
-
apis:
// 新增回覆 POST(`api/tweets/${tweetId}/replies`, payLoad) payLoad: { userId, // 當前使用者id comment // 回覆內容 }
自己的 user profile (推文清單) - UserTweets (path: '/users/:id/tweets' , '/users/:id')
-
data:
user: { // 使用者資料 id, // 使用者id name, // 使用者名稱 account, // 使用者帳號 email, // 使用者email tweetsNumber, // 使用者推文數 avatar, // 使用者照片 cover, // 使用者封面照片 introduction, // 使用者簡介 followingsNumber, // 使用者追蹤數 followersNumber, // 使用者跟隨數 isFollowed, // 是否追蹤中 isNotified, // 是否訂閱 tweets: [ // 使用者推文串 { id, // 迴圈用key值 description, // 推文內容 likesNumber, // 推文like數 repliesNumber, // 推文回覆數 isLiked, // 是否按過like createdAt, // 推文發布時間 User: { // 推主資料（這邊的資料其實是自己） id, // 推主連結用user.id name, // 推主名稱 account, // 推主帳號 avatar, // 推主照片 } }, {},{},{}... ] }, final_tweet_id, // 當前推文串最後一個tweet.id final_recommendation_id, // 當前推薦欄位最後一個user.id recommendation: [ // 推薦使用者 { id, // 迴圈用key值 name, // 使用者名稱 avatar, // 使用者照片 account, // 使用者帳號 isFollowed // 是否追蹤中 }, {},{},{}... ]