In this tutorial, we are going to create a simple crud application using Vue js and Laravel.We going to use Vue.js 2.x for frontend and Laravel 5.5 for creating our backend web services.
Follow below steps to create Crud Application in Laravel 5.5 and Vue Js.

Installing and configuring Laravel 5.5

Installing Laravel 5.5

If you have not installed Laravel on your server, then run following commands to install and configure Laravel 5.5 on your server
  composer create-project --prefer-dist laravel/laravel vuelaraveldemo

Configuring file permissions

Once installation of Laravel framework is complete successfully then you need to provide read-write permission to below folders
  • storage/
  • bootstrap/cache
Run the following command to provide read-write permission
sudo chmod -R 777 storage
sudo chmod -R 777 bootstrap/cache

Configuring database connection

In Laravel you can configure your database connection by editing following fields in your .env file. .env file is situated in Laravel root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your database name
DB_USERNAME=your mysql username
DB_PASSWORD=your mysql password

Creating Our tables and Models

In this step we are going to create migrations for our table, then model for our Laravel Crud Application

Creating Table Migrations

Open your command line interface and type the following command to generate table migration for our crud app
php artisan make:migration create_posts_table
Once above command is executed successfully a new file named something like 2017_09_23_180359_create_posts_table.php is created in your database/migrations directory. Open that file and put following code in it.
&lt?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->text('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

After saving above file run below command to migrate your tables.This will create a new table in your database named posts.
php artisan migrate
Posts-table-structure-mysql

Creating Model

In order to do queries with the database using Eloquent in Laravel, we need to create a Model. Let’s create our Posts Model by running below command on our terminal.
php artisan make:model Post
running above command will create a new file name Post.php in our app directory. Open that file and add following code in that.
&lt?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = ['name','description'];
}

Creating controllers and register it in Routes for API’s in Laravel

Generating Controller

In Laravel, you can generate your controller by running below command on your terminal
php artisan make:controller ApisController
Now open your app/Http/Controller/ApisController.php add following code in it
<php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Post;

class ApisController extends Controller
{
     
  
 /**
     * Display our Vue js landing Page.
     *
     * @return \Illuminate\Http\Response
    */
    public function home()
    {
          return view('vueApp');
    }
  
  
 /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
    */
    public function index()
    {
      return Post::orderBy('id','DESC')->get();
    }
 
 

 /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
  
  
        $this->validate($request, [
            'name' => 'required',
            'description' => 'required',
        ]);

        $create = Post::create($request->all());

        return response()->json(['status'=>'success','msg'=>'Post created successfully']);
  
    }
 
 /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
  return Post::find($id);
    }
 
 /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
  return Post::find($id);
    }

 /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $this->validate($request, [
            'name' => 'required',
            'description' => 'required',
        ]);

        $post = Post::find($id);
  if($post->count()){
    $post->update($request->all());
    return response()->json(['status'=>'success','msg'=>'Post updated successfully.']);
  }else{
    return response()->json(['status'=>'error','msg'=>'Error in updating Post']);
  }
     
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $post= Post::find($id);
  if($post->count()){
   $post->delete();
    return response()->json(['status'=>'success','msg'=>'Post deleted successfully']);
  }else{
    return response()->json(['status'=>'error','msg'=>'Error in deleting Post']);
  }
    }
}



Read Complete article from https://www.onlineinterviewquestions.com/laravel-5-crud-application-vue-js/

Comments

Popular posts from this blog

How database migration works in Laravel Framework

Laravel CMS and their features