Est-il possible d'utiliser des sélecteurs jQuery / manipulation DOM côté serveur en utilisant Node.js?
Est-il possible d'utiliser des sélecteurs jQuery / manipulation DOM côté serveur en utilisant Node.js?
Réponses:
Mise à jour (27-juin-18) : Il semble qu'il y ait eu une mise à jour majeure jsdom
qui empêche la réponse d'origine de fonctionner. J'ai trouvé cette réponse qui explique comment l'utiliser jsdom
maintenant. J'ai copié le code correspondant ci-dessous.
var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = jQuery = require('jquery')(window);
Remarque: La réponse d'origine ne mentionne pas que vous devrez également installer jsdom en utilisantnpm install jsdom
Mise à jour (fin 2013) : L'équipe officielle de jQuery a finalement repris la gestion du jquery
package sur npm:
npm install jquery
Alors:
require("jsdom").env("", function (err, window) {
if (err) {
console.error(err);
return;
}
var $ = require("jquery")(window);
});
require("...").env is not a function
.
TypeError: require(...).env is not a function
Oui, vous pouvez, en utilisant une bibliothèque que j'ai créée appelée nodeQuery
var Express = require('express')
, dnode = require('dnode')
, nQuery = require('nodeQuery')
, express = Express.createServer();
var app = function ($) {
$.on('ready', function () {
// do some stuff to the dom in real-time
$('body').append('Hello World');
$('body').append('<input type="text" />');
$('input').live('click', function () {
console.log('input clicked');
// ...
});
});
};
nQuery
.use(app);
express
.use(nQuery.middleware)
.use(Express.static(__dirname + '/public'))
.listen(3000);
dnode(nQuery.middleware).listen(express);
, express = Express.createServer();
et TypeError: Express.createServer is not a function
une idée?
npm install --save express
dans votre invite de commande.
Au moment de la rédaction, il y a aussi le Cheerio maintenu .
Implémentation rapide, flexible et allégée du noyau jQuery conçu spécifiquement pour le serveur.
:gt(1)
Vous pouvez désormais utiliser jsdom . Regardez simplement leur exemple jquery dans le répertoire examples.
Voici ma formule pour créer un robot simple dans Node.js. C'est la principale raison de vouloir faire une manipulation DOM du côté serveur et c'est probablement la raison pour laquelle vous êtes arrivé ici.
Tout d'abord, utilisez request
pour télécharger la page à analyser. Une fois le téléchargement terminé, gérez-le cheerio
et commencez la manipulation du DOM comme si vous utilisiez jQuery.
Exemple de travail:
var
request = require('request'),
cheerio = require('cheerio');
function parse(url) {
request(url, function (error, response, body) {
var
$ = cheerio.load(body);
$('.question-summary .question-hyperlink').each(function () {
console.info($(this).text());
});
})
}
parse('http://stackoverflow.com/');
Cet exemple imprimera à la console toutes les principales questions affichées sur la page d'accueil SO. C'est pourquoi j'aime Node.js et sa communauté. Rien de plus simple :-)
Installer les dépendances:
demande d'installation npm cheerio
Et exécutez (en supposant que le script ci-dessus est dans le fichier crawler.js
):
node crawler.js
Certaines pages auront un contenu non anglais dans un certain encodage et vous devrez le décoder UTF-8
. Par exemple, une page en portugais brésilien (ou toute autre langue d'origine latine) sera probablement codée ISO-8859-1
(aka "latin1"). Lorsque le décodage est nécessaire, je dis de request
ne pas interpréter le contenu de quelque manière que ce soit et de l'utiliser iconv-lite
à la place pour faire le travail.
Exemple de travail:
var
request = require('request'),
iconv = require('iconv-lite'),
cheerio = require('cheerio');
var
PAGE_ENCODING = 'utf-8'; // change to match page encoding
function parse(url) {
request({
url: url,
encoding: null // do not interpret content yet
}, function (error, response, body) {
var
$ = cheerio.load(iconv.decode(body, PAGE_ENCODING));
$('.question-summary .question-hyperlink').each(function () {
console.info($(this).text());
});
})
}
parse('http://stackoverflow.com/');
Avant d'exécuter, installez les dépendances:
demande d'installation npm iconv-lite cheerio
Et puis finalement:
node crawler.js
La prochaine étape serait de suivre les liens. Supposons que vous souhaitiez répertorier toutes les affiches de chaque question principale sur SO. Vous devez d'abord répertorier toutes les principales questions (exemple ci-dessus), puis entrer chaque lien, en analysant la page de chaque question pour obtenir la liste des utilisateurs impliqués.
Lorsque vous commencez à suivre des liens, un enfer de rappel peut commencer. Pour éviter cela, vous devez utiliser une sorte de promesses, de futurs ou autre. Je garde toujours asynchrone dans ma ceinture d'outils. Voici donc un exemple complet d'un robot utilisant async:
var
url = require('url'),
request = require('request'),
async = require('async'),
cheerio = require('cheerio');
var
baseUrl = 'http://stackoverflow.com/';
// Gets a page and returns a callback with a $ object
function getPage(url, parseFn) {
request({
url: url
}, function (error, response, body) {
parseFn(cheerio.load(body))
});
}
getPage(baseUrl, function ($) {
var
questions;
// Get list of questions
questions = $('.question-summary .question-hyperlink').map(function () {
return {
title: $(this).text(),
url: url.resolve(baseUrl, $(this).attr('href'))
};
}).get().slice(0, 5); // limit to the top 5 questions
// For each question
async.map(questions, function (question, questionDone) {
getPage(question.url, function ($$) {
// Get list of users
question.users = $$('.post-signature .user-details a').map(function () {
return $$(this).text();
}).get();
questionDone(null, question);
});
}, function (err, questionsWithPosters) {
// This function is called by async when all questions have been parsed
questionsWithPosters.forEach(function (question) {
// Prints each question along with its user list
console.info(question.title);
question.users.forEach(function (user) {
console.info('\t%s', user);
});
});
});
});
Avant de courir:
demande d'installation npm async cheerio
Exécutez un test:
node crawler.js
Exemple de sortie:
Is it possible to pause a Docker image build?
conradk
Thomasleveil
PHP Image Crop Issue
Elyor
Houston Molinar
Add two object in rails
user1670773
Makoto
max
Asymmetric encryption discrepancy - Android vs Java
Cookie Monster
Wand Maker
Objective-C: Adding 10 seconds to timer in SpriteKit
Christian K Rider
Et c'est la base que vous devez savoir pour commencer à créer vos propres robots :-)
en 2016, les choses sont beaucoup plus faciles. installez jquery sur node.js avec votre console:
npm install jquery
le lier à la variable $
(par exemple - je suis habitué) dans votre code node.js:
var $ = require("jquery");
faire des trucs:
$.ajax({
url: 'gimme_json.php',
dataType: 'json',
method: 'GET',
data: { "now" : true }
});
fonctionne également pour gulp car il est basé sur node.js.
var $ = require("jquery"); $.ajax // undefined
(Downvoted for the moment).
npm install jquery
premier?
> console.log(require("jquery").toString());
me donne la fonction d'usine: function ( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); }
j'ai dû utiliser la réponse ci-dessus avec jsdom: stackoverflow.com/a/4129032/539490
Je crois que la réponse à cette question est maintenant oui.
https://github.com/tmpvar/jsdom
var navigator = { userAgent: "node-js" };
var jQuery = require("./node-jquery").jQueryInit(window, navigator);
npm install jquery --save
#note TOUT EN MAJUSCULE
npm install jsdom --save
const jsdom = require("jsdom");
const dom = new jsdom.JSDOM(`<!DOCTYPE html>`);
var $ = require("jquery")(dom.window);
$.getJSON('https://api.github.com/users/nhambayi',function(data) {
console.log(data);
});
Le module jQuery peut être installé en utilisant:
npm install jquery
Exemple:
var $ = require('jquery');
var http = require('http');
var options = {
host: 'jquery.com',
port: 80,
path: '/'
};
var html = '';
http.get(options, function(res) {
res.on('data', function(data) {
// collect the data chunks to the variable named "html"
html += data;
}).on('end', function() {
// the whole of webpage data has been collected. parsing time!
var title = $(html).find('title').text();
console.log(title);
});
});
Références de jQuery dans Node.js **:
Vous devez obtenir la fenêtre en utilisant la nouvelle API JSDOM.
const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
...
) devrait être .JSDOM ("<! DOCTYPE html>") pour la prise en charge HTML5?
ATTENTION
Cette solution, comme l'a mentionné Golo Roden, n'est pas correcte . C'est juste une solution rapide pour aider les gens à faire fonctionner leur code jQuery réel à l'aide d'une structure d'application Node, mais ce n'est pas la philosophie Node car le jQuery fonctionne toujours côté client plutôt que côté serveur. Je suis désolé d'avoir donné une mauvaise réponse.
Vous pouvez également rendre Jade avec un nœud et y mettre votre code jQuery. Voici le code du fichier jade:
!!! 5
html(lang="en")
head
title Holamundo!
script(type='text/javascript', src='http://code.jquery.com/jquery-1.9.1.js')
body
h1#headTitle Hello, World
p#content This is an example of Jade.
script
$('#headTitle').click(function() {
$(this).hide();
});
$('#content').click(function() {
$(this).hide();
});
Le module jsdom est un excellent outil. Mais si vous voulez évaluer des pages entières et faire des trucs géniaux côté serveur, je vous suggère de les exécuter dans leur propre contexte:
vm.runInContext
Ainsi, des choses comme require
/ CommonJS
on site ne feront pas exploser votre processus Node lui-même.
Vous pouvez trouver la documentation ici . À votre santé!
Depuis jsdom v10, la fonction .env () est obsolète. Je l'ai fait comme ci-dessous après avoir essayé beaucoup de choses pour exiger jquery:
var jsdom = require('jsdom');
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = jQuery = require('jquery')(window);
J'espère que cela vous aidera, vous ou toute personne confrontée à ce type de problèmes.
TypeError: JSDOM is not a constructor
$.each
. Je viens d'inclure ces lignes, puis je l'ai fait comme ci-dessous: $.each(errors, function (ind,error) { res.send(error.msg);console.log(error.msg); });
J'espère que cela aide !!
Tout d'abord l'installer
npm install jquery -S
Après l'avoir installé, vous pouvez l'utiliser comme ci-dessous
import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();
Vous pouvez consulter un tutoriel complet que j'ai écrit ici: https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7
Aucune de ces solutions ne m'a aidé dans mon application Electron.
Ma solution (solution de contournement):
npm install jquery
Dans votre index.js
dossier:
var jQuery = $ = require('jquery');
Dans vos .js
fichiers, écrivez vos fonctions jQuery de cette façon:
jQuery(document).ready(function() {
Oui, jQuery
peut être utilisé avec Node.js
.
Étapes pour inclure jQuery dans le projet de noeud: -
npm i jquery --save
Inclure jquery dans les codes
import jQuery from 'jquery';
const $ = jQuery;
J'utilise jquery dans les projets node.js tout le temps spécifiquement dans le projet de l'extension chrome.
par exemple https://github.com/fxnoob/gesture-control-chrome-extension/blob/master/src/default_plugins/tab.js
Non. Ce sera un gros effort de porter un environnement de navigateur sur un nœud.
Une autre approche, que j'étudie actuellement pour les tests unitaires, consiste à créer une version "fictive" de jQuery qui fournit des rappels chaque fois qu'un sélecteur est appelé.
De cette façon, vous pouvez tester vos plugins jQuery sans avoir de DOM. Vous devrez toujours tester dans de vrais navigateurs pour voir si votre code fonctionne à l'état sauvage, mais si vous découvrez des problèmes spécifiques au navigateur, vous pouvez facilement "simuler" ceux de vos tests unitaires.
Je pousserai quelque chose sur github.com/felixge une fois qu'il sera prêt à être diffusé.
Vous pouvez utiliser Electron , il autorise les browserjs hybrides et les nodejs.
Avant, j'essayais d'utiliser canvas2d dans nodejs, mais finalement j'ai abandonné. Il n'est pas pris en charge par nodejs par défaut, et trop difficile à installer (beaucoup de ... dépendances). Jusqu'à ce que j'utilise Electron, je peux facilement utiliser tout mon code de navigateur précédent, même WebGL, et transmettre la valeur du résultat (par exemple, les données d'image de base64 du résultat) au code nodejs.
Pas que je sache de. Le DOM est une chose côté client (jQuery n'analyse pas le HTML, mais le DOM).
Voici quelques projets Node.js en cours:
https://github.com/ry/node/wiki ( https://github.com/nodejs/node )
Et le djangode de SimonW est sacrément cool ...
Une alternative consiste à utiliser Underscore.js . Il devrait fournir ce que vous auriez pu vouloir côté serveur de JQuery.