Vue Laravel Crud: Cara Membuat Aplikasi Vue Laravel – Codewithaden

Vue Laravel Crud sangat penting untuk mempelajari Laravel dan Vue dari awal. CRUD (Buat, Baca, Perbarui, dan Hapus) adalah operasi data utama dan salah satu hal pertama yang Anda pelajari sebagai pengembang Laravel.

Kami akan belajar cara membangun aplikasi web kecil yang membuat, membaca, memperbarui, dan menghapus database MySQL. Selain itu, kami akan belajar cara membuat tabel, pengontrol, tampilan, model, rute API dan bekerja dengan pustaka Axios untuk mengirim permintaan jaringan.

Laravel adalah kerangka kerja PHP yang paling cepat berkembang dengan skalabilitas dan fleksibilitas.

Vuejs adalah perpustakaan front end tercepat di komunitas JavaScript. Akibatnya, Laravel menyediakan Vuejs Dukungan di luar kotak.

Mengapa menggunakan Laravel dan Vue

Laravel adalah kerangka kerja PHP yang kuat untuk dikerjakan. Membuat boilerplate crud dengan Vue dan Laravel sangat mudah. Vue.js adalah kerangka kerja JavaScript Frontend yang sangat baik yang menyediakan routing, dukungan HTTP, dukungan middleware, dan perpustakaan manajemen data sisi klien Vuex

Komunitas Laravel telah menghasilkan banyak sumber daya pendidikan yang berharga, termasuk yang ini! Dalam tutorial ini, Anda akan membangun permainan trivia sebagai dua proyek terpisah: Laravel API dan Vue Frontend (menggunakan Vue-Cli). Pendekatan ini menawarkan beberapa manfaat yang signifikan:

  1. Ini memungkinkan Anda untuk memisahkan proyek backend dan frontend dan menyebarkannya secara mandiri menggunakan berbagai strategi dan jadwal untuk pengujian dan penyebaran.
  2. Kami dapat menggunakan frontend sebagai aplikasi statis ke CDN dan mencapai penskalaan yang hampir tidak terbatas untuk sebagian kecil dari biaya hosting dengan backend.
  3. Pendekatan ini juga memungkinkan pengembang untuk bekerja hanya pada API atau hanya frontend tanpa memerlukan akses ke kode sumber lengkap dari bagian lain dari suatu sistem (ini masih mungkin untuk dicapai jika proyek -proyek tersebut terintegrasi secara ketat, tetapi sedikit sulit untuk mengatur) menjadikannya arsitektur luar biasa untuk tim dan proyek besar.

Vue Laravel Crud

Untuk membuat aplikasi CRUD menggunakan Laravel dan Vue, buat fronted menggunakan Vue.js dan menggunakan backend Laravel. Pendekatan standar menggabungkan Vue dan Laravel adalah untuk membuat komponen VUE dan kemudian memasukkannya ke dalam file blade Anda. Tetapi operasi CRUD di bawah arsitektur ini akan membutuhkan refresh halaman sebelum merefleksikan di UI.

Untuk demo vue laravel crud, kami tidak akan membuat proyek terpisah untuk frontend karena Laravel memberikan dukungan terbaik untuk Vue.js . Jadi, kami akan membangun komponen Vue di dalam folder aset Laravel.

Kami akan membuat file Aplikasi Halaman Tunggal (SPA) Menggunakan Laravel dan Vue.Js. Di spa ini, Anda dapat membuat posting, mengedit posting, membaca posting, dan menghapus posting. Tapi, pertama, kita akan membuat Laravel API Backend.

Sekarang, pertama, kita perlu menginstal Laravel aplikasi .

Jadi mari kita menginstal Laravel baru dengan perintah berikut.

Langkah 1: Pasang pelat boiler Laravel.

laravel new vuelaravelcrud 

Vue

Buka folder proyek dan instal dependensi frontend menggunakan perintah berikut.

npm install 

Juga, buka proyek di editor Anda. Saya menggunakan Kode Studio Visual

