• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > 怎么利用Node.js进行html页面跳转

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

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了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以下三个模块:

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页面跳转

至此问题解决啦!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2022-04-29PhotoShop设计简洁清新的小按钮制作教程
  • 2022-04-29设置一个无需输入密码的WordPress登录表单
  • 2022-04-29ThinkPHP5验证码图片如何生成
  • 2022-04-29jQuery url中文乱码怎么办
  • 2022-04-29javascript:void什么意思
  • 2022-04-29关于WordPress之防御cc攻击(频繁F5刷新)的办法
  • 2022-04-29DedeCMSV5.6版自动采集功能规则使用基本知识详细讲
  • 2022-04-29帝国cms批量替换字段值SQL语法
  • 2022-04-29ThinkPHP3.2.3如何从php5升级到php7
  • 2022-04-29Discuz3.4特殊字符乱码解决方案

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • 使用织梦DdedCMS添加文章时同时更新所有单页面的
    • 聊聊Nodejs获取参数的四种方法
    • Dedecms怎么实现键盘翻页的功能
    • 解决sqlServer使用ROW_NUMBER时不排序的方法
    • 教你使用在Homestead中版本管理工具切换PHP版本
    • 20款wordpress的SEO插件
    • JS保留两位小数的函数有哪些
    • WordPress控制文章评论最少字数和最大字数
    • 利用curl函数抓取网站数据,仿造IP+伪造来源+防屏蔽
    • CDR设计制作漂亮婚庆字体

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有