Connecter Node.js à une base MySQL pour fournir des données JSON

CommonJS

npm init -y
npm init -y
{
  "name": "node-mysql-server",
  "version": "1.0.0",
  "description": "Serveur Node connecté à MySQL",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "start": "node server.js"
  }
}
{
  "name": "node-mysql-server",
  "version": "1.0.0",
  "description": "Serveur Node connecté à MySQL",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "start": "node server.js"
  }
}
"type": "module"
"type": "module"
npm install mysql2
npm install mysql2
krautrock
krautrock
CREATE TABLE tab_bands (
  ch_band_id INT AUTO_INCREMENT PRIMARY KEY,
  ch_band_label VARCHAR(150) NOT NULL,
  ch_band_image VARCHAR(255),
  ch_band_etat TINYINT DEFAULT 1
);
CREATE TABLE tab_bands (
  ch_band_id INT AUTO_INCREMENT PRIMARY KEY,
  ch_band_label VARCHAR(150) NOT NULL,
  ch_band_image VARCHAR(255),
  ch_band_etat TINYINT DEFAULT 1
);
CREATE TABLE tab_albums (
  ch_album_id INT AUTO_INCREMENT PRIMARY KEY,
  ch_album_band_id INT NOT NULL,
  ch_album_label VARCHAR(150) NOT NULL,
  ch_album_pochette VARCHAR(255),
  ch_album_year VARCHAR(4),
  ch_album_link VARCHAR(255),
  ch_album_etat TINYINT DEFAULT 1,
  CONSTRAINT fk_album_band
    FOREIGN KEY (ch_album_band_id)
    REFERENCES tab_bands(ch_band_id)
);
CREATE TABLE tab_albums (
  ch_album_id INT AUTO_INCREMENT PRIMARY KEY,
  ch_album_band_id INT NOT NULL,
  ch_album_label VARCHAR(150) NOT NULL,
  ch_album_pochette VARCHAR(255),
  ch_album_year VARCHAR(4),
  ch_album_link VARCHAR(255),
  ch_album_etat TINYINT DEFAULT 1,
  CONSTRAINT fk_album_band
    FOREIGN KEY (ch_album_band_id)
    REFERENCES tab_bands(ch_band_id)
);
INSERT INTO tab_bands (ch_band_label, ch_band_image) VALUES
('Can','can.jpg'),
('Neu!','neu.jpg'),
('Kraftwerk','kraftwerk.jpg'),
('Faust','faust.jpg');
INSERT INTO tab_bands (ch_band_label, ch_band_image) VALUES
('Can','can.jpg'),
('Neu!','neu.jpg'),
('Kraftwerk','kraftwerk.jpg'),
('Faust','faust.jpg');
INSERT INTO tab_albums (ch_album_band_id, ch_album_label, ch_album_pochette, ch_album_annee, ch_album_link, ch_album_etat) VALUES
(1,'Tago Mago','tago-mago.jpg',1971,'https://www.youtube.com/watch?v=-Ap84WIErmA',1),
(1,'Future Days','future-days.jpg',1973,'https://www.youtube.com/watch?v=wQxMB4Wk_y8',0),
(2,'Neu!','neu.webp',1972,'https://www.youtube.com/watch?v=vQCTTvUqhOQ',0),
(2,'Neu! 2','neu-2.jpg',1973,'https://www.youtube.com/watch?v=V85AjBFDmbI',0),
(3,'Autobahn','autobahn.webp',1974,'https://www.youtube.com/watch?v=WxFVhBwGr7U',1),
(3,'Trans-Europe Express','trans-europe-express.jpg',1977,'https://www.youtube.com/watch?v=Ms6kC-3yq0k',1),
(4,'Faust IV','faust-iv.webp',1973,'https://www.youtube.com/watch?v=m5-_c2VFxhQ',1),
(4,'Faust So Far','faust-so-far.webp',1972,'https://www.youtube.com/watch?v=8Z4ahue-pSo',0);
INSERT INTO tab_albums (ch_album_band_id, ch_album_label, ch_album_pochette, ch_album_annee, ch_album_link, ch_album_etat) VALUES
(1,'Tago Mago','tago-mago.jpg',1971,'https://www.youtube.com/watch?v=-Ap84WIErmA',1),
(1,'Future Days','future-days.jpg',1973,'https://www.youtube.com/watch?v=wQxMB4Wk_y8',0),
(2,'Neu!','neu.webp',1972,'https://www.youtube.com/watch?v=vQCTTvUqhOQ',0),
(2,'Neu! 2','neu-2.jpg',1973,'https://www.youtube.com/watch?v=V85AjBFDmbI',0),
(3,'Autobahn','autobahn.webp',1974,'https://www.youtube.com/watch?v=WxFVhBwGr7U',1),
(3,'Trans-Europe Express','trans-europe-express.jpg',1977,'https://www.youtube.com/watch?v=Ms6kC-3yq0k',1),
(4,'Faust IV','faust-iv.webp',1973,'https://www.youtube.com/watch?v=m5-_c2VFxhQ',1),
(4,'Faust So Far','faust-so-far.webp',1972,'https://www.youtube.com/watch?v=8Z4ahue-pSo',0);
project
│
├── server.js
├── db.js
│
├── api
│   └── albums.js
│
├── public
│   ├── index.html
│   ├── script.js
│
└── package.json
project
│
├── server.js
├── db.js
│
├── api
│   └── albums.js
│
├── public
│   ├── index.html
│   ├── script.js
│
└── package.json
// db.js
import mysql from 'mysql2';

