使用者可以使用以下帳號分別登入系統前台、後台。
| role | account | password |
|---|---|---|
| user | RyanHuang | 12345678 |
| admin | root | 12345678 |
- 使用 Vue 2 前端框架打造 SPA 專案
- 將當前使用者、熱門追蹤清單、登入狀態等資訊放入 vuex 進行狀態管理
- 使用 Vue Components props/emit 實踐組件資料傳遞
- 使用 Vue Router 統一管理應用所有狀態
- 利用 Vue UI Library Vuetify 開發網頁元件
- 使用 Sass 工具提高 css 維護性和重用性
- 使用 axios 串接後端 API
- 前端登入、註冊功能使用 vuelidate 套件進行資料驗證
- 利用 sweetalert2 套件實作彈出訊息
- 使用 moment.js 整合時間格式
- RWD 切版以 Vuetify breakpoint、scss、flex、position 進行實作
使用者可以註冊一個帳號後，登入前台頁面
使用者可以登入後會跳轉至首頁，使用者可以在首頁瀏覽最新推文、發布推文、對推文點讚或收回讚、回覆推文，點擊推文即可進入單一推文詳細頁面
使用者可以瀏覽推文詳細資訊及所有回覆的推文，同時亦可對推文點讚或收回讚、回覆推文
使用者可以回覆推文
使用者可以瀏覽使用者檔案，包含使用者追隨狀態、該使用者所有發布的推文、回覆的推文、喜歡的推文
使用者點擊編輯個人檔案按鈕即可編輯個人大頭貼、封面、姓名、自我介紹
使用者可以查看追隨中/追隨者清單，並點擊追隨按鈕追隨或取消追隨其他使用者
使用者點擊編輯個人檔案按鈕即可編輯個人大頭貼、封面、名稱、自我介紹
使用者可以設定帳號、名稱、信箱、密碼
點擊羽毛筆的按鈕，使用者可以發布 140 字以內的推文
只有管理員有權限登入後台
管理員可以查看所有推文，可以搜尋推文，可以依據 id 、時間、讚數...等排序推文，可以點擊垃圾桶刪除該推文
管理員可以查看所有平台使用者，包含其推文數、獲得讚數、追隨中/追隨者數
- 請在終端機輸入
$ git clone https://github.com/wintersprouter/Simple-Twitter-Vue.git
$ cd Simple-Twitter-Vue
$ npm install
- 新增 vue.config.js
$ touch vue.config.js
- 在 vue.config.js 中，新增以下內容
module.exports = {
transpileDependencies: [
'vuetify'
]
}
npm run serve
- 將可在終端機上看到以下訊息
> App running at:
- Local: http://localhost:8080/
- Network: http://<Your Virtual IP>:8080/