Node.js를 사용하여 간단한 소셜 미디어 플랫폼을 구축하는 방법-JS 튜토리얼-php.cn

Node.js를 사용하여 간단한 소셜 미디어 플랫폼을 구축하는 방법

소셜 미디어 플랫폼은 오늘날 가장 인기 있고 인기 있는 애플리케이션 중 하나가 되었으며 Node.js는 웹 개발에 널리 사용되는 JavaScript 런타임으로 Node.js를 사용하면 매우 효율적이고 적응성이 뛰어납니다. 소셜 미디어 플랫폼 구축을 위한 좋은 선택이 됩니다. 이 기사에서는 Node.js를 사용하여 간단한 소셜 미디어 플랫폼을 구축하는 방법을 알아봅니다.

Node.js 설치

먼저 컴퓨터에 Node.js가 설치되어 있는지 확인하세요. 다음 명령을 사용하여 Node.js가 설치되어 있는지 확인할 수 있습니다.

node -v

로그인 후 복사

Node.js가 설치되어 있으면 현재 활성화된 버전 번호가 출력됩니다. Node.js를 설치하지 않은 경우 컴퓨터 유형, 운영 체제 및 운영 환경에 따라 최신 버전의 Node.js를 설치하십시오.

프로젝트 초기화 중

프로젝트 생성을 시작합니다. 먼저 다음 명령을 사용하여 컴퓨터에 새 디렉터리를 만듭니다.

mkdir social-media-app
cd social-media-app

로그인 후 복사

이제 폴더에서 빈 Node.js 프로젝트를 초기화해야 합니다. 다음 명령을 실행하세요:

npm init

로그인 후 복사

이것은 새 프로젝트를 생성할 때 몇 가지 기본 설정을 안내합니다. 프롬프트를 따르고(npm init -y는 빠르게 수행할 수 있음) 마지막 단계에서 "main" 파일 이름이 프로젝트에서 사용하려는 항목 파일(일반적으로 "app.js")과 동일한지 확인하세요. .

