Laravel8.0(Breeze) + Vue.js 3 (Composition API) CRUD #1

라라벨과 Vue를 사용하여 CRUD틀 잡기

아래 사이트를 참고 하였으며, 기본 관리자틀 제작을 위해 기록 예정임

생략된 내용이 많으므로, 참고사이트 확인하여 진행해야함.

 

https://laraveldaily.com/laravel-8-vue-3-crud-composition-api/

Laravel 8 + Vue.js 3 CRUD with Composition API - Laravel Daily

 

 

Laravel 및 Laravel Breeze 설치

Laravel 8.0 버전, 회원 가입기능 Breeze 설치하여 진행함

composer create-project --prefer-dist laravel/laravel project
cd project
// env 파일 DB접속 정보 수정
composer install
php artisan migrate
composer require laravel/breeze
php artisan breeze:install
npm install && npm run dev

 

 

모델 및 API CRUD 생성

모델 생성

php artisan make:model Company -m

마이그레이션 수정

class CreateCompaniesTable extends Migration
{
    public function up()
    {
        Schema::create('companies', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email');
            $table->string('address')->nullable();
            $table->string('website')->nullable();
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('companies');
    }
}

마이그레이션 실행

php artisan migrate

모델 수정

class Company extends Model
{
    use HasFactory;

    protected $fillable = ['name', 'email', 'address', 'website'];
}

컨트롤러 생성

(API로 생성하여 json 형태로 리소스를 받음.)

https://laravel.com/docs/8.x/eloquent-resources

php artisan make:controller Api/CompanyController --resource --api --model=Company

리소스 생성 (데이터를 받을때 이 클래스를 이용하여 받아서, json형태로 저장. ? )

php artisan make:resource CompanyResource

리소스 파일 확인

app/Http/Resources/CompanyResource.php

class CompanyResource extends JsonResource
{
    public function toArray($request)
    {
        return parent::toArray($request);
    }
}

리퀘스트 클래스 생성 (등록, 수정시 유효성 체크 위함)

php artisan make:request CompanyRequest

app/Http/Requests/CompanyRequest.php

class CompanyRequest extends FormRequest
{
    public function authorize()
    {
        return true;
    }

    public function rules()
    {
        return [
            'name' => ['required', 'string'],
            'email' => ['required', 'email'],
            'address' => ['nullable', 'string'],
            'website' => ['nullable', 'url'],
        ];
    }
}

API 리소스 및 리퀘스트 클래스 사용하여, 컨트롤러에 CRUD매서드 생성

app/Http/Controllers/API/CompanyController.php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Http\Requests\CompanyRequest;
use App\Http\Resources\CompanyResource;
use App\Models\Company;

class CompanyController extends Controller
{
    public function index()
    {
        return CompanyResource::collection(Company::all());
    }

    public function store(CompanyRequest $request)
    {
        $company = Company::create($request->validated());

        return new CompanyResource($company);
    }

    public function show(Company $company)
    {
        return new CompanyResource($company);
    }

    public function update(CompanyRequest $request, Company $company)
    {
        $company->update($request->validated());

        return new CompanyResource($company);
    }

    public function destroy(Company $company)
    {
        $company->delete();

        return response()->noContent();
    }
}

api route 에 컨트롤러 추가

route/api.php

use App\Http\Controllers\Api\CompanyController;

// ...

Route::apiResource('companies', CompanyController::class);