Heim > Web-Frontend > js-Tutorial > Hauptteil

Serverseitige JavaScript-Programmierung mit node.js

高洛峰
Freigeben: 2016-11-26 13:16:35
Original
1037 Leute haben es durchsucht

Einfach ausgedrückt ist node.js ein Framework, das es Entwicklern ermöglicht, serverseitigen Code mithilfe der JavaScript-Sprache zu schreiben. Mit anderen Worten: Der geschriebene JavaScript-Code kann direkt auf dem lokalen Computer ausgeführt werden, nicht nur im Browser. Aus Implementierungssicht verwenden sowohl Jaxer als auch node.js vorhandene JavaScript-Ausführungs-Engines. Jaxer verwendet die in Mozilla Firefox verwendete JavaScript-Engine, während node.js die in Google Chrome verwendete V8-Engine verwendet.

Erste Schritte mit node.js

node.js kann auf gängigen Betriebssystemen wie Linux, Windows und Macintosh ausgeführt werden. Wenn Sie node.js auf der Windows-Plattform ausführen, benötigen Sie die Unterstützung von Cygwin oder MinGW. Im Folgenden wird zur Veranschaulichung die häufig verwendete Windows-Plattform als Beispiel verwendet. Zuerst müssen Sie Cygwin installieren. Bei der Installation müssen Sie die Pakete gcc-g++, make, openssl und python auswählen. Die Version von gcc muss die neueste sein. Laden Sie dann den Quellcode von node.js Version 0.4.0 von der unter Ressourcen angegebenen Adresse herunter. Führen Sie nach dem Herunterladen und Dekomprimieren Befehle wie ./configure, make und make install in Cygwin aus, um zu kompilieren und zu installieren. Führen Sie nach Abschluss der Installation den Knotenbefehl direkt aus, um die von node.js bereitgestellte Befehlszeile zu starten. JavaScript-Code kann direkt in die Befehlszeile eingegeben und ausgeführt werden. Sie können auch eine JavaScript-Datei server.js über den Knoten server.js ausführen.

Ein Beispiel für ein einfaches „Hello World“-Programm finden Sie in Code Listing 1. Nachdem die JavaScript-Datei über den Knoten helloworld.js ausgeführt wurde, wird „Hello World“ auf der Konsole ausgegeben.


Listing 1. „Hello World“-Programm mit node.js
process.stdout.write("Hello World");

Prozessdarstellung in Code-Listing 1 ist die Der aktuell ausgeführte node.js-Prozess und sein Attribut stdout stellen den Standardausgabestream des Prozesses dar. Schreiben Sie mit der Methode write() eine Zeichenfolge in den Stream. Wie Sie Codelisting 1 entnehmen können, können Sie mit JavaScript auf Ressourcen auf dem lokalen System zugreifen, beispielsweise auf den Standardausgabestream. Dies spiegelt einerseits die Leistungsfähigkeit von node.js wider.

In JavaScript-Code, der von node.js ausgeführt werden kann, können Sie einige globale Objekte verwenden: einschließlich des in Codelisting 1 verwendeten Prozesses, der unten vorgestellten require()-Methode zum Laden von Modulen und des aktuellen __filename von der Name der ausgeführten JavaScript-Datei, __dirname gibt das Verzeichnis der aktuell ausgeführten JavaScript-Datei an und die Methoden setTimeout() und setInterval() ähneln denen, die in Browsern zum Ausführen geplanter Aufgaben verwendet werden.

Nachdem die Grundkenntnisse von node.js vorgestellt wurden, wird im Folgenden die modulare Struktur von node.js vorgestellt.

Zurück nach oben

Modularer Aufbau

node.js verwendet das von CommonJS definierte Modulsystem. Verschiedene Funktionskomponenten sind in verschiedene Module unterteilt. Anwendungen können je nach Bedarf geeignete Module verwenden. Jedes Modul stellt einige öffentliche Methoden oder Eigenschaften bereit. Modulbenutzer können diese Methoden oder Eigenschaften direkt verwenden, ohne sich um die Implementierungsdetails innerhalb des Moduls kümmern zu müssen. Zusätzlich zu den vom System voreingestellten mehreren Modulen kann das Anwendungsentwicklungsteam diesen Mechanismus auch nutzen, um die Anwendung in mehrere Module aufzuteilen und so die Wiederverwendbarkeit des Codes zu verbessern.

Module verwenden

Die Verwendung eines Moduls in node.js ist sehr einfach. Bevor Sie ein Modul verwenden, müssen Sie seine Abhängigkeit von ihm deklarieren. Sie können die globale Funktion require() direkt im JavaScript-Code verwenden, um ein Modul zu laden. Beispielsweise kann require("http") das voreingestellte http-Modul des Systems laden. Und require("./myModule.js") wird verwendet, um das Modul myModule.js in dasselbe Verzeichnis wie die aktuelle JavaScript-Datei zu laden. Wenn der Pfad, der require() verwendet, mit „/“ beginnt, wird er als absoluter Pfad der Modul-JavaScript-Datei auf dem Betriebssystem betrachtet. Wenn beides nicht der Fall ist, versucht node.js, im Verzeichnis node_modules unter dem übergeordneten Verzeichnis der aktuellen JavaScript-Datei und ihren Vorgängerverzeichnissen zu suchen. Wenn beispielsweise require("other.js") im Verzeichnis /usr/home/my.js aufgerufen wird, versucht node.js, die folgenden Dateien der Reihe nach zu finden: /usr/home/node_modules/other.js, /usr/node_modules/other .js und /node_modules/other.js. Der Rückgabewert der

require()-Methode ist das vom Modul bereitgestellte öffentliche JavaScript-Objekt, das verfügbare Methoden und Eigenschaften enthält. Codelisting 2 zeigt die grundlegende Verwendung des Moduls.


Listing 2. Grundlegende Verwendung des Moduls
var Greetings = require("./greetings.js");
var msg = Greetings.sayHello("Alex", "zh_CN ");
process.stdout.write(msg);

Wie in Codeauflistung 2 gezeigt, wird der Rückgabewert der require()-Methode im Allgemeinen einer Variablen zugewiesen und direkt im JavaScript-Code verwendet Dies Variable reicht aus. Das Modul Greetings.js stellt eine sayHello()-Methode bereit, die direkt vom aktuellen JavaScript-Code verwendet wird.

