Nodejs melaksanakan botol hanyut

Node.js menyedari botol hanyut

Botol hanyut adalah perkara tradisional dan romantis yang boleh hanyut dengan arus dan hanyut jauh. Dalam era digital, kita boleh mensimulasikan mainan jenis ini melalui cara teknikal. Artikel ini akan memperkenalkan cara menggunakan Node.js untuk melaksanakan aplikasi botol drift yang mudah.

Langkah 1: Bina persekitaran asas

Pertama, kita perlu memastikan Node.js dipasang pada komputer. Selepas pemasangan selesai, masukkan arahan berikut pada baris arahan untuk menyemak sama ada Node.js berjaya dipasang:

node -v

Jika pemasangan berjaya, keluarkan nombor versi.

Seterusnya, kita perlu memasang beberapa perpustakaan bergantung yang diperlukan, termasuk rangka kerja Express dan pangkalan data MongoDB. Gunakan arahan berikut pada baris arahan untuk memasang:

npm install express mongodb --save

Arahan npm digunakan di sini untuk memasang perpustakaan bergantung, di mana parameter --save menunjukkan bahawa nama dan nombor versi perpustakaan bergantung akan direkodkan dalam fail package.json projek, untuk memudahkan kerjasama pasukan dan penyelenggaraan kod.

Langkah 2: Laksanakan logik latar belakang

Seterusnya, kita perlu menulis beberapa logik latar belakang, termasuk penghalaan dan operasi data. Cipta fail app.js baharu dalam direktori akar projek dan masukkan kandungan berikut di dalamnya:

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

Kod ini melaksanakan aplikasi Express asas, mendengar pada port 3000 dan menyambung ke pelayan bernama bottle Pangkalan data MongoDB. Laluan akar / juga ditakrifkan, mengembalikan Hello, world!.

Seterusnya, kita perlu melaksanakan tiga laluan:

1. /throw: untuk meletakkan botol hanyut.
2. /pick: Digunakan untuk mencari botol hanyut.
3. /delete/:id: digunakan untuk memadam botol hanyut.

Mari kita lihat dahulu cara melaksanakan laluan pertama. Tambahkan kod berikut dalam fail 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();
    });
  });
});

Kod ini digunakan untuk menggugurkan botol drift itu mula-mula mendapatkan nama pengguna dan kandungan dalam parameter pertanyaan, dan kemudian memasangnya ke dalam objek JSON. Kemudian sambung ke pangkalan data MongoDB dan masukkan objek dalam koleksi bottles. Jika sisipan berjaya, kembalikan Throw bottle success.

Seterusnya, kita perlu melaksanakan laluan kedua. Tambahkan kod berikut dalam fail 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();
      });
    });
  });
});

Kod ini digunakan untuk mencari botol hanyut. Mula-mula dapatkan nama pengguna dalam parameter pertanyaan, kemudian sambungkan ke pangkalan data MongoDB, dan cari botol drift yang sepadan dengan nama pengguna dalam koleksi bottles. Jika botol drift ditemui, padamkannya daripada pangkalan data dan kembalikan hasilnya kepada pelanggan.

Akhir sekali, kita perlu melaksanakan laluan ketiga. Tambahkan kod berikut dalam fail 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();
    });
  });
});

Kod ini digunakan untuk memadamkan botol drift. Mula-mula dapatkan ID botol drift dalam parameter penghalaan, kemudian sambungkan ke pangkalan data MongoDB dan padamkan botol drift dalam koleksi bottles. Jika pemadaman berjaya, kembalikan Delete bottle success.

Langkah 3: Laksanakan interaksi bahagian hadapan

Kini, kami telah melaksanakan logik latar belakang yang lengkap. Seterusnya, kita perlu melaksanakan beberapa interaksi bahagian hadapan. Cipta folder public baharu dalam direktori akar projek, buat fail index.html di dalamnya, dan kemudian masukkan kod berikut:

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

Kod ini melaksanakan antara muka pengguna yang mudah, termasuk dua Borang dan satu senarai. Antaranya, borang digunakan untuk menghantar botol drift dan mencari botol drift, dan senarai digunakan untuk memaparkan botol drift yang ditemui.

Seterusnya, tambah kod berikut dalam fail app.js untuk menetapkan direktori fail statik kepada public:

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

Akhir sekali, masukkan arahan berikut dalam baris arahan untuk memulakan aplikasi :

node app.js

Lawatihttp://localhost:3000 untuk menggunakan Apl Botol.

Ringkasan

Artikel ini memperkenalkan cara menggunakan Node.js untuk melaksanakan aplikasi botol drift. Dengan melaksanakan logik belakang dan interaksi hadapan, kami mewujudkan sistem botol hanyut yang pada asasnya boleh digunakan. Sudah tentu, ini hanyalah aplikasi botol hanyut yang sangat mudah, dan terdapat banyak bidang yang perlu diperbaiki dan dioptimumkan, seperti pengesahan data, pengendalian pengecualian, keselamatan, dll. Tetapi aplikasi ini sudah cukup untuk menunjukkan keupayaan berkuasa dan kaedah pengaturcaraan elegan Node.js dalam aplikasi web Saya harap artikel ini akan membantu pembaca yang ingin mempelajari Node.js.

Atas ialah kandungan terperinci Nodejs melaksanakan botol hanyut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!