code . 

Mengatur konfigurasi basis data di dalam .env mengajukan.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=vuecrud
DB_USERNAME=root
DB_PASSWORD=root 

Simpan file, dan sekarang Anda backend dapat terhubung ke Mysql database.

Sekarang, mulailah menyusun aset menggunakan perintah berikut.

npm run dev 

Laravel

Kami juga dapat menjalankan perintah berikut untuk mengkompilasi aset saat Anda menulis kode baru atau memodifikasi kode yang ada.

npm run watch 

Langkah 2: Instal Vue Dependency dan Edit Konfigurasi.

Ketik perintah berikut untuk menginstal vue-router dan VUE-AXIOS dependensi.

Itu vue-router digunakan untuk mengarahkan kami Vue.js aplikasi untuk menggunakan komponen yang berbeda dan VUE-AXIOS untuk mengirim permintaan jaringan ke server.

npm install vue-router vue-axios --save 

Kita perlu mengubah app.js file di dalam Sumber Daya >> JS map

Ubah dengan kode berikut di dalam app.js mengajukan.

// App.js

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const router = new VueRouter({ mode: 'history'});
const app = new Vue(Vue.util.extend({ router })).$mount('#app');
 

Di sini, kami telah mengkonfigurasi vue-router dan VUE-AXIOS Perpustakaan.

Sekarang, di dalam Sumber Daya >> Tampilan folder, buat post.blade.php mengajukan.

Tambahkan kode berikut di dalam post.blade.php mengajukan.



    
        
        
        Laravel
        
        
        
    
    
        

Sekarang, ubah rute di dalam rute >> web.php mengajukan. Kami sedang membangun Aplikasi satu halaman menggunakan Laravel dan Vue.

Jadi kita perlu menentukan rute berikut, di mana kita dapat mendorong rute apa pun, memberikan rute yang benar tanpa kesalahan. Jika tidak, itu akan memberikan 404 kesalahan karena, di Laravel, Anda belum mendefinisikan rute apa pun; Ini adalah vue di mana Anda telah menentukan berbagai rute komponen.

Karena kode berikut, Anda sekarang dapat menggunakan proxy rute Laravel sebagai rute VUE, dan Anda dapat menampilkan komponen VUE tergantung pada URL saat ini.

where('any', '.*');
 

Simpan file dan buka browser dan lihat hasilnya. Anda dapat melihat bahwa kami telah berhasil mengintegrasikan Vue komponen di kami Laravel aplikasi.

Langkah 3: Buat komponen vue

Di dalam Sumber Daya >> JS folder, buat folder yang dipanggil komponen Dan di dalam folder itu, buat empat komponen vue berikut.

  1. Homecomponent.vue
  2. CreateComponent.vue
  3. EditComponent.vue
  4. IndexComponent.vue
// HomeComponent.vue




 
// CreateComponent.vue




 
// EditComponent.vue




 
// IndexComponent.vue




 

Langkah 4: Konfigurasikan vue-router

Di dalam app.js file, tulis kode berikut.

// app.js

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';

import App from './App.vue';
Vue.use(VueAxios, axios);

import HomeComponent from './components/HomeComponent.vue';
import CreateComponent from './components/CreateComponent.vue';
import IndexComponent from './components/IndexComponent.vue';
import EditComponent from './components/EditComponent.vue';

const routes = [
  {
      name: 'home',
      path: '/',
      component: HomeComponent
  },
  {
      name: 'create',
      path: '/create',
      component: CreateComponent
  },
  {
      name: 'posts',
      path: '/posts',
      component: IndexComponent
  },
  {
      name: 'edit',
      path: '/edit/:id',
      component: EditComponent
  }
];

const router = new VueRouter({ mode: 'history', routes: routes});
const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app'); 

Di sini, kami telah mengimpor empat komponen dan menentukan rute aplikasi kami. Kemudian kami telah membuat objek router dan meneruskannya ke aplikasi Vue kami.

