Node.js を使用してシンプルなソーシャル メディア プラットフォームを構築する方法

ソーシャル メディア プラットフォームは、今日の時代で最も人気があり、トレンドになっているアプリケーションの 1 つとなっています。Node.js は、Web 開発で広く使用されている非常に効率的な JavaScript ランタイムです。柔軟性と適応性が優れています。 Node.js を使用してソーシャル メディア プラットフォームを構築することは良い選択です。この記事では、Node.js を使用してシンプルなソーシャル メディア プラットフォームを構築する方法を学びます。

1. Node.js のインストール

まず、Node.js がコンピューターにインストールされていることを確認します。次のコマンドを実行して、Node.js がインストールされているかどうかを確認できます。

node -v

Node.js がインストールされている場合は、現在有効になっているバージョン番号が出力されます。 Node.js をインストールしていない場合は、コンピューターの種類、オペレーティング システム、およびオペレーティング環境に基づいて、最新バージョンの Node.js をインストールしてください。

2. プロジェクトの初期化

プロジェクトの作成を開始します。まず、次のコマンドを使用して、コンピューター上に新しいディレクトリを作成します。

mkdir social-media-app
cd social-media-app

次に、フォルダー内の空の Node.js プロジェクトを初期化する必要があります。次のコマンドを実行します。

npm init

これにより、新しいプロジェクトを作成するときの基本的な設定が説明されます。プロンプトに従い (npm init -y はすぐに実行できます)、最後のステップで、「メイン」ファイル名がプロジェクトで使用するエントリー ファイル (通常は「app.js」という名前) と同じであることを確認します。 。

