Nodejs はドリフトボトルを実装します-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

Nodejs はドリフトボトルを実装します

PHPz

May 13, 2023 pm 10:39 PM

Node.js でドリフトボトルを実現

ドリフトボトルは、流れに乗って遠くに漂ってしまう伝統的でロマンチックなものです。デジタル時代では、技術的な手段を通じてこの種のおもちゃをシミュレートできます。この記事では、Node.jsを使って簡単なドリフトボトルアプリケーションを実装する方法を紹介します。

ステップ 1: 基本環境を構築する

まず、Node.js がコンピューターにインストールされていることを確認する必要があります。インストールが完了したら、コマンドラインに次のコマンドを入力して、Node.js が正常にインストールされたかどうかを確認します。

node -v

ログイン後にコピー

インストールが成功した場合は、バージョン番号を出力します。

次に、Express フレームワークや MongoDB データベースなど、必要な依存ライブラリをいくつかインストールする必要があります。コマンドラインで次のコマンドを使用してインストールします。

npm install express mongodb --save

ログイン後にコピー

ここでは npm コマンドを使用して依存ライブラリをインストールします。--save パラメータは、ライブラリの名前とバージョン番号を示します。依存ライブラリはプロジェクト package.json ファイルに記録され、チームのコラボレーションとコードのメンテナンスが容易になります。

ステップ 2: バックグラウンドロジックの実装

次に、ルーティングやデータ操作などのバックグラウンドロジックを作成する必要があります。プロジェクトのルートディレクトリに新しい app.js ファイルを作成し、そのファイルに次の内容を入力します。

const express = require('express');
const mongodb = require('mongodb').MongoClient;

const app = express();
const port = process.env.PORT || 3000;
const dbUrl = 'mongodb://localhost:27017/bottle';

app.get('/', function(req, res) {
  res.send('Hello, world!');
});

app.listen(port, function() {
  console.log(`Server is listening on port ${port}`);
});

ログイン後にコピー

このコードは、ポート 3000 でリッスンする基本的な Express アプリケーションを実装します。 bottle という名前の MongoDB データベースに接続します。ルートルート / も定義されており、Hello, world! を返します。

次に、3 つのルートを実装する必要があります:

/throw: ドリフトボトルをドロップするために使用されます。
/pick: ドリフトボトルを見つけるために使用されます。
/delete/:id: ドリフトボトルの削除に使用されます。

まず最初のルートを実装する方法を見てみましょう。次のコードを app.js ファイルに追加します:

app.get('/throw', function(req, res) {
  const user = req.query.user;
  const content = req.query.content;
  const bottle = {user: user, content: content};
  mongodb.connect(dbUrl, function(err, client) {
    if (err) {
      return console.log('Failed to connect to database');
    }
    const db = client.db('bottle');
    db.collection('bottles').insertOne(bottle, function(err, result) {
      if (err) {
        return console.log('Failed to insert bottle');
      }
      res.send('Throw bottle success');
      client.close();
    });
  });
});

ログイン後にコピー

このコードは、ドリフトボトルをドロップするために使用されます。最初にクエリパラメーターのユーザー名とコンテンツを取得し、次にアセンブルします。それを JSON オブジェクトに変換します。次に、MongoDB データベースに接続し、オブジェクトを bottles コレクションに挿入します。挿入が成功すると、Throw bottle success が返されます。

次に、2 番目のルートを実装する必要があります。次のコードを app.js ファイルに追加します。

app.get('/pick', function(req, res) {
  const user = req.query.user;
  mongodb.connect(dbUrl, function(err, client) {
    if (err) {
      return console.log('Failed to connect to database');
    }
    const db = client.db('bottle');
    db.collection('bottles').findOne({user: user}, function(err, result) {
      if (err) {
        return console.log('Failed to find bottle');
      }
      if (!result) {
        return res.send('No bottle found');
      }
      const bottle = {user: result.user, content: result.content};
      db.collection('bottles').deleteOne({_id: result._id}, function(err, result) {
        if (err) {
          return console.log('Failed to delete bottle');
        }
        res.send(bottle);
        client.close();
      });
    });
  });
});

ログイン後にコピー

このコードは、ドリフトボトルを検索するために使用されます。まず、クエリパラメーターでユーザー名を取得し、次に MongoDB データベースに接続し、bottles コレクションでユーザー名に一致する漂流ボトルを見つけます。ドリフトボトルが見つかった場合は、データベースから削除し、結果をクライアントに返します。

最後に、3 番目のルートを実装する必要があります。次のコードを app.js ファイルに追加します。

