Nodejs implémente une bouteille de dérive

Node.js réalise la bouteille dérivante

La bouteille dérivante est une chose traditionnelle et romantique qui peut dériver avec le courant et dériver au loin. À l’ère du numérique, nous pouvons simuler ce type de jouets grâce à des moyens techniques. Cet article explique comment utiliser Node.js pour implémenter une application simple de bouteille à dérive.

Étape 1 : Créer un environnement de base

Tout d'abord, nous devons nous assurer que Node.js est installé sur l'ordinateur. Une fois l'installation terminée, entrez la commande suivante sur la ligne de commande pour vérifier si Node.js est installé avec succès :

node -v

Si l'installation réussit, affichez le numéro de version.

Ensuite, nous devons installer certaines bibliothèques dépendantes nécessaires, notamment le framework Express et la base de données MongoDB. Utilisez la commande suivante sur la ligne de commande pour installer :

npm install express mongodb --save

La commande npm est utilisée ici pour installer la bibliothèque dépendante, où le paramètre --save indique que le nom et le numéro de version de la bibliothèque dépendante seront enregistrés dans le fichier package.json du projet pour faciliter la collaboration en équipe et la maintenance du code. --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

Étape 2 : Implémenter la logique d'arrière-plan

Ensuite, nous devons écrire une logique d'arrière-plan, y compris les opérations de routage et de données. Créez un nouveau fichier app.js dans le répertoire racine du projet et entrez-y le contenu suivant :

rrreee

Ce code implémente une application Express de base, écoutant sur le port 3000 et se connectant à A Base de données MongoDB nommée bouteille. Une route racine / est également définie, renvoyant Hello, world!. 🎜🎜Ensuite, nous devons implémenter trois itinéraires : 🎜

1. /throw : utilisé pour placer les bouteilles dérivantes.
2. /pick : utilisé pour trouver des bouteilles dérivées.
3. /delete/:id : utilisé pour supprimer les bouteilles dérivantes.

🎜Voyons d'abord comment mettre en œuvre le premier itinéraire. Ajoutez le code suivant au fichier app.js : 🎜rrreee🎜Ce code est utilisé pour déposer la bouteille à dérive. Il obtient d'abord le nom d'utilisateur et le contenu dans le paramètre de requête, puis l'assemble en un. Objet JSON. Connectez-vous ensuite à la base de données MongoDB et insérez l'objet dans la collection bottles. Si l'insertion réussit, Throw Bottle Success est renvoyé. 🎜🎜Ensuite, nous devons mettre en œuvre la deuxième voie. Ajoutez le code suivant au fichier app.js : 🎜rrreee🎜Ce code est utilisé pour trouver des bouteilles dérivantes. Tout d'abord, récupérez le nom d'utilisateur dans le paramètre de requête, puis connectez-vous à la base de données MongoDB et recherchez la bouteille à la dérive qui correspond au nom d'utilisateur dans la collection bottles. Si une bouteille à dérive est trouvée, supprimez-la de la base de données et renvoyez le résultat au client. 🎜🎜Enfin, nous devons mettre en œuvre la troisième voie. Ajoutez le code suivant au fichier app.js : 🎜rrreee🎜Ce code est utilisé pour supprimer la bouteille à dérive. Tout d'abord, obtenez l'ID de la bouteille dérivante dans les paramètres de routage, puis connectez-vous à la base de données MongoDB et supprimez la bouteille dérivante dans la collection bottles. Si la suppression réussit, Supprimer la bouteille avec succès est renvoyé. 🎜🎜Étape 3 : Implémenter l'interaction frontale🎜🎜Maintenant, nous avons implémenté une logique d'arrière-plan complète. Ensuite, nous devons implémenter certaines interactions frontales. Créez un nouveau dossier public dans le répertoire racine du projet, créez-y un fichier index.html, puis entrez le code suivant : 🎜rrreee🎜Ce code implémente un Interface utilisateur simple, comprenant deux formulaires et une liste. Parmi eux, le formulaire est utilisé pour soumettre des bouteilles dérivées et trouver des bouteilles dérivées, et la liste est utilisée pour afficher les bouteilles dérivées trouvées. 🎜🎜Ensuite, ajoutez le code suivant dans le fichier app.js et définissez le répertoire du fichier statique sur public : 🎜rrreee🎜Enfin, entrez la commande suivante dans la ligne de commande pour démarrer l'application : 🎜rrreee🎜Visitez http://localhost:3000 pour utiliser l'application Drift Bottle. 🎜🎜Résumé🎜🎜Cet article présente comment utiliser Node.js pour implémenter une application de bouteille à dérive. En implémentant une logique back-end et une interaction front-end, nous avons établi un système de bouteilles dérivantes essentiellement utilisable. Bien sûr, il ne s'agit que d'une application très simple de bouteille dérivante, et de nombreux domaines doivent être améliorés et optimisés, tels que la vérification des données, la gestion des exceptions, la sécurité, etc. Mais cette application est suffisante pour démontrer les capacités puissantes et les méthodes de programmation élégantes de Node.js dans les applications Web. J'espère que cet article sera utile aux lecteurs qui souhaitent apprendre Node.js. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!