商业模式

B2C

管理员【增删改，使用系统后台】和普通用户【查，使用系统前台】

B2B2C模式

京东【普通用户可以买自营也可以买普通商家】

在线教育平台

使用B2C商业模式，

系统后台包括"讲师管理","课程分类管理","课程管理","统计分析","订单管理","banner管理","权限管理"模块

系统前台包括"首页数据显示","讲师列表详情","课程列表详情【包括视频在线播放】","注册登录","微信扫描登录","微信扫描支付"功能

涉及技术

后端：springBoot、SpringCloud、MyBatisPlus、SpringSecurity、redis、Maven、easyExcel、jwt、OAuth2

前端：vue、element-ui、框架【TODO】、axios、node.js

其他技术：

阿里云oss、阿里云视频点播服务、阿里云短信服务、

微信支付和登录、docker、git、Jenkins

前后端分离开发

前端负责数据显示，用到html、css、js、jq

后端返回数据或者操作数据、结构为controller、service、mapper，java中开发接口指的就是开发上述3个结构的过程

前后端的联系是前端发送ajax请求调用后端接口将json数据返回给前端的过程

代码细节看文档，文档后端前端代码步骤很详细，这篇文档只讲开发要点

后台系统

讲师管理模块开发

1. 创建数据库表

   • 表名edu_teacher，文件edu_teacher.sql

   • 数据库表设计规约，

     • 核心库名与应用名一致，

     • 表名字段名必须使用小写字母或数字，进制数字开头，表名不使用复数名词

     • 表命名用"业务名_表的作用"

     • 表必备三字段："id"【类型bigint unsigned，单表时自增；分库分表集群部署是id为varchar，非自增，业务中使用分布式id生成器】、"gmt_create"【类型为datetime类型，记录创建时间】、"gmt_modified"【同前，记录更新时间】

     • 单表行数超500万行或单表容量超2GB才进行分库分表，预计三年后数据量达不到这个水平，建表时不靠分库分表

     • 表达是与否概念字段使用is_xxx格式命名，数据类型是unsigned tinyint【1表示是，0表示否】

     • 非负数字段必须为unsigned

     • 小数类型为decimal，进制使用float和double，这俩存储时存在精度损失问题，如果数据范围超限，整数和小数分开存储

     • 存储字符串长度几乎相等时，用char

2. 创建项目结构

   其中父工程创建springboot工程，子模块和子子模块都创建maven工程

   • 创建父工程【管理依赖版本以及存放公共依赖 】

     • 子模块1

       • 子子模块1

       • 子子模块2

     • 子模块2

     • ...

   • 总的模块目录

     

   • 创建流程

     • 太多了，看文档【主要流程是创子模块；引入依赖；配置mp相关的spring配置项，注意乐观锁、逻辑删除相关功能没有涉及，还设置了返回json数据的时间格式为东八区；用mp代码生成器生成实体类和所有的目录结构实体类、mapper、controller、service；写控制器方法；创建启动类；创建配置类配置mapper扫描和其他；使用设定的模块端口号8001启动项目】

       • application.properties的配置项

         ​x
         # 服务端口,这是整个模块对应的服务器端口，不写这个会默认使用tomcat的8080端口
         server.port=8001
         # 服务名
         spring.application.name=service-edu
         # 环境设置： dev、 test、 prod,用来配置mybatis-plus的sql执行性能的
         spring.profiles.active=dev
         # mysql数据库连接
         spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
         spring.datasource.url=jdbc:mysql://localhost:3306/ol_education?serverTimezone=GMT%2B8
         spring.datasource.username=root
         spring.datasource.password=Haworthia0715
         #mybatis日志
         mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
         
         #控制器返回json的全局时间格式设置为东八区并设置json中时间的格式
         spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
         spring.jackson.time-zone=GMT+8
         

          

     • 特点：

       • 父工程和子模块中都不写代码

       • 子子模块service_edu用mp提供的代码生成器生成相关代码

         xxxxxxxxxx
         <!-- velocity模板引擎,Mybatis Plus代码生成器需要,mybatis-Plus在3.0.3之后移除了代码生成器与模板引擎间的默认依赖，需要手动添加代码生成的依赖mybatis-plus-generator -->
         <dependency>
             <groupId>org.apache.velocity</groupId>
             <artifactId>velocity-engine-core</artifactId>
         </dependency>
         

         • 生成器代码

           xxxxxxxxxx
           public class CodeGenerator {
               @Test
               public void main1() {
                   // 1、创建代码生成器
                   AutoGenerator mpg = new AutoGenerator();
                   // 2、全局配置
                   GlobalConfig gc = new GlobalConfig();
                   String projectPath = System.getProperty("user.dir");
                   System.out.println(projectPath);
                   gc.setOutputDir(projectPath + "/src/main/java");
                   gc.setAuthor("atguigu");
                   gc.setOpen(false); //生成后是否打开资源管理器
                   gc.setFileOverride(false); //重新生成时文件是否覆盖
                   /*
                    * mp生成service层代码，默认接口名称第一个字母有 I
                    * UcenterService
                    * */
                   gc.setServiceName("%sService"); //去掉Service接口的首字母I
                   gc.setIdType(IdType.ID_WORKER); //主键策略
                   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("root");
                   dsc.setDbType(DbType.MYSQL);
                   mpg.setDataSource(dsc);
                   // 4、包配置
                   PackageConfig pc = new PackageConfig();
                   pc.setModuleName("serviceedu"); //模块名
                   pc.setParent("com.atguigu");
                   pc.setController("controller");
                   pc.setEntity("entity");
                   pc.setService("service");
                   pc.setMapper("mapper");
                   mpg.setPackageInfo(pc);
                   // 5、策略配置
                   StrategyConfig strategy = new StrategyConfig();
                   strategy.setInclude("edu_teacher");
                   strategy.setNaming(NamingStrategy.underline_to_camel);//数据库表映射到实体的命名策略
                   strategy.setTablePrefix(pc.getModuleName() + "_"); //生成实体时去掉表前缀
                   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();
               }
           }
           

         • 作用是生成实体类并创建好后端结构目录

           • 接口中的内容需要自己写，mapper接口自动实现了BaseMapper接口，无需自己建mapper

4. 讲师逻辑删除功能

   • 控制器写删除方法【controller调用service的removeById，即调用mapper的deleteById】，请求路径需要传递讲师id，用@PathVariable注解读取请求路径的路径变量

   • 配置逻辑删除插件LogicSqlInjector，在表示逻辑删除字段上添加@TableLogic注解

   • 用swagger进行接口测试

     • swagger用于生成在线接口文档、方便接口测试、描述、调用、可视化Restful风格的web服务，是一个规范完整的框架，具有及时性、规范性、一致性、可测性的特点

     • 配置swagger2

       • 创建子模块common、在common下创建service_base子子模块，创建配置类向IoC容器中注入Docket组件，docket组件的类型是SWAGGER_2

         xxxxxxxxxx
         @Configuration
         @EnableSwagger2//这个注解的作用不明白，是swagger的注解，估计是使swagger生效的注解
         public class Swagger2Config {
             @Bean
             public Docket webApiConfig() {
                 return new Docket(DocumentationType.SWAGGER_2)
                         .groupName("webApi")//这个名字表示组名，可以随便取
                         .apiInfo(webApiInfo())//apiInfo调用webApiInfo()方法设置在线文档的一些信息
                         .select()
                         .paths(Predicates.not(PathSelectors.regex("/admin/.*")))//这两行表示如果请求路径中包含这两种格式就不适用swagger对其进行显示
                         .paths(Predicates.not(PathSelectors.regex("/error.*")))
                         .build();
             }
             private ApiInfo webApiInfo(){
                 return new ApiInfoBuilder()
                         .title("网站-课程中心API文档")
                         .description("本文档描述了课程中心微服务接口定义")
                         .version("1.0")
                         .contact(new Contact("java", "http://atguigu.com", "55317332@qq.com"))
                         .build();
             }
         }
         

       • 在service模块下引入service_base模块

         注意此时配置类swagger的包名为com.atlisheng.servicebase，而service模块下组件扫描的包默认是com.atlisheng.eduservice，两个包名不一样，swagger无法扫描到，需要用@ComponentScan将包扫描范围增大到com.atlisheng

         xxxxxxxxxx
         <!--在service模块下引入service_base模块的依赖来使用swagger服务-->
         <dependency>
             <groupId>com.atlisheng</groupId>
             <artifactId>service_base</artifactId>
             <version>0.0.1-SNAPSHOT</version>
         </dependency>
         

         扩大组件扫描范围

         xxxxxxxxxx
         @SpringBootApplication
         @ComponentScan(basePackages = "com.atlisheng")
         public class EduServiceApplication {
             public static void main(String[] args) {
                 SpringApplication.run(EduServiceApplication.class,args);
             }
         }
         

       • 访问swagger的网址，固定为http://localhost:8001/swagger-ui.html

       • Swagger定义接口说明和参数说明的注解

         • @Api

           • 定义在类上，description属性会展示在swagger默认显示控制器类名的位置

         • @ApiOperation

           • 定义在方法上，value属性会展示在方法的说明上

         • @ApiParam

           • 定义在控制器方法的参数前，会展示在参数的说明上【其中required属性表示该参数是必须传参的】

