nodejs에서 다중 페이지 점프를 구현하는 방법-프런트엔드 Q&A-php.cn

최근 몇 년 동안 Node.js는 효율적인 성능, 풍부한 기능 및 강력한 생태계를 통해 프런트엔드 개발자를 위한 강력한 도구가 되었습니다. 서버측 실행 환경인 Node.js는 복잡한 웹 애플리케이션을 구현하는 데 사용할 수 있으며 다중 페이지 점프를 구현하는 데에도 이상적인 선택입니다.

이 글에서는 Node.js를 사용하여 요청 전달, 페이지 렌더링, 라우팅 관리 등을 포함하여 다중 페이지 점프를 달성하는 방법을 자세히 설명합니다.

1. 요청 전달

프론트엔드와 백엔드 분리 시대에는 디커플링 목적을 달성하기 위해 일반적으로 프론트엔드 코드와 백엔드 코드를 별도로 개발합니다. 이 경우 프런트엔드 코드는 일반적으로 별도의 폴더에 저장되고 백엔드 코드는 여러 파일에 분산됩니다. 이를 위해서는 처리를 위해 프런트엔드 요청을 백엔드로 전달해야 합니다.

Node.js는 http 및 fs와 같은 핵심 모듈을 통해 강력한 웹 애플리케이션 개발 기능을 제공합니다. Node.js의 백엔드 애플리케이션에서 HTTP 요청을 모니터링하고 해당 처리 로직으로 요청을 전달하기만 하면 됩니다. 이러한 방식으로 요청은 프런트엔드와 백엔드 사이에서 내부적으로 전달될 수 있으므로 프런트엔드 코드가 백엔드 API를 호출하여 다중 페이지 점프 효과를 얻을 수 있습니다.

Node.js에서 프런트 엔드 요청을 전달하는 간단한 예를 살펴보겠습니다.

const http = require('http');

http.createServer((req, res) => {
  // 设置跨域
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  
  // 处理请求
  if (req.url === '/login') {
    // 获取参数
    let body = '';
    req.on('data', (chunk) => {
      body += chunk;
    });

    req.on('end', () => {
      const { username, password } = JSON.parse(body);
      // 处理登录逻辑
      if (username === 'admin' && password === '123456') {
        // 登录成功
        res.end(JSON.stringify({ code: 200, message: '登录成功' }));
      } else {
        // 登录失败
        res.end(JSON.stringify({ code: 400, message: '用户名或密码错误' }));
      }
    });
  } else {
    // 处理其他请求
    res.end('Hello World!');
  }
}).listen(3000, () => {
  console.log('Server is running on port 3000');
});

로그인 후 복사

이 예에서는 http 모듈의 createServer 메서드를 통해 HTTP 서버 인스턴스를 생성하고 포트 3000을 수신합니다. 요청을 처리할 때 요청된 URL이 /login인지 확인합니다. 그렇다면 로그인 논리가 처리됩니다. 그렇지 않으면 "Hello World!"가 출력됩니다.

2. 페이지 렌더링

우리 웹 애플리케이션에는 일반적으로 개발 효율성을 높이기 위해 템플릿 엔진을 사용하여 페이지를 렌더링합니다. Node.js는 ejs, jade, 핸들바 등과 같은 수많은 템플릿 엔진을 제공합니다. 페이지 렌더링 방법을 소개하기 위해 ejs를 예로 들어 보겠습니다.

ejs는 HTML 코드를 빠르게 생성할 수 있는 간단한 템플릿 엔진입니다. ejs를 사용하면 HTML 페이지와 데이터 소스만 작성하면 페이지를 빠르게 렌더링할 수 있습니다.

먼저 간단한 HTML 페이지를 정의하고 ejs의 템플릿 구문을 사용하는 다음 코드를 살펴보겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= title %></h1>
    <p><%= content %></p>
  </body>
</html>

로그인 후 복사

이 페이지에서는 ejs의 템플릿 구문을 사용합니다. 예를 들어 페이지가 렌더링될 수 있도록 데이터 소스의 변수를 출력하려면 <%= %>를 사용합니다.

ejs를 사용하여 페이지를 렌더링하는 전체 예를 아래에서 살펴보겠습니다.

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

http.createServer((req, res) => {
  // 设置跨域
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

  // 渲染页面
  if (req.url === '/') {
    fs.readFile('./template/index.ejs', (err, data) => {
      if (err) {
        console.log(err);
        res.end('页面不存在');
      } else {
        const template = data.toString();
        const content = { title: '首页', content: '欢迎访问首页' };
        const html = ejs.render(template, content);
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(html);
      }
    });
  } else if (req.url === '/about') {
    fs.readFile('./template/about.ejs', (err, data) => {
      if (err) {
        console.log(err);
        res.end('页面不存在');
      } else {
        const template = data.toString();
        const content = { title: '关于我们', content: '我们是一家IT公司' };
        const html = ejs.render(template, content);
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(html);
      }
    });
  } else {
    res.end('页面不存在');
  }
}).listen(3000, () => {
  console.log('Server is running on port 3000');
});

로그인 후 복사

이 예에서는 fs 모듈을 통해 두 개의 ejs 템플릿 파일을 읽은 다음 ejs.render 메서드를 사용하여 데이터 소스가 페이지에 렌더링됩니다. 마지막으로 렌더링된 HTML 코드를 브라우저에 출력합니다.

3. 라우팅 관리

