Node Js Online Editor

Knoten Js Online Editor

Vereinfachter Editor als Web-App unter Node.JS. Für Pug ist es erforderlich, dass Sie mit node.js arbeiten und Middleware Express verwenden. Die Eintragung in die online verfügbaren Informationen ist Github.

JavaScript-Applikationen für den Webserver mit Node.js

Als Neugierde wurde am Anfang die Java Script-Laufzeitumgebung Node.js angelächelt. Inzwischen wird es von vielen Entwicklern als Webserver für Webanwendungen eingesetzt. Als " Platform for building fast, scalable network applications " beschreibt sich das Open-Source-Projekt Node.js, das unter der freien MIT-Lizenz lizenziert ist. Node. js ist vor allem dadurch bekannt, dass es mit Hilfe von Java Script programmiert werden kann.

Eine offensichtliche Idee: Warum sollte man für den Bediener eine andere Programmiersprache als für den Kunden haben? In der Tat ist diese Vorstellung beinahe so veraltet wie Java Script selbst, aber sie wurde zusammen mit dem Netscape Enterprise Serverb und seinem SSJS vergessen. Seitdem hat sich die Landessprache enorm entwickelt:

Typsicher auf dem Server: Web APIs mit Node.js und TypeScript

Mit der Veröffentlichung von Node. js im Jahr 2009 konnten wir erstmalig Java Script auf dem Webserver einsetzen - und damit auch den Codeaustausch zwischen Kunde und Webserver (Universal Java Script oder Isomorphic JavaScript). Es ist jedoch zu beachten, dass TypScript nicht unmittelbar vom Webbrowser oder von Node. js sondern immer von seinem JavaScript-Bild Interpretationen erhält.

Vor dem Start muss Node. js eingerichtet werden. Zur Zeit ist die aktuellste Fassung Node. js v8.2.1. Basierend auf dieser Fassung wird das Beispiel weiterentwickelt. Für die Arbeit mit TypScript müssen zusätzliche Dependencies vorhanden sein: npm i typscript ts-node knodemon rimraf. typscript enthält den Typscript-Compiler und wird später unsere Quellen in Java Script umwandeln. ts-node: Dieses Package ermöglicht es Ihnen, Typscript direkt unter Node auszuführen.

js; im Prinzip setzt das Package, basierend auf dem vorher installierten TSC, die Applikation in Java Script um, bevor sie von Node durchgeführt wird. js. nodemon: Da wir den Datenserver während der Programmierung nicht manuell Neustart durchführen wollen, überprüft jodemon das Datensystem auf Veränderungen und startet unseren Sys tem mit jeder Veränderung neustart.

Mit einem Editor unserer Auswahl wird das Dateipaket geöffnet. joSon und überschreibt die Eingabeskripte: "build": "rimraf building && tsc", "start": "nodemon --exec ts-node Index. ts" Der Skriptbau entfernt zunächst den Verzeichnisbau mit rimraf. Der Skriptbau ist nicht mehr notwendig. Zur abschließenden Bearbeitung erstellen wir die Akte csconfig. json. Das File hat den Namen Listing 1.

Auflistung 1: Inhalte der Konfigurationsdatei "tsconfig. json" "module": "commonjs", "target": "es2017", "sourceMap": wahr, "experimentalDecorators": wahr, "emitDecoratorMetadata": wahr, "outDir": "build" }, "node_modules" In dieser Konfigurationsdatei werden die folgenden Voreinstellungen für den Kompilierer vorgenommen: Modul legt fest, in welches Bausteinsystem der zu übersetzende Codin. Knoten. js verwendet das Format C1, daher konvertieren wir den Typprüfungscode in das Format C1, um festzustellen, in welche JavaScript-Versionsstufe die Übersetzung erfolgen soll.

Auf unserem Webserver verwenden wir das schlanke, middlewarebasierte System RESTIFIC (Abb. 1) für die Einrichtung von HTTP-basierten Webservern. Für die Installierung wird der folgende Kommando ausgeführt: npm i retify @types/restify. RESTIFIC ist ein in Java Script entwickelter Rahmen. Deshalb werden die Typendefinitionen auch über @types/restify hinzugefügt, so dass das TSC eine statistische Code-Analyse von Rest.....

Anschließend erstellen wir die Datenbankdatei mit dem Namen system. ts-in: importieren {RequestHandler} von'restify'; get(url: string, orderHandler: RequestHandler): ungültig; post(url: string, orderHandler: RequestHandler): ungültig; del(url: string, orderHandler: RequestHandler): ungültig; put(url: string, orderHandler: RequestHandler): ungültig; Die HttpServer-Schnittstelle legt fest, welche Verfahren auf unserem Datenbankserver zur Verfügung stehen müssen, damit unsere Steuerexperten ihre Routendurchläufe hinzufü genügen können.

