支付宝沙箱环境+SpringBoot+内网穿透整合开发

### 集成支付宝沙箱支付到Vue3和Spring Boot项目 #### 1. 后端配置 (Spring Boot) 为了使Spring Boot能够处理来自前端的请求并与支付宝服务器通信，需先完成必要的依赖导入与配置。 在`pom.xml`中加入支付宝SDK依赖： ```xml <dependency> <groupId>com.alipay.sdk</groupId> <artifactId>alipay-easysdk</artifactId> <version>2.2.0</version> </dependency> ``` 接着，在项目的资源文件夹下创建名为`application.yml`或`application.properties`来保存支付宝的相关设置信息[^3]。这里以YAML为例说明如何定义这些属性： ```yaml alipay: app-id: "your-app-id" merchant-private-key: "your-merchant-private-key" alipay-public-key: "your-alipay-public-key" notify-url: http://localhost:8080/alipay/notify return-url: http://localhost:8080/alipay/return sign-type: RSA2 charset: UTF-8 gateway-url: https://openapi.alipaydev.com/gateway.do ``` 以上配置项中的值应替换为实际获取的信息[^1]。 编写控制器用于接收来自客户端发起的付款请求，并通过调用支付宝服务生成预订单链接返回给前端显示。这通常涉及到构建HTTP GET URL字符串作为响应的一部分发送回浏览器打开新窗口加载该URL地址[^4]。 #### 控制器代码样例 ```java @RestController @RequestMapping("/alipay") public class AlipayController { @Autowired private AlipayClient alipayClient; @GetMapping("/pay") public String pay(@RequestParam("orderNo") String orderNo, @RequestParam("pathUrl") String returnUrl) throws Exception { // 创建API对应的request类对象 AlipayTradePagePayRequest request = new AlipayTradePagePayRequest(); // 设置同步回调地址 request.setReturnUrl(returnUrl); // 设置异步通知地址 request.setNotifyUrl("http://localhost:8080/alipay/notify"); // 构建业务参数模型 AlipayTradePagePayModel model = new AlipayTradePagePayModel(); model.setOutTradeNo(orderNo); // 商户网站唯一订单号 model.setTotalAmount("0.01"); // 订单总金额 model.setSubject("Test Payment"); model.setProductCode("FAST_INSTANT_TRADE_PAY"); request.setBizModel(model); // 调用SDK执行交易操作 String form = ""; try { form = alipayClient.pageExecute(request).getBody(); // 获取表单HTML文本 } catch (AlipayApiException e) { throw new RuntimeException(e.getMessage()); } return form; } } ``` 此部分实现了当用户尝试购买商品时触发的服务端逻辑，它会向支付宝提交一笔新的在线支付请求并将得到的结果封装成HTML形式供前端解析使用[^2]。 #### 2. 前端实现 (Vue3) 对于Vue.js应用程序来说，则主要负责收集用户的输入数据（比如订单编号），并通过AJAX的方式将其传递至后端API接口；之后依据收到的数据构造完整的跳转链接让网页自动导航过去完成后续流程。 下面是一个简单的组件实例展示了怎样组织上述过程： ```javascript <script setup lang="ts"> import { ref } from 'vue'; const transactionId = ref(''); const afterSlash = '/#/callback'; // 页面路径 function handlePayment() { fetch('/alipay/pay', { method: 'GET', params: { orderNo: transactionId.value, pathUrl: encodeURIComponent(afterSlash), }, }).then(response => response.json()) .then(data => { const url = `http://${window.location.host}/alipay/pay?orderNo=${transactionId.value}&pathUrl=${encodeURIComponent(afterSlash)}`; window.open(url); }); } </script> <template> <div> <input v-model="transactionId" placeholder="请输入订单号"/> <button @click="handlePayment">立即支付</button> </div> </template> ``` 这段脚本允许开发者轻松地将支付按钮嵌入任何页面内，并确保点击事件发生时能正确启动整个购物流程。