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

总结面试篇

• ​​前言​​
• ​​整合微信支付​​

• ​​后端开发​​
• ​​开发微信支付接口​​
• ​​前端开发​​

• ​​整合统计分析​​

• ​​统计某一天的注册人数​​
• ​​实现服务调用​​
• ​​添加定时任务​​
• ​​统计数据图表显示​​
• ​​样式调整​​

前言

源码代码：
​​​https:///YuyanCai/gulixueyuan-back–zs​​​​https:///YuyanCai/gulixueyuan-front–zs​​

前端页面：
​​​https:///YuyanCai/guli-xy-fd​​

整合微信支付

​​微信支付-开发者文档 ()​​

需求如下：

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

后端开发

建模块，改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:///​​

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

日期工具类

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

通过@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 的​​漏斗图​​​，​​仪表盘​​，并且支持图与图之间的混搭

生成注册人数页面

创建生成统计页面

<template>
  <div class="app-container">
    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item label="日期">
        <el-date-picker
          v-model="day"
          type="date"
          placeholder="选择要统计的日期"
          value-format="yyyy-MM-dd" />
      </el-form-item>


      <el-button
        :disabled="btnDisabled"
        type="primary"
        @click="create()">生成</el-button>
    </el-form>

  </div>
</template>
<script>
import sta from '@/api/sta'
export default {
    data() {
        return {
            day:'',
            btnDisabled: false
        }
    },
    created() {

    },
    methods:{
        create() {
            sta.createStaData(this.day)
                .then(response => {
                    //提示信息
                    this.$message({
                        type: 'success',
                        message: '生成数据成功!'
                    })
                    //跳转到图表显示页面
                    this.$router.push({path:'/sta/show'})
                })
        }
    }
}
</script>

生成图表页面

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

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

前端做数据显示即可

样式调整

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