Node.js를 사용하여 간단한 블로그 리더를 구축하는 방법-JS 튜토리얼-php.cn

Node.js를 사용하여 간단한 블로그 리더를 구축하는 방법

WBOY

풀어 주다： 2023-11-08 20:36:32

원래의

1161명이 탐색했습니다.

Node.js를 사용하여 간단한 블로그 리더를 구축하는 방법

소개:
인터넷의 급속한 발전으로 블로그는 사람들이 자신의 삶을 기록하고 지식을 공유하는 중요한 방법 중 하나가 되었습니다. 간단한 블로그 리더를 구축하려면 Node.js와 일부 오픈 소스 기술을 사용하여 이 목표를 달성할 수 있습니다. 이 기사에서는 Node.js를 사용하여 간단한 블로그 리더를 구축하는 방법을 소개하고 특정 코드 예제를 제공합니다.

1단계: Node.js 및 관련 도구 설치
먼저 컴퓨터에 Node.js와 npm(Node.js 패키지 관리 도구)을 설치해야 합니다. Node.js 공식 홈페이지(https://nodejs.org/)에서 사용 중인 운영체제에 맞는 설치 패키지를 다운로드한 뒤, 안내에 따라 설치하세요. 설치가 완료되면 명령줄에 node -v 및 npm -v를 입력하여 Node.js와 npm이 성공적으로 설치되었는지 확인할 수 있습니다. node -v和npm -v来确认Node.js和npm是否已经成功安装。

步骤二：创建项目文件夹
在命令行中，切换到你希望创建项目的目录，并输入以下命令创建一个新的项目文件夹：

mkdir blog-reader

로그인 후 복사

然后，进入项目文件夹：

cd blog-reader

로그인 후 복사

步骤三：初始化项目
在项目文件夹中，输入以下命令初始化一个新的Node.js项目：

npm init -y

로그인 후 복사

这个命令将会创建一个package.json文件，用来管理项目的依赖和配置。

步骤四：安装Express.js
Express.js是一个流行的Node.js web应用框架，我们将使用它来构建博客阅读器的后端。在命令行中，输入以下命令安装Express.js：

npm install express

로그인 후 복사

步骤五：创建服务器
在项目文件夹中创建一个名为index.js的文件，并输入以下代码：

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});

로그인 후 복사

这段代码创建了一个Express应用，并在3000端口上监听请求。当访问根路径时，服务器将返回一个字符串"Hello World!"。

步骤六：运行服务器
在命令行中，输入以下命令运行服务器：

node index.js

로그인 후 복사

如果一切正常，你将会看到如下输出：

Server is listening on port 3000

로그인 후 복사

现在，你可以在浏览器中访问http://localhost:3000，将会看到"Hello World!"。

步骤七：安装EJS模板引擎
EJS（Embedded JavaScript）是一个简单的模板引擎，我们将使用它来渲染博客文章的视图。在命令行中，输入以下命令安装EJS：

npm install ejs

로그인 후 복사

步骤八：创建视图模板
在项目文件夹中创建一个名为views的文件夹，并在该文件夹中创建一个名为index.ejs的文件。输入以下代码作为视图模板：

<!DOCTYPE html>
<html>
<head>
  <title>博客阅读器</title>
</head>
<body>
  <h1>博客阅读器</h1>
  <ul>
    <% for(let i=0; i<articles.length; i++) { %>
      <li><a href="/articles/<%= articles[i].id %>"><%= articles[i].title %></a></li>
    <% } %>
  </ul>
</body>
</html>

로그인 후 복사

这段代码使用EJS的语法来渲染文章列表。我们将在后面的步骤中添加数据并渲染视图。

步骤九：添加路由和控制器
在index.js文件中添加以下代码：

const articles = [
  {
    id: 1,
    title: 'Node.js入门指南',
    content: '...'
  },
  {
    id: 2,
    title: 'Express.js实践指南',
    content: '...'
  }
];

app.get('/articles', (req, res) => {
  res.render('index', { articles });
});

app.get('/articles/:id', (req, res) => {
  const id = req.params.id;
  const article = articles.find(article => article.id === parseInt(id));

  if (article) {
    res.render('article', { article });
  } else {
    res.send('文章不存在');
  }
});

로그인 후 복사

这段代码定义了两个路由。当访问/articles路径时，服务器将渲染index.ejs视图，并将文章列表作为参数传递给视图。当访问/articles/:id路径时，服务器将查找具有指定ID的文章，并渲染article.ejs视图。

步骤十：创建文章视图模板
在views文件夹中创建一个名为article.ejs的文件，并输入以下代码作为文章视图模板：

<!DOCTYPE html>
<html>
<head>
  <title><%= article.title %></title>
