ヘッドレスCMSのためにビューフロントエンドを構築する方法

モダンで効率的なブログプラットフォームを構築する：vue.jsとgraphcmsの完璧な組み合わせ

コアポイント：

• Vue.jsとGraphCMSを使用して、最新の効率的なブログプラットフォームを構築し、JavaScriptのスピードと柔軟性とGraphQLの強力なクエリ関数を完全に提供します。
GraphCMSは、GraphQLを介してコンテンツを提供できるために選択されます。これは、複雑なクエリが1つのリクエストで複数のモデルからデータを抽出できるため、従来の効率よりも優れています。
vue.jsプロジェクトをVue.jsプロジェクトを設定します。これには、BabelやRouterなどの基本的な機能が含まれ、API相互作用のためのBootstrap-VueとAxiosを使用してUIコンポーネントを強化します。
Vue.jsに動的ルーティングを実装して、さまざまなコンテンツカテゴリと個々の投稿ビューを処理し、シームレスなユーザーナビゲーションエクスペリエンスを確保します。
カテゴリまたは個々のスラグに基づいて記事を取得し、これらのクエリをvue.jsコンポーネントに統合するGraphQLクエリを構築することにより、GraphCMSから記事を取得および表示します。
GraphQL変異を使用して新しいコメントを作成し、ページリロードなしでUIを即座に更新し、コメントシステムなどのブログのインタラクティブな機能を拡張します。
このガイドでは、Vue.jsとGraphCMS（ヘッドレスCMSプラットフォーム）を使用して、最新のブログWebサイトを構築する方法をガイドします。

今日ブログをすばやく開始したい場合は、WordPressを直接使用することをお勧めします。

しかし、あなたがメディアの巨人であり、コンテンツをできるだけ早く複数のデバイスに配信したい場合はどうなりますか？また、コンテンツを広告やその他のサードパーティサービスと統合する必要がある場合があります。 WordPressでこれを行うことはできますが、このプラットフォームでいくつかの問題が発生します。

追加機能を実装するには、プラグインをインストールする必要があります。インストールが多いほど、ウェブサイトが遅くなります。

1. PHPは、ほとんどのJavaScript Webフレームワークと比較して非常に遅いです。開発者の観点からは、JavaScriptベースのフロントエンドにカスタム機能を実装する方がはるかに簡単かつ高速です。
ブラウザの読み込みテストでは、JavaScriptはPHPよりも優れています。さらに、Modern JavaScriptとそのエコシステムは、新しいWebエクスペリエンスを迅速に構築する上で、より快適な開発体験を提供します。

ゼロからvue.jsを学びたいですか？この記事は、高度なライブラリから抜粋されています。今すぐSitePoint Premiumに参加して、月額わずか9ドルで基本、プロジェクト、ヒント、ツールをカバーするVue Booksの完全なコレクションを入手してください。

したがって、ヘッドレスCMSソリューションの数（コンテンツの管理に使用されるバックエンドのみです）が増えました。このアプローチにより、開発者は、選択したJavaScriptフレームワークを使用して、高速でインタラクティブなフロントエンドの構築に集中できます。 JavaScriptベースのフロントエンドをカスタマイズすることは、WordPress Webサイトを変更するよりもはるかに簡単です。

GraphCMSとほとんどのヘッドレスCMSプラットフォームの違いは、休憩ではなくGraphQLを使用してコンテンツを提供することです。この新しいテクノロジーは、1つのリクエストで複数のモデルに属するデータを含むクエリを構築できるため、休憩よりも優れています。

次のモデルパターンを検討してください：

記事

• id：number
• タイトル：String
• コンテンツ：文字列
• コメント：コメント配列

コメント

• id：number
• 名前：文字列
• メッセージ：文字列

上記のモデルには1対多の（コメントする記事）があります。すべてのリンクコメントレコードが添付された1つの記事レコードを取得する方法を見てみましょう。

データがリレーショナルデータベースにある場合、非効率的なSQLステートメントを作成するか、2つの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 2.0はここにあり、その名前はGraphQLです」。

プロジェクトについて

基本的なコメントシステムを備えた非常にシンプルなブログアプリケーションを構築します。ここに、完了したプロジェクトを表示するためにアクセスできるリンクは次のとおりです。

codesandbox.io demo

