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

整合微信支付

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

需求如下：

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

后端开发

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

业务类

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

开发创建订单接口

开发微信支付接口

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

支付订单号查询

前端开发

整合统计分析

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

统计某一天的注册人数

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

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

具体实现如下：

<mapper namespace="com.caq.eduucenter.mapper.UcenterMemberMapper">
    
    <select id="countRegisterDay" resultType="java.lang.Integer">
        SELECT COUNT(*) FROM ucenter_member uc
        WHERE DATE(uc.gmt_create)=#{day}
    select>
mapper>

下面这个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("*********++++++++++++*****执行了");
    }

    /**
     * 每天凌晨1点执行定时，每天一点执行一次统计注册人数数量
     */
    @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