Zur Nutzung der Schnittstelle erstellen wir die Datenbankdatei für die Dateien der Liste 2 mit den Inhalten von Listing 2. Liste 2: Inhalte der Mappe "src/server/index. ts" importieren {HttpServer} aus '.... /httpServer' ; Importeur {RequestHandler, Bediener als RestifyServer} de'restify' ; Importeur * comme restify de'restify' ; privater restify : Reservierungsserver ; ceci. addRoute('get', url, requestHandler) ; ceci. addRoute('post', url, requestHandler) ; ceci.

hinzufügenRoute ('del', url, requestHandler) ; dies. addRoute('put', url, requestHandler) ; dies. restify[method](url, requestHandler) ; dies. retify. log(`Added Route ${method. toUpperCase()} ${url}`) ; dies. reestify = createServer() ; dies.restify.use(restify.plugins. queryParser()) ; dieses.restify. use (restify.plugins. bodyParser()); dies. addControllers(); dies. resttify. listen(port, ( ) => console. log(`Server is up & running on port${port}( ))))); Der Class Server importiert unsere Schnittstelle HttpServer und importiert die Deployments durch das Aufrufen der geheimen Zugriffsmethode addRoute().

Für jedes HTTP-Verb, das eine URL als ersten Wert erhält und RequestHandlers als zusätzliche Werte, gibt es auf dem von Rest. Die Inbetriebnahme des Servers erfolgt über retify. listen(). Damit wir den Datenserver hochfahren können, brauchen wir die Datenbank src/index. ts: importieren Sie {Server} aus '....

Dazu erzeugen wir ein neue Schnittstelle, die wir in der Datei der Datei src/controllers/controllers/controller speichern. ts: importieren {HttpServer} von'.../server/httpServer'; initialisieren(httpServer: HttpServer): invalid; Der Interface-Controller deklariert eine Methodeninitialize (), die als Paramete ur eine Ausprägung des Typs HttpServer liefert. Richtig ist, dass unsere Schnittstelle HttpServer nicht den von Resttify zur Verfügung gestellten Request-Handler verwenden sollte, um diese Abhängigkeiten zu beseitigen.

Zur Implementierung der Schnittstelle wird eine neue Konfigurationsdatei erstellt mit den Inhalten aus Liste 3. Auflistung 3: Inhalte der Mappe "src/controllers/customer. ts" importieren {Controller} aus '.... Controller'; Importeur {HttpServer} abseits'.../server/httpServer' ; Importeur {Request, Response} abseits von'restify' ; HTTP-Server. get('customers', diese. bind(this)) ; HTTP-Server. get('customer/:id', diese. getById. bind(this)) ; HTTP-Server. post('client', dies ist zu schaffen.

bind('customer/:id', this.update. put('customer/:id', this.update. bind(this)); httpServer. del('customer/:id', this.remove. bind(this)); Der Kundencontroller realisiert den Interface Controler und ergänzt die ursprünglich festgelegten Routinen für einen Endverbraucher. Anschließend erzeugen wir die Datenbankdatei mit dem Namen system. ts: importieren Sie {CustomerController} aus '.... /customer'; ];; Der Dateiindex. tts legt eine Reihe von Ausprägungen aller verfügbaren Steuerungen fest.

Wir verwenden dieses Feld, um die Implementierung der Methode addController () in der Konfigurationsdatei system/server/index. tsd. zu beenden. Vor der Erstellung des Modells für den Auftraggeber brauchen wir drei weitere Abhängigkeiten: npm i typorm pg reflect-metadata. typorm ist ein ORM für TypeScript. Zur Vereinfachung werden wir im Folgenden ein Model als Entity und DTO im Zusammenhang mit diesem Artikel verwenden.

Wir speichern unser Benutzermodell in der Datenbank der Firma in der Datenbank src/models.eds. Die Inhalte sind in Listing 4 zu ersichtlich. Auflistung 4: Gehalt der Akte "src/models/customer. ts" importieren {Entity, Spalte, PrimaryGeneratedColumn} aus'typeorm' ; öffentliche ID: Nummer: Nummer ; öffentlicher Vorname: Zeichenkette ; öffentlicher Nachname: Zeichenkette ; Unser Vorname ist durch drei Eigenschaften Definitionen : Deshalb erzeugen wir die Datenbankdatei src/database/index. tsd mit dem Content aus Listing 5. Listing 5: Content der Datenbank "src/database/index. ts" importieren {Connection, createConnection} aus'typeorm'; importieren {Customer} aus '......

Modelle/Kunde' ; Typ:'postgres' |'mysql' |'mssql' |'mssql' ; Gastgeber: string ; portieren: numéro ; Benutzername: string: string ; Passwort: string ; Datenbank: string: string ; privates statisches Verbinden : Verbindung; persönliche statische Konfiguration: DatenbankKonfiguration; DatenbankProvider. configuration = databaseKonfiguration; Rückgabe DatenbankProvider. connexion ; neue Error('DatabaseProvider ist noch nicht konfiguriert.') ; const {Typ, Gast, Portname, Benutzername, Passwort, Datenbank } DatenbankProvider.

Client ], } wie jeder andere); geben Sie den Datenbankanbieter zurück. Connection; Diese File erzeugt zunächst eine Schnittstelle einer Standardkonfiguration. Bei dem zweiten Exportvorgang handelt es sich um eine DatabaseProvider-Klasse mit festen Werten für Felder und Tabellen. Der Verbindungsaufbau wird im Bereich der stationären Verbindungen abgelegt, um ihn für einen späteren Zugriff nutzen zu können. Um unseren DatenbankProvider zu konfigurieren, müssen wir eine Anpassung an die Datenbankdatei index.ts durchführen.

Die Codierung aus Listing 6 muss vor dem Start des Rechners eingegeben werden. Liste 6: Modifikation der Konfigurationsdatei "src/index. ts" importieren'reflect-metadata'; importieren {DatabaseProvider} aus '.... Wir erstellen die Datenbankdatei standardmäßig mit dem Content aus Listing 7. Liste 7: Inhaltsverzeichnis der Datenbank "src/services/customer. ts" importieren {Customer} aus'.../models/customer' ; importieren {DatabaseProvider} aus .../database/index' ; const connection = auf DatenbankProvider warten. getConnection() ; Rückgabewarten auf connection.getRepository (Client).

finden Sie unter EinById(id) ; konst Neukunde = Neukunde() ; Neukunde. Vorname = Kunde. Vorname ; Neukunde. Vorname ; Neukunde. Vorname ; Neukunde ; Neukunde. Nachname = Name des Kunden. Nachname ; Konstverbindung = Betreuer Datenbankanbieter. getConnection() ; Rückkehr warten Verbindung.getRepository(Client). save(newCustomer) ; Konstverbindung = Betreuer Datenbankanbieter. getConnection () ; Rückkehr warte auf connection.getRepository(Customer). find() ; console. log(customer) ; log (customer) ; const connection=warte Database Provider. getConnection() ; const repository = connection. getRepository(Customer) ; konst entity= warte repository.findOneById(customer.id) ; Entität. vorname= client.

Vorname; Entität. Nachname = Kunde. Nachname; Rückkehr zum Projektarchiv. save(entity); const connection = Warten auf den Datenbankanbieter. getConnection(); Exportieren von const customerService = new CustomerService(); Kundendienst verwendet den Datenbankanbieter für den Datenbankzugriff. Die Kennzahl für die Verfahren ist in Listing 8 zu find. res. send(await customerService. list()) ; const customer = wait customerService.getById(req.params. id) ; res. send(customer ? 200 : 404, customer) ; res. send(await customerService.

Restify bietet die Objektparameter für Informationen aus Query-Parametern und Körper für Informationen aus dem Körper. Bei unseren Abfrageparametern werden die von uns in der URL gespeicherten Placeholder, z.B. id:id, als Key für das Parameterobjekt verwendet, so dass wir mit req.params.id Zugang zum Content des Placeholders erhalten.

Wir können eine POST-Anfrage mit dem Postboten anlegen, die an den /Kunden gesendet wird und die notwendigen Informationen als JSON-Body mitbringt. Zunächst wird das Berechnungsmodell erstellt und die Datenbank src/models/bill. t mit dem Content aus Listing 9 erstellt. Auflistung 9: Gehalt der Akte "src/models/bill. ts" importieren {Column, Entity, ManyToOne, PrimärerzeugteSpalte} aus'typeorm' ; importieren {Customer} aus '....

/Kunde'; öffentliche ID: Nummer; öffentlicher Titel: Zeichenkette; öffentliche Summe: Anzahl; öffentlicher Kunde: Kunde; Eine Rechung setzt sich aus einer Identifikation, einem Anspruch und einem Rechnungsbetrag zusammen. Sämtliche Bereiche und die Kategorie sind mit den Dekorateuren ausgestattet, die wir bereits mit dem Kundenmodell kennengelernt haben. Die Modellrechnung hat nun in einem anderen Bereich einen Kunden mit einem neuen Dekorateur @ManyToOne().

Um das Ganze zu verdeutlichen, wollen wir dem Kundenmodell ein weiteres Fachgebiet hinzufügen: öffentliche Rechnungen: Bill[]; Abgehend vom Kundenmodell hat ein Kunde einen Katalog von Abrechnungen. Es zeigt an, dass das Kundenmodell eine 1:n-Beziehung zu einem anderen Model hat. Die erste Angabe des Dekorators bezieht sich auf die Art der Relation, so dass das ORM weiss, zu welchem Model eine Relation aufgebaut werden soll - da es diese Informationen aus der Feldbeschreibung während des Kompiliervorgangs nicht mehr ermitteln kann.

Mit dem zweiten Paramter wird festgelegt, welches Halbbild für die umgekehrte Relation im referenzierenden Model verwendet werden soll. Dies ist das Kundenfeld, das wir gerade dem Bill-Modell hinzugefügt haben. Betrachten wir den Dekorator @ManyToOne() von Model Bill noch einmal, so stellen wir fest, dass er die umgekehrte Relation zum Modellkunden erzeugt.

In dem ersten Paramter spezifizieren wir auch das Model, zu dem eine Relation aufgebaut werden soll, während der zweite Paramter das Halbbild der umgekehrten Relation spezifiziert. In einem weiteren Arbeitsschritt wollen wir einen Dienst für unser neuestes Fahrzeug entwickeln. Deshalb erzeugen wir die Akte rc/services/bill. ts und befüllen sie mit dem Content aus Listing 10. Listing 10: Contents der Akte "src/services/bill. ts" importieren {Bill} aus '.../models/bill'; importieren {DatenbankProvider} aus './database/index'; importieren {Customer} aus '......

Modelle/Kunde' ; const connection = en attent Database Provider. getConnection() ; }) ; const connection = en attent Database Provider. getConnection() ; const neue Rechnung = neue Rechnung() ; neuBill. title= Bill. title. title_; neuBill. sum = Rechnungsbetrag ; const customer = en attent connection. getRepository (Customer). findOneById(customerId) ; Rückgabe; neue Rechnung. customer = customer ; Rückgabe warte auf Verbindung.getRepository(Bill). save(newBill) ; const connection = warte auf DatenbankProvider. getConnection() ; Rückgabe connection.getRepository(Bill).

Wir können alle Datenfelder aus dem Bill-Modell als mögliches Merkmal für das Where Objekt verwenden. Weil wir uns nur auf den Debitor beschränken wollen, verwenden wir das Kundenfeld und tragen als Mehrwert die Kennung des Debitors ein, da dadurch die Verbindung zwischen den beiden Modellen aufgebaut wird.

Wenn wir diesen Debitor in der Datenbasis gefunden haben, legen wir das Kundenfeld unseres newBill-Objekts fest, um die Verbindung zwischen den beiden Fällen zu herstellen. Um das Model auch wirklich von TypeORM erkennen zu lassen, müssen wir noch eine kleine Anpassung im Database Provider durchführen. Du bist ein Kunde, Bill. Wir haben die Entwicklung des Modells und des Dienstes abgeschlossen, können es aber noch nicht abrufen, da wir die entsprechende Steuerung dafür einsetzen müssen.

Wir erzeugen die Datenbankdatei system/controllers/bill. ts und ergänzen den Content aus List 11. Auflistung 11: Inhalte der Mappe "src/controllers/bill. ts" importieren {Controller} aus '.... Controller' ; Importeur {HttpServer} abseits von'..../server/httpServer' ; Importeur {Request, Response} abuis'restify' ; Importeur {billService} abuis'.../services/bill' ; gttpServer. get('customer/:id/ bills', cette liste. bind( (this)) ; des httpServers. get('customer/:id/bill/:bid', this.getById. bind(this))) ; des httpServers. post('customer/:id/bill', this.create. bind(this)) ; des httpServers. del('customer/:id/bill/:bid', this.remove.

Wenn Sie einen Webserver mit Node. js entwickeln, wie wir es mit unserer Web-API getan haben, müssen Sie sich eines im Klaren sein: Knoten. js hat nur einen Gewinde.

Node. js hat sich ganz bewußt für diese Lösung entschieden, um hoch skalierbare und leistungsstarke Applikationen zu realisieren. Ziemlich einfach: Node. js mag Use Cases, die mit asynchronen I/O-Aufgaben umgehen. Node. js leitet diese Task an einen realen Betriebssystem-Thread weiter, der die tatsächliche Ausführung übernimmt. Während dieser Zeit wird die Ereignisschleife fortgesetzt und Node. js kann auf weitere Anforderungen mitwirken.

So lange wir die Ereignisschleife nicht mit Kalkulationen blocken, bleiben unsere Knoten js auch bei vielen Requests leistungsfähig. Dies ist ein guter Umstand, warum Unternehmen wie Netflix, Powerpal, Groupon oder auch die NASA Node verwenden. js. Am Ende machten wir einen kleinen Abstecher ins Innere eines Node. js server.