怎么利用Node.js进行html页面跳转

怎么利用node.js进行页面跳转?本篇文章给大家介绍一下基于node实现html页面跳转的方法,希望对大家有所帮助!

怎么利用Node.js进行html页面跳转

问题描述

最近在使用Node.js和html学习页面的相关知识,在学习到页面跳转时,出现了跳转不成功的问题,在这里记录下,供以后参考。

在Node.js中,主要使用express框架,前端则使用html。

项目代码结构

该小Demo主要涉及四个文件,包括:

立即学习“前端免费学习笔记(深入)”;

main.js:该部分为起始文件,是整个项目的入口文件;

main.html:该部分是主页面的html文件;

new.html:要跳转页面的html文件;

router.js:路由文件,用来根据URL及参数给出具体的操作;

node_modules:存放相关模块的文件夹。

注:main.html和new.html两个在views文件夹下。

相关模块配置

使用npm分别install以下三个模块:

expressart-templateexpress-art-template

构建main.js

代码部分如下:

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及相关参数实现监听,并渲染相关界面。

牛面 牛面

牛面AI面试,大厂级面试特训平台

牛面 147 查看详情 牛面

代码部分如下:

const express = require('express') //创建路由实例const router = express.Router()router.get('/',(req,res) => {  res.render('main.html')})module.exports = router  //暴露接口

构建main.html

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

构建new.html

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

成功实现跳转

运行结果

在小黑屏中输入命令

node main.js

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

在这里插入图片描述
可以看到出现了跳转页面的超链接,点击这个超链接:
在这里插入图片描述
页面并没有实现有效的跳转。

问题分析与解决

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

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

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

即当URL为localhost:3000/new时,使用res.render跳转。

由于html的超链接与render渲染的链接保持一致,因此可以实现使用超链接的跳转。

跳转的效果如下:

在这里插入图片描述
至此问题解决啦!

更多node相关知识,请访问:nodejs 教程!!

以上就是怎么利用Node.js进行html页面跳转的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/553661.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月9日 21:15:19
下一篇 2025年11月9日 21:17:56

相关推荐

发表回复

登录后才能评论
关注微信