How to use Node.js to jump to html pages

How to use Node.js to jump to pages? This article will introduce to you how to implement html page jump based on Node. I hope it will be helpful to you!

Problem Description

Recently, I am using Node.js and html to learn the relevant knowledge of the page. When I learn the page jump, , there was a problem of unsuccessful jump, recorded here for future reference.

In Node.js, the express framework is mainly used, and html is used on the front end.

Project code structure

This small Demo mainly involves four files, including:

• ##main.js: This part is the starting file, which is The entry file of the entire project;

• main.html: This part is the html file of the main page;

• new.html: To jump The html file of the page;

• router.js: routing file, used to give specific operations based on the URL and parameters;

• node_modules: Folder to store related modules.

Note: main.html and new.html are in the views folder.

Related module configuration

Use npm to install the following three modules respectively:

express
• art-template
• express -art-template

Build main.js

The code part is as follows:

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...')
})

Implemented monitoring of port 3000.

Build router.js

In this file, we mainly create routing instances, monitor URLs and related parameters, and render related interfaces.

The code part is as follows:

const express = require('express') //创建路由实例
const router = express.Router()

router.get('/',(req,res) => {

  res.render('main.html')
})

module.exports = router  //暴露接口

Build main.html

Under this file, only one hyperlink is implemented to implement the page Jump, the

code part is as follows:

<div>
 <a href="/new" >页面跳转</a> <!--跳转至新页-->
</div>

Build new.html

This file is very simple, just use a line of output statement to indicate the successful jump,

The part of the code is as follows:

<div>
 <th>成功实现跳转</th>
</div>

Run result

Enter the

command in the small black screen:

node main.js

The code runs successfully, open

http://localhost:3000：

You can see a hyperlink to jump to the page. Click this hyperlink:

page No effective jump is achieved.

Problem analysis and solution

If you purely use the HTML language, you can directly jump to the hyperlink. After using the router, you should implement monitoring of the relevant URL to realize the jump. The goal.

So, add the following

code to router.js:

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

That is, when the URL is

localhost:3000/new, use res .render jump.

Since the html hyperlink is consistent with the link rendered by render, jumps using hyperlinks can be achieved.

The jump effect is as follows:

The problem is now solved!

For more node-related knowledge, please visit:

nodejs tutorial! !

The above is the detailed content of How to use Node.js to jump to html pages. For more information, please follow other related articles on the PHP Chinese website!