您的位置:首页 > 游戏 > 游戏 > html实例百度网页制作代码_电子商务系统设计报告_网页模板设计_抖音搜索seo排名优化

html实例百度网页制作代码_电子商务系统设计报告_网页模板设计_抖音搜索seo排名优化

2024/12/23 2:14:46 来源:https://blog.csdn.net/BlackPudding_/article/details/142684864  浏览:    关键词:html实例百度网页制作代码_电子商务系统设计报告_网页模板设计_抖音搜索seo排名优化
html实例百度网页制作代码_电子商务系统设计报告_网页模板设计_抖音搜索seo排名优化

目录

  • 1. 配置沙箱应用环境
  • 2. 配置springboot项目
    • 1. 引入依赖
    • 2. 配置文件
      • 注册下载ngrok
    • 3. 创建支付宝支付服务类
    • 4. 支付界面模板
    • 5. 控制类实现支付
    • 6. 测试

1. 配置沙箱应用环境

      使用支付宝账号登录到开放平台控制台。
在这里插入图片描述

      使用支付宝登录后,看到以下页面,下滑找到 开发工具推荐-》沙箱。
在这里插入图片描述
在这里插入图片描述

      查看到沙箱应用信息,点击查看,可以查看到沙箱应用的appid,app私钥,支付宝公钥。然后配置接口加签方式,使用系统默认密钥。
在这里插入图片描述
在这里插入图片描述

      查看沙箱账号信息,可以看到商家/买家信息等。
在这里插入图片描述

2. 配置springboot项目

1. 引入依赖

        <!--        支付宝SDK的依赖--><dependency><groupId>com.alipay.sdk</groupId><artifactId>alipay-easysdk</artifactId><version>2.2.0</version></dependency>

2. 配置文件

      application.yml

# 支付宝配置
alipay:
#  支付宝应用id,识别应用appId: your_app_id
#  应用私钥,用于对请求进行签名,确保请求的真实性和完整性appPrivateKey: your_app_private_key
#  支付宝的公钥,用于验证支付宝返回的数据的签名,确保数据的真实性和完整性alipayPublicKey: your_alipay_public_key
#  支付宝支付结果通知的回调地址,当支付完成后,支付宝会向这个地址发送支付结果通知。notifyUrl: your_notify_url
#  支付宝沙箱网关地址,开发者在沙箱环境调用 OpenAPI 发送 http(s) 请求的目标地址,需配置在AlipayClient中gatewayUrl: https://openapi-sandbox.dl.alipaydev.com/gateway.do

      application.properties

alipay.appId=your_app_id
alipay.appPrivateKey=your_app_private_key
alipay.alipayPublicKey=your_alipay_public_key
alipay.notifyUrl=your_notify_url
alipay.gatewayUrl=https://openapi-sandbox.dl.alipaydev.com/gateway.do

      同时需要在支付宝开放平台配置回调地址。

在这里插入图片描述

      注意:配置回调地址(notifyUrl)为本地测试环境时需要使用内网穿透,内网穿透是一种技术,它允许外部网络(如互联网)上的用户访问位于内部网络(例如家庭或公司局域网)中的设备或服务。如:ngrok,将本地服务器映射到外网,再配置回调地址为外网地址。

      下面以ngrok为例,实现内网穿透。

注册下载ngrok

访问ngrok官网注册用户。
在这里插入图片描述

      邮箱认证后,跳转到下载页面,直接跳过即可。
在这里插入图片描述

      下载完成后,解压,双击ngrok.exe,使用下述命令输入token,即可使用,下载地址。

ngrok config add-authtoken your_token

在这里插入图片描述

在这里插入图片描述

      使用命令行启动ngrok,监听本地8080端口。

ngrok http http://localhost:8080

      命令成功执行后,会出现以下内容,其中包含外网地址,用于配置回调地址。
在这里插入图片描述

3. 创建支付宝支付服务类

@Data
public class AliPay {private String traceNo;// 商户订单号private double totalAmount;// 支付总金额private String subject;// 商品名称private String alipayTraceNo;// 支付宝流水号
}

4. 支付界面模板

      支付跳转界面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>支付二维码</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<!--跳转界面-->
<h1>支付二维码</h1>
<p>订单号: <span th:text="${traceNo}"></span></p>
<p>支付金额: <span th:text="${totalAmount}"></span></p>
<p>商品名称: <span th:text="${subject}"></span></p>
<div th:utext="${qrCode}"></div>
</body>
</html>

      异常界面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>这是error 页面</h1><p th:text="${error}"></p>
</body>
</html>

      这里使用了thymeleaf模板,需要导入相关的依赖。

<!--        thymeleaf模板引擎依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>

5. 控制类实现支付

@Controller
@RequestMapping("alipay")
public class AliPayController {@Value("${alipay.appId}")private String appId;@Value("${alipay.appPrivateKey}")private String appPrivateKey;@Value("${alipay.alipayPublicKey}")private String alipayPublicKey;@Value("${alipay.gatewayUrl}")private String gatewayUrl;@Value("${alipay.notifyUrl}")private String notifyUrl;@PostMapping("/pay")public String pay(AliPay aliPay,Model model) {// 使用必要的凭证和配置初始化一个AlipayClient对象AlipayClient alipayClient = new DefaultAlipayClient(gatewayUrl, appId, appPrivateKey,"json", "UTF-8", alipayPublicKey, "RSA2");// 创建一个AlipayTradePagePayRequest对象,用于封装支付请求参数AlipayTradePagePayRequest request = new AlipayTradePagePayRequest();// 设置异步通知的通知urlrequest.setNotifyUrl(notifyUrl);// 设置业务参数,这里是JSON格式 包括订单号(out_trade_no)、支付金额(total_amount)、商品名称(subject)和产品代码(product_code)。request.setBizContent("{" +"\"out_trade_no\":\"" + aliPay.getTraceNo() + "\"," +"\"total_amount\":\"" + aliPay.getTotalAmount() + "\"," +"\"subject\":\"" + aliPay.getSubject() + "\"," +"\"product_code\":\"FAST_INSTANT_TRADE_PAY\"" +"}");try {// 调用execute方法发送请求并获取响应AlipayTradePagePayResponse response = alipayClient.pageExecute(request);// 判断是否调用成功if (response.isSuccess()) {System.out.println(response.getBody());model.addAttribute("qrCode", response.getBody());model.addAttribute("traceNo", aliPay.getTraceNo());model.addAttribute("totalAmount", aliPay.getTotalAmount());model.addAttribute("subject", aliPay.getSubject());return "pay";} else {model.addAttribute("error", "支付请求失败:" + response.getMsg());return "error";}} catch (AlipayApiException e) {model.addAttribute("error", "调用支付宝接口异常:" + e.getMessage());return "error";}}
}

6. 测试

      在浏览器中,使用以下html页面进行测试。

<!DOCTYPE html>
<html>
<head><title>支付测试</title>
</head>
<body><form action="http://localhost:7070/alipay/pay" method="post"><label for="subject">交易标题:</label><input type="text" id="subject" name="subject"><br><br><label for="traceNo">订单号:</label><input type="text" id="traceNo" name="traceNo"><br><br><label for="totalAmount">支付金额:</label><input type="text" id="totalAmount" name="totalAmount"><br><br><input type="submit" value="支付"></form>
</body>
</html>

      输入订单号、交易标题、支付金额,点击支付,跳转到跳转界面。

在这里插入图片描述

      进入支付宝支付页面,输入用户名和密码,完成支付。

在这里插入图片描述


链接:

支付宝文档链接:https://opendocs.alipay.com/open/203/105285

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com