Spring Boot + Vue项目开发学习笔记1

这个笔记是在看B站视频的时候做的,所以肯定是很多直接把课程的ppt的文字直接写下来了或者把老师口述的内容写下来,目的是为了让自己遗忘某些知识点的时候能直接看笔记,应该不至于构成侵权吧,如有不妥望告知,我会删除并道歉的。

而且视频发布时间是2022年8月,可能不会很新,但是我觉得讲的很好用来初学是很不错的。非常感谢刘老师分享的视频。

学习视频链接如下:1.课程介绍及环境准备_哔哩哔哩_bilibiliicon-default.png?t=O83Ahttps://www.bilibili.com/video/BV1nV4y1s7ZN?p=1&vd_source=d6fc444a0835fb167ab777abdb6df08f

目录

1、web开发基础

1.1 web入门

 1.2 控制器

1.2.1 @Controller的用法

1.2.2 @RestController的用法

1.3 路由映射

1.4 参数传递

扫描二维码关注公众号,回复: 17428061 查看本文章

参数传递与apipost的使用

2、web开发进阶

2.1 静态资源访问

2.2 文件上传原理

2.3 Spring Boot实现文件上传功能

 2.4 拦截器

2.4.1 拦截器介绍 

 2.4.2 拦截器定义

2.4.3 拦截器注册

1、web开发基础

1.1 web入门

SpringBoot将传统Web开发的mvc、json、tomcat等框架整合,提供了spring-boot-starter-web组件,简化了Web应用配置

创建SpringBoot项目勾选Spring Web选项后,会自动将spring-boot-starter-web组件加入到项目中

spring-boot-starter-web启动器主要包括web、webmvc、json、tomcat等基础依赖组件,作用是提供web开发场景所需的所有底层依赖

webmvc为web开发的基础框架,json为JSON数据解析组件,tomcat为自带的容器依赖

 1.2 控制器

web后端开发里面,有一种模式叫MVC设置模式。MVC里面M是model,用来存储(封装)数据;C是Controller,控制器,做协调和控制;V是视图,是显示数据的

在这个模式下面,数据库加载过来的数据先封装到model上,然后通过控制器绑定到视图上。最终,这个数据通过controller交给了view,view将数据显示到浏览器上

控制器controller,一个作用是把数据交给浏览器,另一个作用时接受用户的请求。用户发送请求请求的其实是controller,controller去取数据,最终再把数据给视图,再响应给用户

controller的作用非常重要,springboot提供了俩种 @RestController @Controller 两种注解来标识此类负责接受和处理HTTP请求

如果请求的是页面和数据,使用@Controller注解即可;如果只是请求数据,则可以使用@RestController注解

一般我们写的是前后段分离开发,一般使用的是@RestController

1.2.1 @Controller的用法

示例中返回了hello页面和name数据,在前端页面中可以通过${name}参数获取后台返回的数据并显示,@Controller通常与Thymeleaf模板引擎结合使用,这样的话就是前后端不分离了。

此时控制器返回的数据必须是一个视图,返回一个html页面,上面return “hello” 就会去找一个hello.html的页面。

1.2.2 @RestController的用法

重点了解这一个注解。

默认情况下,@RestController注解会将返回的对象数据转换成JSON格式。

@RestController
public class HelloController {
    @RequestMapping("/user1")
    public User getUser(){
        User user = new User();
        user.setName("ZhangSan");
        user.setAge(23);
        return user;
    }
}

 把上面这个代码写进自己新建的.java文件中,我的文件名命名为HelloController了。然后运行项目成功后去浏览器上输入http:/localhost:8080/user1,回车就可以看到结果了。

 注:User类是编译器自动编写的类

 这样我们就学会了怎么使用控制器,接下来就需要了解如何去接收请求,即控制器如何控制前端的请求,这个是靠路由映射实现的

1.3 路由映射

@RequestMapping注解主要负责URL的路由映射,可以添加在Controller类上或者具体的方法上

如果添加在Controller类上,则这个Controller中的所有路由映射都将会加上此映射规则,如果添加在方法上,则只在当前方法生效

