Utilisez Koa pour créer des projets via Node.js

De nos jours, de nombreux ingénieurs front-end accordent plus d'attention aux nouvelles technologies telles que NodeJs et le framework express ou le framework Koa. Il est rare que j'aie beaucoup de temps libre ces derniers temps, alors j'ai profité de ce temps libre avant l'arrivée officielle du Nouvel An lunaire pour m'y plonger et avoir un aperçu de ses secrets.

Koa est un framework côté serveur ultra-léger créé par l'équipe originale d'Express

Par rapport à Express, en plus d'avoir un degré de liberté plus élevé et de pouvoir introduire un middleware par vous-même , plus important encore, ES6 + async est utilisé pour éviter l'enfer des rappels

Cependant, cela est également dû à la mise à niveau du code, donc Koa2 nécessite un environnement node.js de v7.60 ou supérieur

1 . Créer un projet

Créer manuellement un répertoire de projet, puis générer rapidement un fichier package.json

npm init -y

Installer koa //La version actuelle est 2.4.1

npm install koa -S

Ensuite créez un app.js

// app.js

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
 ctx.body = 'Wise Wrong';
});

app.listen(3000);

Ajoutez enfin la commande de démarrage dans package.json

Voici comment une application koa de base est terminé

Vous pouvez exécuter npm start et visiter http://localhost:3000/ dans le navigateur pour voir l'effet

Si vous le ressentez manuellement la création du projet est trop lourde, vous pouvez utiliser l'échafaudage koa-generato pour générer le projet

npm install koa-generator -g

koa2 project_name

Puis npm install pour installer les dépendances sous le projet, npm start pour démarrer le projet

Si vous êtes nouveau sur koa, il est recommandé de lire d'abord ce blog, puis d'utiliser l'outil d'échafaudage, afin de mieux comprendre le rôle de chaque package dépendant

2 Configurer le routage

.

Il y a un ctx dans app.js ci-dessus, qui est un objet Context fourni par Koa, encapsulant la requête et la réponse

Chaque requête HTTP créera un objet Context

Nous pouvons obtenir le chemin de la demande de l'utilisateur via Context.request.path, puis envoyez le contenu à l'utilisateur via Context.response.body

Le type de retour par défaut de Koa est text/plain. un fichier de module), vous devez modifier Context.response.type

De plus, Context.response peut être abrégé, par exemple Context réponse.type est abrégé en Context.type et Context.response.body. est abrégé en Context.type

Créez un répertoire de vues sous le projet pour stocker les fichiers html, créez un index.html dans ce répertoire, puis modifiez-le 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);

Visitez ensuite http://localhost:3000/index dans le navigateur et vous verrez la page index.html, mais lorsque vous visitez d'autres adresses, elle n'est pas trouvée

Gérer les URL de cette manière semble très maladroit, il faut donc introduire le middleware de routage koa-router

npm install koa-router -S

Il est à noter que lors de l'import de koa-router, il faut ajouter une parenthèse à la fin :

const router = require('koa-router')();

équivaut à :

const koaRouter = require('koa-router');
const router = koaRouter();

Créer un répertoire de routes pour stocker les fichiers de routage, et créer index.js dans le répertoire

// 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

Vous pouvez utilisez également la méthode de préfixe ici pour ajouter une baseUrl pour toutes les interfaces dans le fichier

// router.prefix('/about')

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

Les méthodes autorisées ci-dessus sont utilisées pour vérifier la méthode de requête. Si vous utilisez une requête de publication pour accéder à l'interface get, elle renverra directement un échec

De plus, vous pouvez également ajouter des variables dans l'URL, puis utilisez l'accès Context .params.name

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

3. Ressources statiques

Dans l'index.html ci-dessus, si vous devez introduire des ressources statiques telles que CSS, vous devez utiliser koa -static

npm install koa-static -S

Créez un répertoire public pour stocker les ressources statiques

Ajoutez ensuite le code suivant dans app.js

const static = require('koa-static');
// 将 public 目录设置为静态资源目录
const main = static(__dirname + '/public');
app.use(main);

En fait , ces trois lignes de code peuvent également être optimisées

app.use(require('koa-static')(__dirname + '/public'));

et ensuite les fichiers correspondants peuvent être introduits dans index.html

4. Moteur de modèles

L'itinéraire ci-dessus utilise le module fs pour lire directement le fichier html

Lors du développement, il est plus recommandé d'utiliser le middleware koa-views pour restituer la page

npm install koa-views -S

Dans app.js Définissez le répertoire des vues comme répertoire des modèles

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

Ensuite, dans le fichier de routage, vous pouvez utiliser la méthode de rendu

// routes/index.js

const router = require('koa-router')()

router.get('/index', async (ctx, next) => {
 await ctx.render('index');
});

module.exports = router

Ce qui précède est la méthode pour restituer directement le fichier html. Si vous souhaitez présenter le moteur de modèle, vous pouvez ajouter le champ d'extension pour définir le type de modèle

app.use(views(__dirname + '/views', {
 extension: 'pug' // 以 pug 模版为例
}))

5 Conclusion

Si Express est. considéré comme webstorm, alors Koa est sublime

Quand Express Lorsqu'il est devenu populaire, ses dépendances compliquées ont été critiquées par de nombreux développeurs

L'équipe Express a donc démonté Express jusqu'à son squelette le plus basique et a laissé les développeurs assemblez-le eux-mêmes. C'est Koa

Comme mentionné dans l'article, repartir de zéro est trop fastidieux. Vous pouvez utiliser l'échafaudage koa-generato pour développer rapidement

Mais je recommande qu'après vous être familiarisé avec Koa, construisez un échafaudage adapté au vôtre. projet

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Comparaison de l'utilisation d'express et de koa (tutoriel détaillé)

La première fois que vous utilisez la méthode d'installation du stylet in vue (tutoriel détaillé Tutoriel)

Développement de composants de biens dans le framework Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!