SOURCE

console 命令行工具 X clear

                    
>
console
const DATA = {
    spring5: [
        {
            "page": 1,
            "part": "01.尚硅谷_课程介绍",
            "duration": 195
        },
        {
            "page": 2,
            "part": "02.尚硅谷_框架概述",
            "duration": 748
        },
        {
            "page": 3,
            "part": "03.尚硅谷_入门案例",
            "duration": 1396
        },
        {
            "page": 4,
            "part": "04.尚硅谷_IOC容器(底层原理1)",
            "duration": 1043
        },
        {
            "page": 5,
            "part": "05.尚硅谷_IOC容器(底层原理2)",
            "duration": 453
        },
        {
            "page": 6,

            "part": "06.尚硅谷_IOC容器(底层原理3)",
            "duration": 866
        },
        {
            "page": 7,

            "part": "07.尚硅谷_IOC容器-Bean管理XML方式(创建对象和set注入属性)",
            "duration": 1641
        },
        {
            "page": 8,

            "part": "08.尚硅谷_IOC容器-Bean管理XML方式(有参构造注入属性)",
            "duration": 495
        },
        {
            "page": 9,

            "part": "09.尚硅谷_IOC容器-Bean管理XML方式(p名称空间注入)",
            "duration": 387
        },
        {
            "page": 10,

            "part": "10.尚硅谷_IOC容器-Bean管理XML方式(注入空值和特殊符号)",
            "duration": 559
        },
        {
            "page": 11,

            "part": "11.尚硅谷_IOC容器-Bean管理XML方式(注入外部bean)",
            "duration": 859
        },
        {
            "page": 12,

            "part": "12.尚硅谷_IOC容器-Bean管理XML方式(注入内部bean和级联赋值)",
            "duration": 1212
        },
        {
            "page": 13,

            "part": "13.尚硅谷_IOC容器-Bean管理XML方式(注入集合类型属性1)",
            "duration": 1147
        },
        {
            "page": 14,

            "part": "14.尚硅谷_IOC容器-Bean管理XML方式(注入集合类型属性2)",
            "duration": 1020
        },
        {
            "page": 15,

            "part": "15.尚硅谷_IOC容器-Bean管理(工厂bean)",
            "duration": 738
        },
        {
            "page": 16,

            "part": "16.尚硅谷_IOC容器-Bean管理(bean的作用域)",
            "duration": 719
        },
        {
            "page": 17,

            "part": "17.尚硅谷_IOC容器-Bean管理(bean生命周期)",
            "duration": 1651
        },
        {
            "page": 18,

            "part": "18.尚硅谷_IOC容器-Bean管理XML方式(自动装配)",
            "duration": 739
        },
        {
            "page": 19,

            "part": "19.尚硅谷_IOC容器-Bean管理XML方式(外部属性文件)",
            "duration": 957
        },
        {
            "page": 20,

            "part": "20.尚硅谷_IOC容器-Bean管理注解方式(创建对象)",
            "duration": 1516
        },
        {
            "page": 21,

            "part": "21.尚硅谷_IOC容器-Bean管理注解方式(组件扫描配置)",
            "duration": 454
        },
        {
            "page": 22,

            "part": "22.尚硅谷_IOC容器-Bean管理注解方式(注入属性@Autowired和Qualifier)",
            "duration": 812
        },
        {
            "page": 23,

            "part": "23.尚硅谷_IOC容器-Bean管理注解方式(注入属性@Resource和Value)",
            "duration": 410
        },
        {
            "page": 24,

            "part": "24.尚硅谷_IOC容器-Bean管理注解方式(完全注解开发)",
            "duration": 463
        },
        {
            "page": 25,

            "part": "25.尚硅谷_AOP-基本概念",
            "duration": 739
        },
        {
            "page": 26,

            "part": "26.尚硅谷_AOP-底层原理",
            "duration": 723
        },
        {
            "page": 27,

            "part": "27.尚硅谷_AOP-底层原理(JDK动态代理实现)",
            "duration": 1580
        },
        {
            "page": 28,

            "part": "28.尚硅谷_AOP-操作术语",
            "duration": 708
        },
        {
            "page": 29,

            "part": "29.尚硅谷_AOP操作-准备工作",
            "duration": 837
        },
        {
            "page": 30,

            "part": "30.尚硅谷_AOP操作-AspectJ注解(1)",
            "duration": 1564
        },
        {
            "page": 31,

            "part": "31.尚硅谷_AOP操作-AspectJ注解(2)",
            "duration": 483
        },
        {
            "page": 32,

            "part": "32.尚硅谷_AOP操作-AspectJ配置文件",
            "duration": 846
        },
        {
            "page": 33,

            "part": "33.尚硅谷_JdbcTemplate-概述和准备工作",
            "duration": 1154
        },
        {
            "page": 34,

            "part": "34.尚硅谷_JdbcTemplate操作数据库-添加功能",
            "duration": 845
        },
        {
            "page": 35,

            "part": "35.尚硅谷_JdbcTemplate操作数据库-修改和删除功能",
            "duration": 427
        },
        {
            "page": 36,

            "part": "36.尚硅谷_JdbcTemplate操作数据库-查询功能(1)",
            "duration": 496
        },
        {
            "page": 37,

            "part": "37.尚硅谷_JdbcTemplate操作数据库-查询功能(2)",
            "duration": 912
        },
        {
            "page": 38,

            "part": "38.尚硅谷_JdbcTemplate操作数据库-批量添加功能",
            "duration": 637
        },
        {
            "page": 39,

            "part": "39.尚硅谷_JdbcTemplate操作数据库-批量修改删除功能",
            "duration": 483
        },
        {
            "page": 40,

            "part": "40.尚硅谷_事务操作-事务概念",
            "duration": 396
        },
        {
            "page": 41,

            "part": "41.尚硅谷_事务操作-搭建事务操作环境",
            "duration": 1432
        },
        {
            "page": 42,

            "part": "42.尚硅谷_事务操作-事务场景引入",
            "duration": 473
        },
        {
            "page": 43,

            "part": "43.尚硅谷_事务操作-Spring事务管理介绍",
            "duration": 627
        },
        {
            "page": 44,

            "part": "44.尚硅谷_事务操作-Spring声明式事务管理(注解方式)",
            "duration": 673
        },
        {
            "page": 45,

            "part": "45.尚硅谷_事务操作-Spring声明式事务管理-事务参数(传播行为)",
            "duration": 943
        },
        {
            "page": 46,

            "part": "46.尚硅谷_事务操作-Spring声明式事务管理-事务参数(隔离级别)",
            "duration": 934
        },
        {
            "page": 47,

            "part": "47.尚硅谷_事务操作-Spring声明式事务管理-事务参数(其他参数)",
            "duration": 387
        },
        {
            "page": 48,

            "part": "48.尚硅谷_事务操作-Spring声明式事务管理(XML方式)",
            "duration": 682
        },
        {
            "page": 49,

            "part": "49.尚硅谷_事务操作-Spring声明式事务管理(完全注解方式)",
            "duration": 676
        },
        {
            "page": 50,

            "part": "50.尚硅谷_Spring5新功能-整合日志框架",
            "duration": 908
        },
        {
            "page": 51,

            "part": "51.尚硅谷_Spring5新功能-Nullable注解和函数式注册对象",
            "duration": 864
        },
        {
            "page": 52,

            "part": "52.尚硅谷_Spring5新功能-整合JUnit5单元测试框架",
            "duration": 883
        },
        {
            "page": 53,

            "part": "53.尚硅谷_Spring5新功能-Webflux-基本概念",
            "duration": 1877
        },
        {
            "page": 54,

            "part": "54.尚硅谷_Spring5新功能-Webflux-响应式编程(Java实现)",
            "duration": 1365
        },
        {
            "page": 55,

            "part": "55.尚硅谷_Spring5新功能-Webflux-响应式编程(Reactor)",
            "duration": 2026
        },
        {
            "page": 56,

            "part": "56.尚硅谷_Spring5新功能-Webflux-响应式编程(Reactor总结)",
            "duration": 276
        },
        {
            "page": 57,

            "part": "57.尚硅谷_Spring5新功能-Webflux-执行流程和核心API",
            "duration": 1145
        },
        {
            "page": 58,

            "part": "58.尚硅谷_Spring5新功能-Webflux-注解编程模型",
            "duration": 1833
        },
        {
            "page": 59,

            "part": "59.尚硅谷_Spring5新功能-Webflux-函数式编程模型(Handler)",
            "duration": 1419
        },
        {
            "page": 60,

            "part": "60.尚硅谷_Spring5新功能-Webflux-函数式编程模型(Router和服务器)",
            "duration": 1201
        },
        {
            "page": 61,

            "part": "61.尚硅谷_Spring5新功能-Webflux-函数式编程模型(WebClient)",
            "duration": 664
        },
        {
            "page": 62,

            "part": "62.尚硅谷_课程总结",
            "duration": 564
        }
    ],
    maven: [
        {
            "page": 1,

            "part": "Maven-01-软件工程和maven",
            "duration": 1112
        },
        {
            "page": 2,

            "part": "Maven-02-maven能干什么",
            "duration": 464
        },
        {
            "page": 3,

            "part": "Maven-03-构建",
            "duration": 586
        },
        {
            "page": 4,

            "part": "Maven-04-maven核心概念",
            "duration": 283
        },
        {
            "page": 5,

            "part": "Maven-05-maven安装",
            "duration": 905
        },
        {
            "page": 6,

            "part": "Maven-06-约定目录结构",
            "duration": 503
        },
        {
            "page": 7,

            "part": "Maven-07-maven下载做了什么",
            "duration": 1177
        },
        {
            "page": 8,

            "part": "Maven-08-修改本地仓库地址",
            "duration": 283
        },
        {
            "page": 9,

            "part": "Maven-09-复习",
            "duration": 636
        },
        {
            "page": 10,

            "part": "Maven-10-仓库概念",
            "duration": 957
        },
        {
            "page": 11,

            "part": "Maven-11-仓库分类",
            "duration": 290
        },
        {
            "page": 12,

            "part": "Maven-12-pom文件分析-坐标",
            "duration": 974
        },
        {
            "page": 13,

            "part": "Maven-13-pom文件分析-依赖",
            "duration": 471
        },
        {
            "page": 14,

            "part": "Maven-14-maven生命周期",
            "duration": 367
        },
        {
            "page": 15,

            "part": "Maven-15-单元测试junit",
            "duration": 659
        },
        {
            "page": 16,

            "part": "Maven-16-maven命令-编译",
            "duration": 802
        },
        {
            "page": 17,

            "part": "Maven-17-maven命令-测试-打包-安装",
            "duration": 1076
        },
        {
            "page": 18,

            "part": "Maven-18-编译插件配置",
            "duration": 811
        },
        {
            "page": 19,

            "part": "Maven-19-idea中设置maven",
            "duration": 954
        },
        {
            "page": 20,

            "part": "Maven-20-idea新建工程设置maven",
            "duration": 241
        },
        {
            "page": 21,

            "part": "Maven-21-idea创建javase项目",
            "duration": 815
        },
        {
            "page": 22,

            "part": "Maven-22-使用单元测试",
            "duration": 620
        },
        {
            "page": 23,

            "part": "Maven-23-使用idea中maven工具窗口",
            "duration": 560
        },
        {
            "page": 24,

            "part": "Maven-24-idea创建web项目",
            "duration": 1002
        },
        {
            "page": 25,

            "part": "Maven-25-复习前天课程",
            "duration": 789
        },
        {
            "page": 26,

            "part": "Maven-26-复习maven核心概念",
            "duration": 167
        },
        {
            "page": 27,

            "part": "Maven-27-常用技巧",
            "duration": 502
        },
        {
            "page": 28,

            "part": "Maven-28-依赖范围",
            "duration": 671
        },
        {
            "page": 29,

            "part": "Maven-29-依赖范围provided",
            "duration": 787
        },
        {
            "page": 30,

            "part": "Maven-30-maven常用属性",
            "duration": 967
        },
        {
            "page": 31,

            "part": "Maven-31-资源插件",
            "duration": 431
        },
        {
            "page": 32,

            "part": "Maven-32-课程最后补充文档",
            "duration": 311
        }
    ],
    springMVC: [
        {
            "page": 1,

            "part": "1. 尚硅谷_佟刚_SpringMVC_概述",
            "duration": 134
        },
        {
            "page": 2,

            "part": "2. 尚硅谷_佟刚_SpringMVC_HelloWorld",
            "duration": 963
        },
        {
            "page": 3,

            "part": "3. 尚硅谷_佟刚_SpringMVC_RequestMapping_修饰类",
            "duration": 297
        },
        {
            "page": 4,

            "part": "4. 尚硅谷_佟刚_SpringMVC_RequestMapping_请求方式",
            "duration": 230
        },
        {
            "page": 5,

            "part": "5. 尚硅谷_佟刚_SpringMVC_RequestMapping_请求参数\u0026请求头",
            "duration": 352
        },
        {
            "page": 6,

            "part": "6. 尚硅谷_佟刚_SpringMVC_RequestMapping_Ant 路径",
            "duration": 129
        },
        {
            "page": 7,

            "part": "7. 尚硅谷_佟刚_SpringMVC_RequestMapping_PathVariable注解",
            "duration": 190
        },
        {
            "page": 8,

            "part": "8. 尚硅谷_佟刚_SpringMVC_RequestMapping_HiddenHttpMethodFilter 过滤器",
            "duration": 938
        },
        {
            "page": 9,

            "part": "9. 尚硅谷_佟刚_SpringMVC_RequestParam 注解",
            "duration": 383
        },
        {
            "page": 10,

            "part": "10. 尚硅谷_佟刚_SpringMVC_RequestHeader 注解",
            "duration": 202
        },
        {
            "page": 11,

            "part": "11. 尚硅谷_佟刚_SpringMVC_CookieValue 注解",
            "duration": 200
        },
        {
            "page": 12,

            "part": "12. 尚硅谷_佟刚_SpringMVC_使用POJO作为参数",
            "duration": 434
        },
        {
            "page": 13,

            "part": "13. 尚硅谷_佟刚_SpringMVC_使用Servlet原生API作为参数",
            "duration": 372
        },
        {
            "page": 14,

            "part": "14. 尚硅谷_佟刚_SpringMVC_处理模型数据之ModelAndView",
            "duration": 496
        },
        {
            "page": 15,

            "part": "15 尚硅谷_佟刚_SpringMVC_处理模型数据之Map",
            "duration": 322
        },
        {
            "page": 16,

            "part": "16. 尚硅谷_佟刚_SpringMVC_处理模型数据之 SessionAttributes 注解",
            "duration": 447
        },
        {
            "page": 17,

            "part": "17. 尚硅谷_佟刚_SpringMVC_ModelAttribute注解之使用场景",
            "duration": 192
        },
        {
            "page": 18,

            "part": "18. 尚硅谷_佟刚_SpringMVC_ModelAttribute注解之示例代码",
            "duration": 583
        },
        {
            "page": 19,

            "part": "19. 尚硅谷_佟刚_SpringMVC_ModelAttribute注解之运行原理",
            "duration": 389
        },
        {
            "page": 20,

            "part": "20. 尚硅谷_佟刚_SpringMVC_ModelAttribute注解之源码分析",
            "duration": 2022
        },
        {
            "page": 21,

            "part": "21. 尚硅谷_佟刚_SpringMVC_如何确定目标方法POJO类型参数",
            "duration": 472
        },
        {
            "page": 22,

            "part": "22. 尚硅谷_佟刚_SpringMVC_ModelAttribute注解修饰POJO类型的入参",
            "duration": 437
        },
        {
            "page": 23,

            "part": "23. 尚硅谷_佟刚_SpringMVC_SessionAttributes注解引发的异常",
            "duration": 205
        },
        {
            "page": 24,

            "part": "24. 尚硅谷_佟刚_SpringMVC_视图解析流程分析",
            "duration": 583
        },
        {
            "page": 25,

            "part": "25. 尚硅谷_佟刚_SpringMVC_JstlView",
            "duration": 343
        },
        {
            "page": 26,

            "part": "26. 尚硅谷_佟刚_SpringMVC_mvc_view-controller标签",
            "duration": 252
        },
        {
            "page": 27,

            "part": "27. 尚硅谷_佟刚_SpringMVC_自定义视图",
            "duration": 386
        },
        {
            "page": 28,

            "part": "28. 尚硅谷_佟刚_SpringMVC_重定向",
            "duration": 232
        },
        {
            "page": 29,

            "part": "29. 尚硅谷_佟刚_SpringMVC_RESTRUL_CRUD_需求",
            "duration": 185
        },
        {
            "page": 30,

            "part": "30. 尚硅谷_佟刚_SpringMVC_RESTRUL_CRUD_显示所有员工信息",
            "duration": 853
        },
        {
            "page": 31,

            "part": "31. 尚硅谷_佟刚_SpringMVC_RESTRUL_CRUD_添加操作\u0026表单标签",
            "duration": 1201
        },
        {
            "page": 32,

            "part": "32. 尚硅谷_佟刚_SpringMVC_RESTRUL_CRUD_删除操作\u0026处理静态资源",
            "duration": 936
        },
        {
            "page": 33,

            "part": "33. 尚硅谷_佟刚_SpringMVC_RESTRUL_CRUD_修改操作",
            "duration": 909
        },
        {
            "page": 34,

            "part": "34. 尚硅谷_佟刚_SpringMVC_数据绑定流程分析",
            "duration": 669
        },
        {
            "page": 35,

            "part": "35. 尚硅谷_佟刚_SpringMVC_自定义类型转换器",
            "duration": 946
        },
        {
            "page": 36,

            "part": "36. 尚硅谷_佟刚_SpringMVC_annotation-driven配置",
            "duration": 815
        },
        {
            "page": 37,

            "part": "37. 尚硅谷_佟刚_SpringMVC_InitBinder注解",
            "duration": 187
        },
        {
            "page": 38,

            "part": "38. 尚硅谷_佟刚_SpringMVC_数据的格式化",
            "duration": 813
        },
        {
            "page": 39,

            "part": "39. 尚硅谷_佟刚_SpringMVC_JSR303数据校验",
            "duration": 841
        },
        {
            "page": 40,

            "part": "40. 尚硅谷_佟刚_SpringMVC_错误消息的显示及国际化",
            "duration": 488
        },
        {
            "page": 41,

            "part": "41. 尚硅谷_佟刚_SpringMVC_返回JSON",
            "duration": 433
        },
        {
            "page": 42,

            "part": "42. 尚硅谷_佟刚_SpringMVC_HttpMessageConverter原理",
            "duration": 330
        },
        {
            "page": 43,

            "part": "43. 尚硅谷_佟刚_SpringMVC_使用HttpMessageConverter",
            "duration": 698
        },
        {
            "page": 44,

            "part": "44. 尚硅谷_佟刚_SpringMVC_国际化_概述",
            "duration": 235
        },
        {
            "page": 45,

            "part": "45. 尚硅谷_佟刚_SpringMVC_国际化_前两个问题",
            "duration": 504
        },
        {
            "page": 46,

            "part": "46. 尚硅谷_佟刚_SpringMVC_国际化_通过超链接切换Locale",
            "duration": 648
        },
        {
            "page": 47,

            "part": "47. 尚硅谷_佟刚_SpringMVC_文件上传",
            "duration": 518
        },
        {
            "page": 48,

            "part": "48. 尚硅谷_佟刚_SpringMVC_第一个自定义的拦截器",
            "duration": 762
        },
        {
            "page": 49,

            "part": "49. 尚硅谷_佟刚_SpringMVC_拦截器的配置",
            "duration": 193
        },
        {
            "page": 50,

            "part": "50. 尚硅谷_佟刚_SpringMVC_多个拦截方法的执行顺序",
            "duration": 467
        },
        {
            "page": 51,

            "part": "51. 尚硅谷_佟刚_SpringMVC_异常处理_ExceptionHandler注解",
            "duration": 1016
        },
        {
            "page": 52,

            "part": "52. 尚硅谷_佟刚_SpringMVC_异常处理_ResponseStatusExceptionResolver",
            "duration": 490
        },
        {
            "page": 53,

            "part": "53. 尚硅谷_佟刚_SpringMVC_异常处理_DefaultHandlerExceptionResolver",
            "duration": 218
        },
        {
            "page": 54,

            "part": "54. 尚硅谷_佟刚_SpringMVC_异常处理_SimpleMappingExceptionResolver",
            "duration": 448
        },
        {
            "page": 55,

            "part": "55. 尚硅谷_佟刚_SpringMVC_运行流程图解",
            "duration": 183
        },
        {
            "page": 56,

            "part": "56. 尚硅谷_佟刚_SpringMVC_源码解析",
            "duration": 1418
        },
        {
            "page": 57,

            "part": "57. 尚硅谷_佟刚_SpringMVC_Spring整合SpringMVC_提出问题",
            "duration": 295
        },
        {
            "page": 58,

            "part": "58. 尚硅谷_佟刚_SpringMVC_Spring整合SpringMVC_解决方案",
            "duration": 583
        },
        {
            "page": 59,

            "part": "59. 尚硅谷_佟刚_SpringMVC_SpringIOC 容器和 SpringMVC IOC 容器的关系",
            "duration": 244
        },
        {
            "page": 60,

            "part": "60. 尚硅谷_佟刚_SpringMVC_SpringMVC对比Struts2",
            "duration": 119
        }
    ],
    webpackShangguigu: [
        {
            "page": 1,
            "part": "01_尚硅谷_课程介绍",
            "duration": 259
        },
        {
            "page": 2,
            "part": "02_尚硅谷_webpack简介",
            "duration": 775
        },
        {
            "page": 3,
            "part": "03_尚硅谷_webpack五个核心概念",
            "duration": 407
        },
        {
            "page": 4,
            "part": "04_尚硅谷_webpack的初体验",
            "duration": 920
        },
        {
            "page": 5,
            "part": "05_尚硅谷_打包样式资源",
            "duration": 1635
        },
        {
            "page": 6,
            "part": "06_尚硅谷_打包html资源",
            "duration": 533
        },
        {
            "page": 7,
            "part": "07_尚硅谷_打包图片资源",
            "duration": 1466
        },
        {
            "page": 8,
            "part": "08_尚硅谷_打包其他资源",
            "duration": 737
        },
        {
            "page": 9,
            "part": "09_尚硅谷_devServer",
            "duration": 665
        },
        {
            "page": 10,
            "part": "10_尚硅谷_开发环境基本配置",
            "duration": 1365
        },
        {
            "page": 11,
            "part": "11_尚硅谷_构建环境介绍",
            "duration": 248
        },
        {
            "page": 12,
            "part": "12_尚硅谷_提取css成单独文件",
            "duration": 669
        },
        {
            "page": 13,
            "part": "13_尚硅谷_css兼容性处理",
            "duration": 649
        },
        {
            "page": 14,
            "part": "14_尚硅谷_压缩css",
            "duration": 274
        },
        {
            "page": 15,
            "part": "15_尚硅谷_js语法检查eslint",
            "duration": 1010
        },
        {
            "page": 16,
            "part": "16_尚硅谷_js兼容性处理eslint",
            "duration": 1138
        },
        {
            "page": 17,
            "part": "17_尚硅谷_压缩html和js",
            "duration": 267
        },
        {
            "page": 18,
            "part": "18_尚硅谷_生产环境基本配置",
            "duration": 1424
        },
        {
            "page": 19,

            "part": "19_尚硅谷_性能优化介绍",
            "duration": 280
        },
        {
            "page": 20,

            "part": "20_尚硅谷_HMR",
            "duration": 1155
        },
        {
            "page": 21,

            "part": "21_尚硅谷_source-map",
            "duration": 1568
        },
        {
            "page": 22,

            "part": "22_尚硅谷_oneOf",
            "duration": 243
        },
        {
            "page": 23,

            "part": "23_尚硅谷_缓存",
            "duration": 1326
        },
        {
            "page": 24,

            "part": "24_尚硅谷_tree shaking",
            "duration": 557
        },
        {
            "page": 25,

            "part": "25_尚硅谷_code split",
            "duration": 1451
        },
        {
            "page": 26,

            "part": "26_尚硅谷_懒加载和预加载",
            "duration": 755
        },
        {
            "page": 27,

            "part": "27_尚硅谷_PWA",
            "duration": 951
        },
        {
            "page": 28,

            "part": "28_尚硅谷_多进程打包",
            "duration": 417
        },
        {
            "page": 29,

            "part": "29_尚硅谷_externals",
            "duration": 318
        },
        {
            "page": 30,

            "part": "30_尚硅谷_dll",
            "duration": 1059
        },
        {
            "page": 31,

            "part": "31_尚硅谷_性能优化总结",
            "duration": 1694
        },
        {
            "page": 32,

            "part": "32_尚硅谷_webpack配置详解介绍",
            "duration": 307
        },
        {
            "page": 33,

            "part": "33_尚硅谷_webpack详细配置之entry",
            "duration": 939
        },
        {
            "page": 34,

            "part": "34_尚硅谷_webpack详细配置之output",
            "duration": 729
        },
        {
            "page": 35,

            "part": "35_尚硅谷_webpack详细配置之module",
            "duration": 293
        },
        {
            "page": 36,

            "part": "36_尚硅谷_webpack详细配置之resolve",
            "duration": 542
        },
        {
            "page": 37,

            "part": "37_尚硅谷_webpack详细配置之devServer",
            "duration": 637
        },
        {
            "page": 38,

            "part": "38_尚硅谷_webpack详细配置之optimization",
            "duration": 1431
        },
        {
            "page": 39,

            "part": "39_尚硅谷_webpack5介绍和使用",
            "duration": 1221
        },
        {
            "page": 40,

            "part": "40_尚硅谷_总结webpack",
            "duration": 1726
        }
    ],
    typescript: [
        {
            page: 1,
            part: "00_TS简介",
            duration: 1575,
        },
        {
            page: 2,
            part: "01_TS开发环境搭建",
            duration: 880,
        },
        {
            page: 3,
            part: "02_TS的类型声明",
            duration: 1687,
        },
        {
            page: 4,
            part: "03_TS中类型(1)",
            duration: 1628,
        },
        {
            page: 5,
            part: "04_TS中类型(2)",
            duration: 2076,
        },
        {
            page: 6,
            part: "05_TS编译选项(1)",
            duration: 1356,
        },
        {
            page: 7,
            part: "06_TS编译选项(2)",
            duration: 1282,
        },
        {
            page: 8,
            part: "07_TS编译选项(3)",
            duration: 522,
        },
        {
            page: 9,
            part: "08_TS编译选项(4)",
            duration: 828,
        },
        {
            page: 10,
            part: "09_使用webpack打包ts代码(1)",
            duration: 1076,
        },
        {
            page: 11,
            part: "10_使用webpack打包ts代码(2)",
            duration: 1109,
        },
        {
            page: 12,
            part: "11_使用webpack打包ts代码(3)",
            duration: 1982,
        },
        {
            page: 13,
            part: "12_面向对象简介",
            duration: 917,
        },
        {
            page: 14,
            part: "13_类的简介",
            duration: 1131,
        },
        {
            page: 15,
            part: "14_构造函数和this",
            duration: 946,
        },
        {
            page: 16,
            part: "15_继承简介",
            duration: 1235,
        },
        {
            page: 17,
            part: "16_super关键字",
            duration: 464,
        },
        {
            page: 18,
            part: "17_抽象类",
            duration: 508,
        },
        {
            page: 19,
            part: "18_接口",
            duration: 977,
        },
        {
            page: 20,
            part: "19_属性的封装",
            duration: 1769,
        },
        {
            page: 21,
            part: "20_泛型",
            duration: 907,
        },
        {
            page: 22,
            part: "21_练习_项目搭建",
            duration: 1301,
        },
        {
            page: 23,
            part: "22_练习_项目界面",
            duration: 1815,
        },
        {
            page: 24,
            part: "23_练习_完成Food类",
            duration: 1353,
        },
        {
            page: 25,
            part: "24_练习_完成ScorePanel类",
            duration: 1236,
        },
        {
            page: 26,
            part: "25_练习_初步完成Snake类",
            duration: 815,
        },
        {
            page: 27,
            part: "26_练习_GameControl键盘事件",
            duration: 1303,
        },
        {
            page: 28,
            part: "27_练习_GameControl使蛇移动",
            duration: 1191,
        },
        {
            page: 29,
            part: "28_练习_蛇撞墙和吃食检测",
            duration: 1118,
        },
        {
            page: 30,
            part: "29_练习_身体的移动",
            duration: 2506,
        },
    ]

};
const i18n = {
    maxPage: '',
    maxTime: '最大时长',
    minPage: '',
    minTime: '最小时长',
    sumTime: '总时长',
    avgTime: '平均单集时长',
    speedTime: '倍速时长'
}
const KEYS = Object.keys(DATA);
const DEFALUT_COURSE = KEYS[KEYS.length - 1];

