Vue高级篇----前后端分离----微信支付

已于 2022-08-18 16:48:11 修改 360 收藏 1
分类专栏： vue-前后端分离 Sping 文章标签： 微信
于 2022-08-13 15:16:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56028042/article/details/126319258
版权

1.微信支付的流程

1.1业务说明

业务流程说明：

（1）商户后台系统根据用户选购的商品生成订单。

（2）用户确认支付后调用微信支付【统一下单API】生成预支付交易；

（3）微信支付系统收到请求后生成预支付交易单，并返回交易会话的二维码链接code_url。

（4）商户后台系统根据返回的code_url生成二维码。

（5）用户打开微信“扫一扫”扫描二维码，微信客户端将扫码内容发送到微信支付系统。

（6）微信支付系统收到客户端请求，验证链接有效性后发起用户支付，要求用户授权。

（7）用户在微信客户端输入密码，确认支付后，微信客户端提交授权。

（8）微信支付系统根据用户授权完成支付交易。

（9）微信支付系统完成支付交易后给微信客户端返回交易结果，并将交易结果通过短信、微信消息提示用户。微信客户端展示支付交易结果页面。

（10）微信支付系统通过发送异步消息通知商户后台系统支付结果。商户后台系统需回复接收情况，通知微信后台系统不再发送该单的支付通知。

（11）未收到支付通知的情况，商户后台系统调用【查询订单API】（查单实现可参考：支付回调和查单实现指引）。

（12）商户确认订单已支付后给用户发货。

微信支付开发的参考网址：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_1
 

2.后端

2.1 导入相关依赖

<!--        微信支付需要的依赖-->
        <dependency>
            <groupId>com.github.wxpay</groupId>
            <artifactId>wxpay-sdk</artifactId>
            <version>0.0.3</version>
        </dependency>
<!--        java端发送请求:在java端模拟浏览器远程访问微信的接口-->
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
        </dependency>

2.2 配置application.properties文件 


server.port=9000

spring.datasource.druid.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.druid.url=jdbc:mysql://localhost:3306/weixin?serverTimezone=Asia/Shanghai
spring.datasource.druid.username=root
spring.datasource.druid.password=root

logging.level.com.wt.weixinpay.dao=debug

weixin.appid=wx8087d8149331d27c
weixin.mch_id=1532192611
weixin.api_key=Cc158380629071583806290715838062

2.3 引入httpclient的依赖类

package com.wt.utils;

import org.apache.http.Consts;
import org.apache.http.HttpEntity;
import org.apache.http.NameValuePair;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.*;
import org.apache.http.conn.ssl.SSLConnectionSocketFactory;
import org.apache.http.conn.ssl.SSLContextBuilder;
import org.apache.http.conn.ssl.TrustStrategy;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.message.BasicNameValuePair;
import org.apache.http.util.EntityUtils;

import javax.net.ssl.SSLContext;
import java.io.IOException;
import java.security.cert.CertificateException;
import java.security.cert.X509Certificate;
import java.text.ParseException;
import java.util.HashMap;
import java.util.LinkedList;
import java.util.List;
import java.util.Map;

/**
 * http请求客户端
 * 
 * @author 必须引入httpclient的依赖：在java端模拟浏览器的效果。
 * 
 */
