(自用)Java学习-5.21(支付宝沙箱支付、Vue总结)

支付宝回调与Vue框架学习总结

---

一、支付宝回调参数处理

1. 回调流程优化

   • 获取交易状态：String tradeStatus = request.getParameter("trade_status")

   • 验证交易成功：if ("TRADE_SUCCESS".equals(tradeStatus))

   • 参数收集与验签：

     Map<String, String> map = new HashMap<>();
     Map<String, String[]> parameterMap = request.getParameterMap();
     for (String key : parameterMap.keySet()) {map.put(key, request.getParameter(key));
     }
     // 支付宝验签
     boolean valid = AlipaySignature.rsaCheckV1(map, alipayTemplate.getAlipayPublicKey(),alipayTemplate.getCharset(),alipayTemplate.getSignType()
     );

2. 关键参数提取

   if (valid) {System.out.println("订单号: " + map.get("out_trade_no"));System.out.println("金额: " + map.get("total_amount"));// 获取用户ID（从subject中解析）int uid = Integer.parseInt(map.get("subject"));User user = userService.getUserById(uid);payService.saveOrder(user.getUsername());
   }
   return "success"; // 必须返回success

---

二、订单展示实现

1. 前端动态渲染

function showOrders() {$.get("/orders/showOrdersInfo", function(resp) {$(resp).each(function(index, order) {// 构建订单面板var panel = `<div class="panel"><div class="panel-heading">订单号:${order.oid}</div><div class="panel-body"><table><tbody id="${order.oid}"></tbody></table><span>总金额:$${order.totalPrice}</span></div></div>`;$("#orderview").append(panel);// 渲染订单商品$(order.orderItemList).each(function(i, item) {var row = `<tr><td><img src="${item.image}"></td><td>${item.title}</td><td>$${item.price} x ${item.num}</td></tr>`;$(`#${order.oid}`).append(row);});});});
}

2. 后端数据查询

@GetMapping("/showOrdersInfo")
public List<Order> showOrdersInfo(HttpSession session) {Integer userId = getUserId(session);return orderService.getOrdersByUserId(userId);
}// MyBatis一对多查询
<resultMap id="OrderMap" type="Order"><id property="oid" column="oid"/><collection property="orderItemList" column="oid" select="com.zzst.mapper.OrderItemMapper.getByOrderId"/>
</resultMap>

---

三、Vue核心概念与应用

1. 基础结构

<div id="app"><p>{{ message }}</p><button @click="reverseMessage">反转</button>
</div><script>
new Vue({el: '#app',data: { message: 'Hello Vue!' },methods: {reverseMessage() {this.message = this.message.split('').reverse().join('');}}
});
</script>

2. 核心指令

指令	作用	示例
v-text	替换文本内容	<p v-text="msg"></p>
v-html	插入HTML	<div v-html="content">
v-if/v-show	条件渲染	<p v-if="isVisible">
v-for	循环渲染	<li v-for="item in items">
v-bind (简写 :)	属性绑定	<a :href="url">
v-model	表单双向绑定	<input v-model="name">

3. 生命周期钩子

new Vue({created() { console.log("Vue实例已创建"); },mounted() { console.log("DOM已挂载"); }
});

---

四、Axios异步请求

1. 基础用法

// GET请求
axios.get('/api/user', { params: { id: 1 } }).then(res => console.log(res.data)).catch(err => console.error(err));// POST请求
axios.post('/api/save', { name: 'John', age: 30 }).then(res => this.user = res.data);

2. Vue整合示例

methods: {loadUser() {axios.get('/users/getUser').then(response => {this.user = response.data;}).catch(error => {console.error("加载失败", error);});},saveUser() {axios.post('/users/saveUser', this.user).then(response => {alert('保存成功！');});}
}