[源码-webpack01-前置知识] AST抽象语法树
[源码-webpack02-前置知识] Tapable
[源码-webpack03] 手写webpack - compiler简单编译流程
[源码] Redux React-Redux01
[源码] axios
[源码] vuex
[源码-vue01] data响应式和初始化渲染
[源码-vue02] computed 响应式 - 初始化，访问，更新过程
[源码-vue03] watch 侦听属性 - 初始化和更新
[源码-vue04] Vue.set 和 vm.$set
[源码-vue05] Vue.extend

[源码-vue06] Vue.nextTick 和 vm.$nextTick
[部署01] Nginx
[部署02] Docker 部署vue项目
[部署03] gitlab-CI

[数据结构和算法01] 二分查找和排序

[深入01] 执行上下文
[深入02] 原型链
[深入03] 继承
[深入04] 事件循环
[深入05] 柯里化偏函数函数记忆
[深入06] 隐式转换和运算符
[深入07] 浏览器缓存机制（http缓存机制）
[深入08] 前端安全
[深入09] 深浅拷贝
[深入10] Debounce Throttle
[深入11] 前端路由
[深入12] 前端模块化
[深入13] 观察者模式发布订阅模式双向数据绑定
[深入14] canvas
[深入15] webSocket
[深入16] webpack
[深入17] http 和 https
[深入18] CSS-interview
[深入19] 手写Promise
[深入20] 手写函数
[深入21] 数据结构和算法 - 二分查找和排序
[深入22] js和v8垃圾回收机制
[深入23] JS设计模式 - 代理，策略，单例

[前端学java01-SpringBoot实战] 环境配置和HelloWorld服务
[前端学java02-SpringBoot实战] mybatis + mysql 实现歌曲增删改查
[前端学java03-SpringBoot实战] lombok，日志，部署
[前端学java04-SpringBoot实战] 静态资源 + 拦截器 + 前后端文件上传

(一) 前置知识

(1) 一些单词

transactional 事务
pattern 模式
completion 完成 结束 n
implement 实现 ( class 类名 implements 接口名 )
abstract 抽象的 adj
override 覆盖 重写
leaf 叶子
servlet 小程序服务 小应用程序
consume 消耗
configuration 配置

(2) interface 接口

interface
- 描述类有什么功能，但不具体实现，实现是在类中去实现
- 在interface中方法因为没有方法体，所以是要加 abstract 来修饰
- abstract 是抽象的意思adj
- 注意：
  - 接口不能被实例化，所以没有构造方法
  - 可以通过多态的方式实例化子类(实现类)
  - 接口中只有成员常量，没有成员变量
  - 接口于接口的关系是 extends 比如 => 接口1 extends 接口2
  - 共性继承类，扩展实现类
implements
- ( 类和接口 ) 是 ( 实现关系 )，用 implements 表示，implement 就是实现的意思
- 单实现
  - class 实现类类名 implements 接口名
- 多实现
  - class 实现类类名 implements 接口1,接口2,接口3
实现类
- 在接口中也经定义了类的方法，但没有实现
- 实现类，就是去实现接口中的方法的类
- 通过 class 实现类类名 implements 接口名 的方式来写实现类
关系
- ( 接口与接口 ) 是 ( 继承 ) 关系
- ( 类与接口 ) 是 ( 实现 ) 关系
  
  image
  
  image
  
  image
  
  image
  
  image
  
  image
  
  image
  
  image

(3) springboot 的静态资源访问

静态资源相关-官方文档
静态资源目录
- 在 resources 文件夹下的 4 个文件夹
  - static
  - public
  - resources
  - META-INF/resources
