Pourquoi utiliser nodeJS et Ajax

Commençons par nodejs, pour faire simple il s’agit de javascript exécuté côté serveur. J’utilise depuis un petit moment ce langage au lieu de PHP. L’avantage est la performance, nodejs est très rapide à l’exécution. De plus, si pendant vos développements vous avez besoin de gérer du temps réel, rien de plus compliqué avec nodejs et ses sockets par exemple.

A présent pourquoi Ajax ? Pour faire simple, c’est une méthode très souvent utilisé, mais nous pourrions également utiliser fetch ou autre chose. De mon côté je vais ajouter la couche JQuery pour aller un peu plus vite.

Pour exposer le sujet je vais développer un petit moteur de recherche.

Comment se décompose le projet ?

Nous allons commencer par développer la partie BackEnd du projet. Pour générer le serveur nodeJS nous utiliserons Express.

Voici l’architecture de notre serveur. Le fichier server.js contient la base du serveur , la définition d’express. J’ai également ajouté un petit morceau de code permettant d’éviter les problèmes de CORS origin

app.all("*", function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
    res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
    return next();
});

Dans ce même fichier on va devenir les futurs routes grâce à :

require('route')(app);

Toutes les informations liées aux routes se trouveront donc dans le fichier route.js

const controller = require('controller');

module.exports = function (app) {

    app.post('/data/get_all',controller.getAll);
    app.post('/data/filter',controller.filter);
    app.post('/data/categorie',controller.categorie);


    app.use('*', function (req, res, next) {
        return res.json({
            error: true,
            message:'Route Not Found'
        });
    })
};

Le dernier fichier est le controller.js , c’est là où je vais mettre toutes les fonctions. Vous pourrez retrouver le contenu de ce fichier sur github.

J’ai également un fichier data.json qui contient le contenu que je vais afficher, dans votre côté le contenu peut provenir de mysql ou autre moyen de stockage.

Le package.json quant à lui contiendra les paquets npm utile au projet.

"dependencies": {
    "body-parser": "^1.18.3",
    "cors": "^2.8.4",
    "express": "^4.16.3",
    "helmet": "^3.21.1",
    "rootpath": "^0.1.2"
  }

Une fois le backend terminé depuis le port que j’aurai choisi dans le serveur.js , je vais pouvoir accéder à 3 routes.

La premiere est /data/get_all c’est à partir d’ici que nous allons pouvoir récupérer toutes les données.

La seconde est /data/filter, cette route permettra de rechercher par catégorie et par mot clé.

Et la dernière est /data/categorie, elle sera seulement utile pour accéder à toute les catégories.

La partie Front

Notre index comprendra seulement le html du moteur. Tandis que le script.js, lui, permettra les appels à notre serveur et l’affichage des données.

Il n’y a pas grand chose à dire sur cette partie. Puisque qu’il s’agit simplement de faire des requêtes à notre serveur API et de les traiter pour modifier l’html.

Bien évidemment, je pars du principe que vous avez des bases en Jquery + html. Mais si ce n’est pas le cas, n’hésitez pas à me le dire, je peux faire plus détaillé.

Comme promis je vous met le lien du repo contenant le code https://github.com/KevinJaniky/search_by_ajax_and_nodejs

Photo by Crew on Unsplash

Show CommentsClose Comments

Leave a comment