{
  "name": "social-media-app",
  "version": "1.0.0",
  "description": "A simple social media app built with Node.js",
  "main": "app.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

로그인 후 복사

필요한 종속성 설치

다음으로 다음을 포함하여 몇 가지 필수 종속성을 설치해야 합니다.

Express: 이 경량 프레임워크를 사용하여 HTTP 라우팅 및 요청을 처리합니다.
Body-parser: POST를 처리할 때 요청의 경우 body-parser 미들웨어를 통해 요청 본문의 데이터를 구문 분석해야 합니다.
EJS: 이 템플릿 엔진을 사용하여 페이지를 렌더링합니다.

다음 명령을 통해 이러한 종속성을 설치합니다.

npm install express body-parser ejs --save

로그인 후 복사

설치 완료 마지막으로, package.json 파일에 다음 종속성이 나타나는 것을 볼 수 있습니다.

  "dependencies": {
    "body-parser": "^1.18.3",
    "ejs": "^2.6.1",
    "express": "^4.16.4"
  }

로그인 후 복사

애플리케이션 항목 파일 생성

필요한 종속성을 설치했으므로 이제 애플리케이션 항목 파일 "app .js"를 생성하겠습니다. 먼저 Express 및 Body-parser 모듈을 가져옵니다.

const express = require('express');
const bodyParser = require('body-parser');

로그인 후 복사

다음으로 Express 애플리케이션을 만듭니다.

const app = express();

로그인 후 복사

body-parser를 활성화하여 요청 본문의 데이터를 구문 분석합니다. 데이터를 JSON으로 구문 분석하기로 선택했기 때문에 app.js에 다음 줄을 추가합니다.

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

로그인 후 복사

EJS 템플릿 엔진을 사용하여 페이지를 렌더링합니다. 이 애플리케이션에서는 EJS를 사용하여 템플릿을 렌더링합니다. 이를 활성화하려면 app.js 파일에 다음 줄을 추가하세요:

app.set('view engine', 'ejs');

로그인 후 복사

마지막으로 app.js 파일에서 애플리케이션을 시작하세요:

app.listen(3000, () => console.log('Server running on port 3000!'))

로그인 후 복사

이 간단한 앱을 사용하면 모든 것이 올바르게 설정되었는지 확인할 수 있으며 이제 다음 작업을 수행할 수 있습니다. 터미널에 다음 명령을 입력하여 프로그램을 실행하세요.

node app.js

로그인 후 복사

브라우저에서 http://localhost:3000을 열면 "Cannot GET" 메시지가 표시됩니다.

경로 및 컨트롤러 추가

이제 애플리케이션에 경로와 해당 컨트롤러를 추가해 보겠습니다.

홈(모든 메시지 표시)
게시 페이지(새 메시지 게시)

(1) 홈 경로 및 컨트롤러

홈 페이지 요청을 처리하려면 /에 대한 경로를 만들어야 합니다. 길 . 또한 모든 메시지를 가져와 뷰에 전달하려면 컨트롤러가 필요합니다.

먼저 폴더를 만들고 파일 이름을 "controllers"로 지정한 다음 그 안에 "home.js"라는 파일을 만듭니다. 다음은 컨트롤러입니다.

// controllers/home.js

let messages = [
  { id: 1, title: 'First Message', body: 'This is the first message' },
  { id: 2, title: 'Second Message', body: 'This is the second message' }
];

exports.getHomePage = (req, res) => {
  res.render('pages/home', { messages });
};

로그인 후 복사

이 컨트롤러는 단순히 두 개의 메시지 배열을 home.ejs 템플릿에 전달하고 렌더링합니다.

이제 / 경로를 처리하기 위해 app.js 파일에 경로를 생성해야 합니다.

const homeController = require('./controllers/home');

app.get('/', homeController.getHomePage);

로그인 후 복사

경로는 컨트롤러/홈에서 정의한 getHomePage 함수를 가리키는 "GET" 요청에 대한 경로를 생성합니다. .js 파일.

(2) 게시 페이지 경로 및 컨트롤러

다음으로 게시 경로 및 해당 컨트롤러에 대한 파일을 만듭니다. "Controllers" 폴더에서 다음 내용으로 "publish.js"라는 파일을 만듭니다.

// controllers/publish.js

let messages = [
  { id: 1, title: 'First Message', body: 'This is the first message' },
  { id: 2, title: 'Second Message', body: 'This is the second message' }
];

exports.getPublishPage = (req, res) => {
  res.render('pages/publish');
};

exports.publishMessage = (req, res) => {
  const { title, body } = req.body;
  const id = messages.length + 1;
  messages.push({ id, title, body });

  res.redirect('/');
};

로그인 후 복사

이 컨트롤러는 두 가지 동작을 정의합니다.

getPublishPage: 이 함수는 제목과 본문이 포함된 페이지를 렌더링합니다. 사용자는 새 메시지를 제출할 수 있습니다.
publishMessage: 이 함수는 사용자가 제출한 데이터를 수신하고 "메시지" 배열에 새 메시지를 추가한 다음 홈페이지로 다시 리디렉션합니다.

app.js 파일에 이 경로를 생성해 보겠습니다.

const publishController = require('./controllers/publish');

app.get('/publish', publishController.getPublishPage);

app.post('/publish', publishController.publishMessage);

로그인 후 복사

이렇게 하면 /publish 경로에 대한 두 개의 경로, 즉 양식 렌더링을 위한 GET 요청 경로와 데이터 제출을 위한 POST 요청 경로가 생성됩니다.

Create views

두 개의 경로와 해당 컨트롤러를 만들었으므로 이제 뷰에서 해당 뷰를 만들어야 합니다.

"layouts"라는 폴더와 "pages"라는 폴더라는 두 개의 폴더를 만들어야 합니다.

헤더, 페이지 스크립트, 스타일시트 등 모든 웹사이트 페이지에 대한 공통 요소가 포함된 "main.ejs"라는 파일을 "layouts" 폴더에 만듭니다. 이 파일의 내용은 다음과 같습니다.

<!-- layouts/main.ejs -->

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Social Media App</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <header>
    <h1>Social Media App</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/publish">Publish</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <%- body %>
  </main>

  <footer>
    &copy; 2020 Social Media App
  </footer>
</body>
</html>

로그인 후 복사

在“pages”文件夹中，创建两个名为“home.ejs”和“publish.ejs”的文件。

以下是“home.ejs”文件的内容：

<!-- views/pages/home.ejs -->

<h2>Messages</h2>

<ul>
  <% messages.forEach(message => { %>
    <li><%= message.title %>: <%= message.body %></li>
  <% }) %>
</ul>

로그인 후 복사

这呈现了一个包含所有消息的列表。

以下是“publish.ejs”文件的内容：

<!-- views/pages/publish.ejs -->

<h2>Publish Message</h2>

<form method="POST" action="/publish">
  <label for="title">Title:</label>
  <input type="text" name="title" id="title"><br>

  <label for="body">Body:</label>
  <textarea name="body" id="body"></textarea><br>

  <button type="submit">Publish</button>
</form>

로그인 후 복사

这个文件包含一个表单，用户可以在其中输入新消息的标题和正文。

现在，该应用程序已准备就绪，可以运行。在终端中运行以下命令：