찾다

집  >  기사  >  웹 프론트엔드  >  nodejs 익스프레스 ejs 설치

nodejs 익스프레스 ejs 설치

WBOY
WBOY원래의
2023-05-11 18:35:07726검색

Node.js는 개발자가 JavaScript 언어를 사용하여 고성능 백엔드 애플리케이션을 개발할 수 있는 인기 있는 JavaScript 런타임 환경입니다. Node.js는 간단하고 유연한 웹 애플리케이션 프레임워크인 Express.js와 함께 제공되며 개발자가 아름답고 유지 관리하기 쉬운 웹 애플리케이션을 만드는 데 도움이 되는 강력한 템플릿 엔진 EJS도 제공합니다.

이 기사에서는 Node.js, Express.js 및 EJS를 설치하는 방법에 대해 설명하고 이들을 함께 사용하여 간단한 웹 애플리케이션을 만드는 방법을 알아봅니다.

Node.js 설치

시작하기 전에 컴퓨터에 Node.js 런타임 환경이 설치되어 있는지 확인하세요. 아직 설치하지 않았다면 아래 단계에 따라 설치하세요.

  1. [Node.js 공식 웹사이트](https://nodejs.org/)를 열고 "다운로드" 버튼을 클릭한 후 다운로드할 운영 체제에 적합한 버전입니다.
  2. 다운로드가 완료된 후 설치 패키지를 두 번 클릭하여 설치하세요. 설치 마법사의 단계를 따르십시오.

  3. 설치가 완료된 후 터미널(또는 명령줄 창)을 열고 다음 명령을 입력하여 Node.js가 올바르게 설치되었는지 확인하세요. 

    node -v

    Node.js가 성공적으로 설치되면 Node.js 버전 정보가 표시됩니다. js가 표시됩니다.

Express.js 설치

Node.js를 설치한 후 npm 명령(Node.js와 함께 제공되는 패키지 관리자)을 사용하여 Express.js를 설치할 수 있습니다. 설치하려면 아래 단계를 따르세요.

  1. 터미널(또는 명령줄 창)을 열고 다음 명령을 입력하세요. 

    npm init

    이 명령은 새 Node.js 프로젝트를 만드는 방법을 안내합니다. 안내에 따라 단계별로 입력하세요.

  2. 초기화가 완료된 후 다음 명령을 입력하여 Express.js를 설치하세요. 

    npm install express --save

    이 명령은 npm 저장소에서 최신 버전의 Express.js를 설치하고 프로젝트에 종속 항목으로 추가합니다.

  3. 설치가 성공적으로 완료되면 프로젝트 루트 디렉터리에 app.js라는 새 파일을 만듭니다. 이는 Express.js 애플리케이션의 주요 진입점입니다. app.js 的新文件。这是您的 Express.js 应用程序的主要入口点。

  4. 在 app.js 文件中，输入以下代码来创建一个简单的 Express.js 应用程序：

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

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

app.listen(3000, () => {
  console.log('Server listening on port 3000!');
});

    这个应用程序将会响应来自客户端浏览器的所有 HTTP GET 请求，并返回一个包含 “Hello World!” 的字符串。

  5. 保存 app.js 文件后，切换到终端（或命令行窗口），将工作目录切换到 app.js 文件所在的目录，并运行以下命令：

    node app.js

    如果一切正常，您应该可以看到终端输出 “Server listening on port 3000!” 的信息。这表明您的 Express.js 应用程序正在运行，并可以通过访问 http://localhost:3000/ 来访问它。

安装 EJS

EJS 是一个简单、易用的模板引擎，可以帮助您在 Express.js 应用程序中创建具有动态内容的网页。请按照以下步骤进行安装：

  1. 打开终端（或命令行窗口），输入以下命令：

    npm install ejs --save

    这个命令将会从 npm 仓库中安装最新版本的 EJS，并将其作为依赖关系添加到您的项目中。

  2. 在应用程序的根目录下，创建一个名为 views 的新文件夹。这将是您的 Express.js 应用程序用来存放 EJS 模板文件的地方。
  3. 在 views 文件夹中，创建一个名为 index.ejs 的新文件。这将是您的网页的主要模板文件。

  4. 在 index.ejs 文件中，输入以下代码来创建一个简单的网页：

    <!DOCTYPE html>
<html>
<head>
  <title>EJS Example</title>
</head>
<body>
  <h1>Welcome to the EJS Example!</h1>
  <p>The current date and time is <%= new Date().toString() %>.</p>
</body>
</html>

    这个模板将会显示一个标题，“Welcome to the EJS Example!”，以及一个包含当前日期和时间的段落。

  5. 回到 app.js 文件中，在头部添加以下代码来告诉 Express.js 应用程序在哪里可以找到 EJS 模板文件：

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

  6. 在 app.js 文件中，用以下代码替换 app.get 方法：

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

    这个方法会通过 EJS 模板引擎来呈现 views/index.ejs 文件，并将其发送回客户端浏览器。

  7. 保存 app.js 和 index.ejs 文件后，切换到终端（或命令行窗口），将工作目录切换到 app.js

    app.js 파일에 다음 코드를 입력하여 간단한 Express.js 애플리케이션을 만듭니다. 

    node app.js

    이 애플리케이션은 클라이언트 브라우저의 모든 HTTP GET 요청에 응답하고 "Hello World!"가 포함된 문자열

app.js 파일을 저장한 후 터미널(또는 명령줄 창)로 전환하고 작업 디렉터리를 app.js 파일이 있는 디렉터리로 전환합니다. 을 찾아서 다음 명령을 실행합니다.

rrreee

모든 것이 순조롭게 진행되면 터미널 출력 "Server listening on port 3000!"이 표시됩니다. 이는 Express.js 애플리케이션이 실행 중이고 http://localhost:3000/을 방문하여 액세스할 수 있음을 나타냅니다.

🎜🎜🎜EJS 설치🎜🎜EJS는 Express.js 애플리케이션에서 동적 콘텐츠가 포함된 웹 페이지를 만드는 데 도움이 되는 간단하고 사용하기 쉬운 템플릿 엔진입니다. 설치하려면 아래 단계를 따르세요. 🎜🎜🎜🎜터미널(또는 명령줄 창)을 열고 다음 명령을 입력하세요. 🎜rrreee🎜이 명령은 npm 저장소에서 최신 버전의 EJS를 설치하고 종속 항목으로 추가합니다. 당신의 프로젝트에 있습니다. 🎜🎜🎜애플리케이션의 루트 디렉터리에 views라는 새 폴더를 만듭니다. 이는 Express.js 애플리케이션이 EJS 템플릿 파일을 저장하는 위치입니다. 🎜🎜views 폴더에 index.ejs라는 새 파일을 만듭니다. 이는 웹페이지의 기본 템플릿 파일이 됩니다. 🎜🎜🎜index.ejs 파일에 다음 코드를 입력하여 간단한 웹 페이지를 만듭니다. 🎜rrreee🎜이 템플릿에는 "EJS 예제에 오신 것을 환영합니다!"라는 제목과 텍스트가 표시됩니다. 현재 날짜와 시간의 단락을 포함합니다. 🎜🎜🎜🎜app.js 파일로 돌아가 헤더에 다음 코드를 추가하여 Express.js 애플리케이션에 EJS 템플릿 파일을 찾을 수 있는 위치를 알려줍니다. 🎜rrreee🎜🎜🎜 app .js 파일에서 app.get 메서드를 다음 코드로 바꿉니다. 🎜rrreee🎜이 메서드는 다음을 통해 views/index.ejs 파일을 렌더링합니다. EJS 템플릿 엔진을 사용하여 클라이언트 브라우저로 다시 보냅니다. 🎜🎜🎜🎜app.js, index.ejs 파일을 저장한 후 터미널(또는 명령줄 창)로 전환하여 작업 디렉터리를 app으로 전환합니다. .js 파일을 다운로드하고 다음 명령을 실행합니다. 🎜rrreee🎜모든 것이 순조롭게 진행되면 터미널 출력 "Server listening on port 3000!"이 표시됩니다. 이는 Express.js 애플리케이션이 실행 중이고 http://localhost:3000/을 방문하여 액세스할 수 있음을 나타냅니다. 🎜🎜링크를 클릭하면 현재 날짜와 시간이 포함된 웹페이지가 표시됩니다. 🎜🎜🎜🎜결론🎜🎜이 기사에서는 Node.js, Express.js 및 EJS를 설치하고 간단한 웹 애플리케이션을 만드는 방법을 배웠습니다. 다음 기사에서는 Express.js와 EJS를 사용하여 더욱 복잡하고 강력한 웹 애플리케이션을 만드는 방법을 살펴보겠습니다. 🎜

위 내용은 nodejs 익스프레스 ejs 설치의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Linux에 nodejs를 설치할지 여부다음 기사：Linux에 nodejs를 설치할지 여부

관련 기사

더보기