Vamos a realizar u CRUD sencillo usando Vue.js y Laravel 8. Lo vamos a realizar sobre el Modelo Product que crearemos para nuestra aplicación de Laravel también crearemos con artisan el controlador del Modelo Product. Tambien doy por su puesto quer ya tienes instaladas las dependencias de Vue en el proyecto, si no puedes mirar esta otra entrada donde se explica como instalar Vue.js, Instalando Vue.js en Laravel 7 y 8.
Lo que vamos a crear es una mini API la cual consumiremos internamente mediante Vue.js, Vamos a crear el UserController.php, ejecutamos en la consola de comandos php artisan make:controller ProductController y el comando php artisan make:model Product -m se nos creará el controlador y un modelo de producto y su archivo de migración.
En la carpeta de database/migrations encontraremos un archivo, normalmente el ultimo pues Laravel le pone la fecha a los archivos de las migraciones, 2021_06_09_125716_create_products_table.php, en mi caso el cual dejaré con la siguiente estructura:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateProductsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('reference');
$table->string('category');
$table->integer('cost')->unsigned();
$table->integer('quantity')->unsigned();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('products');
}
}
el modelo, Product.php en la carpeta app/Http/Models
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasFactory;
protected $fillable = ['reference', 'category','cost', 'quantity'];
}
y el controlador el cual ya he codificado usando el ORM Eloquent de Laravel para realizar el CRUD.
<?php
namespace App\Http\Controllers;
use App\Models\Product;
use App\Models\Provinces;
use Illuminate\Http\Request;
class ProductController extends Controller
{
protected $table = 'pruducts';
public function all(Request $request)
{
return Product::all();
}
public function store(Request $request){
$product = new Product();
$product->reference = $request->reference;
$product->category = $request->category;
$product->cost = $request->cost;
$product->quantity = $request->quantity;
$product->save();
if($product)
{
return $product;
}
return false;
}
public function update(Request $request){
$product = Product::findOrFail($request->product_id);
$product->reference = $request->reference;
$product->category = $request->category;
$product->cost = $request->cost;
$product->quantity = $request->quantity;
$product->save();
if($product)
{
return $product;
}
return false;
}
public function show(Request $request ,Product $product)
{
$product = Product::findOrFail($request->product_id);
if($product)
{
return $product;
}
return false;
}
public function delete(Request $request)
{
$product = Product::findorfail($request->product_id);
$product->delete();
if($product)
{
return $product;
}
return false;
}
}
Hasta aquí la parte del backend de nuestra aplicación, en el proximo post vendrá la parte de frontend, donde con Vue.js crearemos los componentes necesarios para poder interactuar con la mini API.