public class HttpClient {
   private String url;
   private Map<String, String> param;
   private int statusCode;
   private String content;
   private String xmlParam;
   private boolean isHttps;
   public boolean isHttps() {
      return isHttps;
   }
   public void setHttps(boolean isHttps) {
      this.isHttps = isHttps;
   }
   public String getXmlParam() {
      return xmlParam;
   }
   public void setXmlParam(String xmlParam) {
      this.xmlParam = xmlParam;
   }
   public HttpClient(String url, Map<String, String> param) {
      this.url = url;
      this.param = param;
   }
   public HttpClient(String url) {
      this.url = url;
   }
   public void setParameter(Map<String, String> map) {
      param = map;
   }
   public void addParameter(String key, String value) {
      if (param == null)
         param = new HashMap<String, String>();
      param.put(key, value);
   }
   public void post() throws ClientProtocolException, IOException {
      HttpPost http = new HttpPost(url);
      setEntity(http);
      execute(http);
   }
   public void put() throws ClientProtocolException, IOException {
      HttpPut http = new HttpPut(url);
      setEntity(http);
      execute(http);
   }
   public void get() throws ClientProtocolException, IOException {
      if (param != null) {
         StringBuilder url = new StringBuilder(this.url);
         boolean isFirst = true;
         for (String key : param.keySet()) {
            if (isFirst)
               url.append("?");
            else
               url.append("&");
            url.append(key).append("=").append(param.get(key));
         }
         this.url = url.toString();
      }
      HttpGet http = new HttpGet(url);
      execute(http);
   }
   /**
    * set http post,put param
    */
   private void setEntity(HttpEntityEnclosingRequestBase http) {
      if (param != null) {
         List<NameValuePair> nvps = new LinkedList<NameValuePair>();
         for (String key : param.keySet())
            nvps.add(new BasicNameValuePair(key, param.get(key))); // 参数
         http.setEntity(new UrlEncodedFormEntity(nvps, Consts.UTF_8)); // 设置参数
      }
      if (xmlParam != null) {
         http.setEntity(new StringEntity(xmlParam, Consts.UTF_8));
      }
   }
   private void execute(HttpUriRequest http) throws ClientProtocolException,
         IOException {
      CloseableHttpClient httpClient = null;
      try {
         if (isHttps) {
            SSLContext sslContext = new SSLContextBuilder()
                  .loadTrustMaterial(null, new TrustStrategy() {
                     // 信任所有
                     public boolean isTrusted(X509Certificate[] chain,
                           String authType)
                           throws CertificateException {
                        return true;
                     }
                  }).build();
            SSLConnectionSocketFactory sslsf = new SSLConnectionSocketFactory(
                  sslContext);
            httpClient = HttpClients.custom().setSSLSocketFactory(sslsf)
                  .build();
         } else {
            httpClient = HttpClients.createDefault();
         }
         CloseableHttpResponse response = httpClient.execute(http);
         try {
            if (response != null) {
               if (response.getStatusLine() != null)
                  statusCode = response.getStatusLine().getStatusCode();
               HttpEntity entity = response.getEntity();
               // 响应内容
               content = EntityUtils.toString(entity, Consts.UTF_8);
            }
         } finally {
            response.close();
         }
      } catch (Exception e) {
         e.printStackTrace();
      } finally {
         httpClient.close();
      }
   }
   public int getStatusCode() {
      return statusCode;
   }
   public String getContent() throws ParseException, IOException {
      return content;
   }
}

2.4 controller层

package com.wt.controller;

import com.wt.service.IOrderService;
import com.wt.vo.CommonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.stereotype.Controller;

/**
 * <p>
 * 订单 前端控制器
 * </p>
 *
 * @author wt
 * @since 2022-08-12
 */
@RestController
@RequestMapping("/wt/order")
public class OrderController {

    @Autowired
    private IOrderService orderService;

    //通过订单好查询订单信息并返回二维码地址
    @PostMapping("/payCha/{orderNo}")
    public CommonResult payCha(@PathVariable String orderNo){

        CommonResult result = orderService.selcPayCha(orderNo);
        return result;
    }
    1.根据状态查询微信支付的情况，修改数据库状态
    @PostMapping("/queryPayStatus/{orderNo}")
    public CommonResult queryPayStatus(@PathVariable String orderNo){
        System.out.println(orderNo);
        CommonResult result = orderService.queryPayStatus(orderNo);
        return result;
    }
}

2.5 service层

package com.wt.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.github.wxpay.sdk.WXPayUtil;
import com.wt.entity.Order;
import com.wt.mapper.OrderMapper;
import com.wt.service.IOrderService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.wt.utils.HttpClient;
import com.wt.vo.CommonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;


import java.math.BigDecimal;
import java.text.SimpleDateFormat;
import java.time.LocalDateTime;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

/**
 * <p>
 * 订单 服务实现类
 * </p>
 *
 * @author wt
 * @since 2022-08-12
 */
@Service
public class OrderServiceImpl extends ServiceImpl<OrderMapper, Order> implements IOrderService {

    @Autowired
    private OrderMapper orderMapper;

    //引入application.properties中的内容，将其复制值给value，并由value赋给对应的变量
    @Value("${weixin.appid}")
    private String appId;

    @Value("${weixin.mch_id}")
    private String mchId;

    @Value("${weixin.api_key}")
    private String apiKey;


