Cum de a obține Python și JavaScript pentru a comunica folosind JSON

V-ați întrebat vreodată cum să trimiteți date între două limbi de programare? Încercați vreodată să trimiteți un obiect sau mai multe fragmente de date?

Astăzi vă voi arăta cum să utilizați JSON pentru a trimite date de la JavaScript la Python. Voi descrie cum să configurați un server web, împreună cu codul de care aveți nevoie.

Cerințe preliminare

Veți avea nevoie de câteva lucruri pentru a începe acest proiect. Voi rula pe Mac, instalat deja de Python. Ar trebui să puteți urmări în mod rezonabil folosind Linux. Dacă utilizați Windows, va trebui să descărcați și să instalați Python și să vă periați pe abilitățile liniei de comandă. Ghidul începătorului pentru linia de comandă Windows Un ghid pentru începători pentru linia de comandă Windows Linia de comandă vă permite să comunicați direct cu computerul și să o instruiască să îndeplinească diferite sarcini. Citeste mai mult .

Veți avea nevoie de pip, un manager de pachete pentru Python. Acesta este instalat în mod implicit cu versiuni Python mai mari decât 2.7.9.

Configurarea serverului

Aveți nevoie de un server pentru servi Python pe o pagină web. Există multe opțiuni pentru acest lucru. Dacă aveți deja o configurare a serverului, puteți trece peste acest pas.

Există multe opțiuni pe care le puteți folosi aici. Tornado este o alegere bună, așa cum este Twisted (am scris despre Twisted înainte pentru o cameră de rețea DIY). Voi folosi Flask pentru acest proiect.

Instalați flaconul folosind pip (prin linia de comandă):

pip instalare Flask

Asta e! Există câteva opțiuni de configurare, dar oferindu-le instalat corect, sunteți bine să mergeți.

Poate doriți să luați în considerare utilizarea unui mediu virtual Python Aflați cum să utilizați mediul virtual Python Aflați cum să utilizați mediul virtual Python Fie că sunteți un dezvoltator experimentat Python, fie că începeți să învățați cum să configurați un mediu virtual este esențial pentru orice proiect Python. Citiți mai multe, însă acest lucru este în întregime opțional.

Instalarea Python

Creați un fișier nou în editorul dvs. de text preferat sau în mediul integrat de dezvoltare (IDE). Folosesc Sublime Text 3 și PyCharm, dar folosiți tot ceea ce vă simțiți confortabil.

Acum efectuați o configurare inițială a balonului:

din importul flaconului Flask app = Flask (__ name__)

Aceasta importă modulele necesare și configurează aplicația. Acum, aranjați o cale:

@ app.route ("/ output") def output (): reveniți "Hello World!"

Aceasta configurează a cale, care este ca o pagină a unui site web. Acest lucru poate fi uneori numit a punct final sau a traseu.

def output () line definește a funcţie sau metodă denumit producție, care va rula ori de câte ori acest punct final este numit. Aceste metode nu trebuie să utilizeze același nume ca și punctul final - numiți orice nume potrivit. În interiorul acestei metode este un simplu Salut Lume! şir. În sfârșit, configurați-vă scriptul să ruleze efectiv atunci când este solicitat:

dacă __name__ == "__main__": app.run ()

Continuați și salvați acest script ca fiind json_io.py într-o locație potrivită. Reveniți la terminalul dvs. și navigați la dosarul proiectului. Rulați scriptul:

python json_io.py

Cuvantul piton este folosit pentru a spune computerului că fișierul următor ar trebui executat ca un script Python. Numele fișierului după aceea este numele fișierului pe care doriți să-l executați ca Python. Dacă totul funcționează corect, ar trebui să vedeți un mesaj de stare în Terminal:

* Rularea pe http://127.0.0.1:5000/ (Apăsați CTRL + C pentru a părăsi)