访问 ( 当前项目根路径 ) 访问静态资源
- 根路径 + 静态资源名
原理
- 静态映射：/**
- 请求进来，先找 ( controller ) 处理，不能处理的所有请求再又交给 ( 静态资源处理器 ) 来处理，再找不到就会404
- 问题：如果controller中有个api接口是 /a.jpg，而我们的 resources/static/a.jpg 也有同名的静态资源，会发生什么？
- 答案：会返回controller的api方法的返回值，而不会访问静态资源
静态资源访问前缀
- 静态资源设置前缀：spring.mvc.static-path-pattern=/resources/**
- 访问静态资源：当前项目 + 前缀 + 静态资源
- 例子：http://localhost:7777/resources/66.jpg
指定自定义的静态资源目录 ( 默认静态文件夹路径 )
- spring.web.resources.static-locations=[classpath:/7resources/]
  
  image

(4) @Configuration @Bean

@Configuration 标注的类是 ( 配置类 )
@Bean 是向容器中注册组件，并且是单列的

src/main/java/com.example.demo/config/MyConfig.java
-------

/**
 * 1. @Configuration 标注的类就是 配置类
 * 2。配置类里，使用 @Bean 标注在方法上给容器注册组件，注册的组件默认也是单实例的
 * 3. 注意：@Configuration标注的类，该类本身也是一个组件，即 MyConfig 也是一个组件，即 ( 配置类本身也是一个组件 )
 *
 * 4. proxyBeanMethods 代理bean的方法
 *    Full(proxyBeanMethods = true) 单例，可以用于 ( 组件依赖 )
 *    Lite(proxyBeanMethods = false) 
 */
// 告诉 SpringBoot 这是一个 ( 配置类 )，等用于以前的配置文件
// @Configuration 配置类
@Configuration(proxyBeanMethods = true)
public class MyConfig {

    // @Bean
    // @Bean 给容器中添加组件
    // 1. 以方法名作为组件的id => user1
    // 2. 返回类型就是组件类型 => UserBean
    // 3. 返回的值就是组件在容器中的实例 => new UserBean()
    // @Bean("userX") 的参数可以自定义id
    @Bean("userX")
    public UserBean user1() {
        return new UserBean("woow_wu7", 20);
    }
}

(5) @ConfigurationProperties @Component

要让配置文件和bean对象进行绑定
第一种方法
- @ConfigurationProperties + @Component
- @ConfigurationProperties 可以把 application.properties 或 application.yml 文件中的配置的参数，注入到组件中

(1) src/main/java/bean/AppMessageBean.java
-------
// 只有在容器中的组件才能获取 SpringBoot 的强大功能
// 该 bean 对象主要是测试 @ConfigurationProperties 和 @Component 两个注解
@Data
@Component
@ConfigurationProperties(prefix = "myapp") // prefix="myapp" 这个前缀的值是在 application.yml 文件中配置的
public class AppMessageBean {
    private String name;
    private String email;
    private String author;
}



(2) src/main/java/com.example.demo/controller/testController.java
-------
@RestController
@Slf4j
public class TestController {
    @Autowired
    AppMessageBean appMessageBean;
    // (1)
    // 测试： @ConfigurationProperties 和 @Component 两个注解
    // 教程： https://www.cnblogs.com/jimoer/p/11374229.html
    @GetMapping("/@ConfigurationProperties")
    public AppMessageBean getAuthorName() {
        System.out.println(appMessageBean);
        String author = appMessageBean.getAuthor();
        System.out.println(author);
        return  appMessageBean;
    }
}

第二种方法
- 需要在配置类中
- @EnableConfigurationProperties(Car.class)
  - 开启 Car 属性绑定功能
  - 把 Car 自动注册到容器中

(6) @ConfigurationProperties 和 @Value的区别

@Value
- 主要用于单个属性
- 并且配合要求较高，使用羊肉串模式，比如 my-app-name 这样
  
  image

(1)src/main/java/com.example.demo/bean/ValueTestBean.java
-------
@Data
@AllArgsConstructor
@NoArgsConstructor
@Component // @Value 同样需要使用 @Component 将组件注册到容器中，对比 @ConfigurationProperties
public class ValueTestBean {
    private String name;

    private String email;

    @Value("${myapp.author}") // 用于单个属性
    private String author;
}