• githubリポジトリ
読み取り専用トークンがデモで使用されているため、コメントシステムは機能しないことに注意してください。このチュートリアルで説明されているように、オープンな許可トークンとエンドポイントを提供する必要があります。

GraphCMSプロジェクトデータベースを作成します

GraphCMS Webサイトに移動し、[無料のBuildの開始]ボタンをクリックします。登録ページに移動します。

希望する方法を使用して登録します。アカウント認証と検証プロセスを完了したら、メインダッシュボードにアクセスできるはずです。

上記の例では、「blogdb」というプロジェクトを作成しました。新しいプロジェクトを作成し続け、好きなように名前を付けてください。名前を入力した後、残りのフィールドをデフォルト値として残すことができます。

をクリックしてを作成すると、プロジェクト計画に入ります。

このチュートリアルでは、無料の開発者プランを選択し、

をクリックして

をクリックします。以下に示すように、プロジェクトのダッシュボードを入力します。

モード

タブに移動します。次のモデルを作成します。それぞれに次のフィールドがあります。

カテゴリ

名前：シングルラインテキスト、必須、一意

記事

スラッグ：シングルラインテキスト、必須、一意

タイトル：シングルラインテキスト、必須、一意

• コンテンツ：マルチラインテキスト
コメント

名前：シングルラインのテキスト、必須

メッセージ：複数のテキスト行、必須

モデルを作成してモデルを作成します
• ボタンを作成します。右側には、ボタンをクリックしてアクティブにできるフィールドの隠しパネルを見つける必要があります。適切なフィールドタイプをモデルのパネルにドラッグアンドドロップします。フィールドのプロパティを埋めるフォームが表示されます。下部にピンクのボタンがある

Advanced

があることに注意してください。クリックするとパネルが展開されると、有効にできるフィールドプロパティが増えます。 次に、モデル間の関係を次のように追加する必要があります。

記事＆gt;

記事＆gt;

この関係を定義してください

リファレンス

フィールドを使用します。このフィールドをどちらの側にも追加できます。モデル定義を完了したら、次のコンテンツを使用する必要があります。

• 最初の部分を完了しました。次に、モデルにいくつかのデータを提供しましょう。

GraphQLデータ移行

モデルにコンテンツを追加するには、各モデルの新しいレコードを作成できるプロジェクトダッシュボードのコンテンツ

タブをクリックするだけです。ただし、これが遅いアプローチであることがわかった場合、CSVファイルからデータをコピーしてGraphCMSデータベースにアップロードできるGraphCMS移行ツールを作成したことを喜んで知ることができます。このGitHubリポジトリでプロジェクトを見つけることができます。プロジェクトを始めるには、次のようにワークスペースにダウンロードするだけです。

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

次に、ダッシュボードの設定ページからGraphCMSプロジェクトのAPIエンドポイントとトークンを取得する必要があります。新しいトークンを作成する必要があります。許可レベルの場合は、GraphCMSデータベースで読み取り操作を実行できるため、開くことができます。 .envという名前のファイルを作成し、プロジェクトのルートディレクトリに配置します。

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

次に、データフォルダーのCSVファイルに独自のデータを入力する必要がある場合があります。使用されたサンプルデータは次のとおりです。

必要に応じてコンテンツを変更できます。一番上の行に触れないようにしてください。そうしないと、フィールド名が変更されます。カテゴリ列には、パイプライン|を使用したことに注意してください。

<code>ENDPOINT=
TOKEN=</code>

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

ルート履歴モード：y

を使用します

保存するときにLINTをチェックしてください
• プロファイルの場所：専用の構成ファイル
• プリセットを保存：あなたの選択
プロジェクト作成プロセスが完了したら、プロジェクトディレクトリに変更し、次の依存関係をインストールします。
プロジェクトでBootstrap-Vueをセットアップするには、SRC/main.jsを開き、次のコードを追加します。
次に、プロジェクト構造の構築を開始する必要があります。 SRC/コンポーネントフォルダーで、既存のファイルを削除し、これらの新しいファイルを作成します。
commentform.vue

commentlist.vue

vue create vue-graphcms

post.vue

postlist.vue

npm install bootstrap-vue axios

