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

怎么利用Node.js进行页面跳转?本篇文章给大家介绍一下基于Node实现html页面跳转的方法,希望对大家有所帮助! 问题描述 最近在使用Node.js和html学习页面的相关知...

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

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

问题描述

最近在使用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以下三个模块:

express

art-template

express-art-template

构建main.js

代码部分如下:

constexpress=require('express')constapp=express()constrouter=require('./router')app.engine('html',require('express-art-template'))app.use(router)app.listen(3000,()=>{console.log('successful...')})

实现了对3000端口的监听。

构建router.js

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

代码部分如下:

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

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

<div><ahref="/new">页面跳转</a><!--跳转至新页--></div>构建new.html

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

<div><th>成功实现跳转</th></div>运行结果

在小黑屏中输入命令:

nodemain.js

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

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

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

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

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

问题分析与解决

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

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

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

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

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

跳转的效果如下:

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

至此问题解决啦!

产品猿社区致力收录更多优质的商业产品,给服务商以及软件采购客户提供更多优质的软件产品,帮助开发者变现来实现多方共赢;

日常运营的过程中我们难免会遇到各种版权纠纷等问题,如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用,您可按照我们投诉流程处理,点我投诉

本文来自用户发布投稿,不代表产品猿立场 ;若对此文有疑问或内容有严重错误,可联系平台客服反馈;

部分产品是用户投稿,可能本文没有提供官方下下载地址或教程,若您看到的内容没有下载入口,您可以在我们产品园商城搜索看开发者是否有发布商品;若您是开发者,也诚邀您入驻商城平台发布的产品,地址:点我进入

如若转载,请注明出处:https://www.chanpinyuan.cn/39051.html;
(0)
上一篇 2023年3月13日 下午4:17
下一篇 2023年3月13日 下午4:17

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部