小帽学堂

8.课程支付总结

9. 课程详情页显示效果完善

// pages\course\_id.vue
<section v-if="Number(courseWebVo.price) === 0" class="c-attr-mt">
     <a @click="createOrders()" title="立即观看" class="comm-btn c-btn-3">立即观看</a>
</section>
<section v-else class="c-attr-mt">
     <a @click="createOrders()" title="立即购买" class="comm-btn c-btn-3">立即购买</a>
</section>

二十五、统计分析模块需求

1. 需求描述

2. 生成统计数据接口

2.1 数据库

2.2 创建微服务

2.2.1 在service模块下创建子模块 service_statistics

2.2.2 application.properties

# 服务端口
server.port=8008

# 服务名
spring.application.name=service-statistics
        
# mysql数据库连接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/school?serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=root
        
#返回json的全局时间格式
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8
        
#配置mapper xml文件的路径
mybatis-plus.mapper-locations=classpath:com/atguigu/staservice/mapper/xml/*.xml
        
#mybatis日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
        
# nacos服务地址
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848


#开启熔断机制
feign.hystrix.enabled=true
# 设置hystrix超时时间，默认1000ms
hystrix.command.default.execution.isolation.thread.timeoutInMilliseconds=

2.2.3 MP代码生成器生成代码

2.2.4 创建SpringBoot启动类

@SpringBootApplication
@ComponentScan(basePackages = {"com.alex"})
@EnableDiscoveryClient
@EnableFeignClients
@MapperScan("com.alex.staservice.mapper")
public class StaApplication {
    public static void main(String[] args) {
        SpringApplication.run(StaApplication.class, args);
    }
}

2.3 实现服务调用

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

@RestController
@RequestMapping("/educenter/member")
@CrossOrigin
public class UcenterMemberController {
    @Autowired
    private UcenterMemberService memberService;
    
    // 查询某一天注册人数
    @GetMapping("countRegister/{day}")
    public R countRegister(@PathVariable String day) {
        Integer count = memberService.countRegisterDay(day);
        return R.ok().data("countRegister", count);
    }
}

public interface UcenterMemberService extends IService<UcenterMember> {
    // 查询某一天注册人数
    Integer countRegisterDay(String day);
}

@Service
public class UcenterMemberServiceImpl extends ServiceImpl<UcenterMemberMapper, UcenterMember> implements UcenterMemberService {

    // 查询某一天注册人数
    @Override
    public Integer countRegisterDay(String day) {
        return baseMapper.countRegisterDay(day);
    }
}

public interface UcenterMemberMapper extends BaseMapper<UcenterMember> {

    // 查询某一天注册人数
    Integer countRegisterDay(String day);
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.alex.educenter.mapper.UcenterMemberMapper">
    <!-- 查询某一天注册人数 -->
    <select id="countRegisterDay" resultType="java.lang.Integer">
        SELECT COUNT(*) FROM ucenter_member uc
        WHERE DATE(uc.gmt_create)=#{day}
    </select>
</mapper>

2.3.2 在service_statistics模块创建远程调用接口

@Component
@FeignClient("service-ucenter")
public interface UcenterClient {
    // 查询某一天注册人数
    @GetMapping("/educenter/member/countRegister/{day}")
    public R countRegister(@PathVariable("day") String day);
}

2.3.3 在service_statistics模块调用微服务

@RestController
@RequestMapping("/staservice/sta")
@CrossOrigin
public class StatisticsDailyController {
    @Autowired
    private StatisticsDailyService staService;

    // 统计某一天注册人数，生成统计数据
    @PostMapping("registerCount/{day}")
    public R registerCount(@PathVariable String day) {
        staService.registerCount(day);
        return R.ok();
    }
}

public interface StatisticsDailyService extends IService<StatisticsDaily> {

    void registerCount(String day);
}

@Service
public class StatisticsDailyServiceImpl extends ServiceImpl<StatisticsDailyMapper, StatisticsDaily> implements StatisticsDailyService {

    @Autowired
    private UcenterClient ucenterClient;

    @Override
    public void registerCount(String day) {
        // 添加记录之前删除表相同日期的数据
        QueryWrapper<StatisticsDaily> wrapper = new QueryWrapper<>();
        wrapper.eq("date_calculated", day);
        baseMapper.delete(wrapper);

        // 远程调用得到某一天注册人数
        R registerR = ucenterClient.countRegister(day);
        Integer countRegister = (Integer)registerR.getData().get("countRegister");

        // 把获取数据添加数据库，统计分析表里面
        StatisticsDaily sta = new StatisticsDaily();
        sta.setRegisterNum(countRegister);  // 注册人数
        sta.setDateCalculated(day);    // 统计日期

        sta.setVideoViewNum(RandomUtils.nextInt(100,200));
        sta.setLoginNum(RandomUtils.nextInt(100,200));
        sta.setCourseNum(RandomUtils.nextInt(100,200));
        baseMapper.insert(sta);
    }
}

3. 生成统计数据前端整合

3.1 nginx配置

location ~ /staservice/ {           
    proxy_pass http://localhost:8008;
}

3.2 前端页面实现

// src\api\sta.js
import request from '@/utils/request'

export default {
    // 1. 生成统计数据
    createStaData(day) {
      return request({
        url: '/staservice/sta/registerCount/' + day,
        method: 'post'
      })
    }
}

// src\router\index.js
 {
    path: '/sta',
    component: Layout,
    redirect: '/sta/create',
    name: '统计分析',
    meta: { title: '统计分析', icon: 'example' },
    children: [
      {
        path: 'create',
        name: '生成数据',
        component: () => import('@/views/sta/create'),
        meta: { title: '生成数据', icon: 'table' }
      },
      {
        path: 'show',
        name: '图表显示',
        component: () => import('@/views/sta/show'),
        meta: { title: '图表显示', icon: 'tree' }
      }
    ]
  },

// src\views\sta\create.vue
<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.btnDisabled = false
                this.$message({
                type: 'success',
                message: '生成成功'
                })
                // 跳转到图表显示页面
                this.$router.push({path:'/sta/show'})
            }) 
        }
    }
}
</script>