• 技术文章 >web前端 >js教程

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

    青灯夜游青灯夜游2022-01-06 19:04:46转载124
    怎么利用Node.js进行页面跳转?本篇文章给大家介绍一下基于Node实现html页面跳转的方法,希望对大家有所帮助!

    问题描述

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

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

    项目代码结构

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

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

    相关模块配置

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

    构建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

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

    问题分析与解决

    如果纯粹使用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页面跳转的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:node.js 页面跳转
    上一篇:一文知晓JSX原理(推荐) 下一篇:一文聊聊Angular中怎么操作DOM元素

    相关文章推荐

    • 手把手教你安装和配置pm2,实现自动化部署node项目• buffer是什么?深入了解Nodejs中的buffer模块• 一文深入了解 Node 中的事件循环• 一文带你了解Node.js中的eventloop• 探索下浏览器和 Node.js 为什么会这样设计 EventLoop!• 聊聊一些Node.js 缓冲区(Buffer)模块的重要方法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网