Heim Web-Frontend Front-End-Fragen und Antworten Nodejs implementiert Drift Bottle

Nodejs implementiert Drift Bottle

May 13, 2023 pm 10:39 PM

Node.js erkennt die Driftflasche

Die Driftflasche ist eine traditionelle und romantische Sache, die mit der Strömung treiben und weit weg treiben kann. Im digitalen Zeitalter können wir solche Spielzeuge mit technischen Mitteln simulieren. In diesem Artikel wird erläutert, wie Sie mit Node.js eine einfache Driftflaschenanwendung implementieren.

Schritt 1: Erstellen Sie eine Basisumgebung

Zunächst müssen wir sicherstellen, dass Node.js auf dem Computer installiert ist. Geben Sie nach Abschluss der Installation den folgenden Befehl in die Befehlszeile ein, um zu überprüfen, ob Node.js erfolgreich installiert wurde:

node -v
Nach dem Login kopieren

Wenn die Installation erfolgreich ist, geben Sie die Versionsnummer aus.

Als nächstes müssen wir einige notwendige abhängige Bibliotheken installieren, darunter das Express-Framework und die MongoDB-Datenbank. Verwenden Sie zum Installieren den folgenden Befehl in der Befehlszeile:

npm install express mongodb --save
Nach dem Login kopieren

Der Befehl npm wird hier verwendet, um die abhängige Bibliothek zu installieren, wobei der Parameter --save den Namen und die Versionsnummer der abhängigen Bibliothek angibt wird in der Datei package.json des Projekts aufgezeichnet, um die Zusammenarbeit im Team und die Codepflege zu erleichtern. --save参数表示将依赖库的名称和版本号记录在项目的package.json文件中,方便团队协作和代码维护。

第二步:实现后台逻辑

