---
# System prepended metadata

title: 頁面元件與資料分析
tags: [共用資源]

---

# 頁面元件與資料分析

![](https://i.imgur.com/SIPNaQ9.png)


[大圖](https://i.imgur.com/SIPNaQ9.png)

<br>

* 備註：
  * commentCount 更名為 replyCount
  * commentId 更名為 replyId

<br>

## 路由： /users/signup

![](https://i.imgur.com/OMDYNLp.png)


### 頁面元件

views/SignUp

components/AccountForm

### API 

`POST`  /api/users

<br>

## 路由： /users/signin

![](https://i.imgur.com/dUX0dSJ.png)

### 頁面元件

views/UserSignIn.vue

### API

`POST`  /api/users/signin

<br>

## 路由： /admin/signin

![](https://i.imgur.com/eltPAOg.png)


### 頁面元件

views/AdminSignIn.vue

### API

`POST`  /api/admin/signin

<br>

## 路由： /settings

![](https://i.imgur.com/2ck73Ha.png)

### 頁面元件

views/Settings

components/Sidebar
components/AccountForm

### API

`GET`  /api/current_user

`PUT` /api/users/:id/setting

<br>

## 路由： /home

![](https://i.imgur.com/ciL7x8k.png)


### 頁面元件

views/Home

components/Sidebar
components/HomeTweet
components/PopularUsers

### API

`GET`  /api/current_user
`GET`  /api/tweets
`GET`  /api/users/top_followers

`POST`  /api/followships
`POST`  /api/tweets
`POST`  /api/tweets/:id/like
`POST`  /api/tweets/:id/unlike

`DELETE`  /api/followships/:followingId

<br>

## 路由： /tweets/edit

![](https://i.imgur.com/HkX5waX.png)

### 頁面元件

components/TweetModal

### API

`GET`  /api/current_users

`POST`  /api/tweets

<br>

## 路由： /tweets/:id/reply

![](https://i.imgur.com/J5eTFEK.png)


### 頁面元件

components/ReplyModal

### API

`GET`  /api/tweets/:id

`POST`  /api/tweets/:tweet_id/replies

<br>

## 路由： /tweets/:id

![](https://i.imgur.com/aLK5IEe.png)

### 頁面元件

views/Tweet

components/Sidebar
components/TweetDetail
components/PopularUsers

### API

`GET`  /api/tweets/:id
`GET`  /api/tweets/:tweet_id/replies"
`GET`  /api/users/top_followers

`POST`  /api/followships
`POST`  /api/tweets/:id/like
`POST`  /api/tweets/:id/unlike

`DELETE`  /api/followships/:followingId

<br>

## 路由： /tweets/:id/reply

![](https://i.imgur.com/A4XijzJ.png)

### 頁面元件

components/ReplyModal

### API

`GET`  /api/tweets/:id

`POST`  /api/tweets/:tweet_id/replies


<br>

## 路由： /users/:id

![](https://i.imgur.com/gCmUNmQ.png)


### 頁面元件

views/Profile

components/Sidebar
components/Info
components/NavTab
components/UserAction
components/PopularUsers

### API

`GET`  /api/users/:id
`GET`  /api/users/:id/tweets
`GET`  /api/users/top_followers

`POST`  /api/followships
`POST`  /api/tweets/:id/like
`POST`  /api/tweets/:id/unlike

`DELETE`  /api/followships/:followingId

<br>

## 路由： /users/:id

![](https://i.imgur.com/SOWFRaX.png)


### 頁面元件

views/Profile

components/Sidebar
components/Info
components/NavTab
components/UserAction
components/PopularUsers

### API

`GET`  /api/users/:id
`GET`  /api/users/:id/replied_tweets
`GET`  /api/users/top_followers

`POST`  /api/followships

`DELETE`  /api/followships/:followingId

<br>

## 路由： /user/:id

![](https://i.imgur.com/D7wquBH.png)

### 頁面元件

views/Profile

components/Sidebar
components/Info
components/NavTab
components/UserAction

### API

`GET`  /api/users/:id
`GET`  /api/users/:id/likes
`GET`  /api/users/top_followers

`POST`  /api/followships
`POST`  /api/tweets/:id/like
`POST`  /api/tweets/:id/unlike

`DELETE`  /api/followships/:followingId


<br>

## 路由： /users/:id/edit

![](https://i.imgur.com/eYNc5aZ.png)


### 頁面元件

components/InfoModal

### API

`GET`  /api/users/:id

`PUT` /api/users/:id

<br>

## 路由： /users/:id/follow

![](https://i.imgur.com/HQtouMQ.png)


### 頁面元件

views/Follow

components/Sidebar
components/FollowAction
components/PopularUsers

### API

`GET`  /api/users/:id/follwers
`GET`  /api/users/:id/tweets
`GET`  /api/users/top_followers

`POST`  /api/followships

`DELETE` /api/folowships/:followingId

<br>

## 路由： /users/:id/follow

![](https://i.imgur.com/icrbngF.png)


### 頁面元件

views/Follow

components/Sidebar
components/FollowAction
components/PopularUsers

### API

`GET`  /api/users/:id/follwings
`GET`  /api/users/:id/tweets
`GET`  /api/users/top_followers

`POST`  /api/followships

`DELETE` /api/folowships/:followingId


<br>

## 路由： /users/:id

![](https://i.imgur.com/vWIPo5C.png)

### 頁面元件

views/Profile

components/Sidebar
components/Info
components/NavTab
components/UserAction

### API

`GET`  /api/users/:id
`GET`  /api/users/:id/tweets
`GET`  /api/users/top_followers

`POST`  /api/followships
`POST`  /api/tweets/:id/like
`POST`  /api/tweets/:id/unlike

`DELETE`  /api/followships/:followingId

<br>

## 路由： /users/:id

![](https://i.imgur.com/EENcjQT.png)


### 頁面元件

views/Profile

components/Sidebar
components/Info
components/NavTab
components/UserAction

### API

`GET`  /api/users/:id
`GET`  /api/users/:id/replied_tweets
`GET`  /api/users/:id/likes
`GET`  /api/users/top_followers

`POST`  /api/followships
`POST`  /api/tweets/:id/like
`POST`  /api/tweets/:id/unlike

`DELETE`  /api/followships/:followingId

<br>

## 路由： /admin/tweets

![](https://i.imgur.com/ciYak9g.png)

### 頁面元件

views/AdminTweetList

components/AdminSidebar
components/AdminTweetCard

### API

`GET`  /api/admin/tweets/:id

`DELETE`  /api/tweets


<br>

## 路由： /admin/users

![](https://i.imgur.com/qyH1Yhr.png)


### 頁面元件

views/AdminUserList

components/AdminSidebar
components/AdminUserCard

### API

`GET`  /api/admin/users

\
\
[回到首頁](https://hackmd.io/@2022-Oct-Twitter/Hk9m-Pn-j/%2Feax7gnB7R3KcclDqf27iDA%3Fview)

###### tags: `共用資源`