JavaScript’ten Python’a iyi mi veri gönderebileceğinizi merak ediyor musunuz? Bir uygulama programlama arayüzü (API) ile bu kolaydır.
Programlama dilleri API’leri kullanarak yazışma kurar ve veri alışverişi sağlar. Çoğu zaman, bu tür bir iletişimde, bir arka uç teknolojisi (API sağlayıcısı) bir ön uç komut dosyasından talep aldıktan sonrasında verilerle cevap verir. Gene de birçok talep türü vardır; bu makalede, Bir Python API kullanarak JavaScript’ten sunucuya JSON biçimli veri göndermek için POST isteğini iyi mi kullanacağınızı öğreneceksiniz.
Python ve Flask Sunucu Yüklemeleri
Windows kullanıyorsanız ve Python yüklü değilse, python.org internet adresinden indirin. Mac kullanıcılarının Python’ı indirmelerine gerek kalmamıştır, bundan dolayı işletim sistemi varsayılan olarak onunla beraber gelir. Linux’u da kullanarak oldukça iyi takip edebileceksiniz.
Sunucu Kurulumu ve Yüklemesi
Python REST API’si oluşturmak için bir sunucuya ihtiyacınız olacaktır. Bunun için birçok Python web çerçevesi vardır. Flask, Django, FastAPI, Tornado ve ötekiler Python’da REST API’leri yazmak için kullanışlıdır.
Bununla beraber, anlaşılması kolay ve API dostu olduğundan bu öğretici için Flask’ı kullanacaksınız.
İlk olarak, bir Python sanal ortamı oluşturun. Terminalinizi proje kök klasörünüze açın. Peşinden, Şişe ve şişe-kors pip kullanarak:
pip install Flask, flask-cors
Bu, bir sonraki şişe-kors paket, Flask’ın API uç noktasından talepte bulunurken çapraz kaynak kaynak ilkesini atlamak için yerleşik CORS modülüdür. Hayatına devam ederken Flask’la bunu iyi mi ayarlayacağınızı görmüş olacaksınız.
Hepsi kurulum kısmı için.
Şişe İskelet Yapısı
Peşinden, proje kök klasörünüzde yeni bir dosya oluşturun. .py dosya uzantısını açın. Mesela, app.py.
Bu dosyayı en sevdiğiniz kod düzenleyicisine açın ve Flask uygulamanızı aşağıdaki şeklinde ayarlayın:
from flask import Flask, request, jsonify
from flask_cors import CORS
#Set up Flask:
app = Flask(__name__)
#Set up Flask to bypass CORS at the front end:
cors = CORS(app)
#Run the app:
if __name__ == "__main__":
app.run()Yukarıdaki kod lüzumlu modülleri içe aktarır ve uygulamanızı yapılandırır. Kuyruk ucundaki extra kod (app.run()) uygulamayı varsayılan bir bağlantı noktasında, çoğu zaman 5000 numaralı bağlantı noktasında çalışacak şekilde ayarlar.
POST API Uç Noktası Oluşturma
Bu öğreticide, değişik otomobil markalarını ve modellerini içeren JSON verilerini Bir Flask uç noktası kullanarak JavaScript’ten sunucuya göndereceksiniz. JavaScript’inizde, verileri Otomobil. Gene de istediğin adı verebilirsin.
Fakat ilkin, app.py dosyalayın, POST API uç noktası ayarlayın ve çağır ahize. İstediğiniz adlandırma kuralını kullanabileceğinizi ihmal etmeyin.
Python dosyanız şu şekilde görünür:
from flask import Flask, request, jsonify
from flask_cors import CORS
#Set up Flask:
app = Flask(__name__)
#Set up Flask to bypass CORS:
cors = CORS(app)
#Create the receiver API POST endpoint:
@app.route("/receiver", methods=("POST"))
def postME():
data = request.get_json()
data = jsonify(data)
return data
if __name__ == "__main__":
app.run(debug=True)
JavaScript’ten Python Flask API’sine Veri Gönderme
POST API uç noktası hazır olduğundan, proje kök klasörünüzde (şişe uygulamanızın bulunmuş olduğu) bir JavaScript ve HTML dosyası oluşturun. Onlara istediğiniz adı verin (verileri.js ve dizin.html bu durumda).
Fakat ilkin şöyleki. dizin.html Görünü -yor:
<br />Python gönderme<br />
Bilhassa, yukarıdaki HTML dosyası, konsolda yada DOM’da gösterilen verileri görüntülemek için bir tıklama vakasını dinleyen bir düğmeyi açıklar.
Bu, bir sonraki h3 etiketi, sonrasında DOM’da görüntülemeye karar verirseniz, gelen veriler için bir kapsayıcı görevi görür.
HTML dosyasını ayarladıktan sonrasında, verileri göndermek için JavaScript’ler yerleşik Fetch API’sini kullanın (otomobiller) sunucuya ilet.
İşte JavaScript:
// Get the button and container elements from HTML:
const button = document.getElementById("theButton")
const data = document.getElementById("info")
// Create an array of cars to send to the server:
const cars = (
{ "make":"Porsche", "model":"911S" },
{ "make":"Mercedes-Benz", "model":"220SE" },
{ "make":"Jaguar","model": "Mark VII" }
);
// Create an event listener on the button element:
button.onclick= function(){
// Get the reciever endpoint from Python using fetch:
fetch("http://127.0.0.1:5000/receiver",
{
method: 'POST',
headers: {
'Content-type': 'application/json',
'Accept': 'application/json'
},
// Strigify the payload into JSON:
body:JSON.stringify(cars)}).then(res=>{
if(res.ok){
return res.json()
}else{
alert("something is wrong")
}
}).then(jsonResponse=>{// Log the response data in the console
console.log(jsonResponse)
}
).catch((err) => console.error(err));
}
Yukarıdaki komut dosyası bir JSON ralli otomobili dizisi ihtiva eder. Bu, bir sonraki düğmesine basın.tıklatın işlevi, daha ilkin oluşturduğunuz HTML dosyasındaki düğmeye iliştirilmiş bir tıklatma vakası dinleyicisi.
Bundan dolayı, bir kullanıcı düğmeyi tıklatdığında, Getir kullanır. YAYINLA sunucuya otomobil dizisini gönderme isteğinde bulunun. Bu, bir sonraki ahize Flask’taki uç nokta bu isteği alır ve cevap verilerini tarayıcı konsolunda görüntülenen JavaScript’e (ön uç) gönderir.
Şimdi, HTML dosyasını tarayıcınızda başlatın ve geliştirici konsolunu açın (Windows’ta: Ctrl + Vardiya + Ben, Mac’te: CMD + ALT + Ben). Konsola Gitme bölüm, ve geri dönen JSON yanıtını görmüş olacaksınız.
JSON yanıtını gerçek zamanlı olarak seyretmek için Ağ geliştirici konsolunda (Chrome’da). Ağ süre çizelgesinin altında, ahize yada Flask uç noktanızın adını. Peşinden Cevap Alt menüsünün en üstünde.
Cevap şöyleki görünmelidir:
Ekran görüntüsü: ilişkilendirme gerekmez
Ek olarak, Üstbilgi isteğin cevap durumunu görüntülemek için. Bu 200 olmalıdır, bu da API’nizin geçerli bir cevap döndürdür olduğu anlamına gelir.
Peşinden, artık verileri JavaScript’inizde ek mantıkla DOM’a yazabilirsiniz:
// Get the button and container from HTML:
const button = document.getElementById("theButton")
const data = document.getElementById("info")
// Create an event listener on the button element:
button.onclick= function(){// Get the receiver endpoint from Python using fetch:
fetch("http://127.0.0.1:5000/receiver",
{
method: 'POST',
headers: {
'Content-type': 'application/json',
'Accept': 'application/json'
},
// Strigify the payload into JSON:
body:JSON.stringify(cars)}).then(res=>{
if(res.ok){
return res.json()
}else{
alert("something is wrong")
}
}).then(jsonResponse=>{
// Iterate through the data with Map and write your rendering logic:
jsonResponse.map(Main=>
Main.make==="Porsche"? data.innerHTML +="
"+ Main.make+" "+" is a good product":
data.innerHTML +="
"+ Main.make+" "+"is an average product" )
}
).catch((err) => console.error(err)); }
harita işlevi, yukarıdaki komut dosyası cevap verileri içinde döngüye girer. Bu, bir sonraki Ana.make özniteliği, sunucudan döndürülen cevap verilerinden her arabanın adını alır. İçindeki üçlü mantık harita işlevi sonrasında JavaScript’e her yapıda ne görüntüleneceğini öğretin.
Bundan dolayı, gönder düğmesine tıkladığınızda, şunları elde edersiniz:
Ekran görüntüsü: ilişkilendirme gerekmez
İşte bu şekilde! Artık Bir Flask uç noktasının iyi mi kurulacak ve JavaScript kullanarak süre uyumsuz olarak sunucuya veri göndermenin iyi mi bir yolu bulunduğunu biliyorsunuz ki.
Web Geliştirme’de REST API’lerini Keşfetmeye Devam Edin
API’ler arka ucunuzu önden ayırmanın en iyi yolunu sunar. Avantajlarından biri, istemci tarafını sunucu tarafınca kolayca ayırmanıza izin verir. JavaScript’i Python’a iyi mi bağlayacağınızı ve sunucuya iyi mi veri göndereceğinizi gördünüz, sadece bu yüzeyin bir tek bir çizik.
Flask REST API’sini MongoDB şeklinde bir veritabanına bağlayarak daha derine inebilirsiniz, böylece bu, gösterilen verileri depolamak için bir deponuz olmasını sağlar. Verileri bir biçim alanı kullanarak veritabanına göndererek bunu tam bir projeye bile dönüştürebilirsiniz.