Sekarang, buat satu lagi komponen vue di dalam Sumber Daya >> JS Folder menelepon App.vue dan tambahkan kode berikut ke dalamnya.

// App.vue





 

Di sini, kami telah mendefinisikan tampilan router kami. Petunjuk akan membuat komponen sesuai dengan URL saat ini. Jadi, jika URL kami /membuat, itu akan menyajikan Komponen createC di halaman web.

Simpan file, dan jika NPM Run Watch Anda tidak berjalan, maka Anda mungkin perlu mengkompilasi lagi dan kemudian pergi ke browser dan pergi ke URL ini untuk pengujian dan melihat apakah proyek berfungsi atau tidak.

  1. http: //vuelaravelcrud.test/create
  2. http: //vuelaravelcrud.test/posts
  3. http: //vuelaravelcrud.test/edit/21

Jika Anda mendapatkan komponen spesifik, Anda cantik, dan jika tidak, Periksa Kesalahan pada terminal dan panel konsol di browser.

Langkah 5: Buat bilah navigasi

Tulis kode berikut di dalam App.vue mengajukan. Saya telah menambahkan navbar.

// App.vue





 

Simpan file dan lihat output di browser.

Laravel

Langkah 6: Buat formulir

Tulis kode berikut di dalam CreateComponent.vue mengajukan. Selanjutnya, kami akan menambahkan formulir bootstrap untuk membuat posting.

// CreatePost.vue




 

Jadi, kami telah mengambil dua bidang. Judul posting dan badan pos. Kami telah membuat satu metode dipanggil addPost ().

Jadi, ketika pengguna mengirimkan formulir, kami akan mendapatkan input di dalam addPost () metode. Sejak saat itu, kami akan mengirim permintaan pos ke server Laravel dan menyimpan data ke dalam database.

Saya melewatkan validasi setiap bidang karena artikel ini semakin panjang. Jadi kami akan melakukannya di posting lain.

Simpan file dan buka URL ini: http: //vuelaravelcrud.test/create atau /membuat. Maka kamu dapat melihat formulir di bawah ini.

Laravel

Langkah 7: Buat backend Laravel

Tujuan utama dari kerangka kerja Laravel dalam contoh ini adalah untuk membangun backend API . Jadi, pertama, kami akan membuat skema untuk tabel postingan. Kemudian, juga, kita membutuhkan model postingan. Jadi mari kita buat keduanya menggunakan perintah berikut.

php artisan make:model Post -m 

Sekarang, tulis skema berikut [timestamp] create_posts_table.php mengajukan.

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
       $table->increments('id');
       $table->string('title');
       $table->text('body');
       $table->timestamps();
    });
} 

Migrasi database menggunakan perintah berikut.

php artisan migrate 

Selanjutnya, di dalam Post.php Model, tulis kode berikut untuk mencegah pengecualian penugasan massal.

Juga, buat pengontrol menggunakan perintah berikut.

php artisan make:controller PostController 

Kami menggunakan Koleksi Sumber Daya Laravel untuk pengembangan API. Jadi mari kita buat Koleksi Sumber Daya Laravel menggunakan perintah berikut.

php artisan make:resource PostCollection 

Saat membangun API, Anda mungkin memerlukan lapisan transformasi antara model fasih Anda dan tanggapan JSON yang dikembalikan ke pengguna aplikasi Anda. Kelas sumber daya Laravel memungkinkan Anda untuk secara ekspresif dan cepat mengubah model dan koleksi model menjadi JSON.

Itu Postcollection Sumber daya dihasilkan di dalam Aplikasi >> http >> sumber daya >> postcollection.php mengajukan.

Langkah 8: Tentukan operasi CRUD.

Pertama, kami mendefinisikan fungsi yang menyimpan data di dalam database MySQL.

 $request->get('title'),
        'body' => $request->get('body')
      ]);

      $post->save();

      return response()->json('success');
    }
}
 

Sekarang, tulis fungsi edit, perbarui, indeks, dan hapus.

 $request->get('title'),
        'body' => $request->get('body')
      ]);

      $post->save();

      return response()->json('successfully added');
    }

    public function index()
    {
      return new PostCollection(Post::all());
    }

    public function edit($id)
    {
      $post = Post::find($id);
      return response()->json($post);
    }

    public function update($id, Request $request)
    {
      $post = Post::find($id);

      $post->update($request->all());

      return response()->json('successfully updated');
    }

    public function delete($id)
    {
      $post = Post::find($id);

      $post->delete();

      return response()->json('successfully deleted');
    }
}
 

Langkah 9: Tentukan rute API

Kita perlu mendefinisikan rute API di dalam Rute >> API.php mengajukan.

get('/user', function (Request $request) {
    return $request->user();
});

Route::post('/post/create', 'PostController@store');
Route::get('/post/edit/{id}', 'PostController@edit');
Route::post('/post/update/{id}', 'PostController@update');
Route::delete('/post/delete/{id}', 'PostController@delete');
Route::get('/posts', 'PostController@index');
 

Langkah 10: Gunakan Axios untuk mengirim permintaan jaringan

Ajax adalah kunci arsitektur ini, jadi kami akan menggunakan Axios sebagai klien HTTP.

Sekarang, kami telah membuat backend. Langkah selanjutnya adalah mengirim file POS Permintaan ke server pengembangan Laravel.

Tulis kode berikut di dalam CreateComponent.vue file addPost () fungsi.

// CreateComponent.vue

addPost(){
    let uri = 'http://vuelaravelcrud.test/api/post/create';
    this.axios.post(uri, this.post).then((response) => {
       this.$router.push({name: 'posts'});
    });
} 

Jadi, itu akan memposting permintaan ke titik API server dengan data, dan server menyimpan data.

Sekarang, tampilkan posting. Jadi mari kita edit IndexComponent.vue mengajukan.

// IndexComponent.vue




 

Di sini, ketika komponen dibuat, kami mengirim permintaan jaringan untuk mengambil data.

Di sini, kita perlu menulis data karena Axios secara default, bungkus posting data backend kami dengan data, dan gunakan Pengumpulan sumber daya.

Jadi itu juga akan membungkus data di kunci data. Jadi untuk mendapatkan data yang sebenarnya, kita perlu menulis seperti response.data.data.

Jika kita belum menggunakan Axios, maka kita mungkin menulis response.data, tetapi Axios juga memiliki templat data backend seperti a response.data, Dan itulah mengapa kita perlu menulis response.data.data.

Langkah 11: Kirim edit dan perbarui permintaan

Sekarang, ketika komponen edit kami memuat, kami perlu mengambil data dari server untuk menampilkan data yang ada.

Kemudian, setelah mengubah data di kotak teks dan TexTarea , kami menekan tombol pembaruan, dan kami memanggil updatePost () Fungsi untuk mengirim permintaan posting ke server untuk memperbarui data.

// EditComponent.vue




 

Sekarang, Anda dapat mencoba mengedit data dan memperbarui formulir, dan Anda dapat melihat bahwa kami sekarang dapat memperbarui data.

Langkah 12: Hapus data.

Satu -satunya hal yang tersisa adalah menghapus atau menghapus data dari database.

Jadi, mari kita tulis kode terakhir di dalam IndexComponent.vue mengajukan.

// IndexComponent.vue




 

Jadi, di sini, kami telah mengambil Klik Acara di Vue untuk mengambil ID dari posting saat ini dan mengirim ID itu untuk menghapus data dari database dan menghapus data dari array di sisi klien menggunakan sambatan fungsi.

Akhirnya, Tutorial contoh laravel crud untuk pemula sudah selesai. Terima kasih telah mengambilnya.

Anda dapat menggunakan kode github berikut untuk referensi.

Kode GitHub

Lihat juga

Laravel Angular

Laravel bereaksi

Fungsionalitas Laravel dan Vue Chat

Laravel Vue File Unggah

Aplikasi tipe twitter laravel vue

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *