當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Day215.课程详细页面功能完善、Echarts统计分析模块[生成统计数据+生成图表]前后端整合 -谷粒学院

發布時間：2024/1/8 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 Day215.课程详细页面功能完善、Echarts统计分析模块[生成统计数据+生成图表]前后端整合 -谷粒学院小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

谷粒學院

課程詳細頁面功能完善

一、修改課程詳細接口

1、在service_order模塊添加接口

用于判斷訂單中status值是否為1，為1則為已支付

@RestController @CrossOrigin @RequestMapping("/eduorder/t-order") public class TOrderController {@Autowiredprivate TOrderService tOrderService;.........//根據【用戶id、課程id】查詢訂單表中的狀態@GetMapping("/isBuyCourse/{memberId}/{courseId}")public Boolean isBuyCourse(@PathVariable String memberId,@PathVariable String courseId) {QueryWrapper<TOrder> wrapper = new QueryWrapper<>();wrapper.eq("course_id",courseId);wrapper.eq("member_id",memberId);wrapper.eq("status",1);//支付狀態【1】代表已支付int result = tOrderService.count(wrapper);if (result>0){//已支付return true;}else {return false;}}}

2、在service_edu模塊課程詳情接口遠程調用

（1）創建OrderClient接口

com.achang.eduservice.client.OrderClient

確保加入nacos注冊中心配置文件，且在主配置類標注@EnableFeignClients

@Component @FeignClient(value = "service-order",fallback = OrderClientImpl.class) public interface OrderClient {//根據【用戶id、課程id】查詢訂單表中的狀態@GetMapping("/eduorder/t-order/isBuyCourse/{memberId}/{courseId}")public Boolean isBuyCourse(@PathVariable("memberId") String memberId, @PathVariable("courseId") String courseId);}

OrderClientImpl

兜底方法

@Component public class OrderClientImpl implements OrderClient {@Overridepublic Boolean isBuyCourse(String memberId, String courseId) {return null;} }

（2）修改之前的課程詳情接口調用

com.achang.eduservice.controller.front.CourseFrontController

@RestController @CrossOrigin @RequestMapping("/eduservice/courseFront") public class CourseFrontController {@Autowiredprivate EduCourseService eduCourseService;@Autowiredprivate EduChapterService eduChapterService;@Autowiredprivate OrderClient orderClient;..........//課程詳情的方法@GetMapping("/getFrontCourseInfo/{courseId}")public R getFrontCourseInfo(@PathVariable("courseId") String courseId, HttpServletRequest request){boolean isBuyCourse = false;//根據課程id，編寫sql語句查詢課程信息CourseWebVo courseWebVo = eduCourseService.getBaseCourseInfo(courseId);//根據課程id，查詢章節和小節信息List<ChapterVo> chapterVideoList = eduChapterService.getChapterVideoByCourseId(courseId);//獲取用戶idString memberId = JwtUtils.getMemberIdByJwtToken(request);if (!StringUtils.isEmpty(memberId)){//根據課程id、用戶id，查詢課程是否已經購買isBuyCourse = orderClient.isBuyCourse(memberId, courseId);}return R.ok().data("courseWebVo",courseWebVo).data("chapterVideoList",chapterVideoList).data("isBuy",isBuyCourse);}}

二、修改課程詳情頁面

三、測試

統計分析功能（生成統計數據）

0、需求分析

一、數據庫設計

1、數據庫

guli_statistics

2、數據表

# # Structure for table "statistics_daily" #CREATE TABLE `statistics_daily` (`id` char(19) NOT NULL COMMENT '主鍵',`date_calculated` varchar(20) NOT NULL COMMENT '統計日期',`register_num` int(11) NOT NULL DEFAULT '0' COMMENT '注冊人數',`login_num` int(11) NOT NULL DEFAULT '0' COMMENT '登錄人數',`video_view_num` int(11) NOT NULL DEFAULT '0' COMMENT '每日播放視頻數',`course_num` int(11) NOT NULL DEFAULT '0' COMMENT '每日新增課程數',`gmt_create` datetime NOT NULL COMMENT '創建時間',`gmt_modified` datetime NOT NULL COMMENT '更新時間',PRIMARY KEY (`id`),KEY `statistics_day` (`date_calculated`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='網站統計日數據';# # Data for table "statistics_daily" #

二、創建微服務

1、在service模塊下創建子模塊

service_statistics

2、application.properties

resources目錄下創建文件

# 服務端口 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/guli?serverTimezone=GMT%2B8 spring.datasource.username=root spring.datasource.password=00000# 返回json的全局格式 spring.jackson.date-format=yyyy-MM-dd HH:mm:ss spring.jackson.time-zone=GMT+8# 配置mybatis xml文件的路徑 mybatis-plus.mapper-locations=classpath:com.achang.staservice.mapper.xml/*.xml# mybatis日志 mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl# nacos服務地址 spring.cloud.nacos.discovery.server-addr=localhost:8848# 開啟熔斷機制 feign.hystrix.enabled=true# 設置hystrix超時時間，默認1000ms hystrix.command.default.execution.isolation.thread.timeoutInMilliseconds=3000

3、MP代碼生成器生成代碼

@Test public void run(){// 1、創建代碼生成器AutoGenerator mpg = new AutoGenerator();// 2、全局配置GlobalConfig gc = new GlobalConfig();String projectPath = System.getProperty("user.dir");gc.setOutputDir("D:\\JavaStudy\\gulixueyuan\\guli_parent\\service\\service_statistics" + "/src/main/java"); //輸出目錄gc.setAuthor("achang"); //作者名gc.setOpen(false); //生成后是否打開資源管理器gc.setFileOverride(false); //重新生成時文件是否覆蓋gc.setServiceName("%sService"); //去掉Service接口的首字母Igc.setIdType(IdType.ID_WORKER_STR); //主鍵策略gc.setDateType(DateType.ONLY_DATE);//定義生成的實體類中日期類型gc.setSwagger2(true);//開啟Swagger2模式mpg.setGlobalConfig(gc);// 3、數據源配置DataSourceConfig dsc = new DataSourceConfig();dsc.setUrl("jdbc:mysql://localhost:3306/guli?serverTimezone=GMT%2B8");dsc.setDriverName("com.mysql.cj.jdbc.Driver");dsc.setUsername("root");dsc.setPassword("00000");dsc.setDbType(DbType.MYSQL);mpg.setDataSource(dsc);// 4、包配置PackageConfig pc = new PackageConfig();//生成包：com.achang.eduservicepc.setModuleName("staservice"); //模塊名pc.setParent("com.achang");//生成包：com.achang.oss.controllerpc.setController("controller");pc.setEntity("entity");pc.setService("service");pc.setMapper("mapper");mpg.setPackageInfo(pc);// 5、策略配置StrategyConfig strategy = new StrategyConfig();strategy.setInclude("statistics_daily");//根據數據庫哪張表生成，有多張表就加逗號繼續填寫strategy.setNaming(NamingStrategy.underline_to_camel);//數據庫表映射到實體的命名策略strategy.setTablePrefix("statistics" + "_"); //生成實體時去掉表前綴strategy.setColumnNaming(NamingStrategy.underline_to_camel);//數據庫表字段映射到實體的命名策略strategy.setEntityLombokModel(true); // lombok 模型 @Accessors(chain = true) setter鏈式操作strategy.setRestControllerStyle(true); //restful api風格控制器strategy.setControllerMappingHyphenStyle(true); //url中駝峰轉連字符mpg.setStrategy(strategy);// 6、執行mpg.execute();}

4、創建SpringBoot啟動類

@SpringBootApplication @EnableFeignClients @MapperScan("com.achang.staservice.mapper") @EnableDiscoveryClient //開啟服務發現 @ComponentScan("com.achang") public class staserviceMain8008 {public static void main(String[] args) {SpringApplication.run(staserviceMain8008.class,args);} }

三、實現服務調用

1、在service_ucenter模塊創建接口，統計某一天的注冊人數

controller

@RestController @RequestMapping("/serviceUcenter/ucenter-member") @CrossOrigin public class UcenterMemberController {@Autowiredprivate UcenterMemberService ucenterMemberService;........//根據日期，獲取那天注冊人數@GetMapping("/countRegister/{day}")public R countRegister(@PathVariable String day){Integer count = ucenterMemberService.getCountRegister(day);return R.ok().data("countRegister",count);}}

service

接口

public interface UcenterMemberService extends IService<UcenterMember> {...........//根據日期，獲取那天注冊人數Integer getCountRegister(String day); }

impl

@Service public class UcenterMemberServiceImpl extends ServiceImpl<UcenterMemberMapper, UcenterMember> implements UcenterMemberService {@Autowiredprivate RedisTemplate<String,String> redisTemplate;...........//根據日期，獲取那天注冊人數@Overridepublic Integer getCountRegister(String day) {return baseMapper.getCountRegister(day);}}

mapper

接口

public interface UcenterMemberMapper extends BaseMapper<UcenterMember> {Integer getCountRegister(String day); }

xml

<select id="getCountRegister" resultType="java.lang.Integer">select count(1)from ucenter_memberwhere date(gmt_create) = #{day} </select>

2、在service_statistics模塊創建遠程調用接口

創建client包和UcenterClient接口和impl

接口

@Component @FeignClient(value = "service-ucenter",fallback = UcenterClientImpl.class) public interface UcenterClient {//根據日期，獲取那天注冊人數@GetMapping("/serviceUcenter/ucenter-member/countRegister/{day}")public R countRegister(@PathVariable("day") String day); }

impl

兜底方法

@Component public class UcenterClientImpl implements UcenterClient {@Overridepublic R countRegister(String day) {return null;} }

3、在service_statistics模塊調用微服務

controller

@RestController @RequestMapping("/staservice/daily") @CrossOrigin //解決跨域問題 public class DailyController {@Autowiredprivate DailyService dailyService;//統計某一天注冊人數@PostMapping("/createStatisticsByDay/{day}")public R createStatisticsByDay(@PathVariable String day){dailyService.createStatisticsByDay(day);return R.ok();}}

service

impl

@Service public class DailyServiceImpl extends ServiceImpl<DailyMapper, Daily> implements DailyService {@Autowiredprivate UcenterClient ucenterClient;//統計某一天注冊人數@Overridepublic void createStatisticsByDay(String day) {//添加之前先刪除表相同的數據QueryWrapper<Daily> wrapper = new QueryWrapper<>();wrapper.eq("date_calculated",day);baseMapper.delete(wrapper);//遠程調用得到某一天的注冊人數R registerR = ucenterClient.countRegister(day);Integer countRegister = (Integer) registerR.getData().get("countRegister");//其他的數據類似，也是通過遠程調用，獲取數據返回即可，下面使用隨機數模擬//把獲取到的數據Daily daily = new Daily();daily.setRegisterNum(countRegister);//注冊人數daily.setCourseNum(RandomUtils.nextInt(100,200));daily.setLoginNum(RandomUtils.nextInt(200,300));//登錄數daily.setVideoViewNum(RandomUtils.nextInt(200,300));//視頻流量數daily.setDateCalculated(day);//統計日期//添加到數據庫中baseMapper.insert(daily);}}

接口

public interface DailyService extends IService<Daily> {//統計某一天注冊人數void createStatisticsByDay(String day); }

測試，啟動兩個訪問

訪問：localhost:8008/swagger-ui.html

記住給實體類添加

配置nginx

測試成功

四、添加定時任務

在特定的時間，讓程序自動執行，鬧鐘一樣

七子表達式，總共有7位，但是springboot整合只整合了前面6位，最后一位的年沒有整合，直接默認是每年

1、在啟動類上添加注解

@EnableScheduling 開啟定時任務

2、創建定時任務類，使用cron表達式

com.achang.staservice.schedule.ScheduledTask

@Component public class ScheduledTask {//（0/5 * * * * ？）：每隔5秒執行一次@Scheduled(cron = "0/5 * * * * ?")//指定cron表達式規則public void task01(){System.out.println("=========我執行了");} }

通過工具類，在每天凌晨1點執行方法，把前一天的數據查詢進行添加

@Component public class ScheduledTask {@Autowiredprivate DailyService dailyService;//在每天凌晨1點執行方法，把前一天的數據查詢進行添加@Scheduled(cron = "0 0 1 * * ? ")//指定cron表達式規則public void task02(){dailyService.createStatisticsByDay(DateUtil.formatDate(DateUtil.addDays(new Date(), -1)));}}

3、在線生成cron表達式

網上一大堆，隨便找

http://cron.qqe2.com/

統計數據前端整合

一、前端頁面實現

1、添加路由

guli-admin\src\router\index.js

//統計分析{path: '/sta',component: Layout,redirect: '/sta/create',name: '統計分析',meta: { title: '統計分析', icon: 'nested' },children: [{path: 'create',name: '生成數據',component: () => import('@/views/sta/create.vue'),meta: { title: '生成數據', icon: 'table' }},{path: 'show',name: '圖表顯示',component: () => import('@/views/sta/show.vue'),meta: { title: '圖表顯示', icon: 'nested' }}]},

2、創建api

import request from '@/utils/request' //引入已經封裝好的axios 和攔截器export default{//生成統計數據createStaByDay(day){return request({url:'/staservice/daily/createStatisticsByDay/'+day,method: 'post'})}}

3、創建組件

guli-admin\src\views\sta\create.vue

create

html頁面

js腳本

效果

測試成功

統計數據圖表顯示ECharts

一、ECharts

1、簡介

ECharts是百度的一個項目，后來百度把Echart捐給apache，用于圖表展示，提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理數據可視化的地圖、熱力圖、線圖，用于關系數據可視化的關系圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。
官方網站：https://echarts.baidu.com/

2、基本使用

入門參考：官網->文檔->教程->5分鐘上手ECharts

（1）創建html頁面：柱圖.html

（2）引入ECharts

<script src="echarts.min.js"></script>

（3）定義圖表區域

<div id="main" style="width: 600px;height:400px;"></div>

（4）渲染圖表

3、折線圖

實例參考：官網->實例->官方實例 https://echarts.baidu.com/examples/

折線圖.html

二、項目中集成ECharts

1、安裝ECharts

npm install --save echarts@4.1.0

2、路由

src/router/index.js

在統計分析路由中增加子路由

3、創建組件

guli-admin\src\views\sta\show.vue

模板

js：暫時顯示臨時數據

三、完成后端業務

1、controller

@RestController @RequestMapping("/staservice/daily") @CrossOrigin //解決跨域問題 public class DailyController {@Autowiredprivate DailyService dailyService;.............//圖表顯示，返回兩部分數據，日期json數組，數量json數組@GetMapping("/showData/{type}/{begin}/{end}")public R showData(@PathVariable String type,@PathVariable String begin,@PathVariable String end){Map<String,Object> map = dailyService.getShowData(type,begin,end);return R.ok().data(map);}}

2、service

接口

public interface DailyService extends IService<Daily> {.........//圖表顯示，返回兩部分數據，日期json數組，數量json數組Map<String, Object> getShowData(String type, String begin, String end); }

impl

@Service public class DailyServiceImpl extends ServiceImpl<DailyMapper, Daily> implements DailyService {@Autowiredprivate UcenterClient ucenterClient;............//圖表顯示，返回兩部分數據，日期json數組，數量json數組@Overridepublic Map<String, Object> getShowData(String type, String begin, String end) {//根據條件查詢對應的數據QueryWrapper<Daily> wrapper = new QueryWrapper<>();wrapper.select("date_calculated",type);wrapper.between("date_calculated",begin,end);List<Daily> dailyList = baseMapper.selectList(wrapper);//前端要求數組json結果，對應后端為List集合//創建兩個list集合，一個放日期X軸，一個放數量Y軸List<String> xlist = new ArrayList<>();List<Integer> ylist = new ArrayList<>();for (Daily daily : dailyList) {xlist.add(daily.getDateCalculated());//判斷查詢的哪個字段if ("register_num".equals(type)){ylist.add(daily.getRegisterNum());}if ("login_num".equals(type)){ylist.add(daily.getLoginNum());}if ("video_view_num".equals(type)){ylist.add(daily.getVideoViewNum());}if ("course_num".equals(type)){ylist.add(daily.getCourseNum());}}HashMap<String, Object> map = new HashMap<>();map.put("xlist",xlist);map.put("ylist",ylist);return map;}}

測試

四、前后端整合

1、創建api

guli-admin\src\api\sta.js中添加方法

import request from '@/utils/request' //引入已經封裝好的axios 和攔截器export default {.......//圖表顯示getShowData(searchObj) {return request({url: `/staservice/daily/showData/${searchObj.type}/${searchObj.begin}/${searchObj.end}`,method: 'get'})}}

2、show.vue中引入api模塊

import staApi from '@/api/sta.js'

3、js腳本

export default {data() {return {searchObj: {begin: "",end: "",type: "",},btnDisabled: false,chart: null,title: "",xData: [],yData: [],};},methods: {setChart() {// 基于準備好的dom，初始化echarts實例this.chart = echarts.init(document.getElementById("chart"));// console.log(this.chart)// 指定圖表的配置項和數據var option = {// xAxis: {type: "category",data:this.xData,//x軸數據},// yAxis: {type: "value",},series: [{// 系列中的數據內容數組data:this.yData,//y軸數據// 折線圖type: "line",//type 決定自己的圖表類型},],};this.chart.setOption(option);},showChart(){staApi.getShowData(this.searchObj).then(resp=>{//x軸時間this.xData = resp.data.xlist//y軸數據this.yData = resp.data.ylist//調用下面生成圖表方法，改變值this.setChart();})}},created() {}, }; </script>

測試

五、樣式調整

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

寫到option里面

1、顯示標題

title: {text: this.title },

2、x坐標軸觸發提示

tooltip: {trigger: 'axis' },

3、區域縮放

dataZoom: [{show: true,height: 30,xAxisIndex: [0],bottom: 30,start: 10,end: 80,handleIcon:"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2, 1.8-4, 4-4h59.8c2.2, 0, 4, 1.8, 4, 4V413z",handleSize: "110%",handleStyle: {color: "#d3dee5",},textStyle: {color: "#fff",},borderColor: "#90979c",},{type: "inside",show: true,height: 15,start: 1,end: 35,}, ],

總結

以上是生活随笔為你收集整理的Day215.课程详细页面功能完善、Echarts统计分析模块[生成统计数据+生成图表]前后端整合 -谷粒学院的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： HDU 1517 A Multiplic
下一篇： Docker应用学习