    //根据订单号向微信端接口发送请求并返回二维码地址
    @Override
    public CommonResult selcPayCha(String orderNo) {
        System.out.println(orderNo);
        //1.根据订单号查询订单信息
        QueryWrapper<Order> wrapper = new QueryWrapper<>();
        wrapper.eq("order_no",orderNo);
        wrapper.eq("status",0);
        Order order = orderMapper.selectOne(wrapper);
        System.out.println(order);
        if (order!=null){
            try{

                //设置请求的参数------格式为xml格式
                Map<String,String> map = new HashMap<>();
                map.put("appid",appId);
                map.put("mch_id",mchId);
                map.put("nonce_str", WXPayUtil.generateNonceStr());
                map.put("body",order.getCourseTitle());
                map.put("out_trade_no",orderNo);
                //map.put("total_fee",new BigDecimal(order.getTotalFee()).multiply(new BigDecimal(100)).longValue()+"");
                map.put("total_fee",new BigDecimal(0.01).multiply(new BigDecimal(100)).longValue()+"");
                System.out.println("111111");
                map.put("spbill_create_ip","127.0.0.1");    //未来改为项目部署的ip
                System.out.println("22222222");
                map.put("notify_url","http:localhost:9000/pay/back");
                map.put("trade_type","NATIVE");

                //创建HttpClient对象 作用远程调用
                HttpClient client = new HttpClient("https://api.mch.weixin.qq.com/pay/unifiedorder");
                //支持https协议
                client.setHttps(true);
                //设置请求的参数
                client.setXmlParam(WXPayUtil.generateSignedXml(map,apiKey));
                //发送请求
                client.post();
                //获取请求的响应结果
                String content = client.getContent();
                System.out.println(content);
                Map<String, String> maps = WXPayUtil.xmlToMap(content);
                System.out.println("33333333333333");
                System.out.println(maps.get("result_code"));
                if (maps.get("result_code").equals("SUCCESS")){
                    Map<String,String> result = new HashMap<>();
                    result.put("codeUrl",maps.get("code_url"));
                    result.put("price",order.getTotalFee());
                    result.put("orderNo",orderNo);
                    return new CommonResult(2000,"二维码生成成功",result);
                }

            }catch (Exception e){

            }


        }
        return new CommonResult(5000,"查询失败",123);

    }

    //查询订单状态
    @Override
    public CommonResult queryPayStatus(String orderNo) {
        try{
            //1.根据状态查询微信支付的情况
            HttpClient client = new HttpClient("https://api.mch.weixin.qq.com/pay/orderquery");
            Map<String,String> params = new HashMap<>();
            params.put("appid",appId);
            params.put("mch_id",mchId);
            params.put("out_trade_no",orderNo);
            params.put("nonce_str",WXPayUtil.generateNonceStr());

            client.setHttps(true);
            client.setXmlParam(WXPayUtil.generateSignedXml(params,apiKey));
            client.post();

            String content = client.getContent();
            Map<String,String> map = WXPayUtil.xmlToMap(content);
            if (map.get("trade_state").equals("SUCCESS")){
                //1.修改订单状态
                Order order = new Order();
                order.setStatus(1);
                LocalDateTime now = LocalDateTime.now();
                order.setGmtModified(now);
                QueryWrapper<Order> wrapper = new QueryWrapper<>();
                wrapper.eq("order_no",orderNo);
                wrapper.eq("status",0);
                orderMapper.update(order,wrapper);
                return new CommonResult(2000,"支付成功",null);
            }
        }catch (Exception e){

        }
        return new CommonResult(5000,"支付失败",null);
    }
}

3.前端 

3.1 main文件的配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import axios from "axios"

Vue.config.productionTip = false

//设置基础url路径
axios.defaults.baseURL="http://localhost:9000"
//把axios挂载到Vue对象中，以后在Vue对象中如果使用axios直接可以用$http名称($http可以随意替换)
Vue.prototype.$http=axios;


new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

3.2 下载相应的vue-qr插件

npm install vue-qr --------借助vue-qr 可以把二维码地址转换为二维码图片

3.3 前端布局

<template>
  <div id="app">
      <el-button  type="primary" @click="pay">支付</el-button>
      <el-dialog
          title="收银台"
          :visible.sync="dialogVisible"
          width="30%"
      >
          <div>
              <p>微信支付{{payResult.price}} 元</p>
              <div style="border: 1px solid #f3f3f3;width: 220px;padding: 10px;margin: 0px auto">
<!--                  使用vue-qr组件-->
                  <vue-qr
                        :logoSrc="require('@/assets/logo.png')"
                        :margin="0"
                        :size="200"
                        :text="payResult.codeUrl"
                        colorDark="green"
                        colorLight="#fff"
                  >

                  </vue-qr>
              </div>
          </div>
          <el-divider></el-divider>
          <div style="font-size: 13px">
              提示:<br>
              支付成功前请勿手动关闭页面
              二维码两小时内有效，请及时扫码支付
          </div>
      </el-dialog>
  </div>
</template>

<script>
//引入vue-qr组件
import vueQr from "vue-qr"