</head>
<body>
  <h1><%= article.title %></h1>
  <article><%= article.content %></article>
</body>
</html>

로그인 후 복사

这段代码使用EJS的语法来渲染单篇文章的标题和内容。

步骤十一：运行服务器
在命令行中，输入以下命令重新运行服务器：

node index.js

로그인 후 복사

现在，你可以在浏览器中访问http://localhost:3000/articles

2단계: 프로젝트 폴더 만들기

명령줄에서 프로젝트를 만들 디렉터리로 전환하고 다음 명령을 입력하여 새 프로젝트 폴더를 만듭니다.
rrreee

그런 다음 프로젝트 폴더를 입력합니다. 🎜rrreee 🎜3단계: 프로젝트 초기화🎜프로젝트 폴더에서 다음 명령을 입력하여 새 Node.js 프로젝트를 초기화합니다.🎜rrreee🎜이 명령은 프로젝트 종속성과 구성을 관리하기 위한 package.json 파일을 생성합니다. 🎜🎜4단계: Express.js 설치🎜Express.js는 블로그 리더의 백엔드를 구축하는 데 사용할 널리 사용되는 Node.js 웹 애플리케이션 프레임워크입니다. 명령줄에 다음 명령을 입력하여 Express.js를 설치하세요. 🎜rrreee🎜5단계: 서버 만들기 🎜프로젝트 폴더에 index.js라는 파일을 만들고 다음 코드를 입력하세요. 🎜 rrreee🎜이 코드는 Express 애플리케이션을 생성하고 포트 3000에서 요청을 수신합니다. 루트 경로에 액세스하면 서버는 "Hello World!"라는 문자열을 반환합니다. 🎜🎜6단계: 서버 실행 🎜명령줄에 다음 명령을 입력하여 서버를 실행합니다. 🎜rrreee🎜모든 것이 순조롭게 진행되면 다음 출력이 표시됩니다. 🎜rrreee🎜이제 http에 액세스할 수 있습니다. 브라우저 ://localhost:3000에 "Hello World!"가 표시됩니다. 🎜🎜7단계: EJS 템플릿 엔진 설치🎜EJS(Embedded JavaScript)는 블로그 게시물의 보기를 렌더링하는 데 사용할 간단한 템플릿 엔진입니다. 명령줄에 다음 명령을 입력하여 EJS를 설치합니다. 🎜rrreee🎜8단계: 뷰 템플릿 생성 🎜프로젝트 폴더에 views라는 폴더를 생성하고 index라는 A 파일을 생성합니다. .ejs. 보기 템플릿으로 다음 코드를 입력하세요. 🎜rrreee🎜이 코드는 EJS 구문을 사용하여 기사 목록을 렌더링합니다. 이후 단계에서 데이터를 추가하고 뷰를 렌더링하겠습니다. 🎜🎜9단계: 경로 및 컨트롤러 추가 🎜index.js 파일에 다음 코드를 추가합니다. 🎜rrreee🎜이 코드는 두 개의 경로를 정의합니다. /articles 경로에 액세스하면 서버는 index.ejs 보기를 렌더링하고 기사 목록을 매개변수로 보기에 전달합니다. /articles/:id 경로에 액세스하면 서버는 지정된 ID를 가진 기사를 찾고 article.ejs 보기를 렌더링합니다. 🎜🎜10단계: 기사 보기 템플릿 만들기 🎜views 폴더에 article.ejs라는 파일을 만들고 기사 보기 템플릿으로 다음 코드를 입력합니다. 🎜rrreee 🎜This 코드는 EJS 구문을 사용하여 단일 기사의 제목과 내용을 렌더링합니다. 🎜🎜11단계: 서버 실행 🎜명령줄에 다음 명령을 입력하여 서버를 다시 실행하세요. 🎜rrreee🎜이제 http://localhost:3000/articles를 방문할 수 있습니다. 브라우저에 두 개의 기사 제목 목록이 표시됩니다. 제목을 클릭하면 해당 기사 페이지로 이동하여 해당 기사의 제목과 내용이 표시됩니다. 🎜🎜요약: 🎜이 글에서는 Node.js와 일부 오픈 소스 기술을 사용하여 간단한 블로그 리더를 구축하는 방법을 소개합니다. 우리는 Express.js를 백엔드 프레임워크로 사용하고 EJS를 템플릿 엔진으로 사용하여 라우팅과 컨트롤러를 통해 페이지 렌더링과 데이터 전달을 구현합니다. 이는 필요에 따라 확장하고 최적화할 수 있는 간단한 예일 뿐입니다. 이 기사가 Node.js를 사용하여 간단한 블로그 리더를 구축하는 방법을 미리 이해하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 Node.js를 사용하여 간단한 블로그 리더를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!