export const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'krautrock'
});
// db.js
import mysql from 'mysql2';

export const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'krautrock'
});
// server_01.js minimal à améliorer au fur et à mesure des besoins
import http from 'http';

const server = http.createServer((req, res) => {
  res.end('Serveur Node actif');
});

server.listen(3000, () => {
  console.log('Serveur lancé sur http://localhost:3000');
});
// server_01.js minimal à améliorer au fur et à mesure des besoins
import http from 'http';

const server = http.createServer((req, res) => {
  res.end('Serveur Node actif');
});

server.listen(3000, () => {
  console.log('Serveur lancé sur http://localhost:3000');
});
node server.js
node server.js
npm start
npm start
/api/albums
/api/albums
// server_02.js
import http from 'http';
import { db } from './db.js'; // import de la connexion MySQL définie dans db.js

// Création du serveur HTTP
const server = http.createServer((req, res) => {

  // Si l'URL demandée par le navigateur correspond à /api/albums
  if (req.url === '/api/albums') {

    // Exécution d'une requête SQL sur la base de données
    // db.query envoie la requête à MySQL
    db.query('SELECT * FROM tab_albums', (err, results) => {

      // Si une erreur se produit pendant la requête
      if (err) {
        // On renvoie un code HTTP 500 (erreur serveur)
        res.writeHead(500);

        // Message simple envoyé au navigateur
        res.end('Erreur serveur');

        // On arrête l'exécution du code
        return;
      }

      // Si tout se passe bien, on renvoie un code HTTP 200
      // et on précise que la réponse sera au format JSON
      res.writeHead(200, {
        'Content-Type': 'application/json'
      });

      // Les résultats SQL sont convertis en JSON
      // puis envoyés au navigateur
      res.end(JSON.stringify(results));

    });

    // Empêche le serveur de continuer à traiter la requête
    return;
  }

});

// Démarrage du serveur sur le port 3000
server.listen(3000, () => {
  console.log('Serveur lancé sur http://localhost:3000');
});
// server_02.js
import http from 'http';
import { db } from './db.js'; // import de la connexion MySQL définie dans db.js

// Création du serveur HTTP
const server = http.createServer((req, res) => {

  // Si l'URL demandée par le navigateur correspond à /api/albums
  if (req.url === '/api/albums') {

    // Exécution d'une requête SQL sur la base de données
    // db.query envoie la requête à MySQL
    db.query('SELECT * FROM tab_albums', (err, results) => {

      // Si une erreur se produit pendant la requête
      if (err) {
        // On renvoie un code HTTP 500 (erreur serveur)
        res.writeHead(500);

        // Message simple envoyé au navigateur
        res.end('Erreur serveur');

        // On arrête l'exécution du code
        return;
      }

      // Si tout se passe bien, on renvoie un code HTTP 200
      // et on précise que la réponse sera au format JSON
      res.writeHead(200, {
        'Content-Type': 'application/json'
      });

      // Les résultats SQL sont convertis en JSON
      // puis envoyés au navigateur
      res.end(JSON.stringify(results));

    });

    // Empêche le serveur de continuer à traiter la requête
    return;
  }

});

// Démarrage du serveur sur le port 3000
server.listen(3000, () => {
  console.log('Serveur lancé sur http://localhost:3000');
});
http://localhost:3000/api/albums
http://localhost:3000/api/albums
node server.js
node server.js
<!-- index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Albums krautrock</title>
</head>
<body>

  <h1>Albums krautrock</h1>
  <div id="resultats"></div>

  <script src="script.js"></script>
</body>
</html>
<!-- index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Albums krautrock</title>
</head>
<body>

  <h1>Albums krautrock</h1>
  <div id="resultats"></div>

  <script src="script.js"></script>
</body>
</html>
<script type="module" src="script.js"></script>
<script type="module" src="script.js"></script>
document.addEventListener('DOMContentLoaded', () => {

  fetch('/api/albums')
    .then(response => response.json())
    .then(data => {

      const zone = document.getElementById('resultats');

      // création d'une liste HTML
      const liste = document.createElement('ul');

      // parcours des albums renvoyés par l'API
      data.forEach(album => {

        const li = document.createElement('li');

        // lien vers l'écoute de l'album
        const lien = document.createElement('a');
        lien.href = album.ch_album_link;
        lien.textContent = album.ch_album_label;
        lien.target = '_blank';

        li.appendChild(lien);
        liste.appendChild(li);

      });

      zone.appendChild(liste);

    })
    .catch(error => {
      console.error('Erreur lors du chargement des albums :', error);
    });

});
document.addEventListener('DOMContentLoaded', () => {

  fetch('/api/albums')
    .then(response => response.json())
    .then(data => {

      const zone = document.getElementById('resultats');

      // création d'une liste HTML
      const liste = document.createElement('ul');

      // parcours des albums renvoyés par l'API
      data.forEach(album => {

        const li = document.createElement('li');

        // lien vers l'écoute de l'album
        const lien = document.createElement('a');
        lien.href = album.ch_album_link;
        lien.textContent = album.ch_album_label;
        lien.target = '_blank';

        li.appendChild(lien);
        liste.appendChild(li);

      });

      zone.appendChild(liste);

    })
    .catch(error => {
      console.error('Erreur lors du chargement des albums :', error);
    });

});
// server_03.js
import http from 'http';
import fs from 'fs';
import path from 'path';
import { db } from './db.js';

