订单详情前后端实现

水深无声 2021-07-24 12:10 545阅读 0赞

# 一 后端接口 #

根据订单id获取订单

## 1 控制器 ##

必须是自己的订单才能查看

/**
    * 功能描述：获取订单详情
    *
    * @param orderId 订单Id
    * @param request http请求
    * @return R 返回给前端的数据
    * @author cakin
    * @date 2021/1/3
    */
    @ApiOperation("获取订单")
    @GetMapping("auth/get/{orderId}")
    public R get(@PathVariable String orderId, HttpServletRequest request) {
        JwtInfo jwtInfo = JwtUtils.getMemberIdByJwtToken(request);
        Order order = orderService.getByOrderId(orderId, jwtInfo.getId());
        return R.ok().data("item", order);
    }

## 2 Service ##

接口

/**
    * 功能描述：获取订单详情
    *
    * @param orderId 订单Id
    * @param memberId 会员id
    * @return Order 订单详情
    * @author cakin
    * @date 2021/1/3
    */
    Order getByOrderId(String orderId, String memberId);

实现

/**
    * 功能描述：获取订单详情
    *
    * @param orderId  订单Id
    * @param memberId 会员id
    * @return Order 订单详情
    * @author cakin
    * @date 2021/1/3
    */
    @Override
    public Order getByOrderId(String orderId, String memberId) {
        QueryWrapper<Order> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("id", orderId).eq("member_id", memberId);
        return baseMapper.selectOne(queryWrapper);
    }

# 二 前端实现 #

## 1 api ##

getById(orderId) {
        return request({
          baseURL: 'http://localhost:8170',
          url: `/api/trade/order/auth/get/${orderId}`,
          method: 'get'
        })
      },

## 2 订单页面 ##

created() {
        orderApi.getById(this.$route.params.id).then(response => {
          this.order = response.data.item
        })
      }

# 三 测试 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/ac71ccb0b317468a849ac0f24abb8cb4.png