Cadre de développement basé sur node.js-Koa

1. Introduction

Koa est un cadre de développement Web de nouvelle génération basé sur la plate-forme nodeJs, construit par l'équipe d'origine derrière Express, et s'est engagé à devenir un cadre Web plus petit, plus expressif et plus robuste. En utilisant koa pour écrire des applications Web, en combinant différents générateurs, vous pouvez éviter l'imbrication répétée et fastidieuse des fonctions de rappel et améliorer considérablement l'efficacité de la gestion des erreurs. Koa ne lie aucun middleware dans la méthode du noyau, il ne fournit qu'une bibliothèque de fonctions légère et élégante, ce qui rend l'écriture d'applications Web très pratique. Il existe actuellement deux versions majeures 1.x et 2.x. La version 2.x utilise le sucre de syntaxe d'attente async pris en charge après Node.js v7.6.0, fournissant un modèle de programmation asynchrone plus élégant.

2. Le concept de base de Koa

Que fait exactement Koa? La chose la plus importante et la plus importante dans Koa est de réaliser le traitement du protocole http. Il a trois concepts de base majeurs:

Application Koa: programme principal
Contexte: contexte
Demande, réponse: demande et réponse

Troisièmement, utilisation de base

【1】 Préparation


// 1.Koa必须使用7.6以上的node版本，检查node版本，低于要求的话就升级node
$ node -v 

// 2.创建一个 my_koa 文件夹，生成package.json文件
$ npm init -y

// 3.安装koa依赖
$ npm install --save koa

[2] Ecrire le code

Créez un fichier d'entrée index.js dans le dossier my_koa, puis nous utilisons koa pour configurer un service http

// index.js文件
const Koa = require('Koa');  // 引入Koa
const app = new Koa();  // 创建Koa实例，定义Application

// 使用use方法来处理上下文
app.use(async ctx => {  
  // ctx是包含整个应用的上下文，可以对用户的请求做一些处理
  ctx.body = 'hello, World!'
});

app.listen(3000);  // 设置端口号，让Koa应用运行在3000端口上

Après avoir écrit le code ci-dessus dans le fichier index.js, ouvrez le terminal dans le répertoire de fichiers et entrez node index.js pour exécuter le fichier.

Ensuite, ouvrez le navigateur et entrez: localhost: 3000, vous pouvez voir les résultats que nous produisons

Quatre, Application (application)

Une application Koa est un objet contenant un ensemble de fonctions middleware, qui est organisé et exécuté à la manière d'une pile. Koa est similaire à de nombreux autres systèmes middleware que vous avez pu rencontrer.

[1] app.listen () : Liez un serveur de port comme entrée de programme, et plusieurs peuvent être liés. Ce qui suit est une application Koa inutile qui est liée au 3000 port

const Koa = require('koa');
const app = new Koa();
app.listen(3000); 

// app.listen(3000)是以下方法的语法糖

const http = require('http');
const Koa = require('koa');
const app = new Koa();
http.createServer(app.callback()).listen(3000);

[2] app.use (fonction) : ajoute la méthode middleware donnée à cette application, app.use () renvoie ceci, afin qu'elle puisse être exprimée en chaîne

app.use(someMiddleware)
app.use(someOtherMiddleware)
app.listen(3000)

// 等同于

app.use(someMiddleware).use(someOtherMiddleware).listen(3000)

[3] app.keys =: définir la clé de cookie signé

app.keys = ['im a newer secret', 'i like turtle'];
app.keys = new KeyGrip(['im a newer secret', 'i like turtle'], 'sha256');

[4] app.context: le prototype à partir duquel ctx est créé. Vous pouvez ajouter d'autres attributs pour ctx en éditant app.context

app.context.db = db();

app.use(async ctx => {
  console.log(ctx.db);
});

[5] Traitement des erreurs: ajoutez un écouteur d'événement "erreur"

app.on('error', (err, ctx) => {
  log.error(err, ctx)
});

[6] next (): La fonction s'arrête et passe le contrôle au middleware suivant défini

const Koa = require('Koa');  // 引入Koa
const app = new Koa();  // 创建Koa实例，定义Application

const one = (ctx, next) => {
    console.log('进 one');
    next();
    console.log('出 one');
}
const two = (ctx, next) => {
    console.log('进 two');
    next();
    console.log('出 two');
}
const three = (ctx, next) => {
    console.log('进 three');
    next();
    console.log('出 three');
}

app.use(one);
app.use(two);
app.use(three)
app.listen(3000)

Cinq, contexte (contexte)

Koa fournit un objet Context, qui représente le contexte d'une conversation. L'objet Context encapsule l'objet de requête (requête) HTTP du nœud et l'objet de réponse (réponse) HTTP dans un seul objet. En traitant cet objet, vous pouvez contrôler le contenu renvoyé à l'utilisateur.

[1] Méthodes spécifiques au contexte

