cari
Rumahhujung hadapan webSoal Jawab bahagian hadapanjavascript memanggil kaedah python

Semasa proses pembangunan bahagian hadapan, selalunya perlu menggunakan bahasa bahagian belakang untuk melaksanakan beberapa logik pengkomputeran yang kompleks atau operasi pemprosesan data. Bahasa Python mempunyai keupayaan pemprosesan data yang berkuasa dan sokongan untuk pelbagai perpustakaan, jadi ia digunakan secara meluas dalam pembangunan bahagian hadapan. Artikel ini akan memperkenalkan anda kepada cara menggunakan JavaScript untuk memanggil kaedah Python.

1. Prasyarat

Sebelum anda mula menggunakan JavaScript untuk memanggil kaedah Python, anda perlu memahami perkara berikut:

  1. Pemasangan dan konfigurasi persekitaran Python.
  2. Pemasangan dan konfigurasi persekitaran Node.js.
  3. Pemasangan dan konfigurasi perpustakaan kelalang Python, yang boleh digunakan untuk membangunkan antara muka web bahagian belakang Python.

2. Bina Python backend API

Untuk mendedahkan kaedah Python kepada bahagian hadapan, kita perlu membangunkan Python backend API. Gunakan perpustakaan kelalang untuk membina API bahagian belakang Python dengan cepat. Langkah-langkah khusus adalah seperti berikut:

  1. Pasang perpustakaan kelalang

Masukkan arahan berikut dalam baris arahan:

pip install flask
  1. Tulis kembali -end logic

Buat fail Python bernama app.py dalam direktori akar projek dan tulis kod berikut:

from flask import Flask, jsonify

app = Flask(__name__)

@app.route("/tasks/<int:task_id>", methods=['GET'])
def get_task(task_id):
    task = {
        'id': task_id,
        'title': 'Task ' + str(task_id),
        'description': 'Task ' + str(task_id) + ' description'
    }
    return jsonify({'task': task})

if __name__ == '__main__':
    app.run(debug=True)

Kod mentakrifkan antara muka API bernama get_task, dan akses laluan antara muka ialah "/tasks/", dan kaedah permintaan antara muka ditakrifkan sebagai GET. Dalam logik khusus antara muka, kami mengembalikan objek json yang mengandungi maklumat tugas.

Jalankan arahan berikut dalam terminal untuk memulakan perkhidmatan API:

python app.py
  1. Uji API

Lawati http:// melalui pelayar atau Alat posmen, dsb. localhost:5000/tasks/1, anda boleh melihat objek json yang dikembalikan.

{
    "task": {
        "description": "Task 1 description",
        "id": 1,
        "title": "Task 1"
    }
}

3. JavaScript memanggil kaedah Python

Selepas menyediakan perkhidmatan API back-end Python, kami boleh memanggil kaedah Python melalui JavaScript.

  1. Pasang perpustakaan Python-shell

Pustaka Python-shell membolehkan JavaScript berinteraksi dengan skrip Python. Masukkan arahan berikut dalam baris arahan:

npm install python-shell
  1. Tulis skrip JavaScript

Buat fail JavaScript bernama test.js dalam direktori akar projek dan tulis kod berikut:

var PythonShell = require('python-shell');

PythonShell.run('test.py', function (err, results) {
  if (err) throw err;
  console.log('Python脚本的输出为: %j', results);
});

Dalam kod, kami menggunakan pustaka Python-shell untuk menjalankan skrip Python Fail test.py harus berada dalam direktori yang sama dengan fail test.js. Dalam output skrip Python, kita boleh melihat hasil yang dikembalikan daripada skrip Python.

  1. Penulisan skrip Python

Buat fail Python bernama test.py dalam direktori akar projek dan tulis kod berikut:

print("Hello, Python!")
  1. Jalankan skrip JavaScript

Jalankan arahan berikut dalam terminal untuk memulakan skrip JavaScript:

node test.js

Kita dapat melihat bahawa konsol mengeluarkan output skrip Python: Hello, Ular sawa!.

4. JavaScript memanggil Python back-end API

Melalui langkah di atas, kami telah berjaya melaksanakan operasi JavaScript memanggil kaedah Python. Tetapi kaedah ini hanya melaksanakan skrip Python Bagaimana untuk membiarkan JavaScript berinteraksi dengan API belakang Python?

Dalam JavaScript, anda boleh menggunakan Ajax untuk menghantar permintaan kepada API bahagian belakang Python untuk mendapatkan data yang dikembalikan oleh bahagian belakang Python. Berikut ialah contoh penggunaan jQuery untuk menghantar permintaan Ajax:

$(function() {
  // 获取任务信息
  $.ajax({
    url: 'http://localhost:5000/tasks/1',
    cache: false,
    success: function(data) {
        console.log(data);
    }
  });
});

