Vue对接支付宝沙箱环境

---

前言

此文章仅供学习参考，这里我们对接的环境是Vue。我在项目Demo使用到的一个支付环境，若出现一些差错还需要到alipay-sdk官方GitHub查询相关配置。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、支付宝沙箱环境是什么？

支付宝沙箱环境是一种应用于Web APP开发服务的支付环境，用于模拟实现支付宝支付功能

二、安装所需要的环境

1.引入环境以及工具

具体有：我这里安装了全局的express所以直接执行以下命令

npm install express-generator -g
npm install axios
npm install cors
npm install alipay-sdk

这里需要下载支付宝开放平台助手
下载地址：支付宝开放平台助手

2.安装Express框架

找到我们中意的磁盘，运行命令行窗口，执行命令

express --view=ejs server
cd 到项目目录中
npm install 安装运行所需要的依赖
npm start 即可开启我们的express服务器（我们的默认端口是3000）

前端则为Vue创建一个项目，由于新版本的Vue没有了vue.config,js文件，所以我们在项目src同级下创建该文件，在这个文件中我们要配置相关代理。

const path = require('path')

module.exports = {
  // 代理
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }
  },
  configureWebpack: (config) => {
    config.resolve = {
      extensions: ['.js', '.json', '.vue'],
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    }
  }
}

接下来我们对Vue项目创建一个点击事件，用于触发我们的后端接口.
实力代码如下：

    goPayment() {
      var data = {
        orderId: 'w20211345452'
      }
      axios({
        url: '/api/payment',
        method: 'POST',
        headers: {
          dataType: 'JSONP',
          'content-type': 'application/x-www/form'
        },
        data: qs.stringify(data)
      }).then(res => {
        console.log(res)
        window.location.href = res.data.result
      })
    }

3.对接支付宝沙箱环境

首先：我们需要登录到支付宝开放平台找到沙箱环境,

下载好开放平台助手后，我们根据自己的需求选用JAVA或者非JAVA，由于我使用的是Vue开发，这里我们选择后者，密码长度我们选择RSA2。

点击生成密钥即可。点击后，该工具会在窗口生成我们需要的密钥。复制应用公钥到我们的沙箱环境中，填入即可

切回到们的服务器中，进行相关的配置：在项目根目录下创建一个utils文件夹下的alipayutil.js文件，这里我们进行相关配置

const AlipaySdk = require('alipay-sdk').default;
const alipaySdk = new AlipaySdk({
  appId: '', // 应用id
  gateway: '', // 支付宝网关
  signType: '', // 编码格式
  alipayPublicKey: '', // 支付宝公钥
  privateKey: '' // 应用私钥

})
//最后我们默认导出即可
module.exports = alipaySdk

到route文件夹下的index.js写我们的 /api/payment 接口
具体实例代码如下：

var express = require('express')
var router = express.Router()
const alipaySdk = require('../db/alipayUtil')
const AlipayFormData = require('alipay-sdk/lib/form').default
const axios = require('axios')
const cors = require('cors') //解决跨域请求问题
router.use(cors())
router.use(express.urlencoded({ extended: true }))

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' })
})

router.post('/api/payment', function(req, res, next) {
  const orderId = req.body.orderId;
  // 对接支付宝
  const formData = new AlipayFormData();
  formData.setMethod('get');
  formData.addField('returnUrl', 'http://localhost:8080/paysuccess');

// 商单信息
  formData.addField('bizContent', {
    out_trade_no: "21245956656"+Math.random(1,400)+"1128",
    product_code: "FAST_INSTANT_TRADE_PAY",
    subject: "门票",
    body: "商品详情",
    // timeout_express: "90m", 超时
    total_amount: '80.01'

  });
  let result = alipaySdk.exec(

    'alipay.trade.page.pay',

    {},

    { formData: formData }

  );
  result.then((resp) => {
    res.send({
      success: 'true',
      code: 200,
      result: resp
    });
  });
});
module.exports = router;

之后我们就可以用命令 npm start启动服务器 可以完成沙箱支付

---

总结

文章略显粗糙，若有帮助，自然是很开心的。