15天完成民猫电商毕设——支付&消息（11th day）

1.支付

在支付成功后会跳转到returnUrl映射的接口，我们在这个接口里面对商品和订单的状态进行更新，最后返回到系统主页
同步返回地址的映射接口：

 	@CacheEvict(value = "aboutProducts", allEntries = true)
    @RequestMapping("/return")
    public void returnUrlMethod(HttpServletRequest request, HttpServletResponse response) throws AlipayApiException, IOException {
    
    
        // 获取支付宝GET过来反馈信息
        Map<String, String> params = new HashMap<>();
        Map<String, String[]> requestParams = request.getParameterMap();
        for (Iterator<String> iter = requestParams.keySet().iterator(); iter.hasNext(); ) {
    
    
            String name = (String) iter.next();
            String[] values = (String[]) requestParams.get(name);
            String valueStr = "";
            for (int i = 0; i < values.length; i++) {
    
    
                valueStr = (i == values.length - 1) ? valueStr + values[i] : valueStr + values[i] + ",";
            }
            // 乱码解决，这段代码在出现乱码时使用
            valueStr = new String(valueStr.getBytes("ISO-8859-1"), "utf-8");
            params.put(name, valueStr);
        }
        //验证签名（支付宝公钥）
        boolean signVerified = AlipaySignature.rsaCheckV1(params, publicKey, "UTF-8", "RSA2"); // 调用SDK验证签名
        //验证签名通过
        if (signVerified) {
    
    
            // 商户订单号
            String out_trade_no = new String(request.getParameter("out_trade_no").getBytes("ISO-8859-1"), "UTF-8");
            // 支付宝交易流水号
            String trade_no = new String(request.getParameter("trade_no").getBytes("ISO-8859-1"), "UTF-8");
            // 付款金额
            float money = Float.parseFloat(new String(request.getParameter("total_amount").getBytes("ISO-8859-1"), "UTF-8"));
            //在这里编写自己的业务代码（对数据库的操作）
            oService.updateStatusByNo(out_trade_no, 2);
            pService.updateStatusByNo(out_trade_no, 4);
            //跳转到首页
            response.sendRedirect("http://localhost:8080/home");
        }
    }

2.给商品留言

需求分析：
在这里插入图片描述
点击给TA留言后，弹出一个留言输入框

输入内容后点击发送，即可给该商品的发布者发送消息。
后端设计 ：这个功能无非就是在消息表中插入一条记录，简单的很！分析数据库的消息表

接口设计：
在这里插入图片描述
接口测试：

前端设计： 前端需要准备productId、senderId、recipientId、content四个参数给接口，其中前三者不需要用户输入，而消息内容需要用户输入后确定。
messageIt方法是在点击给TA留言后，执行的方法，该方法首先会弹出一个消息输入框，然后将productId、senderId、recipientId三个参数放入data中的message对象中，message对象中的content与消息输入框的值做双向绑定。
点击发送按钮后，执行sendMsg方法，首先由axios函数将message对象作为请求体发送到后端，在得到成功的响应后，弹出成功提示并清空message对象。
在这里插入图片描述
前后端对接这里有一个坑，其实也不是坑，只是我基础不牢，犯的错，下面总结一下前后端对接的原理和过程

3.前后端对接过程详解

我们知道一个方法有方法名和方法体，当然还有方法体和返回参数，不过我们在使用的时候，可以先只需要关注前两者，我们要执行一个方法，需要使用方法名找到它，然后向他传参。
当然1中调用一个方法是在后端中可以这样做，但是如果我前端也想调用一个后端写的方法，这时候怎么办呢？
显然，如果后端不做出改变的话，前端是不可能就这样使用后端的方法的，我们对后端进行改造。
在Java中，方法通常在类中，我们要找到方法，要先找到类。我们知道，前端是通过URL进行资源定位的，于是我们将后端中的类和类中的方法映射到一个URL上去，这样前端访问该路径时，就能找到后端的类中的方法了。在SpringBoot中可以通过@RequestMapping将类或者方法映射到一个URL上
前端现在通过URL就可以找到一个类中的某个方法，现在我们只要给这个方法传递参数，就可以执行它了，怎么做呢？
我们知道，前端可以通过GET和POST传参，前者直接写到请求路径上，后者写到请求体中。
在前端，我们使用了axios来进行异步请求，axios请求的配置对象有是三个重要的属性，请求地址，请求参数，请求方式
请求地址不用多说，注意设置基址。参数形式与请求方式要对应，params对应GET；data对应POST。
好，现在后端能够看到前端传了一些参数过来，通常前端是以JSON格式组织这些参数的，现在的问题是前端的参数列表和后端的方法中的参数列表怎么对应起来，参数名字相同的话，可以直接匹配接收，这是很好理解的。
要是前后端参数名不相同，但是它们事实上是对应的呢？比如前端传userName='hao’,而后端的参数为String name，我们需要name能够对应userName赋上值，可以使用 @RequestParam(“userName”) String name 进行手动映射，注意前后端参数名相同可以自动映射。
要是前端传递的参数太多，将其打包成了一个对象，我们后端应该如何接收呢？同样的，我们也使用后端的对象来接收，不过要保证对象名一致且对象中的属性名一致，才能正确匹配接收，且在前面加上 @RequestBody，它就会帮助我们自动完成对象的同名匹配映射。
@RequestBody对应POST请求，@RequestParam对应GET请求

4.查看收到的商品留言

分析：根据用户id在消息表中查询所有与用户id相同的recipientId
接口设计：
在这里插入图片描述
接口测试：

页面拿到数据，开始做数据渲染。

简单用表格渲染了一下：

发现不太能满足我的需求，在ElementUI中找了一下，发现这个效果还可以

在这里插入图片描述
在进行渲染之前，我们对发送者、商品名、状态发送时间进行解析和格式化，提高可读性。

其中时间和状态可以直接格式化，而发送者和商品名需要请求后台进行解析。

我们不请求后台来解析了，我们在获得消息列表时，就进行查询解析进行返回。修改获取消息列表的接口。

显然单表查询已经不能满足需求了，我们需要做一个三表查询，使用万能map封装返回结果。

累了，明天做吧！