ctx.req: objet de requête du nœud
ctx.res: objet de réponse du nœud
ctx.request: objet de requête de koa
ctx.response: objet de réponse de koa
ctx.state: espace de noms recommandé, utilisé pour transmettre des informations et votre vue frontale via le middleware
ctx.app: référence d'instance d'application
ctx.cookies.get (nom, [options]) ：获取 cookie
ctx.cookies.set (nom, valeur, [options]) ：设置 cookie
ctx.throw ([status], [msg], [properties]): lancer une exception
ctx.assert (valeur, [statut], [msg], [propriétés]): renvoie une erreur

Six, demande (demande)

L' objet Koa Request est une abstraction au-dessus de l'objet de requête natif du nœud et fournit de nombreuses fonctions utiles pour le développement de serveurs HTTP.

request.header: objet d'en-tête de demande, qui peut être défini et affecté (request.header = xxx)
request.headers: objet d'en-tête de demande, l'alias est request.header, peut être défini et attribué (request.headers = xxx)
request.method: méthode de demande, vous pouvez définir l'affectation (request.method = xxx)
request.length: renvoie la Content-Length demandée sous forme de nombre, ou indéfini
request.url: Obtenez l'URL de la demande, vous pouvez définir l'URL de la demande, ce qui est utile pour la réécriture d'url (request.url = xxx)
request.originalUrl: récupère l'URL d'origine de la requête
request.origin: récupère la source de l'URL, y compris le protocole et l'hôte
request.href: Obtenez l'URL de la requête complète, y compris le protocole, l'hôte et l'URL
request.path: Obtenez le nom du chemin de la demande, vous pouvez définir la valeur et conserver la chaîne de requête lorsqu'elle existe (request.path = xxx)
request.querystring: Selon? pour obtenir la chaîne de requête d'origine, vous pouvez définir la chaîne de requête d'origine (request.querystring = xxx)
request.search: utilisez? pour obtenir la chaîne de requête d'origine, vous pouvez définir la chaîne de requête d'origine (request.search = xxx)
request.host: récupère l'hôte s'il existe
request.hostname: récupère le nom d'hôte s'il existe
request.URL: récupère l'objet URL analysé par WHATWG
request.type: Obtenez le Content-Type de la requête, à l'exclusion de "charset" et d'autres paramètres
request.charset: récupère le jeu de caractères demandé lorsqu'il existe, ou indéfini
request.query: Obtenez la chaîne de requête analysée, lorsqu'il n'y a pas de chaîne de requête, retournez un objet vide, vous pouvez définir l'affectation (request.query = xxx)
request.fresh: vérifie si le cache des demandes est "frais", c'est-à-dire que le contenu n'a pas changé. Cette méthode est utilisée pour la négociation de mise en cache entre If-None-Match / ETag et If-Modified-Since et Last-Modified. Il doit être cité après avoir défini un ou plusieurs de ces en-têtes de réponse
request.stale: l'opposé de request.fresh
request.protocol: retourne le protocole de requête, "https" ou "http"
request.secure: utilisez ctx.protocol == "https" pour vérifier si la requête est envoyée via TLS
request.ip: demande une adresse distante

Sept, réponse (réponse)

L' objet Koa Response est une abstraction au-dessus de l'objet de réponse natif du nœud et fournit de nombreuses fonctions utiles pour le développement de serveurs HTTP.

response.header: objet d'en-tête de réponse
response.headers: objet d'en-tête de réponse, l'alias est response.header
response.socket: socket de réponse
response.status: Obtenez l'état de la réponse. Par défaut, response.status est défini sur 404 au lieu de 200 comme res.statusCode du nœud, et l'état de la réponse est défini par le code numérique (response.status = xxx)
response.message: récupère le message d'état de la réponse. Par défaut, response.message est associé à response.status et le message d'état de la réponse peut être défini sur une valeur donnée (response.message = xxx)
response.length: Renvoie le Content-Length de la réponse sous forme de nombre, ou déduit de ctx.body, ou indéfini, vous pouvez définir le Content-Length de la réponse sur une valeur donnée (response.length = xxx)
response.body: Obtenez le corps de la réponse, vous pouvez définir le corps de la réponse sur l'écriture de chaîne, l'écriture de tampon, le pipeline de flux, Object || Array JSON-stringification, réponse nulle sans contenu
response.type: Obtenez la réponse Content-Type, à l'exclusion de "charset" et d'autres paramètres, vous pouvez définir la réponse Content-Type via une chaîne mime ou une extension de fichier (response.type = xxx)

[1] Types de réponse HTTP

Le type de retour par défaut de Koa est text / plain (texte brut). Si vous souhaitez renvoyer d'autres types de contenu, vous pouvez utiliser ctx.request.accepts pour déterminer les données que le client souhaite accepter (selon le champ Accepter de la requête HTTP Ensuite, utilisez ctx.response.type pour spécifier le type de retour.

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

