微信支付系统--前后端完全分离

不想秃头的小杨

已于 2022-08-22 21:27:08 修改

阅读量235

点赞数

分类专栏： Vue 文章标签：微信

于 2022-08-17 20:35:58 首次发布

本文链接：https://blog.csdn.net/ysuhang/article/details/126393112

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.流程图

2.微信支付需要的依赖

3.创建一个Httpclient工具类-使用默认浏览器进行远程调用

6.1.1.打开cmd命令窗口,输入命令打开窗口

8.1.2. 新建

8.2.安装element插件和axios的依赖(省略)

8.3.引入axios和设置axios基础路径

8.4前端界面

1.流程图

微信支付开发文档地址:

https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_1https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_1

2.微信支付需要的依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.12.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.qy151</groupId>
    <artifactId>0813-wxzf</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>0813-wxzf</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.2</version>
        </dependency>

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.2</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>



        <!--<!-微信支付的依赖-->
        <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>
            <version>4.5.3</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

3.创建一个Httpclient工具类-使用默认浏览器进行远程调用

package com.qy151.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;
   }
}

4.创建实体类

package com.qy151.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

/**
 * @BelongsProject: 0813-wxzf
 * @BelongsPackage: com.qy151.entity
 * @unthor : YSH
 * @date : 2022/8/12 21:46
 * @Description: TODO
 */
@Data
@TableName("t_order")
public class Order {

    @TableId(type = IdType.ASSIGN_ID)
    private String id;
    private String orderNo;
    private String courseId;
    private String courseTitle;
    private String courseCover;
    private String teacherName;
    private String memberId;
    private String nickname;
    private String mobile;
    private Double totalFee;
    private Integer payType;
    private Integer status;
    private Integer isDeleted;
    private String gmtCreate;
    private String gmtModified ;
}

5.后端

5.1解决跨域问题的配置类

package com.qy151.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
 
    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;
 
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

5.2Controller层

package com.qy151.controller;

import com.qy151.service.OrderService;
import com.qy151.vo.CommonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @BelongsProject: 0813-wxzf
 * @BelongsPackage: com.qy151.controller
 * @unthor : YSH
 * @date : 2022/8/12 21:29
 * @Description: TODO
 */
@RestController
@RequestMapping("order")
public class OrderController {

    @Autowired
    private OrderService orderService;

    //创建订单信息
    @PostMapping("createNavite/{orderNo}")
    public CommonResult createNative(@PathVariable String orderNo){
        return orderService.createNative(orderNo);
    }



    //根据订单状态查询订单的支付情况
    @PostMapping("queryPayStatus/{orderNo}")
    public CommonResult queryPayStatus(@PathVariable String orderNo){
        return orderService.queryPayStatus(orderNo);
    }
}

5.3service层

package com.qy151.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.github.wxpay.sdk.WXPayUtil;
import com.qy151.dao.OrderMapper;
import com.qy151.entity.Order;
import com.qy151.utils.HttpClient;
import com.qy151.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.util.Date;
import java.util.HashMap;
import java.util.Map;

/**
 * @BelongsProject: 0813-wxzf
 * @BelongsPackage: com.qy151.service
 * @unthor : YSH
 * @date : 2022/8/12 21:34
 * @Description: TODO
 */
@Service
public class OrderService {

    @Autowired
    private OrderMapper orderMapper;

    @Value("${weixin.appid}")
    private String appId;
    @Value("${weixin.mch_id}")
    private String mchId;
    @Value("${weixin.api_key}")
    private String apiKey;

    public CommonResult createNative(String orderNo) {
        //1.根据订单号查询出订单信息
        QueryWrapper<Order> wrapper = new QueryWrapper<>();;
        wrapper.eq("order_no",orderNo);
        wrapper.eq("status",0);
        Order order = orderMapper.selectOne(wrapper);
        if (order!=null){
            try {
                //设置请求的参数--格式为xml格式
                Map<String, String> params = new HashMap<>();//请求参数
                //公众账号ID
                params.put("appid", appId);
                //商户号
                params.put("mch_id", mchId);
                //随机字符串
                params.put("nonce_str", WXPayUtil.generateNonceStr());
                //商品描述
                params.put("body", order.getCourseTitle());
                //订单号
                params.put("out_trade_no", orderNo);
                //支付金额
              //活数据  params.put("total_fee", new BigDecimal(order.getTotalFee()).multiply(new BigDecimal(100)).longValue() + "");

                //死数据
                params.put("total_fee", new BigDecimal(0.01).multiply(new BigDecimal(100)).longValue() + "");

                //终端IP
                params.put("spbill_create_ip", "127.0.0.1");
                //通知地址
                params.put("notify_url", "http://localhost:9000/pay/back");
                //交易类型
                params.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(params,apiKey));
                //发送请求
                client.post();
                //获取请求得到响应结果
                String content = client.getContent();

                Map<String, String> map = WXPayUtil.xmlToMap(content);
                if (map.get("result_code").equals("SUCCESS")){
                    Map<String,Object> result = new HashMap<>();
                    result.put("codeUrl",map.get("code_url"));
                    result.put("price",order.getTotalFee());
                    result.put("orderNo",orderNo);
                    return new CommonResult(2000,"生成二维码成功",result);
                }

            }catch (Exception e){

            }
        }
        return new CommonResult(5000,"订单失效",null);
    }

    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);
                order.setGmtModified(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()));
                QueryWrapper<Order> wrapper = new QueryWrapper<>();
                wrapper.eq("order_no",orderNo);
                wrapper.eq("status",0);
                orderMapper.update(order,wrapper);


                //TODO 2.往支付记录中添加支付记录


                return new CommonResult(2000,"支付成功",null);
            }

        }catch (Exception e){
        }
        return new CommonResult(5000,"支付失败",null);
    }
}

5.4mapper层

package com.qy151.dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.qy151.entity.Order;
import org.apache.ibatis.annotations.Mapper;

/**
 * @BelongsProject: 0813-wxzf
 * @BelongsPackage: com.qy151.dao
 * @unthor : YSH
 * @date : 2022/8/12 21:41
 * @Description: TODO
 */
@Mapper
public interface OrderMapper extends BaseMapper<Order> {
}

5.5application配置文件



#数据源
server.port=9000
spring.datasource.url=jdbc:mysql://localhost:3306/weixin?serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver









logging.level.com.qy151.weixinpay.dao=debug
# 微信的appid 商家id 密钥---申请你无法申请因为需要营业执照--这里一个老师的
weixin.appid=wx8087d8149331d27c
weixin.mch_id=1532192611
weixin.api_key=Cc158380629071583806290715838062

6.前端

6.1.新建vue项目

6.1.1.打开cmd命令窗口,输入命令打开窗口

vue ui

8.1.2. 新建

8.2.安装element插件和axios的依赖(省略)

8.3.引入axios和设置axios基础路径

8.4前端界面

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

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

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

  },


  methods:{
    //根据订单号查询订单状态
    queryPayStatus(orderNo){
      this.$http.post("/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("/order/createNavite/"+this.orderNo).then(result=>{
        if (result.data.code===2000) {
          this.payResult = result.data.result;
          //设置一个定时任务,每隔三秒调用一次
          this.timer1 = setInterval(()=>{
            //每隔三秒钟通过订单号查询一次订单状态
            this.queryPayStatus(this.payResult.orderNo)
          },3000);
        }
      })
    }
  }
}
</script>

<style>

</style>