Aceasta vă arată adresa IP pe care rulează serverul dvs., precum și portul. Acestea vor fi 127.0.0.1 și 5000. Puteți apăsa CTRL > C pentru a opri această funcționare, dar nu faceți asta încă.

Introduceți adresa în browser și ar trebui să vedeți Salut Lume! apar pe ecran. Acum ați configurat cu succes un server Python și ați scris primul scenariu! Va trebui să reporniți serverul (opriți scriptul, apoi executați-l din nou) dacă efectuați modificări.

Dacă doriți să vizualizați scripturile pe un alt calculator din aceeași rețea, schimbați-l app.run () la:

app.run ("0.0.0.0", "5010")

Există două părți la această linie. Primul îi spune lui Flask să servească fișierele de pe adresa dvs. IP locală (asigurați-vă că păstrați acest lucru ca și cum ar fi 0.0.0.0, chiar dacă aceasta nu este adresa dvs. IP). A doua parte specifică portul. Puteți schimba portul dacă doriți. Rulați din nou scriptul (nu uitați să salvați și să reporniți).

Ar trebui să aveți acum posibilitatea să accesați scripturile dvs. de pe un alt computer din aceeași rețea. Asigurați-vă că utilizați adresa IP (executați ifconfig în linia de comandă) și portul pe care l-ați introdus anterior. Poate fi necesar să configurați paravanul de protecție dacă utilizați unul.

Consola vă va afișa răspunsul HTTP și adresa IP a oricărui dispozitiv care se conectează la serverul dvs.:

Observați cum este punctul final / df a trimis o eroare de 404? Punctul final nu este setat! Dacă doriți să accesați acest lucru pe Internet, căutați în port forwarding Ce este Port Forwarding și cum mă poate ajuta? [Explicarea MakeUseOf] Ce este portul de expediere și cum mă poate ajuta? [MakeUseOf explică] Plângeți puțin înăuntru când cineva vă spune că există o problemă de expediere a portului și de aceea noua dvs. aplicație strălucitoare nu va funcționa? Xbox-ul tău nu te va lăsa să joci jocuri, descărcările de torrent refuza ... Citește mai mult .

Template-uri

Acum că serverul dvs. este totul setat, este timpul să scrieți câteva șabloane. Veți folosi JSON pentru a trimite date între Python și Javascript, iar șabloanele facilitează acest lucru. Am scris despre ce este JSON Ce este JSON? Privire de ansamblu - Layman Overview Ce este JSON? Prezentare generală a Laymanului Fie că intenționați să deveniți un dezvoltator de web sau nu, este o idee bună să știți cel puțin ce este JSON, de ce este important și de ce este folosit pe tot globul. Citiți mai multe în trecut, deci citiți dacă nu sunteți sigur.

Va trebui să utilizați o limbă templantă. Jinja2 vine cu Flask, deci nu este nevoie de instalare suplimentară.

O limbă templantă funcționează împreună cu un server web. Este nevoie de ieșirea scripturilor dvs. Python (codul de back-end) și ușurează trimiterea către utilizatori folosind HTML (front-end). Este important să rețineți că șabloanele trebuie nu fi folosit pentru logica! Păstrați logica în Python și folosiți șabloane numai pentru afișarea datelor. Ea devine foarte murdar dacă începi să încerci să te complici cu șablonul.

Creați un dosar în directorul de proiect numit template-uri. Flask recunoaște fișierele din acest dosar ca fișiere șablon. Nu plasați aici niciun script Python, aici puteți plasa fișierele HTML.

Creați un fișier numit index.html. În interiorul acestuia, plasați următorul cod:

 Nume 

Aceasta este modalitatea de a accesa o anumită cantitate de date Nume, care va fi găsit în interiorul scenariilor dvs. Întoarce-te la tine json_io.py. script și modificați producție funcţie. În loc să se întoarcă Salut Lume, introduceți acest cod:

returnați render_template ("index.html", nume = "Joe")

