Quickstarters
Cara Mengembangkan Aplikasi CRUD dengan Vue.js?

32min
Pendahuluan
Dalam panduan ini, Anda akan menemukan cara membangun aplikasi CRUD (buat, baca, perbarui, hapus) yang sepenuhnya fungsional menggunakan Vue.js.
Kita akan memanfaatkan kekuatan Back4app untuk menangani backend Anda dengan mudah. Tutorial ini akan memandu Anda melalui pengaturan proyek Back4app, merancang model data dinamis, dan menerapkan operasi CRUD dengan Vue.js.
Pertama, Anda akan mengatur proyek Back4app yang bernama Basic-CRUD-App-Vue, menyediakan database non-relasional yang kuat untuk aplikasi Anda. Anda akan merancang model data Anda dengan mengonfigurasi koleksi dan bidang secara manual atau dengan menggunakan Agen AI cerdas dari Back4app.
Selanjutnya, Anda akan mengelola data Anda dengan Aplikasi Admin Back4app—antarmuka yang ramah pengguna, seret dan lepas—yang memungkinkan Anda untuk membuat, membaca, memperbarui, dan menghapus catatan dengan mudah.
Akhirnya, Anda akan mengintegrasikan frontend Vue.js Anda dengan Back4app melalui panggilan REST API (menggunakan axios) untuk menjalankan operasi CRUD yang aman dan efisien.
Pada akhir tutorial ini, Anda akan memiliki aplikasi Vue.js yang siap produksi yang melakukan fungsi CRUD penting bersama dengan otentikasi pengguna yang aman dan manajemen data.
Poin Penting
Pelajari cara membangun aplikasi CRUD berbasis Vue.js yang didukung oleh backend yang dapat diskalakan.
Pahami cara menyusun backend yang fleksibel dan menghubungkannya dengan proyek Vue.js Anda.
Temukan cara menggunakan Aplikasi Admin Back4app yang intuitif untuk operasi CRUD yang mulus.
Jelajahi teknik penyebaran, termasuk kontainerisasi Docker, untuk aplikasi Vue.js Anda.
﻿
Prasyarat
Sebelum Anda mulai, pastikan Anda memiliki:
Akun Back4app dengan proyek baru yang sudah disiapkan.
Butuh bantuan? Lihat Memulai dengan Back4app.
Lingkungan pengembangan Vue.js.
Gunakan Vue CLI atau IDE favorit Anda seperti VSCode.
Pengetahuan dasar tentang Vue.js, JavaScript modern, dan REST API.
Segarkan pengetahuan Anda tentang dokumentasi Vue.js jika diperlukan.
﻿
Langkah 1 – Pengaturan Proyek
Membuat Proyek Back4app Baru
Masuk ke akun Back4app Anda.
Klik tombol “Aplikasi Baru” dari dasbor Anda.
Beri nama proyek Anda: Basic-CRUD-App-Vue dan ikuti petunjuk untuk menyelesaikan pengaturan.
Buat Proyek Baru
﻿
Setelah membuat proyek, itu akan muncul di dasbor Anda, meletakkan dasar untuk backend Anda.
﻿
Langkah 2 – Merancang Model Data
Menyusun Data Anda
Untuk aplikasi CRUD ini, Anda akan mendefinisikan beberapa koleksi dalam proyek Back4app Anda. Contoh di bawah ini menggambarkan koleksi inti dan bidang mereka yang diperlukan untuk fungsionalitas CRUD.
1. Koleksi Item
Koleksi ini menyimpan rincian tentang setiap item.
Bidang
Tipe Data
Deskripsi
_id
ObjectId
ID unik yang dihasilkan secara otomatis.
judul
String
Nama item tersebut.
deskripsi
String
Ringkasan singkat tentang item tersebut.
dibuatPada
Tanggal
Stempel waktu pembuatan item.
diperbaruiPada
Tanggal
Stempel waktu pembaruan terakhir.
2. Koleksi Pengguna
Koleksi ini menangani kredensial pengguna dan data otentikasi.
Bidang
Tipe Data
Deskripsi
_id
ObjectId
ID unik yang dihasilkan secara otomatis.
nama pengguna
String
Nama pengguna yang unik untuk pengguna.
email
String
Alamat email yang unik.
hashKataSandi
String
Kata sandi terenkripsi untuk masuk.
dibuatPada
Tanggal
Stempel waktu pembuatan akun.
diperbaruiPada
Tanggal
Timestamp pembaruan akun terakhir.
Anda dapat menambahkan koleksi dan bidang ini secara manual di dasbor Back4app.
Buat Kelas Baru
﻿
Anda dapat menambahkan bidang dengan memilih jenis data, memberikan nama bidang, mengatur nilai default, dan menandainya sebagai wajib jika perlu.
Buat Kolom
﻿
Memanfaatkan Agen AI Back4app untuk Pengaturan Skema
Agen AI Back4app yang terintegrasi dapat secara otomatis menghasilkan skema data Anda berdasarkan deskripsi Anda. Alat ini mempercepat pengaturan dan memastikan model Anda memenuhi persyaratan CRUD.
Cara Menggunakan Agen AI:
Buka Agen AI:
Masuk ke dasbor Back4app Anda dan navigasikan ke Agen AI di pengaturan proyek Anda.
Deskripsikan Model Data Anda:
Masukkan prompt rinci yang menggambarkan koleksi dan bidang yang Anda butuhkan.
Tinjau dan Konfirmasi:
Setelah Agen AI menghasilkan skema yang diusulkan, tinjau dan konfirmasi untuk menerapkan konfigurasi.
Contoh Prompt
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
Pendekatan yang didorong oleh AI ini menghemat waktu dan memastikan model data yang dioptimalkan dan konsisten.
﻿
Langkah 3 – Mengaktifkan Aplikasi Admin & Mengelola Operasi CRUD
Ikhtisar Aplikasi Admin
Aplikasi Admin Back4app menyediakan antarmuka tanpa kode untuk manajemen backend. Dengan fitur seret dan lepasnya, Anda dapat dengan mudah melakukan operasi CRUD seperti membuat, membaca, memperbarui, dan menghapus catatan.
Mengaktifkan Aplikasi Admin
Pergi ke menu “Lainnya” di dasbor Back4app Anda.
Pilih “Aplikasi Admin” dan klik “Aktifkan Aplikasi Admin.”
Atur kredensial admin dengan membuat akun admin pertama Anda. Proses ini juga menetapkan peran (seperti B4aAdminUser) dan koleksi sistem.
Aktifkan Aplikasi Admin
﻿
Setelah mengaktifkan, masuk ke Aplikasi Admin untuk mulai mengelola data Anda.
Dasbor Aplikasi Admin
﻿
Mengelola Operasi CRUD melalui Aplikasi Admin
Di dalam Aplikasi Admin, Anda dapat:
Buat Rekor Baru: Klik “Tambah Rekor” di koleksi mana pun (misalnya, Item) untuk memasukkan data baru.
Edit atau Lihat Rekor: Pilih sebuah rekor untuk melihat detailnya atau mengubah bidangnya.
Hapus Rekor: Hapus rekor yang tidak lagi diperlukan.
Antarmuka ini menyederhanakan penanganan data dan meningkatkan pengalaman pengguna secara keseluruhan.
﻿
Langkah 4 – Menghubungkan Aplikasi Vue.js Anda dengan Back4app
Setelah backend Anda siap, saatnya menghubungkan aplikasi Vue.js Anda dengan Back4app.
Menggunakan Panggilan REST API dengan Axios
Kami akan menggunakan panggilan REST API melalui axios untuk melakukan operasi CRUD.
Instal Axios:
Jalankan perintah berikut di direktori proyek Anda:
Bash
npm install axios
npm install axios
﻿
Siapkan Axios:
Buat instance axios dalam sebuah file (misalnya, api.js):
JS
// api.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://parseapi.back4app.com',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  }
});

