谷粒学院9—微信支付和统计分析


阅读数: 次   

在品优购中介绍过微信支付，在传智健康中也使用了Echarts实现数据统计。这里纯当作复习，或者另一种层面来说，本篇介绍微服务架构下的微信支付和统计分析。

微信支付

1.开发订单模块

在service模块下创建子模块service_order

1.1订单controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@RestController
@CrossOrigin
@RequestMapping("/serviceorder/order")
public class TOrderController {

    @Autowired
    private TOrderService orderService;

    //根据课程id和请求头传过来的token生成订单
    @PostMapping("createOrder/{courseId}")
    public R createOrder(@PathVariable String courseId, HttpServletRequest request){
        //返回订单号
        String orderNo = orderService.createOrder(courseId, JwtUtils.getMemberIdByJwtToken(request));
        return R.ok().data("orderId", orderNo);
    }

    //根据id获取订单信息
    @GetMapping("getOrder/{orderId}")
    public R get(@PathVariable String orderId) {
        QueryWrapper<TOrder> wrapper = new QueryWrapper<>();
        wrapper.eq("order_no",orderId);
        TOrder order = orderService.getOne(wrapper);
        return R.ok().data("item", order);
    }
}

1.2Feign实现远程调用

在service_edu创建接口实现根据课程id获取课程信息，返回课程信息对象

1
2
3
4
5
6
7
8
//根据课程id查询课程信息
@GetMapping("getDto/{courseId}")
public com.atguigu.commonutils.vo.CourseInfoForm getCourseInfoDto(@PathVariable String courseId) {
        CourseInfoForm courseInfoForm = courseService.getCourseInfo(courseId);
        com.atguigu.commonutils.vo.CourseInfoForm courseInfo = new com.atguigu.commonutils.vo.CourseInfoForm();
        BeanUtils.copyProperties(courseInfoForm,courseInfo);
        return courseInfo;
}

在service_ucenter创建接口实现用户id获取用户信息，返回用户信息对象

1
2
3
4
5
6
7
8
9
//根据token字符串获取用户信息
@PostMapping("getInfoUc/{id}")
public com.atguigu.commonutils.vo.UcenterMember getInfo(@PathVariable String id) {
        //根据用户id获取用户信息
        UcenterMember ucenterMember = memberService.getById(id);
        com.atguigu.commonutils.vo.UcenterMember memeber = new com.atguigu.commonutils.vo.UcenterMember();
        BeanUtils.copyProperties(ucenterMember,memeber);
        return memeber;
}

在service_order模块创建接口，实现远程调用

1
2
3
4
5
6
7
@Component
@FeignClient(name = "service-edu")
public interface EduClient {

    @GetMapping("/serviceedu/coursefront/getOrderCourseInfo/{courseId}")
    public com.atguigu.commonutils.vo.CourseWebVo getOrderCourseInfo(@PathVariable("courseId") String courseId);
}
1
2
3
4
5
6
7
@Component
@FeignClient(name = "service-ucenter")
public interface UcenterClient {
    //根据id获取用户信息
    @GetMapping("/api/ucenter/member/getInfoById/{id}")
    public UcenterMember getInfoById(@PathVariable("id") String id);
}

1.3订单service

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@Autowired
private EduClient eduClient;
@Autowired
private UcenterClient ucenterClient;

@Override
public String createOrder(String courseId, String memberId) {
    //查询课程信息
    CourseWebVo courseDto = eduClient.getOrderCourseInfo(courseId);
    //查询用户信息
    UcenterMember ucenterMember = ucenterClient.getInfoById(memberId);

    //创建订单
    TOrder order = new TOrder();
    order.setOrderNo(OrderNoUtil.getOrderNo());
    order.setCourseId(courseId);
    order.setCourseTitle(courseDto.getTitle());
    order.setCourseCover(courseDto.getCover());
    order.setTeacherName(courseDto.getTeacherName());
    order.setTotalFee(courseDto.getPrice());
    order.setMemberId(memberId);
    order.setMobile(ucenterMember.getMobile());
    order.setNickname(ucenterMember.getNickname());
    order.setStatus(0);
    order.setPayType(1);
    baseMapper.insert(order);

    return order.getOrderNo();
}

