Heim > Artikel > Web-Frontend > Node.js verwendet Koa, um ein grundlegendes Beispiel-Tutorial für ein Projekt zu erstellen
Viele Menschen schenken neuen Technologien wie NodeJs und Express Framework oder Koa Framework mehr Aufmerksamkeit. Koa ist ein ultraleichtes serverseitiges Framework, das vom ursprünglichen Express-Team entwickelt wurde. Es verfügt über einen höheren Freiheitsgrad und kann Middleware selbst einführen. Noch wichtiger ist, dass es ES6 + Async verwendet, wodurch die Callback-Hölle vermieden wird. Aufgrund des Code-Upgrades erfordert Koa2 jedoch auch eine node.js-Umgebung von v7.60 oder höher.
Erstellen Sie manuell ein Projektverzeichnis und generieren Sie dann schnell eine package.json-Datei
npm init -y
Installieren Sie koa //Aktuelle Version 2.4.1
npm install koa -S
Dann erstellen Sie eine app.js
// app.js const Koa = require('koa'); const app = new Koa(); app.use(async ctx => { ctx.body = 'Wise Wrong'; }); app.listen(3000);
Fügen Sie schließlich Startanweisungen in package.json hinzu
Eine ganz grundlegende 1 Die Koa-Anwendung wird auf diese Weise abgeschlossen
Sie können npm start ausführen und http://localhost:3000/ im Browser besuchen, um den Effekt anzuzeigen
Wenn Sie Lust haben, es manuell zu erstellen Das Projekt ist zu umständlich, Sie können das Gerüst koa-generato verwenden, um das Projekt zu generieren
npm install koa-generator -g
koa2 project_name
Dann npm install unter dem Projekt, um die Abhängigkeiten zu installieren, npm startet das Projekt
Wenn Sie neu bei koa sind, wird empfohlen, zuerst diesen Blog zu lesen und dann Gerüstwerkzeuge zu verwenden, um die Rolle jedes abhängigen Pakets besser zu verstehen
In app.js oben gibt es ein ctx. Dies ist ein von Koa bereitgestelltes Kontextobjekt, das Anfrage und Antwort kapselt.
Jede HTTP-Anfrage erstellt ein Kontextobjekt
Wir können Benutzeranfragen über den Pfad Context.request.path erhalten und dann Inhalte über Context.response.body an den Benutzer senden
Koas Standardrückgabetyp ist Text/Plain If Wenn Sie eine HTML-Datei (oder eine Moduldatei) zurückgeben möchten, müssen Sie den Context.response-Typ ändern.
Außerdem kann Context.response abgekürzt werden, z. B. Context.response.type wird als Context.type abgekürzt, Context.response.body wird als Context.type abgekürzt
Erstellen Sie unter dem Projekt ein Verzeichnis zum Speichern von HTML-Dateien, erstellen Sie in diesem Verzeichnis eine index.html und ändern Sie dann die App. js
// app.js// 原生路由 const Koa = require('koa'); const fs = require('fs'); const app = new Koa(); app.use(async (ctx, next) => { if (ctx.request.path === '/index') { ctx.type = 'text/html'; ctx.body = fs.createReadStream('./views/index.html'); } else { await next(); } }); app.listen(3000);
und greifen Sie dann im Browser auf http://localhost:3000/index zu. Wenn Sie die Seite index.html sehen und auf andere Adressen zugreifen, wird sie nicht gefunden
Der Umgang mit der URL ist sehr umständlich, daher müssen wir die Routing-Middleware koa-router einführen
npm install koa-router -S
Sie müssen darauf achten. Darüber hinaus müssen Sie beim Importieren von koa-router eine Klammer hinzufügen Das Ende:
const router = require('koa-router')();
entspricht:
const koaRouter = require('koa-router'); const router = koaRouter();
Erstellen Sie ein Routenverzeichnis zum Speichern von Routingdateien und erstellen Sie index.js
// routes/index.js const fs = require('fs'); const router = require('koa-router')() router.get('/index', async (ctx, next) => { ctx.type = 'text/html'; ctx.body = fs.createReadStream('./views/index.html'); }); module.exports = router
Sie können hier auch die Präfix-Methode verwenden, um eine baseUrl hinzuzufügen
// für alle Schnittstellen in der Datei router.prefix('/about')
App ändern .js
// app.js const Koa = require('koa'); const app = new Koa(); const index = require('./routes/index') app.use(index.routes(), index.allowedMethods()) app.listen(3000);
Die oben genannten zulässigen Methoden werden verwendet, um die Anforderungsmethode zu überprüfen. Wenn Sie die Post-Anfrage verwenden, um auf die Get-Schnittstelle zuzugreifen, wird dies direkt der Fall sein Rückgabefehler
Darüber hinaus können Sie Fügen Sie auch Variablen in der URL hinzu und greifen Sie dann über Context.params.name
router.get('/about/:name', async (ctx, next) => { ctx.body = `I am ${ctx.params.name}!`; });auf
In der obigen index.html, wenn Sie Wenn Sie statische Ressourcen wie CSS einführen müssen, müssen Sie koa-static verwenden
npm install koa-static -S
Erstellen Sie ein öffentliches Verzeichnis zum Speichern statischer Ressourcen
Dann hinzufügen Der folgende Code in app.js
const static = require('koa-static'); // 将 public 目录设置为静态资源目录 const main = static(__dirname + '/public'); app.use(main);
Tatsächlich können diese drei Codezeilen auch optimiert werden
app.use(require('koa-static')(__dirname + '/public'));
und dann werden die entsprechenden Dateien in den Index eingeführt in HTML
Die obige Route verwendet das fs-Modul, um die HTML-Datei direkt zu lesen
Beim Entwickeln wird es Es wird empfohlen, zum Rendern der Seite die Koa-Views-Middleware zu verwenden
npm install koa-views -S
Legen Sie das View-Verzeichnis als Vorlagenverzeichnis in app.js fest
const views = require('koa-views') app.use(views(__dirname + '/views'));
und fügen Sie es dann in die Routing-Datei ein , Sie können die Render-Methode verwenden
// routes/index.js const router = require('koa-router')() router.get('/index', async (ctx, next) => { await ctx.render('index'); }); module.exports = router
Das Obige ist die Methode zum direkten Rendern von HTML-Dateien. Wenn Sie eine Vorlagen-Engine einführen möchten, können Sie das Erweiterungsfeld hinzufügen, um den Vorlagentyp festzulegen
app.use(views(__dirname + '/views', { extension: 'pug' // 以 pug 模版为例 }))
Wenn Express als Webstorm angesehen wird, dann ist Koa großartig
Als Express populär wurde, wurden seine komplizierten Abhängigkeiten von vielen Entwicklern kritisiert
So Express Das Team hat Express bis in sein Grundgerüst zerlegt, sodass Entwickler es selbst zusammenbauen können.
Wie es im Artikel heißt, ist es zu umständlich, bei Null anzufangen, also kann man das Gerüst aus Koa verwenden. generiert, um sich schnell zu entwickeln
Aber ich empfehle, nachdem Sie sich mit Koa vertraut gemacht haben, ein für Ihr eigenes Projekt geeignetes Gerüst zu bauen
Andernfalls warum nicht einfach Express verwenden
Verwandte Empfehlungen:
Beispiel für eine Methode zur Strombegrenzung des Koa-Dienstes
Analyse von Problemen mit dem Koa-Middleware-Mechanismus im Knoten
Ein Beispiel-Tutorial zur Entwicklung eines öffentlichen WeChat-Kontos mit Node.js+Koa
Das obige ist der detaillierte Inhalt vonNode.js verwendet Koa, um ein grundlegendes Beispiel-Tutorial für ein Projekt zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!