Download Report

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