{
  "name": "social-media-app",
  "version": "1.0.0",
  "description": "A simple social media app built with Node.js",
  "main": "app.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

3. 必要な依存関係をインストールする

次に、次のような必要な依存関係をインストールする必要があります。

• Express: この軽量のファイルを使用します。 HTTP ルーティングとリクエストを処理するフレームワーク
• Body-parser: POST リクエストを処理するときは、body-parser ミドルウェアを通じてリクエスト本文のデータを解析する必要があります
• EJS: このテンプレート エンジンページのレンダリングに使用されます

次のコマンドを使用してこれらの依存関係をインストールします:

npm install express body-parser ejs --save

インストール後、package.json ファイルに次の依存関係が表示されることがわかります:

  "dependencies": {
    "body-parser": "^1.18.3",
    "ejs": "^2.6.1",
    "express": "^4.16.4"
  }

4. アプリケーション エントリ ファイルの作成

必要な依存関係をインストールしたので、アプリケーション エントリ ファイル「app.js」を作成しましょう。まず、Express モジュールと Body-parser モジュールをインポートします。

const express = require('express');
const bodyParser = require('body-parser');

次に、Express アプリケーションを作成します。

const app = express();

body-parser を有効にして、リクエスト本文内のデータを解析します。データを JSON に解析することを選択したので、次の行を app.js に追加します。

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

EJS テンプレート エンジンを使用してページをレンダリングします。このアプリケーションでは、EJS を使用してテンプレートをレンダリングします。これを有効にするには、app.js ファイルに次の行を追加します。

app.set('view engine', 'ejs');

最後に、app.js ファイルでアプリケーションを起動します。

app.listen(3000, () => console.log('Server running on port 3000!'))

この単純なアプリケーションを使用して、すべてが正しく設定されているので、ターミナルに次のコマンドを入力してプログラムを実行できます。

node app.js

ブラウザで http://localhost:3000 を開くと、「GET できません」というメッセージが表示されるはずです。

5. ルートとコントローラーの追加

次に、ルートと対応するコントローラーをアプリケーションに追加しましょう。 2 つのページを作成します:

• ホームページ (すべてのメッセージを表示)
• パブリッシュ ページ (新しいメッセージをパブリッシュ)

(1) ホーム ページのルーティングおよびコントローラー

ホームページのリクエストを処理するには、/ パスのルートを作成する必要があります。すべてのメッセージを取得してビューに渡すコントローラーも必要です。

まず、フォルダーを作成し、ファイル名を「controllers」とし、その中に「home.js」というファイルを作成します。これが私たちのコントローラーです:

// controllers/home.js

let messages = [
  { id: 1, title: 'First Message', body: 'This is the first message' },
  { id: 2, title: 'Second Message', body: 'This is the second message' }
];

exports.getHomePage = (req, res) => {
  res.render('pages/home', { messages });
};

このコントローラーは、2 つのメッセージを含む配列を home.ejs テンプレートに渡し、それをレンダリングするだけです。

ここで、/ パスを処理するために app.js ファイルにルートを作成する必要があります:

const homeController = require('./controllers/home');

app.get('/', homeController.getHomePage);

ルートは、ファイルを指す「GET」リクエストのルートを作成します。 controllers/home.js で getHomePage 関数が定義されています。

(2) パブリッシュ ページ ルーティングとコントローラー

次に、パブリッシュ ルーティングと対応するコントローラーのファイルを作成します。 「Controllers」フォルダーに、次の内容を含む「publish.js」というファイルを作成します。

// controllers/publish.js

let messages = [
  { id: 1, title: 'First Message', body: 'This is the first message' },
  { id: 2, title: 'Second Message', body: 'This is the second message' }
];

exports.getPublishPage = (req, res) => {
  res.render('pages/publish');
};

exports.publishMessage = (req, res) => {
  const { title, body } = req.body;
  const id = messages.length + 1;
  messages.push({ id, title, body });

  res.redirect('/');
};

このコントローラーは 2 つの動作を定義します。

• getPublishPage : この関数は、タイトルと本文を含むフォーム。ユーザーは新しいメッセージを送信できます。
• publishMessage: この関数は、ユーザーが送信したデータを受信し、新しいメッセージを「messages」配列に追加して、ホームページにリダイレクトします。

このルートを app.js ファイルに作成しましょう:

const publishController = require('./controllers/publish');

app.get('/publish', publishController.getPublishPage);

app.post('/publish', publishController.publishMessage);

これにより、/publish パスに 2 つのルートが作成されます: フォームをレンダリングするための GET リクエスト ルートと POSTデータの送信にはリクエスト ルーティングが使用されます。

6. ビューの作成

2 つのルートと対応するコントローラーを作成しました。次に、対応するビューをビュー内に作成する必要があります。

「layouts」という名前のフォルダーと「pages」という名前のフォルダーの 2 つのフォルダーを作成する必要があります。

「layouts」フォルダーに「main.ejs」という名前のファイルを作成します。このファイルには、タイトル、ページ スクリプト、スタイルシートなど、すべての Web サイト ページに共通の要素が含まれます。このファイルの内容は次のとおりです:

<!-- layouts/main.ejs -->

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Social Media App</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <header>
    <h1 id="Social-Media-App">Social Media App</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/publish">Publish</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <%- body %>
  </main>

  <footer>
    &copy; 2020 Social Media App
  </footer>
</body>
</html>

在“pages”文件夹中，创建两个名为“home.ejs”和“publish.ejs”的文件。

以下是“home.ejs”文件的内容：

<!-- views/pages/home.ejs -->

<h2 id="Messages">Messages</h2>

<ul>
  <% messages.forEach(message => { %>
    <li><%= message.title %>: <%= message.body %></li>
  <% }) %>
</ul>

这呈现了一个包含所有消息的列表。

以下是“publish.ejs”文件的内容：

<!-- views/pages/publish.ejs -->

<h2 id="Publish-Message">Publish Message</h2>

<form method="POST" action="/publish">
  <label for="title">Title:</label>
  <input type="text" name="title" id="title"><br>

  <label for="body">Body:</label>
  <textarea name="body" id="body"></textarea><br>

  <button type="submit">Publish</button>
</form>

这个文件包含一个表单，用户可以在其中输入新消息的标题和正文。

现在，该应用程序已准备就绪，可以运行。在终端中运行以下命令：

node app.js

在浏览器中输入http://localhost:3000，您应该会看到一个包含所有消息的列表，并能够通过单击链接到发布页面。

7. 完成

如果您想了解更多关于如何使用Node.js开发Web应用程序或其他Node.js开发内容，请用以上代码示例作为参考，并根据您自己的需求和想法进行更改。现在，您已经拥有了一个基于Node.js的简单社交媒体平台，您可以使用类似的技术来扩展功能，构建更大、更复杂的社交媒体平台。

以上がNode.js を使用してシンプルなソーシャル メディア プラットフォームを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。