이전에 이미지 정보를 DB에 넣는것까지는 확인했다.
이렇게 작업해놓으면 프론트에서 쓸수있을거라 생각했다.
하지만 프론트에서 작업하기 힘들다는것 //엄밀히 말하면 할수는있는데 힘들다는것
벡엔드가 도와줘야할것은 프론트에서 상품자료를 입력할때 이미지DB도 같이 나오게 해달라는것
따라서 어떻게 해야 이미지DB와 상품DB를 같이 보여줄수 잇을까? 생각했다.
먼저 FK를 설정했다. 프로젝트 처음 글에 썻던것처럼 FK설정을 했다.
hasmany, belongsTo를 쓰고 이미지를 넣을때 Product에 있는 유니크키값을 fk로 받아와서
같이 적었다. 이미지로 설명하자면
먼저 모델에 productNumber를 추가한다.
그다음 postman작성때
이런식으로 productNumber를 이미지를 업로드할때 같이 넣어서
이미지 DB에 같이 들어가게 했다.
product에 productnumber은 유니크값이지만
이미지db에 productnumber은 유니크값으로 설정이 아니라서 같은 상품에
이미지가 여러개 들어가게 했다. 가방 이면 가방안에 이미지는 여러개가 있는셈
여기서 끝이 아니다.
이제 중요한것
상품을 검색시 밑에 이미지db가 떠야한다.
문제가 나오면 문제해결 하는게 개발자다
열심히 구글링한 결과 include를 써서 해결했다.
이렇게 productDao.js 안에 검색했을때 include 를 넣으면
이젠 이렇게 ProductImageFile db안에 있는 filename, path가 나오게된다.
여기서 주의할것은 검색조건을 Query로 해야한다. 첫번쨰 빨간박스처럼
KEY값을 productNumber VALUE를 1 로 주면 1에 해당되는것을 불러오게된다.
여기서 더 추가해서 CategoryName도 검색조건에 추가해보았다.
이렇게하면 ex) 가방 검색햇을때 가방에 대한 모든게 db가 나오게되는 셈
productDao.js에서
이렇게 검색조건을 하나 추가했다.
그렇게하면
{
"count": 5,
"rows": [
{
"id": 13,
"productNumber": 8,
"categoryCode": "Bag",
"productName": "greenbag",
"productPrice": 15000,
"productStock": 30,
"productDesc": "dev",
"productDate": "2020-02-02T00:00:00.000Z",
"productHits": 1,
"createdAt": "2022-03-04T05:45:28.460Z",
"updatedAt": "2022-03-04T05:45:28.460Z",
"deletedAt": null,
"ProductImageFiles": [
{
"filename": "trees_frost_snow_winter-Nature_HD_Wallpapers_1366x768-1646372828820.jpg",
"path": "upload\trees_frost_snow_winter-Nature_HD_Wallpapers_1366x768-1646372828820.jpg"
},
{
"filename": "trees_frost_snow_winter-Nature_HD_Wallpapers_1366x768-1646372829484.jpg",
"path": "upload\trees_frost_snow_winter-Nature_HD_Wallpapers_1366x768-1646372829484.jpg"
}
]
},
{
"id": 11,
"productNumber": 7,
"categoryCode": "Bag",
"productName": "yellowbag",
"productPrice": 15000,
"productStock": 30,
"productDesc": "dev",
"productDate": "2020-02-02T00:00:00.000Z",
"productHits": 1,
"createdAt": "2022-03-04T05:45:19.343Z",
"updatedAt": "2022-03-04T05:45:19.343Z",
"deletedAt": null,
"ProductImageFiles": [
{
"filename": "Blue-Wave-1920x1200-wallpapershd.org-1646372822443.jpg",
"path": "upload\Blue-Wave-1920x1200-wallpapershd.org-1646372822443.jpg"
}
]
},
{
"id": 10,
"productNumber": 6,
"categoryCode": "Bag",
"productName": "blackbag",
"productPrice": 15000,
"productStock": 30,
"productDesc": "dev",
"productDate": "2020-02-02T00:00:00.000Z",
"productHits": 1,
"createdAt": "2022-03-04T05:45:10.623Z",
"updatedAt": "2022-03-04T05:45:10.623Z",
"deletedAt": null,
"ProductImageFiles": [
{
"filename": "trees_frost_snow_winter-Nature_HD_Wallpapers_1366x768-1646372815281.jpg",
"path": "upload\trees_frost_snow_winter-Nature_HD_Wallpapers_1366x768-1646372815281.jpg"
},
{
"filename": "trees_frost_snow_winter-Nature_HD_Wallpapers_1366x768-1646372816449.jpg",
"path": "upload\trees_frost_snow_winter-Nature_HD_Wallpapers_1366x768-1646372816449.jpg"
}
]
}
]
}
이런식으로 Bag에 대한 모든 자료(
검은가방
노랑가방
초록가방
)
들과 각각 가방들에 대한 이미지까지 딸려 오게되는것이다.
나이스 샤샤샤
이미지 작업 끝!
