如何為無頭CM構建VUE前端

構建現代化高效博客平台：Vue.js與GraphCMS的完美結合

核心要點:

• 利用Vue.js和GraphCMS構建現代化、高效的博客平台，充分發揮JavaScript的速度和靈活性以及GraphQL強大的查詢功能。
• 選擇GraphCMS是因為它能夠通過GraphQL提供內容，這在效率上優於傳統的REST，因為它允許複雜的查詢在一個請求中從多個模型中提取數據。
• 使用Vue CLI設置你的Vue.js項目，包含Babel和Router等基本功能，並使用Bootstrap-Vue和Axios增強UI組件以進行API交互。
• 在Vue.js中實現動態路由以處理各種內容類別和單個文章視圖，確保無縫的用戶導航體驗。
• 通過構建根據類別或單個slug檢索文章的GraphQL查詢，並將這些查詢集成到Vue.js組件中，從GraphCMS獲取和顯示文章。
• 使用GraphQL變異來創建新評論並即時更新UI而無需頁面重新加載，從而擴展博客的交互功能，例如評論系統。

本指南將指導你如何使用Vue.js和GraphCMS（一個無頭CMS平台）構建現代化的博客網站。

如果你想今天就快速啟動一個博客，我建議你直接使用WordPress。

但是，如果你是一個媒體巨頭，並且希望以最快的速度將你的內容傳遞到多個設備呢？你可能還需要將你的內容與廣告和其他第三方服務集成。你可以用WordPress做到這一點，但是你會遇到這個平台的一些問題。

1. 你需要安裝插件來實現附加功能。你安裝的插件越多，你的網站速度就越慢。
2. 與大多數JavaScript Web框架相比，PHP相當慢。從開發人員的角度來看，在基於JavaScript的前端實現自定義功能要容易得多、也快得多。

在瀏覽器加載測試中，JavaScript的性能優於PHP。此外，現代JavaScript及其生態系統在快速構建新的Web體驗方面提供了更愉悅的開發體驗。

想從頭開始學習Vue.js嗎？這篇文章摘自我們的高級庫。立即加入SitePoint Premium，即可獲得涵蓋基礎知識、項目、技巧和工具等的Vue書籍全集，每月只需9美元。

因此，無頭CMS解決方案（這只是用於管理內容的後端）的數量有所增長。通過這種方法，開發人員可以使用他們選擇的JavaScript框架專注於構建快速且交互式的前端。自定義基於JavaScript的前端比更改WordPress網站要容易得多。

GraphCMS與大多數無頭CMS平台的不同之處在於，它不是通過REST提供內容，而是通過GraphQL提供內容。這項新技術優於REST，因為它允許我們構建查詢，這些查詢在一個請求中涉及屬於多個模型的數據。

考慮以下模型模式：

文章

• id：數字
• 標題：字符串
• 內容：字符串
• 評論：評論數組

評論

• id：數字
• 姓名：字符串
• 消息：字符串

上述模型具有一對多（文章對評論）的關係。讓我們看看如何獲取附加了所有鏈接評論記錄的單個文章記錄。

如果數據位於關係數據庫中，則必須構造一個低效的SQL語句，或者構造兩個SQL語句才能乾淨地獲取數據。如果數據存儲在NoSQL數據庫中，則可以使用像Vuex ORM這樣的現代ORM來輕鬆為你獲取數據，如下所示：

const post = Post.query()
  .with('comments')
  .find(1);

非常簡單！你可以輕鬆地通過REST將此數據傳遞給目標客戶端。但問題是：每當客戶端的數據需求發生變化時，你都將被迫返回你的後端代碼來更新你現有的API端點，或者創建一個提供所需數據集的新端點。這種來回的過程既費力又重複。

如果在客戶端級別，你可以隻請求你需要的數據，而無需你做額外的工作，後端就會為你提供數據？嗯，這就是GraphQL的用途。

先決條件

在我們開始之前，我想指出，本指南適用於中級到高級用戶。我不會講解基礎知識，而是向你展示如何使用GraphCMS作為後端快速構建Vue.js博客。你需要精通以下領域：

• ES6和ES7 JavaScript
• Vue.js（使用CLI版本3）
• GraphQL

這就是你開始本教程所需了解的一切。此外，使用REST的背景知識將非常有用，因為我將經常引用它。如果你想複習一下，這篇文章可能會有幫助：“REST 2.0來了，它的名字叫GraphQL”。