app.get('/delete/:id', function(req, res) {
  const id = req.params.id;
  mongodb.connect(dbUrl, function(err, client) {
    if (err) {
      return console.log('Failed to connect to database');
    }
    const db = client.db('bottle');
    db.collection('bottles').deleteOne({_id: mongodb.ObjectID(id)}, function(err, result) {
      if (err) {
        return console.log('Failed to delete bottle');
      }
      res.send('Delete bottle success');
      client.close();
    });
  });
});

ログイン後にコピー

このコードは、ドリフトボトルを削除するために使用されます。まずルーティングパラメーターでドリフトボトル ID を取得し、次に MongoDB データベースに接続し、bottles コレクション内のドリフトボトルを削除します。削除が成功すると、ボトル削除成功が返されます。

ステップ 3: フロントエンドインタラクションの実装

これで、完全なバックグラウンドロジックが実装されました。次に、いくつかのフロントエンド対話を実装する必要があります。プロジェクトのルートディレクトリに新しい public フォルダーを作成し、その中に index.html ファイルを作成し、次のコードを入力します。

<!DOCTYPE html>
<html>
<head>
  <title>Drifting Bottle</title>
  <meta charset="utf-8">
</head>
<body>
  <form id="throwForm">
    <input type="text" name="user" placeholder="Your name"><br>
    <textarea name="content" placeholder="Message"></textarea><br>
    <input type="submit" value="Throw">
  </form>
  <hr>
  <form id="pickForm">
    <input type="text" name="user" placeholder="Your name"><br>
    <input type="submit" value="Pick">
  </form>
  <hr>
  <ul id="bottleList"></ul>
  <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
  <script>
    $(function() {
      $('#throwForm').submit(function(event) {
        event.preventDefault();
        const form = $(this);
        $.get('/throw', form.serialize(), function(data) {
          alert(data);
        });
      });
      $('#pickForm').submit(function(event) {
        event.preventDefault();
        const form = $(this);
        $.get('/pick', form.serialize(), function(data) {
          if (typeof(data) === 'string') {
            alert(data);
          } else {
            $('#bottleList').append(`<li>${data.user}: ${data.content}</li>`);
          }
        });
      });
      $('#bottleList').on('click', 'li', function() {
        if (confirm('Are you sure to delete this bottle?')) {
          const id = $(this).attr('data-id');
          $.get(`/delete/${id}`, function(data) {
            alert(data);
            $(this).remove();
          }.bind(this));
        }
      });
    });
  </script>
</body>
</html>

ログイン後にコピー

This codeシンプルなユーザーインターフェイスは 2 つのフォームと 1 つのリストで構成されます。このうちフォームはドリフトボトルの投稿とドリフトボトルの検索に使用され、リストは見つかったドリフトボトルを表示するために使用されます。

次に、次のコードを app.js ファイルに追加して、静的ファイルディレクトリを public に設定します。コマンド次のコマンドを行に入力してアプリケーションを開始します。

app.use(express.static('public'));

ログイン後にコピー

http://localhost:3000

にアクセスして、ドリフトボトルアプリケーションを使用します。概要

この記事では、Node.js を使用してドリフトボトルアプリケーションを実装する方法を紹介します。バックエンドロジックとフロントエンドインタラクションを実装することで、基本的に使用可能なドリフトボトルシステムを確立しました。もちろん、これは非常に単純なドリフトボトルアプリケーションにすぎず、データ検証、例外処理、セキュリティなど、改善および最適化する必要がある領域が数多くあります。ただし、このアプリケーションは、Web アプリケーションにおける Node.js の強力な機能と洗練されたプログラミング方法を実証するには十分です。この記事が Node.js を学習したい読者に役立つことを願っています。

以上がNodejs はドリフトボトルを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1664

CakePHP チュートリアル

1423

Laravel チュートリアル

1321

PHP チュートリアル

1269

C# チュートリアル

1249

Related knowledge

Reactを使用したフロントエンド開発：利点とテクニック Apr 17, 2025 am 12:25 AM

Reactの利点は、その柔軟性と効率性であり、これは以下に反映されています。1）コンポーネントベースの設計により、コードの再利用性が向上します。 2）仮想DOMテクノロジーは、特に大量のデータ更新を処理する場合、パフォーマンスを最適化します。 3）リッチエコシステムは、多数のサードパーティライブラリとツールを提供します。 Reactがどのように機能し、例を使用するかを理解することにより、そのコアコンセプトとベストプラクティスをマスターして、効率的で保守可能なユーザーインターフェイスを構築できます。

Reactのエコシステム：ライブラリ、ツール、およびベストプラクティス Apr 18, 2025 am 12:23 AM

