PATCH 요청 링크를 사용하여 VueJS에서 MongoDB 제품 필드 편집

Question

간단한 질문일 수도 있지만 어떤 이유로인지 알 수 없습니다 :(. MongoDB 데이터베이스에 다양한 제품을 추가하기 위한 양식이 포함된 MongoDB, NestJS 및 VueJS를 사용하여 전체 스택 애플리케이션을 만들고 있습니다.

지금 직면한 문제는 다음 논리를 사용하여 데이터베이스에 존재하는 모든 제품을 편집할 수 있기를 원한다는 것입니다. 편집 버튼 클릭 -> 팝업 창에 업데이트 정보 입력 -> 업데이트 버튼 클릭

예:

지금 직면한 문제는 VueJS 애플리케이션에서 편집하려는 특정 제품만 선택할 수 없다는 것입니다.

더 정확하게 말하면 다음과 같이 ID를 얻을 수 있는 방법이 필요한 것 같습니다.

으아아아

편집 기능이 작동합니다. 대신 ${this.produsModificat.id}

http://localhost:3000/produse/61a51cecdfb9ea1bd939587b를 사용했는데 제대로 작동했습니다.

그래서 제가 하고 싶은 것은 "수정" 버튼을 클릭하면 자동으로 ID를 가져오는 것입니다.

MongoDB에서 생성된 고유 ID로 각 제품을 선택하려고 하는데(예를 들어 아래 이미지 참조) 이를 수행할 방법을 찾을 수 없어서 미치게 됩니다. :(.

누군가 이를 달성하는 방법에 대해 올바른 방향을 알려줄 수 있나요?

아래에서 프론트엔드 파일의 PATCH 요청에 대해 구현한 로직을 찾을 수 있습니다

파일 이름: Table.vue

axios.patch(`http://localhost:3000/produse/${this.produsModificat.id}`)

Answer 1

귀하의 문제에는 두 가지 측면이 있는 것 같습니다. 첫 번째는 MongoDB에서 고유 ID를 얻는 방법과 프런트엔드에서 패치 요청의 고유 ID를 추적하는 방법입니다.

1부에서는 사용 중인 제품에 대한 설명서에서 getter 및 setter(또는 한정자와 접근자)를 살펴보세요. 응답 개체(테이블 레코드에 대한 기본 가져오기 요청의 데이터 컬렉션)에서 ID 속성을 수정하는 방법을 찾거나 고유한 속성을 정의하고 원하는 ID의 문자열 속성을 가져옵니다. 자신이 제어하는 ​​제품을 정의할 때 각 제품 스키마에 고유한 product_id를 정의할 수도 있습니다. 그런 다음 해당 사용자 정의 고유 속성을 반환하고 이를 사용하여 사용자가 편집하려는 항목을 추적하고 찾습니다.

모든 것이 포함되어 있고 프런트 엔드에 대한 몇 가지 제안이 필요하며 각 프로젝트를 추적할 수 있는 고유 ID가 있는 경우 한 번의 클릭으로 편집 버튼을 여는 모달에 대한 하위 구성 요소를 만듭니다. 이 구성 요소는 제품 배열을 필터링하여 관련 제품 개체를 받습니다.

모달 구성요소에는 관련 제품을 편집하는 모든 로직이 있습니다. 백엔드에서 라우팅 모델 바인딩을 허용하는 경우 백엔드 프레임워크에서 설정한 기본 ID를 사용하지 않는 경우 바인딩 키를 고유 ID로 업데이트하세요.

"active_record" 또는 사용자가 현재 보고 있거나 작업 중인 항목을 저장할 수 있는 방법은 여러 가지가 있습니다. 소품을 통해 해당 ID를 모달 구성 요소에 전달하거나 Table.vue의 모든 비즈니스 논리를 유지하고 모달의 생성된 이벤트를 통해 변경 사항을 전달하고 Table.vue가 백엔드와의 통신을 처리하도록 할 수 있습니다. Table.vue 및 ProductEditModal.vue 중 하나 또는 둘 다에서 활성 항목의 상태를 추적할 수 있습니다.

수정 버튼에 고유한 제품 ID가 필요하다는 점을 지적하려면 제품 ID를 편집 버튼의 속성으로 제공하세요.

v-for를 사용하여 원하는 방식으로 테이블 행을 렌더링하고 편집 버튼을 정의할 수 있습니다. item.id는 원하는 것이거나 활성 항목을 추적하는 다른 방법이 될 수 있습니다.

으아아아

그런 다음 a) 모달이 문제의 항목을 수신하고 axios 논리를 보유하는 EditButton 구성 요소 내부에 모달을 두거나 b) Table.vue의 메서드를 사용하여 모달을 열고 openModal 메서드를 통해 활성 로깅을 제공합니다. . 평판이 좋은 많은 개발자는 실제로 편집 버튼 자체에 모달 로직을 배치하여 편집 버튼이 편집 모드를 "소유"합니다. 또는 편집 버튼을 사용하여 모달이 열리도록 트리거하고 필요한 모든 것을 간단히 전달하세요.