1. store update destroy를 위한 route를 추가
routes/api.php 수정
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BookController;
...............................
Route::get('/books', [BookController::class, 'index']);
Route::get('/books/{book}', [BookController::class, 'show']);
Route::post('/books', [BookController::class, 'store']);
Route::put('/books/{book}', [BookController::class, 'update']);
Route::delete('/books/{book}', [BookController::class, 'destroy']);
2. controller에 store, update, destroy를 위한 function 추가
app/Http/Controllers/BookController.php
<?php
namespace App\Http\Controllers;
use App\Models\Book;
use Illuminate\Http\Request;
use App\Http\Resources\BookResource;
class BookController extends Controller
{
.....................
/**
* Store a newly created resource in storage.
*/
public function store(Request $request)
{
$validatedData = $request->validate([
'title' => 'required|string|max:10',
'author' => 'required|string|max:10',
'content' => 'required|string|max:20',
'pages' => 'required|integer',
]);
$validatedData['pages'] = intval($validatedData['pages']);
$book = Book::create($validatedData);
return new BookResource($book);
}
/**
* Update the specified resource in storage.
*/
public function update(Request $request, Book $book)
{
$validatedData = $request->validate([
'title' => 'required|string|max:10',
'author' => 'required|string|max:10',
'content' => 'required|string|max:20',
'pages' => 'required|integer',
]);
$validatedData['pages'] = intval($validatedData['pages']);
$book->update($validatedData);
return new BookResource($book);
}
/**
* Remove the specified resource from storage.
*/
public function destroy(Book $book)
{
$book->delete();
return response()->json(null, 204);
}
}
3. React project 에서 Laravel Rest api를 이용
Create.js
const createBook = async () => {
try {
const data = {
"title" : name,
"author" : author,
"content" : content,
"pages" : pages,
}
const result = await axios.post("http://localhost:8000/api/books", data)
navTo("/")
} catch ( err){
if (axios.isAxiosError(err)) {
console.log("Axisos Error ===> " , err)
setCreateResult(err.response.data)
setMessage(err.response.data.message)
} else {
console.log("Other Error", err)
}
}
}
Update.js
const updateBook = async () => {
try {
const data = {
"title" : name,
"author" : author,
"content" : content,
"pages" : pages,
}
const result = await axios.put(`http://localhost:8000/api/books/${id}`, data)
navTo("/")
} catch ( err){
if (axios.isAxiosError(err)) {
console.log("Axisos Error ===> " , err)
setUpdateResult(err.response.data)
setMessage(err.response.data.message)
} else {
console.log("Other Error", err)
}
}
}
delete 기능
const deleteBook = async (id) => {
try {
const result = await axios.delete(`http://localhost:8000/api/books/${id}`)
console.log(result.data)
window.location.reload();
} catch ( err){
if (axios.isAxiosError(err)) {
console.log("Axisos Error ===> " , err)
} else {
console.log("Other Error", err)
}
}
}
4. 결과 시험
(1) create page
(2) create result
(3) update
(4) update result
(5) delete result
모두 정상 작동한다
다음은 Token을 이용한 인증 시스템을 추가 해 보려고 한다