6. 统一返回数据格式

   • 统一返回数据格式，将响应封装成json返回，能够使前端（IOS、ANDROID、Web）对数据操作更轻松

   • 返回数据格式一般包括响应信息、状态码、处理信息、返回数据，本项目返回数据格式如下：

     • 列表返回数据【注意列表数据的key用items】

     xxxxxxxxxx
     {
         "success": true,
         "code": 20000,
         "message": "成功",
         "data": {
             "items": [
                 {
                 "id": "1",
                 "name": "刘德华",
                 "intro": "毕业于师范大学数学系，热爱教育事业，执教数学思维6年有余"
                 }
             ]
         }
     }
     

     • 分页数据【key用total，rows】

     xxxxxxxxxx
     {
     "success": true,
     "code": 20000,
     "message": "成功",
     "data": {
     "total": 17,
     "rows": [
     {
     "id": "1",
     "name": "刘德华",
     "intro": "毕业于师范大学数学系，热爱教育事业，执教数学思维6年有余"
         }
     ]
     }
     }
     

     • 没有返回数据

     xxxxxxxxxx
     {
         "success": true,
         "code": 20000,
         "message": "成功",
         "data": {}
     }
     

     • 响应失败

     xxxxxxxxxx
     {
         "success": false,
         "code": 20001,
         "message": "失败",
         "data": {}
     }
     

     • 从而可以定义统一结果

     xxxxxxxxxx
     {
         "success": 布尔, //响应是否成功
         "code": 数字, //响应码
         "message": 字符串, //返回消息
         "data": HashMap //返回数据，放在键值对中
     }
     

     用HashMap自动将键值对转成json对象来满足不同情景响应数据的需求

   • 创建统一结果返回类

     • 创建响应状态码接口【在common_utils下创建ResponseCode接口存放常量响应状态码、创建ResponseData作为统一响应结果类】

     • 创建响应结果类

       xxxxxxxxxx
       @Data
       public class ResponseData {
           @ApiModelProperty(value = "响应是否成功")//这个注解的信息会展示在swagger中
           private Boolean success;
       
           @ApiModelProperty(value = "服务器响应状态码")
           private Integer code;
       
           @ApiModelProperty(value = "响应信息")
           private String message;
       
           @ApiModelProperty(value = "服务器响应数据")
           private Map<String,Object> data=new HashMap<>();
       
           private ResponseData(){
       
           }
       
           /**
            * @return {@link ResponseData }
            * @描述 成功响应返回响应数据的静态方法
            * @author Earl
            * @version 1.0.0
            * @创建日期 2023/08/27
            * @since 1.0.0
            */
           public static ResponseData responseCall(){
               ResponseData responseData = new ResponseData();
               responseData.setSuccess(true);
               responseData.setCode(ResponseCode.SUCCESS);
               responseData.setMessage("响应成功");
               return responseData;
           }
       
           /**
            * @return {@link ResponseData }
            * @描述 异常响应调用方法
            * @author Earl
            * @version 1.0.0
            * @创建日期 2023/08/27
            * @since 1.0.0
            */
           public static ResponseData responseErrorCall(){
               ResponseData responseData = new ResponseData();
               responseData.setSuccess(false);
               responseData.setCode(ResponseCode.ERROR);
               responseData.setMessage("响应异常");
               return responseData;
           }
       
           /**
            * @param success 成功
            * @return {@link ResponseData }
            * @描述 以下方法是为了方便链式编程，即对一个对象一顿.，就可以设置其中的属性，如responseData.success(true).message("响应成功").code("20000").data()
            * @author Earl
            * @version 1.0.0
            * @创建日期 2023/08/27
            * @since 1.0.0
            */
           public ResponseData success(Boolean success){
               this.setSuccess(success);
               return this;
           }
           public ResponseData message(String message){
               this.setMessage(message);
               return this;
           }
           public ResponseData code(Integer code){
               this.setCode(code);
               return this;
           }
           public ResponseData data(String key, Object value){
               this.data.put(key, value);
               return this;
           }
           public ResponseData data(Map<String, Object> map) {
               this.setData(map);
               return this;
           }
       }
       

     • 在service模块中添加统一返回结果的依赖

       xxxxxxxxxx
       <!--在service模块下引入common_utils模块的依赖来使用统一返回结果类-->
       <dependency>
           <groupId>com.atlisheng</groupId>
           <artifactId>common_utils</artifactId>
           <version>0.0.1-SNAPSHOT</version>
       </dependency>
       

        

7. 讲师查询结果分页

   • 配置类中配置分页插件

     xxxxxxxxxx
     @Bean
     public PaginationInterceptor paginationInterceptor(){
         return new PaginationInterceptor();
     }
     

   • 分页查询方法

     xxxxxxxxxx
     @GetMapping("pageTeacher/{current}/{limit}")
     @ApiOperation(value = "讲师分页查询")
     public ResponseData findAllTeacherPaging(@ApiParam(name = "current",value = "当前页",required = true) @PathVariable Integer current,
                                              @ApiParam(name = "limit",value = "每页记录条数",required = true) @PathVariable Integer limit){
         Page<EduTeacher> teacherPage = new Page<>(current, limit);
         teacherService.page(teacherPage,null);
         return ResponseData.responseCall().data("total",teacherPage.getTotal()).data("rows",teacherPage.getRecords());//getRecords是获取当前页的所有记录集合
     }
     

      

8. 条件查询

   根据讲师的名字，头衔和入驻时间gmt_create查询讲师记录，实现多条件组合查询带分页

   • 在entity的vo包下创建条件查询对象TeacherQueryFactor，把条件值封装到对象，将对象传递到接口中

     xxxxxxxxxx
     @ApiModel(value = "Teacher查询对象", description = "讲师查询对象封装")
     @Data
     public class TeacherQueryFactor implements Serializable {
         private static final long serialVersionUID = 1L;
         @ApiModelProperty(value = "教师名称,模糊查询")//这个@ApiModelProperty的example属性表示在swagger中传入参数举例，String默认是String，Integer默认是0
         private String name;
         @ApiModelProperty(value = "头衔 1高级讲师 2首席讲师")
         private Integer level;
         @ApiModelProperty(value = "查询开始时间", example = "2019-01-01 10:10:10")
         private String beginTime;//注意，这里使用的是String类型，前端传过来的数据无需进行类型转换
         @ApiModelProperty(value = "查询结束时间", example = "2019-12-01 10:10:10")
         private String endTime;
     }
     

   • 条件查询带分页的控制器方法

     xxxxxxxxxx
     /**
      * @param current            当前页
      * @param limit              每页记录数
      * @param teacherQueryFactor 讲师查询条件
      * @return {@link ResponseData }
      * @描述 讲师多条件组合带分页查询
      * @author Earl
      * @version 1.0.0
      * @创建日期 2023/08/27
      * @since 1.0.0
      */
     @PostMapping("pageFactorTeacher/{current}/{limit}")
     @ApiOperation(value = "讲师多条件组合带分页查询")
     public ResponseData findFactorTeacherPaging(@ApiParam(name = "current",value = "当前页",required = true) @PathVariable Integer current,
                                                 @ApiParam(name = "limit",value = "每页记录条数",required = true) @PathVariable Integer limit,
                                                 @ApiParam(name = "teacherQueryFactor",value = "讲师筛选条件") @RequestBody(required = false) TeacherQueryFactor teacherQueryFactor){//@RequestBody将json数据封装到对应的对象中
         Page<EduTeacher> teacherPage = new Page<>();
         QueryWrapper<EduTeacher> queryWrapper = new QueryWrapper<>();
         String teacherName = teacherQueryFactor.getName();
         Integer teacherLevel = teacherQueryFactor.getLevel();
         String beginTime = teacherQueryFactor.getBeginTime();
         String endTime = teacherQueryFactor.getEndTime();
         if (!StringUtils.isEmpty(teacherName)){
             queryWrapper.like("name",teacherName);
         }
         if (!StringUtils.isEmpty(teacherLevel)){
             queryWrapper.eq("level",teacherLevel);
         }
         if (!StringUtils.isEmpty(beginTime)){
             queryWrapper.ge("gmt_create",beginTime);
         }
         if (!StringUtils.isEmpty(endTime)){
             queryWrapper.le("gmt_create",endTime);
         }
         teacherService.page(teacherPage,queryWrapper);
         return ResponseData.responseCall().data("total",teacherPage.getTotal()).data("rows",teacherPage.getRecords());
     }
     

9. 实现gmt_Create和gmt_Modified字段的自动填充功能

   • 在实体类中添加自动填充注解@TableField

   • 编写自定义源对象处理器MyMetaObjectHandler并用@Component注解纳入Spring容器管理

    

10. 讲师添加到列表功能

    • 控制器方法，@RequestBody注解接收post提交的参数封装成EduTeacher对象并调用service的save(entity)方法实现数据存入，版本号和逻辑删除默认值是由数据库设置的

     

11. 讲师信息更新功能

    • 第一步在控制器方法中根据讲师id查询讲师信息

    • 第二步在另一个控制器方法中路径传递讲师id，@RequestBody封装讲师信息，使用put提交方式

     

12. 统一异常处理

    • 在common_base中创建统一异常处理类GlobalExceptionHandler.java,作用是捕捉所有异常打印异常堆栈信息然后响应ResponseData.responseErrorCall().message("服务器异常,请联系管理员")

      这上面的@ControllerAdvice注解是干什么的

      xxxxxxxxxx
      @ControllerAdvice
      public class GlobalExceptionHandler {
          @ExceptionHandler(Exception.class)//指定出现哪种异常的情况下执行该方法
          @ResponseBody
          public ResponseData handleException(Exception e){
              e.printStackTrace();
              return ResponseData.responseErrorCall().message("服务器异常,请联系管理员");
          }
      }
      

    • 发生@ExceptionHandler(Exception.class)这种指定的异常会去执行该方法

      还有特定异常处理和自定义异常处理见文档，核心还是捕捉不同类型的异常执行不同的方法

    • 特定异常处理

      这种异常的优先级高于全局异常处理，发生对应异常会优先去调用特定异常的处理方法

      xxxxxxxxxx
      @ExceptionHandler(ArithmeticException.class)//特定异常执行该方法
      @ResponseBody
      public ResponseData handleException(ArithmeticException e){
          e.printStackTrace();
          log.error(e.getMessage());
          return ResponseData.responseErrorCall().message("数学运算异常,请联系管理员");
      }
      

    • 自定义异常处理

      就是自己自定义异常，然后用特定异常处理进行处理

      • 第一步：创建自定义异常类继承RuntimeException，确定异常属性，状态码和异常信息

        xxxxxxxxxx
        @Data
        @AllArgsConstructor
        @NoArgsConstructor
        public class CustomException extends RuntimeException{
            /**
             * 状态码
             */
            private Integer code;
        
            /**
             * 一张信息
             */
            private String msg;
        }
        

      • 第二步：对自定义异常进行特定异常处理

        自定义异常是在try语句块发生异常捕捉后在catch语句块中手动抛出的

        xxxxxxxxxx
        @ExceptionHandler(CustomException.class)//自定义异常执行方法
        @ResponseBody
        public ResponseData handleException(CustomException e){
            e.printStackTrace();
            log.error(e.getMessage());
            return ResponseData.responseErrorCall().code(e.getCode()).message(e.getMessage());
        }
        

      • 第三步：自定义异常使用举例

        xxxxxxxxxx
        @GetMapping("pageTeacher/{current}/{limit}")
        @ApiOperation(value = "分页查询全部讲师")
        public ResponseData findAllTeacherPaging(@ApiParam(name = "current",value = "当前页",required = true) @PathVariable Integer current,
                                                 @ApiParam(name = "limit",value = "每页记录条数",required = true) @PathVariable Integer limit){
            Page<EduTeacher> teacherPage = new Page<>(current, limit);
            try{
                int i=10/0;
            }catch (Exception e){
                throw new CustomException(20001,"执行了自定义异常处理...");
            }
            //int i=10/0;//这种会由系统抛出算术异常
            teacherService.page(teacherPage,null);
            return ResponseData.responseCall().data("total",teacherPage.getTotal()).data("rows",teacherPage.getRecords());//getRecords是获取当前页的所有记录集合
        }
        

       

     