最初にルートをセットアップしましょう。 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=
  TOKEN=</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>

  ポストリストコンポーネントでは、カスタムオブザーバーを使用して、現在のURLに基​​づいてカテゴリデータ属性を更新することに注意してください。
  ルーティングが適切に機能していることを確認するために、クイックテストを実行できるようになりました。コマンドnpm runサーブを使用して、vue.jsサーバーを起動します。 LocalHost：8080でブラウザを開き、各ナビゲーションリンクをテストします。カテゴリプロパティは、ルート名プロパティで定義したのと同じ値を出力する必要があります。

  

  graphcms

  からデータを抽出します

  ルーティングコードが機能しているので、GraphCMSバックエンドから情報を抽出する方法を見てみましょう。プロジェクトのルートで、env.localファイルを作成し、次のフィールドの値を入力します。
  VUE.JSシングルページアプリケーションは、VUE_APPから始まるカスタム環境変数のみをロードすることに注意してください。 GraphCMSダッシュボード設定ページからAPIエンドポイントとトークンを見つけることができます。トークンの場合は、読み取りおよび書き込み操作を可能にするため、オープン許可を備えたトークンを作成してください。次に、ファイルsrc/graphcms.jsを作成し、次のコードをコピーします。

  npm run categories
  npm run posts

  作成したばかりの補助ファイルには、2つの主要な機能が提供されます。

  npm run reset

  GraphCMSバックエンドで承認要求を実行するように構成されたAxiosのインスタンスを作成します。
  このプロジェクトで使用されているGraphQLクエリと突然変異が含まれています。彼らは、（カテゴリ別またはスラッグ別）記事を取得し、新しいコメントを作成する責任があります。 GraphQLクエリと突然変異について詳しく知りたい場合は、GraphQLドキュメントを参照してください。
  プロジェクトダッシュボードのAPIエクスプローラーを使用して、これらのクエリと突然変異をテストすることもできます。これを行うには、上記のコードからクエリまたは突然変異をコピーし、APIエクスプローラーの上部ウィンドウに貼り付けます。下のウィンドウにクエリ変数を入力し、[
  • [🎜]ボタンを[
  これはクエリの例です
  これはバリエーションの例です：

  

  テンプレートのデータを表示
  さて、SRC/コンポーネント/postList.vueにHTMLテンプレートを作成して、投稿リストを簡潔に表示します。また、GraphCMSデータベースから記事データを抽出するaxiosコードも追加します：

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

  コードの主な関数を簡単に見てみましょう：

  • ロード。リクエストが行われると、ロードスピナーが表示され、一部の操作が実行されていることをユーザーに示すようになります。リクエストが完了すると、ロードスピナーは記事リストに置き換えられます。
  • クエリ。カテゴリごとに記事のリストを取得するために、カテゴリを照会し、カテゴリとポストの関係を使用してフィルタリングされた記事にアクセスする方が簡単だとわかりました。
  • create。 fetchposts（）関数は、ページが最初にロードされたときに作成されたライフサイクルフック内から呼び出されます。
  • 観察。ルーティングURLが変更されると、fetchposts（）関数は毎回呼び出されます。

  これらの変更を行った後、次のビューを確認する必要があります。

  

  個々の記事を表示

  を表示します

  予想通り、トップメインナビゲーションが機能することを確認してください。それでは、ポストコンポーネントに対処しましょう。独自のFetchPost（）関数があり、SLUGによってクエリがQueryになります。 Slugパラメーターがどこから来たのかを知りたい場合は、router.jsで追加したこのコードを思い出させてください：
  これは、URLの後 / post / in thisの後のすべてのものをこのようにコンポーネントで使用できることを意味します。$ route.params.slug。

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

  POSTコンポーネントは、CommentFormおよびCommentListコンポーネントの親コンポーネントです。コメントデータは、記事の記録からコメントリストコンポーネントに小道具として渡されます。次に、src/components/commentlist.vueのコードを挿入しましょう

  GraphCMSダッシュボードを介して手動でコメントを入力していない限り、今は結果が表示されるとは思わないでください。 src/components/commentform.vueにコードを追加しましょう。これにより、ユーザーはブログ投稿にコメントを追加できます。

  <code>ENDPOINT=
  TOKEN=</code>

  GraphQLバックエンドシステムに新しいコメントを送信できる基本的なコメントフォームがあります。新しいコメントを保存した後、返されたオブジェクトを取得し、post.commentsアレイに追加します。これにより、コメントリストコンポーネントがトリガーされ、新しく追加されたコメントが表示されます。

  <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>

  ここで記事の見解を見る必要があります。 URLの終わりに注意してください：Slug：localhost：8080/post/Fashion-Post-1：

  npm run categories
  npm run posts

  上記の例では、新機能をテストするためにいくつかのコメントを追加しました。あなたが同じことをしていることを確認してください。

  npm run reset

  要約
  vue.jsとgraphqlを使用してブログWebサイトを構築するのがどれほど簡単かを見てきたことを願っています。プレーンPHPとMySQLを使用している場合は、より多くのコードを書きます。 PHPフレームワークを使用しても、単純なブログアプリケーションのコードをさらに作成する必要があります。

  このチュートリアルの目的のために、可能な限りシンプルに保つ必要があります。このブログプロジェクトは、最も簡単なブログのセットアップに到達するにはほど遠いことに気付くかもしれません。エラー処理、フォーム検証、キャッシュなど、多くの問題は解決していません。最後の部分では、ApolloクライアントにはGraphQLクエリの結果をキャッシュするメカニズムがあるため、お勧めします。もちろん、著者モデルと認証とメッセージの承認をサポートする適切なコメントシステムが必要です。

  必要に応じて、この単純なvue.js graphcmsブログを改善し続けてください。

  ヘッドレスCMSおよびVue.js

  についての

  FAQ（FAQ）

  ヘッドレスCMSとvue.jsを使用することの利点は何ですか？
  ヘッドレスCMSとVUE.JSを使用するには、多くの利点があります。まず、より柔軟で効率的なコンテンツ管理システムを提供します。バックエンドとフロントエンドを分離し、開発者が両端を個別に処理できるようにします。この分離は、CMSがWebサイトだけでなく、あらゆるプラットフォームにコンテンツを提供できることも意味します。第二に、Vue.jsは、既存のプロジェクトを理解しやすく統合することができるプログレッシブJavaScriptフレームワークです。シンプルで柔軟なAPIを提供し、ヘッドレスCMSに最適なものになります。
  ヘッドレスCMSとvue.jsを統合する方法は？
  ヘッドレスCMSとvue.jsの統合には、いくつかのステップが含まれます。まず、APIベースの通信をサポートするヘッドレスCMSを選択する必要があります。次に、Vue.jsプロジェクトを設定し、必要な依存関係をインストールする必要があります。その後、CMSのAPIを使用してコンテンツを取得し、Vue.jsアプリケーションに表示できます。一部のCMSは、この統合を容易にするためのSDKまたはプラグインも提供しています。
  vue.jsでヘッドレスCMSを使用できますか？
  はい、ヘッドレスCMSがAPIベースの通信をサポートしている限り、vue.jsでヘッドレスCMSを使用できます。これは、Vue.jsがバックエンド（この場合はCMS）と通信するフロントエンドフレームワークであるためです。 Vue.jsで使用できる人気のあるヘッドレスCMSには、Strapi、Sanity、ButterCMSが含まれます。
  ヘッドレスCMSとVue.jsを使用したプロジェクトの例は何ですか？
  ヘッドレスCMSとvue.jsを使用して多くのプロジェクトがあります。これらのプロジェクトは、ブログやeコマースのWebサイトから本格的なWebアプリケーションにまで及びます。いくつかの例には、VuePress（Vueベースの静的Webサイトジェネレーター）を使用した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の脆弱性に対する組み込みの保護もあります。

  モバイルアプリケーション開発にVue.jsを使用してヘッドレスCMSを使用できますか？

  はい、モバイルアプリケーション開発にはvue.jsを備えたヘッドレスCMSを使用できます。ヘッドレスCMSはAPIを介してコンテンツを提供するため、モバイルアプリケーションを含む任意のプラットフォームにコンテンツを提供できます。 Vue.jsは、NativeScriptやWeexなどのフレームワークを使用してモバイルアプリケーションを開発するために使用できます。

  ヘッドレスCMSとvue.jsを使用する将来の発展は何ですか？

  ヘッドレスCMSとVUE.JSを使用する将来の開発の見通しは広範です。両方のテクノロジーは浸透率を高めており、ますます多くのプロジェクトで使用されています。この組み合わせの柔軟性と効率性、およびパフォーマンスの利点により、最新のWeb開発に強力な選択肢となります。より多くの開発者がこれらのテクノロジーに精通するようになるにつれて、より革新的な用途と統合を見ることが期待できます。

以上がヘッドレスCMSのためにビューフロントエンドを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。