Aceasta va încărca index.html fișierul pe care l-ați creat mai devreme și înlocuiți-l Nume șablon pentru șir Joe. Puteți utiliza această metodă pentru a încărca orice pagină din dosarul șablonului și pentru a le transfera orice cantitate de date.

Codul

Acum că știți cum funcționează șabloanele, iată codul HTML complet de care aveți nevoie. Inserați acest lucru în interiorul dvs. index.html fişier:

  Acest lucru va trimite date folosind AJAX în Python:

 Faceți clic pe Me

Observați cum acest lucru nu include CSS sau orice antete HTML. Acestea sunt necesare pentru paginile web (acest exemplu va funcționa fără ele), așa că aruncați o privire la acestea la W3Schools dacă vreți să.

Nu se întâmplă prea multe în acest dosar. O listă JSON de mașini de raliu este setată. Există un pic de text și un buton. Când este apăsat butonul, jQuery este folosit pentru a POST lista de mașini pe server. Acest lucru va merge la receptor punct final, pe care îl veți crea în continuare. Asigurați-vă că ați citit ghidul nostru pentru jQuery dacă doriți să aflați mai multe despre modul în care funcționează în acest context.

Iată codul de care aveți nevoie json_io.py:

#! flask / bin / python Importul sys din importul flachetei Flask, render_template, request, redirect, Response import random, json app = Flage (__name__) @ app.route (' render_template ('index.html', nume = "Joe") @ app.route ('/ receiver', methods = ['POST']) = "pentru elementul din date: # buclă peste fiecare rezultat al rândului + = str (element ['make']) + '\ n' rezultat returnat dacă __name__ == '__main__': # run! app.run

Acest cod definește două puncte finale. Implicit (/) servește paginii html anterioare. Când apăsați butonul, a POST se face o cerere către /receptor punct final. A doua parte a definiției rutei (methods = ['POST']) definește modul în care poate fi accesată această pagină. La fel de POST este singurul mod specificat, această rută va refuza orice alte solicitări http (cum ar fi OBȚINE).

Acest /receptor capătul de bucle pur și simplu bate peste fiecare rând JSON și adaugă mașina la un șir, care apoi se întoarce după buclă. JSON-ul este stocat în date variabilă și ca request.get_json () a fost folosit, Python este conștient că acesta este un obiect JSON. articol variabilă în interiorul pentru buclă poate fi considerat ca un șir de date. Diferitele elemente ale fiecărui rând pot fi accesate prin utilizarea numelui lor în paranteze pătrate (elementul [ „face“]).

Deschideți instrumentele de dezvoltator de browser (CMD > ALT > eu pe Mac OS / Chrome) și navigați la reţea tab. Apăsați butonul și ar trebui să vedeți răspunsul serverului:

Încercați să modificați JSON-ul inițial și să vedeți ce se întâmplă. Să modificăm Python-ul ceva diferite, în funcție de JSON. Iată noul cod de care aveți nevoie pentru pentru buclă:

 pentru elementul din date: # buclă peste fiecare rând make = str (item ['make']) dacă (make == 'Porsche'): result + = make + '- + = make + '- Acesta este doar un producător mediu \ n' 

Aceasta folosește o declarație simplă dacă se schimbă ieșirea, în funcție de intrare. S-ar putea să adaptați cu ușurință acest lucru pentru a scrie într-o bază de date sau pentru a rula o altă bucată de cod. Iată cum arată acum:

Acum ar trebui să aveți o înțelegere solidă a modului de configurare a unui server Python și a modului în care puteți răspunde la solicitările JSON.

Vă place codarea în JavaScript? Încercați să scriptați o animație a robotului sensibil la voce Cum să scriptați o animație robot sensibilă la voce în p5.js Cum să scrii un animat robot sensibil la voce în p5.js Doriți să vă atrageți copiii în programare? Arătați-le acestui ghid pentru a construi un cap robot animat reactiv sonor. Citeste mai mult !

Explorați mai multe despre: JavaScript, Python, Dezvoltare Web.