前后端分离项目知识汇总（微信支付，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