13. 日志

    • 日志记录器的行为级别OFF、 FATAL、 ERROR、 WARN、 INFO、 DEBUG、 ALL ，默认情况下SpringBoot在控制台打印的日志级别为INFO及以上的日志级别

    • 通过Spring的配置文件可以设置在控制台打印的日志级别，如

      xxxxxxxxxx
      #设置SpringBoot的控制台打印日志的级别为WARN
      logging.level.root=WARN
      

      这种方式只能将日志打印在控制台上

    • 使用logback日志工具能将日志输出到控制台也能输出到文件

      常见日志工具有log4j，logback

      • 使用logback需要删除application.properties的日志配置，包括mybatis的日志配置

      • 配置logback日志

        • idea安装日志插件：grep-console

          这个插件是一个彩色日志插件，但是我没装以前日志也是彩色的，感觉装没装没影响

        • 在resource中创建logback-spring.xml，并复制拷贝下列内容

          其中就规定了日志文件的输出地址

          xxxxxxxxxx
          <?xml version="1.0" encoding="UTF-8"?>
          <configuration scan="true" scanPeriod="10 seconds">
              <!-- 日志级别从低到高分为TRACE < DEBUG < INFO < WARN < ERROR < FATAL，如果设置为WARN，则低于WARN的信息都不会输出 -->
              <!-- scan:当此属性设置为true时，配置文件如果发生改变，将会被重新加载，默认值为true -->
              <!-- scanPeriod:设置监测配置文件是否有修改的时间间隔，如果没有给出时间单位，默认单位是毫秒。当scan为true时，此属性生效。默认的时间间隔为1分钟。 -->
              <!-- debug:当此属性设置为true时，将打印出logback内部日志信息，实时查看logback运行状态。默认值为false。 -->
              <contextName>logback</contextName>
          
              <!-- name的值是变量的名称， value的值时变量定义的值。通过定义的值会被插入到logger上下文中。定义变量后，可以使“${}”来使用变量。 -->
              <property name="log.path" value="D:/E:/JavaStudy/project/ol_edu/edu" />
          
              <!-- 彩色日志 -->
              <!-- 配置格式变量： CONSOLE_LOG_PATTERN 彩色日志格式 -->
              <!-- magenta:洋红 -->
              <!-- boldMagenta:粗红-->
              <!-- cyan:青色 -->
              <!-- white:白色 -->
              <!-- magenta:洋红 -->
              <property name="CONSOLE_LOG_PATTERN"
                        value="%yellow(%date{yyyy-MM-dd HH:mm:ss}) |%highlight(%-5level)|%blue(%thread) |%blue(%file:%line) |%green(%logger) |%cyan(%msg%n)"/>
              <!--输出到控制台-->
              <appender name="CONSOLE" class="ch.qos.logback.core.ConsoleAppender">
                  <!--此日志appender是为开发使用，只配置最底级别，控制台输出的日志级别是大于或等于此级别的日志信息-->
                  <!-- 例如：如果此处配置了INFO级别，则后面其他位置即使配置了DEBUG级别的日志，也不会被输出 -->
                  <filter class="ch.qos.logback.classic.filter.ThresholdFilter">
                      <level>INFO</level>
                  </filter>
                  <encoder>
                      <Pattern>${CONSOLE_LOG_PATTERN}</Pattern>
                      <!-- 设置字符集 -->
                      <charset>UTF-8</charset>
                  </encoder>
              </appender>
              <!--输出到文件-->
              <!-- 时间滚动输出 level为 INFO 日志 -->
              <appender name="INFO_FILE"
                        class="ch.qos.logback.core.rolling.RollingFileAppender">
                  <!-- 正在记录的日志文件的路径及文件名 -->
                  <file>${log.path}/log_info.log</file>
                  <!--日志文件输出格式-->
                  <encoder>
                      <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level
                          %logger{50} - %msg%n</pattern>
                      <charset>UTF-8</charset>
                  </encoder>
                  <!-- 日志记录器的滚动策略，按日期，按大小记录 -->
                  <rollingPolicy
                          class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
                      <!-- 每天日志归档路径以及格式 -->
                      <fileNamePattern>${log.path}/info/log-info-%d{yyyy-MMdd}.%i.log</fileNamePattern>
                      <timeBasedFileNamingAndTriggeringPolicy
                              class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
                          <maxFileSize>100MB</maxFileSize>
                      </timeBasedFileNamingAndTriggeringPolicy>
                      <!--日志文件保留天数-->
                      <maxHistory>15</maxHistory>
                  </rollingPolicy>
                  <!-- 此日志文件只记录info级别的 -->
                  <filter class="ch.qos.logback.classic.filter.LevelFilter">
                      <level>INFO</level>
                      <onMatch>ACCEPT</onMatch>
                      <onMismatch>DENY</onMismatch>
                  </filter>
              </appender>
              <!-- 时间滚动输出 level为 WARN 日志 -->
              <appender name="WARN_FILE"
                        class="ch.qos.logback.core.rolling.RollingFileAppender">
                  <!-- 正在记录的日志文件的路径及文件名 -->
                  <file>${log.path}/log_warn.log</file>
                  <!--日志文件输出格式-->
                  <encoder>
                      <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level
                          %logger{50} - %msg%n</pattern>
                      <charset>UTF-8</charset> <!-- 此处设置字符集 -->
                  </encoder>
                  <!-- 日志记录器的滚动策略，按日期，按大小记录 -->
                  <rollingPolicy
                          class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
                      <fileNamePattern>${log.path}/warn/log-warn-%d{yyyy-MMdd}.%i.log</fileNamePattern>
                      <timeBasedFileNamingAndTriggeringPolicy
                              class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
                          <maxFileSize>100MB</maxFileSize>
                      </timeBasedFileNamingAndTriggeringPolicy>
                      <!--日志文件保留天数-->
                      <maxHistory>15</maxHistory>
                  </rollingPolicy>
                  <!-- 此日志文件只记录warn级别的 -->
                  <filter class="ch.qos.logback.classic.filter.LevelFilter">
                      <level>warn</level>
                      <onMatch>ACCEPT</onMatch>
                      <onMismatch>DENY</onMismatch>
                  </filter>
              </appender>
              <!-- 时间滚动输出 level为 ERROR 日志 -->
              <appender name="ERROR_FILE"
                        class="ch.qos.logback.core.rolling.RollingFileAppender">
                  <!-- 正在记录的日志文件的路径及文件名 -->
                  <file>${log.path}/log_error.log</file>
                  <!--日志文件输出格式-->
                  <encoder>
                      <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level
                          %logger{50} - %msg%n</pattern>
                      <charset>UTF-8</charset> <!-- 此处设置字符集 -->
                  </encoder>
                  <!-- 日志记录器的滚动策略，按日期，按大小记录 -->
                  <rollingPolicy
                          class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
                      <fileNamePattern>${log.path}/error/log-error-%d{yyyy-MMdd}.%i.log</fileNamePattern>
                      <timeBasedFileNamingAndTriggeringPolicy
                              class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
                          <maxFileSize>100MB</maxFileSize>
                      </timeBasedFileNamingAndTriggeringPolicy>
                      <!--日志文件保留天数-->
                      <maxHistory>15</maxHistory>
                  </rollingPolicy>
                  <!-- 此日志文件只记录ERROR级别的 -->
                  <filter class="ch.qos.logback.classic.filter.LevelFilter">
                      <level>ERROR</level>
                      <onMatch>ACCEPT</onMatch>
                      <onMismatch>DENY</onMismatch>
                  </filter>
              </appender>
              <!--
                  <logger>用来设置某一个包或者具体的某一个类的日志打印级别、以及指定<appender>。
                  <logger>仅有一个name属性，一个可选的level和一个可选的addtivity属性。
                      name:用来指定受此logger约束的某一个包或者具体的某一个类。
                      level:用来设置打印级别，大小写无关： TRACE, DEBUG, INFO, WARN, ERROR, ALL和 OFF，如果未设置此属性，那么当前logger将会继承上级的级别。
              -->
              <!--
              使用mybatis的时候， sql语句是debug下才会打印，而这里我们只配置了info，所以想要查看sql语句的话，有以下两种操作：
                  第一种把<root level="INFO">改成<root level="DEBUG">这样就会打印sql，不过这样日志那边会出现很多其他消息
                  第二种就是单独给mapper下目录配置DEBUG模式，代码如下，这样配置sql语句会打印，其他还是正常DEBUG级别：
              -->
              <!--开发环境:打印控制台-->
              <springProfile name="dev">
                  <!--可以输出项目中的debug日志，包括mybatis的sql日志-->
                  <logger name="com.guli" level="INFO" />
                  <!--
                  root节点是必选节点，用来指定最基础的日志输出级别，只有一个level属性
                      level:用来设置打印级别，大小写无关： TRACE, DEBUG, INFO, WARN, ERROR,ALL 和 OFF，默认是DEBUG,可以包含零个或多个appender元素。
                  -->
                  <root level="INFO">
                      <appender-ref ref="CONSOLE" />
                      <appender-ref ref="INFO_FILE" />
                      <appender-ref ref="WARN_FILE" />
                      <appender-ref ref="ERROR_FILE" />
                  </root>
              </springProfile>
              <!--生产环境:输出到文件-->
              <springProfile name="pro">
                  <root level="INFO">
                      <appender-ref ref="CONSOLE" />
                      <appender-ref ref="DEBUG_FILE" />
                      <appender-ref ref="INFO_FILE" />
                      <appender-ref ref="ERROR_FILE" />
                      <appender-ref ref="WARN_FILE" />
                  </root>
              </springProfile>
          </configuration>
          

    • 将程序运行异常的信息输出到文件中

      • 第一步：在统一异常处理类上添加@Slf4j注解

      • 第二步：使用异常输出语句log.error(e.getMessage)，错误信息就会输出到error.log中

        xxxxxxxxxx
        @ControllerAdvice
        @Slf4j
        public class GlobalExceptionHandler {
            @ExceptionHandler(Exception.class)//指定出现哪种异常的情况下执行该方法
            @ResponseBody
            public ResponseData handleException(Exception e){
                e.printStackTrace();
                log.error(e.getMessage());
                return ResponseData.responseErrorCall().message("服务器异常,请联系管理员");
            }
        }
        

      • 默认异常信息写入文件只写一行信息，想要写的更详细可以参考文档ExceptionUtil.java工具类 ，可以将详细信息输出到日志中

     

前端框架搭建

VS code前端框架搭建

• 安装插件ch【汉化】、Live Server【类似于tomcat的服务器，有了这个没有tomcat也可以模拟出服务器的效果，能通过端口号进行访问，用法是页面直接右键用live Server打开】、Vetur、Vue-helper【这两个插件方便vue的开发、比如不同代码会有颜色的变化】

• 创建工作区

  前端的代码都写在工作区中

  • 第一步在本地创建空文件夹并使用vscode打开该文件夹

  • 第二步把文件夹另存为工作区，见文档

• ECMAScript6

  • ES6是JS的一种标准，是JS请国际标准化组织制定的希望通过标准使JS成为浏览器脚本语言的国际标准，ES6是JS的规格，JS是ES6的实现，ES6是2015年开始发布的，泛指ES5.1之后的版本

  • ES6代码简洁，但浏览器的兼容性很差，ES5代码复杂，但是浏览器兼容性很好

• ES6基本语法

  • 变量声明

    • let声明的变量有局部作用域，即大括号外无法访问大括号内let声明的变量；同一个变量只能被let声明一次

    • var声明的变量没有局部作用域，到处都可以访问；且同一个变量可以被var声明多次

  • 太多了，见E:\JavaStudy\project\ol_edu\vpc_ol_js\es6_std的笔记

