SpringBoot+VUE3前后端分离-【支付宝支付】

1、支付宝沙箱应用申请

https://open.alipay.com/develop/sandbox/app
打开支付宝沙箱能够看到如下信息:
在这里插入图片描述
获取到appid;

2、获取应用私钥以及支付宝公钥

在接口加密方式选择公钥模式启用,根据操作即可获取应用公钥、应用私钥以及支付宝公钥。
其中,我们需要用到的为支付宝公钥以及应用私钥
在这里插入图片描述

3、创建springboot项目并引入sdk

创建springboot就不在这里赘述,在开发支付宝支付功能中需要引入的maven依赖如下

<dependency><groupId>com.alipay.sdk</groupId><artifactId>alipay-easysdk</artifactId><version>2.2.3</version>
</dependency>

以上依赖为编写时最新依赖,若开发时需要用到当时最新依赖请到maven查询
https://mvnrepository.com/artifact/com.alipay.sdk/alipay-easysdk

4、后端代码

后端结构如下
在这里插入图片描述

1)yml文件配置

alipay:# 应用ID,沙箱应用idappId: XXXXX# 应用私钥appPrivateKey: XXXX# 支付宝公钥alipayPublicKey: XXXXX# 异步回调地址,当前dome中并未使用notifyUrl:

2) config引入

import com.alipay.easysdk.factory.Factory;
import com.alipay.easysdk.kernel.Config;
import jakarta.annotation.PostConstruct;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;/*** @author <a href="https://github.com/fawu-K">fawu.K</a>* @since 2023-11-20 17:40**/@Data
@Component
@ConfigurationProperties(prefix = "alipay")
public class AliPayConfig {private String appId;private String appPrivateKey;private String alipayPublicKey;private String notifyUrl;@PostConstructpublic void init() {// 设置参数(全局只需设置一次)Config config = new Config();config.protocol = "https";// 沙箱网关config.gatewayHost = "openapi-sandbox.dl.alipaydev.com";config.signType = "RSA2";config.appId = this.appId;config.merchantPrivateKey = this.appPrivateKey;config.alipayPublicKey = this.alipayPublicKey;config.notifyUrl = this.notifyUrl;Factory.setOptions(config);System.out.println("=======支付宝SDK初始化成功=======");}
}

3)service层处理

import com.alipay.easysdk.factory.Factory;
import com.alipay.easysdk.kernel.util.ResponseChecker;
import com.alipay.easysdk.payment.page.models.AlipayTradePagePayResponse;
import org.springframework.stereotype.Service;import java.math.BigDecimal;
import java.time.LocalDateTime;
import java.time.ZoneOffset;
import java.time.format.DateTimeFormatter;/*** @author <a href="https://github.com/fawu-K">fawu.K</a>* @since 2023-11-20 17:40**/@Service
public class AlipayService {/*** 生成支付表单* @param subject* @param money* @return* @throws Exception*/public String toPay(String subject, BigDecimal money) throws Exception {// 最后一个参数是支付完成之后跳转到的界面, 一般为项目的首页AlipayTradePagePayResponse pay = Factory.Payment.Page().pay(subject, this.generateTradeNo(),String.valueOf(money), "http://localhost:8080");String payForm = null;if (ResponseChecker.success(pay)) {payForm = pay.getBody();}return payForm;}/*** 通过时间生成外部订单号 out_trade_no* @return*/private String generateTradeNo() {DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyyMMddHHmmssSSS");String tradeNo = LocalDateTime.now(ZoneOffset.of("+8")).format(formatter);return tradeNo;}
}

4)controller层

import com.kang.alipaydome.service.AlipayService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.math.BigDecimal;/*** @author <a href="https://github.com/fawu-K">fawu.K</a>* @since 2023-11-20 17:40**/@RestController
@RequestMapping
@CrossOrigin(origins = "*")
public class AliPayController {@Autowiredprivate AlipayService alipayService;@GetMapping("/pay")public String toPay() throws Exception {String form = alipayService.toPay("苹果15", new BigDecimal("100.00"));return form;}
}

5、测试

访问:http://localhost:8080/pay
在这里插入图片描述
展示出如上页面即表示成功,此时通过沙箱账号里的买家账号支付即可,也可以使用沙箱工具中下载支付宝APP沙箱版扫码支付。
在这里插入图片描述

6、vue代码搭建

首先创建vue项目在此不赘述

1)vue3引入axios

npm install axios
创建 src/plugins/axiosInstance.js