關於項目

我們將構建一個非常簡單的博客應用程序，並帶有一個基本的評論系統。以下是可以訪問以查看已完成項目的鏈接：

• CodeSandbox.io演示
• GitHub倉庫

請注意，演示中使用了只讀令牌，因此評論系統將無法工作。你需要根據本教程中的說明提供你的OPEN權限令牌和端點才能使其工作。

創建GraphCMS項目數據庫

前往GraphCMS網站，然後單擊“免費開始構建”按鈕。你將被帶到他們的註冊頁面。

使用你首選的方法註冊。完成帳戶身份驗證和驗證過程後，你應該能夠訪問主儀表板。

在上面的示例中，我已經創建了一個名為“BlogDB”的項目。繼續創建一個新項目，並隨意命名。輸入名稱後，可以將其餘字段保留為默認值。單擊創建，你將進入他們的項目計劃。

在本教程中，選擇免費的開發者計劃，然後單擊繼續。你將進入項目的儀表板，如下所示：

轉到模式選項卡。我們將創建以下模型，每個模型都有以下字段：

類別

• 名稱：單行文本，必填，唯一

文章

• slug：單行文本，必填，唯一
• 標題：單行文本，必填，唯一
• 內容：多行文本

評論

• 姓名：單行文本，必填
• 消息：多行文本，必填

使用創建模型按鈕創建模型。在右側，你應該找到一個用於字段的隱藏面板，可以通過單擊字段按鈕激活它。將適當的字段類型拖放到模型的面板上。你將看到一個表單，用於填寫字段的屬性。請注意，底部有一個粉紅色的按鈕，標記為高級。單擊它將展開面板，為你提供更多可以啟用的字段屬性。

接下來，你需要按如下方式添加模型之間的關係：

• 文章 > 類別（多對多）
• 文章 > 評論（一對多）

使用引用字段定義此關係。你可以在任何一方添加此字段；GraphCMS將自動在引用的模型中創建相反的關係字段。完成模型定義後，你應該擁有如下內容：

你現在已經完成了第一部分。現在讓我們為我們的模型提供一些數據。

GraphQL數據遷移

要向模型添加內容，你可以簡單地單擊項目儀表板中的內容選項卡，你可以在其中為每個模型創建新記錄。但是，如果你發現這是一種緩慢的方法，你會很高興知道我已經創建了一個GraphCMS遷移工具，它可以從CSV文件複製數據並將其上傳到你的GraphCMS數據庫。你可以在這個GitHub存儲庫中找到該項目。要開始使用該項目，只需將其下載到你的工作區，如下所示：

const post = Post.query()
  .with('comments')
  .find(1);

接下來，你需要從儀表板的設置頁面獲取你的GraphCMS項目的API端點和令牌。你需要創建一個新的令牌。對於權限級別，使用OPEN，因為這將允許該工具對你的GraphCMS數據庫執行讀取和寫入操作。創建一個名為.env的文件並將其放在項目的根目錄下：

git clone git@github.com:sitepoint-editors/graphcsms-data-migration.git
cd graphcsms-data-migration
npm install

接下來，你可能需要使用你自己的數據填充data文件夾中的CSV文件。以下是一些已使用的示例數據：

<code>ENDPOINT=<你的API端点>
TOKEN=<你的OPEN权限令牌></code>

你可以根據需要更改內容。確保不要觸摸頂行，否則你會更改字段名稱。請注意，對於categories列，我已經使用管道|字符作為分隔符。

要將CSV數據上傳到你的GraphCMS數據庫，請按以下順序執行以下命令：

<code>// Categories.csv
name
Featured
Food
Fashion
Beauty

// Posts.csv
title,slug,content,categories
Food Post 1,food-post-1,Breeze through Thanksgiving by making this Instant Pot orange cranberry sauce,Food|Featured
Food Post 2,food-post-2,This is my second food post,Food
Food Post 3,food-post-3,This is my last and final food post,Food
Fashion Post 1,fashion-post-1,This is truly my very first fashion post,Fashion|Featured
Fashion Post 2,fashion-post-2,This is my second fashion post,Fashion
Fashion Post 3,fashion-post-3,This is my last and final fashion post,Fashion
Beauty Post 1,Beauty-post-1,This is truly my very first Beauty post,Beauty|Featured
Beauty Post 2,Beauty-post-2,This is my second beauty post,Beauty</code>