var app = new Vue({
    el: '#app',
    data() {
        return {
            data: DATA[DEFALUT_COURSE],
            start: null,
            end: null,
            speed: null,
            clearable: true,
            info: {
                maxPage: null,
                maxTime: 0,
                minPage: null,
                minTime: 0,
                sumTime: 0,
                avgTime: 0,
                speedTime: 0
            },
            selectOptions: KEYS,
            selectValue: DEFALUT_COURSE,
            /**
             * 按钮是否可点击
             */
            disabled: false
        }
    },
    computed: {
        infoList() {
            if (!this.info.sumTime) {
                // 判空
                return [];
            }

            let list = [];
            let keys = Object.keys(this.info);
            keys.forEach(key => {
                let value = this.info[key];
                if (key.indexOf('Time') > -1) {
                    console.log('');
                    console.log('value', value);
                    value = this._parseSecond(value);
                    console.log('value', value);
                }
                list.push({ key: i18n[key], value });
            });
            return list;
        }
    },
    mounted() {
        /** 监听回车事件 */
        document.onkeydown = e => {
            let currKey = e.keyCode || e.which || e.charCode; //支持IE、FF 
            if (currKey == 13) {
                this.onSearch();
            }
        };
    },
    methods: {
        /**
         * 获取信息
         */
        _getInfo(start, end, speed) {
            let info = {
                sumTime: 0,
                speedTime: 0,
                maxTime: 0,
                maxPage: null,
                minTime: 10000,
                minPage: null,
                avgTime: 0,
            };

            this.data.forEach((element, index) => {
                if (element.page >= start && element.page <= end) {
                    info.sumTime += element.duration;
                    if (info.maxTime < element.duration) {
                        info.maxTime = element.duration;
                        info.maxPage = `P${element.page} : ${element.part}`;
                    }
                    if (info.minTime > element.duration) {
                        info.minTime = element.duration;
                        info.minPage = `P${element.page} : ${element.part}`;
                    }
                }
            });
            info.avgTime = Math.floor(info.sumTime / (end - start + 1));
            info.speedTime = Math.floor(info.sumTime / speed);
            this.info = info;
        },

        _parseSecond(s) {
            let hour = Math.floor(s / 60 / 60),
                minute = Math.floor(s % 3600 / 60),
                second = Math.floor(s % 3600 % 60);
            hour = hour ? `${this._formatNumber(hour)}:` : '';
            minute = hour || minute ? `${this._formatNumber(minute)}:` : '';
            second = this._formatNumber(second) || "00";
            return `${hour}${minute}${second}`;
        },

        // 转换添加0
        _formatNumber(n) {
            n = n.toString();
            return n[1] ? n : '0' + n;
        },

        onSelectChange(value, index, text) {
            this.data = DATA[value];
        },

        /**
         * 提交事件
         */
        onSearch() {
            let start = Number(this.start) || 1;
            let end = Number(this.end) || this.data.length;
            let speed = Number(this.speed) || 1;
            if (start > end) {
                let temp = start;
                start = end;
                end = temp;
            }

            this.speed = speed;
            this.start = start;
            this.end = end;

            this._getInfo(start, end, speed);
        }
    }
})
<div id="app">

    <div class="title">时长统计</div>
    <cube-select
        class="model"
        v-model="selectValue"
        :options="selectOptions"
        @change="onSelectChange"
    ></cube-select>
    <cube-input
        class="model"
        v-model="start"
        :clearable="clearable"
        type="number"
        placeholder="请输入起始课程集数"
    ></cube-input>    
    <cube-input
        class="model"
        v-model="end"
        :clearable="clearable"
        type="number"
        placeholder="请输入截止课程集数"
    ></cube-input>    
    <cube-input
        class="model"
        v-model="speed"
        :clearable="clearable"
        type="number"
        placeholder="请输入播放倍速"
    ></cube-input>

    <cube-button
        class="model btn"         
        :disabled="disabled"
        @click="onSearch"
    >查&nbsp&nbsp&nbsp询</cube-button>

    <div v-if="infoList.length" class="info-wrapper">
        <template v-for="info in infoList">
            <div class="info-row">
                <span class="key">{{ info.key }}</span>
                <span class="value">{{ info.value }}</span>
            </div>
        </template>
    </div>
