composer create-project --prefer-dist laravel/laravel Backend
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=backend
DB_USERNAME=root
DB_PASSWORD=
Vous pouvez le faire de deux manieres:
La maniere Lumpeul
php artisan make:controller create_idees_tables php artisan make:model ideesAlors y a une maniere Epsilon de faire la meme chose de facon plus efficaces😁😁😁 cette commande te permet de générer le model et le controller en meme temps
php artisan make:model idee -mc
public function up()
{
Schema::create('idees', function (Blueprint $table) {
$table->id();
$table->string('libelle');
$table->string('description');
$table->string('message');
$table->timestamps();
});
}php artisan migrate
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\idee;
class IdeeController extends Controller
{
public function index()
{
return idee::All();
}
}use App\Http\Controllers\IdeeController;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
Route::get('/idee', [IdeeController::class, 'index']);Tout d abord ajoutons des entrées dans notre base de données
Testons si les urls de notre Api marche >>> https://127.0.0.1:8000/api/idee
npx create-react-app EpsilonFront
cd EpsilonFront
npm startDe nombreux projets sur le web doivent s’interfacer avec une API REST à un certain stade de leur développement. Axios est un client HTTP léger basé sur le service $http et est similaire à l’API native JavaScript Fetch. Axios est basé sur Promise, ce qui vous permet de profiter des avantages d’async de JavaScript et await pour un code asynchrone plus lisible.
npm install axios
Ouvrez le ficher App.js
import './App.css';
import { useState, useEffect } from "react";
import axios from "axios";
function App() {
const [idees, setIdees,] = useState([])
useEffect(() => {
async function Ajouter() {
try {
const epsilon = await axios.get("https://127.0.0.1:8000/api/idee")
console.log(epsilon.data)
setIdees(epsilon.data)
} catch (error) {
console.log(error)
}
}
Ajouter()
}, [])
return (
<div className="App">
<h1>Je suis sur react afin de recuperer les données de mon API</h1>
{
idees.map((idee, i) => {
return (
<h4 key={i}>{idee.message}</h4>
)
})
}
</div>
);
}
export default App;
Ne serait t'il pas interessant de pouvoir ajouter des informations , modifier ou meme de supprimer des informations.
Pas de panique c est tres simple faut tout juste revenir sur ton application laravel ensuite specifier des routes et des methodes afin de permettre de permettre a l api de d accepter des requettes post,put,delete.
Ouvrez le model => idee.php
C'est pour spécifier les champs de notre base de donnée.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class idee extends Model
{
use HasFactory;
protected $fillable = [
"libelle",
"description",
"message",
];
}Rendez vous dans votre controlleur pour ajouter une methode post a votre controlleur.
La methode d'ajout
public function store(Request $request)
{
return idee::create($request->all());
}<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\idee;
class IdeeController extends Controller
{
public function index()
{
return idee::All();
}
public function store(Request $request)
{
return idee::create($request->all());
}
}
Regardons si les données sont bien enregistré dans la base .
