Maison  >  Article  >  interface Web  >  Node.js utilise Koa pour créer un exemple de didacticiel de projet de base

Node.js utilise Koa pour créer un exemple de didacticiel de projet de base

小云云
小云云original
2018-01-09 09:06:273046parcourir

Beaucoup de gens accordent plus d'attention aux nouvelles technologies telles que NodeJs et le framework express ou le framework Koa. Koa est un framework côté serveur ultra-léger créé par l'équipe d'origine d'Express. Par rapport à Express, il a un degré de liberté plus élevé et peut introduire lui-même un middleware. Plus important encore, il utilise ES6 + async, évitant ainsi l'enfer des rappels. Cependant, c'est également à cause de la mise à niveau du code que Koa2 nécessite un environnement node.js de version 7.60 ou supérieure.

1. Créer un projet

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

npm init -y

Installez koa //Version actuelle 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 les instructions de démarrage dans package.json

Un outil des plus basiques 1 L'application koa est complétée de cette manière

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

Si vous avez envie de le créer manuellement Le projet est trop lourd, vous pouvez utiliser l'échafaudage koa-generato pour générer le projet

npm install koa-generator -g
koa2 project_name

Puis npm install sous le projet pour installer les dépendances, 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 des outils 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, il s'agit d'un objet Context fourni par Koa, qui encapsule la requête et la réponse

Chaque requête HTTP créera un Objet contextuel

Nous pouvons obtenir les demandes des utilisateurs via le chemin Context.request.path, puis envoyer du contenu à l'utilisateur via Context.response.body

Le type de retour par défaut de Koa est text/plain If. vous souhaitez renvoyer un fichier html (ou un fichier de module), vous devez modifier le type Context.response

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

Créé sous le projet Un répertoire affiche pour stocker les fichiers html, et crée un index.html dans ce répertoire, puis modifie l'application. 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);

puis accédez à http://localhost:3000/index dans le navigateur Lorsque vous voyez la page index.html et accédez à d'autres adresses, elle n'est pas trouvée

. Cela semble très maladroit de gérer l'url, nous devons donc introduire le middleware de routage koa-router

npm install koa-router -S

Vous devez faire attention. De plus, lors de l'importation de koa-router, vous devez ajouter un support à 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

// 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 également utiliser la méthode du préfixe ici pour ajouter une baseUrl

// pour toutes les interfaces dans le fichier router.prefix('/about')

Modifier l'application .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 la requête de publication pour accéder à l'interface get, ce sera directement un échec de retour

De plus, vous pouvez ajoutez également des variables dans l'URL et accédez

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

3. Ressources statiques

Dans l'index.html ci-dessus, si vous en avez besoin introduisez 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 ce qui suit code 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 aussi être optimisées

app.use(require('koa-static')(__dirname + '/public'));
et ensuite ce sera en index Les fichiers correspondants sont introduits en 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 recommandé pour utiliser le middleware koa-views pour afficher la page

npm install koa-views -S
Définissez le répertoire des vues comme répertoire des modèles dans app.js

const views = require('koa-views')
app.use(views(__dirname + '/views'));
puis ajoutez-le dans le fichier de routage, vous peut 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 de rendu direct des fichiers HTML. Si vous souhaitez introduire un moteur de modèle, vous pouvez ajouter le champ d'extension pour définir le type de modèle

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

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

Lorsque Express est devenu populaire, ses dépendances compliquées ont été critiquées par de nombreux développeurs

Donc Express L'équipe a désassemblé Express jusqu'à son squelette le plus basique, permettant aux développeurs de l'assembler eux-mêmes. Il s'agit de Koa

Comme le dit l'article, repartir de zéro est trop fastidieux, vous pouvez donc utiliser l'échafaudage koa-generato pour. développer rapidement

Mais je recommande qu'après s'être familiarisé avec Koa, construisez un échafaudage adapté à votre propre projet

Sinon, pourquoi ne pas simplement utiliser Express

Recommandations associées :

Exemple de méthode de limitation de courant du service Koa

Analyse des problèmes de mécanisme de middleware koa dans le nœud

Un exemple de tutoriel sur le développement d'un compte public WeChat avec Node.js+Koa

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn