Heim > Artikel > Web-Frontend > So erstellen Sie mit Nodejs einen Server für den Zugriff auf statische Ressourcendateien wie HTML, CSS und JS

So erstellen Sie mit Nodejs einen Server für den Zugriff auf statische Ressourcendateien wie HTML, CSS und JS

不言Original: 2018-06-12 14:08:263897Durchsuche

In diesem Artikel werden hauptsächlich die relevanten Kenntnisse zur Verwendung von Nodejs zum Erstellen eines Servers für den Zugriff auf statische Ressourcendateien wie HTML, CSS und JS vorgestellt. Hat einen sehr guten Referenzwert. Werfen wir einen Blick mit dem Editor unten

Um die Funktion eines nahegelegenen Shops zu testen, müssen Sie den Server zum Testen konfigurieren. Ich hatte ursprünglich vor, Apache zu verwenden, aber dann dachte ich, dass ich Front-End-Arbeit mache. Ich habe Nodejs schon lange nicht mehr verwendet. Warum also nicht das Wissen, das ich gelernt habe, nutzen, um es selbst zu konfigurieren?

Der erste Schritt, wie das Sprichwort sagt: Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen. Da Sie Node + Express zum Konfigurieren des Servers verwenden möchten, müssen Sie diese beiden großen Schätze natürlich zuerst installieren, wenn Sie es nicht auf Ihrem Computer haben.

1. Knoten installieren. Gehen Sie einfach auf die offizielle Website von Node, um es herunterzuladen und zu installieren. Fahren Sie einfach mit dem nächsten Schritt fort, und schon sind Sie fertig.

2.npm initialisiert das Projekt. Öffnen Sie das Terminal und geben Sie npm init -y ein. Hinweis: Wenn Sie -y nicht eingeben, müssen Sie einige Konfigurationen selbst schreiben. Wenn -y eingegeben wird, wird standardmäßig direkt eine package.json-Datei generiert.

3. Express installieren. Geben Sie npm i S express im Terminal ein und drücken Sie die Eingabetaste

Der zweite Schritt besteht darin, die Express-Konfigurationsdatei zu schreiben. Erstellen Sie eine neue app.js-Datei (der Dateiname kann beliebig sein, verwenden Sie jedoch keine Schlüsselwörter)

var express = require(&#39;express&#39;);
var path = require(&#39;path&#39;);
var app = express();

[color=#ff0000]app.use(express.static(path.join(__dirname, &#39;public&#39;)));[/color]

app.listen(4444, function() {
 console.log(&#39;App listening at port 8080;&#39;);
});

Der wichtigste Teil ist app.use(express.static(path.join(__dirname, 'public'))), Diese Codezeile fügt dem Ausdruck Middleware hinzu, legt den statischen Ressourcenpfad auf öffentlich fest und stellt alle HTML-, CSS-, JS- und anderen Dateien öffentlich dar

Der dritte Schritt erfolgt im öffentlichen Ordner Hinzufügen eine Testseite. Was ich hier schreibe, ist eine Seite mit dem Namen changeColor.html. Bei der Anzeige auf dem Mobiltelefon ändert sich der Bildschirm des Mobiltelefons horizontal und vertikal und das Gehäuse zeigt unterschiedliche Hintergrundfarben an.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>testExpress</title>
 <style type="text/css">
 body{background-color: yellow;}
 @media screen and (orientation:landscape){
  body{background-color: orange;}
 }
 </style>
</head>
<body>
</body>
</html>

Im vierten Schritt starten Sie nach dem Hinzufügen den Dienst.

Ich verwende hier sublime. Drücken Sie zweimal Strg+R. Wenn die Konsole „App lauscht an Port 4444“ ausgibt, bedeutet dies, dass der Dienst erfolgreich gestartet wurde. Öffnen Sie den Browser und geben Sie http://localhost/4444/changeColor.html

in die Adressleiste ein, um die Testwebseite anzuzeigen. Wenn Sie localhost durch die IP Ihres Rechners ersetzen, kann die ersetzte Adresse auf Ihrem Mobiltelefon angezeigt werden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

JS- und CSS-Code zur Implementierung von Hintergrundeffekten mit Farbverlauf

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit Nodejs einen Server für den Zugriff auf statische Ressourcendateien wie HTML, CSS und JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Vue + iView Excel-Tabelle exportierenNächster Artikel：Vue + iView Excel-Tabelle exportieren

In Verbindung stehende Artikel

Mehr sehen