Get best of the week

Menggunakan VueJS dengan Django

Terjemahan artikel disiapkan sebelum dimulainya kursus Pengembang Web Python .



pengantar


Sekarang saya sedang mengerjakan proyek yang sangat menarik. Dan semuanya rumit di dalamnya, karena proyek itu sendiri berskala sangat besar, dan saya menghadapinya sendirian di waktu luang saya, sambil bekerja penuh waktu. Karena itu, saya harus efektif. Untungnya, saya menggunakan Django dengan pendekatan "termasuk baterai" .

Saya menggunakan semua fungsi Django, yang mempercepat pengembangan, dan saya tidak ingin melupakan mesin templatnya. Oleh karena itu, backend untuk Django dan frontend untuk JavaScript SPA bukanlah pilihan bagi saya. Namun, bahkan pengembang backend yang paling rajin harus mengakui bahwa beberapa hal perlu diterapkan di sisi klien. Tindakan minor pengguna tidak harus memerlukan memuat ulang halaman. Selain itu, beberapa bagian aplikasi web yang saya buat memerlukan interaksi pengguna yang agak rumit.

Secara tradisi, seseorang dapat mencampur Django dan jQuery untuk mendapatkan perilaku yang diinginkan. Tetapi sekarang ada teknologi JavaScript yang lebih baru seperti React dan Vue. Karena tujuan kami adalah menemukan kerangka kerja yang dapat kami gunakan dengan Django tanpa menulis ulang semuanya dari awal, kami akan menggunakan Vue sebagai alternatif yang lebih mudah. Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana mulai menggunakan Vue dengan Django dengan sedikit usaha.

Instalasi dan pengaturan


Salah satu alasan untuk menggunakan Vue adalah dokumentasi yang sangat baik . Ini memiliki banyak contoh, pencarian yang layak dan daftar isi yang jelas. Tujuan dari artikel ini adalah untuk menunjukkan bahwa Anda dapat mulai menggunakan Vue dalam proyek Django Anda segera tanpa pengaturan yang rumit selama berjam-jam. Oleh karena itu, kami akan menggunakan metode koneksi paling sederhana Vue.js, menambahkannya melalui tag <script>.

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Sekarang kami siap membuat instance pertama kami Vue.js:

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  delimiters: ["[[", "]]"],
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Saya mengambil contoh ini dari panduan memulai resmi. Namun, ada hal lain. Secara default, Django dan Vue menggunakan tag template yang sama. Oleh karena itu, kita perlu memisahkan Vue dari Django secara eksplisit untuk menghindari konflik dengan mesin template Django.

Akses Data Django dari Vue


Cara termudah untuk mendapatkan data adalah dengan menggunakan filter bawaanjscon_script dari Django . Dengan cara ini, Anda dapat segera mulai menggunakan model Django Anda sebagai data untuk instance Vue.

Dalam HTML:

{{ django_template_variable|json_script:"djangoData" }}

Dan kemudian di JavaScript kita memuat data ke dalam variabel:

let jsVariable = JSON.parse(document.getElementById('djangoData').textContent);


Dan dia siap digunakan dengan Vue:

new Vue({
  delimiters: ["[[", "]]"],
  el: '#app',
  data: jsVariable
})

Menjalankan permintaan asinkron di backend


Salah satu tugas paling umum di ujung depan pada Vue adalah untuk menanyakan aplikasi server di backend. Dengan aplikasi Django lengkap, kami tidak perlu melakukan ini dengan setiap tindakan pengguna. Dalam beberapa kasus, memuat ulang satu halaman hebat, dan sistem template Django akan memberikan semua manfaat. Tetapi untuk meningkatkan pengalaman pengguna dan memanfaatkan Vue sepenuhnya, kami mungkin masih perlu membuat permintaan backend dalam beberapa kasus.

Vue sendiri tidak tahu bagaimana menangani permintaan. Pada artikel ini saya akan menggunakan aksiomaseperti itu juga direkomendasikan oleh dokumentasi Vue resmi. Anda dapat memilih alternatif lain. Untuk melewati mekanisme perlindungan CSRF Django, aksioma harus memasukkan cookie yang sesuai dalam permintaannya. Cara termudah adalah dengan menetapkan nilai aksioma global secara default:

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";

Selain itu, kita dapat membuat instance aksioma dengan pengaturan yang diperlukan:

var instance = axios.create({
    xsrfCookieName: 'csrftoken',
    xsrfHeaderName: "X-CSRFTOKEN",
});

Template Django Anda harus berisi tag {% csrf_token %}atau, sebagai alternatif, tampilan yang sesuai harus menggunakan dekorator ensure_csrf_cookie(). Sisa dari backend default untuk sesi Django untuk otentikasi akan bekerja di luar kotak, yang berarti bahwa Anda dapat membuat anotasi layanan Anda di backend dengan hal-hal seperti loginRequiredini dan itu hanya akan berfungsi. Untuk membuat permintaan, Anda dapat menggunakan aksioma:

axios.post('/django/backend/endpoint', {
    data: jsVariable 
})
    .then(function (response) {
        // handle response
    })
    .catch(function (error) {
        // handle error
    });

Panggilan ini dapat dilakukan dari mountedkait instance Vue atau dari tempat lain di mana Anda dapat menempatkan kode JavaScript.

Jika Anda mengaktifkan CSRF_USE_SESSIONS CSRF_COOKIE_HTTPONLYDjango di pengaturan, Anda harus membaca token CSRF dari DOM. Untuk mempelajari lebih lanjut tentang ini, lihat dokumentasi resmi Django .

Kesimpulan


Ketika Anda google tentang Django + Vue, sebagian besar hasil pencarian akan tentang cara menggunakan Django di backend, dan Vue untuk proyek terpisah di frontend. Memiliki dua proyek independen mempersulit pekerjaan, dan Anda kehilangan akses ke sistem template Django, yang pada gilirannya merupakan cara yang sangat efektif untuk menghemat waktu. Di sisi lain, akses ke kerangka kerja seperti Vue dapat melakukan keajaiban di dunia aplikasi web yang melampaui fungsi CRUD.

Untungnya, kita tidak perlu memilih di antara mereka. Panduan ini menunjukkan bahwa Anda dapat bersaing dengan dua kelinci!


Memperluas Django (webinar gratis).

More articles:


All Articles