import axios from 'axios'const API = axios.create({baseURL: "http://localhost:8080",timeout: 30000
})export default API

在main.js中引用axios

import { createApp } from 'vue'
import App from './App.vue'
import axios from "@/plugins/axiosInstance";const app = createApp(App)app.use(ElementPlus)
app.mount('#app')
app.config.globalProperties.$axios = axios

2)调用后端接口

<template><button @click="buy">购买</button>
</template><script>
import API from "@/plugins/axiosInstance";
export default {data() {return {subject:'',money:null,}},methods:{buy(){API({url:'/pay',method: 'get'}).then((resp)=>{// 添加之前先删除一下,如果单页面,页面不刷新,添加进去的内容会一直保留在页面中,二次调用form表单会出错const divForm = document.getElementsByTagName("div");if (divForm.length) {document.body.removeChild(divForm[0]);}const div = document.createElement("div");div.innerHTML = resp.data; // data就是接口返回的form 表单字符串document.body.appendChild(div);//document.forms[0].setAttribute("target", "_blank"); // 新开窗口跳转document.forms[0].submit();});}}
}
</script>

完结

需要注意,如果发现第5步测试通过,但是在vue代码中调用接口却显示无法展示返回数据的话,请查看是否进行了跨域

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/182603.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服务运营 |精选:床位知多少?医院调度的几种建模方法(下)

编者按&#xff1a; 住院流程&#xff08;Inpatient Flow&#xff09;是一种通过协调和优化医院内部流程&#xff0c;以提高患者入院至出院期间的效率和质量的方法。住院流程通常通过医院内部信息系统和协同工作流程进行管理&#xff0c;以确保患者得到及时的诊断、治疗和护理…

Vue组件开发:工具提示组件的实现方法

在Web开发当中&#xff0c;工具提示&#xff08;Tooltip&#xff09;是一种常用的用户界面组件&#xff0c;用于向用户提供额外的信息或说明。它通常以文本形式显示在鼠标悬停或点击某个元素时&#xff0c;为用户提供更详细的内容展示。在本文中&#xff0c;我们将探讨如何使用…

异常数据检测 | Python实现基于高斯概率分布的异常检测

异常数据检测 | Python实现基于高斯概率分布的异常检测 高斯分布也称为正态分布。它可以被用来进行异常值检测,不过我们首先要假设我们的数据是正态分布的。不过这个假设不能适应于所有数据集。但如果我们做了这种假设那么它将会有一种有效的方法来发现异常值。 Scikit-Learn的…

AI PC专题:AI PC深入变革PC产业

今天分享的是AI系列深度研究报告&#xff1a;《AI PC专题&#xff1a;AI PC深入变革PC产业》。 &#xff08;报告出品方&#xff1a;西南证券研究发展中心&#xff09; 报告共计&#xff1a;30页 AI PC将深入变革PC产业  从出货量看&#xff0c;PC整体呈现周期性的特征。2…

微信小程序+中草药分类+爬虫+torch

1 介绍 本项目提供中草药数据集&#xff0c;使用gpu、cpu版本的torch版本进行训练&#xff0c;将模型部署到后端flask&#xff0c;最后使用微信小程序进行展示出来。 数据爬虫可以参考&#xff1a;http://t.csdnimg.cn/7Olus 项目中的爬虫代码&#xff0c;并且本项目提供相同的…

using meta-SQL 使用元SQL (3)

%FirstRows Syntax %FirstRows(n) Description The %FirstRows meta-SQL variable is replaced by database-specific SQL syntax to optimize retrieval of n rows. Depending on the database, this variable optimizes: FirstRows meta-SQL变量被特定于数据库的SQL语法…

反弹shell命令速查

反弹Shell-Linux 【监听端】centos: 192.168.35.152 【被控端】kali: 192.168.35.128# 监听端执行 [root@localhost ~]# nc -vvl 7777 Ncat: Version 7.50 ( https://nmap.org/ncat ) Ncat: Listening on :::7777 Ncat: Listening on 0.0.0.0:7777bash ┌──(root@kali)-[/h…

基于YOLOv5的人群计数系统设计系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介系统概述系统功能核心技术系统架构系统优势 二、功能三、系统四. 总结  总结 一项目简介 基于YOLOv5的人群计数系统设计是一个非常有趣且具有挑战性的项目…

离散时间信号的分析(数字信号处理实验1-2)

前言&#xff1a;该系列实验均使用matlab完成&#xff0c;实验课程为《数字信号处理》 文章目录 一.题目二.实验目的三.实验仪器四.实验原理实验所用的matlab函数解析离散时间信号实验原理&#xff1a; 五.实验步骤六.实验代码及实验结果完整代码1.线性卷积代码2.循环卷积运算…

(亲测有效)解决windows11无法使用1500000波特率的问题

大家好&#xff01;我是编码小哥&#xff0c;欢迎关注&#xff0c;持续分享更多实用的编程经验和开发技巧&#xff0c;共同进步。 1、问题描述 从图1可以看出串口是正常的&#xff0c;安装的驱动是CP210xVCPInstaller_x64.exe&#xff0c;但是从图2可以看出&#xff0c;串口拒…

HarmonyOS ArkTS 使用DevEco Studio高效开发(十三)

1、快速开始 打开IDE后&#xff0c;在IDE上边栏有个Help入口&#xff0c;里面有一个Quick Start快速开始入口&#xff0c;点击进去就会进入到快速开始面板。在这个面板中会有一些快速入门的实验指导和一些常用的链接。快速开始相当于一个收藏夹&#xff0c;把最常用的一些学习…

苍穹外卖--添加购物车

购物车数据是关联用户的&#xff0c;在表结构中&#xff0c;我们需要记录&#xff0c;每一个用户的购物车数据是哪些菜品列表展示出来的既有套餐&#xff0c;又有菜品&#xff0c;如果用户选择的是套餐&#xff0c;就保存套餐ID(setmeal_id)&#xff0c;如果用户选择的是菜品&a…

git stash save untracked not staged

git stash save untracked not staged 如图 解决方案&#xff1a; git stash save "tag标记信息" --include-untracked或者&#xff1a; git stash save -u "tag标记信息" git stash clear清空本地暂存代码_zhangphil的博客-CSDN博客文章浏览阅读486次。…

代码的并发问题

List 在遍历时候删除元素 为list添加元素&#xff0c;通过for或者通过foreach删除都存在删除异常&#xff0c;在捕获异常的时候注意异常信息的简化消息传递&#xff0c;容易造成异常错误的简化 Testpublic void testException(){List<Integer> list new ArrayList<…

【业务实战】mysql数据库中<标签tag功能>一般是怎么设计的?

【业务实战】mysql数据库中<标签tag功能>一般是怎么设计的? 在 MySQL 数据库中设计标签系统&#xff0c;可以采用以下两种常见的设计方案&#xff1a; 标签关联表&#xff1a; 创建一个标签表&#xff0c;用于存储所有可用的标签。该表可以包含字段如标签ID&#xff08…

银河麒麟高级服务器操作系统V10安装达梦数据库管理系统DM8——单实例

一、介绍 之前介绍过供个人学习在VMware虚拟机上安装银河麒麟高级服务器操作系统V10&#xff0c;有兴趣的可以去看看&#xff08;银河麒麟V10安装&#xff09;&#xff0c;本次主要学习在银河麒麟V10上安装达梦数据库-DM8。DM8是达梦公司在总结DM系列产品研发与应用经验的基础…

Unity优化篇:对于unity DrawCall/Mesh/纹理压缩/内存等方面的常规调试和优化手段

对于Unity的DrawCall、Mesh、纹理压缩、内存等方面的常规调试和优化手段&#xff0c;我都有一定的了解。以下是一些常见的优化手段&#xff1a; 减少DrawCall&#xff1a;这是提高性能的关键。尽可能合并相同的材质和纹理&#xff0c;使用LOD&#xff08;Levels of Detail&…

记录一次YAMLException异常

记录一次YAMLException异常 ✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 报错以及B…

C语言——深入理解指针(3)

目录 1. 字符指针 2. 数组指针 2.1 数组指针变量 2.2 数组指针变量的初始化 3.二维数组传参&#xff08;本质&#xff09; 4. 函数指针 4.1 函数指针变量的创建 4.2 函数指针的使用 4.3 typedef 5. 函数指针数组 6. 转移表&#xff08;函数指针数组的使用&#xff…

Opencv颜色追踪

废话不多说直接上代码&#xff01;&#xff01; # 这是一个示例 Python 脚本。 import cv2 import numpy as npdef track_object():# 打开摄像头外接cap cv2.VideoCapture(0)while True:# 读取摄像头帧# ret&#xff08;Return Value&#xff09;是一个布尔值&#xff0c;表示…