export default apiClient;
// api.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://parseapi.back4app.com',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  }
});

export default apiClient;
﻿
Terapkan Metode CRUD dalam Komponen Vue:
Berikut adalah contoh cara mengambil dan membuat item:
JS
// ItemsService.js
import apiClient from './api';

export default {
  fetchItems() {
    return apiClient.get('/classes/Items')
      .then(response => response.data.results)
      .catch(error => console.error('Error fetching items:', error));
  },

  addItem(title, description) {
    return apiClient.post('/classes/Items', {
      title,
      description
    })
    .then(response => response.data)
    .catch(error => console.error('Error adding item:', error));
  },

  updateItem(objectId, title, description) {
    return apiClient.put(`/classes/Items/${objectId}`, {
      title,
      description
    })
    .then(response => response.data)
    .catch(error => console.error('Error updating item:', error));
  },

  deleteItem(objectId) {
    return apiClient.delete(`/classes/Items/${objectId}`)
    .then(response => response.data)
    .catch(error => console.error('Error deleting item:', error));
  }
};
// ItemsService.js
import apiClient from './api';

export default {
  fetchItems() {
    return apiClient.get('/classes/Items')
      .then(response => response.data.results)
      .catch(error => console.error('Error fetching items:', error));
  },

  addItem(title, description) {
    return apiClient.post('/classes/Items', {
      title,
      description
    })
    .then(response => response.data)
    .catch(error => console.error('Error adding item:', error));
  },

  updateItem(objectId, title, description) {
    return apiClient.put(`/classes/Items/${objectId}`, {
      title,
      description
    })
    .then(response => response.data)
    .catch(error => console.error('Error updating item:', error));
  },

  deleteItem(objectId) {
    return apiClient.delete(`/classes/Items/${objectId}`)
    .then(response => response.data)
    .catch(error => console.error('Error deleting item:', error));
  }
};
﻿
Integrasikan metode API ini ke dalam komponen Vue Anda untuk mengelola data aplikasi Anda.
﻿
Langkah 5 – Mengamankan Backend Anda
Mengonfigurasi Daftar Kontrol Akses (ACL)
Lindungi data Anda dengan mengatur ACL untuk catatan Anda. Misalnya, untuk membuat item yang hanya dapat dilihat atau dimodifikasi oleh pemiliknya:
JS
import apiClient from './api';

