Web-Frontend
js-Tutorial
So verwenden Sie den NodeJS-Server, um HTML-Dateien zu lesen und sie im Frontend darzustellen
So verwenden Sie den NodeJS-Server, um HTML-Dateien zu lesen und sie im Frontend darzustellen
Dieses Mal zeige ich Ihnen, wie Sie den NodeJS-Server zum Lesen und Rendern von HTML-Dateien im Frontend verwenden. Welche Vorsichtsmaßnahmen gibt es bei der Verwendung des NodeJS-Servers zum Lesen und Rendern von HTML-Dateien? Das Folgende ist ein praktischer Fall.
1. Implementieren Sie einfach jeweils drei Backup-Seiten.
Codeausschnitt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>元素居中对齐</h2>
<p>水平居中块级元素 (如 p), 可以使用 margin: auto;</p>
<p class="center">
<p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
</p>
</body>
</html>notFount.html-Seite
<!DOCTYPE HTML>
<html>
<head>
<script>
</script>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
color:red;
}
</style>
</head>
<body>
<p class ="center" >404 Not Fount</p>
</body>
</html>2. Ändern Sie die erstellte NodeJS-Serverseite, um unterschiedliche Antwortseiten für Anfragen von unterschiedlichen Adressen zu erstellen.
Fügen Sie den Dateilesecode in die URL-Adressbeurteilung ein, um die definierte HTML-Seite zu lesen.
DeklarationDateisystemObjekt:
// 声明文件操作系统对象
var fs = require('fs');Implementieren Sie das Lesen und Rendern von Dateiinhalten auf der Seite
if(url ==='/'){
//response.writeHead(响应状态码，响应头对象): 发送一个响应头给请求。
response.writeHead(200,{'Content-Type':'text/html'})
// 如果url=‘/' ,读取指定文件下的html文件，渲染到页面。
fs.readFile('./practice/login.html','utf-8',function(err,data){
if(err){
throw err ;
}
response.end(data);
});
}Vollständiger Code:
/**
1.使用 HTTP 服务器与客户端交互，需要 require('http')。
声明http协议
*/
var http = require('http');
// 声明文件操作系统对象
var fs = require('fs');
/**
2.获取服务器对象
1.通过 http.createServer([requestListener]) 创建一个服务
requestListener <Function>
返回: <http.Server>
返回一个新建的 http.Server 实例。
对于服务端来说，主要做三件事：
1.接受客户端发出的请求。
2.处理客户端发来的请求。
3.向客户端发送响应。
*/
var server = http.createServer();
/**
3.声明端口号，开启服务。
server.listen([port][, host][, backlog][, callback])
port <number> ：端口号
host <string> ：主机ip
backlog <number> server.listen() 函数的通用参数
callback <Function> server.listen() 函数的通用参数
Returns: <net.Server>
启动一个TCP服务监听输入的port和host。
如果port省略或是0，系统会随意分配一个在'listening'事件触发后能被server.address().port检索的无用端口。
如果host省略，如果IPv6可用，服务器将会接收基于unspecified IPv6 address (::)的连接，否则接收基于unspecified IPv4 address (0.0.0.0)的连接
*/
server.listen(9001, function(){
console.log('服务器正在端口号：9001上运行......');
})
/**
4.给server 实例对象添加request请求事件，该请求事件是所有请求的入口。
任何请求都会触发改事件，然后执行事件对应的处理函数。
server.on('request',function(){
console.log('收到客户端发出的请求.......');
});
*/
/**
5.设置请求处理函数。
请求回调处理函数需要接收两个参数。
request ：request是一个请求对象，可以拿到当前浏览器请求的一些信息。
eg：请求路径，请求方法等
response： response是一个响应对象，可以用来给请求发送响应。
*/
server.on('request',function(request,response){
var url = request.url;
if(url ==='/'){
//response.writeHead(响应状态码，响应头对象): 发送一个响应头给请求。
response.writeHead(200,{'Content-Type':'text/html'})
// 如果url=‘/' ,读取指定文件下的html文件，渲染到页面。
fs.readFile('./practice/login.html','utf-8',function(err,data){
if(err){
throw err ;
}
response.end(data);
});
}else if(url === '/login'){
response.writeHead(200,{'Content-Type':'text/html'});
// 如果url=‘/' ,读取指定文件下的html文件，渲染到页面。
fs.readFile('./practice/login.html','utf-8',function(err,data){
if(err){
throw err ;
}
response.end(data);
});
}else if(url === '/index'){
response.writeHead(200,{'Content-Type':'text/html'});
// 如果url=‘/' ,读取指定文件下的html文件，渲染到页面。
fs.readFile('./practice/index.html','utf-8',function(err,data){
if(err){
throw err ;
}
response.end(data);
});
}else{
response.writeHead(200,{'Content-Type':'text/html'});
// 如果url=‘/' ,读取指定文件下的html文件，渲染到页面。
fs.readFile('./practice/notFount.html','utf-8',function(err,data){
if(err){
throw err ;
}
response.end(data);
});
}
});
Endeffekt:
Öffnen Sie den NodeJS-Server und geben Sie in die Adressleiste ein: 127.0.0.0.1:9001 oder 127.0.0.0.1:9001/login
Geben Sie in die Adressleiste ein: 127.0.0.0.1:9001/index
Geben Sie in die Adressleiste ein: 127.0.0.0.1: 9001/anderer Inhalt
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Inhalte achten Sie bitte auf andere Verwandte Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So erstellen Sie eine Webpack+React-Entwicklungsumgebung
So erstellen Sie eine React-Familien-Bucket-Umgebung
Das obige ist der detaillierte Inhalt vonSo verwenden Sie den NodeJS-Server, um HTML-Dateien zu lesen und sie im Frontend darzustellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1382
52
Ist NodeJS ein Backend-Framework?
Apr 21, 2024 am 05:09 AM
Node.js kann als Backend-Framework verwendet werden, da es Funktionen wie hohe Leistung, Skalierbarkeit, plattformübergreifende Unterstützung, ein umfangreiches Ökosystem und einfache Entwicklung bietet.
So verbinden Sie NodeJS mit der MySQL-Datenbank
Apr 21, 2024 am 06:13 AM
Um eine Verbindung zu einer MySQL-Datenbank herzustellen, müssen Sie die folgenden Schritte ausführen: Installieren Sie den MySQL2-Treiber. Verwenden Sie mysql2.createConnection(), um ein Verbindungsobjekt zu erstellen, das die Hostadresse, den Port, den Benutzernamen, das Passwort und den Datenbanknamen enthält. Verwenden Sie „connection.query()“, um Abfragen durchzuführen. Verwenden Sie abschließend Connection.end(), um die Verbindung zu beenden.
Was ist der Unterschied zwischen den Dateien npm und npm.cmd im Installationsverzeichnis von nodejs?
Apr 21, 2024 am 05:18 AM
Es gibt zwei npm-bezogene Dateien im Node.js-Installationsverzeichnis: npm und npm.cmd. Die Unterschiede sind wie folgt: unterschiedliche Erweiterungen: npm ist eine ausführbare Datei und npm.cmd ist eine Befehlsfensterverknüpfung. Windows-Benutzer: npm.cmd kann über die Eingabeaufforderung verwendet werden, npm kann nur über die Befehlszeile ausgeführt werden. Kompatibilität: npm.cmd ist spezifisch für Windows-Systeme, npm ist plattformübergreifend verfügbar. Nutzungsempfehlungen: Windows-Benutzer verwenden npm.cmd, andere Betriebssysteme verwenden npm.
Was sind die globalen Variablen in NodeJS?
Apr 21, 2024 am 04:54 AM
Die folgenden globalen Variablen sind in Node.js vorhanden: Globales Objekt: global Kernmodul: Prozess, Konsole, erforderlich Laufzeitumgebungsvariablen: __dirname, __filename, __line, __column Konstanten: undefiniert, null, NaN, Infinity, -Infinity
Gibt es einen großen Unterschied zwischen NodeJS und Java?
Apr 21, 2024 am 06:12 AM
Die Hauptunterschiede zwischen Node.js und Java sind Design und Funktionen: Ereignisgesteuert vs. Thread-gesteuert: Node.js ist ereignisgesteuert und Java ist Thread-gesteuert. Single-Threaded vs. Multi-Threaded: Node.js verwendet eine Single-Threaded-Ereignisschleife und Java verwendet eine Multithread-Architektur. Laufzeitumgebung: Node.js läuft auf der V8-JavaScript-Engine, während Java auf der JVM läuft. Syntax: Node.js verwendet JavaScript-Syntax, während Java Java-Syntax verwendet. Zweck: Node.js eignet sich für I/O-intensive Aufgaben, während Java für große Unternehmensanwendungen geeignet ist.
Ist NodeJS eine Back-End-Entwicklungssprache?
Apr 21, 2024 am 05:09 AM
Ja, Node.js ist eine Backend-Entwicklungssprache. Es wird für die Back-End-Entwicklung verwendet, einschließlich der Handhabung serverseitiger Geschäftslogik, der Verwaltung von Datenbankverbindungen und der Bereitstellung von APIs.
So stellen Sie das NodeJS-Projekt auf dem Server bereit
Apr 21, 2024 am 04:40 AM
Serverbereitstellungsschritte für ein Node.js-Projekt: Bereiten Sie die Bereitstellungsumgebung vor: Erhalten Sie Serverzugriff, installieren Sie Node.js, richten Sie ein Git-Repository ein. Erstellen Sie die Anwendung: Verwenden Sie npm run build, um bereitstellbaren Code und Abhängigkeiten zu generieren. Code auf den Server hochladen: über Git oder File Transfer Protocol. Abhängigkeiten installieren: Stellen Sie eine SSH-Verbindung zum Server her und installieren Sie Anwendungsabhängigkeiten mit npm install. Starten Sie die Anwendung: Verwenden Sie einen Befehl wie node index.js, um die Anwendung zu starten, oder verwenden Sie einen Prozessmanager wie pm2. Konfigurieren Sie einen Reverse-Proxy (optional): Verwenden Sie einen Reverse-Proxy wie Nginx oder Apache, um den Datenverkehr an Ihre Anwendung weiterzuleiten
Welches soll man zwischen NodeJS und Java wählen?
Apr 21, 2024 am 04:40 AM
Node.js und Java haben jeweils ihre Vor- und Nachteile in der Webentwicklung, und die Wahl hängt von den Projektanforderungen ab. Node.js zeichnet sich durch Echtzeitanwendungen, schnelle Entwicklung und Microservices-Architektur aus, während Java sich durch Support, Leistung und Sicherheit auf Unternehmensniveau auszeichnet.
