Bagaimana Membangun Frontend Vue dan Menghubungkannya ke Backend?

dalam tutorial ini, anda akan membangun aplikasi daftar tugas menggunakan vue dan menghubungkannya ke layanan backend yang dikelola panduan ini sempurna untuk anda jika anda ingin menguasai operasi crud (buat, baca, perbarui, hapus) yang penting dan membangun antarmuka pengguna yang intuitif pada akhir tutorial, aplikasi anda akan sepenuhnya berinteraksi dengan backend yang didukung oleh back4app mengembangkan aplikasi full stack dapat melibatkan pengaturan backend yang kompleks, manajemen database, dan otentikasi pengguna untuk memungkinkan anda fokus pada pembuatan frontend vue yang luar biasa, kami akan menggunakan back4app untuk mengelola backend dengan mudah back4app menyediakan database siap pakai, otentikasi, cloud code untuk logika server kustom, dan sdk untuk mengintegrasikan dengan aplikasi anda ini memungkinkan anda untuk menerapkan aplikasi yang dapat diskalakan tanpa repot mengelola server poin penting dengan mengikuti tutorial ini, anda akan menyiapkan proyek vue modern menggunakan alat standar industri mengintegrasikan layanan backend dengan mulus untuk menangani data aplikasi anda menerapkan operasi crud yang penting untuk sebuah daftar tugas menerapkan aplikasi fungsional penuh anda melalui alur kerja terkontainer di back4app prasyarat sebelum anda mulai, pastikan anda memiliki node js dan npm terinstal di mesin anda verifikasi instalasi dengan node v dan npm v pengetahuan dasar vue , termasuk komponen, data reaktif, dan penanganan peristiwa familiaritas dengan api komposisi vue 3 sangat bermanfaat akun back4app untuk mengelola layanan backend anda daftar di back4app https //www back4app com/ jika anda belum melakukannya dengan ini, anda siap untuk mengatur proyek anda pengaturan proyek mulailah dengan menyiapkan lingkungan pengembangan lokal anda dan menginisialisasi proyek vue anda dengan vite untuk pengalaman build yang cepat dan modern verifikasi anda memiliki node js (versi lts) terinstal jika tidak, unduh dari nodejs org https //nodejs org/ buat proyek vue anda dengan menjalankan npm create vite\@latest todo app 3 beralih ke direktori proyek anda cd todo app 4 instal dependensi npm install 5 luncurkan server pengembangan untuk memastikan semuanya berfungsi npm run dev buka url yang diberikan di browser anda dengan frontend vue anda siap, langkah selanjutnya adalah menyiapkan backend anda di back4app membuat backend todo back4app menawarkan layanan backend yang sepenuhnya dikelola yang didukung oleh parse , lengkap dengan database nosql, otentikasi pengguna, cloud code, dan pembuatan api otomatis ikuti langkah langkah ini untuk membuat backend masuk ke dasbor back4app https //www back4app com/ dan klik "buat aplikasi baru " beri nama aplikasi anda (misalnya, todoapp ) dan pilih nodejs/parse sebagai jenis backend pergi ke "database" > "browser" , klik "buat kelas" , dan pilih "kustom" beri nama kelas task dan atur izin untuk memungkinkan baca dan tulis publik (anda dapat memperbaiki ini nanti) di kelas task , tambahkan bidang berikut judul (string) – judul tugas deskripsi (string) – detail tentang tugas selesai (boolean) – status penyelesaian tugas tanggaljatuhtempo (tanggal) – kapan tugas jatuh tempo klik "simpan" untuk membuat skema mengintegrasikan back4app dengan vue anda akan menggunakan parse javascript sdk untuk berkomunikasi antara frontend vue anda dan backend back4app instal sdk parse npm install parse konfigurasikan sdk dengan mengedit src/main js impor sdk dan inisialisasi dengan application id anda dan javascript key dari dasbor back4app (ditemukan di bawah app settings > security & keys ) import { createapp } from 'vue'; import app from ' /app vue'; import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; createapp(app) mount('#app'); dengan backend anda terhubung, anda sekarang dapat membangun antarmuka daftar tugas dan mengintegrasikan operasi crud mengembangkan frontend aplikasi vue anda akan terdiri dari komponen untuk menambah, menampilkan, memperbarui, dan menghapus tugas anda akan memanfaatkan reaktivitas vue untuk mengelola status dan memastikan pembaruan yang lancar menyusun komponen anda buat sebuah folder components di dalam src untuk menampung komponen vue anda mkdir src/components touch src/components/taskform vue src/components/tasklist vue src/components/taskitem vue taskform vue komponen ini menangani penambahan tugas baru ini menggunakan formulir terkontrol untuk menangkap input pengguna \<template> \<form @submit prevent="handlesubmit"> \<input type="text" placeholder="task title" v model="title" required /> \<input type="text" placeholder="description" v model="description" required /> \<button type="submit">add task\</button> \</form> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskform', props \['fetchtasks'], data() { return { title '', description '' }; }, methods { async handlesubmit() { try { const task = parse object extend('task'); const task = new task(); task set('title', this title); task set('description', this description); task set('completed', false); await task save(); this fetchtasks(); this title = ''; this description = ''; } catch (error) { console error('error adding task ', error); } } } }; \</script> tasklist vue komponen ini menampilkan daftar tugas dan mengintegrasikan tindakan tugas \<template> \<div> \<p v if="!tasks length">no tasks available\</p> \<taskitem v for="task in tasks" \ key="task id" \ task="task" \ fetchtasks="fetchtasks" /> \</div> \</template> \<script> import taskitem from ' /taskitem vue'; export default { name 'tasklist', components { taskitem }, props \['tasks', 'fetchtasks'] }; \</script> taskitem vue komponen ini mewakili tugas individu dan mencakup tindakan untuk menandai sebagai selesai atau menghapus \<template> \<div \ class="\['task item', { completed task completed }]"> \<div> \<h3>{{ task title }}\</h3> \<p>{{ task description }}\</p> \</div> \<div> \<button @click="handlecomplete"> {{ task completed ? 'undo' 'complete' }} \</button> \<button @click="handledelete">delete\</button> \</div> \</div> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskitem', props \['task', 'fetchtasks'], methods { async handlecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(this task id); tasktoupdate set('completed', !this task completed); await tasktoupdate save(); this fetchtasks(); } catch (error) { console error('error updating task ', error); } }, async handledelete() { try { const query = new parse query('task'); const tasktodelete = await query get(this task id); await tasktodelete destroy(); this fetchtasks(); } catch (error) { console error('error deleting task ', error); } } } }; \</script> mengelola status di app vue di komponen utama anda, anda akan mengelola daftar tugas menggunakan data reaktif vue dan hook siklus hidup \<template> \<div class="container"> \<h1>to do list\</h1> \<taskform \ fetchtasks="fetchtasks" /> \<tasklist \ tasks="tasks" \ fetchtasks="fetchtasks" /> \</div> \</template> \<script> import { ref, onmounted } from 'vue'; import parse from 'parse/dist/parse min js'; import taskform from ' /components/taskform vue'; import tasklist from ' /components/tasklist vue'; export default { name 'app', components { taskform, tasklist }, setup() { const tasks = ref(\[]); const fetchtasks = async () => { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); tasks value = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } }; onmounted(fetchtasks); return { tasks, fetchtasks }; } }; \</script> menata aplikasi buat sebuah styles css file di src untuk menambahkan gaya dasar container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } impor stylesheet di main js import ' /styles css'; menyebarkan frontend di back4app web deployment back4app web deployment memungkinkan anda untuk mengemas aplikasi vue anda untuk produksi dengan docker mengonfigurasi vite untuk produksi sesuaikan vite config js untuk mengatur jalur dasar dengan benar untuk lingkungan yang tercontainer import { defineconfig } from 'vite'; import vue from '@vitejs/plugin vue'; export default defineconfig({ plugins \[vue()], base ' /', }); hasilkan build produksi npm run build membuat dockerfile buat sebuah dockerfile di direktori root # stage 1 build the vue app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# stage 2 serve the app using nginx from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] menguji kontainer docker secara lokal bangun gambar docker anda docker build t todo frontend jalankan kontainer docker run p 8080 80 todo frontend kunjungi http //localhost 8080 untuk memverifikasi bahwa aplikasi vue anda disajikan dengan benar menyebarkan ke back4app inisialisasi repositori git, tambahkan file anda, dan lakukan commit git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main masuk ke penyebaran web back4app https //www back4app com/containers klik "buat aplikasi baru" , berikan nama proyek, dan pilih repositori github otorisasi back4app untuk mengakses repositori anda dan pilih penyebaran dockerfile konfirmasi pengaturan build dan klik "deploy" untuk memicu build pertama memantau penyebaran anda setelah penyebaran, gunakan dasbor back4app untuk melihat log untuk debugging memantau penggunaan sumber daya dan restart kontainer menyebarkan kembali pada komit baru menggunakan "trigger build" opsi mengonfigurasi domain kustom jika diperlukan akses aplikasi langsung di https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ pengujian dan debugging setelah menyebarkan, pastikan frontend vue anda berkomunikasi dengan benar dengan backend back4app verifikasi panggilan api buka alat pengembang browser anda (f12 → jaringan) untuk memeriksa permintaan api tambahkan dan ambil tugas gunakan antarmuka aplikasi untuk menambahkan tugas dan periksa browser database back4app operasi crud uji menyelesaikan dan menghapus tugas, lalu konfirmasi perubahan di backend kasus tepi validasi input formulir dan simulasi kondisi jaringan lambat (menggunakan chrome devtools) untuk menilai kinerja memecahkan masalah umum kesalahan cors perbarui header dan domain yang diizinkan di back4app (dasbor > pengaturan aplikasi > keamanan & kunci) untuk menyertakan url frontend anda kesalahan autentikasi (401) pastikan id aplikasi dan kunci javascript anda benar masalah penyebaran backend periksa log kontainer di dasbor back4app dan mulai ulang kontainer jika perlu praktik terbaik untuk menggunakan back4app dengan vue untuk mengoptimalkan aplikasi anda permintaan data yang efisien gunakan permintaan batch untuk beberapa operasi const tasks = \[task1, task2, task3]; parse object saveall(tasks); optimalkan kuery minta hanya bidang yang diperlukan query select('title', 'completed'); variabel lingkungan simpan kunci sensitif dalam sebuah env file vite parse app id=your app id vite parse js key=your js key keamanan gunakan acl untuk membatasi akses task setacl(new parse acl(parse user current())); kode cloud alihkan logika kompleks ke fungsi backend untuk mengurangi paparan api kesimpulan anda telah berhasil membangun aplikasi to do list full stack dengan menyiapkan frontend vue, mengintegrasikannya dengan backend back4app, dan menyebarkannya melalui alur kerja terkontainer tutorial ini menunjukkan jalur yang disederhanakan dari pengembangan lokal ke penyebaran cloud, memastikan interaksi yang lancar antara ui vue anda dan layanan backend melihat ke depan, pertimbangkan peningkatan seperti manajemen pengguna yang lebih canggih, pembaruan waktu nyata, dan integrasi layanan pihak ketiga untuk informasi lebih lanjut, kunjungi dokumentasi back4app https //www back4app com/docs dan jelajahi sumber daya komunitas