export function createPrivateItem(title, description, userId) {
  const acl = {
    "*": { "read": false, "write": false },
    [userId]: { "read": true, "write": true }
  };

  return apiClient.post('/classes/Items', {
    title,
    description,
    ACL: acl
  })
  .then(response => response.data)
  .catch(error => console.error('Error creating private item:', error));
}
import apiClient from './api';

export function createPrivateItem(title, description, userId) {
  const acl = {
    "*": { "read": false, "write": false },
    [userId]: { "read": true, "write": true }
  };

  return apiClient.post('/classes/Items', {
    title,
    description,
    ACL: acl
  })
  .then(response => response.data)
  .catch(error => console.error('Error creating private item:', error));
}
﻿
Mengatur Izin Tingkat Kelas (CLP)
Gunakan dasbor Back4app Anda untuk mengonfigurasi CLP sehingga hanya pengguna yang terautentikasi yang dapat mengakses koleksi tertentu. Ini memastikan bahwa backend Anda tetap aman secara default.
﻿
Langkah 6 – Menerapkan Autentikasi Pengguna
Mengatur Pendaftaran dan Masuk Pengguna
Back4app memanfaatkan koleksi Pengguna bawaan untuk autentikasi. Dalam aplikasi Vue.js Anda, Anda dapat mengelola pendaftaran dan masuk pengguna menggunakan panggilan REST API. Berikut caranya:
JS
// AuthService.js
import apiClient from './api';

export default {
  register(username, password, email) {
    return apiClient.post('/users', {
      username,
      password,
      email
    })
    .then(response => response.data)
    .catch(error => console.error('Registration error:', error));
  },

  login(username, password) {
    return apiClient.get('/login', {
      params: { username, password }
    })
    .then(response => response.data)
    .catch(error => console.error('Login error:', error));
  }
};
// AuthService.js
import apiClient from './api';