接下来,我们需要编写一些后台逻辑,包括路由和数据操作等。在项目的根目录下新建一个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}`);
});
Nach dem Login kopieren

这段代码实现了一个最基础的Express应用,监听在3000端口上,同时连接到名为bottle的MongoDB数据库。还定义了一个根路由/,返回Hello, world!

接下来,我们需要实现三个路由:

  1. /throw :用于投放漂流瓶。
  2. /pick :用于寻找漂流瓶。
  3. /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();
    });
  });
});
Nach dem Login kopieren

这段代码用于投放漂流瓶,首先获取query参数中的用户名和内容,然后拼装成一个JSON对象。接着连接到MongoDB数据库,并在bottles集合中插入该对象。如果插入成功,返回Throw bottle success

接下来,我们需要实现第二个路由。在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();
      });
    });
  });
});
Nach dem Login kopieren

这段代码用于寻找漂流瓶。首先获取query参数中的用户名,然后连接到MongoDB数据库,在bottles集合中查找用户名匹配的漂流瓶。如果找到了一个漂流瓶,将它从数据库中删除,并将结果返回给客户端。

最后,我们需要实现第三个路由。在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();
    });
  });
});
Nach dem Login kopieren

这段代码用于删除漂流瓶。首先获取路由参数中的漂流瓶ID,然后连接到MongoDB数据库,在bottles集合中删除该漂流瓶。如果删除成功,返回Delete bottle success

第三步:实现前端交互

现在,我们已经实现了一个完整的后台逻辑。接下来,我们需要实现一些前端交互。在项目的根目录下新建一个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>
Nach dem Login kopieren

这段代码实现了一个简单的用户界面,包括两个表单和一个列表。其中,表单用于提交漂流瓶和寻找漂流瓶,列表用于显示寻找到的漂流瓶。

接下来,在app.js文件中添加以下代码,将静态文件目录设置为public

app.use(express.static('public'));
Nach dem Login kopieren

最后,在命令行中输入以下命令启动应用:

node app.js
Nach dem Login kopieren

访问http://localhost:3000

Schritt 2: Hintergrundlogik implementieren

Als nächstes müssen wir einige Hintergrundlogik schreiben, einschließlich Routing und Datenoperationen. Erstellen Sie eine neue app.js-Datei im Stammverzeichnis des Projekts und geben Sie den folgenden Inhalt ein:

rrreee

Dieser Code implementiert eine grundlegende Express-Anwendung, die Port 3000 überwacht und eine Verbindung zu A herstellt MongoDB-Datenbank mit dem Namen bottle. Außerdem ist eine Root-Route / definiert, die Hello, world! zurückgibt. 🎜🎜Als nächstes müssen wir drei Routen implementieren: 🎜
  1. /throw: Wird zum Platzieren von Driftflaschen verwendet.
  2. /pick: wird verwendet, um Treibstoffflaschen zu finden.
  3. /delete/:id: wird zum Löschen von Driftflaschen verwendet.
🎜Schauen wir uns zunächst an, wie die erste Route implementiert wird. Fügen Sie der Datei app.js den folgenden Code hinzu: 🎜rrreee🎜Dieser Code wird zum Löschen der Driftflasche verwendet. Zuerst werden der Benutzername und der Inhalt im Abfrageparameter abgerufen und dann zu einem zusammengesetzt JSON-Objekt. Stellen Sie dann eine Verbindung zur MongoDB-Datenbank her und fügen Sie das Objekt in die bottles-Sammlung ein. Wenn das Einfügen erfolgreich ist, wird Flaschenwurf erfolgreich zurückgegeben. 🎜🎜Als nächstes müssen wir die zweite Route implementieren. Fügen Sie den folgenden Code zur Datei app.js hinzu: 🎜rrreee🎜Dieser Code wird verwendet, um Driftflaschen zu finden. Rufen Sie zunächst den Benutzernamen im Abfrageparameter ab, stellen Sie dann eine Verbindung zur MongoDB-Datenbank her und suchen Sie die Driftflasche, die dem Benutzernamen in der bottles-Sammlung entspricht. Wenn eine Driftflasche gefunden wird, löschen Sie diese aus der Datenbank und geben Sie das Ergebnis an den Client zurück. 🎜🎜Schließlich müssen wir die dritte Route umsetzen. Fügen Sie den folgenden Code zur Datei app.js hinzu: 🎜rrreee🎜Dieser Code wird zum Löschen der Driftflasche verwendet. Rufen Sie zunächst die Driftflaschen-ID in den Routing-Parametern ab, stellen Sie dann eine Verbindung zur MongoDB-Datenbank her und löschen Sie die Driftflasche in der bottles-Sammlung. Wenn der Löschvorgang erfolgreich war, wird Flasche erfolgreich löschen zurückgegeben. 🎜🎜Schritt 3: Front-End-Interaktion implementieren🎜🎜Jetzt haben wir eine vollständige Hintergrundlogik implementiert. Als nächstes müssen wir einige Front-End-Interaktionen implementieren. Erstellen Sie einen neuen Ordner public im Stammverzeichnis des Projekts, erstellen Sie darin eine Datei index.html und geben Sie dann den folgenden Code ein: 🎜rrreee🎜Dieser Code implementiert a Einfache Benutzeroberfläche, einschließlich zwei Formularen und einer Liste. Unter anderem wird das Formular verwendet, um Treibstoffflaschen einzureichen und Treibstoffflaschen zu finden, und die Liste wird verwendet, um die gefundenen Treibstoffflaschen anzuzeigen. 🎜🎜Fügen Sie als Nächstes den folgenden Code in die Datei app.js ein und setzen Sie das statische Dateiverzeichnis auf public: 🎜rrreee🎜Geben Sie abschließend den folgenden Befehl in die Befehlszeile ein So starten Sie die Anwendung: 🎜rrreee🎜Besuchen Sie http://localhost:3000, um die Driftflaschenanwendung zu verwenden. 🎜🎜Zusammenfassung🎜🎜In diesem Artikel wird erläutert, wie Sie mit Node.js eine Driftflaschenanwendung implementieren. Durch die Implementierung von Back-End-Logik und Front-End-Interaktion haben wir ein grundsätzlich verwendbares Drifting-Bottle-System etabliert. Natürlich handelt es sich hier nur um eine sehr einfache Drift-Flaschen-Anwendung, und es gibt viele Bereiche, die verbessert und optimiert werden müssen, z. B. Datenüberprüfung, Ausnahmebehandlung, Sicherheit usw. Aber diese Anwendung reicht aus, um die leistungsstarken Funktionen und eleganten Programmiermethoden von Node.js in Webanwendungen zu demonstrieren. Ich hoffe, dass dieser Artikel für Leser hilfreich ist, die Node.js lernen möchten. 🎜

Das obige ist der detaillierte Inhalt vonNodejs implementiert Drift Bottle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen? Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen? Mar 19, 2025 pm 03:58 PM

In dem Artikel wird die Verwendung von UseEffect in React, einen Haken für die Verwaltung von Nebenwirkungen wie Datenabrufen und DOM -Manipulation in funktionellen Komponenten erläutert. Es erklärt die Verwendung, gemeinsame Nebenwirkungen und Reinigung, um Probleme wie Speicherlecks zu verhindern.

Erklären Sie das Konzept des faulen Ladens. Erklären Sie das Konzept des faulen Ladens. Mar 13, 2025 pm 07:47 PM

Lazy Ladeverzögerung des Ladens von Inhalten bis zur Bedarf, Verbesserung der Webleistung und Benutzererfahrung durch Reduzierung der anfänglichen Ladezeiten und des Serverlasts.

Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben? Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben? Mar 18, 2025 pm 01:44 PM

Funktionen höherer Ordnung in JavaScript verbessern die Übersichtlichkeit, Wiederverwendbarkeit, Modularität und Leistung von Code durch Abstraktion, gemeinsame Muster und Optimierungstechniken.

Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile? Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile? Mar 18, 2025 pm 01:45 PM

In dem Artikel wird das Currying in JavaScript, einer Technik, die Multi-Argument-Funktionen in Einzelargument-Funktionssequenzen verwandelt. Es untersucht die Implementierung von Currying, Vorteile wie teilweise Anwendungen und praktische Verwendungen, Verbesserung des Code -Lesens

Wie funktioniert der React -Versöhnungsalgorithmus? Wie funktioniert der React -Versöhnungsalgorithmus? Mar 18, 2025 pm 01:58 PM

Der Artikel erläutert den Versöhnungsalgorithmus von React, der das DOM effizient aktualisiert, indem virtuelle DOM -Bäume verglichen werden. Es werden Leistungsvorteile, Optimierungstechniken und Auswirkungen auf die Benutzererfahrung erörtert.

Wie verhindern Sie das Standardverhalten bei Ereignishandlern? Wie verhindern Sie das Standardverhalten bei Ereignishandlern? Mar 19, 2025 pm 04:10 PM

In Artikeln werden das Standardverhalten bei Ereignishandlern mithilfe von PURDDEFAULT () -Methoden, seinen Vorteilen wie verbesserten Benutzererfahrungen und potenziellen Problemen wie Barrierefreiheitsproblemen verhindern.

Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen? Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen? Mar 19, 2025 pm 03:59 PM

Der Artikel erläutert den Usecontext in React, was das staatliche Management durch Vermeidung von Prop -Bohrungen vereinfacht. Es wird von Vorteilen wie zentraler Staat und Leistungsverbesserungen durch reduzierte Neulehre erörtert.

Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten? Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten? Mar 19, 2025 pm 04:16 PM

Der Artikel erörtert die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten bei React, wobei sich auf Aspekte wie Vorhersehbarkeit, Leistung und Anwendungsfälle konzentriert. Es rät zu Faktoren, die bei der Auswahl zwischen ihnen berücksichtigt werden müssen.

See all articles