Today, We want to share with you Laravel Vue JS CRUD Example Tutorial From Scratch.In this post we will show you Vue.js Laravel CRUD Example Tutorial From Scratch, hear for Creating a simple CRUD application with Laravel 5 and Vue.js we will give you demo and example for implement.In this post, we will learn about Laravel 5.7 and Vue JS CRUD with Pagination example and demo with an example.
Laravel Vue JS CRUD Example Tutorial From Scratch
There are the Following The simple About Laravel Vue JS CRUD Example Tutorial From Scratch Full Information With Example and source code.
As I will cover this Post with live Working example to develop Laravel 5.5 – VueJS 2.0 CRUD Operations, so the some major files and We Need Server Requirements for this example is following below.
- Apache/Nginx
- CMD To install Composer
- Mbstring PHP Extension
- Databse for MySQl
- simple Teminal NodeJs with NPM
- OpenSSL PHP Extension
- PDO PHP Extension
- Latest Version Of the PHP >= 7.0.0
- Tokenizer PHP Extension
- XML PHP Extension
Step : 1 Make Laravel Latest Version Install Project:
Install Laravel Project
composer create-project --prefer-dist laravel/laravel Atmiya25
Step : 2 Settings .env
reate laravel project open Set .env file and setting your database connection setting
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=Atmiya25 DB_USERNAME=root DB_PASSWORD=
Step : 3 Build Mobile Table Migration
run following CMD To command and build migration file
php artisan make:migration create_mobile_table --create=mobiles
migration/database
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateMobileTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('mobiles', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('mobileinformation');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('mobiles');
}
}
and then Run this command
php artisan migrate
Step : 4 Make Mobile Table Laravel Model And Controller:
Make Mobile table model and controller build this command
php artisan make:model Mobile -r
app/Mobile.php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Mobile extends Model
{
protected $fillable = [
'title',
'mobileinformation',
];
}
app/Http/Controllers/MobileController.php
namespace App\Http\Controllers;
use App\Mobile;
use Illuminate\Http\Request;
class MobileController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$mobiles = Mobile::get();
return response()->json([
'mobiles' => $mobiles,
], 200);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$this->validate($request, [
'title' => 'required|max:255',
'mobileinformation' => 'required',
]);
$mobile = Mobile::create([
'title' => request('title'),
'mobileinformation' => request('mobileinformation'),
]);
return response()->json([
'mobile' => $mobile,
'message' => 'Success'
], 200);
}
/**
* Display the specified resource.
*
* @param \App\Mobile $mobile
* @return \Illuminate\Http\Response
*/
public function show(Mobile $mobile)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Mobile $mobile
* @return \Illuminate\Http\Response
*/
public function edit(Mobile $mobile)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Mobile $mobile
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Mobile $mobile)
{
$this->validate($request, [
'title' => 'required|max:255',
'mobileinformation' => 'required',
]);
$mobile->title = request('title');
$mobile->mobileinformation = request('mobileinformation');
$mobile->save();
return response()->json([
'message' => 'Mobile updated successfully!'
], 200);
}
/**
* Remove the specified resource from storage.
*
* @param \App\Mobile $mobile
* @return \Illuminate\Http\Response
*/
public function destroy(Mobile $mobile)
{
//
}
}
Step : 5 Make Laravel Mobile Route:
resource Route (web.php)
Route::resource('/mobiles', 'MobileController');
Step : 6 Simple Register Vue Component:
/resources/assets/js/app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
Vue.component('mobiles', require('./components/Mobile.vue'));
const app = new Vue({
el: '#app'
});
/resources/views/home.blade.php
@extends('layouts.app')
@section('content')
@endsection
Step : 7 Make Simple VueJS Component:
component file in /resources/assets/js/components/Mobile.vue
My Mobile
Laravel Vue JS CRUD Example Tutorial From Scratch
Laravel Vue JS CRUD Example Tutorial From Scratch Step By step
My Mobile
0">
No.
Title
Information
Action
{{ index + 1 }}
{{ mobiles.title }}
{{ mobiles.mobileinformation }}
export default {
data(){
return {
mobiles: {
title: '',
mobileinformation: ''
},
errors: [],
mobiles: [],
update_mobile: {}
}
},
mounted()
{
this.readMobiles();
},
methods: {
initAddMobile()
{
this.errors = [];
$("#add_mobile_model").modal("show");
},
createMobile()
{
axios.mobile('/mobiles', {
title: this.mobiles.title,
mobileinformation: this.mobiles.mobileinformation,
})
.then(response => {
this.reset();
$("#add_mobile_model").modal("hide");
})
.catch(error => {
this.errors = [];
if (error.response.data.errors.title) {
this.errors.push(error.response.data.errors.title[0]);
}
if (error.response.data.errors.mobileinformation) {
this.errors.push(error.response.data.errors.mobileinformation[0]);
}
});
},
reset()
{
this.mobiles.title = '';
this.mobiles.mobileinformation = '';
},
readMobiles()
{
axios.get('/mobiles')
.then(response => {
this.mobiles = response.data.mobiles;
});
},
initUpdate(index)
{
this.errors = [];
$("#update_mobile_model").modal("show");
this.update_mobile = this.mobiles[index];
},
updateMobile()
{
axios.patch('/mobiles/' + this.update_mobile.id, {
title: this.update_mobile.title,
mobileinformation: this.update_mobile.mobileinformation,
})
.then(response => {
$("#update_mobile_model").modal("hide");
})
.catch(error => {
this.errors = [];
if (error.response.data.errors.title) {
this.errors.push(error.response.data.errors.title[0]);
}
if (error.response.data.errors.mobileinformation) {
this.errors.push(error.response.data.errors.mobileinformation[0]);
}
});
},
deleteMobile(index)
{
let conf = confirm("Do you ready want to delete this mobile?");
if (conf === true) {
axios.delete('/mobiles/' + this.mobiles[index].id)
.then(response => {
this.mobiles.splice(index, 1);
})
.catch(error => {
});
}
}
}
}
Step : 8 Run Laravel 5.5 – VueJS 2.0 CRUD Operations:
Simple Laravel 5.5 – VueJS 2.0 CRUD Operations Project Run
//Install NPM npm install //run Project npm run dev php artisan serve //Run URL in Browsers http://localhost:8000/
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 Laravel Vue JS CRUD Example Tutorial From Scratch.
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.