JAVA使用Springboot+MP+VUE+Swagger前后端分离进行微信支付

1.微信支付流程图

官方文档流程图

这里根据自己的理解画的图

2.后端代码

2.1依赖的引入

springboot工程创建
这里我创建的是springboot工程导入的工具类有Lombok、Spring Web、 MySQL Driver、
MP工具类
maven依赖导入

<!--        自动生成依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>

        <!--        mp包依赖-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.2</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.5.2</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </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>
<!--        swigger-->
        <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>swagger-bootstrap-ui</artifactId>
            <version>1.9.6</version>
        </dependency>
        <dependency>
            <groupId>com.spring4all</groupId>
            <artifactId>swagger-spring-boot-starter</artifactId>
            <version>1.9.1.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.8</version>
        </dependency>
<!--        java端发送请求 在java端模拟浏览器远程访问微信接口-->
        <dependency>
            <groupId>com.github.wxpay</groupId>
            <artifactId>wxpay-sdk</artifactId>
            <version>0.0.3</version>
        </dependency>
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.5.13</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.5.2</version>
        </dependency>
    </dependencies>

2.2 配置application.properties配置文件

#端口号
server.port=9000

#使用druid连接数据库
spring.datasource.druid.username=root
spring.datasource.druid.password=123456
spring.datasource.druid.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.druid.url=jdbc:mysql://localhost:3306/2?useSSL=false&useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai

#微信的appid 商家id 秘钥  这里需要申请营业执照才能使用
weixin.appid=wx8087d8149331d27c
weixin.mch_id=1532192611
weixin.api_key=Cc158380629071583806290715838062

2.3 引入工具类

放在utils目录下

