Nodejs는 드리프트 병을 구현합니다.-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

Nodejs는 드리프트 병을 구현합니다.

PHPz

May 13, 2023 pm 10:39 PM

Node.js는 드리프트 병을 실현합니다

드리프트 병은 물살과 함께 표류하고 멀리 표류할 수 있는 전통적이고 낭만적인 것입니다. 디지털 시대에는 기술적 수단을 통해 이런 종류의 장난감을 시뮬레이션할 수 있습니다. 이 기사에서는 Node.js를 사용하여 간단한 드리프트 병 애플리케이션을 구현하는 방법을 소개합니다.

1단계: 기본 환경 구축

먼저 컴퓨터에 Node.js가 설치되어 있는지 확인해야 합니다. 설치가 완료되면 명령줄에 다음 명령을 입력하여 Node.js가 성공적으로 설치되었는지 확인합니다.

node -v

로그인 후 복사

설치에 성공하면 버전 번호를 출력합니다.

다음으로 Express 프레임워크 및 MongoDB 데이터베이스를 포함하여 필요한 일부 종속 라이브러리를 설치해야 합니다. 설치하려면 명령줄에서 다음 명령을 사용하세요.

npm install express mongodb --save

로그인 후 복사

여기서 npm 명령은 종속 라이브러리를 설치하는 데 사용됩니다. 여기서 --save 매개변수는 종속 라이브러리의 이름과 버전 번호를 나타냅니다. 팀 협업 및 코드 유지 관리를 용이하게 하기 위해 프로젝트의 package.json 파일에 기록됩니다. --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!。

接下来，我们需要实现三个路由：

/throw ：用于投放漂流瓶。
/pick ：用于寻找漂流瓶。
/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

2단계: 배경 논리 구현

다음으로 라우팅 및 데이터 작업을 포함한 몇 가지 배경 논리를 작성해야 합니다. 프로젝트의 루트 디렉터리에 새 app.js 파일을 만들고 그 안에 다음 콘텐츠를 입력합니다.

rrreee

이 코드는 포트 3000에서 수신 대기하고 A에 연결하는 기본 Express 애플리케이션을 구현합니다. bottle이라는 MongoDB 데이터베이스입니다. 루트 경로 /도 정의되어 Hello, world!를 반환합니다. 🎜🎜다음으로 세 가지 경로를 구현해야 합니다. 🎜

/throw: 드리프트 병을 배치하는 데 사용됩니다.
/pick: 드리프트 병을 찾는 데 사용됩니다.
/delete/:id: 드리프트 병을 삭제하는 데 사용됩니다.

🎜먼저 첫 번째 경로를 구현하는 방법을 살펴보겠습니다. app.js 파일에 다음 코드를 추가합니다. 🎜rrreee🎜이 코드는 드리프트 병을 떨어뜨리는 데 사용됩니다. 먼저 쿼리 매개변수에서 사용자 이름과 콘텐츠를 얻은 다음 이를 JSON 객체. 그런 다음 MongoDB 데이터베이스에 연결하고 bottles 컬렉션에 개체를 삽입합니다. 삽입에 성공하면 병 투척 성공을 반환합니다. 🎜🎜다음으로 두 번째 경로를 구현해야 합니다. app.js 파일에 다음 코드를 추가하세요. 🎜rrreee🎜이 코드는 드리프트 병을 찾는 데 사용됩니다. 먼저 쿼리 매개변수에서 사용자 이름을 가져온 다음 MongoDB 데이터베이스에 연결하고 bottles 컬렉션에서 사용자 이름과 일치하는 드리프트 병을 찾습니다. 드리프트 병이 발견되면 데이터베이스에서 삭제하고 결과를 클라이언트에 반환합니다. 🎜🎜마지막으로 세 번째 경로를 구현해야 합니다. app.js 파일에 다음 코드를 추가합니다. 🎜rrreee🎜이 코드는 드리프트 병을 삭제하는 데 사용됩니다. 먼저 라우팅 매개변수에서 드리프트 병 ID를 얻은 다음 MongoDB 데이터베이스에 연결하고 bottles 컬렉션에서 드리프트 병을 삭제합니다. 삭제에 성공하면 병 삭제 성공이 반환됩니다. 🎜🎜3단계: 프런트 엔드 상호 작용 구현🎜🎜이제 완전한 배경 논리를 구현했습니다. 다음으로 몇 가지 프런트 엔드 상호 작용을 구현해야 합니다. 프로젝트의 루트 디렉터리에 새 public 폴더를 만들고 여기에 index.html 파일을 만든 후 다음 코드를 입력하세요. 🎜rrreee🎜이 코드는 두 가지 양식과 목록을 포함한 간단한 사용자 인터페이스. 그 중 드리프트병 제출 및 드리프트병 찾기를 위한 양식을 사용하며, 발견된 드리프트병을 표시하기 위해 리스트를 사용합니다. 🎜🎜다음으로 app.js 파일에 다음 코드를 추가하고 정적 파일 디렉터리를 public으로 설정합니다. 🎜rrreee🎜마지막으로 명령줄에 다음 명령을 입력합니다. 애플리케이션 시작하기: 🎜rrreee🎜 드리프트 보틀 애플리케이션을 사용하려면 http://localhost:3000을 방문하세요. 🎜🎜요약🎜🎜이 글에서는 Node.js를 사용하여 드리프트 병 애플리케이션을 구현하는 방법을 소개합니다. 백엔드 로직과 프론트엔드 상호작용을 구현하여 기본적으로 사용 가능한 표류병 시스템을 구축했습니다. 물론 이것은 아주 단순한 드리프트병 애플리케이션일 뿐이고, 데이터 검증, 예외 처리, 보안 등 개선하고 최적화해야 할 부분이 많습니다. 하지만 이 애플리케이션은 웹 애플리케이션에서 Node.js의 강력한 기능과 우아한 프로그래밍 방법을 보여주기에 충분합니다. 이 기사가 Node.js를 배우고자 하는 독자에게 도움이 되기를 바랍니다. 🎜

위 내용은 Nodejs는 드리프트 병을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.