실제 개발에서는 해당 페이지를 빠르게 찾을 수 있도록 여러 페이지에 대한 라우팅을 관리해야 합니다. Node.js는 라우팅 관리를 보다 편리하고 빠르게 구현하는 데 도움이 되는 express와 같은 웹 프레임워크를 제공합니다.

라우팅 관리를 구현하는 방법을 알아보기 위해 Express 프레임워크를 예로 들어보겠습니다.

먼저 express 모듈을 설치해야 합니다:

  npm install express --save

로그인 후 복사

그런 다음 express를 사용하여 경로 관리를 구현하는 방법을 살펴보겠습니다.

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

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

app.get('/about', (req, res) => {
  res.send('About Us!');
});

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

로그인 후 복사

이 예에서는 먼저 require() 함수를 사용합니다. Express 모듈을 도입한 다음 express() 함수를 호출하여 새 Express 인스턴스를 만듭니다. require()函数引入express模块，然后调用express()函数来创建一个新的express实例。

接下来，我们使用app.get()方法，给每个路由定义一个相应的处理方法。例如，当用户请求‘/’时，我们将会向浏览器返回“Hello World!”。当用户请求‘/about’时，我们将会向浏览器返回“About Us!”。

最后，我们使用app.listen()

다음으로 app.get() 메서드를 사용하여 각 경로에 해당하는 처리 방법을 정의합니다. 예를 들어, 사용자가 '/'를 요청하면 "Hello World!"가 브라우저에 반환됩니다. 사용자가 '/about'을 요청하면 "About Us!"가 브라우저에 반환됩니다.

마지막으로 app.listen() 메서드를 사용하여 서비스가 수신하려는 포트를 지정합니다. 이 예에서는 수신 포트 번호를 3000으로 설정합니다.

4. 다중 페이지 점프 실습

우리는 Node.js가 요청 전달, 페이지 렌더링 및 라우팅 관리를 구현하는 방법을 이미 이해했습니다. 구현 세부 사항에 대한 심층적인 이해를 돕기 위해 포괄적인 예를 살펴보겠습니다. 다중 페이지 점프.

이 예제는 주로 프런트 엔드 페이지와 백엔드 Node.js 코드의 두 부분으로 나뉩니다.

프런트엔드 페이지에서는 jQuery를 사용하여 백엔드 Node.js API에 요청을 보냅니다. 사용자가 '로그인' 버튼을 클릭하면 사용자의 계정 이름과 비밀번호를 백엔드 API로 보내고 API의 응답 결과에 따라 다른 점프 작업을 수행합니다.

프론트엔드 코드의 주요 구현 과정은 다음과 같습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>登录</title>
  </head>
  <body>
    <h1>登录</h1>
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <button id="loginBtn">登录</button>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('#loginBtn').click(function() {
        // 获取用户名和密码
        const username = $('input[name=username]').val();
        const password = $('input[name=password]').val();

        // 发送请求
        $.ajax({
          type: 'POST',
          url: 'http://localhost:3000/login',
          data: JSON.stringify({ username, password }),
          contentType: 'application/json',
          success: function(res) {
            if (res.code === 200) {
              // 登录成功，跳转到首页
              window.location.href = 'http://localhost:3000';
            } else {
              alert(res.message);
            }
          },
          error: function() {
            alert('请求出错');
          }
        });
      });
    });
  </script>
</html>

로그인 후 복사

Node.js에서는 HTTP 서버 인스턴스를 생성하고 포트 3000을 수신했습니다. 요청이 감지되면 먼저 요청 유형을 결정합니다. GET 요청의 경우 ejs 템플릿 엔진을 사용하여 페이지를 렌더링하고, POST 요청의 경우 로그인 논리를 처리하고 응답 결과를 JSON 형식으로 반환합니다. 예를 들어, 사용자가 'admin'과 '123456'을 입력하면 JSON 형식으로 { code: 200, message: 'Login 성공적인' }을 반환합니다. 사용자가 다른 계정 이름이나 비밀번호를 입력하면 JSON 형식으로 { code: 400, message: '잘못된 사용자 이름 또는 비밀번호' }를 반환합니다. 🎜🎜백엔드 Node.js 코드의 주요 구현 과정은 다음과 같습니다. 🎜

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

http.createServer((req, res) => {
  // 设置跨域
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

  // 渲染页面
  if (req.url === '/') {
    fs.readFile('./template/index.ejs', (err, data) => {
      if (err) {
        console.log(err);
        res.end('页面不存在');
      } else {
        const template = data.toString();
        const content = { title: '首页', content: '欢迎访问首页' };
        const html = ejs.render(template, content);
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(html);
      }
    });
  } else if (req.url === '/login') {
    // 获取参数
    let body = '';
    req.on('data', (chunk) => {
      body += chunk;
    });

    req.on('end', () => {
      const { username, password } = JSON.parse(body);
      // 处理登录逻辑
      if (username === 'admin' && password === '123456') {
        // 登录成功
        res.end(JSON.stringify({ code: 200, message: '登录成功' }));
      } else {
        // 登录失败
        res.end(JSON.stringify({ code: 400, message: '用户名或密码错误' }));
      }
    });
  } else {
    res.end('页面不存在');
  }
}).listen(3000, () => {
  console.log('Server is running on port 3000');
});

로그인 후 복사

通过以上代码，我们可以在前后端相分离的情况下，使用Node.js来实现多页面跳转的功能。本文只是对于nodejs多页面跳转的简单介绍，还有很多要学习和了解的地方，相信有了这篇文章的帮助，你在学习和实践中也会有所收获。

위 내용은 nodejs에서 다중 페이지 점프를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!