Reactエコシステムには、状態管理ライブラリ（Reduxなど）、ルーティングライブラリ（Reactrouterなど）、UIコンポーネントライブラリ（材料-UIなど）、テストツール（JESTなど）、およびビルディングツール（Webpackなど）が含まれます。これらのツールは、開発者がアプリケーションを効率的に開発および維持し、コードの品質と開発効率を向上させるのを支援するために協力します。

Reactの未来：Web開発におけるトレンドと革新 Apr 19, 2025 am 12:22 AM

Reactの未来は、究極のコンポーネント開発、パフォーマンスの最適化、および他のテクノロジースタックとの深い統合に焦点を当てます。 1）Reactは、コンポーネントの作成と管理をさらに簡素化し、究極のコンポーネント開発を促進します。 2）特に大規模なアプリケーションでは、パフォーマンスの最適化が焦点になります。 3）Reactは、開発エクスペリエンスを改善するために、GraphQLやTypeScriptなどのテクノロジーと深く統合されます。

React vs.バックエンドフレームワーク：比較 Apr 13, 2025 am 12:06 AM

Reactは、ユーザーインターフェイスを構築するためのフロントエンドフレームワークです。バックエンドフレームワークは、サーバー側のアプリケーションを構築するために使用されます。 Reactはコンポーネントで効率的なUIアップデートを提供し、バックエンドフレームワークは完全なバックエンドサービスソリューションを提供します。テクノロジースタックを選択するときは、プロジェクトの要件、チームのスキル、およびスケーラビリティを考慮する必要があります。

React：Web開発のためのJavaScriptライブラリの力 Apr 18, 2025 am 12:25 AM

Reactは、メタがユーザーインターフェイスを構築するために開発したJavaScriptライブラリであり、そのコアはコンポーネント開発と仮想DOMテクノロジーです。 1。コンポーネントと状態管理：Reactは、コンポーネント（関数またはクラス）とフック（UseStateなど）を介して状態を管理し、コードの再利用性とメンテナンスを改善します。 2。仮想DOMとパフォーマンスの最適化：仮想DOMを介して、実際のDOMを効率的に更新してパフォーマンスを向上させます。 3.ライフサイクルとフック：フック（使用効果など）は、関数コンポーネントがライフサイクルを管理し、副作用操作を実行できるようにします。 4。使用例：基本的なHelloworldコンポーネントから高度なグローバル州管理（USECONTEXTおよび

Reactの主要な機能を理解する：フロントエンドの視点 Apr 18, 2025 am 12:15 AM

Reactの主な機能には、コンポーネント思考、国家管理、仮想DOMが含まれます。 1）コンポーネント化のアイデアにより、UIを再利用可能な部分に分割して、コードの読みやすさと保守性を向上させることができます。 2）状態管理は、状態および小道具を通じて動的データを管理し、変更を変更しますUIの更新をトリガーします。 3）仮想DOM最適化パフォーマンス、メモリ内のDOMレプリカの最小操作の計算を通じてUIを更新します。

反応とフロントエンドの開発：包括的な概要 Apr 18, 2025 am 12:23 AM

Reactは、ユーザーインターフェイスを構築するためにFacebookが開発したJavaScriptライブラリです。 1. UI開発の効率とパフォーマンスを改善するために、コンポーネントおよび仮想DOMテクノロジーを採用しています。 2。Reactのコア概念には、コンポーネント化、状態管理（UseStateやUseEffectなど）、および仮想DOMの作業原則が含まれます。 3。実際のアプリケーションでは、基本的なコンポーネントレンダリングから高度な非同期データ処理へのReactサポートがサポートされます。 4.主要な属性の追加や誤ったステータスの更新を忘れるなどの一般的なエラーは、ReactDevtoolsとログを介してデバッグできます。 5.パフォーマンスの最適化とベストプラクティスには、React.Memo、コードセグメンテーション、コードの読み取り可能な状態を維持し、信頼性を維持することが含まれます

HTMLの反応の力：現代のWeb開発 Apr 18, 2025 am 12:22 AM

HTMLでのReactの適用により、コンポーネントと仮想DOMを通じてWeb開発の効率と柔軟性が向上します。 1）反応コンポーネントのアイデアは、UIを再利用可能なユニットに分解して、管理を簡素化します。 2）仮想DOM最適化パフォーマンス、拡散アルゴリズムを介してDOM操作を最小限に抑えます。 3）JSX構文により、JavaScriptでHTMLを作成して開発効率を向上させることができます。 4）UseStateフックを使用して状態を管理し、動的なコンテンツの更新を実現します。 5）最適化戦略には、React.memoとusecallbackを使用して不必要なレンダリングを減らすことが含まれます。

See all articles

Nodejs はドリフトボトルを実装します

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック