iT邦幫忙

鐵人檔案

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

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

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

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

Day 11: Firebase 身分驗證配合 BootstrapVue 製作簡易登入

首先 App.vue 內這裡新增事件 <h1 @click="showLoginClick">IT幫幫忙 - 鐵人賽 30 天...

2020-09-19 ‧ 由 五百億 分享
DAY 12

Day 12: Firebase 雲端資料庫 - 隨便亂亂用 (Cloud Firestore)

其實,原本打算把這個 Model 檔案包裝成建構函式,類似像這樣: import * as firebase from "firebase/app&q...

2020-09-20 ‧ 由 五百億 分享
DAY 13

Day 13: 功能復用小幫手,還不錯的 Mixin 混入

這是最近和團員偷學到的招。 先來看看官網混入的文件,有分上下兩段,上段是基礎 + 選項合併,下段是全局混入,最後一個 "自定义选项合并策略"...

2020-09-21 ‧ 由 五百億 分享
DAY 14

Day 14: 借個別人的套件,給自己文章編輯 Markdown 一下

在前面我們知道上傳資料的方法了,接下來我們要來處理編輯文章的介面。 重新整理一下目前幾個 .vue 檔。App.vue: <template>...

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

Day 15: 串接前後端,動態取得首頁文章

在我們取得動態取得文章之前,先把我們的資料庫資料通通刪掉,等等才能確認我們的資料是否正確。 然後回到我們 Markdown 組件引用處 (ArticleEdi...

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

Day 16: 模仿 hexo 實作 <!-- more --> 功能使文章斷開

有用過 hexo 的朋友應該就知道 hexo 可以使用 &lt;!-- more --&gt; 讓文章在首頁顯示的位置適當的斷開在自己想要的位置,或者有其他的部...

2020-09-24 ‧ 由 五百億 分享
DAY 17

Day 17: 點擊文章列表後,藉由綁定的 id 值取得特定文章

在先前,我們藉由 Firebase 提供的方法,將我們取得的所有文章全部丟到 posts 裡面讓 Vue 來渲染我們的文章列表,接下來我們要來處理使用者點擊進...

2020-09-25 ‧ 由 五百億 分享
DAY 18

Day 18: 製作完整個人訊息編輯頁

把我們的資訊編輯頁稍微完善一些,並加上負責的 methods &lt;template&gt; &lt;div class=&quot;container&...

2020-09-26 ‧ 由 五百億 分享
DAY 19

Day 19: 給 Firebase 相關模組也來個 Mixin

昨天稍微看了一下自己的文章進度,發現有個東西漏掉,DAY 18 的內容提到 FirebaseModel.vue ,F_ 開頭的方法,這是另外做來 Mixin 的...

2020-09-27 ‧ 由 五百億 分享
DAY 20

Day 20: 完善註冊流程 01 - 前台註冊優化

通常讓人註冊的,比如說論壇,註冊完基本訊息後,就是要到個人的後台頁面去完善一些資料,我們雖然不是論壇,但也是可以用這樣的方式來玩玩,我們讓管理員註冊後,進到後台...

2020-09-28 ‧ 由 五百億 分享