【ISSUE】Vue.jsとNode.jsでチャットアプリを作った

0

2024年12月23日 8:40

概要

Vue.jsでチャットアプリを作成しました。

GitHub↓
https://github.com/hukuryo/Vue-ChatApp

機能説明

こちらが機能一覧になります。
・ログイン、ログアウト
・ユーザー登録
・メッセージ送信、編集、削除、一覧表示
メッセージやユーザーのデータはNode.jsでAPIを作り、JSONファイルに保存する仕組みになっています。

VueとNode.jsをインストール

この2つのインストールは以下の記事を参考にしました。
Vue.jsインストール
Node.jsインストール

インストールしたライブラリ

今回使用するライブラリこちらです。プロジェクトを起動したら、こちらの内容をコピーして、以下のファイルに貼り付けてください。
そして、一つ一つインストールしてください。
img

コードを紹介

ここからコードを紹介していきます。
今回は「chat-app」というプロジェクト名にしました。

App.vue

全てのViewファイルで適用されるファイルのソースコードです。
デザインはBootStrapとFontAwesomeを使用しました。
img

routerとstoreのコード

ここでは、routerとstoreのコードを紹介します。

routerのコード

img

storeのコード

img

Node.jsのソースコード

先にNode.jsのコードを貼っておきます。コードの簡単な説明は、コードの中に書いてあります。
このコードを書く前に以下のディレクトリにJSONファイルを2つ作成してください
img
Node.jsのコード

img

ログイン・ユーザー登録画面

まずはログイン画面から作成していきます。

ログイン画面

img

ユーザー登録画面

img

コンポーネント化したファイル

img

チャット機能に関するコード

ここからは、チャット機能に関するコードを紹介していきます。
同じく、コードの説明は、ソースコード内に書いてあります。
コンポーネント化したフォーム部分↓
img

メッセージ一覧ページ

img

編集ページ

img

最後に

このアプリは、多くのユーザーの利用を想定していないです。
なので、あくまで参考程度にしてください。
[cv:issue_marketplace_engineer]

0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。