Memaparkan Data Pengguna dengan Ambil JavaScript: Profil dan Catatan
Satu kes penggunaan popular untuk keupayaan interaksi API JavaScript yang kuat ialah pengambilan masa nyata dan paparan data daripada bahagian belakang. Dalam keadaan ini, anda ingin mengekstrak maklumat daripada dua jadual yang dipautkan: satu berkaitan dengan siaran pengguna dan satu lagi profil mereka. Ini ialah pendekatan yang bagus untuk mempelajari cara memaparkan beberapa set data secara dinamik pada halaman web anda dan mengendalikannya dalam satu panggilan API.
The Ambil API mesti digunakan untuk mendapatkan semula data dari bahagian belakang sebelum anda boleh meneruskan. JavaScript akan menghuraikan respons JSON yang dikembalikan oleh API Python yang mengandungi profil dan siaran. Anda boleh memaparkan profil dan menyiarkan maklumat dengan betul jika anda tahu cara bekerja dengan DOM menggunakan JavaScript.
Walaupun ia kelihatan sukar, mendapatkan semula data daripada beberapa jadual sebenarnya boleh dilakukan jika anda tahu cara respons distrukturkan. Anda mesti memproses data JSON dan bina elemen HTML untuk menunjukkannya selepas menyerahkan permintaan pengambilan. Membuat senarai atau bahagian untuk profil pengguna dan siaran yang disertakan bersamanya adalah sebahagian daripada ini.
Saya akan membawa anda melalui contoh dunia sebenar dalam tutorial ini yang menggunakan JavaScript untuk memuatkan data siaran dan profil pengguna daripada API Python. Anda akan memahami cara untuk memaparkan data yang diambil pada penghujungnya dan memastikan ia dipaparkan dengan sewajarnya pada halaman HTML anda.
| Perintah | Contoh Penggunaan |
|---|---|
| fetch() | Untuk memulakan permintaan rangkaian untuk mendapatkan semula sumber, gunakan arahan ini. Di sini, ia digunakan untuk mendapatkan siaran dan profil pengguna melalui titik akhir API bahagian belakang Python. |
| .then() | Prosedur untuk menguruskan janji yang fetch() kembali. Setelah jawapan telah diambil dengan betul, proses pengendalian data dijalankan dengan menukarnya kepada JSON menggunakan fungsi.then(). |
| response.json() | Badan JSON respons dihuraikan menggunakan teknik ini. Ia adalah perlu untuk bekerja dengan API yang menyediakan data berformat JSON, seperti siaran dan profil pengguna. |
| createElement() | Teknik DOM JavaScript ini membina elemen HTML secara dinamik. Membina dan memaparkan komponen seperti profil pengguna dan bahan penyiaran yang dibuat daripada data yang diperoleh adalah dua kegunaan utama untuknya. |
| append() | Elemen yang dicipta dimasukkan sebagai anak akhir nod induk yang dipilih menggunakan kaedah append(). Teknik ini digunakan untuk memasukkan item ke dalam rangka kerja HTML, seperti butang ikuti, maklumat pengguna dan siaran. |
| JsonResponse() | Perintah Django ini menghasilkan respons HTTP dengan data yang dikodkan dalam JSON. Ia adalah penting untuk menghantar data siaran dan profil dari bahagian belakang Python ke bahagian hadapan JavaScript untuk diproses. |
| values() | Kaedah values() Django mencipta objek untuk hasil pertanyaan yang menyerupai kamus. Ia digunakan dalam kes ini untuk mendapatkan siaran yang dikaitkan dengan pengarang tertentu. |
| Profile.DoesNotExist | Profil yang diminta tidak boleh terdapat dalam pangkalan data, yang mengakibatkan peningkatan pengecualian khusus Django ini. Ia memastikan bahawa sekiranya profil tidak ditemui, API akan memberikan ralat 404 bersama-sama dengan mesej yang berguna. |
| TestCase | Ujian unit dalam Django ditulis menggunakan kelas TestCase. Ia adalah penting untuk mengesahkan ketepatan API dan memastikan bahawa catatan dan data profil dikembalikan mengikut cara yang dikehendaki di bawah pelbagai syarat. |
Memahami Penyepaduan JavaScript dan Python untuk Kandungan Dinamik
Skrip yang disertakan menunjukkan cara menggabungkan bahagian hadapan JavaScript dan bahagian belakang Python dengan cara yang mudah digunakan tetapi cekap. Halaman web boleh memuatkan data siaran dan profil pengguna secara dinamik berkat penyepaduan ini. The ambil API ialah bahagian utama kod JavaScript; ia menghantar permintaan ke bahagian belakang dan mengembalikan respons JSON. The kemudian() teknik bersempena dengan janji membolehkan skrip menjamin pemuatan tidak segerak data. Kaedah ini meningkatkan pengalaman pengguna dengan mengekalkan penyemak imbas daripada membeku sementara ia menunggu jawapan API.
Menggunakan ID pengguna, kod JavaScript membuat permintaan mendapatkan semula kepada API Python, yang mengembalikan data profil dan siaran. Skrip terlebih dahulu menukar jawapan kepada JSON sebelum mengubah suai DOM untuk memaparkan profil dan siaran. Ia melakukan ini dengan menghasilkan elemen HTML seperti perenggan dan item senarai. Sebagai contoh, baru dibina div elemen untuk nama pengguna, pengikut dan pengikut digunakan untuk memaparkan data profil. Setiap maklumat ditambah pada bahagian profil halaman selepas diletakkan ke dalam struktur HTML yang betul.
Bahagian belakang yang dibina Django adalah penting untuk mendapatkan data siaran dan profil daripada pangkalan data. The JsonResponse fungsi dalam Python mengubah data menjadi JSON, yang merupakan format yang disyorkan untuk API dalam talian kerana kemudahan penghuraian dan sifatnya yang ringan. The nilai() kaedah dalam Django menjamin pengambilan semula jawatan yang cekap dalam format kamus. Dengan cara ini, ia akan menjadi mudah untuk bahagian hadapan untuk menyemak siaran dan memaparkannya secara dinamik di tapak web. The Profile.DoesNotWujud pengecualian digunakan oleh skrip untuk mengendalikan isu yang berpotensi dan memastikan maklum balas yang betul diberikan dalam kes di mana data tidak tersedia.
Secara keseluruhan, tapak web adalah dinamik dan boleh berubah tanpa memerlukan muat semula halaman penuh terima kasih kepada gabungan Python dan JavaScript. Strategi ini berfungsi dengan baik terutamanya pada blog dan tapak rangkaian sosial di mana maklumat yang dijana pengguna, termasuk siaran dan profil, sentiasa dikemas kini. Penyelesaiannya menjadi modular dan mudah diselenggara dengan mematuhi amalan terbaik dan menyusun kod ke dalam fungsi yang berbeza. Selain itu, kemasukan ujian unit menjamin bahawa profil dan data siaran dikembalikan dengan tepat dan API berfungsi seperti yang dimaksudkan. Ini membolehkan apl masa nyata mengoptimumkan prestasi dan mengendalikan ralat dengan lebih berkesan.
Python dan JavaScript untuk Pengambilan Data Dinamik untuk Profil dan Catatan Pengguna
Idea utama di sebalik pendekatan ini adalah untuk memuatkan profil dan siaran pengguna secara dinamik dengan menyepadukan antara muka JavaScript dengan bahagian belakang API Python. Kaedah ini menggunakan rangka kerja Django untuk Python pada bahagian belakang dan JavaScript standard.
// JavaScript Code to Fetch and Display Profile and Postsfunction load_profile(author_id) {// Fetch profile and posts from the backendfetch(`/profile/${author_id}`).then(response => response.json()).then(response => {// Create a profile sectionconst content_profile = document.createElement('div');content_profile.className = "content_profile";const user = document.createElement('h3');user.innerHTML = response.prof.user;const followers = document.createElement('p');followers.innerHTML = `Followers: ${response.prof.followers}`;const following = document.createElement('p');following.innerHTML = `Following: ${response.prof.following}`;const followButton = document.createElement('button');followButton.className = "btn btn-primary";followButton.innerHTML = "Follow";content_profile.append(user, followers, following, followButton);document.querySelector('#profile').append(content_profile);// Display postsresponse.posts.forEach(post => {const postList = document.createElement('ul');const authorInfo = document.createElement('li');authorInfo.innerHTML = `${post.author} at ${post.timestamp} says:`;const content = document.createElement('li');content.innerHTML = post.content;const likes = document.createElement('li');likes.innerHTML = `${post.like} Likes`;postList.append(authorInfo, content, likes);document.querySelector('#postbox').append(postList);});}).catch(error => console.error('Error loading profile:', error));}
Python Django API View untuk Profil Penyajian dan Data Penyiaran
Jadual Profil dan Siaran ialah dua jadual berkaitan yang paparan Python Django ini mengambil data daripada dan dikembalikan sebagai JSON untuk digunakan oleh UI.
from django.http import JsonResponsefrom .models import Profile, Postdef profile_view(request, author_id):try:# Fetch profile and posts dataprofile = Profile.objects.get(user_id=author_id)posts = Post.objects.filter(author_id=author_id).values()# Prepare the JSON responsereturn JsonResponse({'prof': {'user': profile.user.username,'followers': profile.followers.count(),'following': profile.following.count()},'posts': list(posts)})except Profile.DoesNotExist:return JsonResponse({'error': 'Profile not found'}, status=404)
Ujian Unit untuk Python Django View
Untuk memastikan data disampaikan dengan sewajarnya, ujian unit ini mengesahkan bahawa API Django memperoleh profil dan siaran pengguna dengan betul.
from django.test import TestCasefrom .models import Profile, Postclass ProfileViewTest(TestCase):def setUp(self):# Create test datauser = User.objects.create(username='testuser')profile = Profile.objects.create(user=user)Post.objects.create(author=user, content='Test post')def test_profile_view(self):# Make request to the APIresponse = self.client.get('/profile/testuser')self.assertEqual(response.status_code, 200)data = response.json()# Check if profile data is correctself.assertEqual(data['prof']['user'], 'testuser')self.assertEqual(len(data['posts']), 1)}
Mengendalikan Data JSON dengan Cekap untuk Aplikasi Web Dinamik
Mengendalikan respons JSON dengan berkesan adalah penting apabila bekerja dengan API yang mengembalikan data daripada pelbagai sumber, termasuk profil pengguna dan siaran. Dalam contoh sebelumnya, kami menggunakan JavaScript untuk mengemas kini halaman web secara dinamik selepas mengambil data daripada bahagian belakang Python. Tetapi memanfaatkan sepenuhnya cara anda mengendalikan dan mempersembahkan data JSON juga penting apabila bekerja dengannya. Kita boleh mengimbas tatasusunan artikel menggunakan gelung berkesan seperti untukSetiap, dan membina elemen HTML tanpa menulis HTML mentah di dalam fail JavaScript dengan bantuan teknik seperti createElement. Kaedah ini mengekalkan modulariti kod dan kemudahan penyelenggaraan.
Pengendalian ralat dan pengesahan data adalah faktor tambahan yang penting untuk diambil kira. Jika tidak dikendalikan dengan sewajarnya, bahagian belakang mungkin mengembalikan data yang tidak tepat atau hilang, yang boleh menyebabkan masalah pada bahagian hadapan. Kita boleh mengelakkan reka letak rosak atau masalah JavaScript dengan melaksanakan strategi sandaran dalam kod JavaScript, seperti menentukan sama ada tindak balas termasuk data yang diperlukan sebelum cuba menunjukkannya. Kebolehpercayaan adalah penting dalam aplikasi web berskala besar, oleh itu ini amat penting. Selain itu, menggunakan Django's JsonResponse menjamin bahawa data diformatkan dengan sewajarnya untuk penggunaan bahagian hadapan.
Dan akhir sekali, semasa bekerja dengan kandungan dinamik, keselamatan adalah kebimbangan yang berterusan. Membersihkan data sebelum memaparkannya ialah satu kaedah untuk membetulkan perkara ini dan menghentikan kelemahan keselamatan seperti serangan skrip merentas tapak (XSS). Elakkan daripada memperkenalkan kod yang berpotensi berbahaya dengan menggunakan keupayaan pengubahsuaian DOM terbina dalam JavaScript, seperti kandungan teks, bukannya innerHTML. Dengan mematuhi garis panduan ini, anda boleh memastikan bahawa maklumat pada halaman web anda adalah selamat dan boleh dipercayai.
Soalan Lazim Mengenai Mengendalikan Data JSON dengan JavaScript dan Python
- Apa yang membuat fetch() lebih baik daripada teknik AJAX yang lain?
- fetch() menawarkan API kontemporari dan mudah untuk menyerahkan permintaan HTTP; janji digunakan untuk mengurus tugas tak segerak, menghapuskan keperluan untuk mekanisme panggil balik yang rumit.
- kenapa response.json() digunakan semasa mendapatkan maklumat daripada API?
- Untuk mengubah respons HTTP yang tidak diproses menjadi objek JSON yang mudah dimanipulasi dan ditunjukkan oleh JavaScript, langkah 2 diperlukan.
- Bagaimana forEach membantu dalam memaparkan data dalam JavaScript?
- forEach ialah kaedah yang membolehkan anda merentasi tatasusunan, seperti senarai siaran dan menambah elemen HTML secara dinamik pada setiap item.
- Apakah peranan JsonResponse dalam API Django?
- Alat Django dipanggil JsonResponse menukar data sebagai JSON supaya bahagian hadapan boleh mengurus dan memaparkannya dengan mudah menggunakan JavaScript.
- Bagaimanakah kelemahan keselamatan dalam JavaScript dapat dielakkan apabila menggunakan innerHTML?
- Untuk melindungi daripada serangan XSS, adalah lebih baik untuk menggunakan JavaScript textContent atau 10 teknik daripada menyuntik kod yang berpotensi berbahaya.
Pemikiran Akhir tentang Mengambil dan Memaparkan Data Pengguna
Untuk laman web dinamik, menyepadukan JavaScript dengan bahagian belakang Python untuk mendapatkan dan menunjukkan data adalah strategi yang berkesan. Muat semula halaman yang lengkap tidak diperlukan untuk menjamin bahawa antara muka pengguna dikemas kini dengan berkesan apabila teknik suka ambil dan pengendalian balasan JSON digunakan. Pengalaman pengguna dipertingkatkan secara keseluruhan sebagai hasilnya.
Pengurusan ralat, keselamatan dan pengoptimuman semua harus diambil kira semasa membangunkan program sedemikian. Aplikasi akan menjadi lebih berdaya tahan jika balasan yang tidak lengkap dikendalikan dan pembersihan data dipastikan. Pendekatan ini menyediakan asas yang kukuh untuk menambah ciri yang lebih canggih pada projek anda pada masa hadapan.
Rujukan dan Bacaan Lanjutan
- Kandungan ini adalah berdasarkan dokumentasi rasmi Django untuk pengendalian JsonResponse , yang memberikan cerapan terperinci tentang cara respons JSON berfungsi dalam Django.
- Untuk memahami lebih lanjut tentang JavaScript Ambil API , MDN menawarkan liputan komprehensif tentang cara menggunakannya untuk membuat permintaan HTTP.
- Satu lagi sumber berguna untuk manipulasi DOM dengan JavaScript ialah dokumentasi createElement daripada MDN, yang menunjukkan cara membina elemen HTML secara dinamik.
- Untuk memahami integrasi Python dan Django untuk pembangunan API, pegawai Projek Django laman web menyediakan panduan terperinci.
- Untuk mengetahui lebih lanjut tentang mencegah kelemahan keselamatan dalam JavaScript seperti XSS, OWASP mempunyai panduan berguna tentang Skrip silang tapak (XSS) serangan.