Dalam kod di atas, kami memperoleh maklumat tugas yang dikembalikan oleh API backend Python dengan mengakses http://localhost:5000/tasks/1 . Kita dapat melihat bahawa konsol mengeluarkan maklumat tugas yang sepadan.

Di atas ialah cara JavaScript memanggil kaedah Python. Dengan menggabungkan kuasa Python dan fleksibiliti JavaScript, kami boleh mencapai lebih banyak fungsi dan keupayaan dalam pembangunan bahagian hadapan.

Atas ialah kandungan terperinci javascript memanggil kaedah python. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Cara Menggunakan UseState () Hook dalam Komponen React FungsionalCara Menggunakan UseState () Hook dalam Komponen React FungsionalApr 30, 2025 am 12:25 AM

UseState membolehkan keadaan ditambah dalam komponen fungsi kerana ia menghilangkan halangan antara komponen kelas dan komponen fungsi, menjadikannya sama kuat. Langkah -langkah untuk menggunakan UseState termasuk: 1) mengimport cangkuk UseState, 2) memulakan keadaan, 3) menggunakan keadaan dan mengemas kini fungsi tersebut.

Sifat Berfokus React: Menguruskan keadaan aplikasi kompleksSifat Berfokus React: Menguruskan keadaan aplikasi kompleksApr 30, 2025 am 12:25 AM

Fokus pandangan React menguruskan keadaan aplikasi yang kompleks dengan memperkenalkan alat dan corak tambahan. 1) React sendiri tidak mengendalikan pengurusan negeri, dan memberi tumpuan kepada pemetaan negara kepada pandangan. 2) Aplikasi kompleks perlu menggunakan Redux, Mobx, atau ContextAPI untuk merumuskan keadaan, menjadikan pengurusan lebih berstruktur dan boleh diramal.

Mengintegrasikan Reaksi dengan Perpustakaan dan Rangka Kerja LainMengintegrasikan Reaksi dengan Perpustakaan dan Rangka Kerja LainApr 30, 2025 am 12:24 AM

IntegratingReactwithotherlibrariesandframeworkscanenhanceapplicationcapabilitiesbyleveragingdifferenttools'strengths.BenefitsincludestreamlinedstatemanagementwithReduxandrobustbackendintegrationwithDjango,butchallengesinvolveincreasedcomplexity,perfo

Pertimbangan Kebolehcapaian dengan React: Membina UIS termasuk UIPertimbangan Kebolehcapaian dengan React: Membina UIS termasuk UIApr 30, 2025 am 12:21 AM

Tomakereactapplicationsmoreactable, ikutiTheSesteps: 1) usesemantichtmlelementsinjsxforbettervigationandseo.2) pelaksanaanfocusmanagementforkoBeybeyboards, terutamaInmodals

Cabaran SEO dengan React: Mengatasi masalah penyampaian sisi pelangganCabaran SEO dengan React: Mengatasi masalah penyampaian sisi pelangganApr 30, 2025 am 12:19 AM

SEO untuk aplikasi React boleh diselesaikan dengan kaedah berikut: 1. Melaksanakan rendering sisi pelayan (SSR), seperti menggunakan Next.js; 2. Gunakan rendering dinamik, seperti halaman pra-rendering melalui prerender.io atau dalang; 3. Mengoptimumkan prestasi aplikasi dan gunakan rumah api untuk audit prestasi.

Faedah komuniti dan ekosistem yang kuatFaedah komuniti dan ekosistem yang kuatApr 29, 2025 am 12:46 AM

Bertindak balas

React Native for Mobile Development: Membina aplikasi silang platformReact Native for Mobile Development: Membina aplikasi silang platformApr 29, 2025 am 12:43 AM

ReactnativeischosenformobiledevelopmentbecauseitallowsdeveloperstowritecodeonceanddeployitonmultiplePlatforms, reducingdevelopmentTimeandcosts.itoffersnear-nativeperformance, andleverageSexistingWebdevelskills

Mengemas kini keadaan dengan betul dengan useState () dalam ReactMengemas kini keadaan dengan betul dengan useState () dalam ReactApr 29, 2025 am 12:42 AM

Kemas kini yang betul dari UseState () Negeri dalam React memerlukan pemahaman butir -butir pengurusan negeri. 1) Gunakan kemas kini berfungsi untuk mengendalikan kemas kini tak segerak. 2) Buat objek atau array negeri baru untuk mengelakkan secara langsung mengubah keadaan. 3) Gunakan objek negara tunggal untuk menguruskan borang kompleks. 4) Gunakan teknologi anti-goncang untuk mengoptimumkan prestasi. Kaedah ini boleh membantu pemaju mengelakkan masalah biasa dan menulis aplikasi reaksi yang lebih mantap.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.