• Vue.js简介

  • 用于构建用户界面的渐进式框架，只关注视图层且便于与第三方库或既有项目整合

  • vue的js文件vue.min.js

  • 步骤

    • 第一步：引入vue的js文件

    • 第二步：搭建前端页面的架子，感叹号生成html页面，引入vue的js文件，在脚本块中搭建vue对象的架子

    • 第三步：使用插值表达式获取vue对象中data中的数据

    • 第四步：抽取vue代码片段

      • 文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：

      • 使用的时候用代码片段开头的文字选中创建出来，具体看视频【文档写的不好】

• Vue基本语法

  • 太多，看E:\JavaStudy\project\ol_edu\vpc_ol_js\vue_std的笔记

  • 组件：组件可以扩展HTML元素，封装可重用的代码，实现使用可复用的小组件来构建大型应用，几乎所有类型的应用界面都可以抽象为一个组件树

• vue路由

  • 路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。因为我们一般用Vue做的都是单页应用，只有一个主页面index.html，所以你写的标签是不起作用的，要使用vue-router来进行管理

• vue通过axios发送ajax请求

  • axios是独立的项目，不属于vue，但是常和vue一起使用实现ajax操作

  • axios的使用

    • 引入axios和vue的依赖，用data.json模拟服务器返回的数据

    • 使用axios发送ajax请求，请求文件得到数据并在页面展示【在vue的method中用axios.提交方式("请求接口路径[文件写文件路径]").then(箭头函数).catch(箭头函数)放松ajax请求并对数据进行处理】

• 使用element-ui

  • element-ui是饿了么基于vue的后台组件库，方便页面的快速布局和构建，官网Element - 网站快速成型工具

  • 可以选取前端组件直接生成代码，然后自己改改就能得到一样的效果

• node.js

  node.js下载使用msi包自动安装，最好使用默认的安装路径，否则可能会出现莫名其妙的问题

  安装后需要配置国内镜像，在任意CMD窗口运行npm config set registry http://registry.npm.taobao.org/进行配置

  • Node.js是一个时间驱动I/O服务端js运行环境，类比于java的jdk，基于google的v8引擎，理解成不需要浏览器，可以在服务端执行javaScript的代码环境，本质就是浏览器底层那一套东西

  • 此外，Node.js还可以模拟服务器效果，如tomcat，

    js文件写代码模拟服务器行为，nodejs运行后可以在浏览器对指定的端口号的请求路径进行访问

    node.js安装最好默认安装到c盘，node -v查看nodejs版本信息【本机使用v10.24.1】，LTS是长期支持版本

  • 使用node执行js代码

    • 编写js文件，从文件位置进入DOS命令窗口

    • node 文件名.js：运行js文件，console.log之类的命令会在DOS窗口显示,还可以模拟服务器的效果

    • 关闭模拟服务器的nodejs服务直接按ctrl+c

  • vscode打开cmd窗口终端，可以在vscode中使用命令用nodejs执行js代码

    • powershell有管理员权限，cmd没有管理员权限

  • 卸载nodejs

    nodejs安装以后不能在直接通过msi安装更早版本的，需要将更新版本的nodejs卸载；更新版本的nodejs可以直接通过msi进行安装

    • win菜单找到node.js，找到卸载nodejs程序并运行

    • 删除C:\Users\用户名\AppData\Roaming目录下的npm和npm-cache；删除C:\Users\123\AppData\Local\目录下的npm-cache。

  • NPM

    安装nodejs默认会自动安装npm

    • NPM全称Node Package Manager，是Node.js包管理工具，全球最大的免费开源模块生态系统，也是Node.js的包管理工具，相当于前端的maven，和maven一样下载js依赖如jquery需要联网

    • 通过npm可以方便的管理前端工程，下载js库，Node.js默认将npm包安装到node.js\node_modules目录下，即Node.js已经集成了npm工具

    • npm -v可以查看当前npm版本

    • npm操作

      • npm initnpm项目初始化操作,在文件工程路径下使用，项目初始化完成之后，生成package.json，类似于后端的pom.xml

        • npm init -y是项目默认初始化，少了一些询问而采用默认设置

      • npm install 依赖名称npm下载js依赖，下载好的依赖会自动放入当前项目的node_modules目录下，package.json的依赖信息中会自动添加对应依赖信息，这里面的依赖信息可能变化;安装特定版本在依赖名称后加@具体版本,可以在package-lock.json中锁定依赖的版本

      • npm config set registry https://registry.npm.taobao.org:npm官方管理的包都从http:..npmjs.com下载，网速慢，推荐使用淘宝的NPM镜像，该命令就是修改npm镜像

        • npm config list:查看npm配置信息

      • 有package.json但没下载依赖，使用npm install可以实现所有依赖下载

      • 以下命令表示在项目中安装一些插件

        • #devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖 #使用 -D参数将依赖添加到devDependencies节点 npm install --save-dev eslint #或 npm install -D eslint

          当前项目中安装，换个项目就不能用了

        • #全局安装 #Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules #一些命令行工具常使用全局安装的方式 npm install -g webpack

          只要在nodejs环境中的项目都可以使用

      • 其他命令

        • #更新包（更新到最新版本） npm update 包名

        • #全局更新 npm update -g 包名

        • #卸载包 npm uninstall 包名

        • #全局卸载 npm uninstall -g 包名

• babel

  • babel是转码器，能够将ES6代码转换成ES5代码，一般都是编写ES6代码，转换成ES5代码运行，因为ES6代码的浏览器兼容性很差

  • npm install --global babel-clinpm安装babel

  • babel --version可以查看babel是否安装成功

  • 转码流程

    • 安装babel

    • 编写es6的js文件

    • 创建babel配置文件.babelrc，编写转码配置【类似于写明待转码文件的规范】

    • npm install --save-dev babel-preset-es2015安装es2015转码器

    • 使用命令进行转码【这一步涉及的文件夹必须创建好，文件不用创建，会自动创建】

      xxxxxxxxxx
      # 转码结果写入一个文件
      mkdir dist1
      # --out-file 或 -o 参数指定输出文件，文件名字可以自定义
      babel src/example.js --out-file dist1/compiled.js
      # 或者
      babel src/example.js -o dist1/compiled.js
      # 整个目录转码
      mkdir dist2
      # --out-dir 或 -d 参数指定输出目录,文件名字不会改变
      babel src --out-dir dist2
      # 或者
      babel src -d dist2
      

• 模块化

  • 模块化：后端开发接口时，controller注入service、service注入mapper，后端中类与类的调用就是后端的模块化操作

  • 而前端中的js和js建的调用就是前端的模块化操作

  • 注意：使用es6写法实现的模块化操作，node.js环境中不能直接运行，需要使用babel将es6代码转成es5代码，才能在node.js上进行运行

  • 模块化操作

    • 第一种方式

      • 用common-js即exports和required来导出引入模块

        xxxxxxxxxx
        //1. 用common-js即exports和required来导出引入模块
        //创建js方法
        //定义成员
        const sum = function(a,b){
            return parseInt(a) + parseInt(b)
        }
        const subtract = function(a,b){
            return parseInt(a) - parseInt(b)
        }
        const multiply = function(a,b){
            return parseInt(a) * parseInt(b)
        }
        const divide = function(a,b){
            return parseInt(a) / parseInt(b)
        }
        
        //导出模块中的成员，即设置哪些方法可以被其他js调用,以下是简写，非简写就是在每个方法名前加"方法名:",在需要使用的文件中引入该模块即可使用
        module.exports = {
            sum,
            subtract,
            //multiply,
            divide
        }
        

      • 调用

        xxxxxxxxxx
        //用required指令引入calculate.js文件，就可以调用其中模块化的方法
        //指令格式const cal=required('./文件路径'),cal就像创建一个对象一样可以通过该对象调用文件中的模块化方法
        const cal = require('./calculate')
        
        //调用cal的模块化方法,没有加入模块化的方法就不会被提示出来
        console.log(cal.sum(1,2))
        console.log(cal.divide(10,3))
        console.log(cal.subtract(10,7))
        

    • 第二种方式

      • es6的export和import来导出、导入模块

        xxxxxxxxxx
        //ES6模块化规范，使用export和import来导出、导入模块
        export function getList(){
            console.log('获取用户数据列表')
        }
        export function save(){
            console.log('保存用户数据')
        }
        

      • 调用

        xxxxxxxxxx
        //使用import来取出需要的方法，方法间用逗号分隔
        import {getList,save} from "./userApi.js"//js可以省略，但是./不能省，注意可以使用@符号代替.
        
        getList()
        save()
        //注意此时无法在nodejs中通过node命令运行es6的模块化，必须先转换成es5的代码
        

      • 将上述模块文件和调用文件全部转成es5再执行

    • 第三种方式

      • es6的export default和import

        xxxxxxxxxx
        //使用export default把模块中的方法包含进去
        export default{
            getList(){
                console.log('获取用户列表2')
            },
            save(){
                console.log('保存用户数据2')
            }
        }
        

      • import像引入对象一样引入模块化方法

        xxxxxxxxxx
        //import像导入对象一样从模块化文件导入
        import userApi from './userApi2'
        userApi.getList()
        userApi.save()
        

        这是es6的第二种方式引入模块化的方式，仍然需要使用babel转成es5才能用nodejs运行

