首先去下載支付寶沙箱的一系列東西，具體的配置什么的我就不說了，有很多博客都講了，還有螞蟻金服官方也說的很詳細，我就直接說怎么樣把后端的支付頁面顯示到Vue前端來：

在你配置好AlipayConfig這個文件后，就可以寫前端的邏輯了，前端是采用支付寶的頁面如下：

下面展示一些 內聯代碼片。

/* 以下是支付確認html */ <div style='text=#000000 bgColor=#ffffff leftMargin=0 topMargin=4'><header class='am-header'> <h1>支付確認</h1></header><div id='main'> <!-- <form name='alipayment' :model='payObject' target='_blank'> --> <div name='divcontent'> <dl class='content'> <dt>商戶訂單號 ：</dt> <dd><input name='WIDout_trade_no' readonly='true' :value='payObject.WIDout_trade_no'/> </dd> <hr /> <dt>訂單名稱 ：</dt> <dd><input name='WIDsubject' readonly='true' :value='payObject.WIDsubject'/> </dd> <hr /> <dt>付款金額 ：</dt> <dd><input name='WIDtotal_amount' readonly='true' :value='payObject.WIDtotal_amount'/> </dd> <hr /> <dt>商品描述：</dt> <dd><input name='WIDbody' readonly='true' :value='payObject.WIDbody' /> </dd> <hr /> <dd id='btn-dd'><span class='new-btn-login-sp'> <button @click='paySub()'>付 款</button></span><span class='note-help'>如果您點擊“付款”按鈕，即表示您同意該次的執行操作。</span> </dd> </dl> </div> <!-- </form> --></div> </div>

我再加上這個頁面的css

