Home Web Front-end Front-end Q&A Nodejs implements drift bottle

Nodejs implements drift bottle

May 13, 2023 pm 10:39 PM

Node.js realizes the drift bottle

The drift bottle is a traditional and romantic thing that can drift with the current and drift far away. In the digital age, we can simulate this kind of toys through technical means. This article will introduce how to use Node.js to implement a simple drift bottle application.

Step 1: Build a basic environment

First, we need to ensure that Node.js is installed on the computer. After the installation is complete, enter the following command on the command line to check whether Node.js is installed successfully:

node -v
Copy after login

If the installation is successful, output the version number.

Next, we need to install some necessary dependent libraries, including the Express framework and MongoDB database. Use the following command on the command line to install:

npm install express mongodb --save
Copy after login

The npm command is used here to install the dependent library, where the --save parameter indicates that the name and version number of the dependent library will be recorded in the project package.json file to facilitate team collaboration and code maintenance.

Step 2: Implement background logic

Next, we need to write some background logic, including routing and data operations. Create a new app.js file in the root directory of the project, and enter the following content in it:

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

This code implements a basic Express application, listening on port 3000. Also connect to the MongoDB database named bottle. A root route / is also defined, returning Hello, world!.

Next, we need to implement three routes:

  1. /throw: used to drop drift bottles.
  2. /pick: Used to find drift bottles.
  3. /delete/:id: used to delete drift bottles.

Let’s first look at how to implement the first route. Add the following code to the app.js file:

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();
    });
  });
});
Copy after login

This code is used to drop the drift bottle. It first obtains the user name and content in the query parameter, and then assembles it into a JSON object. Then connect to the MongoDB database and insert the object in the bottles collection. If the insertion is successful, Throw bottle success is returned.

Next, we need to implement the second route. Add the following code to the app.js file:

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();
      });
    });
  });
});
Copy after login

This code is used to find drift bottles. First, get the username in the query parameter, then connect to the MongoDB database, and find the drifting bottles that match the username in the bottles collection. If a drift bottle is found, delete it from the database and return the result to the client.

Finally, we need to implement the third route. Add the following code to the app.js file:

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();
    });
  });
});
Copy after login

This code is used to delete the drift bottle. First get the drift bottle ID in the routing parameters, then connect to the MongoDB database, and delete the drift bottle in the bottles collection. If the deletion is successful, Delete bottle success is returned.

Step 3: Implement front-end interaction

Now, we have implemented a complete background logic. Next, we need to implement some front-end interactions. Create a new public folder in the root directory of the project, create a index.html file in it, and then enter the following code:

<!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>
Copy after login

This code implements A simple user interface consists of two forms and a list. Among them, the form is used to submit drift bottles and find drift bottles, and the list is used to display the found drift bottles.

Next, add the following code in the app.js file to set the static file directory to public:

app.use(express.static('public'));
Copy after login

Finally, in the command Enter the following command in the line to start the application:

node app.js
Copy after login

Visit http://localhost:3000 to use the drift bottle application.

Summary

This article introduces how to use Node.js to implement a drift bottle application. By implementing back-end logic and front-end interaction, we established a basically usable drifting bottle system. Of course, this is just a very simple drift bottle application, and there are many areas that need to be improved and optimized, such as data verification, exception handling, security, etc. But this application is enough to demonstrate the powerful capabilities and elegant programming methods of Node.js in web applications. I hope this article can be helpful to readers who want to learn Node.js.

The above is the detailed content of Nodejs implements drift bottle. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

React's Role in HTML: Enhancing User Experience React's Role in HTML: Enhancing User Experience Apr 09, 2025 am 12:11 AM

React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.

What are the limitations of Vue 2's reactivity system with regard to array and object changes? What are the limitations of Vue 2's reactivity system with regard to array and object changes? Mar 25, 2025 pm 02:07 PM

Vue 2's reactivity system struggles with direct array index setting, length modification, and object property addition/deletion. Developers can use Vue's mutation methods and Vue.set() to ensure reactivity.

React Components: Creating Reusable Elements in HTML React Components: Creating Reusable Elements in HTML Apr 08, 2025 pm 05:53 PM

React components can be defined by functions or classes, encapsulating UI logic and accepting input data through props. 1) Define components: Use functions or classes to return React elements. 2) Rendering component: React calls render method or executes function component. 3) Multiplexing components: pass data through props to build a complex UI. The lifecycle approach of components allows logic to be executed at different stages, improving development efficiency and code maintainability.

What are the benefits of using TypeScript with React? What are the benefits of using TypeScript with React? Mar 27, 2025 pm 05:43 PM

TypeScript enhances React development by providing type safety, improving code quality, and offering better IDE support, thus reducing errors and improving maintainability.

React and the Frontend: Building Interactive Experiences React and the Frontend: Building Interactive Experiences Apr 11, 2025 am 12:02 AM

React is the preferred tool for building interactive front-end experiences. 1) React simplifies UI development through componentization and virtual DOM. 2) Components are divided into function components and class components. Function components are simpler and class components provide more life cycle methods. 3) The working principle of React relies on virtual DOM and reconciliation algorithm to improve performance. 4) State management uses useState or this.state, and life cycle methods such as componentDidMount are used for specific logic. 5) Basic usage includes creating components and managing state, and advanced usage involves custom hooks and performance optimization. 6) Common errors include improper status updates and performance issues, debugging skills include using ReactDevTools and Excellent

How can you use useReducer for complex state management? How can you use useReducer for complex state management? Mar 26, 2025 pm 06:29 PM

The article explains using useReducer for complex state management in React, detailing its benefits over useState and how to integrate it with useEffect for side effects.

What are functional components in Vue.js? When are they useful? What are functional components in Vue.js? When are they useful? Mar 25, 2025 pm 01:54 PM

Functional components in Vue.js are stateless, lightweight, and lack lifecycle hooks, ideal for rendering pure data and optimizing performance. They differ from stateful components by not having state or reactivity, using render functions directly, a

How do you ensure that your React components are accessible? What tools can you use? How do you ensure that your React components are accessible? What tools can you use? Mar 27, 2025 pm 05:41 PM

The article discusses strategies and tools for ensuring React components are accessible, focusing on semantic HTML, ARIA attributes, keyboard navigation, and color contrast. It recommends using tools like eslint-plugin-jsx-a11y and axe-core for testi

See all articles