• webpack

  • webpack是一个前端资源加载/打包工具，会根据模块的依赖关系按指定的规则生成静态资源，作用是将多种静态资源js、css、less转换成一个静态文件，即把多个静态资源文件打包成一个文件，减少页面的请求次数

  • npm install -g webpack webpack-cli全局安装webpack

  • webpack -v安装后查看版本号

  • webpack打包js文件

    • 在webpack_std下创建三个js文件common.js、utils.js和main.js

    xxxxxxxxxx
    //创建3个js文件，在common和utils中分别定义了info和add方法，在main.js中引入了common和utils，使用webpack打包这三个文件
    const common=require('./common')
    const utils=require('./utils')
    common.info('Hello World!'+utils.add(100,200))
    

    • 在webpack即项目根目录下创建配置文件webpack.config.js,在其中写入webpack的配置文件

    有新目录的需要创建对应目录

    xxxxxxxxxx
    const path=require("path")//Node.js的内置模块
    module.exports={
        entry:'./src/main.js',//配置js文件的入口条件
        output:{
            path:path.resolve(__dirname,'./dist'),//指定打包js文件放置目录
            filename:'bundle.js'//输出文件
        }
    }
    

    • 执行打包命令

    以下两个命令二选一，注意这里的nodejs的版本要高一点，否则会webpack报错，国内的论坛根本找不到解决方案，只能在stackOverflow上找到

    xxxxxxxxxx
    webpack #有黄色警告,原因是没有设置模式为开发者模式，实际上默认生产模式
    webpack --mode=development #没有警告
    #执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩
    

    xxxxxxxxxx
    PS E:\JavaStudy\project\ol_edu\vpc_ol_js\webpack_std> webpack
    #nodejs版本太低报错
    [webpack-cli] TypeError: ["webpack.config",".webpack/webpack.config",".webpack/webpackfile"].flatMap is not a function
        at WebpackCLI.loadConfig (C:\Users\Earl\AppData\Roaming\npm\node_modules\webpack-cli\lib\webpack-cli.js:1505:118)
        at WebpackCLI.createCompiler (C:\Users\Earl\AppData\Roaming\npm\node_modules\webpack-cli\lib\webpack-cli.js:1781:33)
        at WebpackCLI.runWebpack (C:\Users\Earl\AppData\Roaming\npm\node_modules\webpack-cli\lib\webpack-cli.js:1877:31)
        at Command.makeCommand (C:\Users\Earl\AppData\Roaming\npm\node_modules\webpack-cli\lib\webpack-cli.js:944:32)
        at Command.listener [as _actionHandler] (C:\Users\Earl\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\commander\lib\command.js:482:17)     
        at actionResult._chainOrCall (C:\Users\Earl\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\commander\lib\command.js:1283:65)
        at Command._chainOrCall (C:\Users\Earl\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\commander\lib\command.js:1177:12)
        at Command._parseCommand (C:\Users\Earl\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\commander\lib\command.js:1283:27)
        at hookResult._chainOrCall (C:\Users\Earl\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\commander\lib\command.js:1081:27)
        at Command._chainOrCall (C:\Users\Earl\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\commander\lib\command.js:1177:12)
    PS E:\JavaStudy\project\ol_edu\vpc_ol_js\webpack_std> node -v
    v10.24.1
    #更换了nodejs的版本
    PS E:\JavaStudy\project\ol_edu\vpc_ol_js\webpack_std> node -v
    v18.17.1
    #打包成功
    PS E:\JavaStudy\project\ol_edu\vpc_ol_js\webpack_std> webpack
    asset bundle.js 322 bytes [emitted] [minimized] (name: main)
    ./src/main.js 266 bytes [built] [code generated]
    ./src/common.js 138 bytes [built] [code generated]
    ./src/utils.js 46 bytes [built] [code generated]
    
    WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value.
    Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
    
    webpack 5.88.2 compiled with 1 warning in 161 ms
    

     

    • 创建html文件，引入打包后的js文件，用浏览器查看效果

    xxxxxxxxxx
    <script src="./dist/bundle.js"></script>
    

  • webpack打包css文件

    • 编写css文件，用required引入css文件

    • webpack本身只能处理javaScript模块，如果要处理其他类型的文件，需要使用模块和资源的转换器loader进行转换，首先需要安装loader插件。css-loader是将css装载到javascript，style-loader可以让javascript认识css

      • npm install --save-dev style-loader css-loader

        这个好像就下不好一样，但是进package.json一看就是下好的，实际也能用，很费解

    • 修改webpack.config.js

      xxxxxxxxxx
      const path=require("path")//Node.js的内置模块
      module.exports={
          entry:'./src/main.js',//配置js文件的入口条件
          output:{
              path:path.resolve(__dirname,'./dist'),//指定打包js文件放置目录
              filename:'bundle.js'//输出文件
          },
          module:{
              rules:[
                  {
                      test:/\.css$/,//打包规则应用到以css结尾的文件上
                      use:['style-loader','css-loader']
                  }
              ]
          }
      }
      

    • 在main.js中引入css文件require('./style.css')，重新打包并打开html页面查看效果

     

搭建项目前端页面环境

选取模板vue-admin-template框架进行前端页面环境搭建

1. 模板安装

   • 使用171kb的小压缩包作为前端框架，将其解压放到工作区中

   • npm init初始化该项目,npm install安装所有依赖，由于nodejs版本过高也会导致依赖下载失败，这里又改成了v14，overStackflow上说14的版本兼容性更好

   • npm run dev启动项目即可通过浏览器访问该项目，访问地址:http://localhost:9528

2. vue-admin-template前端框架环境说明

   该模板主要基于vue和element-ui两种技术实现的，这两个文件都能在node_module中找到

   • index.html和main.js是前端框架入口，在index.html中有一个id为app的div，在main.js中new了一个vue对象，其中的el就是index.html中的app【@一般是指src的根目录即就是src】

   • build目录放的是项目进行构建和进行编译的脚本文件，就像java编译class文件的一些工具文件

   • config目录，里面放着项目最基本的设置，如index.js,里面就放着port:9528,host:'localhost',都可以进行更改；index.js中有个useEslint:true,把这个值改成false，ESLint是vscode的插件，可以帮助自动整理代码格式并做代码检查，不建议装，检查太严格，多了一个空格或者换行都算错，这不好；另外两个文件分别对应开发环境或者生产环境去分别执行，启动时npm run dev就是开发环境启动，文件中的BASE_API规定了浏览器要访问接口的默认位置，后面要改成本地8001服务器端口

   • node_modules是下载好的依赖

   • src主要的代码都在src中

     重要的有api、router和views，改就主要改访问地址和这三个地方，其他地方基本不怎么动；开发流程是写接口，写路由、在页面中调用方法并用element-ui进行显示

     • api中定义了需要调用的方法

     • assets目录主要放一些静态资源，js文件，css文件，一些项目中的图片

     • components主要放一些当前框架没有的额外的组件

     • icons放的是项目中用的各种图标

     • router表示项目中用到的路由部分

     • store中主要放的是项目中用到的脚本文件，没啥用

     • styles中放的是一些样式文件

     • utils中放的是项目中用到的一些工具类，如权限、请求等

     • views目录中放的是项目中具体的页面，这里面用的页面都是vue的后缀名

   • static没啥用，主要都是一些不咋使用的静态资源

3. 解决登录问题

   • 登录默认地址是https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin/user/login

     • 由config/dev.ens.js的BASE_API+src/api/login.js中的login方法的url两个拼接而成，login方法的request来自src/utils/request文件，该文件又包含axios文件，在这个文件中对ajax请求进行了封装，axios文件中的service常量规定了baseURL为配置文件dev.env的BASE_API

       xxxxxxxxxx
       import axios from 'axios'
       import { Message, MessageBox } from 'element-ui'
       import store from '../store'
       import { getToken } from '@/utils/auth'
       
       // 创建axios实例
       const service = axios.create({
         baseURL: process.env.BASE_API, // api 的 base_url
         timeout: 5000 // 请求超时时间
       })
       
       // request拦截器
       service.interceptors.request.use(
         config => {
           if (store.getters.token) {
             config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
           }
           return config
         },
         error => {
           // Do something with request error
           console.log(error) // for debug
           Promise.reject(error)
         }
       )
       
       // response 拦截器
       service.interceptors.response.use(
         response => {
           /**
            * code为非20000是抛错 可结合自己业务进行修改
            */
           const res = response.data//得到服务器响应数据
           if (res.code !== 20000) {//如果值不是20000，就报错并输出失败信息
             Message({
               message: res.message,
               type: 'error',
               duration: 5 * 1000
             })
             // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
             if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
               MessageBox.confirm(
                 '你已被登出，可以取消继续留在该页面，或者重新登录',
                 '确定登出',
                 {
                   confirmButtonText: '重新登录',
                   cancelButtonText: '取消',
                   type: 'warning'
                 }
               ).then(() => {
                 store.dispatch('FedLogOut').then(() => {
                   location.reload() // 为了重新实例化vue-router对象 避免bug
                 })
               })
             }
             return Promise.reject('error')
           } else {
             return response.data//如果响应数据是20000，则直接将返回数据返回
           }
         },
         error => {
           console.log('err' + error) // for debug
           Message({
             message: error.message,
             type: 'error',
             duration: 5 * 1000
           })
           return Promise.reject(error)
         }
       )
       
       export default service
       

        

     • 将BASE_API路径设置为本机服务器所在的地址http://localhost:8001

     • 用户登录时调用啦login和info两个方法。login方法负责登录操作，info方法登录后获取用户信息

       • 其中login方法返回token值，info方法返回roles、name、avatar[头像]，在服务器中写出对应的接口，注意前端要求服务端返回的数据一般都有commit方法，第二个参数就是要返回的值【token实际是用户名】

   • 后端登录接口编写

     • 在前端对响应的状态码是否等于两万进行了判断，如果不等于20000就会抛错，所以后端的状态码不要随便瞎定义

     • login方法返回token，info方法返回roles、name、avatar

       xxxxxxxxxx
       /**
        * @author Earl
        * @version 1.0.0
        * @描述 用于用户登录的接口入口
        * @创建日期 2023/08/30
        * @since 1.0.0
        */
       @RestController
       @RequestMapping("/eduservice/user")
       public class UserLoginController {
           /**
            * @return {@link ResponseData }
            * @描述 用户登录操作服务器端方法
            * @author Earl
            * @version 1.0.0
            * @创建日期 2023/08/30
            * @since 1.0.0
            */
           @PostMapping("login")
           public ResponseData userLogin(){
               return ResponseData.responseCall().data("token","admin");//admin是用户名，后面涉及查表再改
           }
       
           /**
            * @return {@link ResponseData }
            * @描述 获取用户信息
            * @author Earl
            * @version 1.0.0
            * @创建日期 2023/08/30
            * @since 1.0.0
            */
           @GetMapping("info")
           public ResponseData getUserInfo(){
               HashMap<String, Object> userInfo = new HashMap<>();
               userInfo.put("roles","[admin]");//这是啥意思
               userInfo.put("name","admin");
               userInfo.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");//这个是拷贝的课程资料
               return ResponseData.responseCall().data(userInfo);
           }
       }
       

   • 根据后端接口信息更改前端请求信息

     • 在src/api/login.js中的request对象中修改请求路径和请求方式与登录接口对应

   • 解决跨域问题，由于前端页面的端口号和服务器的端口号不是同一个，所以请求存在跨域问题，提示Access-Control-Allow-Origin，

     • 通过在后端接口的controller上添加@CrossOrigin注解来允许跨域访问

     • 也可以使用nginx网关解决【后面说】

   • 此时登录即可进入

     • 每个相同的请求会发送两次，是浏览器的机制，第一次是测试请求是否能成功连通接口【预检】，请求方式是options，并不会返回数据；第二次是真正的访问服务器获取响应数据

实现讲师列表功能

二次开发，一般都是在现有项目基础上开发新的功能

• 第一步，添加路由，main.js中有个import router from './router',router会被加载到下方的vue对象中，对应src/router/下的index.js【注意模块化的对象可以引入文件夹】，路由就是在src/router/index.js中添加，路由在constantRouterMap中以数组的形式存在，以下是页面中Example菜单及其子菜单table和tree的示例，添加路由复制一份改就行

  xxxxxxxxxx
  {
      //这是一层目录
  path: '/example',
  component: Layout,//layout是一种布局，表示路由的采用的一种表现形式
  redirect: '/example/table',//访问/example会重定向到example中的path为table的路由
  name: 'Example',//菜单名
  meta: { title: 'Example', icon: 'example' },//上面名字改下标的title也要一起改，icon就是这个标题用的图标
  children: [//这里面表示二层目录
    {
      path: 'table',
      name: 'Table',//这个name属性是菜单名
      component: () => import('@/views/table/index'),//这个component属性就是点击路由跳转的页面，import是页面的位置，即路由对应页面的url，框架不认识./只认识@/，就是src；本行代码的意思是table路由对应的页面在src/views/table/index.vue
      meta: { title: 'Table', icon: 'table' }
    },
    {
      path: 'tree',
      name: 'Tree',
      component: () => import('@/views/tree/index'),
      meta: { title: 'Tree', icon: 'tree' }
    }
  ]
  },
  

