Scribd
Importer
10 vues2 pages

Application JavaScript Client-Serveur complète

Le document décrit la création d'une application JavaScript client-serveur avec une interface web dynamique, une API REST sécurisée et une base de données MongoDB. Il détaille les étapes pour mettre en place le serveur Node.js, les modèles et routes pour gérer les tâches, ainsi que l'interface client pour interagir avec l'API. En option, il propose d'ajouter une sécurisation avec JWT et des suggestions pour le déploiement de l'application.

Transféré par

TRAORE Boukaye Boubacar
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
10 vues2 pages

Application JavaScript Client-Serveur complète

Le document décrit la création d'une application JavaScript client-serveur avec une interface web dynamique, une API REST sécurisée et une base de données MongoDB. Il détaille les étapes pour mettre en place le serveur Node.js, les modèles et routes pour gérer les tâches, ainsi que l'interface client pour interagir avec l'API. En option, il propose d'ajouter une sécurisation avec JWT et des suggestions pour le déploiement de l'application.

Transféré par

TRAORE Boukaye Boubacar
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Travaux Pratiques – JavaScript Architecture

Client–Serveur
Objectif pédagogique : Mettre en œuvre une application complète JavaScript client–serveur avec
une interface web dynamique, une API REST sécurisée et une base de données MongoDB.

Structure du projet :
todo-app/ ■ ■■■ backend/ ■ ■■■ [Link] ■ ■■■ routes/ ■ ■ ■■■ [Link] ■ ■■■ models/ ■
■ ■■■ [Link] ■ ■■■ [Link] ■ ■■■ frontend/ ■ ■■■ [Link] ■ ■■■ [Link] ■ ■■■
[Link]

Étape 1 : Création du serveur [Link]


Créez un fichier [Link] :
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const tasksRoute = require('./routes/tasks');

const app = express();


[Link]([Link]());
[Link](cors());

[Link]('mongodb://localhost:27017/todoApp');

[Link]('/api/tasks', tasksRoute);
[Link](4000, () => [Link]('Serveur sur [Link]

Étape 2 : Modèle et routes


models/[Link] :
const mongoose = require('mongoose');
const taskSchema = new [Link]({ title: String, completed: Boolean });
[Link] = [Link]('Task', taskSchema);

routes/[Link] :
const express = require('express');
const router = [Link]();
const Task = require('../models/Task');

[Link]('/', async (req, res) => {


const tasks = await [Link]();
[Link](tasks);
});

[Link]('/', async (req, res) => {


const newTask = new Task([Link]);
await [Link]();
[Link](newTask);
});

[Link]('/:id', async (req, res) => {


await [Link]([Link]);
[Link](204);
});
[Link] = router;

Étape 3 : Interface client


frontend/[Link] :
Ma liste de tâches

Ajouter

frontend/[Link] :
const API_URL = '[Link]

async function loadTasks() {


const res = await fetch(API_URL);
const tasks = await [Link]();
const list = [Link]('taskList');
[Link] = '';
[Link](t => {
const li = [Link]('li');
[Link] = [Link];
[Link](li);
});
}

[Link]('addBtn').addEventListener('click', async () => {


const title = [Link]('taskInput').value;
await fetch(API_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: [Link]({ title, completed: false })
});
loadTasks();
});

loadTasks();

Étape 4 : Sécurisation avec JWT (option avancée)


Ajoutez un module [Link] pour gérer la génération et la vérification de tokens JWT.
Protégez certaines routes avec un middleware verifyToken pour restreindre l'accès aux utilisateurs
authentifiés.

Étape 5 : Déploiement
Utilisez Render, Vercel ou Railway pour héberger le backend et frontend.
Configurez MongoDB Atlas pour la base de données distante.

Résultat attendu :
Le front permet d’ajouter et d’afficher des tâches. Le back gère les requêtes REST, la base
MongoDB conserve les données, illustrant une architecture JavaScript client–serveur complète.

Vous aimerez peut-être aussi