前后端分离项目知识汇总（微信支付，Echart）

• • 整合微信支付
  • • 后端开发
    • 开发微信支付接口
    • 前端开发
  • 整合统计分析
  • • 统计某一天的注册人数
    • 实现服务调用
    • 添加定时任务
    • 统计数据图表显示
    • 样式调整

微信支付-开发者文档 (qq.com)

需求如下：

• 课程分为免费课程和付费课程，如果是免费课程可以直接观看，如果是付费观看的课程，用户需下单支付后才可以观看
• 如果是免费课程，在用户选择课程，进入到课程详情页面时候，直接显示 “立即观看”，用户点击立即观看，可以切换到播放列表进行视频播放
• 如果是付费课程，在用户选择课程，进入到课程详情页面时候，会显示 “立即购买”
• 点击“立即购买”，会生成课程的订单，跳转到订单页面
• 点击“去支付”，会跳转到支付页面，生成微信扫描的二维码
• 使用微信扫描支付后，会跳转回到课程详情页面，同时显示“立即观看”

建模块，改pom，yml，启动类

业务类

业务类通过代码生成器生成，在生成的基础上进行改动即可

开发创建订单接口

这部分不复杂，其实写法也是很固定的

支付订单号查询

建模块，改pom，yml，启动类

这个接口的实现定义在了service_ucenter模块中，它是用来获取某一天的注册人数的。

之后在service_statistics模块中调用service_ucenter模块中的此接口

具体实现如下：

    
    
        SELECT COUNT(*) FROM ucenter_member uc
        WHERe DATE(uc.gmt_create)=#{day}
    

下面这个sql的意思就是获取ucenter_member中创建日期等于2022-05-16的数量

SELECT
	COUNT(*) 
FROM
	ucenter_member uc 
WHERe
	DATE( uc.gmt_create ) = '2022-05-16'
-- 获取日期时间格式里面日期部分

显示数据

接口这里，我们只需要得到日期和日期对应数量两个集合即可

http://cron.ciding.cc/

定时执行统计注册人数方法，这样就保证了统计表数据更新

日期工具类

可以指定时间执行某个操作

通过@EnableScheduling注解标注即可

@Component
public class ScheduledTask {

    @Autowired
    private StatisticsDailyService dailyService;

    
    @Scheduled(cron = "0/5 * * * * ?")
    public void task1() {
        System.out.println("*********++++++++++++*****执行了");
    }

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

    }
}

cron表达式怎么写？

https://echarts.baidu.com/

这里我们采用ECharts来实现图标展示

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

生成注册人数页面

创建生成统计页面

生成图表页面

先来看下官方文档给出的实例

可以看出我们只需要按要求在后端查询出数据，然后传给前端

前端做数据显示即可

参考配置手册：https://echarts.baidu.com/option.html#title