/* 以下是支付確認樣css*/.am-header { display: -webkit-box; display: -ms-flexbox; /* display: flex; */ width: 100%; position: relative; padding: 15px 0; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; background: #1d222d; height: 50px; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; box-pack: center; -webkit-box-align: center; -ms-flex-align: center; box-align: center;}.am-header h1 { -webkit-box-flex: 1; -ms-flex: 1; box-flex: 1; line-height: 18px; text-align: center; font-size: 18px; font-weight: 300; color: #fff;}#main { width: 100%; margin: 0 auto; font-size: 14px;}.show { clear: left; display: block;}.content { margin-top: 5px;}.content dt { width: 100px; display: inline-block; float: left; margin-left: 20px; color: #666; font-size: 13px; margin-top: 8px;}.content dd { margin-left: 120px; margin-bottom: 5px;}.content dd input { width: 85%; height: 28px; border: 0; -webkit-border-radius: 0; -webkit-appearance: none; inputoutline: none;}.one_line { display: block; height: 1px; border: 0; border-top: 1px solid #eeeeee; width: 100%; margin-left: 20px;}#btn-dd { margin: 20px; text-align: center;}.new-btn-login-sp { padding: 1px; display: inline-block; width: 75%;}.new-btn-login { background-color: #02aaf1; color: #ffffff; font-weight: bold; border: none; width: 100%; height: 50px; border-radius: 5px; font-size: 16px;}.note-help { color: #999999; font-size: 12px; line-height: 100%; margin-top: 5px; width: 100%; display: block;}

當然，在html頁面的數據是以下這樣定義的：

/*html用的數據*/ payObject: {//支付數據WIDsubject: 0,WIDout_trade_no: '',WIDtotal_amount: '',WIDbody: '' },

當然，在你要打開支付這個頁面時，你得用函數把這些數據進行賦值，就是以下代碼，具體看注釋：

//去往支付頁面函數 payOrder() { //this.payObject.WIDsubject這個我已經在跳轉支付界面時把這個給設為訂單號了 //判斷oid（訂單號）是否是數字 if (typeof this.payObject.WIDsubject != 'string') { //從sessionStorage拿出用戶的數據const usertoken = sessionStorage.getItem('usertoken');const user = JSON.parse(sessionStorage.getItem('user'));// console.log(user)//如果用戶正常（不為空）if (usertoken != null) { if (user != null) { const uname = user.uname; //我在這里去獲取哪個訂單需要支付 dishApi.payConfirm(this.payObject.WIDsubject).then(response => { const resp = response.data; if (resp.code === 200) { //生成這個sNow數據var vNow = new Date();var sNow = '';sNow += String(vNow.getFullYear());sNow += String(vNow.getMonth() + 1);sNow += String(vNow.getDate());sNow += String(vNow.getHours());sNow += String(vNow.getMinutes());sNow += String(vNow.getSeconds());sNow += String(vNow.getMilliseconds());//綁定頁面的data數據this.payObject.WIDout_trade_no = sNow; //綁定tradenothis.payObject.WIDbody = uname;//我這里是綁定的用戶名this.payObject.WIDsubject = resp.oid; //返回現在的訂單號值this.payObject.WIDtotal_amount = resp.totalValue; //返回支付總價 } else {this.$message({ message: resp.message, type: 'warning', duration: 500 // 彈出停留時間}); } }); } else { this.$message({ message: '請先登錄', type: 'warning', duration: 1000 // 彈出停留時間 }); }} else { this.$message({ message: '請先登錄', type: 'warning', duration: 1000 // 彈出停留時間 });} } else {this.$message({ message: '支付錯誤', type: 'warning', duration: 1000 // 彈出停留時間}); } },

然后我在來說當你點擊立即付款后怎么做（就是點擊付款調用paySub()函數）

//支付開始 /給用戶提示 paySub() { this.$message({showClose: true,message: '請在5分鐘內完成支付',duration: 5000 // 彈出停留時間 }); //前往支付 //這里向后端傳入你的支付數據，就是剛才定義的和綁定的數據 dishApi.pay( this.payObject.WIDout_trade_no, this.payObject.WIDtotal_amount, this.payObject.WIDsubject, this.payObject.WIDbody).then(response => {//后臺響應后處理如下 const r = response.data; if (r.code === 200) { //這是后端響應的r，我獲取了它的formaction，至于這里面是什么，我們后面說， //獲取到的數據先存儲在sessionStorage中，為了將來的讀取 sessionStorage.setItem('payaction', r.formaction);//然后就將頁面跳轉到支付的界面 window.open('#pay', '_blank'); } else { this.$message({ message: resp.message, type: 'warning', duration: 500 // 彈出停留時間 }); }}); },

接下來就改springboot后端了：我們來寫上面這個dishApi.pay（）訪問的后端是怎么樣的

@ResponseBody @PostMapping('/AliPay') //在這里接收前端傳來的數據payInfo public Object goPay(@RequestBody JSONObject payInfo,HttpServletResponse response,HttpServletRequest request) throws IOException, AlipayApiException { //首先在這里JSONObject jsonObject = new JSONObject();try {//這里是解析前端傳來的數據 String WIDout_trade_no = payInfo.get('WIDout_trade_no').toString(); String WIDtotal_amount = payInfo.get('WIDtotal_amount').toString(); String WIDsubject = payInfo.get('WIDsubject').toString(); String WIDbody = payInfo.get('WIDbody').toString();//System.out.println(WIDout_trade_no);System.out.println(WIDtotal_amount);System.out.println(WIDsubject);System.out.println(WIDbody); //獲得初始化的AlipayClient AlipayClient alipayClient = new DefaultAlipayClient(AlipayConfig.gatewayUrl, AlipayConfig.app_id, AlipayConfig.merchant_private_key, 'json', AlipayConfig.charset, AlipayConfig.alipay_public_key, AlipayConfig.sign_type); //設置請求參數 AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest(); alipayRequest.setReturnUrl(AlipayConfig.return_url); alipayRequest.setNotifyUrl(AlipayConfig.notify_url);//String out_trade_no = new String(request.getParameter('WIDout_trade_no').getBytes('ISO-8859-1'),'UTF-8');////付款金額，必填//String total_amount = new String(request.getParameter('WIDtotal_amount').getBytes('ISO-8859-1'),'UTF-8');////訂單名稱，必填//String subject = new String(request.getParameter('WIDsubject').getBytes('ISO-8859-1'),'UTF-8');////商品描述，可空//String body = new String(request.getParameter('WIDbody').getBytes('ISO-8859-1'),'UTF-8'); String out_trade_no = WIDout_trade_no; //付款金額，必填 String total_amount = WIDtotal_amount; //訂單名稱，必填 String subject = WIDsubject; //商品描述，可空 String body = WIDbody; // 該筆訂單允許的最晚付款時間，逾期將關閉交易。取值范圍：1m～15d。m-分鐘，h-小時，d-天，1c-當天（1c-當天的情況下，無論交易何時創建，都在0點關閉）。 該參數數值不接受小數點， 如 1.5h，可轉換為 90m。 String timeout_express = '10m'; //例子去官方api找 alipayRequest.setBizContent('{'out_trade_no':'' + out_trade_no + '',' + ''total_amount':'' + total_amount + '',' + ''subject':'' + subject + '',' + ''body':'' + body + '',' + ''timeout_express':'' + timeout_express + '',' + ''product_code':'FAST_INSTANT_TRADE_PAY'}');////請求 String result = alipayClient.pageExecute(alipayRequest).getBody() ; //這里以上都是支付寶的，接下來是我的 //接下來是一系列的字符串操作，總之就是給支付寶返回的result頁面的按鈕屬性設置為非hidden，并且添加了一些好看的屬性，然后取出來<script>標簽（因為前端用v-html不能顯示<script>）最后將整個改造的result發給前端，就有了上面的前端將接收的內容寫入sessionStorage的操作 String befAction = result; StringBuffer aftAction = new StringBuffer(befAction); aftAction = aftAction.reverse(); String midAction = aftAction.substring(68); aftAction = new StringBuffer(midAction).reverse(); aftAction=aftAction.append(' width: 200px; padding:8px; background-color: #428bca; border-color: #357ebd; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px;text-align: center; vertical-align: middle; border: 1px solid transparent; font-weight: 900; font-size:125% '> </form>'); jsonObject.put('formaction', aftAction); jsonObject.put('message', StateCode.SUCCESS.getMessage()); jsonObject.put('code', StateCode.SUCCESS.getCode()); return jsonObject;}catch (Exception e){ jsonObject.put('message', StateCode.SERVER_FAILED.getMessage()); jsonObject.put('code', StateCode.SERVER_FAILED.getCode()); return jsonObject;} }

在接下來就又是前端的操作了，由于剛才前端進行了頁面跳轉，所以我們接下來寫的是前端跳轉后的那個頁面：

//這是跳轉到的頁面的全部代碼<template><div class='top'><h1 class='top'>收銀臺</h1> <div v-html='payaction'></div></div></template><script>export default { data() { return { payaction: '' }; }, created() { this.showPayPage(); }, methods: { showPayPage() { this.$nextTick(function() { //我們直接把剛才寫在sessionStorage的頁面顯示在當前頁面this.payaction = sessionStorage.getItem('payaction');//然后刪除sessionStorage的數據sessionStorage.removeItem('payaction'); }); }, }};</script><style scoped>.top{margin-top: 50px;text-align: center;vertical-align: middle;margin-bottom: 100px;}</style>

至此，所有代碼就結束了，你在這個頁面直接點擊支付按鈕就會跳轉到支付寶沙箱支付的界面了。

到此這篇關于Vue+SpringBoot實現支付寶沙箱支付的示例代碼的文章就介紹到這了,更多相關Vue+SpringBoot 支付寶沙箱支付內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！