const main = (ctx, next) => {
  if (ctx.request.accepts('json')) {
    ctx.response.type = 'json';
    ctx.response.body = { data: 'Hello World' };
  } else if (ctx.request.accepts('html')) {
    ctx.response.type = 'html';
    ctx.response.body = '<p>Hello World</p>';
  } else if (ctx.request.accepts('xml')) {
    ctx.response.type = 'xml';
    ctx.response.body = '<data>Hello World</data>';
  } else {
    ctx.response.type = 'text';
    ctx.response.body = 'Hello World';
  };
}; //直接运行页面中会显示json格式，因为我们没有设置请求头，所以每一种格式都是ok的。   

app.use(main) //app.use(function)用来加载中间件。
app.listen(3000)

8. Intergiciel

【1. Introduction

La plus grande caractéristique de koa est le contrôle unique des processus middleware, qui est le fameux "modèle d'oignon". Nous pouvons clairement voir qu'une requête passe par le middleware couche par couche de l'extérieur vers l'intérieur, et de l'intérieur vers la réponse lorsque Passez par le middleware couche par couche. Tout comme lorsque nous insérons un cure-dent dans un oignon, le cure-dent traverse des couches de peau d'oignon de l'extérieur vers l'intérieur pour atteindre le "cœur d'oignon". Lorsque nous le retirons, le cure-dent traverse une couche de peau d'oignon du de l'intérieur vers l'extérieur.

【2】 Cas

En gros, toutes les fonctions de Koa sont implémentées via un middleware. Chaque middleware accepte deux paramètres par défaut. Le premier paramètre est l'objet Contexte et le second paramètre est la fonction suivante. Tant que la fonction suivante est appelée, le droit d'exécution peut être transféré au middleware suivant. Si la fonction suivante n'est pas appelée dans le middleware, le droit d'exécution ne sera pas transmis. Les fonctions middleware1, middleware2 et middleware3 dans le code suivant sont appelées «middleware» (middleware) car elles se trouvent au milieu d'une requête HTTP et d'une réponse HTTP, et sont utilisées pour implémenter certaines fonctions intermédiaires. app.use () est utilisé pour charger le middleware

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

// 定义三个中间件的方法：middleware1、middleware2、middleware3，next()方法代表执行完当前中间件方法后，继续执行后面的方法
const middleware1 = function async(ctx, next) {
  console.log('这是第一条middleware');
  next();
  console.log('这是第一条next之后的打印')
}
const middleware2 = function async(ctx, next) {
  console.log('这是第二条middleware');
  next();
  console.log('这是第二条next之后的打印')
}
const middleware3 = function async(ctx, next) {
  console.log('这是第三条middleware');
  next();
  console.log('这是第三条next之后的打印')
}

// 使用中间件方法
app.use(middleware1)
app.use(middleware2)
app.use(middleware3)

app.listen(5000)

[3] Pile middleware

Plusieurs middlewares formeront une pile du milieu, qui sera exécutée dans l’ordre du "premier entré-dernier-sorti"

app.use () est exécuté séquentiellement, quel middleware est référencé en premier et la méthode dont le middleware sera exécuté en premier

Lors de la rencontre de next (), Koa remettra le middleware actuel au middleware suivant pour traitement

Si next () n'est pas défini dans une méthode, Koa mettra fin à la requête par défaut et retournera les données

S'il y a du code après next (), Koa attendra que l'application entière soit appelée dans l'ordre de app.use (), puis reviendra pour exécuter le code après next () en sens inverse, qui est le premier entré -dernier vient d'être mentionné.

Neuf, Koa-routeur (routage)

Les sites Web ont généralement plusieurs pages. Lorsque nous demandons différents API ou différents chemins, nous devons exécuter différentes méthodes et renvoyer des résultats différents. À ce stade, nous devons utiliser le middleware Koa-router de Koa pour le gérer.

[1] Koa-routeur anthropomorphe

 npm install -S koa-router

【2】 Cas

const Koa = require('Koa');
const Router = require('koa-router');  // 引用koa-router
const app = new Koa();
const router = new Router();

// 定义get请求
// home是我们定义的访问路径：localhost:8000/home
router.get('/home', ctx => {
  // 这个区域是中间件要去处理的上下文方法
  ctx.body = '这是主页'
})

router.get('/detail', ctx => {
    ctx.body = '这是详情页'
})

// app.use(router.routes()) 是把上面定义的路由里面的方法添加到Koa应用中
// allowedMethods方法可以把它看做一个拦截器，可以拦截一些我们应用没有定义的请求，然后返回相应的错误信息

app.use(router.routes()).use(router.allowedMethods())

app.listen(4000);  // 设置端口号，让Koa应用运行4000端口上；

// 在浏览器访问 localhost:8000/home 输出了"这是主页"
// 在浏览器访问 localhost:8000/detail 输出了"这是详情页"

10. Lien de référence

https://koa.bootcss.com/

http://www.ruanyifeng.com/blog/2017/08/koa.html

Les articles sont continuellement mis à jour chaque semaine. Vous pouvez rechercher " Front-end Collection " sur WeChat pour le lire pour la première fois, répondre à [ Video ] [ Book ] pour recevoir des vidéos 200G et 30 livres PDF