export default {
  register(username, password, email) {
    return apiClient.post('/users', {
      username,
      password,
      email
    })
    .then(response => response.data)
    .catch(error => console.error('Registration error:', error));
  },

  login(username, password) {
    return apiClient.get('/login', {
      params: { username, password }
    })
    .then(response => response.data)
    .catch(error => console.error('Login error:', error));
  }
};
﻿
﻿
Pengaturan ini juga memungkinkan Anda untuk menangani manajemen sesi, pengaturan ulang kata sandi, dan fitur otentikasi tambahan.
﻿
Langkah 7 – Menerapkan Aplikasi Vue.js Anda
Back4app menyederhanakan proses penerapan. Anda dapat menerapkan aplikasi Vue.js Anda menggunakan berbagai metode, termasuk kontainerisasi Docker.
7.1 Membangun Aplikasi Vue.js Anda
Kompilasi dan Bundel:
Gunakan Vue CLI untuk mengompilasi aplikasi Anda:
Bash
npm run build
npm run build
﻿
Tinjau Hasil Bangunan:
Konfirmasi bahwa folder output (biasanya dist/) berisi semua file yang diperlukan.
﻿
7.2 Ikhtisar Struktur Proyek
Struktur proyek Vue.js yang umum mungkin terlihat seperti:
Text
Basic-CRUD-App-Vue/
|-- public/
|-- src/
|   |-- components/
|   |   |-- ItemList.vue
|   |   |-- ItemForm.vue
|   |-- services/
|   |   |-- api.js
|   |   |-- ItemsService.js
|   |   |-- AuthService.js
|   |-- App.vue
|   |-- main.js
|-- package.json
|-- README.md
Basic-CRUD-App-Vue/
|-- public/
|-- src/
|   |-- components/
|   |   |-- ItemList.vue
|   |   |-- ItemForm.vue
|   |-- services/
|   |   |-- api.js
|   |   |-- ItemsService.js
|   |   |-- AuthService.js
|   |-- App.vue
|   |-- main.js
|-- package.json
|-- README.md
﻿
7.3 Menggunakan Docker untuk Aplikasi Vue.js Anda
Jika Anda lebih suka penerapan terkontainer, sertakan sebuah Dockerfile di root proyek Anda:
Dockerfile
# Use a Node image for building the app
FROM node:16 AS build

# Set the working directory
WORKDIR /app

# Install dependencies and build the app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Use an Nginx image to serve the app
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use a Node image for building the app
FROM node:16 AS build

# Set the working directory
WORKDIR /app

# Install dependencies and build the app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Use an Nginx image to serve the app
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
7.4 Penyebaran dengan Back4app Web Deployment
Hubungkan Repositori GitHub Anda:
Pastikan proyek Vue.js Anda dihosting di GitHub.
Konfigurasi Penyebaran:
Di dasbor Back4app, pilih opsi Web Deployment , tautkan repositori Anda (misalnya, Basic-CRUD-App-Vue), dan pilih cabang yang diinginkan.
Atur Perintah Build:
Tentukan perintah build Anda (misalnya, npm run build) dan tunjukkan folder output (misalnya, dist).
Penyebaran:
Klik Deploy dan lihat log sampai aplikasi Anda aktif.
﻿
Langkah 8 – Pemikiran Akhir dan Langkah Selanjutnya
Selamat! Anda telah membangun aplikasi CRUD berbasis Vue.js yang terintegrasi dengan Back4app. 
Anda mengonfigurasi proyek bernama Basic-CRUD-App-Vue, menyiapkan koleksi untuk Item dan Pengguna, dan menggunakan Aplikasi Admin Back4app untuk manajemen data. 
Selain itu, Anda menghubungkan frontend Vue.js Anda melalui panggilan REST API dan menetapkan langkah-langkah keamanan.
Langkah Selanjutnya:
Kembangkan Aplikasi Anda:
Incorporasikan fitur seperti penyaringan lanjutan, tampilan item yang lebih detail, atau pembaruan langsung.
Tingkatkan Fungsionalitas Backend:
Jelajahi fungsi cloud, integrasikan API eksternal, atau terapkan kontrol akses berbasis peran.
Terus Belajar:
Rujuk ke dokumentasi Back4app dan sumber daya tambahan untuk lebih menyempurnakan aplikasi Anda.
Selamat coding dan nikmati membangun aplikasi CRUD Vue.js Anda!
Bidang	Tipe Data	Deskripsi
_id	ObjectId	ID unik yang dihasilkan secara otomatis.
judul	String	Nama item tersebut.
deskripsi	String	Ringkasan singkat tentang item tersebut.
dibuatPada	Tanggal	Stempel waktu pembuatan item.
diperbaruiPada	Tanggal	Stempel waktu pembaruan terakhir.
Bidang	Tipe Data	Deskripsi
_id	ObjectId	ID unik yang dihasilkan secara otomatis.
nama pengguna	String	Nama pengguna yang unik untuk pengguna.
email	String	Alamat email yang unik.
hashKataSandi	String	Kata sandi terenkripsi untuk masuk.
dibuatPada	Tanggal	Stempel waktu pembuatan akun.
diperbaruiPada	Tanggal	Timestamp pembaruan akun terakhir.
Diperbarui 17 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membuat Aplikasi CRUD dengan Elm?
BERIKUTNYA
Cara Membangun Aplikasi CRUD dengan JavaScript?