每個腳本都將打印出已成功上傳的記錄。我們首先上傳類別的原因是為了讓文章記錄能夠成功鏈接到現有的類別記錄。

如果你想清理你的數據庫，你可以運行以下命令：

npm run categories
npm run posts

此腳本將刪除所有模型的內容。你將收到一份報告，指示每個模型刪除了多少條記錄。

我希望你發現這個工具很方便。返回儀表板以確認文章和類別的數

據已成功上傳。

後端已處理完畢，讓我們開始構建我們的前端博客界面。

使用Vue.js構建博客的前端

如前所述，我們將構建一個由GraphCMS數據庫後端支持的非常簡單的博客應用程序。啟動終端並導航到你的工作區。

如果你還沒有安裝Vue CLI，現在就安裝：

npm run reset

然後創建一個新項目：

npm install -g @vue/cli

選擇手動選擇功能，然後選擇以下選項：

• 功能：Babel，Router
• 路由歷史模式：Y
• 僅使用錯誤預防的ESLint
• 保存時進行棉絨檢查
• 配置文件位置：專用配置文件
• 保存預設：你的選擇

項目創建過程完成後，更改到項目目錄並安裝以下依賴項：

vue create vue-graphcms

要在我們的項目中設置Bootstrap-Vue，只需打開src/main.js並添加以下代碼：

npm install bootstrap-vue axios

接下來，我們需要開始構建項目結構。在src/components文件夾中，刪除現有文件並創建這些新文件：

• CommentForm.vue
• CommentList.vue
• Post.vue
• PostList.vue

在src/views文件夾中，刪除About.vue並創建一個名為PostView.vue的新文件。從演示中可以看出，我們將有幾個類別頁面，每個頁面都顯示按類別過濾的文章列表。從技術上講，只有一個頁面將根據活動路由名稱顯示不同的文章列表。 PostList組件將根據當前路由過濾文章。

讓我們首先設置路由。打開src/router.js並將現有代碼替換為此代碼：

const post = Post.query()
  .with('comments')
  .find(1);

現在我們有了路由，讓我們設置導航菜單。打開src/App.vue並將現有代碼替換為此代碼：

git clone git@github.com:sitepoint-editors/graphcsms-data-migration.git
cd graphcsms-data-migration
npm install

這將在我們網站的頂部添加一個導航欄，其中包含指向我們不同類別的鏈接。

保存文件並相應地更新以下文件：

src/views/Home.vue

<code>ENDPOINT=<你的API端点>
TOKEN=<你的OPEN权限令牌></code>

src/components/PostList.vue

<code>// Categories.csv
name
Featured
Food
Fashion
Beauty

// Posts.csv
title,slug,content,categories
Food Post 1,food-post-1,Breeze through Thanksgiving by making this Instant Pot orange cranberry sauce,Food|Featured
Food Post 2,food-post-2,This is my second food post,Food
Food Post 3,food-post-3,This is my last and final food post,Food
Fashion Post 1,fashion-post-1,This is truly my very first fashion post,Fashion|Featured
Fashion Post 2,fashion-post-2,This is my second fashion post,Fashion
Fashion Post 3,fashion-post-3,This is my last and final fashion post,Fashion
Beauty Post 1,Beauty-post-1,This is truly my very first Beauty post,Beauty|Featured
Beauty Post 2,Beauty-post-2,This is my second beauty post,Beauty</code>

請注意，在PostList組件中，我們使用自定義觀察器來根據當前URL更新我們的category數據屬性。

現在我們可以進行快速測試以確認路由是否正常工作。使用命令npm run serve啟動Vue.js服務器。在localhost:8080處打開瀏覽器並測試每個導航鏈接。 category屬性應該輸出我們在route name屬性中定義的相同值。

從GraphCMS提取數據

現在我們的路由代碼已經可以工作了，讓我們看看如何從我們的GraphCMS後端提取信息。在項目的根目錄下，創建一個env.local文件並使用以下字段的值填充它：

npm run categories
npm run posts

請注意，Vue.js單頁應用程序僅加載以VUE_APP開頭的自定義環境變量。你可以從你的GraphCMS儀表板設置頁面找到API端點和令牌。對於令牌，請確保創建一個具有OPEN權限的令牌，因為它將允許讀取和寫入操作。接下來，創建文件src/graphcms.js並複制以下代碼：

npm run reset

我們剛剛創建的這個輔助文件提供了兩個主要功能：

