Vuejsでクイックブログコメントを実装する

51755 ワード

ブログのコンテンツの書面の作品を介して情報を共有します.ブログコメントでは、コンテンツドメインに応じて約束やフィードバックを駆動できます.
このポストは、ブログ記事にコメントセクションを加える方法を教えます.我々は、追加、表示、編集、各コメントを削除することができます.また、この機能を実装するカスタムバックエンドサーバーを必要としないことに注意することが重要です.
完全なソースコードについてはGitHub repository .
このプロジェクトは完成されていますVue.js . Vueは、ユーザーインターフェイスを構築するためのオープンソースのJavaScriptフロントエンドのフレームワーク、HTML、CSS、およびJavaScriptを使用して単一のページアプリケーションです.
最終的な製品を見て、完成した観察を見てください

必要条件

チュートリアルを完了するには、次の手順を実行します.

基礎知識

ローカルマシンにDockerデスクトップをインストールします.このコマンドを実行するdocker -v あなたがインストールしたかどうか確認するそれ以外の場合は、Dockerproducts ページ

Vueの知識js

ローカルで実行中のappwriteインスタンス.これに続いてくださいdocumentation インストールする.

Appwrite 開発者が近代的なバックエンドAPIを高速に構築できるオープンソースのバックエンドサービスプラットフォームです.Appwrite概要複雑なバックエンドサービスを構築し管理する複雑さ我々はこのプロジェクトのカスタムサーバーを必要としない、我々はインターフェイスの構築に焦点を当てる.

Vueから始める

Vue Cli端末コマンドを使用してVue 3、Babel、およびSeslintを持つ新しいプロジェクトを足場にします.

vue create blog-comments

インストール後、ディレクトリを変更し、ローカル開発サーバーを起動しますlocalhost:8080 使用

cd blog-comments && yarn serve

# or

cd blog-comments && npm run serve

ブログページの作成

我々は、インポートsrc/components/Blog.vue コンポーネントApp.vue プロジェクトフォルダ内のファイル.
コンポーネント/ブログ.Vue
https://gist.github.com/Chuloo/68921c6b9729ca2da7ee03fab1dab60c
上記のコードは、テキスト本体、ポストタイトル、および出版者名を含んでいるページを私たちに与えます.
また、スタイルを使用してスコープを追加<style> コンポーネントのタグ.
次に、ブログコンポーネントをルートコンポーネントにインポートしますApp.vue .

<template>
  <div class="container">
    <Blog />
  </div>
</template>

<script>
import Blog from '@/components/Blog.vue';

export default {
  name: 'App',
  components: {
    Blog,
  }
</script>

<style>
  [component styles go in here]
</style>

ここに、ホームページの完全なコード断片があります.
https://gist.github.com/Chuloo/c6d23d0b7503228b553df180067c2e43
ブログのコメントページは次のようになります.

コメント入力フォームの作成

次に、読者がコメントを入力できる入力フィールドを作成します.
コンポーネントフォルダで、新しいファイルを作成します.AddComment.vue , 次のコンテンツを使用します.

<template>
  <div class="form">
    <form>
      <div class="form__group">
        <label>Leave a comment</label>
        <textarea
          v-model="newComment"
          rows="10"
          required
          cols="50"
          placeholder="type in your comment"
        />
        <button>Submit</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newComment: '',
    };
  },
};
</script>

<style scoped>
.form {
  margin-top: 1.5em;
}

label {
  display: block;
  margin-bottom: 1em;
  font-weight: 700;
  font-family: Padauk, sans-serif;
}

textarea {
  width: 100%;
  margin-top: 0.5em;
}

button {
  border: unset;
  background: #79b791;
  color: #230c0f;
  font-weight: 700;
  padding: 1em 2.5em;
  margin-top: 1em;
}
</style>

上記のコードには、データプロパティがありますnewComment 空の文字列に設定します.このプロパティは<textarea> Vモデルディレクティブを使用したフィールド.
これで、インポートしましょうAddComment コンポーネントApp.vue 次のコードを含むコンポーネント

<template>
  <div class="container">
    <Blog />
    <!-- add this -->
    <add-comment />
  </div>
</template>

