[Day 29] - React 前端串後端 - 查询订单

今天在测试的时候发生了一个笑话，
发查询订单的request到丰收款的api结果一直回"验证未通过: E0100 – 商店编号错误 "
可是看我的订单编号没错呀..检查了所有参数带的值也都符合规格
本来打算要写信给客服了，结果发现是我自己搞混，
要带的是ShopNo才对，我带成OrderNo
真的头昏了

在信用卡付款完成後，
永丰会用form post将查询订单用的token跟商店代号
传送到我们当初设定好的ReturnURL

不过有个问题是我用的是前後端分离的方式，
要怎麽让页面跳转到前端，同时後端收到token跟代号，再把查到的订单资料带给前端?

在前後端分离的情况下，接收参数是後端的工作

但是我不能直接让永丰post到我的後端，因为这样会没有前端画面的呈现

post到前端的话，因为前端只有画面，不会有後端带上来的资料
目前还没查到该如何前端接收参数再parse给後端的做法

只好先放弃付款後直接跳转到查询该笔订单的页面这个想法

单笔没办法，今天来实作查询范围内多笔订单好了

後端就先简单写，查询条件:我的商店7天内所有订单

@GetMapping("/query/all")
public String orderPayQueryAll(){
    OrderQueryReq orderQueryReq = new OrderQueryReq();
    orderQueryReq.setShopNo("NA0249_001");
    Calendar c = Calendar.getInstance();
    c.add(Calendar.DAY_OF_MONTH, -7);
    String timeStampe = new SimpleDateFormat("yyyyMMddHHmm").format(Calendar.getInstance().getTime());
    String timeStamps = new SimpleDateFormat("yyyyMMddHHmm").format(c.getTime());
    orderQueryReq.setOrderDateTimeS(timeStamps);
    orderQueryReq.setOrderDateTimeE(timeStampe);

    String jsonRes="";
    try {
        jsonRes=qpayHelper.qpayHelper(orderQueryReq, "OrderQuery");
    } catch (Exception e) {
        e.printStackTrace();
        System.err.println(e.toString());
    }
    return jsonRes;
}

前端就写个Component来用axios发request查询

  export const orderList = (amount) => {
    const token = getAuthToken();
    const config = {
      headers: { 'Content-Type': 'application/json','authorization': `Bearer ${token}`, },
      baseURL: 'http://localhost:8080',
    }
    return axios.create(config).get("/demo/api/v1/Qpay/query/all")
    .then((res) => res.data).catch((err)=>
        {return (err.response.status);});
  };

再简单写个带入资料的页面就完成了~

来实际走一次流程
登入

donate
出手阔绰

跳转到永丰付款页

授权中~跑满久的

结果竟然...真相令所有人都惊呆了

不知道为什麽前端页面不支援post

理清一下，React的这些页面都是javascrpit、css画出来，
而我们是透过localhost:3000这个url去取得我React写好的js、css这些东西组成的静态页面
而页面本身没有支不支援post、get的问题，问题出在这个localhost:3000不支援post
不过我一时之间还没查到这个npm start
带起来的服务到底是nginx还是什麽、要怎麽调整设定
这部分就先跳过