Vix Blog
No Result
View All Result
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA
NEWSLETTER
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA
No Result
View All Result
Vix Blog
No Result
View All Result

Porquê obter Python e JavaScript para se remeter usando JSON

Carolina by Carolina
25 de março de 2022
Reading Time: 9 mins read
0
Porquê obter Python e JavaScript para se remeter usando JSON

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.

MAKEUSEO VÍDEO DO DIA

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.

Relacionado:Porquê testar uma API usando Python e JavaScript

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.

Relacionado:Porquê usar o Chrome DevTools para solucionar problemas do site

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:


Resposta da API no console de rede do navegador
Tomada de tela: nenhuma atribuição necessária

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:


Dados de ressonância da API renderizados no DOM
Tomada de tela: nenhuma atribuição necessária

Ai está! Agora você sabe uma vez que configurar um endpoint Flask e postar dados no servidor de forma assíncrona usando JavaScript.

RELATED POSTS

Quais são os conceitos Futuristic Sphere EV da Audi?

Tudo o que você precisa saber

Porquê reproduzir o texto da página da Web quando o botão recta do mouse está desativado

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.


Duas mulheres sentadas de frente uma para a outra com o logotipo do Python aparecendo na tela frontal do computador
Porquê aprender Python de perdão

Pronto para aprender Python, uma das linguagens de programação mais procuradas ultimamente? Veja uma vez que você pode iniciar.

Leia a seguir


Sobre o responsável

Idowu Omisola
(129 Artigos Publicados)

Idowu é enamorado por qualquer tecnologia inteligente e produtividade. Em seu tempo livre, ele brinca com a codificação e muda para o tabuleiro de xadrez quando está entediado, mas também adora fugir da rotina de vez em quando. Sua paixão por mostrar às pessoas o caminho da tecnologia moderna o motiva a redigir mais.

Mais de Idowu Omisola

Assine a nossa newsletter

Junte-se à nossa newsletter para dicas de tecnologia, análises, e-books gratuitos e ofertas exclusivas!

Clique cá para assinar

Carolina

Carolina

Related Posts

Quais são os conceitos Futuristic Sphere EV da Audi?
Entretenimento

Quais são os conceitos Futuristic Sphere EV da Audi?

24 de março de 2023
Tudo o que você precisa saber
Entretenimento

Tudo o que você precisa saber

24 de março de 2023
Porquê reproduzir o texto da página da Web quando o botão recta do mouse está desativado
Entretenimento

Porquê reproduzir o texto da página da Web quando o botão recta do mouse está desativado

24 de março de 2023
5 hábitos durante a semana que ajudarão você a superar os medos de domingo
Entretenimento

5 hábitos durante a semana que ajudarão você a superar os medos de domingo

24 de março de 2023
Porquê a material pode melhorar a saúde na vivenda inteligente
Entretenimento

Porquê a material pode melhorar a saúde na vivenda inteligente

24 de março de 2023
Uma vez que modificar um ícone de pasta no Linux
Entretenimento

Uma vez que modificar um ícone de pasta no Linux

24 de março de 2023
Next Post

How to Turn Off 2-Step Verification on Your Google Account on Android

How Can a Smartphone Always Make Emergency Calls?

Deixe um comentário Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

No Result
View All Result

Últimas Notícias

Porquê emendar o ramal do controle do Xbox One

Porquê emendar o ramal do controle do Xbox One

24 de março de 2023
Quais são os conceitos Futuristic Sphere EV da Audi?

Quais são os conceitos Futuristic Sphere EV da Audi?

24 de março de 2023
Os 9 melhores sites e comunidades online para mulheres em tecnologia

Os 9 melhores sites e comunidades online para mulheres em tecnologia

24 de março de 2023
Tudo o que você precisa saber

Tudo o que você precisa saber

24 de março de 2023
8 habilidades para tornar o Amazon Alexa o assistente de negócios virtual perfeito

8 habilidades para tornar o Amazon Alexa o assistente de negócios virtual perfeito

24 de março de 2023

Categorias

  • Entretenimento
  • Mundo
  • Notícias
  • Segurança
Vix Blog

Somos entusiastas da tecnologia com a missão de ensinar ao mundo como usar e compreender a tecnologia em suas vidas.
SAIBA MAIS »

Entre em contato conosco enviando um e-mail para contato@vixblog.com

Posts recentes

  • Porquê emendar o ramal do controle do Xbox One
  • Quais são os conceitos Futuristic Sphere EV da Audi?
  • Os 9 melhores sites e comunidades online para mulheres em tecnologia

Categorias

  • Entretenimento
  • Mundo
  • Notícias
  • Segurança

Links Importantes

  • Quem Somos
  • Blog
  • Fale Conosco
  • Política de Privacidade
  • DMCA

© 2021 VixBlog - Notícias e dicas para o seu dia dia.

No Result
View All Result
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA

© 2021 VixBlog - Notícias e dicas para o seu dia dia.