export default {
    name: 'app',
    components:{
     //注册vue-qr组件
      vueQr
    },
    data(){
        return {
            orderNo:"def097eeafe44d7b8df",
            payResult:{
                price:0,
                  //借助vue-qr 可以把二维码地址转换为二维码图片
                codeUrl:"",
                orderNo:""
            },
            dialogVisible:false,
            timer1:""
        }
    },
    created() {

    },
    methods:{
        queryPayStatus(orderNo){
            console.log("====================")
            console.log(orderNo)
            //根据订单号查询支付状态
            this.$http.post("/wt/order/queryPayStatus/"+orderNo).then(result => {

                if (result.data.code===2000){
                    //消除定时器
                    clearInterval(this.timer1);
                    this.timer1 = null;
                    this.$message.success("支付成功");
                    this.dialogVisible=false;
                }
            })
        },
        pay(){
            this.dialogVisible = true
            this.$http.post("/wt/order/payCha/"+this.orderNo).then(result=>{
                if (result.data.code==2000){
                    this.payResult = result.data.data;
                    console.log(result)
                    
                    //定时器，每3秒发送一次订单状态查询请求
                    this.timer1 = setInterval(()=>{
                        this.queryPayStatus(this.payResult.orderNo)
                    },3000)
                }

            })
        }
  }
}
</script>

<style>

</style>