@RequestMapping注解包含很多属性参数来定义HTTP的请求映射规则,常用属性参数有:

  •  value:请求URL的路径,支持URL模板、正则表达式
  • method:HTTP请求的方法

1、详细介绍value属性

value属性用于匹配URL映射,value支持简单表达式,如@RequestMapping(“/hello”);也支持使用通配符匹配URL,用于统一映射某些URL规则类似的请求:@RequestMapping("/getJson/*.json")

@RequestMapping的通配符匹配非常实用,支持"*" , "?" , "**"等通配符

  • *:匹配任意字符
  • **:匹配任意路径
  • ?:匹配单个字符

有通配符的优先级低于没有通配符的,比如/user/add.json优先级高于/user/*.json;有**的优先级低于有*通配符的。

2、Method匹配

HTTP请求method有GET、POST、PUT、DELETE等方式。@RequestMapping注解提供了method参数指定请求的method类型,有:

  • RequestMethod.GET
  • RequestMethod.POST
  • RequestMethod.PUT
  • RequestMethod.DELETE

Method匹配也可以使用@GetMapping、@PostMapping等注解代替

即,@RequestMapping(value="/getData", method=RequestMethod.GET) 等价于 @GetMapping("/getData")

@RequestMappping的method属性参数不一定要写

 @RequestMapping在刚刚1.2.1中有使用到,更详细的可以看看下面这个博客@RequestMapping 注解使用技巧(完整详解)-CSDN博客icon-default.png?t=O83Ahttps://blog.csdn.net/demo_yo/article/details/123608034

1.4 参数传递

 @RequestParam:将请求参数绑定到控制器的方法参数上,接收的参数来自HTTP请求体或请求url的QueryString,当请求的参数名称与Controller的业务方法参数名称一致时,@RequestParam可省略

    @RequestMapping(value = "/hello1",method = RequestMethod.GET)
    public String sayName(String nickname){
        System.out.println(nickname);
        return nickname;
    }

 搜索网址 http:/localhost:8080/hello1 会展示空白页面,而且idea会打印出null

搜索网址 http:/localhost:8080/hello1?nickname=zz 效果如下:

        

 如果需要多个参数,网址参数之间用&连接

如果参数名不一样,则需要使用注解。

在课程里面老师说,如果使用了@RequestParam则网址必须要输入成 http://localhost:8080/hello?name=lisi, 不然这个方法不会被调用,但是如果写成

@RequestParam(name = "name", defaultValue = "unknown user") 或者 @RequestParam(name = "name", required = false)

这样网址问号后面的东西可写可不写了,例子如下:

// http://127.0.0.1:8080/hello?name=lisi
    @RequestMapping("/hello")
    @ResponseBody
    public String hello(@RequestParam(name = "name", defaultValue = "unknown user") String name) {
        return "Hello " + name;
    }

            

@PathVaraible:用来处理动态的URL,URL的值可以作为控制器中处理方法的参数

@RequestBody:接收的参数是来自requestBody中,即请求体,一般用于处理非Content-Type:application/x-www-form-urlencoded编码格式的数据,比如:application/json、application/xml等类型的数据

参数传递与apipost的使用

apipost的下载和使用可以在csdn搜索,比较简单

例子1:

    @PostMapping("/postTest1")
    public String postTest1(){
        return "Post请求";
    }

 

 例子2:

    @PostMapping("/postTest2")
    public String postTest2(String userName){
        return userName;
    }

如果方法的参数特别多,有账号姓名性别密码等信息,如果将所有参数属性挨个写进去就非常难以阅读和麻烦。Java是一个面向对象的语言,那么,我们可以选择将这些信息封装成对象,参数传递这个对象实体。

但是方法参数是对象的时候,前端传递过来的名称一定要跟封装对象属性值的名称一致,这样才能自动把参数封装进对象里面去。

如果传递参数的类型不是 Content-Type:application/x-www-form-urlencoded 这种类型的数据的话,比如json类型的数据。那么我们就可以在参数前面添加@RequestBody,例子如下:

    @PostMapping("/postTest3")
    public String postTest3(@RequestBody User user){
        System.out.println(user.getName());
        System.out.println(user.getAge());
        return "Post4";
    }

 写json数据的时候,一定要注意对象属性名称与json的数据的名称相同, 后面的值也要是相同类型的,不然会出错。

2、web开发进阶

2.1 静态资源访问

使用IDEA创建SpringBoot项目,会默认创建出classpath:/static/目录,静态资源一般放这个目录下

如果默认的静态资源过滤策略不能满足开发需求,也可以自定义静态资源过滤策略,在application.properties中直接定义过滤规则和静态资源位置:

spring.mvc.static-path-pattern=/static/**

spring.web.resources.static-locations=classpath:static/

上面代码块表示,过滤规则为/static/**,静态资源位置为classpath:/static/

如果我们做的是前后端分离的项目,资源不会放static目录下

2.2 文件上传原理

表单的enctype属性规定在发送到服务器之前应该怎么对表单数据进行编码

当表单的enctype=“application/x-www-form-urlencoded"时,form的表单数据格式为key=value&key=value

当表单的enctype=”multipart/form-data"时,其传输数据形式如下:

 文件上传在前端需要表单,表单的默认编码类型是application/x-www-form-urlencoded,需要我们修改成multipart/form-data,这样才能上传文件

form表单中的enctype=“multipart/form-data“什么意思?-CSDN博客icon-default.png?t=O83Ahttps://blog.csdn.net/lingxiyizhi_ljx/article/details/102514560原理感觉有点小抽象,了解即可,实际编程会比较简单一点

2.3 Spring Boot实现文件上传功能

SpringBoot工程嵌入的tomcat限制了请求文件的大小,每个文件配置最大为1MB,单次请问文件总数不能超过10MB,这个是默认值可以修改的

如果需要修改这个默认值的话,就需要在配置文件application.properties中加入两个配置

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

当表单的enctype=“multipart/form-data”时,可以使用MultipartFile获取上传的文件数据,再通过transferTo的方法将其写入到磁盘中去

示例:

@RestController
public class FileController {
    @PostMapping("/upload")
    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());

        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);
    }
}

运行结果:

       

 2.4 拦截器

2.4.1 拦截器介绍 

拦截器在web系统中很常见,对于某些全局统一的操作,我们可以把它提取到拦截器中去实现。

拦截器的几种使用场景:

·权限检查:如登录检测,进入处理程序检测是否登录,如果没有,则直接返回登录页面

·性能监控:有时系统会在某段时间莫名其妙很慢,可以通过拦截器在进入处理程序之前记录下开始时间,在处理完后记录下结束时间,从而得到该请求的处理时间

·通用行为:读取cookie得到用户信息并将用户对象放入请求,从而方便后续流程使用,还有提取Locale、Theme信息等,只有是多个处理程序需要的即可使用拦截器实现

Spring Boot定义HandlerInterceptor接口来实现自定义拦截器的功能

HandlerInterceptor接口定义了preHandle、postHandle、afterCompletion三种方法,通过重写这三种方法实现请求前后等操作

 

 2.4.2 拦截器定义
public class LoginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        System.out.println("拦截器");
        return true;
    }
}

判断返回真还是假

2.4.3 拦截器注册

 只有定义还不够,我们还需要注册拦截器

addPathPatterns方法定义拦截地址

excludePathPatterns方法排除某些地址不被拦截

添加的一个拦截器没有addPathPatterns,则任何一个url默认拦截所有请求

如果没有excludePathPatterns任何请求,则默认不放过任何一个请求

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new LoginInterceptor()).addPathPatterns("/user/**");
    }
}

 上面代码部分解释:addInterceptor括号中的new LoginInterceptor()是自己创建的拦截器

Spring Boot 拦截器 HandlerInterceptor的使用以及WebMvcConfigurer简单介绍-CSDN博客icon-default.png?t=O83Ahttps://blog.csdn.net/ityqing/article/details/134403067