SpringBoot+vue支付宝

### 使用 Spring Boot 和 Vue 集成支付宝支付

#### 创建 Spring Boot 项目并配置支付宝 SDK
为了集成支付宝，在创建好基础的 Spring Boot 项目之后，需要引入支付宝官方提供的 Java SDK。可以通过 Maven 或 Gradle 来管理依赖。

对于 Maven 用户来说，可以在 `pom.xml` 文件中加入如下依赖：

<dependency>
    <groupId>com.alipay.sdk</groupId>
    <artifactId>alipay-sdk-java</artifactId>
    <version>4.20.1.ALL</version>
</dependency>

接着设置应用属性文件中的支付宝参数，如 app_id, merchant_private_key 等[^1]。

#### 后端服务接口编写
定义用于发起支付请求的服务方法，该方法接收从前端传来的订单详情数据，并调用支付宝 API 发起预下单操作。完成后返回给前端一个跳转链接让用户完成付款流程。

@RestController
@RequestMapping("/api/pay")
public class AlipayController {

    @Autowired
    private AlipayService alipayService;

    @PostMapping("/createOrder")
    public ResponseEntity<String> createAlipayOrder(@RequestBody OrderInfo orderInfo){
        try {
            String form = alipayService.createAlipayForm(orderInfo);
            return new ResponseEntity<>(form , HttpStatus.OK);
        } catch (Exception e) {
            log.error(e.getMessage());
            throw new RuntimeException("Create payment failed");
        }
    }
}

#### 前端 Vue 组件处理逻辑
在 Vue 中通过 axios 库发送 HTTP 请求到后端获取支付表单 HTML 字符串，再利用 JavaScript 的方式打开新窗口展示支付宝收银台页面。

import axios from 'axios';

export default {
  methods: {
    async handlePay() {
      const res = await axios.post('/api/pay/createOrder', this.orderData);
      window.open(res.data); // 打开新的浏览器标签页来显示支付界面
    },
  },
};

以上就是基于 Spring Boot 和 Vue 实现的一个简单的支付宝集成方案概述以及部分关键代码片段[^3]。