nodejs가 요청 페이지에 html을 추가하는 방법에 대해 이야기해 보겠습니다.-프런트엔드 Q&A-php.cn

nodejs가 요청 페이지에 html을 추가하는 방법에 대해 이야기해 보겠습니다.

PHPz

풀어 주다： 2023-04-07 10:45:19

원래의

705명이 탐색했습니다.

Node.js는 확장 가능한 고성능 웹 애플리케이션을 쉽게 구축할 수 있게 해주는 Chrome V8 엔진 기반의 JavaScript 런타임입니다. Node.js에서는 다양한 모듈과 패키지를 사용하여 애플리케이션을 확장하여 더욱 강력한 기능을 달성할 수 있습니다. 이번 글에서는 요청 페이지에 HTML을 추가하는 방법을 설명하겠습니다.

템플릿 엔진 사용

템플릿 엔진은 데이터와 템플릿을 결합하여 HTML을 생성하는 도구입니다. Node.js에는 EJS, Handlebars, Pug 등 선택할 수 있는 다양한 템플릿 엔진이 있습니다. 이를 사용하여 데이터를 HTML 페이지에 동적으로 쉽게 렌더링할 수 있습니다.

EJS 템플릿 엔진 사용 예는 다음과 같습니다.

먼저 EJS 모듈을 설치합니다.

npm install ejs

로그인 후 복사

그런 다음 다음 코드를 사용하여 애플리케이션에 EJS를 추가합니다.

const express = require('express');
const app = express();
const ejs = require('ejs');
app.set('view engine', 'ejs');

로그인 후 복사

코드에서는 app을 사용합니다. .set 메소드를 사용하여 EJS 템플릿을 애플리케이션에서 사용할 수 있도록 EJS를 뷰 엔진으로 정의합니다. app.set方法来定义EJS作为我们的视图引擎，这样就可以在应用程序中使用EJS模板了。

接下来，我们可以创建一个简单的EJS模板来渲染数据到HTML中：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>

로그인 후 복사

在EJS模板中，我们可以通过“<%= %>”来访问JavaScript变量和逻辑。在这个例子中，“title”和“message”是从服务器传递到模板中的数据。

最后，我们可以使用以下代码将数据渲染到视图中：

app.get('/', (req, res) => {
    res.render('index', { title: 'Node.js', message: 'Hello World!' });
});

로그인 후 복사

使用流

在Node.js中，我们可以使用流来将数据动态添加到HTML文档中。其中，Readable流用来从源头读取数据，然后Writable流用来写入数据到目标。通过这种方式我们可以很容易地将HTML文档转化为可读取流，并且将需要插入的HTML数据到可写入流中。

以下是一个简单的示例：

const http = require('http');
const fs = require('fs');

http.createServer(function (req, res) {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  const readable = fs.createReadStream(__dirname + '/index.html');
  readable.pipe(res);
}).listen(3000);

로그인 후 복사

在上述示例中，我们首先使用createReadStream方法创建一个可读取流，然后将HTML文档传递到流中。然后我们使用pipe

다음으로 데이터를 HTML로 렌더링하는 간단한 EJS 템플릿을 만들 수 있습니다.

rrreee

EJS 템플릿에서는 "<%= %>"를 통해 JavaScript 변수와 로직에 액세스할 수 있습니다. 이 예에서 "제목"과 "메시지"는 서버에서 템플릿으로 전달된 데이터입니다.

마지막으로 다음 코드를 사용하여 데이터를 뷰에 렌더링할 수 있습니다. 🎜rrreee

createReadStream

pipe

위 내용은 nodejs가 요청 페이지에 html을 추가하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!