Maison > interface Web > js tutoriel > le corps du texte

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

小云云
Libérer: 2018-01-09 09:06:27
original
3052 Les gens l'ont consulté

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
Copier après la connexion

Installez koa //Version actuelle 2.4.1.

npm install koa -S
Copier après la connexion

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);
Copier après la connexion

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
Copier après la connexion
koa2 project_name
Copier après la connexion

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);
Copier après la connexion

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
Copier après la connexion

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')();
Copier après la connexion

équivaut à :

const koaRouter = require('koa-router');
const router = koaRouter();
Copier après la connexion

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
Copier après la connexion
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);
Copier après la connexion
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}!`;
});
Copier après la connexion
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
Copier après la connexion
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);
Copier après la connexion
En fait, ces trois lignes de code peuvent aussi être optimisées

app.use(require('koa-static')(__dirname + '/public'));
Copier après la connexion
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
Copier après la connexion
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'));
Copier après la connexion
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
Copier après la connexion
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 模版为例
}))
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal