iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理 系列

以Vue CLI的方式建立專案後,切版的部分以BootstrapVue框架實作,以 Firebase 的 Cloud Firestore作為網站的資料庫,並以簡單的MVC模式設計程式,希望最後能完成一個部落格應具有的基本功能。

鐵人鍊成 | 共 30 篇文章 | 16 人訂閱 訂閱系列文 RSS系列文 團隊自討苦吃三十天#像極了愛情
DAY 21

Day 21: 完善註冊流程 02 - 後台資訊編輯 + email 認證

修改一下 userInfo template <template> <div class="container"&g...

2020-09-29 ‧ 由 五百億 分享
DAY 22

Day 22: 編輯現有文章,利用 $attrs 傳遞資料

我們先去 backend.vue b-sidebar更新一下我們的連結,多一個編輯文章, 原本的 ArticleEditor.vue 是新增文章,現在我把檔名它...

2020-09-30 ‧ 由 五百億 分享
DAY 23

Day 23: 中場休息,留言功能前置準備

今天稍微中場休息一下,我們來準備個留言區塊的版面就好,首先小小優化一下我們的寫新文章上傳的部分,給他完整一點的資料結構: AddArticle.vue: met...

2020-10-01 ‧ 由 五百億 分享
DAY 24

Day 24: 為文章準備個留言功能吧

文章留言功能的思路是我們讓使用者輸入自己的暱稱和留言內容,按下確定時會依照文章 id 將留言的字串上傳到所屬該文章的新集合中,我們的留言輸入位置在文章頁。 Ar...

2020-10-02 ‧ 由 五百億 分享
DAY 25

Day 25: 資料防護,編寫安全規則

在 Firebase 控制台中編寫資料的讀取和寫入規則,是防止惡意人士的最後一道也是最堅強的防線。如果不編寫資料的使用規則,當初我們在創建 Firebase 應...

2020-10-03 ‧ 由 五百億 分享
DAY 26

Day 26: Firebase Storage + 處理同源政策問題

Storage 文件 https://firebase.google.com/docs/storage/web/start Storage 提供了我們一個儲存資...

2020-10-04 ‧ 由 五百億 分享
DAY 27

Day 27: sidebar 側邊欄顯示個人訊息 + Vuex + 上傳頭貼

這篇程式碼更新較多,建議先複製貼上看看有沒有問題,並且 CTRL+F "重要的" 來看重點程式碼及思路 這次來一點點 Vuex,專案都還沒用...

2020-10-05 ‧ 由 五百億 分享
DAY 28

Day 28: 快來不及了,先用 Hosting 發布網頁吧 ( 需連結 billing account )

昨天的程式碼有誤,在監看者方法內:F_getManagerInfo呼叫的部分傳入引數改為 user.uid,不然他會因為跳轉太快還抓不到網頁的 id 值而傳入不...

2020-10-06 ‧ 由 五百億 分享
DAY 29

Day 29: 依照文章 tags 分類進行相應渲染

今天多新增一些功能,好讓我們的 Recently.vue 有點作用。 首先去到 AddArticle.vue 將我們的 template 多新增可以添加文章 t...

2020-10-07 ‧ 由 五百億 分享
DAY 30

Day 30: 發現 bug 收尾 + 完賽 & 後續計畫

發現全域混入與 b-card 組件產生的問題 昨天上班時剛好抽空測了個東西,沒想到居然有 bug 產生。我們 main.js 裡面做全域混入 firebase...

2020-10-08 ‧ 由 五百億 分享