• 模仿前端页面开发，增加修改路由，在views中创建对应的vue页面

• 开发vue页面，页面顶上的template标签是element-ui的部分，引入了api文件对应后端接口的方法，自己写也需要在api中创建文件定义方法建立与后端接口的联系并在vue页面中进行引入，在vue页面中的后半部分就是vue的结构，export default{这里面是原来要写在vue中的内容，有filters、data、created、methods}，在methods中定义方法，在created中调用，在data中做初始化，最后使用上述的element-ui对数据进行展示

• 讲师列表开发步骤

  • 第一步：创建讲师管理路由

    xxxxxxxxxx
    {
        path: '/teacher',
        component: Layout,
        redirect: '/teacher/list',
        name: '讲师管理',
        meta: { title: '讲师管理', icon: 'example' },
        children: [
          {
            path: 'list',
            name: '讲师列表',
            component: () => import('@/views/edu/teacher/list'),//.vue可以省略不写
            meta: { title: '讲师列表', icon: 'table' }
          },
          {
            path: 'save',
            name: '添加讲师',
            component: () => import('@/views/edu/teacher/save'),
            meta: { title: '添加讲师', icon: 'tree' }
          }
        ]
      },
    

  • 第二步：创建对应的vue页面list.vue和save.vue，页面的<template><div class="app-container">部分进行了封装，头两个标签必须为这个

  • 第三步：在api文件创建teacher.js定义出对应接口路径的方法，在request.js中对axios进行了封装，超过5000ms没有详情就报错，方法的写法直接照抄已经有的文件

    xxxxxxxxxx
    import request from '@/utils/request'
    
    export default {
        //讲师列表，讲师条件分页查询，current为当前页，limit为每页记录数，teacherQuery为条件对象
        findAllTeacherPaging(current,limit,teacherQuery){
            return request({
                //url的两种写法，推荐第二种
                //url: '/eduservice/teacher/pageTeacher/'+current+'/'+limit,
                url: `/eduservice/teacher/pageFactorTeacher/${current}/${limit}`,//带条件查询和不带条件查询一定要区分清楚，两者请求方式都不同，即使加了跨域请求注解还是会报错没有跨域请求权限
                method: 'post',
                //teacherQuery是查询条件对象，后端使用@RequestBody注解获取数据需要前端传入json数据，data属性对应对象会自动将对象转成json格式传入接口
                data: teacherQuery
            })
        }
    }
    

  • 第四步：在views目录下编写讲师列表页面

    前端的东西要想读懂要专门去学vue和element-ui

    xxxxxxxxxx
    <template>
        <div class="app-container">
                讲师列表
            <!-- 表格 -->
            <!--:data得到对应变量名的数据，
                v-loading="listLoading"和element-loading-text="数据加载中"在数据加载时会显示加载中信息
                border、fit、highlight-current-row都是样式
            -->
            <el-table
                :data="list"
                border
                fit
                highlight-current-row>
            
            <el-table-column
                label="序号"
                width="70"
                align="center">
                <template slot-scope="scope">
                    {{ (page - 1) * limit + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="80" />
            <el-table-column label="头衔" width="80">
                <!--scope表示整个表格，scope.row表示表格的某一行，level为1则表示是高级讲师，否则为首席讲师；===表示不仅要值等，数据类型也要相等-->
                <template slot-scope="scope">
                    {{ scope.row.level===1?'高级讲师':'首席讲师' }}
                </template>
            </el-table-column>
            <el-table-column prop="intro" label="资历" />
            <el-table-column prop="gmtCreate" label="添加时间" width="160"/>
            <el-table-column prop="sort" label="排序" width="60" />
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <router-link :to="'/edu/teacher/edit/'+scope.row.id">
                        <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                    </router-link>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
        </div>
    </template>
    <script>
        import teacher from '@/api/edu/teacher.js'
        export default{
            //这里面写vue的核心代码
            //data有两种写法
            //data的第一种写法
            /*data:{
    
            },*/
            //data的第二种写法
            data(){//data中定义变量和初始值，方法会使用到的数据
                return {
                    //listLoading:true,//是否显示loading信息
                    list:null,//list接收查询完接口后返回的集合
                    total:0,//总记录数，默认为0条记录
                    page:1,//page保存当前页信息，默认就是第一页
                    limit:10,//limit保存每页记录数，默认每页十条记录
                    teacherQuery:{}//用来封装查询条件对象
                }
            },
            created(){//created方法在页面渲染前执行，一般用methods定义的方法
                this.getTeacherList()//对methods中的方法进行调用，注意这里面无法直接调用teacher.findAllTeacherPaging方法
            },
            methods:{//methods中创建定义具体的方法，在这里面会调用teacher.js中定义的方法
                //定义请求讲师列表的方法
                getTeacherList(){
                    //按照axios的要求是axios.post("").then().catch()//由于request已经将这个过程进行了封装，
                    //teacher.js已经进行了处理，这里只需要调用teacher.js中的对应方法即可,注意request方法仅相当于axios.post(""),
                    //后面的.then().catch()还是需要自己在这个方法中进行处理
                    teacher.findAllTeacherPaging(this.page,this.limit,this.teacherQuery)
                        .then(response=>{
                            //response是接口返回的数据
                            //console.log(response)
                            this.list=response.data.rows
                            this.total=response.data.total
                            console.log(this.list)
                            console.log(this.total)
                        })//请求成功处理方法
                        .catch(error=>{
                            console.log(error)
                        })//请求失败处理方法
                }
            }
        }
    </script>
    

  • 给讲师列表加上分页条

    直接从element-ui上找一个好看的分页条加上，实际上还需要改，没学直接抄课件的

    xxxxxxxxxx
    <!-- 分页 ,这些冒号都是v-bind,style是分页条的样式、layout是显示数据的布局，这里面封装了上一页下一页的判断，还有值的传递，
        不需要再自己写逻辑进行判断了
        这里的@表示v-on的简写，current-change这个事件绑定的是分页的切换，对应的方法是自己通过接口查询数据的方法即getTeacherList，
        调用的时候会自动传参当前页，已经由element-ui封装好了，但是并不会修改data中page的数据，需要手动进行更改
    -->
    <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="getTeacherList"
    />
    

    • 由于element-ui封装了调用getTeacherList方法自动传参当前页，但是data中的page没有更新，所以还需要再getTeacherList方法中添加page更新的代码，那个形参page=1没看懂，学vue的时候注意一下

  • 给讲师列表添加条件查询功能

    • element-ui封装的，后面自己学了改进一下时间条件的选择效果

      xxxxxxxxxx
      <!--:inline表示所有的内容在一行内展示-->
      <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
              <!--input输入框,v-model需要绑定teacherQuery的值-->
              <el-input v-model="teacherQuery.name" placeholder="讲师名"/>
          </el-form-item>
          <el-form-item>
              <!--select-option下拉列表-->
              <el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔">
                  <el-option :value="1" label="高级讲师"/>
                  <el-option :value="2" label="首席讲师"/>
              </el-select>
          </el-form-item>
          <el-form-item label="添加时间">
              <el-date-picker
              v-model="teacherQuery.beginTime"
              type="datetime"
              placeholder="选择开始时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="00:00:00"
              />
          </el-form-item>
          <el-form-item>
              <!--这个是时间选择框-->
              <el-date-picker
              v-model="teacherQuery.endTime"
              type="datetime"
              placeholder="选择截止时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="00:00:00"
              />
          </el-form-item>
          <!--button按钮，@click="fetchData()"是点击执行查询方法，修妖修改成查询方法-->
          <el-button type="primary" icon="el-icon-search" @click="getTeacherList()">查询</el-button>
          <el-button type="default" @click="resetData()">清空</el-button>
      </el-form>
      

    • 实现清空按钮的功能

      • 请求所有条件，调用一次查询所有的方法

      xxxxxxxxxx
      resetData(){//清空条件查询框并查询所有一次
          this.teacherQuery={}
          this.getTeacherList()
      }
      

    • 实现讲师删除功能

      • 删除按钮绑定的是removeDataById(scope.row.id)方法，id也是传过来封装在对象中的，只是没有展示，但是仍然能使用scope.row.id获取

      • 对应接口的逻辑删除Api方法

      • 在页面中调用逻辑删除api方法实现删除，注意还要有友好性提示，确认删除弹框和删除成功弹窗【这俩在element-ui中是一体的】，删除后还要在进行一次讲师查询

        xxxxxxxxxx
        removeDataById(id){//删除需要调用接口，teacher.js准备写方法去执行接口中的方法
            //alert(id)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })//点击确认会自动调用then中的方法
            .then(() => {
                teacher.deleteTeacherId(id)
                .then(response=>{
                    //提示信息
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                });
                    //回到列表页面
                    this.getTeacherList()
                })
            })//catch表示确认删除弹框点击取消后执行的方法，此处不需要显示任何信息，可以不写.catch方法
            /*.catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });*/
        }
        

        本身methods中的方法的.catch就可以不写，因为在request.js中已经对错误信息进行了默认封装，不写也行，建议不写，因为有些浏览器会执行两次catch【框架一次，自己写的一次】会发生错误

    • 实现添加讲师功能

      • 编写保存页面【element-ui,然后自己改，没学直接抄】

      • 创建对应接口的Api方法

        xxxxxxxxxx
        //添加讲师
        addTeacher(teacher){
            return request({
                url: `/eduservice/teacher/addTeacher`,
                method: 'post',
                data: teacher
            })
        }
        

      • 引入Api方法，编写保存数据的方法

        【该页面显示查询列表调用了路由跳转】

        xxxxxxxxxx
        <template>
            <div class="app-container">
                添加讲师
                <el-form label-width="120px">
                    <el-form-item label="讲师名称">
                        <el-input v-model="teacher.name"/>
                    </el-form-item>
                    <el-form-item label="讲师排序">
                        <el-input-number v-model="teacher.sort" controls-position="right" min="0"/>
                    </el-form-item>
                    <el-form-item label="讲师头衔">
                        <el-select v-model="teacher.level" clearable placeholder="请选择">
                        <!--
                        数据类型一定要和取出的json中的一致，否则没法回填
                        因此，这里value使用动态绑定的值，保证其数据类型是number
                        -->
                            <el-option :value="1" label="高级讲师"/>
                            <el-option :value="2" label="首席讲师"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="讲师资历">
                        <el-input v-model="teacher.career"/>
                    </el-form-item>
                    <el-form-item label="讲师简介">
                        <el-input v-model="teacher.intro" :rows="10" type="textarea"/>
                    </el-form-item>
                    <!-- 讲师头像： TODO -->
                    <el-form-item>
                        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
                    </el-form-item>
                </el-form>
        </div>
        </template>
            </div>
        </template>
        
        <script>
            import teacher from '@/api/edu/teacher'
            export default {
                data() {
                    return {
                        teacher: {//这个要和后端entity实体对应才能实现自动封装
                            name: '',
                            sort: 0,
                            level: 1,
                            career: '',
                            intro: '',
                            avatar: ''
                        },
                        saveBtnDisabled: false // 保存按钮是否禁用,
                    }
                },
                methods: {
                    saveOrUpdate() {
                        this.saveBtnDisabled = true// 一次保存后保存按钮禁用避免多次返回提交
                        this.saveTeacher()
                    },
                    // 保存
                    saveTeacher() {
                        teacher.addTeacher(this.teacher)
                        .then(response=>{
                            //提示添加成功信息
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                            //回到列表页面:该方法中不能直接调用另一个页面定义的getTeacherList方法,使用路由跳转的方法实现
                            this.$router.push({path:'/teacher/list'})
                        })
                    }
                }
            }
        </script>
        

    • 讲师条件分页查询带排序

      • 后端代码【在条件类中添加排序的条件,根据讲师添加时间降序】

        xxxxxxxxxx
        queryWrapper.orderByDesc("gmtCreate");
        

    • 讲师修改功能

      整体逻辑，根据隐藏路由id调用查询接口查询出讲师信息绑定到讲师对象在页面进行回显，修改结束后点击保存按钮由讲师对象是否含有讲师id调用保存或者修改接口修改讲师数据

      • 点击修改按钮进入添加页面进行数据回显，根据讲师id查询数据进行显示

      • 通过隐藏路由跳转到添加讲师页面，请求参数edit/:id相当于路由中的占位符，里面要传参

      • 修改讲师列表页面修改按钮的链接路径

        逻辑是超链接被路由分配静态页面，静态页面执行ajax请求在页面几个不同时机的方法中向接口要参数并对参数进行展示

      • 定义查询讲师的接口，在添加讲师页面定义出查询讲师并将查询结果赋值给显示对象teacher

      • 用路径是否有id参数判断是否需要执行查询方法，因为添加讲师不需要对讲师进行查询，vue中this.$route.params.id表示获取路由中的参数，this.$route.params是获取路由中的参数

      • 修改的实现，定义修改接口的ajax请求，定义修改讲师的方法，修改后和添加方法一致，显示提示信息并回到讲师列表页面，保存按钮既要能调用保存接口又要能调用修改接口，根据teacher中是否有id来进行判断，因为添加讲师由系统生成id，而修改讲师会由数据库传参id

      • 现存问题

        • 点击修改但没提交，再次点击添加讲师页面，还是显示修改讲师的信息，原因是讲师对象的信息没有清空,解决方法是做添加讲师页面数据渲染前，teacher数据先进行一次清空【vue的导航切换问题：多个路由渲染同一个组件，组件会重用，组件的生命周期钩子不会再被调用，使得组件的一些数据无法根据路径发生数据的更新，多次路由跳转同一个页面，页面的created方法只会在第一次路由跳转执行，后面不会执行，但是我这儿没有问题，出现这个问题再用vue监听器进行解决，监听器的作用是路由变化时去执行一段代码】

          监听器代码

          xxxxxxxxxx
          created(){
              this.init()
          },
          watch: {
              $route(to,from){//vue监听路由变化方式，路由发生变化，其中的方法就会执行
                  this.init()
              }
          },
          methods: {
              init(){
                  if(this.$route.params && this.$route.params.id){
                      const id=this.$route.params.id
                      this.getInfoById(id)
                  }else{
                      this.teacher={}
                  }
              },
          }
          

           

        • 点击保存按钮，保存按钮被禁用，但是服务器响应出了问题，页面会一直卡在保存页面且无法再次保存，填写的数据会直接消失，用户体验很不好，如何解决?

