Nodejs implementiert Drift Bottle

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

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

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}`);
});

这段代码实现了一个最基础的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();
    });
  });
});

这段代码用于投放漂流瓶，首先获取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();
      });
    });
  });
});

这段代码用于寻找漂流瓶。首先获取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();
    });
  });
});

这段代码用于删除漂流瓶。首先获取路由参数中的漂流瓶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>

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

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

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

最后，在命令行中输入以下命令启动应用：

node app.js

访问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!