Jusqu'à présent, le serveur que nous avons fait n'a aucune utilisation pratique, nous allons donc commencer à implémenter certaines fonctions pratiques et utiles.
Ce que nous devons faire est: l'utilisateur sélectionne un fichier, télécharge le fichier, puis voit le fichier téléchargé dans le navigateur.
Nous avons d'abord besoin d'une TextArea pour que l'utilisateur entre le contenu, puis la soumette au serveur via une demande de poste.
Nous ajoutons du code au gestionnaire d'événements de démarrage et modifions RequestHandlers.js comme suit:
La copie de code est la suivante:
fonction start (réponse) {
Console.log ("Demande Handler 'Start' a été appelé.");
var body = '<html>' + '<A-head>' +
'<meta http-equiv = "contenu-type" content = "text / html;' +
'charset = utf-8 "/>' +
'</ head>' +
'<body>' +
'<form action = "/ upload" méthode = "post">' +
'<textarea name = "text" rows = "20" cols = "60"> </ textarea>' +
'<input type = "soumi" value = "soumettre le texte" />' +
'</form>' +
'</body>' +
'</html>';
Response.WriteHead (200, {"Content-Type": "Text / Html"});
Response.Write (corps);
réponse.end ();
}
Fonction téléchargement (réponse) {
Console.log ("Demande Handler 'Upload' a été appelé.");
Response.WriteHead (200, {"Content-Type": "Text / Plain"});
réponse.write ("Bonjour téléchargement");
réponse.end ();
}
export.start = start;
exports.upload = upload;
Vous pouvez voir l'effet en visitant http: // localhost: 8888 / Démarrez dans votre navigateur.
Ensuite, nous voulons implémenter le déclenchement du gestionnaire de demande / téléchargement pour gérer la demande de poste lorsque l'utilisateur soumet le formulaire.
Pour rendre l'ensemble du processus non bloquant, Node.js divisera les données du post en de nombreux petits blocs de données, puis passera ces petits blocs de données à la fonction de rappel en déclenchant des événements spécifiques. Les événements spécifiques ici incluent un événement de données (indiquant qu'un nouveau bloc de données est arrivé) et un événement final (indiquant que toutes les données ont été reçues).
Nous le faisons en enregistrant un auditeur sur l'objet de demande. L'objet de demande ici est transmis à la fonction de rappel OnRequest chaque fois qu'une demande HTTP est reçue.
Nous mettons le code dans le serveur et modifions Server.js comme suit:
La copie de code est la suivante:
var http = require ("http");
var url = require ("url");
Fonction Start (route, manche) {
fonction onRequest (demande, réponse) {
var postdata = "";
var pathname = url.parse (request.url) .pathname;
console.log ("Demande pour" + pathname + "reçu.");
request.setEncoding ("UTF8");
request.addListener ("data", fonction (postdatachunk) {
postdata + = postdatachunk;
Console.log ("Reçu Post Data Chunk '" + PostDatachunk + "'.");
});
request.addListener ("end", function () {
Route (manche, chemin de chemin, réponse, postdata);
});
}
http.createServer (onRequest) .Listen (8888);
console.log ("Server a commencé.");
}
export.start = start;
Le code ci-dessus fait trois choses: nous avons d'abord défini le format de codage des données reçues à UTF-8, puis enregistrons l'auditeur à l'événement "Data" pour collecter de nouveaux blocs de données à chaque fois et les attribuer à la variable postdata. Enfin, nous déplaçons l'appel en demandant l'itinéraire vers le gestionnaire d'événements finaux pour s'assurer qu'il ne tirera que lorsque toutes les données sont reçues et ne tirent qu'une seule fois. Nous transmettons également des données de poste pour demander des itinéraires, car ces données seront utilisées par le gestionnaire de demandes.
Ensuite, sur la page / téléchargement, affichez l'entrée utilisateur
Changeons Router.js:
La copie de code est la suivante:
Route de la fonction (poignée, cheminement, réponse, postdata) {
console.log ("sur le point d'acheter une demande pour" + pathname);
if (typeof handle [pathname] === 'function') {
manche [pathname] (réponse, postdata);
} autre {
console.log ("Aucun gestionnaire de demande trouvé pour" + pathName);
Response.WriteHead (404, {"Content-Type": "Text / PLAIN"});
Response.Write ("404 non trouvé");
réponse.end ();
}
}
export.Route = Route;
Ensuite, dans requestHandlers.js, nous incluons les données dans la réponse à la demande de téléchargement:
La copie de code est la suivante:
Fonction start (réponse, postdata) {
Console.log ("Demande Handler 'Start' a été appelé.");
var body = '<html>' +
'<adhead>' +
'<meta http-equiv = "contenu-type" content = "text / html;' +
'charset = utf-8 "/>' +
'</ head>' +
'<body>' +
'<form action = "/ upload" méthode = "post">' +
'<textarea name = "text" rows = "20" cols = "60"> </ textarea>' +
'<input type = "soumi" value = "soumettre le texte" />' +
'</form>' +
'</body>' +
'</html>';
Response.WriteHead (200, {"Content-Type": "Text / Html"});
Response.Write (corps);
réponse.end ();
}
Fonction Téléchargement (réponse, postdata) {
Console.log ("Demande Handler 'Upload' a été appelé.");
Response.WriteHead (200, {"Content-Type": "Text / Plain"});
Response.Write ("Vous avez envoyé:" + postdata);
réponse.end ();
}
export.start = start;
exports.upload = upload;
La dernière chose que nous devons faire est: Actuellement, nous transmettons l'ensemble du corps du message de la demande au gestionnaire de routage et de demande de demande. Nous devons passer les données de poste, la partie qui nous intéresse, les gestionnaires de routage de demande et de demande. Dans notre exemple, ce qui nous intéresse, c'est le champ de texte.
Nous pouvons utiliser le module QueryString introduit précédemment pour l'implémenter:
La copie de code est la suivante:
var queRyString = require ("querystring");
Fonction start (réponse, postdata) {
Console.log ("Demande Handler 'Start' a été appelé.");
var body = '<html>' +
'<adhead>' +
'<meta http-equiv = "contenu-type" content = "text / html;' +
'charset = utf-8 "/>' +
'</ head>' +
'<body>' +
'<form action = "/ upload" méthode = "post">' +
'<textarea name = "text" rows = "20" cols = "60"> </ textarea>' +
'<input type = "soumi" value = "soumettre le texte" />' +
'</form>' +
'</body>' +
'</html>';
Response.WriteHead (200, {"Content-Type": "Text / Html"});
Response.Write (corps);
réponse.end ();
}
Fonction Téléchargement (réponse, postdata) {
Console.log ("Demande Handler 'Upload' a été appelé.");
Response.WriteHead (200, {"Content-Type": "Text / Plain"});
Response.Write ("Vous avez envoyé le texte:" + querystring.parse (postdata) .Text);
réponse.end ();
}
export.start = start;
exports.upload = upload;
OK, ce qui précède consiste à traiter les données du post.
Dans la section suivante, nous implémenterons la fonction de téléchargement d'images.