1天搞定SpringBoot+Vue全栈开发 (1)文件上传与拦截器

简介: 1天搞定SpringBoot+Vue全栈开发 (1)文件上传与拦截器

1.Springboot文件上传


1.1 controller文件夹里新建FileUploadController.java

package com.example.helloworld.controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
 
 
@RestController
public class FileUploadController {
    @PostMapping("/upload") //等价于RequestMapping(value="/upload",method=RequestMethod.POST)
    //昵称 头像
    public String up(String nickname, MultipartFile photo, HttpServletRequest request) throws IOException {
        //昵称
        System.out.println(nickname);
        //获取图片的原始名称
        System.out.println(photo.getOriginalFilename());
        //取文件类型
        System.out.println(photo.getContentType());
        //获取web服务器的运行目录,因为最终要把文件存储到web服务器上(运行在linux系统上)
        String path= request.getServletContext().getRealPath("/upload/");
        System.out.println(path);
        saveFile(photo,path);
        return "上传成功!";
    }
 
    public void saveFile(MultipartFile photo, String path) throws IOException {
        File dir= new File(path);
        if(!dir.exists()){
            dir.mkdir();
        }
        File file = new File(path+photo.getOriginalFilename());
        photo.transferTo(file);
 
    }
}
 


1.2测试上传文件

使用apipost

e5b09bd69ab4455d875252238870ac0c.jpg

可以看到上传成功了

并且在idea里也有相应的打印

b41bce4a45504d139cbafc544a2a9d15.jpg

下一行为图片存储的位置:

5383bfb1a60842e693f9ca597bf02176.jpg

b100e8435eff431a89d7f3cc53108482.jpg

注:如果出现“500”错误,是后端出了问题,这里可能是图片太大了,需要在配置文件里修改。

可以将application.properties文件里加入下述代码修改图片上传的最大大小。

spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB


如果想访问到upload下的文件,需要在application.properties文件里加入下述代码:

spring.web.resources.static-locations=/upload/


这样在localhost:8080/xx.jpg就可以访问到了


2.拦截器


2.1 使用场景:

登录/权限检查,性能监控,读取cookie得到用户信息等。

a669eb5a1be74901936a6676f59f2d9b.jpg

2.2 在com.example.helloworld新建interceptor文件夹,并创建LoginInterceptor.java

package com.example.helloworld.interceptor;
 
import org.springframework.web.method.HandlerMethod;
import org.springframework.web.servlet.HandlerInterceptor;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
public class LoginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        if(!(handler instanceof HandlerMethod)){
            return true;
        }
        System.out.println("LoginInterceptor");
        return true;
    }
}
 


如果点进HandlerInterceptor 会发现这里实现了拦截器的三个默认方法

57ee9e41563e4ca6980a54df4946dfd8.jpg

可以重写这三个方法 。例如上面的代码就是重写了preHandle方法。


2.3 在com.example.helloworld新建config文件夹,并创建WebConfig.java

package com.example.helloworld.config;
 
import com.example.helloworld.interceptor.LoginInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new LoginInterceptor()).addPathPatterns("/user/**");
    }
}
 


2.4 测试

可以访问localhost:8080/hello(hello文件在视频里有做)查看拦截的效果。(这里只拦截user目录下的)

f53b75694abf4e999946b94d7e8b1586.jpg

如果去掉addPathPatterns,则会拦截所有

c437381a1e5d43cf9d08160433b0a13a.jpg

相关文章
|
7天前
|
XML Java 数据格式
SpringBoot入门(8) - 开发中还有哪些常用注解
SpringBoot入门(8) - 开发中还有哪些常用注解
25 0
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
143 1
|
17天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
95 62
|
15天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
34 2
|
18天前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
14天前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
29 0
|
18天前
|
JavaScript 前端开发 Java
SpringBoot_web开发-webjars&静态资源映射规则
https://www.91chuli.com/ 举例:jquery前端框架
15 0
|
2月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的服装商城管理系统
基于Java+Springboot+Vue开发的服装商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的服装商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
147 2
基于Java+Springboot+Vue开发的服装商城管理系统
|
2月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
229 1
|
2月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的大学竞赛报名管理系统
基于Java+Springboot+Vue开发的大学竞赛报名管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的大学竞赛报名管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
218 3
基于Java+Springboot+Vue开发的大学竞赛报名管理系统