Verwenden Sie Koa, um Projekte über Node.js zu erstellen

Heutzutage widmen viele Front-End-Ingenieure neuen Technologien wie NodeJs und Express Framework oder Koa Framework mehr Aufmerksamkeit. Es kommt selten vor, dass ich in letzter Zeit viel Freizeit habe, also habe ich diese freie Zeit vor dem offiziellen Beginn des Mondneujahrs genutzt, um mich darauf einzulassen und einen Einblick in seine Geheimnisse zu bekommen.

Koa ist ein ultraleichtes serverseitiges Framework, das vom ursprünglichen Express-Team erstellt wurde

Im Vergleich zu Express bietet es zusätzlich einen höheren Freiheitsgrad und die Möglichkeit, Middleware selbst einzuführen Noch wichtiger ist, dass ES6 + Async verwendet wird, um die Callback-Hölle zu vermeiden.

Dies ist jedoch auch auf das Code-Upgrade zurückzuführen, sodass Koa2 eine node.js-Umgebung von v7.60 oder höher erfordert

1 . Erstellen Sie ein Projekt

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

npm init -y

Koa installieren //Die aktuelle Version ist 2.4.1

npm install koa -S

Erstellen Sie dann 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 abschließend den Startbefehl in package.json hinzu

So wird eine einfache Koa-Anwendung fertiggestellt

Sie können npm start ausführen und http://localhost:3000/ im Browser aufrufen, um den Effekt anzuzeigen

Wenn Sie der Meinung sind, dass das manuelle Erstellen des Projekts zu einfach ist 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 start, um das Projekt zu starten

Wenn Sie neu bei Koa sind Es wird empfohlen, zuerst diesen Blog zu lesen und dann das Gerüsttool zu verwenden, damit Sie die Rolle jedes Abhängigkeitspakets besser verstehen können

2 Konfigurieren Sie das Routing

Es gibt einen CTX app.js oben, ein von Koa bereitgestelltes Kontextobjekt, das Anfrage und Antwort kapselt

Jede HTTP-Anfrage wird als Kontextobjekt erstellt

Wir können den vom Benutzer angeforderten Pfad über Kontext abrufen .request.path und senden Sie den Inhalt dann über Context.response.body an den Benutzer

Koas Standardrückgabetyp ist text/plain. Wenn Sie eine HTML-Datei (oder eine Moduldatei) zurückgeben möchten, müssen Sie Kontext.response.type muss geändert werden

Außerdem kann Context.response abgekürzt werden, z. B. wird Context.response.type als Context.type abgekürzt, Context Response.body wird als Context.type abgekürzt

Erstellen Sie eine Verzeichnisansicht unter dem Projekt, um HTML-Dateien zu speichern, und erstellen Sie eine index.html in diesem Verzeichnis. Ändern Sie dann 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 besuchen Sie dann http://localhost :3000/index im Browser, Sie können die Seite index.html sehen, aber wenn Sie andere Adressen besuchen, wird sie nicht gefunden

Es scheint sehr umständlich, die URL so zu handhaben, also müssen wir es tun Routing einführen. Middleware koa-router

npm install koa-router -S

Es ist zu beachten, dass beim Importieren von koa-router am Ende eine Klammer hinzugefügt werden muss:

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

Hier können Sie auch die Präfixmethode verwenden, um eine baseUrl für alle Schnittstellen in der hinzuzufügen Datei

// router.prefix('/about')

Ändern Sie die erlaubten Methoden oben app.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);

, um die Anforderungsmethode zu überprüfen, wenn Sie Post Request to verwenden Wenn Sie auf die Get-Schnittstelle zugreifen, wird direkt ein Fehler zurückgegeben

Darüber hinaus können Sie auch Variablen in der URL hinzufügen und dann über Context.params.name 3 auf

router.get('/about/:name', async (ctx, next) => {
 ctx.body = `I am ${ctx.params.name}!`;
});

zugreifen. Statische Ressourcen

Wenn Sie in der obigen index.html statische Ressourcen wie CSS einführen müssen, müssen Sie koa-static

npm install koa-static -S

verwenden, um ein öffentliches Verzeichnis zum Speichern statischer Ressourcen zu erstellen

Fügen Sie dann den folgenden Code in app.js hinzu

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 die entsprechenden Dateien kann in index.html eingeführt werden

4. Vorlagen-Engine

Die obige Route verwendet das fs-Modul, um die HTML-Datei direkt zu lesen

Es wird eher empfohlen, bei der Entwicklung von Views-Middleware Koa zu verwenden, um die Seite zu rendern

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'));

Dann in der Routing-Datei, Sie 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 模版为例
}))

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

Also zerlegte das Express-Team Drücken Sie nur das grundlegendste Grundgerüst aus, damit Entwickler es selbst zusammenbauen können, das ist Koa

Wie im Artikel erwähnt, ist es zu umständlich, bei Null anzufangen. Sie können das Gerüst Koa-Generato verwenden, um sich schnell zu entwickeln.

Ich empfehle jedoch, nach dem Kennenlernen von Koa ein für Sie geeignetes Gerüst zu bauen Projekt

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Vergleich der Verwendung von Express und Koa (ausführliches Tutorial)

Die erste Verwendung der Stiftinstallationsmethode in vue (ausführliches Tutorial-Tutorial)

Entwicklung von Warenkomponenten im Vue-Framework

Das obige ist der detaillierte Inhalt vonVerwenden Sie Koa, um Projekte über Node.js zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!