子非鱼呀
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
WXPAYSDK:微信支付 Java SDK
05-26
微信支付 Java SDK 对中给出的API进行了封装。 com.github.wxpay.sdk.WXPay类下提供了对应的方法： 方法名 说明 microPay 刷卡支付 unifiedOrder 统一下单 orderQuery 查询订单 reverse 撤销订单 closeOrder 关闭订单 refund 申请退款 refundQuery 查询退款 downloadBill 下载对账单 report 交易保障 shortUrl 转换短链接 authCodeToOpenid 授权码查询openid 注意: 证书文件不能放在web服务器虚拟目录，应放在有访问权限控制的目录中，防止被他人下载 建议将证书文件名改为复杂且不容易猜测的文件名 商户服务器要做好病毒和木马防护工作，不被非法侵入者窃取证书文件 请妥善保管商户支付密钥、公众帐号SECRET，避免密钥泄露 参数为Map<String,
springboot整合微信支付
又逢乱世
08-27 3907
微信支付 springboot整合微信支付 java微信支付 SpringSecurity oauth2 安全资源和授权中心 SpringSecurity登录接口自定义返回字段、SpringSecurity手机号密码登录、SpringSecurity免密登录 i18n国际化 微信登录 微信扫一扫
微信支付的申请流程
01-08
第一步：注册公众号（类型须为：服务号） 请根据营业执照类型选择以下主体注册：个体工商户| 企业/公司| 政府| 媒体| 其他类型。** 第二步：认证公众号** 公众号认证后才可申请微信支付，认证费：300元/次。 第三步：提交资料申请微信支付 登录公众平台，点击左侧菜单【微信支付】，开始填写资料等待审核，审核时间为1-5个工作日内。 第四步：开户成功，登录商户平台进行验证 资料审核通过后，请登录联系人邮箱查收商户号和密码，并登录商户平台填写财付通备付金打的小额资金数额，完成账户验证。 第五步：在线签署协议 本协议为线上电子协议，签署后方可进行交易及资金结算，签署完立即生效。 作者：17805
亲测全套支付可用(微信支付宝)复制粘贴即可跑
weixin_43285931的博客
09-16 5664
亲测全套支付可用(微信支付宝)复制粘贴即可跑 /** * @Auther: Mike * @Date: 2018/8/30 15:11 * @Description: 支付宝后台接口 */ @Slf4j @RestController @RequestMapping(value = "/pay") @Api(value="支付", tags="支付模块") public class PayController { @Autowired AliPayService aliPaySe
微信用户授权（微信支付前必须准备）
m0_61663332的博客
02-07 106
微信公众号用户网页授权，授权后拿code换取openid
重磅！GitHub 推出 AI 自动写代码神器，再也不用到处找代码了….
Java技术栈，分享最主流的Java技术
07-13 1万+
点击关注公众号，Java干货及时送达大家好，我是你们的码农大哥——栈长。3 年前，自 微软收购 Github 后大动作不断啊，两年多之前就让 Github 私库免费了！，后面还推出了 Gi...
写代码自动操作，更给力！
weixin_33729196的博客
02-14 72
这段时间没有写博客，思考了很多技术之外的东西，感觉有时候停一停思考一下生活还是不错的。 在日常生活中，我们借助计算机系统解决了许多问题，网页提供了这么一个处理界面，而这个界面上的某些操作是可以通过代码来执行的，这样我们就可以将这个过程全部交给计算机来处理了。本篇将会通过一个签到系统来说明。 假如，我们有一个签到系统，每天都需要登录系统，点击“签到”按钮来记录每天的考勤，当然拿这个过程来自动化仅...
vue 微信支付及支付宝支付
weixin_45595203的博客
06-21 918
vue如何实现微信支付及支付宝支付
电商平台接入第三方支付接口之微信支付接入订单系统
linfujian1999的博客
06-29 9538
边做边更新……………… 先接入微信接口： 支付方式：用户扫描二维码支付 接口类型：扫码支付之模式二 先copy一份模式二的业务流程时序图 业务流程说明： （1）商户后台系统根据用户选购的商品生成订单。 （2）用户确认支付后调用微信支付【统一下单API】生成预支付交易； （3）微信支付系统收到请求后生成预支付交易单，并返回交易会话的二维码链接code_url。 （4）商户后台系统根据返回的
Springboot----项目整合微信支付（获取支付二维码）
赵四司机的博客
06-26 1万+
Springboot项目整合微信Native支付，实现的是用户下单的逻辑功能
wxpay-sdk
asdfgh
08-20 319
wxpay-sdk
完美解决Cannot resolve com.github.wxpay:wxpay-sdk:3.0.9报错
程序羊的博客
05-09 5200
本文主要讲解Java项目中使用微信支付时，如何解决在maven中引入wxpay-sdk出现了`Cannot resolve com.github.wxpay:wxpay-sdk:3.0.9`的错误。
Springboot----项目整合微信支付（处理微信支付回调通知）
赵四司机的博客
06-29 2921
获取支付二维码之后，当用户扫码完成支付，微信后台会向商户发起回调通知，微信支付接口文档中是这样介绍的：用户支付完成后，微信会把相关支付结果和用户信息发送给商户，商户需要接收处理该消息，并返回应答。........................
如何用AndroidStudio AVDManager加载自定义镜像
NEY10MAR的博客
09-17 1623
文章目录前言一、Image制作二、AVD的创建三、镜像移植 前言 由于目前国际疫情原因，芯片供不应求，许多手机或者汽车厂商只能是缩减产量，而在项目开发时也要面对着一系列资源不足的情况，所以这里给出一个利用avd manager启动自己的镜像的参考文档，希望对大家的工作有所帮助。 提示：以下是本篇文章正文内容 一、Image制作 利用安卓源码，或者是自己修改过的源码编译成镜像 1.进入源码目录 2.source build/envsetup.sh 3.lunch 此时有很多镜像供选择 我们选择aosp.
Android Studio 下载设备虚拟机镜像
秋知叶i
01-08 8865
这里以下载手机虚拟机镜像为示例 需要用到的软件 Android SDK Tools 不知道如何安装Android SDK Tools 的参考 安装Android SDK Tools 1.选择所需要的镜像版本，点击install package 2.同意协议，点击install 3.等待下载 4.完成安装如图所示 ...
vue对接微信支付 后端用 python
最新发布
持之以恒
03-15 13
订单号：支付金额：支付
前端微信支付与支付宝支付
weixin_48333948的博客
12-07 637
业务场景介绍： H5移动端支持微信支付 [ 微信支付分为微信内支付（JSAPI支付官方API）和微信外支付（H5支付官方API）] && 支付宝支付[手机网站支付转 APP 支付 官方API ] 订单生成逻辑：前端请求后端提交订单，后端去和微信或者支付宝对接生成订单（后续支付都是这个逻辑进行的对接 移动端微信支付 在移动端微信支付分为微信内支付和微信外支付。 1.在订单组件中选择支付方式之后在支付页面先去判断是否是在微信内： //判断是否微信 is_weixn(){
【SpringBoot应用篇】接入微信支付
输入技术、输出想法
06-23 1097
微信支付
SpringBoot实现小程序微信支付（超级详细）
qq_19007169的博客
03-21 5934
SpringBoot微信支付开发
Spring Boot中的微信支付（小程序）
weixin_43248862的博客
05-23 2782
微信支付是企业级项目中经常使用到的功能，作为后端开发人员，完整地掌握该技术是十分有必要的。
Springboot----项目整合微信支付（引入延迟队列实现订单过期取消以及商户主动查单）
热门推荐
赵四司机的博客
06-30 1万+
介绍了如何使用RabbitMQ实现订单过期自动取消以及如何采用RabbitMQ实现商户主动向微信支付后台查询订单状态，一石二鸟。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

子非鱼呀

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值