프론트에서 백단으로 넘기는 Params & Query & Body 차이점

https://medium.com/@bouncewind0105/request-param-query-body-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-2e7e4fddd8b9

Request param,query, body 의 차이점

 

 

Front 에서 데이터 다르게 받아오는방법 추가

const test = await this.$axios.get("/guest-shop/main-category");
console.log(test.data.data ,' test.data.data')// [{}, {}, {}...]

const tabs = (await this.$axios.get("/guest-shop/main-category")).data.data;
console.log(tabs,'tabs????') // [{}, {}, {}...]

 

 

 

req.params 으로 받는 경우(/1234)

const res = await this.$axios.get(`/myPage/getAvailableListOfCoupons/${this.user_data.member_id}`);

router.get('/getAvailableListOfCoupons/:member_id', myPage.getAvailableListOfCoupons)
const { member_id } = req.params


https://localhost:30001/api/myPage/getAvailableListOfCoupons/12345 
 -> req.params 로 12345 를 담는다.

 

req.query 로 받는경우(/?id=1234)

 

예제1)

const res = await this.$axios.get('/myPage/getAllListOfCustomerInformation/', {
	params : { 
    	cellphone : this.userNumber 
    } 
 })
 
     
router.get('/getAllListOfCustomerInformation', myPage.getAllListOfCustomerInformation)
const {cellphone} = req.query


https://localhost:30001/api/myPage/getAllListOfCustomerInformation?cellphone=010-1234-1234
 -> req.query 로 010-1234-1234 를 담는다.

 

예제2) http://localhost:3000/api/auth/find/aaa/010-1111-2222 

// http://localhost:3000/api/auth/find/aaa/010-1111-2222 
router.get('/find/:name/:phone', auth.findByName)//아이디(email) 찾기
export const findByName = async (req,res)=>{
    const {name,phone} = req.params;
    console.log(name, phone, 'findByName')
}

 

 

 

 

req.body 로 받는경우

XML, JSON, Multi Form 등의 데이터를 담는다. 당연히 주소에선 확인할 수 없다.

this.$axios.post('/admin/updateCustomerInformation', {
  data: {
    shop_no: 1,
    request: {
      email: this.user_data.email,
      cellphone: this.convertPhone(String(this.user_data.cellphone))
    }
  },
  member_id: this.user_data.member_id
})

router.post('/updateCustomerInformation', admin.updateCustomerInformation) // 회원정보 수정

const { data, member_id } = req.body

 this.$axios.delete('/admin/deleteCustomerMemo', {
  data: {
    member_id: this.user_data.member_id,
    memo_no
  }
})

this.$axios.put('/admin/updatePoint', {
  point: this.total_data.point.amount,
  total_points: this.user_data.total_points,
  member_id: this.user_data.member_id,
  content: this.cal_point_length
})

this.$tokenAxios.post("/order/address", {
    targetIdxs: targetIdxs,
    address: {
        ...this.addressForm
    }
})