1.4总结

05-生成订单接口

2.微信支付接口

2.1生成微信支付二维码

引入微信支付依赖

1
2
3
4
5
6
7
8
9
10
11
12
<dependencies>
    <dependency>
        <groupId>com.github.wxpay</groupId>
        <artifactId>wxpay-sdk</artifactId>
        <version>0.0.3</version>
    </dependency>

    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
    </dependency>
</dependencies>

编写TPayLogController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@RestController
@RequestMapping("/serviceorder/paylog")
@CrossOrigin
public class TPayLogController {

    @Autowired
    private TPayLogService payLogService;

    //生成微信支付二维码
    @GetMapping("createNative/{orderNo}")
    public R createNative(@PathVariable String orderNo){
        //返回的除了二维码url，还有其他信息，用map包装
        Map map = payLogService.createNative(orderNo);
        return R.ok().data(map);
    }
}

编写service实现方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
@Override
public Map createNative(String orderNo) {
    try {
        //根据订单id获取订单信息
        QueryWrapper<TOrder> wrapper = new QueryWrapper<>();
        wrapper.eq("order_no",orderNo);
        TOrder order = orderService.getOne(wrapper);

        Map m = new HashMap();
        //1、设置支付参数
        m.put("appid", "wx74862e0dfcf69954");
        m.put("mch_id", "1558950191");
        m.put("nonce_str", WXPayUtil.generateNonceStr());
        m.put("body", order.getCourseTitle());
        m.put("out_trade_no", orderNo);
        m.put("total_fee", order.getTotalFee().multiply(new BigDecimal("100")).longValue()+"");
        m.put("spbill_create_ip", "127.0.0.1");
        m.put("notify_url", "http://guli.shop/api/order/weixinPay/weixinNotify\n");
        m.put("trade_type", "NATIVE");

        //2、HTTPClient来根据URL访问第三方接口并且传递参数
        HttpClient client = new HttpClient("https://api.mch.weixin.qq.com/pay/unifiedorder");

        //client设置参数
        client.setXmlParam(WXPayUtil.generateSignedXml(m, "T6m9iK73b0kn9g5v426MKfHQH7X8rKwb"));
        client.setHttps(true);
        client.post();
        //3、返回第三方的数据
        String xml = client.getContent();
        Map<String, String> resultMap = WXPayUtil.xmlToMap(xml);


        //4、封装返回结果集

        Map map = new HashMap<>();
        map.put("out_trade_no", orderNo);
        map.put("course_id", order.getCourseId());
        map.put("total_fee", order.getTotalFee());
        map.put("result_code", resultMap.get("result_code"));
        map.put("code_url", resultMap.get("code_url"));


        return map;
    } catch (Exception e) {
        e.printStackTrace();
        throw new GuliException(20001,"支付失败");
    }
}

2.2获取支付状态接口

编写Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//获取支付状态
@GetMapping("queryPayStatus/{orderNo}")
public R queryPayStatus(@PathVariable String orderNo){
    Map<String,String> map = payLogService.queryPayStatus(orderNo);
    if(map==null){
        return R.error().message("支付出错");
    }
    if (map.get("trade_state").equals("SUCCESS")) {//如果成功
        //更改订单状态
        payLogService.updateOrderStatus(map);
        return R.ok().message("支付成功");
    }
    return R.ok().code(25000).message("支付中");
}

