Heim > Web-Frontend > js-Tutorial > Node.js verwendet Koa, um ein grundlegendes Beispiel-Tutorial für ein Projekt zu erstellen

Node.js verwendet Koa, um ein grundlegendes Beispiel-Tutorial für ein Projekt zu erstellen

小云云
Freigeben: 2018-01-09 09:06:27
Original
3076 Leute haben es durchsucht

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.

1. Erstellen Sie ein Projekt

Erstellen Sie manuell ein Projektverzeichnis und generieren Sie dann schnell eine package.json-Datei

npm init -y
Nach dem Login kopieren

Installieren Sie koa //Aktuelle Version 2.4.1

npm install koa -S
Nach dem Login kopieren

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);
Nach dem Login kopieren

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
Nach dem Login kopieren
koa2 project_name
Nach dem Login kopieren

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

2. Routing konfigurieren

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);
Nach dem Login kopieren

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
Nach dem Login kopieren

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')();
Nach dem Login kopieren

entspricht:

const koaRouter = require('koa-router');
const router = koaRouter();
Nach dem Login kopieren

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
Nach dem Login kopieren

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);
Nach dem Login kopieren

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}!`;
});
Nach dem Login kopieren
auf

zu. 3. Statische Ressourcen

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
Nach dem Login kopieren

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);
Nach dem Login kopieren

Tatsächlich können diese drei Codezeilen auch optimiert werden

app.use(require('koa-static')(__dirname + '/public'));
Nach dem Login kopieren

und dann werden die entsprechenden Dateien in den Index eingeführt in HTML

4. Template-Engine

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
Nach dem Login kopieren

Legen Sie das View-Verzeichnis als Vorlagenverzeichnis in app.js fest

const views = require('koa-views')
app.use(views(__dirname + '/views'));
Nach dem Login kopieren

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
Nach dem Login kopieren

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 模版为例
}))
Nach dem Login kopieren

5, Fazit

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage