Share
În partea anterioară a acestei serii am văzut cum să începem cu Eve, un cadru Python REST API și să creăm unele API-uri. În această parte a seriei, vom utiliza acele API-uri pentru a crea o aplicație alimentată de Node.js și AngularJS.
Vom implementa funcționalitatea de înscriere utilizând Node.js și vom adăuga alte funcționalități prin apelarea API-urilor REST de la AngularJS.
Pentru a începe, clonați codul sursă al tutorialului anterior și rulați API-urile.
git clone https://github.com/jay3dec/REST_API_EVE_Part-1
După ce ați clonat codul sursă, asigurați-vă că ați rulat MongoDB. Navigați la REST_API_EVE_Part-1 director și executați aplicația:
cd REST_API_EVE_Part-1 Python app.py
Acum, ar trebui să utilizați API-ul pe http: // localhost: 5000 /.
Creați un director de proiect numit AngularNodeApp. Vom folosi Express, un cadru de aplicații web minimalist pentru crearea aplicațiilor Node.js. Deci, să instalăm expres în proiectul nostru.
npm install express
O singura data expres a fost instalat, creați un fișier numit app.js. Interior app.js vom crea cererea expresă și vom defini rutele pentru aplicație.
Să începem prin importul expres în app.js și crearea unei aplicații exprese.
Accentsconagua
var expres = necesită ('expres'), app = express (); app.get ('/', funcția (req, res) res.send ('bun venit !!');); app.listen (3000) Tocmai am creat o aplicație expresă și am definit un traseu, /, care se va întoarce Bine ati venit la cerere. Porniți serverul.
nod app.js
Punctați browserul la http: // localhost: 3000 / și ar trebui să aveți mesajul Bine ati venit !!.
Să creați o pagină de pornire pentru aplicația noastră. Navigați la dosarul proiectului și creați un nou director numit public. Interior publice / index creați un fișier numit index.html. Adăugați următorul cod HTML la index.html.
Aplicație Nod unghiular Aplicație Nod unghiular
Aplicație Nod unghiular
Înscrie-te astăzi
Apoi, să modificăm existența / solicitantului de a afișa index.html. Definiți calea către public director în app.js.
app.use (expres.static (__ dirname + '/ public'));
Modificați / Solicitați un mesaj de manipulare după cum se arată:
app.get ('/', funcția (req, res) res.sendFile ('index.html', 'root': __dirname + '/ public / index'););Salvați modificările și reporniți serverul. Punctați browser-ul dvs. la http: // localhost: 3000 / și ar trebui să puteți vedea pagina aplicației.
Apoi creați o pagină numită signin / signin.html și adăugați următorul cod HTML:
Python Cup Bucket List App Python Flask App
Lista de aplicații Bucket
În app.js adăugați un handler de solicitare numit /Conectare care va face signin.html pagină.
app.get ('/ signIn', funcția (req, res) res.sendFile ('signin.html', 'root': __dirname + '/ public / signin'););În mod similar, adăugați a signup.html la publice / înscriere folder cu următorul cod HTML:
Python Cup Bucket List App Python Flask App
Lista de aplicații Bucket
Adăugați un handler de solicitare numit Inscrie-te în app.js.
app.get ('/ signUp', funcția (req, res) res.sendFile ('signup.html', 'root': __dirname + '/ public / signup');Salvați modificările și reporniți serverul. Punctați browser-ul dvs. la http: // localhost: 3000 și ar trebui să aveți aplicația să ruleze. Dați clic pe link-urile de conectare și de înscriere de pe pagină, iar paginile respective trebuie afișate.
Pentru a implementa funcționalitatea de înscriere, vom apela API-ul Python Eve REST. Vom numi acest API din Node.js back end, deoarece necesită să treacă numele de utilizator și parola de autentificare a serviciului. Deci, pentru a preveni expunerea numele de utilizator și parola de autentificare din script-uri, vom face acest apel Node.js.
Să creați mai întâi a Inregistreaza-te handler de cereri pentru a gestiona funcționalitatea de înscriere.
app.post ('/ register', funcția (req, resp) // Codul va fi aici);Vom cere corp-parser pentru a analiza datele trimise din formular. Instalare corp-parser folosind managerul de pachete NPM.
npm instalează corp-parser
O singura data corp-parser a fost instalat, necesita ca in interior app.js.
bodyParser = necesită ("corp-parser")A folosi corp-parser pentru a analiza datele formularului trimis, trebuie să îl folosim în aplicația noastră.
app.use (bodyParser.urlencoded (extins: true));
În interiorul /Inregistreaza-te manipulator putem analiza datele formularului după cum se arată:
var _firstName = req.body.inputFirstName; var _lastName = req.body.inputLastName; var _username = req.body.inputUsername; var _password = req.body.inputPassword; var _phone = req.body.inputPhone;
Vom folosi cerere pentru a efectua apelul către API-urile Eve. Deci, instalați cererea în aplicație.
Cerere de instalare npm
necesita cerere în app.py.
request = solicită ("cerere")Creați opțiunile pentru apelarea API după cum se arată:
var opțiuni = url: 'http://127.0.0.1:5000/user/', metoda: 'POST', auth: user: 'admin', parola: 'admin'), formData: firstname: _firstName, nume de familie: _lastName, nume utilizator: _username, parola: _password, telefon: _phone
Am specificat detaliile pentru POST solicitați opțiunile. admin_username și parola administratorului sunt numele de utilizator și parola de autentificare necesare pentru a accesa API-ul de creare a utilizatorilor Eve.
Apoi, să folosim cerere pentru a efectua apelul.
cerere (opțiuni, funcție (err, res, corp) if (err) console.log (err); ))
Salvați modificările și reporniți serverul. Punctați browser-ul dvs. la http: // localhost: 3000 și navigați la ecranul de înscriere. Introduceți detaliile și faceți clic pe butonul de înscriere. Verificați fereastra terminalului pentru răspunsul și detaliile de creare a utilizatorului returnate din apelul API.
Când apare o eroare în timpul procesului de înscriere, vom transmite mesajul de eroare la pagina de înscriere. Vom folosi un motor de șablon denumit EJS. Mai întâi, să instalăm EJS.
npm install ejs
După ce ați terminat instalarea EJS, adăugați următoarea linie de cod pentru a seta folderul de vizualizare și motorul de vizualizare.
var path = necesită ('path'); app.set ("vizualizări", path.join (__ dirname + '/ public / signup)); app.set ("motor de vizualizare", "ejs");Redenumiți signup.html la signup.ejs și adăugați un interval pentru a afișa o eroare după butonul de trimitere.
<%= error %>De asemenea, modificați Inscrie-te solicitantului de cereri.
app.get ('/ signUp', funcția (req, res) res.render ('signup', eroare: "));În continuare, în cazul în care apare o eroare în răspunsul la înscriere, îl vom trimite pe pagina de înscriere. Dacă procesul de înscriere nu întoarce nicio eroare, vom redirecționa utilizatorul la pagina de conectare.
cerere (opțiuni, funcție (err, res, corp) if (err) return.render ('signup', error: err var rezultat = JSON.parse (body) if (result._status == 'ERR') if (result._error.code == '400') returnează resp.render ('signup', eroare: 'Nume utilizator deja există! eroare: result._issues.username altceva console.log ('Toate bune'); resp.redirect ('/ signIn');)Salvați toate modificările și reporniți serverul. Punctați browserul la http: // localhost: 3000 / signUp și încercați să vă înregistrați utilizând un nume de utilizator existent. Deoarece numele de utilizator există deja, ar trebui să primiți o eroare.
AngularJS oferă un serviciu numit $ http care ajută la efectuarea apelurilor API REST. Din documentele AngularJS,
$ httpserviciul este un serviciu unghiular de bază care facilitează comunicarea cu serverele HTTP la distanță prin intermediul obiectului XMLHttpRequest al browserului sau prin JSONP.
Copiați conținutul corpului index.html și să creați un nou fișier numit publice / home / home.html.
Aplicație Nod unghiular
Aplicație Nod unghiular
Înscrie-te astăzi
În dosarul de domiciliu, creați un fișier numit home.js și să definească Acasă modul și configurarea rutelor după cum se arată:
"utilizarea strictă"; "$ routeProvider" ($ routeportProvider) $ routeProvider.when ('/ home', templateUrl: '... /home/home.html', 'home', ['ngRoute']) .config ', controler:' HomeCtrl ');]) .controller (' HomeCtrl ', [function () ]);În mod similar, înlocuiți codul HTML din signin.html cu conținutul corpului signin.html. Vom gestiona rutarea paginii de conectare prin aplicația AngularJS.
În interiorul conectare folder, creați un fișier numit signin.js și adăugați următoarele detalii privind configurarea rutei.
"utilizarea strictă"; "$ routeProvider", funcția ($ routeProvider) $ routeProvider.when ('/ signin', templateUrl: "... /signin/signin.html", controler: 'SignInCtrl');]) În index.html vom folosi ngView și direcționați vizualizările aplicației AngularJS. Iată cum index.html va arata:
Aplicație Nod unghiular
În interiorul index folder, creați un fișier numit index.js care va servi ca fișier rădăcină. În index.js vom injecta diferitele module create în AplicațiaMea app. Aici este index.js fişier:
angular.module ("myApp", ['ngRoute', 'home', 'signin']). config (['$ routeProvider', functie ($ routeProvider) $ routeProvider.otherwise redirectTo: '/ home');]);Instalare unghiular-route utilizând bower și includeți referința în index.html.
bower instalați unghi-ruta
De asemenea, va trebui să convertim numele de utilizator și parola base64, așa că instalați unghiular-base64.
bower instala unghiul-base64
Odată instalat, adăugați o referință la unghiular-base64 în index.html.
Setați calea statică la bower_components în app.js.
app.use ('/ bower_components', expres.static (__ dirname + '/ bower_components)); Interior signin.js, hai să creăm un controler numit SignInCtrl.
"utilizarea strictă"; "$ routeProvider", "$ routeProvider" $ routeProvider.when ('/ signin', templateUrl: '... / login /signin.html ", controler: 'SignInCtrl');]) .controller ('SignInCtrl', '$ scope', '$ http', '$ base64' ) );Tocmai am creat un controler numit SignInCtrl în signin.js. Am injectat base64 modul la SignInCtrl.
La butonul de conectare, faceți clic pe cele de mai sus conectare pentru a autentifica utilizatorul. Deci, mai întâi să adăugăm ngModel directivă în câmpul de nume de utilizator și parolă din pagina de conectare.
Adaugă ngClick direcția la butonul de conectare din signin.html.
În interiorul conectare funcția citiți numele de utilizator și parola de la domeniul de aplicare $. După ce vom avea numele de utilizator și parola, vom crea base64 folosind șir unghiular-base64.
$ scope.signIn = funcție () var username = $ scope.username; var parola = $ scope.password; var authdata = $ base64.encode (numele de utilizator + ':' + parola);
Înainte de a apela API-urile REST, trebuie să setăm anteturile necesare. Trebuie să setăm Access-Control-Cerere-Cap și Access-Control-Expune-Cap.
$ http.defaults.headers.common = "Access-Control-Request-Headers": "accept, origine, autorizare"; $ http.defaults.headers.common = "Access-Control-Expose-Headers": "Origine, X-solicitat-cu, Content-Type, Accept"; $ http.defaults.headers.common ["Cache-Control"] = "nu-cache"; $ http.defaults.headers.common.Pragma = "nu-cache";
De asemenea, va trebui să setăm Autorizare antet în $ http. Utilizarea base64 authData creat folosind nume de utilizator și parola, setați antetul de autorizare.
$ http.defaults.headers.common ['Autorizare'] = 'Basic' + authdata;
Apoi, faceți $ http Apelați API-urile Python Eve REST.
$ http (metoda: 'GET', url: 'http://127.0.0.1:5000/user/' + username). succes (funcție (date, stare, antete, config) console.log (data);). eroare (funcție (date, stare, anteturi, config) console.log (date, status););
Salvați toate modificările și reporniți serverul. Indicați browser-ul dvs. la http: // localhost: 3000 / signin. Încercați să vă conectați utilizând un nume de utilizator și o parolă valide. Verificați consola browser și ar trebui să aveți datele utilizatorului. În cazul în care autentificarea nu reușește, trebuie să aveți o eroare de eroare de autentificare.
În acest tutorial, am văzut cum să folosim API-urile REST create în tutorialul anterior din secțiunea noastră AngularJS și Node.js app. Am implementat funcția de conectare și înscriere în acest tutorial.
În următoarea parte a acestei serii, vom utiliza celelalte API-uri pentru a finaliza aplicația AngularJS.
Codul sursă din acest tutorial este disponibil pe GitHub.