(2) 在controller中测试
-------
    @GetMapping("/@Value")
    public ValueTestBean getValueAuthorName() {
        System.out.println(valueTestBean);
        String author = valueTestBean.getAuthor();
        System.out.println(author);
        return valueTestBean;
    }

image

(二) 配置 mybatis 的 xml 形式

mybatis官网

(1) 引入 mybatis-spring-boot-starter 的maven依赖 ( 也叫场景启动器 )




  mysql
  mysql-connector-java
  8.0.21
  runtime




  org.springframework.boot
  spring-boot-starter-jdbc




  org.mybatis.spring.boot
  mybatis-spring-boot-starter
  2.1.3

(2) 在 ( application.yml ) 文件中设置 mybatis ( 全局配置文件 ) 和 ( sql映射文件 )

application.properties 和 application.yml 都可以
- 优先级 application.properties > application.yml
- 推荐使用 application.yml
第一步：在resources文件夹中新建mybatis文件夹
- 新建全局配置文件：mybatis/mybatis-config.xml
- 新建mapper的sql映射文件：mybatis/mapper/MybatisTestMapper.xml
第二步：在 application.yml 文件中配置 mybatis 的 全局配置文件 和 sql映射文件


- 第一步：在resources文件夹中新建mybatis文件夹
  - 新建全局配置文件：`mybatis/mybatis-config.xml`
  - 新建mapper的sql映射文件：`mybatis/mapper/MybatisTestMapper.java`
(1) resources/mybatis/mybatis-config.yml
-------






(2) resources/mybatis/mapper/MybatisTestMapper.xml
-------



    
    
    
    



- 第二步：在 application.yml 文件中配置 mybatis 的 `全局配置文件` 和 `sql映射文件`
(3) application.yml
-------
# 配置 mybatis 规则
mybatis:
  config-location: classpath:mybatis/mybatis-config.xml # mybatis全局配置文件
  mapper-locations: classpath:mybatis/mapper/*.xml # mybatis的sql映射文件

(3) 正常写 controller => service => mapper

MybatisTestController
-------
@RestController
public class MybatisTestController {

    @Autowired
    MybatisTestService mybatisTestService;

    @GetMapping("/mybatis")
    public MybatisTestBean getMybatisTestMessage(@RequestParam(name="id") int id) {
        return mybatisTestService.getMybatisTest(id);
    }
}

MybatisTestService
-------
@Service
public class MybatisTestService {

    @Autowired
    MybatisTestMapper mybatisTestMapper;

    public MybatisTestBean getMybatisTest(int id) {
        System.out.println(id);
        return mybatisTestMapper.getMybatisTest(id);
    }
}

MybatisTestMapper.java
-------

@Mapper
public interface MybatisTestMapper {
    public MybatisTestBean getMybatisTest(int id);
}

[图片上传失败...(image-64066d-1633576164164)]

(三) 拦截器

(1) HandlerInterceptor 拦截器的三个方法

preHandle 在目标方法执行前执行，即 controller 方法执行前执行
postHandle 在目标方法执行完成后执行
afterCompletion 在页面渲染后执行

(2) 具体的实现过程

(2.1) 编写一个拦截器，实现 HandlerInterceptor 接口

注意是 implements HandlerInterceptor

src/main/java/com.exmaple.demo/interceptor/LoginInterceptor.java
-------

/**
 * 拦截器
 * 1. 编写一个拦截器，实现 HandlerInterceptor 接口
 * 2. 把拦截器注册到容器中 ( 实现 WebMvcConfigurer 的  addInterceptors 方法)
 * 3. 指定拦截规则 【如果拦截所有，静态资源也会被拦截，可以用 excludePathPatterns 方法放行】
 */
/**
 * 登陆检查
 * @Slf4j
 * 1. @Slf4j 是 lombok提供的功能
 * 2. @Slf4j 注入后就可以使用 log.info()
 */
