Você está se perguntando uma vez que você pode enviar dados de JavaScript para Python? Muito, isso é fácil com uma interface de programação de aplicativos (API).
As linguagens de programação se comunicam e trocam dados usando APIs. Normalmente, em tal notícia, uma tecnologia de back-end (provedor de API) responde com dados posteriormente receber uma solicitação de um script de front-end. No entanto, existem muitos tipos de solicitação; neste item, você aprenderá a usar a solicitação POST para enviar dados no formato JSON do JavaScript para o servidor usando uma API Python.
Instalações de Python e Flask Server
Se você estiver no Windows e ainda não tiver o Python instalado, baixe-o do site python.org. Os usuários de Mac não precisam decrescer o Python, pois o sistema operacional vem com ele por padrão. Você poderá escoltar razoavelmente muito usando o Linux também.
Feição e instalação do servidor
Você precisará de um servidor para fabricar uma API REST Python. Existem muitos frameworks web Python para isso. Flask, Django, FastAPI, Tornado e muitos outros são úteis para redigir APIs REST em Python.
No entanto, você usará o Flask para nascente tutorial, pois é fácil de entender e conciliável com a API.
Primeiro, crie um envolvente virtual Python. Abra seu terminal na pasta raiz do seu projeto. Em seguida, instale Frasco e frascos-cortes usando pip:
pip install Flask, flask-cors
O frascos-cortes O pacote é o módulo CORS integrado do Flask para ignorar a política de recursos de origem cruzada durante a solicitação do endpoint da API. Você verá uma vez que configurar isso com o Flask à medida que avança.
Isso é tudo para a secção de instalação.
Estrutura Esquelética do Frasco
Em seguida, crie um novo registro na pasta raiz do projeto. Certifique-se de que possui .py extensão de registro. Por exemplo, pode ser app.py.
Abra esse registro em seu editor de código predilecto e configure seu aplicativo Flask da seguinte forma:
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()
O código supra importa os módulos necessários e configura seu aplicativo. O código extra no final da rabo (app.run()) define o aplicativo para ser executado em uma porta padrão, geralmente a porta 5000.
Gerar um endpoint de API POST
Neste tutorial, você enviará dados JSON contendo diferentes marcas de carros e seus modelos do JavaScript para o servidor usando um endpoint Flask. Em seu JavaScript, você atribuirá os dados a uma variável chamada carros. Você pode dar o nome que quiser, no entanto.
Mas primeiro, abra o app.py registro, configure um endpoint de API POST e chame-o receptor. Tenha em mente que você pode usar qualquer convenção de nomenclatura que desejar.
Veja uma vez que seu registro Python está agora:
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)
Postar dados de JavaScript para Python Flask API
Porquê o endpoint da API POST está pronto, crie um registro JavaScript e HTML na pasta raiz do projeto (onde está o aplicativo do frasco). Dê a eles o nome que quiser (data.js e índice.html nesse caso).
Mas primeiro, veja uma vez que índice.html visual:
<!DOCTYPE html>
<html>
<head>
<title>
Python sending
</title>
</head>
<body>
<button id="theButton">Post to Python</button>
<h3 id = "info"></h3>
<!-- Link to the JavaScript file here: -->
<script src="data.js"></script>
</body>
</html>Notavelmente, o registro HTML supra descreve um botão que escuta um evento de clique para exibir os dados postados, seja no console ou no DOM.
O h3 serve uma vez que um contêiner para os dados de ingresso se você sentenciar exibi-los posteriormente no DOM. Observe que isso não é uma convenção – você pode exibir os dados recebidos em qualquer contêiner HTML que desejar.
Depois de configurar o registro HTML, use a API Fetch integrada do JavaScript para postar os dados (carros) ao servidor.
Cá está o 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));
}
O script supra contém uma matriz JSON de carros de rally. O botão.clique função é um ouvinte de evento de clique anexado ao botão no registro HTML que você criou anteriormente.
Assim, quando um usuário clica no botão, buscar usa o PUBLICAR solicitação para enviar a matriz de carros para o servidor. O receptor endpoint no Flask recebe essa solicitação e envia dados de resposta para JavaScript (front end), que é exibido no console do navegador.
Agora, inicie o registro HTML no seu navegador e abra o console do desenvolvedor (no Windows: Ctrl + Mudança + euno Mac: CMD + ALT + eu). Vá para a Consola seção, e você verá a resposta JSON retornada.
Para rastrear a resposta JSON em tempo real, clique em Rede no console do desenvolvedor (no Chrome). Aquém da risca do tempo da rede, selecione receptor ou o nome do seu endpoint Flask. Logo clique Resposta na secção superior desse submenu.
A resposta deve ser um tanto assim:
Aliás, você pode clicar Cabeçalhos para visualizar o status de resposta da solicitação. Deve ser 200, o que significa que sua API retornou uma resposta válida.
Em seguida, agora você pode gravar os dados no DOM com lógica suplementar em seu JavaScript:
// 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 +="<p>"+ Main.make+" "+" is a good product":
data.innerHTML +="<p>"+ Main.make+" "+"is an average product" )
}
).catch((err) => console.error(err)); }
Usando o planta função, o script supra faz um loop pelos dados de resposta. O Main.make O atributo obtém o nome de cada coche dos dados de resposta retornados do servidor. A lógica ternária dentro do planta A função portanto instrui o JavaScript sobre o que exibir com cada marca.
Portanto, quando você clica no botão de postagem, cá está o que você obtém:
Ai está! Agora você sabe uma vez que configurar um endpoint Flask e postar dados no servidor de forma assíncrona usando JavaScript.
Continue explorando APIs REST no desenvolvimento da Web
As APIs oferecem a melhor maneira de separar seu back-end do front. Uma de suas vantagens é que permite desacoplar facilmente o lado do cliente do lado do servidor. Você viu uma vez que conectar JavaScript ao Python e enviar dados para o servidor, mas isso é exclusivamente um rascunho da superfície.
Você pode ir mais fundo conectando a API REST do Flask a um banco de dados uma vez que o MongoDB, portanto isso permite que você tenha um repositório para armazenar os dados postados. Você pode até transformar isso em um projeto completo enviando os dados para o banco de dados usando um campo de formulário.
Leia a seguir
Sobre o responsável