<script>
// other import component
import AddComment from '@/components/AddComment.vue'; // add this
export default {
  name: 'App',
  components: {
    // blog component
    AddComment // add this
  }
</script>
<style>
/* styles for the page */
</style>

ブログの結果は次のようになります.

次に、投稿の下に作成されたすべてのコメントを一覧表示します.また、コメントを更新または削除するオプションが含まれます.
ファイルを作成します.Comment.vue , 次のコンテンツを含むコンポーネントフォルダで

<template>
  <div class="comment">
    <div class="comment__flex">
      <p>I found this article helpful</p>
      <div class="comment__flex-btn">
        <button class="update">Update</button>
        <button class="del">Delete</button>
      </div>
    </div>
  </div>
</template>

<style>
[Styles go in here]
</style>

スタイルの完全なコンポーネントを見ることができますthis gist .
https://gist.github.com/Chuloo/0edc8d42d8c69221b6cac39eafa93204
最後に、を含めましょうComment コンポーネントApp.vue ファイル.

<template>
  <div class="container">
    <Blog />
    <!-- add this -->
    <div class="comment-space">
      <p>Comment (1)</p>
    </div>
    <div>
      <comment class="message" />
    </div>
    <add-comment />
  </div>
</template>

<script>
// other import component
import Comment from '@/components/Comment';

export default {
  name: 'App',
  components: {
    // other components
    Comment, // add this
  },
};
</script>

ページ上のすべてのデータは静的です、そして、ページは下記のイメージに見えます.

次に、対話をページに追加します.

プロジェクトのセットアップ

使うAppwrite このVueアプリケーションでは、コマンドでAddWriteクライアント側SDKをインストールします.

yarn add appwrite

# or

npm install appwrite

次に、新しいappwriteプロジェクトを作成してアプリを設定してみましょう.

新規appwriteプロジェクトを作成する

「プロジェクトを作成」ボタンをクリックして、AppWrite Webコンソールの新しいプロジェクトを開始します.
その後、我々はProject ID and API Endpoint プロジェクトの設定タブで.
プロジェクトのルートディレクトリで、utilsを作成します.新しいappwriteインスタンスと他の役に立つアプリケーション変数を定義するJSファイル.

import { Appwrite } from 'appwrite';
// Init your Web SDK
const appwrite = new Appwrite();
appwrite
  .setEndpoint('http://EndpointURL.example') // Replace this with your endpoint
  .setProject('ProjectID'); // Replace this with your ProjectID

appwrite.account.createAnonymousSession().then(
  (response) => {
    console.log(response);
  },
  (error) => {
    console.log(error);
  }
);

export const db = appwrite.database;
export const COLLECTION_ID = 'COLLECTION ID'; // Replace with your Collection ID

いくつかのセキュリティ要件をバイパスするには、AppWriteの匿名セッションを作成しました.

データベースコレクションの作成

AppWriteは私たちのブログのコメントを格納する機能データベースを提供します.
AppWriteコンソールパネルでコレクションを作成するには、[データベース]タブに移動し、[コレクションの追加]をクリックし、コレクション名を提供します.私たちはCollectionID クライアント側のSDKを使用してコレクションと対話する必要があります.
でCollection Level 内部settings タブを使用して、読み取りと書き込みのアクセスを設定しますrole:all .

データを更新するutils.js 取得するappwrite資格情報を含めるには.
最後に、[属性]タブで、ドキュメントのプロパティを作成します.このアプリケーションについては、コメントを、各コメントの日付を格納します.

すべてのコメントをフェッチする

我々は、アプリケーションの負荷時にすべてのコメントを取得する機能が必要です.我々は、このscript 部分App.vue で

<script>
import { COLLECTION_ID, db } from '@/utils';

export default {
  name: 'App',
  components: {
    // all components
  },
  created() {
    this.fetchComments();
  },
  data() {
    return {
      comments: [],
    };
  },
  methods: {
    fetchComments() {
      let promise = db.listDocuments(COLLECTION_ID);
      promise.then(
        (res) => {
          console.log(res);
          this.comments = res.documents;
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
};
</script>

コメント配列をdata() 関数は、listDocuments API.
にcreated() ライフサイクルメソッドfetchComments() アプリケーションコンポーネントが作成されるときの機能.
私たちは<template> セクションApp.vue 以下のコンポーネント.

<template>
  <div class="container">
    <Blog />
    <div class="comment-space">
      <p>
        {{
          comments.length > 1
            ? `Comments (${comments.length})`
            : comments.length == 1
            ? `Comment (${comments.length})`
            : ''
        }}
      </p>
    </div>
    <div v-for="data in comments" :key="data.comment">
      <!-- comment component goes here -->
    </div>
    <add-comment :fetchComments="fetchComments" />
  </div>
</template>

The <p> タグには、コメントの数を示す三項演算子が含まれます.使用v-for ディレクティブは、ループを介して、各コメントをレンダリングします.
新しいコメントを作成した後にすべてのコメントを取得するために関数を再利用するには:fetchComments 以前に定義されたfetchcommentメソッドへのprop.

ブログコメントの作成

私たちはAddComment.vue データベースへのコメントの追加を処理するファイル.

<template>
  <div class="form">
    <form @submit.prevent="createNewComment">
      <div class="form__group">
        <label>Leave a comment</label>
        <textarea
          v-model="newComment"
          rows="10"
          required
          cols="50"
          placeholder="type in your comment"
        />
        <button>Submit</button>
      </div>
    </form>
  </div>
</template>

<script>
import { COLLECTION_ID, db } from '@/utils';

export default {
  props: ['fetchComments'],
  // data ()
  methods: {
    createNewComment() {
      if (this.newComment === '') {
        return;
      }
      let promise = db.createDocument(COLLECTION_ID, 'unique()', {
        comment: this.newComment,
        date: new Date(),
      });
      promise.then(
        () => {
          this.fetchComments();
          this.newComment = '';
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
};
</script>

CreateNewCommentメソッドでは、AppWriteのCreateDocument APIを使用してデータベースに新しいコメントを記述します.書き込み操作が失敗した場合、エラーメッセージが記録されます.我々は、新しいコメントを追加した後、すべてのコメントの更新されたリストを取得します.
AppWrite Webコンソールには、次の画像にコメントを表すドキュメントが表示されます.

コメントリストコンポーネントの更新

アプリで.VUEコンポーネント、我々は更新comment コメントデータを含むコンポーネントの小道具とfetchComments メソッド.

<template>
  <div class="container">
    <-!-- Blog component --> <-!-- Comment count -->
    <div v-for="data in comments" :key="data.comment">
      <-!-- add this -->
      <comment class="message" :data="data" v-on:refreshData="fetchComments" />
    </div>
    <-!-- add-comment component -->
  </div>
</template>

<script>
// import component
import Comment from '@/components/Comment';

export default {
  components: {
    // other components
    Comment,
  },
};
</script>

fetchComments 一度実行するrefreshData イベントが発生しました.
更新しましょうComment.vue コメント更新と削除を扱うコンポーネント.また、コメントを編集するコンポーネントも含まれます.まず、スクリプトの部分に更新コメント関数を追加します.

<script>
import { db } from '@/utils';
export default {
  props: ['data'],
  data() {
    return {
      open: false,
      displayedComment: '',
    };
  },
  methods: {
    updateComment() {
      this.open = !this.open;
    },
    updateCommentMethod() {
      let promise = db.updateDocument(this.data.$collection, this.data.$id, {
        comment: this.displayedComment,
      });
      this.open = false;
      promise.then(
        () => {
          this.$emit('refreshData');
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
};
</script>

我々は、新しいテキストを保持するためにコメントのアクションボタンと別の変数の可視性を管理する状態変数を追加しました.appwriteのupdateDocument APIは、コレクションIDとドキュメントIDをpropsとして渡され、コメントを更新します.コメントが更新されると、我々はrefreshData すべてのコメントを取得するイベント.
作成されたメソッドと変数を利用するためにテンプレート部分を更新します.

<template>
  <div class="comment">
    <div class="comment__flex">
      <p>{{ data.comment }}</p>
      <div class="comment__flex-btn">
        <button class="update" @click="updateComment">Update</button>
        <button class="del" @click="deleteComment">Delete</button>
      </div>
    </div>
    <div v-if="this.open" class="open">
      <form @submit.prevent="updateCommentMethod">
        <div class="form-group">
          <textarea
            cols="50"
            rows="10"
            id
            required
            :placeholder="data.comment"
            v-model="displayedComment"
          />
          <button class="update">Update</button>
        </div>
      </form>
    </div>
  </div>
</template>

最後に、appwriteを使用してコメントを削除する方法を追加しましたdeleteDocument API.

<script>
export default {
  methods: {
    deleteComment() {
      let promise = db.deleteDocument(this.data.$collection, this.data.$id);
      promise.then(
        () => {
          this.$emit('refreshData');
        },
        (err) => {
          console.log('error occured', err);
        }
      );
    },
  },
};
</script>

下の画像は、Webページの最終的な外観です.

結論

このポストは、使用に関する詳細なガイドですAppwrite を作成、表示、編集、およびブログのコメントを削除します.見られるように、この機能はカスタムバックエンドサーバーを必要としません.もっとブログの投稿を追加し、それぞれのユニークなコメントを作成してください.

もっと学ぶ

Appwrite CRUD operations

Getting started with Appwrite

Appwrite SDKs

Reference

この問題について(Vuejsでクイックブログコメントを実装する), 我々は、より多くの情報をここで見つけました https://dev.to/hackmamba/implement-quick-blog-comments-in-vuejs-457j

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

コントローラとビュー

Fluter-Providerステータス管理