@Slf4j
public class LoginInterceptor implements HandlerInterceptor {
    // 目标方法执行之前执行
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        log.info("preHandle拦截器 - 拦截的路径是{}", request.getRequestURI());
        return true; // true 表示放行，false表示拦截
    }

    // 目标方法执行完成之后执行
    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        log.info("postHandle拦截器 - ModelAndView", modelAndView);
    }

    // 页面渲染以后执行
    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        log.info("afterCompletion拦截器", ex);
    }
}

(2.2) 把拦截器注册到容器中，( 实现 WebMvcConfigurer 的 addInterceptors 方法)

(2.3) 指定拦截规则【如果拦截所有，静态资源也会被拦截，可以用 excludePathPatterns 方法放行】

src/main/java/com.example.demo/config/AdminWebConfig.java
-------

/**
 * 拦截器
 * 1. 编写一个拦截器，实现 HandlerInterceptor 接口
 * 2. 把拦截器注册到容器中 ( 实现 WebMvcConfigurer 的  addInterceptors 方法)
 * 3. 指定拦截规则 【如果拦截所有，静态资源也会被拦截，可以用 excludePathPatterns 方法放行】
 */
@Configuration
public class AdminWebConfig implements WebMvcConfigurer {

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new LoginInterceptor())
                .addPathPatterns("/**") // 拦截 => 拦截所有请求，包括静态资源
                .excludePathPatterns("/", "/login", "css/**", "/fonts/**", "/images/**", "/js/**"); // 放行，放行了static文件夹下的所有静态资源
                // 问题：如何能访问到 resources/static/images/8.jpg
                // 回答：http://localhost:7777/images/8.jpg
    }
}

image

(四) 文件上传

(1) @RequestPart("input框的name属性对应的值")

@RequestPart这个注解用在 multipart/form-data 表单提交请求的方法上

(2) 实现步骤

(2.1) springboot中如果需要返回html页面，需要 `spring-boot-starter-thymeleaf` 场景启动器




    org.springframework.boot
    spring-boot-starter-thymeleaf

(2.2) resources/templates/fileUpload.xml

(2.3) src/main/java/com.example.demo/controller/FileUpload.java

@Controller
@Slf4j
public class FileUpload {

    @GetMapping("/fileUpload")
    public String handleFile(
    ) {
        // 1. 这里返回的是 resources/templates/fileUpload.html
        // 2. 需要安装 spring-boot-starter-thymeleaf 这个maven依赖
        return "fileUpload";
    }

    // MultipartFile 会自动封装上传上来的文件
    @PostMapping("/upload")
    public String upload(
            @RequestPart("single") MultipartFile single,
            @RequestPart("multiple") MultipartFile[] multiple
    ) throws IOException {
        log.info("上传的单文件{}", single);
        log.info("上传的多文件{}", multiple);
        if (!single.isEmpty()) {
            String originalFilename = single.getOriginalFilename(); // 获取原始文件名
            single.transferTo(new File("F:\\Java-workspace\\uploadFolder\\" + originalFilename)); 
            // 保存到 ( F/java-workspace/uploadFolder ) 文件夹
        }
        if (multiple.length > 0) {
            for (MultipartFile file : multiple) { // for循环
                if (!file.isEmpty()) {
                    String originalFilename = file.getOriginalFilename(); // 原始文件名
                    long size = file.getSize()/1024; // 文件大小，默认但是为字节，1MB = 1024KB = 1024 * 1024 byte
                    log.info("文件名{}. 大小{}KB", originalFilename, size);
                    file.transferTo(new File("F:\\Java-workspace\\uploadFolder\\" + originalFilename));
                }
            }
        }
        return "fileUpload"; // 返回 fileUpload.html
    }
    
    
    // (3)
    // 前后端分离的接口
    // 注意点
    // 1. consumes 一定要设置成 "multipart/form-data" 因为前端 antd 中的 Upload 组件是用的 form-data 方式在上传
    // 2. 前端上传时 Upload 组件一定要设置 name 属性，因为 name 的值是和这里的 @RequestPart("前端name属性的值") 一一对应
    @PostMapping(value = "/frontendUpload", consumes = "multipart/form-data")
    public String frontendUpload(
            // @RequestParam("file") MultipartFile avatars
            @RequestPart("file") MultipartFile avatars
    ) {
        System.out.println(avatars);
        return "上传成功";
    }
}

