Heim > Artikel > Web-Frontend > 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!
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.
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“.
Verwenden Sie npm, um jeweils die folgenden drei Module zu installieren:
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端口的监听。
在该文件中,主要创建路由实例,对URL及相关参数实现监听,并渲染相关界面。
代码
部分如下:
const express = require('express') //创建路由实例 const router = express.Router() router.get('/',(req,res) => { res.render('main.html') }) module.exports = router //暴露接口
在该文件下,只实现了一个超链接,用来实现实现页面的跳转,代码
部分如下:
<div> <a href="/new" >页面跳转</a> <!--跳转至新页--> </div>
本文件十分简单,只是用一行输出语句来表示跳转成功,代码
部分如下:
<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
rrreee
Der code
-Teil lautet wie folgt:
rrreee
Unter dieser Datei ist nur ein Hyperlink implementiert, um einen Seitensprung zu erreichen, code
Der Teil ist wie folgt: rrreee
Build new.html
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!