</div>
body {
    background-color: #1E1E1E;
}

#app {    
    display: flex;
    flex-direction: column;
    align-items: center;    
    padding: 5% 20%;        
}

.title {
    margin-bottom: 30px;    
    font-size: 22px;    
    letter-spacing: 10px;
    color: #fff;
}

.model {
    margin: 12px 0;    
    width: 100%;
    letter-spacing: 2px;
    font-size: 18px;
    font-weight: 600;    
    color: rgb(204, 204, 204);
    background-color: #3C3C3C;
}

.btn {    
    border-radius: 2px;
    color: #fff;
    background-color: #0E639C;
}
.cube-picker-confirm {
    color: #3794ff;
}
.cube-input-field {
    color: rgb(204, 204, 204);
}
.cube-input_active::after, .cube-select_active::after {
    border-color: #007FD4;
}

.info-wrapper {    
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    margin-top: 15px;
    padding: 20px 30px;
    box-sizing: border-box;    
    border-radius: 20px;
    box-shadow:4px 4px 9px #666;
    font-size: 18px;
    background-color: #181818;
}
    .info-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 12px 0;
        width: 100%;
    }
        .key {
            color: rgba(240,240,240, 0.7);
        }
        .value {
            letter-spacing: 2px;
            font-weight: 600;            
            color: #ccc;
        }

本项目引用的自定义外部资源