实现Service

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
@Override
public Map<String, String> queryPayStatus(String orderNo) {
    try {
        //1、封装参数
        Map m = new HashMap<>();
        m.put("appid", "wx74862e0dfcf69954");
        m.put("mch_id", "1558950191");
        m.put("out_trade_no", orderNo);
        m.put("nonce_str", WXPayUtil.generateNonceStr());

        //2、设置请求
        HttpClient client = new HttpClient("https://api.mch.weixin.qq.com/pay/orderquery");
        client.setXmlParam(WXPayUtil.generateSignedXml(m, "T6m9iK73b0kn9g5v426MKfHQH7X8rKwb"));
        client.setHttps(true);
        client.post();

        //3、返回第三方的数据
        String xml = client.getContent();
        //4、转成Map
        Map<String, String> resultMap = WXPayUtil.xmlToMap(xml);

        //5、返回
        return resultMap;
    } catch (Exception e) {
        e.printStackTrace();
    }
    return null;
}

@Override
public void updateOrderStatus(Map<String, String> map) {
    //获取订单id
    String orderNo = map.get("out_trade_no");
    //根据订单id查询订单信息
    QueryWrapper<TOrder> wrapper = new QueryWrapper<>();
    wrapper.eq("order_no",orderNo);
    TOrder order = orderService.getOne(wrapper);

    if(order.getStatus().intValue() == 1) {
        return;
    }

    order.setStatus(1);
    orderService.updateById(order);

    //记录支付日志
    TPayLog payLog=new TPayLog();
    payLog.setOrderNo(order.getOrderNo());//支付订单号
    payLog.setPayTime(new Date());
    payLog.setPayType(1);//支付类型
    payLog.setTotalFee(order.getTotalFee());//总金额(分)
    payLog.setTradeState(map.get("trade_state"));//支付状态
    payLog.setTransactionId(map.get("transaction_id"));
    payLog.setAttr(JSONObject.toJSONString(map));
    baseMapper.insert(payLog);//插入到支付日志表
}

统计分析

1.生成统计数据

1.1功能实现

在service模块下创建子模块service_statistics

（1）在service_ucenter模块创建接口，统计某一天的注册人数

controller：

1
2
3
4
5
6
@GetMapping(value = "countregister/{day}")
public R registerCount(
        @PathVariable String day){
    Integer count = memberService.countRegisterByDay(day);
    return R.ok().data("countRegister", count);
}

Service：

1
2
3
4
@Override
public Integer countRegisterByDay(String day) {
    return baseMapper.selectRegisterCount(day);
}

Mapper：

1
2
3
4
5
<select id="selectRegisterCount" resultType="java.lang.Integer">
    SELECT COUNT(1)
    FROM ucenter_member
    WHERE DATE(gmt_create) = #{value}
</select>

（2）在service_statistics模块创建远程调用接口

1
2
3
4
5
6
@Component
@FeignClient(name = "service-ucenter")
public interface UcenterClient {
    @GetMapping("/api/ucenter/member/countRegister/{day}")
    public R countRegister(@PathVariable("day") String day);
}

（3）生成数据接口Controller

1
2
3
4
5
6
//新增
@PostMapping("add/{day}")
public R createStatisticsByDate(@PathVariable String day){
    dailyService.createStatisticsByDate(day);
    return R.ok();
}

（4）Service实现方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@Autowired
private UcenterClient ucenterClient;

@Override
public void createStatisticsByDate(String day) {
    //删除已存在的统计对象
    QueryWrapper<StatisticsDaily> wrapper =new QueryWrapper<>();
    wrapper.eq("date_calculated", day);
    baseMapper.delete(wrapper);

    //获取统计信息
    Integer registerNum = (Integer) ucenterClient.countRegister(day).getData().get("countRegister");
    Integer loginNum = RandomUtils.nextInt(100, 200);//TODO
    Integer videoViewNum = RandomUtils.nextInt(100, 200);//TODO
    Integer courseNum = RandomUtils.nextInt(100, 200);//TODO

    //创建统计对象
    StatisticsDaily daily = new StatisticsDaily();
    daily.setRegisterNum(registerNum);
    daily.setLoginNum(loginNum);
    daily.setVideoViewNum(videoViewNum);
    daily.setCourseNum(courseNum);
    daily.setDateCalculated(day);

    baseMapper.insert(daily);
}

1.2定时任务

