So verwenden Sie Node.js, um zu HTML-Seiten zu springen

Wie verwende ich Node.js, um zu Seiten zu springen? In diesem Artikel erfahren Sie, wie Sie einen HTML-Seitensprung basierend auf Node implementieren. Ich hoffe, er wird Ihnen hilfreich sein!

Problembeschreibung

Vor kurzem habe ich Node.js und HTML verwendet, um das relevante Wissen der Seite zu erlernen, und es gab ein Problem mit einem erfolglosen Sprung zukünftige Referenz.

In Node.js wird hauptsächlich das Express-Framework verwendet, und HTML wird im Frontend verwendet.

Projektcodestruktur

Diese kleine Demo umfasst hauptsächlich vier Dateien, darunter:

• main.js: Dieser Teil ist die Startdatei und die Eintragsdatei für das gesamte Projekt;

• main.html: Dieser Teil Es handelt sich um die HTML-Datei der Hauptseite;

• new.html: die HTML-Datei der zu überspringenden Seite;

• router.js: Routing-Datei, die verwendet wird, um spezifische Operationen basierend auf der URL und den Parametern durchzuführen ;

• node_modules: Ordner zum Speichern verwandter Module.

Hinweis: main.html und new.html befinden sich im Ordner „views“.

Verwandte Modulkonfiguration

Verwenden Sie npm, um jeweils die folgenden drei Module zu installieren:

• express
• art-template
• express-art-template

Build main.js

code Teil Wie folgt: 代码部分如下：

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/newrrreee

implementiert die Überwachung von Port 3000.

Erstellen Sie router.js

In dieser Datei werden hauptsächlich Routing-Instanzen erstellt, URLs und zugehörige Parameter überwacht und zugehörige Schnittstellen gerendert.

Der code-Teil lautet wie folgt:
rrreee

Build main.html

Unter dieser Datei ist nur ein Hyperlink implementiert, um einen Seitensprung zu erreichen, codeDer Teil ist wie folgt: rrreee
Build new.html

🎜Diese Datei ist sehr einfach. Sie verwendet lediglich eine Zeile mit der Ausgabeanweisung, um einen erfolgreichen Sprung anzuzeigen. Der code-Teil lautet wie folgt: 🎜rrreee🎜The Das laufende Ergebnis🎜🎜 wird auf dem kleinen schwarzen Bildschirm angezeigt. Geben Sie den Befehl ein: 🎜rrreee🎜Der Code wird erfolgreich ausgeführt. Öffnen Sie http://localhost:3000: 🎜🎜🎜 Sie können einen Hyperlink sehen, um zur Seite zu springen dieser Hyperlink: 🎜🎜 Die Seite nicht effektive Sprünge umsetzen. 🎜🎜Problemanalyse und Lösung🎜🎜Wenn Sie eine reine HTML-Sprache verwenden, können Sie direkt zum Hyperlink springen. Nach der Verwendung des Routers sollten Sie die entsprechende URL überwachen, um das Sprungziel zu erreichen. 🎜🎜Fügen Sie also den folgenden code zu router.js hinzu: 🎜rrreee🎜Das heißt, wenn die URL localhost:3000/new lautet, verwenden Sie res.render zum Springen. 🎜🎜Da der Hyperlink von HTML mit dem durch Rendern gerenderten Link übereinstimmt, können Sprünge mithilfe von Hyperlinks erzielt werden. 🎜🎜Der Sprungeffekt ist wie folgt: 🎜🎜🎜🎜 Dieses Problem ist gelöst! 🎜🎜Weitere Informationen zu Knoten finden Sie unter: 🎜nodejs-Tutorial🎜! ! 🎜🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Node.js, um zu HTML-Seiten zu springen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!