• 它創建了一個axios實例，該實例配置為對你的GraphCMS後端執行授權請求。
• 它包含本項目中使用的GraphQL查詢和變異。它們負責獲取文章（按類別或按slug），以及創建新評論。如果你想了解更多關於GraphQL查詢和變異的信息，請查閱GraphQL文檔。

你也可以使用項目儀表板中的API資源管理器來測試這些查詢和變異。為此，請從上面的代碼中復制查詢或變異，並將其粘貼到API資源管理器的頂部窗口中。在下面的窗口中輸入任何查詢變量，然後點擊播放按鈕。你應該在右側的新窗格中看到結果。

這是一個查詢示例：

這是一個變異示例：

在模板中顯示數據

現在，讓我們在src/components/PostList.vue中創建HTML模板，它將以簡潔的方式顯示文章列表。我們還將添加axios代碼，該代碼將從我們的GraphCMS數據庫中提取文章數據：

const post = Post.query()
  .with('comments')
  .find(1);

讓我們快速瀏覽一下代碼的主要功能：

• 加載。發出請求時，將顯示加載微調器以向用戶指示正在進行某些操作。請求完成後，加載微調器將被文章列表替換。
• 查詢。為了按類別獲取文章列表，我發現查詢類別然後使用類別到文章的關係來訪問過濾後的文章更容易。
• 創建。首次加載頁面時，將從created生命週期鉤子內調用fetchPosts()函數。
• 觀察。當路由URL更改時，每次都會調用fetchPosts()函數。

進行這些更改後，你應該現在看到以下視圖：

顯示單個文章

確保頂部主導航按預期工作。現在讓我們處理Post組件。它將有自己的fetchPost()函數，它將按slug進行查詢。如果你想知道slug參數來自哪裡，讓我提醒你我們在router.js中添加的這段代碼：

git clone git@github.com:sitepoint-editors/graphcsms-data-migration.git
cd graphcsms-data-migration
npm install

這表示URL中/post/後面的任何內容都可以在組件中作為this.$route.params.slug使用。

post組件是CommentForm和CommentList組件的父組件。評論數據將作為props從文章記錄傳遞到CommentList組件。現在讓我們插入src/components/CommentList.vue的代碼：

<code>ENDPOINT=<你的API端点>
TOKEN=<你的OPEN权限令牌></code>

除非你已通過GraphCMS儀表板手動輸入評論，否則現在不要期望看到任何結果。讓我們向src/components/CommentForm.vue添加代碼，該代碼將使用戶能夠向博客文章添加評論：

<code>// Categories.csv
name
Featured
Food
Fashion
Beauty

// Posts.csv
title,slug,content,categories
Food Post 1,food-post-1,Breeze through Thanksgiving by making this Instant Pot orange cranberry sauce,Food|Featured
Food Post 2,food-post-2,This is my second food post,Food
Food Post 3,food-post-3,This is my last and final food post,Food
Fashion Post 1,fashion-post-1,This is truly my very first fashion post,Fashion|Featured
Fashion Post 2,fashion-post-2,This is my second fashion post,Fashion
Fashion Post 3,fashion-post-3,This is my last and final fashion post,Fashion
Beauty Post 1,Beauty-post-1,This is truly my very first Beauty post,Beauty|Featured
Beauty Post 2,Beauty-post-2,This is my second beauty post,Beauty</code>

現在我們有一個基本的評論表單，能夠將新評論提交到我們的GraphQL後端系統。保存新評論後，我們將獲取返回的對象並將其添加到post.comments數組中。這應該觸發CommentList組件顯示新添加的評論。

現在讓我們構建src/components/Post.vue組件：

npm run categories
npm run posts

最後，這是src/views/PostView.vue的代碼，用於將所有內容整合在一起：

npm run reset

你應該現在看到文章的視圖了。注意URL結尾處的:slug：localhost:8080/post/fashion-post-1：

在上面的示例中，我已經添加了一些評論來測試新功能。確保你也這樣做。

總結

我希望你已經看到使用Vue.js和GraphQL構建博客網站是多麼容易。如果你一直在使用普通的PHP和MySQL，你將編寫更多代碼。即使使用PHP框架，你仍然需要為簡單的博客應用程序編寫更多代碼。

