【ISSUE】Vue.jsとNode.jsでチャットアプリを作った
2024年12月23日 8:40
Vue.jsでチャットアプリを作成しました。
GitHub↓
https://github.com/hukuryo/Vue-ChatApp
こちらが機能一覧になります。
・ログイン、ログアウト
・ユーザー登録
・メッセージ送信、編集、削除、一覧表示
メッセージやユーザーのデータはNode.jsでAPIを作り、JSONファイルに保存する仕組みになっています。
この2つのインストールは以下の記事を参考にしました。
Vue.jsインストール
Node.jsインストール
今回使用するライブラリこちらです。プロジェクトを起動したら、こちらの内容をコピーして、以下のファイルに貼り付けてください。
そして、一つ一つインストールしてください。
ここからコードを紹介していきます。
今回は「chat-app」というプロジェクト名にしました。
全てのViewファイルで適用されるファイルのソースコードです。
デザインはBootStrapとFontAwesomeを使用しました。
ここでは、routerとstoreのコードを紹介します。
先にNode.jsのコードを貼っておきます。コードの簡単な説明は、コードの中に書いてあります。
このコードを書く前に以下のディレクトリにJSONファイルを2つ作成してください
Node.jsのコード
まずはログイン画面から作成していきます。
ここからは、チャット機能に関するコードを紹介していきます。
同じく、コードの説明は、ソースコード内に書いてあります。
コンポーネント化したフォーム部分↓
このアプリは、多くのユーザーの利用を想定していないです。
なので、あくまで参考程度にしてください。
[cv:issue_marketplace_engineer]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。