Une analyse approfondie du middleware koa-static dans nodejs

Cet article vous présentera le middleware de fichiers statiques koa-static dans node. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations associées : "tutoriel nodejs"

Détails sur l'utilisation de koa-static

dans l'application .js Ici, si nous voulons spécifier le répertoire courant comme répertoire géré, nous faisons généralement ceci :

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

app.use(static('.'))
app.listen(8081)

koa-static est le plus couramment utilisé et mature dans koa (framework de nœud) Middleware de service d'hébergement Web statique , couramment utilisé dans koa comme les ressources statiques de liens externes (comme les fichiers CSS) :

//下载
npm install koa-static --save

//引入
const server=require('koa-static')

//使用
app.use(server('static'))//或：app.use(server(__dirname+'/static'))

Bref, le serveur doit avoir un chemin (relatif) du modèle statique

Ensuite, nous pouvons utiliser le fichier xxx.css dans le dossier css du répertoire statique comme ceci :

<link rel="stylesheet" href="css/xxx.css" />

Est-ce si simple ? Alors quel est son principe ?

Définissez la valeur "Content-Type" de l'en-tête de requête en fonction du nom de l'extension du fichier pour qu'elle corresponde au rendu du navigateur !

Reprenons la statique mentionnée ci-dessus :

• Trouver si static/css/xxx.css existe

• (si existe) les paramètres Content-Type: text/css;charset=utf-8;

• sont renvoyés au navigateur via la réponse

Comme mentionné précédemment, la fonction de koa-static est ☞l'hébergement de fichiers statiques ☜, Cela ne concerne certainement pas uniquement les fichiers de ressources tels que CSS et JavaScript.

En fait, pour les images, koa-static peut également être utilisé pour mettre en place un cache d'images ! Juste comme ça

const server=require('koa-static')
const path=require('path')   //path模块：设置路径信息

const staticPath=path.resolve(__dirname,'static')
const staticServer=server(staticPath,{
	setHeadears:(res,path,stats)=>{
		if(path.indexOf(/[jpg|png|gif|jpeg]/)>-1){
			res.setHeader('Cache-Control',['private','max-age=60'])
		}
	}
})
app.use(staticServer);

- Si le chemin correspondant est une image au format jpg/GIF/png/jpeg, alors il sera mis en cache pendant 60s.

---

Nous savons tous qu'il existe un "moyen pratique" pour les services statiques en express (framework de nœuds) :

app.use('/teacher',express.static('/public'))

Il peut spécifier le "préfixe de requête" des services statiques —— Il s'agit de spécifier la ressource statique par rapport à quelle URL charger.

Évidemment, c'est très pratique. Nous avons soudainement pensé que le koa-static que nous avons mentionné ci-dessus dans cet article fonctionnait tous par rapport à "global" ?

Comment implémenter cette fonction dans koa ? koa fournit un autre module (auxiliaire) pour les développeurs - koa-mount

const Koa=require('koa')
const server=require('koa-static')
const mount=require('koa-mount')

const app=new Koa()
app.use(mount('/teacher',server('/public')))

koa-mount est un middleware Koa qui monte le middleware sur un chemin spécifié. Il peut monter n’importe quel middleware Koa !
Comme mentionné précédemment, koa-static est un middleware, donc koa-mount peut être combiné avec koa-static pour obtenir la même fonction de préfixe de demande de service statique qu'express.

---

Exploration des principes statiques

Après avoir appris l'usage magique ci-dessus, avez-vous déjà réfléchi à la façon dont il est mis en œuvre ?
Grâce à npm info koa-static, vous constaterez que koa-static dépend de deux modules, à savoir debug et koa-send.
Recherchez le fichier d'index du code source koa-static. Son implémentation principale est la suivante :

const send = require('koa-send');
//...
function serve (root, opts) {
	//...
	return async function serve (ctx, next) {
		await next()
		if (ctx.method !== 'HEAD' && ctx.method !== 'GET') return
		if (ctx.body !== null && ctx.status !== 404) return // eslint-disable-line
		try {
			await send(ctx, ctx.path, opts)
		}catch (err) {
			if (err.status !== 404) {
				throw err
			}
		}
	}
}

Après ce code, nous avons constaté que l'implémentation principale est la méthode send(), qui est fournie par le module koa-send fourni !

Trouvez le code source de koa-send et constatez que son principe de mise en œuvre de base est également très simple :

if (!ctx.type) ctx.type = type(path, encodingExt)
ctx.body = fs.createReadStream(path)

La méthode de type est définie en fonction du suffixe du fichier Content-Type! Très pratique, mais ce à quoi nous devrions prêter plus attention ici est une autre chose intéressante - le principe de koa-send :

• Définissez le Content-Type, qui peut être défini via le suffixe du fichier. ;

• Attribuer une valeur à ctx.body sous forme Stream

Pourquoi est-ce intéressant ?
Outre le fait qu'elle vise également à définir le type de contenu, la méthode du streaming a toujours été saluée par les experts du secteur : parce qu'elle est plus efficace que fs.readFileSync !

Comparons le code suivant avec le code source de koa-send ci-dessus :

app.use(function(ctx){
	const fs=require('fs')
	const result=fs.readFileSync('xxx')
	ctx.type=type(result, encodingExt)
	ctx.body=result
})

---

Koa Review

En fait, dans koa, ctx.body Le Le principe de fonctionnement est en fait similaire aux middlewares koa-static et koa-send mentionnés dans cet article : Traitez différents types de contenu en fonction du type d'affectation

• Selon le corps Le type de contenu correspondant du paramètre de type

• appelle res.write ou res.end selon le type de contenu pour écrire les données dans le navigateur

À propos de Valeur de type de contenu :
Chaîne - divisée en deux types : "text/html" et "text/plain" (différents) ; / Stream Type;
S'il ne s'agit d'aucun des types ci-dessus, il doit s'agir d'un objet JSON
(Le code source utilise typeof pour déterminer son type. Cette technique est très pratique !

Plus de détails sur la programmation Pour en savoir plus, veuillez visiter :

Vidéos de programmation !

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!