(2.4) 前后端分离 react页面的上传代码如下

image

项目源码

项目源码
线上访问地址-歌曲增删改查

[前端学java04-SpringBoot实战] 静态资源 + 拦截器 + 前后端文件上传

导航

(一) 前置知识

(1) 一些单词

(2) interface 接口

(3) springboot 的静态资源访问

(4) @Configuration @Bean

(5) @ConfigurationProperties @Component

(6) @ConfigurationProperties 和 @Value的区别

(二) 配置 mybatis 的 xml 形式

(1) 引入 mybatis-spring-boot-starter 的maven依赖 ( 也叫场景启动器 )

(2) 在 ( application.yml ) 文件中设置 mybatis ( 全局配置文件 ) 和 ( sql映射文件 )

(3) 正常写 controller => service => mapper

(三) 拦截器

(1) HandlerInterceptor 拦截器的三个方法

(2) 具体的实现过程

(2.1) 编写一个拦截器，实现 HandlerInterceptor 接口

(2.2) 把拦截器注册到容器中，( 实现 WebMvcConfigurer 的 addInterceptors 方法)

(2.3) 指定拦截规则【如果拦截所有，静态资源也会被拦截，可以用 excludePathPatterns 方法放行】

(四) 文件上传

(1) @RequestPart("input框的name属性对应的值")

(2) 实现步骤

(2.1) springboot中如果需要返回html页面，需要 `spring-boot-starter-thymeleaf` 场景启动器

(2.2) resources/templates/fileUpload.xml

(2.3) src/main/java/com.example.demo/controller/FileUpload.java

(2.4) 前后端分离 react页面的上传代码如下

项目源码

你可能感兴趣的:([前端学java04-SpringBoot实战] 静态资源 + 拦截器 + 前后端文件上传)

[前端学java04-SpringBoot实战] 静态资源 + 拦截器 + 前后端文件上传

导航

(一) 前置知识

(1) 一些单词

(2) interface 接口

(3) springboot 的静态资源访问

(4) @Configuration @Bean

(5) @ConfigurationProperties @Component

(6) @ConfigurationProperties 和 @Value的区别

(二) 配置 mybatis 的 xml 形式

(1) 引入 mybatis-spring-boot-starter 的maven依赖 ( 也叫场景启动器 )

(2) 在 ( application.yml ) 文件中设置 mybatis ( 全局配置文件 ) 和 ( sql映射文件 )

(3) 正常写 controller => service => mapper

(三) 拦截器

(1) HandlerInterceptor 拦截器的三个方法

(2) 具体的实现过程

(2.1) 编写一个拦截器， 实现 HandlerInterceptor 接口

(2.2) 把拦截器注册到容器中，( 实现 WebMvcConfigurer 的 addInterceptors 方法)

(2.3) 指定拦截规则 【如果拦截所有，静态资源也会被拦截，可以用 excludePathPatterns 方法放行】

(四) 文件上传

(1) @RequestPart("input框的name属性对应的值")

(2) 实现步骤

(2.1) springboot中如果需要返回html页面，需要 spring-boot-starter-thymeleaf 场景启动器

(2.2) resources/templates/fileUpload.xml

(2.3) src/main/java/com.example.demo/controller/FileUpload.java

(2.4) 前后端分离 react页面的上传代码如下

项目源码

你可能感兴趣的:([前端学java04-SpringBoot实战] 静态资源 + 拦截器 + 前后端文件上传)

(2.1) 编写一个拦截器，实现 HandlerInterceptor 接口

(2.3) 指定拦截规则【如果拦截所有，静态资源也会被拦截，可以用 excludePathPatterns 方法放行】

(2.1) springboot中如果需要返回html页面，需要 `spring-boot-starter-thymeleaf` 场景启动器