為了本教程的目的，我必須盡可能地保持簡單。你可能會注意到，這個博客項目甚至還遠遠達不到最簡單的博客設置。我們還沒有解決很多問題，例如錯誤處理、表單驗證和緩存。對於最後一部分，我推薦Apollo Client，因為它具有緩存GraphQL查詢結果的機制。然後，當然需要一個作者模型和一個支持身份驗證和消息批准的適當的評論系統。

如果你願意，請繼續改進這個簡單的Vue.js GraphCMS博客。

關於無頭CMS和Vue.js的常見問題解答 (FAQ)

使用無頭CMS和Vue.js的優勢是什麼？

使用無頭CMS和Vue.js具有多種優勢。首先，它提供了一個更靈活、更高效的內容管理系統。它將後端和前端分開，允許開發人員獨立處理兩端。這種分離還意味著CMS可以向任何平台提供內容，而不僅僅是網站。其次，Vue.js是一個漸進式JavaScript框架，易於理解並與現有項目集成。它提供了一個簡單靈活的API，使其成為無頭CMS的完美匹配。

如何將無頭CMS與Vue.js集成？

將無頭CMS與Vue.js集成涉及幾個步驟。首先，你需要選擇一個支持基於API的通信的無頭CMS。接下來，你需要設置你的Vue.js項目並安裝必要的依賴項。然後，你可以使用CMS的API來獲取內容並在你的Vue.js應用程序中顯示它。一些CMS還提供SDK或插件，使這種集成更容易。

我可以將任何無頭CMS與Vue.js一起使用嗎？

是的，只要無頭CMS支持基於API的通信，你就可以將任何無頭CMS與Vue.js一起使用。這是因為Vue.js是一個前端框架，它通過API與後端（在本例中為CMS）進行通信。一些你可以與Vue.js一起使用的流行無頭CMS包括Strapi、Sanity和ButterCMS。

使用無頭CMS和Vue.js的項目示例有哪些？

有很多項目使用無頭CMS和Vue.js。這些項目範圍從博客和電子商務網站到成熟的Web應用程序。一些示例包括使用VuePress（一個基於Vue的靜態網站生成器）的Vue.js文檔站點，以及使用Storyblok（一個無頭CMS）和Nuxt.js（一個Vue.js框架）的Storyblok網站。

無頭CMS如何提高Vue.js應用程序的性能？

無頭CMS可以顯著提高Vue.js應用程序的性能。通過將後端和前端分開，它允許更有效的內容交付。 CMS可以僅交付必要的內容，從而減少需要傳輸和處理的數據量。這可以導致更快的頁面加載時間和更流暢的用戶體驗。

在Vue.js項目中從傳統CMS遷移到無頭CMS是否困難？

在Vue.js項目中從傳統CMS遷移到無頭CMS的難度取決於項目的複雜性和所使用的CMS。但是，大多數無頭CMS都提供工具和文檔來幫助遷移過程。此外，由於Vue.js是一個靈活且模塊化的框架，它通常可以在無需對現有代碼進行重大更改的情況下適應這種遷移。

使用Vue.js的無頭CMS能否支持多種語言？

是的，使用Vue.js的無頭CMS可以支持多種語言。許多無頭CMS都提供內置的多語言支持，允許你管理不同語言的內容。在Vue.js方面，你可以使用vue-i18n等庫來處理國際化。

使用Vue.js的無頭CMS的安全性能如何？

使用Vue.js的無頭CMS可以非常安全。後端和前端的分離增加了額外的安全層，因為它減少了攻擊面。此外，大多數無頭CMS都提供強大的安全功能，例如SSL加密、用戶身份驗證和訪問控制。 Vue.js還具有針對常見Web漏洞的內置保護措施。

我可以將無頭CMS與Vue.js一起用於移動應用程序開發嗎？

是的，你可以將無頭CMS與Vue.js一起用於移動應用程序開發。因為無頭CMS通過API提供內容，所以它可以向任何平台提供內容，包括移動應用程序。 Vue.js可以使用NativeScript或Weex等框架進行移動應用程序開發。

使用無頭CMS和Vue.js的未來發展如何？

使用無頭CMS和Vue.js的未來發展前景廣闊。這兩種技術的普及率都在增長，並且它們正在越來越多的項目中使用。這種組合的靈活性和效率以及性能優勢使其成為現代Web開發的強大選擇。隨著越來越多的開發人員熟悉這些技術，我們可以期待看到更多創新用途和集成。

以上是如何為無頭CM構建VUE前端的詳細內容。更多資訊請關注PHP中文網其他相關文章！