站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

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

时间:2022-01-09 [网络编程]作者:fabuyuan 浏览:6 次

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

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

问题描述

最近在使用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页面跳转  2
可以看到出现了跳转页面的超链接,点击这个超链接:
怎么利用Node.js进行html页面跳转  2
页面并没有实现有效的跳转。

问题分析与解决

如果纯粹使用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页面跳转  2
至此问题解决啦!

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

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

本文标签:  node.js页面跳转

转载请注明来源:怎么利用Node.js进行html页面跳转

本文永久链接地址:https://www.adminjie.com/post/7395.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 空格键的功能有哪些

      空格键的功能有哪些

      空格键的功能:1、添加空格;2、网页翻页;3、播放器的暂停或播放;4、在游戏中,用于跳过动画、跳跃、还原画面、攻击或暂停等;5、和Ctrl键一起使用,用于切换中...

    • 怎样修改oracle的连接数

      怎样修改oracle的连接数

      方法:1、利用“altersystemsetprocesses=修改连接数scope=spfile”语句修改数据库允许的最大连接数;2、修改之后...

    • 你知道Golang怎么封装PHP常用函数吗!go-to-php

      你知道Golang怎么封装PHP常用函数吗!go-to-php

      本文由golang教程栏目给大家介绍关于Golang怎么实现PHP常用函数,希望对需要的朋友有所帮助!Golang实现PHP常用函数go-to-php用Gola...

    • oracle数据修改语句是什么

      oracle数据修改语句是什么

      在oracle中,数据修改语句是update语句,该语句的作用就是修改表中指定的数据,语法为“UPDATE表名称SET列名称=新值WHERE条件”...

    • HTML中哪种标签有边框

      HTML中哪种标签有边框

      HTML中有边框的标签:1、input标签,用于规定用户可以在其中输入数据的输入字段;2、hr标签,用于插入一条水平线;3、textarea标签,用于定义一个多...

    热门文章