温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何用Node.js进行html页面跳转

发布时间:2022-01-07 09:39:18 来源:亿速云 阅读:544 作者:iii 栏目:web开发

本篇内容介绍了“如何用Node.js进行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以下三个模块:

  • express

  • art-template

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

代码部分如下:

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

如何用Node.js进行html页面跳转
可以看到出现了跳转页面的超链接,点击这个超链接:
如何用Node.js进行html页面跳转
页面并没有实现有效的跳转。

问题分析与解决

如果纯粹使用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页面跳转

“如何用Node.js进行html页面跳转”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI