Simple Laravel 5 Vue JS Ajax CRUD(insert update delete)

Today, We want to share with you Simple Laravel 5 Vue JS Ajax CRUD(insert update delete) Example and demo from scratch.In this post we will show you AJAX CRUD Tutorial Using vuejs, JSON and Laravel – Step by Step, hear for Laravel 5 and Vue JS CRUD with Pagination we will give you demo and example for implement.In this post, we will learn about Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch with an example.

Simple Laravel 5 Vue JS Ajax CRUD(insert update delete)

There are the Following The simple About Simple Laravel 5 Vue JS Ajax CRUD(insert update delete) Example and demo from scratch Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel MySQL CRUD Operations using vue js and Bootstrap, so the some major files and Directory structures for this example is following below.

  • Setup Laravel and Vuejs
  • Laravel Database and model
  • Laravel Route and Controller
  • Laravel view files
  • 1. Member Listing
  • 2. Member Create
  • 3. Member Edit
  • 4. Member Delete

Step 1: Setup Laravel and Vuejs

composer create-project --prefer-dist laravel/laravel blog

Step 2: Make members Database table and model

php artisan make:migration create_members_table

database/migrations

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateMembersTable extends Migration
{
    public function up()
    {
        Schema::create('members', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('information');
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::drop("members");
    }
}

app/Member.php

namespace App;
use Illuminate\Database\Eloquent\Model;
class Member extends Model
{
    public $fillable = ['title','information'];
}

Step 3: Include Laravel Route and Controller

app/Http/routes.php

Route::get('manage-vue', 'VueMemberController@manageVue');

Route::resource('vuemembers','VueMemberController');

app/Http/Controllers/VueMemberController.php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Member;
class VueMemberController extends Controller
{
    public function manageVue()
    {
        return view('manage-vue');
    }
    public function index(Request $request)
    {
        $members = Member::latest()->paginate(5);
        $response = [
            'pagination' => [
                'total' => $members->total(),
                'per_page' => $members->perPage(),
                'current_page' => $members->currentPage(),
                'last_page' => $members->lastPage(),
                'from' => $members->firstMember(),
                'to' => $members->lastMember()
            ],
            'data' => $members
        ];
        return response()->json($response);
    }
    public function store(Request $request)
    {
        $this->validate($request, [
            'title' => 'required',
            'information' => 'required',
        ]);
        $create = Member::create($request->all());
        return response()->json($create);
    }
    public function update(Request $request, $id)
    {
        $this->validate($request, [
            'title' => 'required',
            'information' => 'required',
        ]);
        $edit = Member::find($id)->update($request->all());
        return response()->json($edit);
    }
    public function destroy($id)
    {
        Member::find($id)->delete();
        return response()->json(['done']);
    }
}

Step 4: Make Laravel view Blade File

resources/views/manage-vue.blade.php




	Simple Laravel 5 Vue JS Ajax CRUD(insert update delete) tutorial example with source code
	
	


	

Laravel Vue JS Member CRUD

Title Description Action
@{{ member.title }} @{{ member.information }}

Step 5: Make Vue JS File

public/js/member.js

//Simple Laravel 5 Vue JS Ajax CRUD(insert update delete) tutorial example with source code
Vue.http.headers.common['X-CSRF-TOKEN'] = $("#token").attr("value");
new Vue({
  el: '#manage-vue',
  data: {
    members: [],
    pagination: {
        total: 0, 
        per_page: 2,
        from: 1, 
        to: 0,
        current_page: 1
      },
    offset: 4,
    formErrors:{},
    livefrmErrUpdate:{},
    newMember : {'title':'','information':''},
    fillMember : {'title':'','information':'','id':''}
  },
  computed: {
        isActived: function () {
            return this.pagination.current_page;
        },
        pagesNumber: function () {
            if (!this.pagination.to) {
                return [];
            }
            var from = this.pagination.current_page - this.offset;
            if (from < 1) {
                from = 1;
            }
            var to = from + (this.offset * 2);
            if (to >= this.pagination.last_page) {
                to = this.pagination.last_page;
            }
            var pagesArray = [];
            while (from <= to) {
                pagesArray.push(from);
                from++;
            }
            return pagesArray;
        }
    },
  ready : function(){
  		this.getVueMembers(this.pagination.current_page);
  },
  methods : {
        getVueMembers: function(page){
          this.$http.get('/vuemembers?page='+page).then((response) => {
            this.$set('members', response.data.data.data);
            this.$set('pagination', response.data.pagination);
          });
        },
        createMember: function(){
		  var input = this.newMember;
		  this.$http.post('/vuemembers',input).then((response) => {
		    this.changePage(this.pagination.current_page);
			this.newMember = {'title':'','information':''};
			$("#create-member").modal('hide');
			toastr.success('Member Created Successfully.', 'Success Alert', {timeOut: 5000});
		  }, (response) => {
			this.formErrors = response.data;
	    });
	},
      deleteMember: function(member){
        this.$http.delete('/vuemembers/'+member.id).then((response) => {
            this.changePage(this.pagination.current_page);
            toastr.success('Member Deleted Successfully.', 'Success Alert', {timeOut: 5000});
        });
      },
      editMember: function(member){
          this.fillMember.title = member.title;
          this.fillMember.id = member.id;
          this.fillMember.information = member.information;
          $("#edit-member").modal('show');
      },
      updateMember: function(id){
        var input = this.fillMember;
        this.$http.put('/vuemembers/'+id,input).then((response) => {
            this.changePage(this.pagination.current_page);
            this.fillMember = {'title':'','information':'','id':''};
            $("#edit-member").modal('hide');
            toastr.success('Member Updated Successfully.', 'Success Alert', {timeOut: 5000});
          }, (response) => {
              this.livefrmErrUpdate = response.data;
          });
      },
      changePage: function (page) {
          this.pagination.current_page = page;
          this.getVueMembers(page);
      }
  }
});
Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Simple Laravel 5 Vue JS Ajax CRUD(insert update delete) tutorial example with source code.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Leave a Comment