添加讲师头像上传功能

1. 使用阿里云oss存储服务

   • 网站阿里云，冲几毛钱，搜索阿里云oss，产品分类的云计算中也可以找到，点击管理控制台，创建并管理bucket，勾选低频访问和公共读，文件管理中能看到文件信息，能手动上传文件，也可以用java代码操作阿里云oss

   • Java代码操作阿里云oss

     • 创建阿里云oss许可证【阿里云颁发的id和密钥：bucket管理的access key】

     • 创建service_oss模块，引入阿里云oss依赖aliyun-sdk-oss和时间工具依赖joda-time

     • 对阿里云oss服务在application.properties中进行配置

     • 创建启动类并排除数据源自动加载配置功能

     • 创建常量类读取配置文件内容

     • 创建controller和service，controller去调用service中的文件上传方法，service中使用阿里云简单文件上传模板编写文件上传方法

       xxxxxxxxxx
       @Override
       public String uploadFileAvatar(MultipartFile file) {
           // 填写阿里云四大oss信息
           String endpoint = ConstantProperties.END_POINT;
           String bucketName = ConstantProperties.BUCKET_NAME;
           String accessKeyId = ConstantProperties.KEY_ID;
           String accessKeySecret=ConstantProperties.ACCESS_KEY_SECRET;
       
       
           // 创建OSSClient实例。
           OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId,accessKeySecret);
       
           try {
               //上传文件流
               InputStream inputStream = file.getInputStream();
               //获取上传文件名称
               String originalFilename = file.getOriginalFilename();
               //调用oss方法实现上传（需要拼参数bucket名称、上传到oss的文件路径和名称、上传文件输入流）
               ossClient.putObject(bucketName, originalFilename, inputStream);
               //上传后需要把上传到阿里云oss的路径手动拼接出来存放在数据库,访问地址的规则是"https://"+bucketName+"."+endpoint+"/"+originalFilename
               String avatarUrl="https://"+bucketName+"."+endpoint+"/"+originalFilename;
               return avatarUrl;
           } catch (OSSException oe) {
               System.out.println("Caught an OSSException, which means your request made it to OSS, "
                       + "but was rejected with an error response for some reason.");
               System.out.println("Error Message:" + oe.getErrorMessage());
               System.out.println("Error Code:" + oe.getErrorCode());
               System.out.println("Request ID:" + oe.getRequestId());
               System.out.println("Host ID:" + oe.getHostId());
               return null;
           } catch (ClientException ce) {
               System.out.println("Caught an ClientException, which means the client encountered "
                       + "a serious internal problem while trying to communicate with OSS, "
                       + "such as not being able to access the network.");
               System.out.println("Error Message:" + ce.getMessage());
               return null;
           } catch (IOException e) {
               e.printStackTrace();
               return null;
           } finally {
               // 关闭OSSClient
               if (ossClient != null) {
                   ossClient.shutdown();
               }
           }
       }
       

     • swagger测试

       • 两个问题：

         • 问题一，同名文件会造成阿里云oss同名文件内容覆盖，解决办法是获取文件原始名称，给每个文件拼接一个uuid避免同名

         • 问题二，对文件进行分类管理，根据年月日期分类或者根据用户名进行分类，办法是在文件名中用XX/XX/1.jpg表示文件目录【这里使用开始和oss一起引入的joda的DateTime的toString方法来将系统时间格式改成带斜杠的时间格式】

   • nginx反向代理服务器

     先用nginx做请求转发，后续用网关代替

     • nginx的功能

       • 请求转发：浏览器发送一个请求给nginx，nginx根据路径匹配把请求发送给另一个具体的服务器，nginx单独占用一个端口

       • 负载均衡：负载均衡将请求平均分摊到多个服务器中，负载均衡的策略有轮询【服务器按顺序一个一个依次对请求进行处理】、请求时间【】、权重、哈希等

       • 动静分离

     • 前端页面的端口号BASE_API为8001、实际图片上传是8002端口、访问的后台管理系统是8001端口，如何使用nginx实现图片上传访问8002端口

       • 让前端页面访问nginx，使用nginx分配访问的服务器

       • nginx启动，直接解压windows安装包，在解压目录中通过DOS命令窗口使用nginx.exe启动nginx，注意关闭CMD窗口nginx是不会停止运行的，改了配置nginx需要重启，此时不能通过关闭cmd窗口来关闭DOS窗口，nginx停止命令：nginx.exe -s stop；也可以通过nginx的nginx.exe -s reload直接进行重启

       • 在nginx解压包下的confg目录下的nginx.conf文件中对nginx进行配置

         • 配置nginx实现请求转发的功能

           • 配置文件中的worker相关是用作多路复用的

           • nginx的默认端口是80端口、最好改成81，避免不必要的端口冲突

           • 也可以设置nginx端口为9001，在nginx中配置当请求路径含eduoss就进入8002端口，地址中有eduservice就进入8001端口，添加配置的方法是在server中添加，listen表示nginx对外的监听端口设置为9001，server_name是主机名称，location是匹配路径，后面跟~ /请求路径，proxy_pass是匹配转发服务器的地址【这个81和9001有啥区别？】,改完以后重启nginx

             注意用作区分的eduservice和eduoss在两中请求路径中不能相互包含

             xxxxxxxxxx
             server {
                 listen       9001;
                 server_name  localhost;
             
                 location ~/eduservice/ {
                     proxy_pass http://localhost:8001;
                 }
             location ~/eduoss/ {
                     proxy_pass http://localhost:8002;
                 }
             }
             

           • 在前端dev.env.js中将前端请求端口改成本机的nginx监听端口9001，注意启动前端页面前一定要启动nginx

     • 在添加讲师页面提供讲师头像上传功能

       • 使用element-ui创建头像上传组件，为了效果更美观，自己找一个vue-element-admin-master框架中的功能，在体积更大的框架压缩包中找出ImageCropper组件和PanThumb组件并复制到当前的前端文件夹的component目录下

       • 添加讲师页面使用这两个组件，用import进行导入，并在export default中的components对两个组件进行声明

       • 使用element-ui导入头像上传组件【具体不懂，学element-ui再说，还对涉及变量进行了初始化，对close方法和cropSuccess方法进行了重写】

         xxxxxxxxxx
         saveBtnDisabled: false, // 保存按钮是否禁用,
         imagecropperShow: false, //上传弹框组件是否显示
         imagecropperKey:0,//上传组件的key值
         BASE_API: ProcessingInstruction.env.BASE_API
         

         xxxxxxxxxx
         <!-- 讲师头像 -->
         <el-form-item label="讲师头像">
             <!-- 头衔缩略图 -->
             <pan-thumb :image="teacher.avatar"/>
             <!-- 文件上传按钮 -->
             <el-button type="primary" icon="el-icon-upload"
                 @click="imagecropperShow=true">更换头像
             </el-button>
             <!--
             v-show：是否显示上传组件
             :key：类似于id，如果一个页面多个图片上传控件，可以做区分
             :url：后台上传的url地址
             @close：关闭上传组件
             @crop-upload-success：上传成功后的回调 -->
             <image-cropper
                 v-show="imagecropperShow"
                 :width="300"
                 :height="300"
                 :key="imagecropperKey"
                 :url="BASE_API+'/admin/oss/file/upload'"
                 field="file"
                 @close="close"
             @crop-upload-success="cropSuccess"/>
         </el-form-item>
         

         xxxxxxxxxx
         close(){//关闭头像上传弹框的方法,点击上传头像的叉号就会调用close方法,即关闭头像上传弹框
             this.imagecropperShow=false
         },
         cropSuccess(data){//头像上传成功的方法，头像点击保存成功就会调用cropSuccess方法，注意在点击上传时就已经调用了上传接口方法，返回的结果会自动封装到这个方法的参数中
             this.imagecropperShow=false//关闭弹窗
             this.teacher.avatar=data.url
         },
         

       • 修改上传接口的方法【把请求发送给对应的后端接口，后端接口把图片上传到阿里云oss，并把图片访问地址存入数据库】，注意前端框架会自动把文件名基础名改成file.png,以防止文件名出现中文的情况，不上传头像可以把头像设置成默认的头像，即图像的地址给前端的avatar属性，有修改再变更，注意这个默认avatar如何设置成可以在添加头像页面显示的头像

       • 头像上传的bug，第一次上传成功后再次点击头像上传，第一次头像上传成功后再次点击头像上传会显示上传成功无法再次上传，解决办法是把上传组件的imagecropperKey自动加1，原因不清楚，有机会学习该框架再说

         • 还有个问题，头像上传后即使不注册讲师，阿里云上仍然会保存数据，如何让保存教师记录的时候再对头像数据进行云存储

添加课程分类功能

1. 使用EasyExcel读取excel内容添加数据，把课程分类编辑在excel表格中，在表格中数据通过技术手段如EasyExcel读取到数据库表格中

2. EasyExcel是JAVA解析Excel表格的工具，由阿里巴巴提供；早期处理excel由apache的工具poi和jxl，都存在内存消耗严重的问题，EasyExcel的原理是从磁盘上一行行读取数据，逐行进行解析，而其他方式大多都是一次性读取数据加载到内存中，效率很低，以下对Easyexcel进行演示

   • eaxyExcel需要引入对应的依赖，同时由于EasyExcel对poi进行了封装，同时还需要引入poi的依赖，注意EasyExcel和poi的版本有对应，版本不正确可能会出现问题，2.1.1版本的EasyExcel对应poi的3.1.7的依赖

   • 写的操作比较简单，读的操作比较繁杂

     • 建立与表格对应的实体类，属性要对应表的不同列，加上@Data注解，注意对属性需要添加@ExcelProperty注解并设置属性与表头名称的对应关系

     • 创建对excel表格的写操作

       • 第一步确定并定义对应表格文件位置的字符串,注意这个文件会自动创建

       • 第二步调用easyexcel的write方法实现写操作，传参参数文件的路径名称，第二个是对应表格实体类的class文件

       • sheet中的参数是对应表格的sheet名

       • dowrite方法传入一个list集合，list集合中每个元素的对象是对应表格的实体类

     xxxxxxxxxx
     @Data
     @AllArgsConstructor
     public class DemoExcelData {
         //设置实体类与表格表头信息的对应关系，没有表创建表格时会自动写成表头
         @ExcelProperty("学生编号")
         private Integer studentNo;
         @ExcelProperty("学生姓名")
         private String studentName;
     }
     

     xxxxxxxxxx
     public class TestEasyExcelWrite {
         public static void main(String[] args) {
             //定义写入文件夹的地址，注意没有对应文件会自动创建
             String fileName="E:\\JavaStudy\\project\\ol_edu\\student.xlsx";
             //调用EasyExcel的write方法实现写操作,这种方式会自动关流
             EasyExcel.write(fileName,DemoExcelData.class).sheet("学生列表").doWrite(getData());
         }
     
         private static List<DemoExcelData> getData() {
             List<DemoExcelData> excelData = new ArrayList<>();
             for (int i = 0; i < 10; i++) {
                 excelData.add(new DemoExcelData(i, "lucy" + i));
             }
             return excelData;
         }
     }
     

   • 读操作需要用index对实体类的属性用@ExcelProperty属性指明对应的序号【可以直接加在读取数据类的同一个注解中，属性名是index】，创建实现AnalysisEventListener接口的监听器分别重写读取表头的invokeHeadMap方法，读取表格内容的invoke方法【读取数据会自动封装到data中】，读取完毕后的doAfterAllAnalysed方法【目前用不上】，然后对监听器进行调用

     【注意必须对实体类创建无参数构造方法，否则读取表格内容会报异常】

     xxxxxxxxxx
     @Data
     @AllArgsConstructor
     @NoArgsConstructor
     public class DemoExcelData {
         //设置实体类与表格表头信息的对应关系，没有表创建表格时会自动写成表头
         @ExcelProperty(value = "学生编号",index = 0)
         private Integer studentNo;
         @ExcelProperty(value = "学生姓名",index=1)
         private String studentName;
     }
     

     xxxxxxxxxx
     public class ExcelListener extends AnalysisEventListener<DemoExcelData> {
         @Override
         public void invoke(DemoExcelData demoExcelData, AnalysisContext analysisContext) {
             System.out.println("表格内容:"+demoExcelData);//表格每行被自动封装到对象demoExcelData中
         }
     
         @Override
         public void invokeHeadMap(Map<Integer, String> headMap, AnalysisContext context) {
             System.out.println("表头内容:"+headMap);//表头内容一行记录会以index,表头内容的形式封装到headMap中
         }
     
         @Override
         public void doAfterAllAnalysed(AnalysisContext analysisContext) {
         }
     }
     

     xxxxxxxxxx
     public static void main(String[] args) {
         //定义写入文件夹的地址，注意没有对应文件会自动创建
         //String fileName="E:\\JavaStudy\\project\\ol_edu\\student.xlsx";
         //调用EasyExcel的write方法实现写操作,这种方式会自动关流
         //EasyExcel.write(fileName,DemoExcelData.class).sheet("学生列表").doWrite(getData());
     
         //实现excel的读操作
         String fileName="E:\\JavaStudy\\project\\ol_edu\\student.xlsx";
         EasyExcel.read(fileName,DemoExcelData.class,new ExcelListener()).sheet().doRead();
     }
     

      

3. 使用Easyexcel实现从上传的excel表格中导入一级目录和二级目录，并判断数据库中是否存在对应的课程目录，由于这里的数据量比较小，且easyexcel每次只处理一条记录，优化可以考虑把查询课程添加到缓存中或者使用ThreadLocal实现数据库连接池【这个不太会，因为本身数据源是使用的mp】

   【创建edu_subject表，使用mp的代码生成器生成框架结构】

   【写controller中文件上传解析的方法】

   xxxxxxxxxx
   @RestController
   @RequestMapping("/eduservice/edu-subject")
   @CrossOrigin
   @Api(description = "读取上传文件")
   public class EduSubjectController {
   
       @Autowired
       private EduSubjectService eduSubjectService;//controller注入eduSubjectService，这个对象一直传入EduSubjectServiceImpl，疑问spring的IoC组件能否通过this直接传入
   
       //添加课程分类，获取上传过来的表格文件，把文件内容读取出来
       @PostMapping("addSubject")
       @ApiOperation("读取上传课程分类文件")
       public ResponseData addSubject(MultipartFile file){
           //调用eduSubjectServiceImpl中的saveSubject方法来读取表格内容并存入数据库
           eduSubjectService.saveSubject(file,eduSubjectService);
           return ResponseData.responseCall();
       }
   
   }
   

   【写eduSubjectServiceImpl中对应的解析方法】

   xxxxxxxxxx
   @Override
   public void saveSubject(MultipartFile file,EduSubjectService eduSubjectService) {
       try {
           InputStream inputStream = file.getInputStream();
           EasyExcel.read(inputStream, SubjectData.class,new SubjectExcelListener(eduSubjectService)).sheet().doRead();
       } catch (IOException e) {
           e.printStackTrace();
       }
   }
   

   【写对应表格的实体类】

   xxxxxxxxxx
   @Data
   public class SubjectData {
   
       @ExcelProperty(index=0)
       private String firstSubjectName;
   
       @ExcelProperty(index=1)
       private String secondSubjectName;
   }
   

   【写对应读取数据对数据判断是否重复以及存储到数据库的监听器】

   xxxxxxxxxx
   /**
    * @param subjectData
    * @param analysisContext
    * @描述 读取Excel中的内容，一行一行进行读取，注意如果一级目录存在相同内容需要判断不能重复存入数据库，如果读取的数据为null，
    * 表名数据库中已经没有数据了，这儿有问题，始终都会有读到最后没有数据的情况，或者中间某行数据没有记录的情况，这儿直接抛异常没问题吗？
    * 讲的不清楚，EasyExcel以后自己学了再说，包括返回对象为null的情况对应表格的何种情况
    * @author Earl
    * @version 1.0.0
    * @创建日期 2023/09/10
    * @since 1.0.0
    */
   @Override
   public void invoke(SubjectData subjectData, AnalysisContext analysisContext) {
       if (subjectData==null){
           //这里一定要搞清楚subjectData为null到底是某行数据为null还是表格压根就没有数据
           throw new CustomException(20001,"文件没有数据");
       }
       //一级数据重复的现象很普遍，需要判断一级数据不能重复添加
       EduSubject firstSubject = exitFirstSubject(subjectData.getFirstSubjectName());
       if (firstSubject==null){//如果一级分类不存在则存入数据库
           firstSubject = new EduSubject();
           firstSubject.setParentId("0");
           firstSubject.setTitle(subjectData.getFirstSubjectName());
           subjectService.save(firstSubject);
       }
       String pid = firstSubject.getId();//不管一级分类有没有id值都会保存一级分类的id值
       if (exitSecondSubject(subjectData.getSecondSubjectName(),pid)==null){
           EduSubject secondEduSubject = new EduSubject();
           secondEduSubject.setParentId(pid);
           secondEduSubject.setTitle(subjectData.getSecondSubjectName());
           subjectService.save(secondEduSubject);
       }
   
   }
   
   /**
    * @param
    * @param name
    * @return {@link EduSubject }
    * @描述 判断一级分类不能重复添加，这里每行都要调用很浪费资源，不如读一次以后直接把title字段加入缓存
    * @author Earl
    * @version 1.0.0
    * @创建日期 2023/09/10
    * @since 1.0.0
    */
   private EduSubject exitFirstSubject(String name){
       QueryWrapper<EduSubject> eduSubjectQueryWrapper = new QueryWrapper<>();
       eduSubjectQueryWrapper.eq("title",name).eq("parent_id","0");
       EduSubject subject = subjectService.getOne(eduSubjectQueryWrapper);
       return subject;
   }
   
   /**
    * @param name
    * @param pid
    * @return {@link EduSubject }
    * @描述  判断二级分类不能重复添加，这里每行都要调用很浪费资源，不如读一次以后直接把title字段加入缓存
    * @author Earl
    * @version 1.0.0
    * @创建日期 2023/09/10
    * @since 1.0.0
    */
   private EduSubject exitSecondSubject(String name,String pid){
       QueryWrapper<EduSubject> eduSubjectQueryWrapper = new QueryWrapper<>();
       eduSubjectQueryWrapper.eq("title",name).eq("parent_id",pid);
       EduSubject subject = subjectService.getOne(eduSubjectQueryWrapper);
       return subject;
   }