20240808

2024.08.07 - [PHP 일지/SNS 프로젝트] - 20240807

20240807

 

어제 덜 이쁜 Feed 인서트 폼까지 만들었다.

 

이제 데이터를 Insert 해보자

 

라우터에 

 

Route::middleware('auth')->group(function () {
    Route::post('/api/feed/store', [FeedController::class, 'store']);
});

 

middleware는 로그인한 사용자에 한해서 feed 작성을 시키기 위한 것

를 등록해 준다.

 

app.blade.php 파일에

 

meta 태그로 csrf_token을 넣어준다

 

<meta name="csrf-token" content="{{ csrf_token() }}">

 

 

그리고 FeedService js에서 

 

axios의 생성자에

 

constructor() {
    this.api = axios.create({
        baseURL: '/api', // 기본 API URL
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        },
    });
}

 

X-CSRF-TOKEN을 headrs에 추가해 주고

 

async createFeed(feedData) {
    try {
        const response = await this.api.post('/feed/store', feedData);
        return response.data;
    } catch (error) {
        console.log('Axios error:', error.response ? error.response.data : error.message);
        throw error; // 추가적으로 에러를 상위로 던질 수 있음
    }
}

 

피드를 만드는 함수를 만든다.

 

다음으로  store.jsx 에 와서

 

const handleSubmit = async (e) => {
    e.preventDefault();
    if(editorInstance){
        const content = editorInstance.getMarkdown();
        const updateFormData = {
            ...formData,
            content,
        };
        console.log(updateFormData);
        try{
            const createResponse = await FeedService.createFeed(updateFormData);
            //Inertia.post('/api/feed/store',updateFormData);
        } catch ( error ){
            console.log(error);
        }finally {

        }
    }

};

 

onSubmit에 걸려있는 handleSubmit에  toast-ui editor로 작성한 content에 대한 데이터를

 

const content에 editorInstance.getMarkdown()으로 변수화 한다.

 

그리고 FeedService.creadteFeed 에 값을 주입한다.

 

이제

 

데이터 처리할 API를 만들어보자 

 

라우트에서 선언된 컨트롤러  FeedController를 열어

 

store 함수를 만들고

 

인자 값으로 request $request를 선언한다.

 

validation 체크를 하기 위해 

 

php artisan make:request로 

 

FormStoreRequest를 만든다.

 

 

<?php

namespace App\Http\Requests\Admin\Feed;

use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Support\Str;
class FeedStoreRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     */
    public function authorize(): bool
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
     */
    public function rules(): array
    {
        return [
            //
            'type' => 'required|string',
//            'user_id' => 'required|integer',
            'title' => 'required|string',
            'slug' => 'required|string',
            'content' => 'required|string',
            'media_url' => 'nullable|string'
        ];
    }

    /**
     * Prepare the data for validation.
     */
//    protected function prepareForValidation(): void
//    {
//        $this->merge([
//            'slug' => Str::slug($this->slug),
//        ]);
//    }
}

 

대략적인 FormStoreRequest이다

 

rules에 return array를 보면 user_id 가 주석 되어 있는 것이 보이는데

 

Feed는 로그인 한 사용자만 작성한다는 로직이 이미 있고

 

라우트에서 middleware ( auth )를 거쳐야만 해당 request에 접근할 수 있기 때문에

user_id는 필수 값에서 제거했다.

 

P.S :  위의 미들웨어 AUTH를 생각 안 하고 REQUEST에 user_id를 required 시켜 논걸 어떻게 해결할까 하다   옛날 옛적처럼 클라이언트 사이드에서 전송하는 FORM에 USER_ID를 박아버리는 실수를 하지 말자.

 

public function store(FeedStoreRequest $request)
{

    $user = $request->user(); // Get the currently authenticated user
    $validatedData = $request->validated(); // Get validated data from the request

    // Add the user_id to the validated data
    $validatedData['user_id'] = $user->id;

    // Call the store method of FeedListService with the updated data
    $feed = $this->feedListService->store($validatedData);

    // Return the response with the created feed
    return response()->json($feed, 201);
}

 

FeedController에 request까지 적용된 store 함수다.

 

request validated()로 정해놓은 rules에 맞게 validation 검사를 치른 후에

 

$validataedData에 user_id를 키로 값을 넣어준다  ( $request->user()는 주석으로 설명된 것처럼 auth를 통과한 유저의 정보가 담겨있다 )

 

FeedListService는 FeedService를 상속받는다

 

<?php

namespace App\Services\Feed;

use App\Models\Feed;
use App\Services\Feed\FeedService;
use Illuminate\Support\Facades\DB;
class FeedListService extends FeedService
{
    // 서비스 로직을 여기에 작성합니다.

    public function getFilteredFeeds($criteria)
    {
        // 특정 기준에 따라 피드를 필터링합니다.
        return Feed::where('title', 'like', "%{$criteria}%")->get();
    }

    public function getLastFetchFeed()
    {
       # DB::enableQueryLog();
        $feed = Feed::where('type', 'news')->orderBy('updated_at', 'desc')->first();
       # dd(DB::getQueryLog());
       return $feed;
    }



}

 

<?php

namespace App\Services\Feed;


use App\Models\Feed;
class FeedService
{
    // 서비스 로직을 여기에 작성합니다.
    public function getFeeds()
    {
        return Feed::orderBy('updated_at','desc')->get();

    }

    public function getFeed($id)
    {
        return Feed::findOrFail($id);
    }

    public function store($request)
    {
        $feed = Feed::create($request);
        return $feed;
    }

}

 

store에서 담긴 feed 값이 controller에서 다시 store.jsx로 리턴 되고

const handleSubmit = async (e) => {
    e.preventDefault();
    if(editorInstance){
        const content = editorInstance.getMarkdown();
        const updateFormData = {
            ...formData,
            content,
        };
        try{
            const createResponse = await FeedService.createFeed(updateFormData);
            // Check if the response status is 201
            if (createResponse.status === 201) {
                // Handle success
               Inertia.visit('/Admin/Feed');
            } else {
                // Handle unexpected status codes
                console.log('Unexpected status code:', createResponse.status);
            }
        } catch ( error ){
            console.log(error);
        }finally {

        }
    }

};

 

요 handler로 json의 상태를 조회해 분기 처리 해준다.

 

 

 

깃 레포는 

 

https://github.com/jsh9587/new_dp/tree/master/new-dp

new_dp/new-dp at master · jsh9587/new_dp