doc8 - Landre Jerome
download 
Report Transcription
8 - Landre Jerome
M41B2 Technologies Javascript AngularJS / NodeJS TD 8 Jérôme Landré – [email protected] bureau C203 (GMP) DUT Métiers du Multimédia et de l'Internet I.U.T. de Troyes Université de Reims Champagne-Ardenne Plan I- MEAN II- Interactions MySQL/Node.js III- Interactions AngularJS/Node.js IV- Application aux footballeurs 2 I- MEAN 3 MEAN ● ● ● MEAN signifie MongoDB, Express, Angular, Node.js C'est un ensemble d'outils très performants et à la mode pour développer des applications Web Quelques sites intéressants (parmi d'autres) : http://meanjs.org, http://mean.io ● (On peut remplacer MongoDB par MySQL) 4 II- Interactions MySQL/Node.js 5 Interactions MySQL/Node.js ● ● Node.js est capable de communiquer avec une base MySQL grâce au module 'sql' On part de la base de données des enseignants : 6 mean.js var express = require("express"); var mysql = require("mysql"); mean.js var app = express(); var connexion = mysql.createConnection({ host : "localhost", user : "root", password : "", database : "testnode" }); connexion.connect(function(error){ if(error) { console.log("Problème avec MySQL : "+error); } else { console.log("Connexion avec la base OK..."); } }); ... 7 mean.js mean.js app.get('/', function(req, res) { res.end('<p>Bienvenue !</p>'); }); /* Lancement de la requête et récupération des données en JSON */ app.get('/charge',function(req, res){ connexion.query("SELECT * FROM personnes", function(error,rows){ if (error) { console.log("Problème avec MySQL : "+error); connexion.end(); } else { res.end(JSON.stringify(rows)); } }); }); /* Démarre le serveur */ app.listen(3000, function(){ console.log("Serveur démarré sur le port 3000..."); }); 8 III- Interactions AngularJS/Node.js 9 enseignants.html <!doctype html> <html lang="fr" ng-app="appliEnseignants"> <head> <meta charset="utf-8" /><title>Les enseignants du département</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="enseignants_module.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>Les enseignants du département</h1></header> <div class="page"> <div class="principal"> <div ng-controller="EnseignantsController"> <p ng-repeat="enseignant in enseignants"> <span>{{enseignant.prenom}}{{enseignant.nom}}</span><br /> <span>{{enseignant.age}} ans.</span><br /> </p></div> </div></div> <footer>MMI3 - IUT de Troyes</footer> </body> </html> 10 enseignants_module.js var app=angular.module('appliEnseignants',[ ]); app.controller('EnseignantsController',['$scope', '$http', function ($scope, $http) { $http.get('http://localhost:3000/charge') .success(function(data){ $scope.enseignants=data; }); }]); 11 Problème de sécurité ● Problème de sécurité : Une demande multi-origines (Cross-Origin Request) a été bloquée : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://localhost:3000/charge. Ceci peut être corrigé en déplaçant la ressource sur le même domaine ou en activant CORS. 12 Problème de sécurité ● Problème de sécurité : Une demande multi-origines (Cross-Origin Request) a été bloquée : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://localhost:3000/charge. Ceci peut être corrigé en déplaçant la ressource sur le même domaine ou en activant CORS. res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS, PATCH'); res.setHeader('Access-Control-Allow-Headers', 'origin, xrequested-with, content-type'); 13 Résultat final ● On obtient la lecture des données par node.js et leur affichage par AngularJS ! 14 A faire ● Tester le code proposé sur votre base de données d'enseignants du département pour obtenir : 15 IV- Application aux footballeurs 16 A faire ● Créer une base de données avec les footballeurs et leurs clubs à partir du MCD cidessous : footballeurs foot_num foot_nom foot_prenom foot_buts foot_sels clubs jouer 0:N 0:N club_num club_nom 17 A faire ● ● Créer une application node.js qui écoute sur le port 8080 et qui renvoie un JSON avec les informations des footballeurs sur une route « /affiche » Afficher les footballeurs avec AngularJS en vous inspirant de ce TD 18 Avez-vous des questions ? 19