Entwickeln Sie Ihre eigenen Module

Die grundlegende Arbeit bei der Entwicklung eines eigenen Moduls besteht darin, den modulbezogenen Code in die dem Modul entsprechende JavaScript-Datei zu schreiben. Dies kapselt die interne Verarbeitungslogik des Moduls. Im Allgemeinen stellt ein Modul seinen Benutzern einige öffentliche Methoden oder Eigenschaften zur Verfügung. Der interne Code des Moduls muss diese Methoden oder Eigenschaften verfügbar machen. Listing 3 zeigt den Inhalt der in Listing 2 verwendeten Datei Greetings.js.


Listing 3. Inhalt des Greetings.js-Moduls
var language ​​= {
"zh_CN" : "Hallo,",
"en" : "Hallo, "
};
exports.sayHello = function(name, language) {
return states[sprache] || sprachen["en"] + name;

Such als Code Wie in Listing 3 gezeigt, handelt es sich bei den Inhalten des exports-Objekts um die Inhalte, die im Rückgabewert des Modulbenutzers enthalten sind, der die Methode require() aufruft. Auf diese Weise deklariert ein Modul die öffentlichen Methoden und Eigenschaften, die es offenlegt. In einem Modul definierte Variablen, beispielsweise Sprachen, sind nur für Code innerhalb des Moduls sichtbar.

Wenn ein Modul viele Inhalte enthält, kann es auch in Ordnern organisiert werden. Sie können im Stammverzeichnis des Ordners eine package.json-Datei erstellen, deren Inhalt den Namen des Moduls und den Pfad zur JavaScript-Eintragsdatei enthält. Wenn diese package.json-Datei nicht bereitgestellt wird, sucht node.js standardmäßig nach der index.js-Datei im Ordner als Start-JavaScript-Datei des Moduls.

Nachdem wir die modulare Struktur von node.js vorgestellt haben, stellen wir nun seinen ereignisgesteuerten Mechanismus vor.

Zurück nach oben

Ereignisgesteuert

Jeder, der Webanwendungen entwickelt hat, ist mit dem Mechanismus zur Ereignisbehandlung in Browsern vertraut. Wenn Sie an einem bestimmten Ereignistyp für ein bestimmtes DOM-Element interessiert sind, müssen Sie lediglich einen Ereignis-Listener für das DOM-Element registrieren. Beispielsweise fügt ele.addEventListener("click", function() {}) einen Listener für das Click-Ereignis hinzu. Wenn ein Ereignis auftritt, wird die JavaScript-Methode des Ereignis-Listeners aufgerufen. Ereignisverarbeitungsmethoden werden asynchron ausgeführt. Diese asynchrone Ausführungsmethode eignet sich sehr gut für die Entwicklung leistungsstarker gleichzeitiger Netzwerkanwendungen. Tatsächlich gibt es im Allgemeinen zwei Ansätze für die Entwicklung gleichzeitiger Hochleistungsanwendungen: Der erste besteht darin, einen Multithreading-Mechanismus zu verwenden, und der andere darin, einen ereignisgesteuerten Ansatz zu verwenden. Das Problem bei Multithreading besteht darin, dass es schwierig ist, Anwendungen zu entwickeln, und dass häufig Probleme wie Thread-Aushungerung oder Deadlock auftreten, was höhere Anforderungen an Entwickler stellt. Der ereignisgesteuerte Ansatz ist flexibler, für Webentwickler einfacher zu verstehen und zu verwenden und weist keine Probleme wie Thread-Deadlocks auf. Basierend auf der leistungsstarken Google V8-Engine und der fortschrittlichen Event-I/O-Architektur kann node.js eine gute Grundlage für die Erstellung leistungsstarker serverseitiger Anwendungen sein.

Die Entwicklung von Anwendungen auf Basis von node.js hat ein ähnliches Programmiermodell wie die Entwicklung von Webanwendungen. Viele Module machen einige Ereignisse verfügbar, und der Code, der diese Module verwendet, kann durch die Registrierung von Ereignis-Listenern entsprechende Verarbeitungslogik hinzufügen. Codelisting 4 zeigt den Implementierungscode eines einfachen HTTP-Proxyservers.

Listing 4. HTTP-Proxyserver
var http = require("http");
var url = require("url");

http.createServer(function (req, res) {
var urlObj = url.parse(req.url, true); // Holen Sie sich die Proxy-URL
var urlToProxy = urlObj.query.url;
if (!urlToProxy) {
res.statusCode = 400;
res.end("URL ist erforderlich.");
}
else {
console.log( "Handle Proxy-Anfragen:" + urlToProxy);
var parsedUrl = url.parse(urlToProxy);
var opt = {
host: parsedUrl.hostname,
port: parsedUrl.port || 80 . Opt , Funktion (Pres) {// Fordern Sie den Inhalt der Proxy-URL an
Res.Statuscode = Pres.statuscode;
varhealthrs = Pres.headers;
für (VAR-Schlüssel in Headern) {
res.setHeader(key, headers[key]);
}
}
pres.on("data", function(chunk) {
res.write(chunk); // Zurückschreiben data
}); PRES.ON ("End", Function () {
Res.end ();
}); }). (8088, "127.0.0.1");

console.log("Der Proxyserver wurde auf Port 8088 gestartet. ");

Die Implementierung des gesamten Proxyservers ist relativ einfach. Erstellen Sie zunächst einen HTTP-Server über die Methode createServer() im http-Modul und verwenden Sie dann die Methode listen(), um den HTTP-Server zuzulassen Der in der Methode createServer() übergebene Parameter ist die Antwortmethode der HTTP-Anfrage. Tatsächlich entspricht jede HTTP-Anfrage einem Anforderungsereignis auf dem HTTP-Server eigentlich gleichwertig. Die in Codeliste 5 angegebene Implementierungsmethode


Listing 5. HTTP-Server-Erstellungsmethode mit Ereignismechanismus

var server = http.createServer();

server.on( " request", function(req, res) {

});

In der Anforderungsverarbeitungsmethode wird der Inhalt der Proxy-URL über die http.get()-Methode abgerufen. Ereignisverarbeitungsmethode: pres .on("data", function(chunk) {}) fügt dem Datenereignis von pres eine Verarbeitungsmethode hinzu. Die Funktion dieser Methode besteht darin, den Inhalt der Proxy-URL abzurufen Dasselbe gilt für die Verarbeitung des Endereignisses. Bei der Entwicklung mit node.js werden Sie häufig auf dieses Szenario stoßen, bei dem Ereignisverarbeitungsmethoden und Rückrufmethoden verwendet werden. Angetriebener Mechanismus von node.js, hier sind einige häufig verwendete Module


Zurück nach oben

Gemeinsame Module

node.js. Eine Reihe von Modulen im Zusammenhang mit Netzwerk und Dateisystem Vorgänge werden standardmäßig bereitgestellt. Diese Module bilden die Grundlage für die Erstellung serverseitiger Anwendungen:

Ereignismodul

Wie bereits erwähnt, übernimmt node.js eine ereignisgesteuerte Funktion Architektur und viele seiner Module können von Modulbenutzern hinzugefügt werden. Alle Objekte, die Ereignisse generieren können, befinden sich in der EventEmitter-Klasse Klasse beziehen sich wie folgt auf die Generierung und Verarbeitung von Ereignissen:

addListener(event, listener) und on(event, listener): Diese beiden Methoden werden verwendet, um einem bestimmten Ereignisereignis einen Ereignisverarbeitungsmethoden-Listener hinzuzufügen.
once(event, listener): Diese Methode fügt einen Verarbeitungsmethoden-Listener hinzu, der nur einmal für ein Ereignisereignis ausgeführt wird. Die Verarbeitungsmethode wird nach einmaliger Ausführung gelöscht.
removeListener(event, listener): Diese Methode wird verwendet, um den Handler-Listener für ein Ereignisereignis zu löschen.
emit(event, [arg1], [arg2], [...]): Diese Methode wird verwendet, um ein Ereignisereignis zu generieren. Die Parameter nach dem Ereignisnamen event werden an die entsprechende Ereignisbehandlungsmethode übergeben.
Codeauflistung 6 gibt ein Beispiel für die Verwendung des Ereignismoduls.


Listing 6. Beispiel für die Verwendung eines Ereignismoduls
var events = require("events");
var emitter = new events.EventEmitter();
emitter.on( "myEvent", function(msg) {
console.log(msg);
});
emitter.emit("myEvent", "Hello World.");

at Es liegt ein besonderer Ereignisfehler im Ereignismodul vor. EventEmitter generiert dieses Ereignis, wenn ein Fehler auftritt. Wenn für dieses Ereignis keine entsprechende Behandlungsmethode vorhanden ist, besteht das Standardverhalten darin, das Programm nach Ausgabe einer Fehlermeldung automatisch zu beenden. Achten Sie daher darauf, immer einen Handler für das Fehlerereignis hinzuzufügen.

Streams

Es gibt eine Vielzahl verschiedener Datenflüsse in node.js, einschließlich Dateisystemen, HTTP-Anfragen und -Antworten sowie TCP/UDP-Verbindungen usw. Diese Streams sind alle Instanzen von EventEmitter und können daher eine Vielzahl unterschiedlicher Ereignisse erzeugen. Streams können in drei Typen unterteilt werden: schreibgeschützte, schreibgeschützte und Lese-Schreib-Streams.

Der lesbare Stream generiert hauptsächlich 4 Ereignisse:

Daten: Dieses Ereignis wird generiert, wenn die Daten im Stream gelesen werden.
Ende: Dieses Ereignis wird generiert, wenn im Stream keine Daten zum Lesen vorhanden sind.
Fehler: Dieses Ereignis wird generiert, wenn beim Lesen von Daten ein Fehler auftritt.
close: Dieses Ereignis wird generiert, wenn der Stream geschlossen wird.
Zusätzlich zu den oben genannten Ereignissen gibt es auch eine Pipe()-Methode, mit der der aktuell lesbare Stream mit einem anderen beschreibbaren Stream verbunden werden kann. Daten im lesbaren Stream werden automatisch in den beschreibbaren Stream geschrieben.

Die am häufigsten verwendeten Methoden in beschreibbaren Streams sind write() und end(). Die Methode write() wird verwendet, um Daten in den Stream zu schreiben, und end() wird verwendet, um den Schreibvorgang zu beenden.

Um Binärdaten darzustellen, verwendet node.js die Klasse Buffer, um den Datenpuffer für die Verarbeitung von Binärdaten darzustellen. Die Buffer-Klasse speichert Daten intern in Form von Arrays. Nach der Erstellung kann die Größe des Puffers nicht mehr geändert werden. Instanzen der Buffer-Klasse können in JavaScript in und aus String-Typen konvertiert werden. Beim Konvertieren müssen Sie das Codierungsformat angeben. Der Inhalt von Anfang bis Ende im Puffer kann durch Codierung über die toString-Methode (Encoding, Start, Ende) der Buffer-Klasse in eine codierte Zeichenfolge umgewandelt werden. Unterstützte Kodierungsformate sind: ASCII, UTF8 und Base64. Ein Puffer kann mit einem String str über new Buffer(str, Encoding) initialisiert werden. write(String, Offset, Encoding) wird verwendet, um eine Zeichenfolge im Codierungsformat Encoding an die Position zu schreiben, die beim Offset im Puffer beginnt.

Netzwerkoperationen

node.js bietet einige Module im Zusammenhang mit Netzwerkoperationen, einschließlich TCP, UDP und HTTP usw., die Netzwerkserver und -clients implementieren können.

Die Implementierung des TCP-Protokolls befindet sich im Netzmodul. Ein TCP-Server kann über die Methode createServer(connectionListener) dieses Moduls erstellt werden. Der Parameter ConnectionListener ist die Verarbeitungsmethode, wenn ein Client eine Verbindung zum Server herstellt, was der Verarbeitung des Verbindungsereignisses entspricht. Ein TCP-Server ist eine Instanz der Klasse Server. Die Listen-Methode ermöglicht es dem Server, einen angegebenen Port abzuhören.

Wenn Sie eine Verbindung zu einem vorhandenen TCP-Server herstellen möchten, können Sie die Methode createConnection(port, host) verwenden, um eine Verbindung zum Port-Port des angegebenen Host-Hosts herzustellen. Der Rückgabewert dieser Methode ist eine Instanz der Socket-Klasse, die eine Socket-Verbindung darstellt. Nachdem Sie eine Instanz der Socket-Klasse erhalten haben, können Sie über die Methode write() Daten in die Verbindung schreiben. Wenn Sie Daten von dieser Verbindung abrufen möchten, können Sie eine Methode zur Datenereignisbehandlung hinzufügen.

Ein einfacher TCP-Server für die Ausdrucksberechnung ist in Codelisting 7 angegeben. Sie können zum Testen eine Verbindung zu diesem Server über den Telnet-Befehl herstellen.


Listing 7. Einfacher Ausdrucksauswertungsserver
var net = require("net");
var server = net.createServer(function(socket) {
socket.setEncoding( "utf8 ");
var buffer = [], len = 0;
socket.on("data", function(data) { // Client-Daten empfangen
if (data.charCodeAt( 0) == 13) {
var expr = buffer.join("");
try {
var result = eval(expr); // Berechnen
socket.write(resul t. toString()) ; // Ergebnis zurückschreiben });
server.listen (8180, "127.0.0.1");
console.log("Der Server wurde auf Port 8180 gestartet.");

Zusätzlich zum TCP-Server können die Module http und https sein HTTP- und HTTPS-Server werden separat implementiert, das Modul dgram kann UDP/Datagram-Socket-Verbindungen implementieren und das Modul tls kann sichere Socket-Verbindungen (SSL) implementieren. Diese Module werden alle ähnlich wie das TCP-Modul verwendet.

Dateisystem

Das fs-Modul in node.js wird zum Betrieb des lokalen Dateisystems verwendet. Mit den im fs-Modul bereitgestellten Methoden können grundlegende Dateivorgänge ausgeführt werden, darunter Lesen, Schreiben, Umbenennen, Erstellen und Löschen von Verzeichnissen sowie das Abrufen von Dateimetadaten. Für jede Methode zum Bearbeiten von Dateien gibt es sowohl synchrone als auch asynchrone Versionen. Die asynchrone Version des Vorgangs verwendet immer eine Rückrufmethode als letzten Parameter. Wenn der Vorgang abgeschlossen ist, wird die Rückrufmethode aufgerufen. Der erste Parameter der Callback-Methode ist immer für mögliche Ausnahmen im Betrieb reserviert. Wenn der Vorgang ordnungsgemäß erfolgreich ist, ist der Wert des ersten Parameters null oder undefiniert. Der Methodenname der synchronen Betriebsversion wird mit einem Sync als Suffix nach der entsprechenden asynchronen Methode hinzugefügt. Die synchrone Version der asynchronen rename()-Methode ist beispielsweise renameSync(). Nachfolgend sind einige gängige Methoden im fs-Modul aufgeführt. Es wird nur die asynchrone Betriebsversion vorgestellt.

rename(path1, path2): Benennen Sie das durch path1 dargestellte Verzeichnis oder die Datei in path2 um.
truncate(fd, len): Kürzet die Länge der Datei, die dem Dateideskriptor fd entspricht, auf len.
chmod(Pfad, Modus): Ändern Sie die Berechtigungen des durch den Pfad dargestellten Verzeichnisses oder der Datei in den Modus.
stat(path): Rufen Sie die Metadaten des durch den Pfad dargestellten Verzeichnisses oder der Datei ab. Metadaten werden mithilfe der Stats-Klasse dargestellt.

open(path, flags, mode): Öffnet eine durch den Pfad dargestellte Datei. Der Dateideskriptor kann in der Callback-Methode abgerufen werden.

read(fd, buffer, offset, length, position): Lesen Sie die Daten der Längenbytes ab der Position in der Datei, die durch den angegebenen Dateideskriptor fd dargestellt wird, und speichern Sie sie am Anfang im Pufferpuffer Position. Die tatsächliche Anzahl der gelesenen Bytes kann in der Callback-Methode ermittelt werden.

write(fd, buffer, offset, length, position): Schreiben Sie die Daten im Pufferpuffer in die Datei, die durch den Dateideskriptor fd dargestellt wird. Die Bedeutung der Parameter ist dieselbe wie bei der Methode read(). Die tatsächliche Anzahl der geschriebenen Bytes kann in der Callback-Methode ermittelt werden.

readFile(Dateiname, Kodierung): Liest den Inhalt einer Datei Dateiname im Kodierungsformat Kodierung. Der Inhalt der Datei kann in der Callback-Methode abgerufen werden.

writeFile (Dateiname, Daten, Kodierung): Schreiben Sie die Datendaten in die Datei Dateiname im Kodierungsformat Kodierung.

Zusätzlich zu den oben aufgeführten Methoden zum direkten Bearbeiten der Datei selbst können Sie die Datei auch in einen Stream konvertieren. createReadStream(path, options) und createWriteStream(path, options) werden verwendet, um lesbare bzw. beschreibbare Streams aus Dateien zu erstellen. Der Parameterpfad stellt den Pfad zur Datei dar, und Optionen ist ein JavaScript-Objekt, das Optionen beim Lesen oder Schreiben der Datei darstellt.

Die Implementierung eines einfachen HTTP-statischen Dateiservers ist in Code Listing 8 angegeben.


Listing 8. Statischer HTTP-Dateiserver
var http = require("http"),
fs = require("fs"),
path = require("path"),
url = require("url");

var server = http.createServer(function(req, res) {
var pathname = url.parse(req.url).pathname;
var filepath = path.join("/tmp", "wwwroot", pathname);
var stream = fs.createReadStream(filepath, {flags : "r", binding : null});
stream .on("error", function() {
res.writeHead(404);
res.end();
});
stream.pipe(res);
} );
server.on("error", function(error) {
console.log(error);
});
server.listen(8088, "127.0.0.1");

Wie in Codeliste 8 gezeigt, konvertieren Sie zunächst den Pfad der HTTP-Anforderung in einen Dateipfad auf dem Server, erstellen Sie dann einen lesbaren Stream aus der Datei und leiten Sie schließlich den Dateidatenstrom an die HTTP-Anforderung weiter die Methode „pipe()“ als Antwort.

Hilfsmodule

Zusätzlich zu den oben vorgestellten allgemeinen Modulen bietet node.js auch einige Hilfsmodule.

Der Modulpfad wird verwendet, um Pfade im Dateisystem zu verwalten. join() wird in diesem Modul verwendet, um mehrere Pfade zu einem vollständigen Pfad zu verbinden. Das Ergebnis von join("/usr", "home", "test/index.html") ist beispielsweise der Pfad /usr/home/test/index.html. normalize() wird verwendet, um den Pfad zu normalisieren, überflüssiges „/“ zu entfernen und „..“ und „.“ zu verarbeiten. Die Methode „resolve([from ...], to)“ wird verwendet, um den absoluten Pfad des angegebenen Pfads zu zu erhalten. Wenn to kein absoluter Pfad ist, addieren Sie die vorherigen Parameter von rechts nach links, bis Sie einen absoluten Pfad erhalten. Wenn der absolute Pfad am Ende nicht ermittelt werden kann, fügen Sie das aktuelle Arbeitsverzeichnis hinzu. Unter der Annahme, dass das aktuelle Arbeitsverzeichnis /usr/home ist, lautet das Rückgabeergebnis von „resolve(“test“, „index.html“) /usr/home/test/index.html. Die Methode dirname() wird verwendet, um den Verzeichnisteil des Pfads abzurufen. Das Rückgabeergebnis von dirname("/usr/home/index.html") ist beispielsweise /usr/home. basename() wird verwendet, um den letzten Teil des Pfads abzurufen. Das Rückgabeergebnis von Basisname("/usr/home/index.html") ist beispielsweise index.html. extname() wird verwendet, um den Dateierweiterungsteil eines Pfads abzurufen. Das Rückgabeergebnis von extname("/usr/home/index.html") ist beispielsweise .html.

Die Modul-URL wird zum Parsen von URLs verwendet. Die Methode parse(urlStr, parseQueryString) wird verwendet, um eine URL-Zeichenfolge urlStr in mehrere Teile wie Hostname, Port und Pfad zu analysieren. Der Rückgabewert dieser Methode ist ein JavaScript-Objekt, das Eigenschaften wie Protokoll, Hostname, Port, Pfadname und Abfrage enthält. Wenn der Wert des Parameters parseQueryString „true“ ist, wird auch der in der URL enthaltene Teil der Abfragezeichenfolge analysiert. Die format(urlObj)-Methode ist das Gegenteil der parse()-Methode und wird zum Erstellen einer URL-Zeichenfolge aus einem JavaScript-Objekt verwendet.

Das Modul Querystring dient zur Verarbeitung von Query-Strings in URLs. Die Methode stringify(obj) wird verwendet, um ein JavaScript-Objekt obj in das Abfragezeichenfolgenformat zu konvertieren. Beispielsweise gibt stringify({a : 1, b : "good"}) a=1&b=good zurück. parse(str) wird verwendet, um eine Abfragezeichenfolge in ein JavaScript-Objekt zu analysieren.

Mit dem Modul vm kann JavaScript-Code ausgeführt werden. Die Methode runInThisContext(code) wird verwendet, um einen Teil des JavaScript-Codecodes auszuführen und seine Ergebnisse zurückzugeben. JavaScript-Code, der über diese Methode ausgeführt wird, kann nicht auf den Umfang des aktuellen Codes zugreifen. Die runInNewContext(code, [sandbox])-Methode wird auch zum Ausführen von JavaScript-Code verwendet. Im Gegensatz zu runInThisContext() verwendet der über diese Methode ausgeführte JavaScript-Code das Sandbox-Objekt als globales Objekt. Das Rückgabeergebnis von runInNewContext("a + 3", {a : 4}) ist beispielsweise 7. Mit der Methode createScript(code) wird ein JavaScript-Code vorkompiliert, dieser jedoch nicht sofort ausgeführt. Der Rückgabewert dieser Methode ist ein Script-Objekt. Dieses Objekt verfügt außerdem über zwei Methoden, runInThisContext() und runInNewContext([sandbox]), die ähnliche Bedeutungen wie die beiden oben genannten Methoden haben.

Modul os stellt einige Informationen zum zugrunde liegenden Betriebssystem bereit. Einschließlich hostname() wird verwendet, um den Hostnamen des Betriebssystems abzurufen; type() wird verwendet, um die Versionsnummer des Betriebssystems abzurufen; um die Systemlaufzeit in Sekunden zu erhalten, wird ;cpus() verwendet, um CPU-bezogene Informationen zu erhalten. freemem() und totalmem() werden verwendet, um den Gesamtspeicher bzw. den verfügbaren Speicher des Systems zu ermitteln.

Das Modul util stellt einige häufig verwendete Hilfsmethoden bereit. Die Methode debug(string) wird verwendet, um Informationen an den Standardfehlerstrom auszugeben. Die Methode log(string) wird verwendet, um Informationen mit Zeitstempeln im Standardausgabestream auszugeben. Die Methode „inspect(object, showHidden, Depth)“ wird verwendet, um die interne Struktur eines Objekts auszugeben. Der Parameter „object“ gibt an, ob die verborgenen Attribute des Objekts angezeigt werden sollen Die angezeigte Hierarchie ist standardmäßig auf 2 eingestellt. Die Methode inherits(constructor, superConstructor) wird verwendet, um den prototypbasierten Vererbungsmechanismus in JavaScript zu implementieren.

Nach der Einführung der von node.js bereitgestellten allgemeinen Module finden Sie hier ein vollständiges Beispiel, um die Verwendung von node.js zu veranschaulichen.

Zurück zum Anfang

Instanzanalyse

Die in diesem Beispiel implementierte Funktion besteht darin, den Speichernutzungsstatus des Servers, also die Speicherbelegungsrate, dynamisch zu überwachen. Das Ermitteln der Speichernutzung auf dem Server ist relativ einfach. Sie müssen lediglich die vom Betriebssystemmodul bereitgestellte Methode verwenden, nämlich freemem ()/totalmem (). Um die Speicherbelegung in Echtzeit zu überwachen, muss der Server Daten in Echtzeit an den Browser übertragen. Die beste Implementierung ist hier die in HTML 5 eingeführte WebSocket-Spezifikation. Diese Spezifikation wird in neuen Browsern wie Firefox 4 und Google Chrome unterstützt. Gleichzeitig muss auch die Serverseite diese Spezifikation unterstützen. Socket.IO bietet Unterstützung für die WebSocket-Spezifikation auf node.js, einschließlich serverseitigem und browserseitigem Code. Codelisting 9 zeigt den serverseitigen Code mit Socket.IO.


Listing 9. Serverseitiger Code zur Überwachung der Speichernutzung
var io = require('./socket.io');
var io = io.listen(server);
io.on("connection", function(client){
setInterval(function() {
client.send(os.freemem() / os.totalmem());
}, 500);
});

In Codelisting 9 ist Server ein HTTP-Serverobjekt in node.js, das zur Beantwortung allgemeiner HTTP-Anfragen verwendet wird. Socket.IO kann Anfragen vom HTTP-Server node.js abfangen und einige Anfragen zur Verarbeitung an Socket.IO übergeben. Die Verarbeitungslogik besteht hier darin, dass bei der Verbindung eines Clients alle 500 Millisekunden die Speichernutzung des Servers an den Client gesendet wird. Codelisting 10 zeigt den browserseitigen HTML- und JavaScript-Code.


Listing 10. Browserseitiger Code zur Überwachung der Speichernutzung



Serverspeichernutzung< ;/title><br> <script src="/socket.io/socket.io.js"></script><br> <style><br> #usage {border: 1px gestrichelt grün; }  < h1> Speichernutzung<br>  <canvas id="usage" width="200" height="200">< ;/canvas><br> </ html><br><br><br><br></p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>Verwandte Etiketten:</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/de/search?word=javascript" target="_blank">javascript</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">Quelle:php.cn</div> </div> <div class="wzconOtherwz"> <a href="http://www.php.cn/de/faq/341228.html" title="Objektinstanz des JavaScript-Protokollvorgangs"> <span>Vorheriger Artikel:Objektinstanz des JavaScript-Protokollvorgangs</span> </a> <a href="http://www.php.cn/de/faq/341232.html" title="Bringen Sie Ihnen bei, wie Sie reguläre JavaScript-Ausdrücke verwenden"> <span>Nächster Artikel:Bringen Sie Ihnen bei, wie Sie reguläre JavaScript-Ausdrücke verwenden</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">Erklärung dieser Website</div> <div>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</div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Neueste Artikel des Autors</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/de/faq/354750.html">Beispiele für HTML-Einstellungen für Fett, Kursiv, Unterstrichen, Durchgestrichen und andere Schrifteffekte</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/de/faq/338018.html">实现一个 Java 版的 Redis</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/de/faq/353509.html">Die einfachste WeChat-Applet-Demo</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/de/faq/356272.html">Einführung in einfache Betriebsmethoden von pandas.DataFrame (Erstellen, Indizieren, Hinzufügen und Löschen) in Python</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/de/faq/354839.html">WeChat Mini-Programm: Beispiel für die Implementierung des Tab-Effekts</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/de/faq/354423.html">Python erstellt benutzerdefinierte Methoden, um die Ausgabe der Wörterbuchstruktur zu verschönern</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/de/faq/350853.html">HTML5: Verwenden Sie Canvas, um Videos in Echtzeit zu verarbeiten</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/de/faq/346502.html">Asp.net verwendet SignalR zum Senden von Bildern</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/de/faq/354842.html">WeChat Mini-Programmentwicklungs-Tutorial – Übersicht über die Funktionen von App() und Page()</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/de/faq/356574.html">Ausführliche Erklärung zur Verwendung von Python Redis</a> </div> <div>1970-01-01 08:00:00</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Aktuelle Ausgaben</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/de/wenda/176376.html" target="_blank" title="Reine CSS-Methode zum dynamischen Ändern der Bildquelle beim Klicken ohne Verwendung von JavaScript" class="wdcdcTitle">Reine CSS-Methode zum dynamischen Ändern der Bildquelle beim Klicken ohne Verwendung von JavaScript</a> <a href="http://www.php.cn/de/wenda/176376.html" class="wdcdcCons">Ich muss den Quellcode eines Bildes per Mausklick ändern, indem ich nur CSS wie img:active...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Aus 2024-04-06 19:25:49</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>505</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/de/wenda/176368.html" target="_blank" title="Streudiagrammpunkte behalten beim Zoomen in d3.js keine Werte bei" class="wdcdcTitle">Streudiagrammpunkte behalten beim Zoomen in d3.js keine Werte bei</a> <a href="http://www.php.cn/de/wenda/176368.html" class="wdcdcCons">Dies ist das erste Mal, dass ich d3.js verwende. Bitte haben Sie Geduld. Ich habe es als r...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Aus 2024-04-06 18:16:26</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>403</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/de/wenda/176347.html" target="_blank" title="JavaScript-Hover-Ereignisse für herstellerspezifische Pseudoelemente" class="wdcdcTitle">JavaScript-Hover-Ereignisse für herstellerspezifische Pseudoelemente</a> <a href="http://www.php.cn/de/wenda/176347.html" class="wdcdcCons">我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Aus 2024-04-06 15:35:24</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>274</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/de/wenda/176343.html" target="_blank" title="Formular ohne Schaltfläche mit Javascript/Jquery senden" class="wdcdcTitle">Formular ohne Schaltfläche mit Javascript/Jquery senden</a> <a href="http://www.php.cn/de/wenda/176343.html" class="wdcdcCons">Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Aus 2024-04-06 14:54:03</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>2</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>421</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/de/wenda/176324.html" target="_blank" title="Passen Sie das Erscheinungsbild von Bootstrap-Akkordeon-Headern mithilfe der CollapseDisplay-Klasse an" class="wdcdcTitle">Passen Sie das Erscheinungsbild von Bootstrap-Akkordeon-Headern mithilfe der CollapseDisplay-Klasse an</a> <a href="http://www.php.cn/de/wenda/176324.html" class="wdcdcCons">Ich möchte den Kartentitel eines Panels mit der Klasse Collapseshow formatieren. In diesem...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Aus 2024-04-06 12:53:11</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>376</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>verwandte Themen</div> <a href="http://www.php.cn/de/faq/zt" target="_blank">Mehr> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/de/faq/jsszcd"><img src="https://img.php.cn/upload/subject/202407/22/2024072214415543594.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="So erhalten Sie die Länge eines Arrays in js" /> </a> <a target="_blank" href="http://www.php.cn/de/faq/jsszcd" class="title-a-spanl" title="So erhalten Sie die Länge eines Arrays in js"><span>So erhalten Sie die Länge eines Arrays in js</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/de/faq/jssxym"><img src="https://img.php.cn/upload/subject/202407/22/2024072214363232433.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js aktuelle Seite aktualisieren" /> </a> <a target="_blank" href="http://www.php.cn/de/faq/jssxym" class="title-a-spanl" title="js aktuelle Seite aktualisieren"><span>js aktuelle Seite aktualisieren</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/de/faq/jssswr"><img src="https://img.php.cn/upload/subject/202407/22/2024072214362363697.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js Rundung" /> </a> <a target="_blank" href="http://www.php.cn/de/faq/jssswr" class="title-a-spanl" title="js Rundung"><span>js Rundung</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/de/faq/jsscjddff"><img src="https://img.php.cn/upload/subject/202407/22/2024072214115932190.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js-Methode zum Löschen des Knotens" /> </a> <a target="_blank" href="http://www.php.cn/de/faq/jsscjddff" class="title-a-spanl" title="js-Methode zum Löschen des Knotens"><span>js-Methode zum Löschen des Knotens</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/de/faq/javascriptzy"><img src="https://img.php.cn/upload/subject/202407/22/2024072214114396768.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="JavaScript-Escape-Zeichen" /> </a> <a target="_blank" href="http://www.php.cn/de/faq/javascriptzy" class="title-a-spanl" title="JavaScript-Escape-Zeichen"><span>JavaScript-Escape-Zeichen</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/de/faq/jsscsjsdff"><img src="https://img.php.cn/upload/subject/202407/22/2024072214113439427.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="So generieren Sie Zufallszahlen in js" /> </a> <a target="_blank" href="http://www.php.cn/de/faq/jsscsjsdff" class="title-a-spanl" title="So generieren Sie Zufallszahlen in js"><span>So generieren Sie Zufallszahlen in js</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/de/faq/rhqyjavascrip"><img src="https://img.php.cn/upload/subject/202407/22/2024072214085281458.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="So aktivieren Sie JavaScript" /> </a> <a target="_blank" href="http://www.php.cn/de/faq/rhqyjavascrip" class="title-a-spanl" title="So aktivieren Sie JavaScript"><span>So aktivieren Sie JavaScript</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/de/faq/jssymbol"><img src="https://img.php.cn/upload/subject/202407/22/2024072214060282401.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Detaillierte Erläuterung der Symbolklasse in JS" /> </a> <a target="_blank" href="http://www.php.cn/de/faq/jssymbol" class="title-a-spanl" title="Detaillierte Erläuterung der Symbolklasse in JS"><span>Detaillierte Erläuterung der Symbolklasse in JS</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle">Beliebte Empfehlungen</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Was bedeutet js" href="http://www.php.cn/de/faq/482163.html">Was bedeutet js</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Wie konvertiere ich einen String in ein Array in js?" href="http://www.php.cn/de/faq/461802.html">Wie konvertiere ich einen String in ein Array in js?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="So aktualisieren Sie die Seite mit Javascript" href="http://www.php.cn/de/faq/473330.html">So aktualisieren Sie die Seite mit Javascript</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="So löschen Sie ein Element im JS-Array" href="http://www.php.cn/de/faq/475790.html">So löschen Sie ein Element im JS-Array</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="So verwenden Sie die SQL-Funktion" href="http://www.php.cn/de/faq/415276.html">So verwenden Sie die SQL-Funktion</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>Beliebte Tutorials</div> <a target="_blank" href="http://www.php.cn/de/course.html">Mehr> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">Verwandte Tutorials <div></div></div> <div class="tabdiv swiper-slide" data-id="two">Beliebte Empfehlungen<div></div></div> <div class="tabdiv swiper-slide" data-id="three">Aktuelle Kurse<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="http://www.php.cn/de/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" href="http://www.php.cn/de/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a> <div class="wzrthreerb"> <div>1408564 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/de/course/74.html" title="php入门教程之一周学会PHP" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="php入门教程之一周学会PHP"/> </a> <div class="wzrthree-right"> <a target="_blank" title="php入门教程之一周学会PHP" href="http://www.php.cn/de/course/74.html">php入门教程之一周学会PHP</a> <div class="wzrthreerb"> <div>4241250 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/de/course/286.html" title="JAVA 初级入门视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初级入门视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 初级入门视频教程" href="http://www.php.cn/de/course/286.html">JAVA 初级入门视频教程</a> <div class="wzrthreerb"> <div>2439175 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/de/course/504.html" title="小甲鱼零基础入门学习Python视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="小甲鱼零基础入门学习Python视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" title="小甲鱼零基础入门学习Python视频教程" href="http://www.php.cn/de/course/504.html">小甲鱼零基础入门学习Python视频教程</a> <div class="wzrthreerb"> <div>500410 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/de/course/2.html" title="PHP 零基础入门教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP 零基础入门教程"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP 零基础入门教程" href="http://www.php.cn/de/course/2.html">PHP 零基础入门教程</a> <div class="wzrthreerb"> <div>838842 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/de/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" href="http://www.php.cn/de/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a> <div class="wzrthreerb"> <div >1408564 Lernzeiten</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/de/course/286.html" title="JAVA 初级入门视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初级入门视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 初级入门视频教程" href="http://www.php.cn/de/course/286.html">JAVA 初级入门视频教程</a> <div class="wzrthreerb"> <div >2439175 Lernzeiten</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/de/course/504.html" title="小甲鱼零基础入门学习Python视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="小甲鱼零基础入门学习Python视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" title="小甲鱼零基础入门学习Python视频教程" href="http://www.php.cn/de/course/504.html">小甲鱼零基础入门学习Python视频教程</a> <div class="wzrthreerb"> <div >500410 Lernzeiten</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/de/course/901.html" title="Web前端开发极速入门" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Web前端开发极速入门"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Web前端开发极速入门" href="http://www.php.cn/de/course/901.html">Web前端开发极速入门</a> <div class="wzrthreerb"> <div >214621 Lernzeiten</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/de/course/234.html" title="零基础精通 PS 视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="零基础精通 PS 视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" title="零基础精通 PS 视频教程" href="http://www.php.cn/de/course/234.html">零基础精通 PS 视频教程</a> <div class="wzrthreerb"> <div >866239 Lernzeiten</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/de/course/1648.html" title="【web前端】Node.js快速入门" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="【web前端】Node.js快速入门"/> </a> <div class="wzrthree-right"> <a target="_blank" title="【web前端】Node.js快速入门" href="http://www.php.cn/de/course/1648.html">【web前端】Node.js快速入门</a> <div class="wzrthreerb"> <div >5300 Lernzeiten</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/de/course/1647.html" title="国外Web开发全栈课程全集" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="国外Web开发全栈课程全集"/> </a> <div class="wzrthree-right"> <a target="_blank" title="国外Web开发全栈课程全集" href="http://www.php.cn/de/course/1647.html">国外Web开发全栈课程全集</a> <div class="wzrthreerb"> <div >4076 Lernzeiten</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/de/course/1646.html" title="Go语言实战之 GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go语言实战之 GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go语言实战之 GraphQL" href="http://www.php.cn/de/course/1646.html">Go语言实战之 GraphQL</a> <div class="wzrthreerb"> <div >3488 Lernzeiten</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/de/course/1645.html" title="550W粉丝大佬手把手从零学JavaScript" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W粉丝大佬手把手从零学JavaScript"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W粉丝大佬手把手从零学JavaScript" href="http://www.php.cn/de/course/1645.html">550W粉丝大佬手把手从零学JavaScript</a> <div class="wzrthreerb"> <div >576 Lernzeiten</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/de/course/1644.html" title="python大神Mosh,零基础小白6小时完全入门" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="python大神Mosh,零基础小白6小时完全入门"/> </a> <div class="wzrthree-right"> <a target="_blank" title="python大神Mosh,零基础小白6小时完全入门" href="http://www.php.cn/de/course/1644.html">python大神Mosh,零基础小白6小时完全入门</a> <div class="wzrthreerb"> <div >17867 Lernzeiten</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项,自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>Neueste Downloads</div> <a href="http://www.php.cn/de/xiazai">Mehr> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">Web-Effekte <div></div></div> <div class="swiper-slide" data-id="twof">Quellcode der Website<div></div></div> <div class="swiper-slide" data-id="threef">Website-Materialien<div></div></div> <div class="swiper-slide" data-id="fourf">Frontend-Vorlage<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery企业留言表单联系代码" href="http://www.php.cn/de/xiazai/js/8071">[表单按钮] jQuery企业留言表单联系代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3音乐盒播放特效" href="http://www.php.cn/de/xiazai/js/8070">[播放器特效] HTML5 MP3音乐盒播放特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5炫酷粒子动画导航菜单特效" href="http://www.php.cn/de/xiazai/js/8069">[菜单导航] HTML5炫酷粒子动画导航菜单特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery可视化表单拖拽编辑代码" href="http://www.php.cn/de/xiazai/js/8068">[表单按钮] jQuery可视化表单拖拽编辑代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS仿酷狗音乐播放器代码" href="http://www.php.cn/de/xiazai/js/8067">[播放器特效] VUE.JS仿酷狗音乐播放器代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="经典html5推箱子小游戏" href="http://www.php.cn/de/xiazai/js/8066">[html5特效] 经典html5推箱子小游戏</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery滚动添加或减少图片特效" href="http://www.php.cn/de/xiazai/js/8065">[图片特效] jQuery滚动添加或减少图片特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3个人相册封面悬停放大特效" href="http://www.php.cn/de/xiazai/js/8064">[相册特效] CSS3个人相册封面悬停放大特效</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8328" title="Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen" target="_blank">[Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8327" title="Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben" target="_blank">[Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8326" title="Web-Vorlage für kreativen Job-Lebenslauf für Designer" target="_blank">[Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8325" title="Website-Vorlage eines modernen Ingenieurbauunternehmens" target="_blank">[Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8324" title="Responsive HTML5-Vorlage für Bildungseinrichtungen" target="_blank">[Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8323" title="Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren" target="_blank">[Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8322" title="IT-Technologie löst Website-Vorlage für Internetunternehmen" target="_blank">[Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8321" title="Website-Vorlage für Devisenhandelsdienste im violetten Stil" target="_blank">[Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/de/xiazai/sucai/3078" target="_blank" title="可爱的夏天元素矢量素材(EPS+PNG)">[PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/de/xiazai/sucai/3077" target="_blank" title="四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)">[PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/de/xiazai/sucai/3076" target="_blank" title="唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)">[banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/de/xiazai/sucai/3075" target="_blank" title="金色的毕业帽矢量素材(EPS+PNG)">[PNG素材] 金色的毕业帽矢量素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/de/xiazai/sucai/3074" target="_blank" title="黑白风格的山脉图标矢量素材(EPS+PNG)">[PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/de/xiazai/sucai/3073" target="_blank" title="不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)">[PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/de/xiazai/sucai/3072" target="_blank" title="扁平风格的植树节banner矢量素材(AI+EPS)">[banner图] 扁平风格的植树节banner矢量素材(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/de/xiazai/sucai/3071" target="_blank" title="九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)">[PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8328" target="_blank" title="Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen">[Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8327" target="_blank" title="Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben">[Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8326" target="_blank" title="Web-Vorlage für kreativen Job-Lebenslauf für Designer">[Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8325" target="_blank" title="Website-Vorlage eines modernen Ingenieurbauunternehmens">[Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8324" target="_blank" title="Responsive HTML5-Vorlage für Bildungseinrichtungen">[Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8323" target="_blank" title="Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren">[Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8322" target="_blank" title="IT-Technologie löst Website-Vorlage für Internetunternehmen">[Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8321" target="_blank" title="Website-Vorlage für Devisenhandelsdienste im violetten Stil">[Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项,自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="http://www.php.cn/de/about/us.html" rel="nofollow" target="_blank" title="Über uns" class="cBlack">Über uns</a> <a href="http://www.php.cn/de/about/disclaimer.html" rel="nofollow" target="_blank" title="Haftungsausschluss" class="cBlack">Haftungsausschluss</a> <a href="http://www.php.cn/de/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1">Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!</dd> </dl> </div> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1728362000"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> </body> </html>