const root = path.resolve('./public');

const server = http.createServer((req, res) => {

  // --- ROUTE API ---
  if (req.url === '/api/albums') {

    db.query('SELECT * FROM tab_albums', (err, results) => {

      if (err) {
        res.writeHead(500);
        res.end('Erreur serveur');
        return;
      }

      res.writeHead(200, {
        'Content-Type': 'application/json'
      });

      res.end(JSON.stringify(results));

    });

    return;
  }

  // --- FICHIERS STATIQUES ---

  const target = req.url === '/' ? 'index.html' : req.url;
  const filePath = path.join(root, target);

  fs.readFile(filePath, (err, content) => {

    if (err) {
      res.writeHead(404);
      res.end('Fichier non trouvé');
      return;
    }

    res.writeHead(200); 
    res.end(content);

  });

});

server.listen(3000, () => {
  console.log('Serveur lancé sur http://localhost:3000');
});
// server_03.js
import http from 'http';
import fs from 'fs';
import path from 'path';
import { db } from './db.js';

const root = path.resolve('./public');

const server = http.createServer((req, res) => {

  // --- ROUTE API ---
  if (req.url === '/api/albums') {

    db.query('SELECT * FROM tab_albums', (err, results) => {

      if (err) {
        res.writeHead(500);
        res.end('Erreur serveur');
        return;
      }

      res.writeHead(200, {
        'Content-Type': 'application/json'
      });

      res.end(JSON.stringify(results));

    });

    return;
  }

  // --- FICHIERS STATIQUES ---

  const target = req.url === '/' ? 'index.html' : req.url;
  const filePath = path.join(root, target);

  fs.readFile(filePath, (err, content) => {

    if (err) {
      res.writeHead(404);
      res.end('Fichier non trouvé');
      return;
    }

    res.writeHead(200); 
    res.end(content);

  });

});

server.listen(3000, () => {
  console.log('Serveur lancé sur http://localhost:3000');
});
Ctrl + C
node server.js
Ctrl + C
node server.js
// server_04.js
import http from 'http';
import fs from 'fs';
import path from 'path';
import albumsRoute from './api/albums.js';

const root = path.resolve('./public');

const server = http.createServer((req, res) => {

  // délégation de la route API
  if (req.url === '/api/albums') {
    return albumsRoute(req, res);
  }

  // gestion des fichiers statiques
  const target = req.url === '/' ? 'index.html' : req.url;
  const filePath = path.join(root, target);

  fs.readFile(filePath, (err, content) => {

    if (err) {
      res.writeHead(404);
      res.end('Fichier non trouvé');
      return;
    }

    res.writeHead(200);
    res.end(content);

  });

});

server.listen(3000, () => {
  console.log('Serveur lancé sur http://localhost:3000');
});
// server_04.js
import http from 'http';
import fs from 'fs';
import path from 'path';
import albumsRoute from './api/albums.js';

const root = path.resolve('./public');

const server = http.createServer((req, res) => {

  // délégation de la route API
  if (req.url === '/api/albums') {
    return albumsRoute(req, res);
  }

  // gestion des fichiers statiques
  const target = req.url === '/' ? 'index.html' : req.url;
  const filePath = path.join(root, target);

  fs.readFile(filePath, (err, content) => {

    if (err) {
      res.writeHead(404);
      res.end('Fichier non trouvé');
      return;
    }

    res.writeHead(200);
    res.end(content);

  });

});

server.listen(3000, () => {
  console.log('Serveur lancé sur http://localhost:3000');
});

Connecter Node.js à une base MySQL pour fournir des données JSON

Initialiser le projet Node

Installer le connecteur MySQL pour Node.js

Préparer une base de données d’exemple

Création de la base et des tables

Création des tables

Insertion des données

Organisation possible du projet

Créer une connexion MySQL dans Node

Le fichier server.js : point de départ du serveur

Créer une première route API

Tester l’API depuis le navigateur

Redémarrer le serveur après modification

Ce que l’on observe dans le navigateur

Récupérer les données depuis un fichier HTML

Servir les fichiers HTML et JavaScript avant d’invoquer l’API

Séparer le serveur statique et l’API

Conclusion

Vous aimerez aussi...

Parcours d’apprentissage web – Part VIII : Relier PHP et MySQL, organiser le dialogue entre traitement et données

Parcours d’apprentissage web – Part VII : MySQL, structurer et conserver l’information

SQL en situation réelle : exploiter, corriger et fiabiliser une base existante