/**
 * 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 数据库建表语句

一共两个表
t_order表

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for t_order
-- ----------------------------
DROP TABLE IF EXISTS `t_order`;
CREATE TABLE `t_order`  (
  `id` char(19) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '',
  `order_no` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '订单号',
  `course_id` varchar(19) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '课程id',
  `course_title` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '课程名称',
  `course_cover` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '课程封面',
  `teacher_name` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '讲师名称',
  `member_id` varchar(19) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '会员id',
  `nickname` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '会员昵称',
  `mobile` varchar(11) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '会员手机',
  `total_fee` decimal(10, 2) NULL DEFAULT 0.01 COMMENT '订单金额（分）',
  `pay_type` tinyint(3) NULL DEFAULT NULL COMMENT '支付类型（0：微信 1：支付宝）',
  `status` tinyint(3) NULL DEFAULT NULL COMMENT '订单状态（0：未支付 1：已支付）',
  `is_deleted` tinyint(1) UNSIGNED NOT NULL DEFAULT 0 COMMENT '逻辑删除 1（true）已删除， 0（false）未删除',
  `gmt_create` datetime(0) NOT NULL COMMENT '创建时间',
  `gmt_modified` datetime(0) NOT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE INDEX `ux_order_no`(`order_no`) USING BTREE,
  INDEX `idx_course_id`(`course_id`) USING BTREE,
  INDEX `idx_member_id`(`member_id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '订单' ROW_FORMAT = Compact;

-- ----------------------------
-- Records of t_order
-- ----------------------------
INSERT INTO `t_order` VALUES ('0195f142a5824e0b88f', 'c60801fbdd2d45f9ad4', '1408424998648799234', 'Java初中级系统架构师组合套餐课（含12门课程）', 'https://kk-books.oss-cn-hangzhou.aliyuncs.com/44df362b-8d51-43a9-b823-090b02a3f2e8.jpg', '张飞', '1402269617551667201', '仲梦君', '15092182775', 32.00, 1, 1, 0, '2021-06-25 23:03:35', '2021-06-25 23:03:35');
INSERT INTO `t_order` VALUES ('21e04d165a324e59b96', '0322b37415384df0bbf', '1408421906918268930', '从零学习netty网络IO通讯开发视频教程', 'https://kk-books.oss-cn-hangzhou.aliyuncs.com/7b4a1bc6-b016-4afa-84c2-9ecfa0fae14d.jpg', '张飞', '1306495996639842305', '邱成相', '15092182541', 120.00, 1, 1, 0, '2020-06-25 23:02:27', '2020-06-25 23:02:27');
INSERT INTO `t_order` VALUES ('383714ba15e9474eb1a', 'e334ce2a6b1d4bc6936', '1408411851292532738', '姜维自传', 'https://kk-books.oss-cn-hangzhou.aliyuncs.com/8f731951-d606-4b86-8d4d-1cea38ee39f5.jpg', '姜维', '1408590478277685250', '李白', '15972331424', 0.01, 0, 0, 0, '2021-06-26 09:08:56', '2021-06-26 09:08:56');
INSERT INTO `t_order` VALUES ('39a3553e85bb4d69894', '9de332298489407fa81', '1408413427792994305', '成功的秘诀', 'https://kk-books.oss-cn-hangzhou.aliyuncs.com/03fa648e-a619-4500-a832-4750b3fa44ec.jpg', '张飞', '1402269617551667201', '仲梦君', '15092182775', 20.00, 0, 1, 0, '2021-06-25 23:09:34', '2021-06-25 23:09:50');
INSERT INTO `t_order` VALUES ('3fbd422bd60a4614a3b', '3d2e34a108174a67aba', '1408410177668767745', '水淹七军', 'https://kk-books.oss-cn-hangzhou.aliyuncs.com/74b7e90d-8463-4801-bdf8-52efd9cb6e41.jpg', '关羽', '1448200763102928897', NULL, '15660773278', 0.01, 0, 0, 0, '2021-10-13 16:17:05', '2021-10-13 16:17:05');
INSERT INTO `t_order` VALUES ('699aba8a2753439eb6a', '858c6dc73bb84c898a5', '1408409971229319170', '大白话领域驱动设计', 'https://kk-books.oss-cn-hangzhou.aliyuncs.com/5ae6a380-dbd6-4e74-8c99-a8c2ede79455.jpg', '张飞', '1408590478277685250', '李白', '15972331424', 0.01, 0, 1, 0, '2021-06-26 08:59:31', '2021-06-26 08:59:47');
INSERT INTO `t_order` VALUES ('7951387ce957484c80c', '2e4a952c118b4c47a79', '1408410177668767745', '水淹七军', 'https://kk-books.oss-cn-hangzhou.aliyuncs.com/74b7e90d-8463-4801-bdf8-52efd9cb6e41.jpg', '关羽', '1402268479037206530', '舒隆振', '15092182328', 0.01, 0, 1, 0, '2021-06-25 23:22:56', '2021-06-25 23:24:02');
INSERT INTO `t_order` VALUES ('9de56a01d7fb4a9895a', '7ff948d22cf04e61a06', '1408411851292532738', '姜维自传', 'https://kk-books.oss-cn-hangzhou.aliyuncs.com/8f731951-d606-4b86-8d4d-1cea38ee39f5.jpg', '姜维', '1448200763102928897', NULL, '15660773278', 0.01, 0, 1, 0, '2021-10-13 16:37:28', '2021-10-13 16:38:20');
INSERT INTO `t_order` VALUES ('b25d3987e7e94092b53', 'da27dfff1ae440c2aed', '1408411851292532738', '姜维自传', 'https://kk-books.oss-cn-hangzhou.aliyuncs.com/8f731951-d606-4b86-8d4d-1cea38ee39f5.jpg', '姜维', '1306495996639842305', '邱成相', '15092182541', 100.00, 0, 0, 0, '2019-06-25 21:54:13', '2019-06-25 21:54:13');
INSERT INTO `t_order` VALUES ('b9d4382ae2d84c568f9', '67164fb9916a4218a94', '1408410177668767745', '水淹七军', 'https://kk-books.oss-cn-hangzhou.aliyuncs.com/74b7e90d-8463-4801-bdf8-52efd9cb6e41.jpg', '关羽', '1406792661091491841', '景晨曦', '15007124873', 10.00, 0, 1, 0, '2021-06-25 23:09:51', '2021-06-25 23:10:13');
INSERT INTO `t_order` VALUES ('c1fddde4bdae4ad68a6', 'def097eeafe44d7b8dd', '1408425438857781250', '亿级电商微服务优惠劵系统全实现', 'https://kk-books.oss-cn-hangzhou.aliyuncs.com/08a1a97e-a059-4ed7-a026-131890a4700f.JPG', '张飞', '1402269617551667201', '仲梦君', '15092182775', 0.01, 0, 0, 0, '2021-06-25 23:11:04', '2021-06-25 23:11:04');
INSERT INTO `t_order` VALUES ('dbad9d7063ab47a9b8b', '821d7109fa6d4520982', '1408409971229319170', '大白话领域驱动设计', 'https://kk-books.oss-cn-hangzhou.aliyuncs.com/5ae6a380-dbd6-4e74-8c99-a8c2ede79455.jpg', '张飞', '1448200763102928897', NULL, '15660773278', 211.00, 1, 0, 0, '2021-10-13 16:16:42', '2021-10-13 16:16:42');
INSERT INTO `t_order` VALUES ('e5f80e6712894b8793c', '28d54a53bdf14c3c853', '1408409971229319170', '大白话领域驱动设计', 'https://kk-books.oss-cn-hangzhou.aliyuncs.com/5ae6a380-dbd6-4e74-8c99-a8c2ede79455.jpg', '张飞', '1402269617551667201', '仲梦君', '15092182775', 210.00, 0, 1, 0, '2018-06-25 21:54:13', '2018-06-25 21:54:13');
INSERT INTO `t_order` VALUES ('ea744617fe8d41128d7', '74c7a7bcf5f84c84a43', '1408411851292532738', '姜维自传', 'https://kk-books.oss-cn-hangzhou.aliyuncs.com/8f731951-d606-4b86-8d4d-1cea38ee39f5.jpg', '姜维', '1306147989314703362', '木白', '15700085997', 0.01, 0, 1, 0, '2021-10-27 17:54:32', '2021-10-27 17:54:49');

SET FOREIGN_KEY_CHECKS = 1;

一个支付表 t_pay_log

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for t_pay_log
-- ----------------------------
DROP TABLE IF EXISTS `t_pay_log`;
CREATE TABLE `t_pay_log`  (
  `id` char(19) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '',
  `order_no` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '订单号',
  `pay_time` datetime(0) NULL DEFAULT NULL COMMENT '支付完成时间',
  `total_fee` decimal(10, 2) NULL DEFAULT 0.01 COMMENT '支付金额（分）',
  `transaction_id` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '交易流水号',
  `trade_state` char(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '交易状态',
  `pay_type` tinyint(3) NOT NULL DEFAULT 0 COMMENT '支付类型（0：微信 1：支付宝）',
  `attr` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL COMMENT '其他属性',
  `is_deleted` tinyint(1) UNSIGNED NOT NULL DEFAULT 0 COMMENT '逻辑删除 1（true）已删除， 0（false）未删除',
  `gmt_create` datetime(0) NOT NULL COMMENT '创建时间',
  `gmt_modified` datetime(0) NOT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE INDEX `uk_order_no`(`order_no`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '支付日志表' ROW_FORMAT = Compact;

SET FOREIGN_KEY_CHECKS = 1;

2.5 使用MP快速生成各个层级对应的代码

public class Generator {
    public static void main(String[] args) {
        FastAutoGenerator.create("jdbc:mysql://localhost:3306/2?serverTimezone=Asia/Shanghai", "root", "123456")
                .globalConfig(builder -> {
                    builder.author("党达") // 设置作者
                            .enableSwagger() // 开启 swagger 模式
                            .fileOverride() // 覆盖已生成文件
                            .outputDir(".\\src\\main\\java\\"); // 指定输出目录
                })
                .packageConfig(builder -> {
                    builder.parent("com.dd") // 设置父包名
//                            .moduleName() // 设置父包模块名
                            .pathInfo(Collections.singletonMap(OutputFile.xml, "src\\main\\resources\\mapper\\")); // 设置mapperXml生成路径
                })
                .strategyConfig(builder -> {
                    builder.addInclude("t_order","t_pay_log")// 设置需要生成的表名
                            .addTablePrefix("t_"); // 设置过滤表前缀
                })
                .templateEngine(new FreemarkerTemplateEngine()) // 使用Freemarker引擎模板，默认的是Velocity引擎模板
                .execute();

    }
}

2.6 创建一个Vo包用于接受前端参数并返回

//vo也是实体类的一种   视图对象 接受使用网页对象
@Data
@AllArgsConstructor
@NoArgsConstructor
@ApiModel("接收前端数据的返回类型")
public class CommonResult {
    @ApiModelProperty("状态码 2000 为登陆成功 5000为登陆失败")
    private Integer code;
    @ApiModelProperty("消息信息")
    private String msg;
    @ApiModelProperty("响应的结果数据")
    private Object data;

}

2.7 Controller控制层代码

@RestController
@CrossOrigin
@RequestMapping("/order")
public class OrderController {

@Autowired
private IOrderService orderService;

    @PostMapping("/createNative/{orderNo}")
    public CommonResult createNative(@PathVariable String orderNo){
        return orderService.createNative(orderNo);
     }
//查询订单状态
    @PostMapping("/queryPayStatus/{orderNo}")
    public CommonResult queryPayStatus(@PathVariable String orderNo){
        return orderService.queryPayStatus(orderNo);
    }
}

2.8 Serve层代码

实现类

@Service
public class OrderServiceImpl extends ServiceImpl<OrderMapper, Order> implements IOrderService {
    @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 {
                //创建httpClient对象 作为远程调用
                HttpClient client = new HttpClient("https://api.mch.weixin.qq.com/pay/unifiedorder");
//        支持http协议
                client.setHttps(true);
                //   设置请求的参数 为XML格式
                Map<String, String> params = new HashMap<>();//请求参数
                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("spbill_create_ip", "127.0.0.1");//未来写成项目部署IP
                params.put("notify_url", "http://localhost:9000/pay/back");
                params.put("trade_type", "NATIVE");
//        设置请求参数
                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) {
                e.printStackTrace();
            }
        }
        return new CommonResult(5000, "订单失败", null);
    }

    @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);
                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);
//                2.向支付记录表中添加支付记录
            return new CommonResult(2000,"支付成功",null);
            }
        }catch (Exception e){
        }
        return new CommonResult(5000,"支付失败",null);
    }
}

接口

public interface IOrderService extends IService<Order> {
    CommonResult createNative(String orderNo);
    CommonResult queryPayStatus(String orderNo);
}

3.使用Swagger接口文档进行测试

记得要在springboot启动类上加入开启Swagger文档的注解

4.使用Vue进行前端代码的编写

4.1main.js进行配置

4.2 编写前端页面App.vue

这里有一个插件qr记得安装

<template>
    <div>

        <el-button type="primary" @click="pay">支付el-button>
        <el-dialog
                title="收银台"
                :visible.sync="dialogVisible"
                width="30%">
            <div style="text-align: center">
                <p>微信支付{{payResult.price}}元p>
                <div style="border: 10px solid grey;width:160px;padding:10px;margin:0 auto">
                    <vue-qr
                            :text="payResult.codeUrl"
                            colorLight="#fff"
                            :size="160"
                            colorDark="green"
                            :logo-src="require('@/assets/logo.png')"
                    >
                    vue-qr>
                div>
                <el-divider>el-divider>
                <div style="font-size: 13px">
                    提示:<br>
                    支付成功前请勿手动关闭页面<br>
                    二维码两个小时有效，请及时扫码支付<br>
                div>
            div>
        el-dialog>
    div>

template>

<script>
    import vueQr from 'vue-qr'

    export default {
        components:{
            vueQr
        },
        name: "WeChatPay",
        data(){
            return{
                orderNo:"74c7a7bcf5f84c84nhf9",
                payResult:{
                    codeUrl:"",
                    price:0,
                    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/createNative/"+this.orderNo).then(result=>{
                    if (result.data.code===2000){
                            this.payResult=result.data.result;
                        //    设置一个定时任务，每隔3秒调用一次
                        this.timer1=setInterval(()=>{
                            this.queryPayStatus(this.payResult.orderNo)
                        },3000);
                    }
                    this.payResult = result.data.data;
                })
            },
        }
    }
script>

<style scoped>

style>

到这里前端代码就完成了下面开始前后端测试

5.测试

点击支付弹出二维码

对应数据库的这条数据
支付成功订单