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

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文件，然后输入以下代码：

   Drifting Bottle

로그인 후 복사

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

接下来，在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 중국어 웹사이트의 기타 관련 기사를 참조하세요!