我们没必要每次都去手动生成统计数据，我们可以设置一个定时任务，当项目运行时，每天凌晨1点自动统计上一天的数据。

这就需要Spring定时任务的支持。

（1）在启动类上添加注解@EnableScheduling

（2）创建定时任务类，使用cron表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Component
public class ScheduledTask {

    @Autowired
    private StatisticsDailyService dailyService;

    /**
     * 每天凌晨1点执行定时
     */
    @Scheduled(cron = "0 0 1 * * ?")
    public void task2() {
        //获取上一天的日期
        String day = DateUtil.formatDate(DateUtil.addDays(new Date(), -1));
        dailyService.createStatisticsByDay(day);

    }
}

2.统计数据图表显示

2.1后端接口实现

Controller:

1
2
3
4
5
6
7
//根据条件返回图表需要的数据用于显示
@GetMapping("showChart/{type}/{begin}/{end}")
public R showChart(@PathVariable String type,@PathVariable String begin,@PathVariable String end){
    //用map封装需要的数据
    Map<String,Object> map = dailyService.showChart(type,begin,end);
    return R.ok().data(map);
}

Service：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@Override
public Map<String, Object> showChart(String type, String begin, String end) {
    QueryWrapper<StatisticsDaily> wrapper = new QueryWrapper<>();
    wrapper.between("date_calculated",begin,end);
    wrapper.select(type, "date_calculated");
    List<StatisticsDaily> statisticsDailies = baseMapper.selectList(wrapper);

    Map<String, Object> map = new HashMap<>();
    //定义两个list用于返回图表需要的时间和数量数据
    List<Integer> numList = new ArrayList<>();
    List<String> dateList = new ArrayList<>();

    for (StatisticsDaily statisticsDaily : statisticsDailies) {
        dateList.add(statisticsDaily.getDateCalculated());
        switch (type) {
            case "register_num":
                numList.add(statisticsDaily.getRegisterNum());
                break;
            case "login_num":
                numList.add(statisticsDaily.getLoginNum());
                break;
            case "video_view_num":
                numList.add(statisticsDaily.getVideoViewNum());
                break;
            case "course_num":
                numList.add(statisticsDaily.getCourseNum());
                break;
            default:
                break;
        }
    }

    map.put("dataList", numList);
    map.put("dateList", dateList);
    return map;
}

2.2ECharts

ECharts是百度的一个项目，后来百度把Echart捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

官方网站：https://echarts.baidu.com/

安装ECharts：npm install —save echarts@4.1.0

前端实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<template>
  <div class="app-container">
    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item>
        <el-select v-model="searchObj.type" clearable placeholder="请选择">
          <el-option label="学员登录数统计" value="login_num"/>
          <el-option label="学员注册数统计" value="register_num"/>
          <el-option label="课程播放数统计" value="video_view_num"/>
          <el-option label="每日课程数统计" value="course_num"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-date-picker
          v-model="searchObj.begin"
          type="date"
          placeholder="选择开始日期"
          value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchObj.end"
          type="date"
          placeholder="选择截止日期"
          value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-button
        :disabled="btnDisabled"
        type="primary"
        icon="el-icon-search"
        @click="showChart()">查询</el-button>
    </el-form>

    <div class="chart-container">
      <div id="chart" class="chart" style="height:500px;width:100%" />
    </div>
  </div>
</template>

实现js方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
showChart() {
  this.initChartData()
  // this.setChart()//放在initChartData回调中执行
},

// 准备图表数据
initChartData() {
  daily.showChart(this.searchObj).then(response => {
    // 数据
    this.yData = response.data.dataList

    // 横轴时间
    this.xData = response.data.dateList

    // 当前统计类别
    switch (this.searchObj.type) {
      case 'register_num':
        this.title = '学员注册数统计'
        break
      case 'login_num':
        this.title = '学员登录数统计'
        break
      case 'video_view_num':
        this.title = '课程播放数统计'
        break
      case 'course_num':
        this.title = '每日课程数统计'
        break
    }

    this.setChart()
  })
},
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家