EJS를 사용하여 nodejs pure로 노드 애플리케이션을 템플릿화하는 방법
5023 단어 javascriptnpmnode
오늘은 node.js를 순수하게 사용하여 다음과 같이 만드는 방법을 설명하겠습니다.
_1. 새 웹 서버를 만듭니다.
1. 새로운 웹 서버 생성
//다음과 같이 .mjs 확장자로 기본 파일을 생성합니다(main.mjs).
// Import ES Modules
import http from 'http';
import fs from "fs/promises";
import path from 'path';
import { fileURLToPath, URL } from 'url';
// __dirname not included is ES Modules
const __dirname = path.dirname(fileURLToPath(import.meta.url));
// Paths for layout files
const headerPath = path.join(__dirname, 'header.html');
const footerPath = path.join(__dirname, 'footer.html');
// Set port as constant
const port = 5000;
// Now create web server
const server = http.createServer(async (req, res) => {});
// Run the server
server.listen(port, () => {
console.clear();
console.log(`Server is running... at http://localhost:${port}`);
});
2. 콘텐츠가 다른 3개의 별도 HTML 페이지를 만듭니다.
//첫 페이지 생성(index.html)
<!DOCTYPE html>
<html lang="en">
{#header#}
<body>
<h1>This is index Page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod odit quis debitis quos suscipit enim? Officiis, eum! Tempora voluptates libero perspiciatis laudantium iusto animi suscipit? Quam illo nihil minima ut, in facere aspernatur, repellendus sit, laudantium cupiditate suscipit? Facilis veniam aspernatur iusto sunt necessitatibus aliquid accusamus voluptatum eos! Atque, unde!
</p>
{#footer#}
</body>
</html>
//두 번째 페이지 생성
<!DOCTYPE html>
<html lang="en">
{#header#}
<body>
<h1>This is about Page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod odit quis debitis quos suscipit enim? Officiis, eum! Tempora voluptates libero perspiciatis laudantium iusto animi suscipit? Quam illo nihil minima ut, in facere aspernatur, repellendus sit, laudantium cupiditate suscipit? Facilis veniam aspernatur iusto sunt necessitatibus aliquid accusamus voluptatum eos! Atque, unde!
</p>
{#footer#}
</body>
</html>
//세 번째 페이지 생성
<!DOCTYPE html>
<html lang="en">
{#header#}
<body>
<h1>This is users Page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod odit quis debitis quos suscipit enim? Officiis, eum! Tempora voluptates libero perspiciatis laudantium iusto animi suscipit? Quam illo nihil minima ut, in facere aspernatur, repellendus sit, laudantium cupiditate suscipit? Facilis veniam aspernatur iusto sunt necessitatibus aliquid accusamus voluptatum eos! Atque, unde!
</p>
{#footer#}
</body>
</html>
3. 페이지 레이아웃으로 header.html 및 footer.html 페이지를 두 개 더 만듭니다.
//헤더 페이지를 생성합니다.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Node JS Server</title>
</head>
//푸터 페이지 생성
<footer>
<p>Author: Shady Alefrangy</p>
<p><a href="[email protected]">[email protected]</a></p>
</footer>
4. URL 경로 이름을 기반으로 이러한 페이지 중 하나의 콘텐츠를 반환하는 요청 처리기를 만듭니다.
5. 각 페이지 반환은 header.html 페이지, 페이지 콘텐츠, footer.html로 구성됩니다.
(async/await)를 사용하여 비동기 접근 방식으로 이것을 코딩합니다.
const 서버 = http.createServer(async (req, res) => {
const url = 새 URL(
http:${req.headers.host}${req.url} );const fileName = url.pathname;
const renderedFilePath = path.join(__dirname, 'public', `${fileName}`);
try {
await fs.access(renderedFilePath)
let header = await fs.readFile(headerPath, {encoding: 'utf-8'});
let footer = await fs.readFile(footerPath, {encoding: 'utf-8'});
let content = await fs.readFile(renderedFilePath, {encoding: 'utf-8'});
content = content.replace('{#header#}', header);
content = content.replace('{#footer#}', footer);
res.end(content);
} catch {
res.statusCode = 404;
res.end('File not found');
}
});
감사
Reference
이 문제에 관하여(EJS를 사용하여 nodejs pure로 노드 애플리케이션을 템플릿화하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/shadyalefrangy/how-to-use-ejs-to-template-your-node-application-with-nodejs-pure-3i26텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
