Node.js를 사용하여 HTML 페이지로 이동하는 방법

Node.js를 사용하여 페이지로 이동하는 방법은 무엇인가요? 이번 글에서는 Node를 기반으로 html 페이지 점프를 구현하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

문제 설명

최근에 페이지 관련 지식을 학습하기 위해 Node.js과 html을 사용하고 있는데, 페이지 점프에 대해 배웠을 때 점프에 실패하는 문제가 있어서 여기에 기록했습니다. 미래 참조.

Node.js에서는 express 프레임워크를 주로 사용하고, 프론트엔드에서는 html을 사용합니다.

프로젝트 코드 구조

이 작은 데모에는 주로 다음을 포함한 4개의 파일이 포함됩니다.

• main.js: 이 부분은 전체 프로젝트의 시작 파일이자 항목 파일입니다.

• main.html: 이 부분 메인 페이지의 html 파일입니다.

• new.html: 이동할 페이지의 html 파일

• router.js: URL 및 매개변수를 기반으로 특정 작업을 제공하는 데 사용됩니다. ;

• node_modules: 관련 모듈을 저장하는 폴더입니다.

참고: main.html 및 new.html은 views 폴더에 있습니다.

관련 모듈 구성

npm을 사용하여 다음 세 가지 모듈을 각각 설치하십시오.

• express
• art-template
• express-art-template

main.js 빌드

code 부분은 다음과 같습니다: 代码部分如下：

const express = require('express')
const app = express()
const router = require('./router')

app.engine('html',require('express-art-template'))
app.use(router)

app.listen(3000,() => {
  console.log('successful...')
})

实现了对3000端口的监听。

构建router.js

在该文件中，主要创建路由实例，对URL及相关参数实现监听，并渲染相关界面。

代码部分如下：

const express = require('express') //创建路由实例
const router = express.Router()

router.get('/',(req,res) => {

  res.render('main.html')
})

module.exports = router  //暴露接口

构建main.html

在该文件下，只实现了一个超链接，用来实现实现页面的跳转，代码部分如下：

<div>
 <a href="/new" >页面跳转</a> <!--跳转至新页-->
</div>

构建new.html

本文件十分简单，只是用一行输出语句来表示跳转成功，代码部分如下：

<div>
 <th>成功实现跳转</th>
</div>

运行结果

在小黑屏中输入命令：

node main.js

代码成功运行，打开http://localhost:3000：

可以看到出现了跳转页面的超链接，点击这个超链接：

页面并没有实现有效的跳转。

问题分析与解决

如果纯粹使用html语言，是可以直接实现超链接的跳转的，在使用router后，应该实现对相关URL的监听才可以实现跳转的目标。

于是，在router.js中补充如下的代码：

router.get('/new',function(req,res){
  res.render('new.html')
})

即当URL为localhost:3000/newrrreee

는 포트 3000의 모니터링을 구현합니다.

Build router.js

이 파일에서는 주로 라우팅 인스턴스를 생성하고, URL 및 관련 매개변수를 모니터링하고, 관련 인터페이스를 렌더링합니다.

code 부분은 다음과 같습니다:
rrreee

Build main.html

이 파일 아래에는 페이지 점프를 달성하기 위해 하나의 하이퍼링크만 구현되어 있으며, code 부분은 다음과 같습니다. rrreee
Build new.html

🎜이 파일은 매우 간단합니다. 성공적인 점프를 나타내기 위해 한 줄의 출력 문만 사용합니다. 🎜rrreee🎜The 실행 결과🎜🎜가 작은 검은색 화면에 표시됩니다. 명령을 입력하세요: 🎜rrreee🎜코드가 성공적으로 실행되고, http://localhost:3000을 엽니다: 🎜🎜🎜 클릭하시면 해당 페이지로 이동하는 하이퍼링크를 보실 수 있습니다. 이 하이퍼링크: 🎜🎜 이 페이지는 그렇지 않습니다 효과적인 점프를 구현합니다. 🎜🎜문제 분석 및 해결 방법🎜🎜순전히 HTML 언어를 사용하는 경우에는 라우터 사용 후 해당 URL을 모니터링하여 점프 목표를 달성해야 합니다. 🎜🎜그러므로, router.js에 다음 코드를 추가하세요: 🎜rrreee🎜즉, URL이 localhost:3000/new일 때 res.render를 사용하여 점프하세요. 🎜🎜html의 하이퍼링크는 렌더링에 의해 렌더링된 링크와 일치하므로 하이퍼링크를 사용하여 점프할 수 있습니다. 🎜🎜점프 효과는 다음과 같습니다. 🎜🎜🎜🎜 이 문제는 해결되었습니다! 🎜🎜노드 관련 지식을 더 보려면 🎜nodejs 튜토리얼🎜을 방문하세요! ! 🎜🎜

위 내용은 Node.js를 사용하여 HTML 페이지로 이동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!