1天搞定SpringBoot+Vue全栈开发——刘老师教编程（课堂笔记1）

头像
飞呀
     河北
    阅读 11 分钟

    2.SpringBoot快速上手

    image.png

    2.1 新建SpringBoot项目

    在idea中新建一个Project->选择SpringInitialzr（如图配置完毕）->
    image.png
    [next]->Web-SpringWeb
    image.png
    项目基本结构如下：
    image.png

    2.2 开发环境热部署

    image.png
    具体实现：
    image.png
    第一步：pom.xml中添加依赖：

        <!--添加热部署依赖-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>

    image.png
    第二步：配置application.properties文件：

    spring.devtools.restart.enabled=true
spring.devtools.restart.additional-paths=src/main/java

    image.png
    第三步：开启Build project automatically
    image.png
    第四步：2021-2023版本这个选项的配置，改到Settings-Advanced Settings模块下了。
    ctrl+alt+s，进入设置，然后选择Advanced Settings，在Compiler下勾选 Allow auto-make to restart even if developed application is currently running。
    image.png
    配置完重新启动服务器即可。

    3.SpringBoot Controller

    3.1.1 web入门

    image.png

    3.1.2 控制器

    image.png

    3.1.3 @Controller的用法

    image.png
    image.png
    image.png

    3.2.1 路由映射

    image.png

    3.2.2 路由映射

    image.png

    3.2.3 路由映射

    image.png
    例如：
    image.png
    以上两种方式等价，写一行就可以

    3.3 参数传递

    image.png

    3.3.1 get请求方式

    congtroller方法：
    @RequestMapping配置method=ResquestMethod.GET
    image.png
    结果：
    image.png
    多个参数可以用“&”拼接;请求路径中的参数和Controller方法中的参数不一致，可以用@RequestParam注解解决。
    image.png
    注意：加上@RequestParam后，表明这个参数是必须的，如果请求时不传该参数，则Controller方法将不会被访问到，如下请求结果。
    image.png
    加上required以后，请求中是否传递该参数都是可以正常访问的
    image.png

    3.3.2 post请求方式

    下载安装ApiPost,修改编码类型为x-www-form-urlencoded：
    image.png
    发送参数：
    image.png
    Body选项意思是把数据放到请求体里
    使用get方式如下配置：
    image.png
    参数很多，请求参数需要包装到一个实体类中，数据名、数据类型都要和类中定义的变量保持一致
    Controller方法：

    @PostMapping("/postTest3")
public String postTest3(User user){
    System.out.println(user);
    return "POST请求";
}

    请求结果：
    image.png

    3.3.3 json格式数据

    image.png
    controller方法：

    @PostMapping("/postTest4")
public String postTest4(@RequestBody User user){
    System.out.println(user);
    return "POST请求";
}

    3.3.4 通配符请求

    @PostMapping("/test/**")对应的请求为“localhost:8080/xxx/xxx”
    controller方法：

    @PostMapping("/test/**")
public String test(@RequestBody User user){
    return "通配符请求";
}

    结果：
    image.png
    如果@PostMapping("/test/*"),则对应的请求为“localhost:8080/xxx”
    image.png

    4.文件上传

    4.1 静态资源访问

    image.png
    resources/static目录默认映射为服务器的根目录，凡是该目录下的，直接访问“localhost:8080/资源名称”即可；但为了方便统一管理，需要将静态资源访问路径进行配置
    application.properties中配置:

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

    这样静态资源的访问路径变为：“localhost:8080/images/资源名称”
    如果想把静态资源放到自定义目录下，可以配置：

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

    calsspath是类路径，属于编译完以后的项目根目录。一般很少自定义存放目录，了解即可。

    4.2 文件上传原理

    image.png

    4.3 SpringBoot实现文件上传功能

    image.png
    image.png
    controller方法：

    //文件上传功能
@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");
    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);
}

    请求：
    image.png
    结果：
    image.png
    如果希望用户能通过浏览器到之前上传的文件，需要配置application.properties:

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

    第一个“/”代表服务器所在的路径，即Tomcat所运行的目录
    重新上传一下文件，再次测试：
    image.png
    访问请求后面直接加文件即可

    4.4 拦截器

    image.png
    image.png
    image.png

    4.4.1 拦截器定义

    image.png

    4.4.2 拦截器注册

    image.png
    image.png
    拦截器的实现
    image.png
    config包下创建配置类WebConfig（一般SpringBoot配置都在config包下），只拦截user路径下的请求
    image.png
    添加@Configuration表明当前是个配置类

    5 RESTful服务+Swagger

    image.png

    5.1 RESTful介绍

    image.png

    5.2 RESTful的特点

    image.png

    5.3 RESTful API

    image.png

    5.3.1 HTTP Method

    image.png

    5.3.2 HTTP 状态码

    image.png

    5.4 Spring Boot实现RESTful API

    image.png

    5.4.1 RESTful规则

    image.png
    image.png

    5.4.2 代码实现

    image.png

    @RestController
public class UserController {
    @GetMapping("/user/{id}")
    public String getUserById(@PathVariable int id){
        System.out.println(id);
        return "根据ID获取用户信息";
    }
    @PostMapping("/user")
    public String save(User user){ return "添加用户"; }
    @PutMapping("/user")
    public String update(User user){ return "更新用户"; };
    @DeleteMapping("/user/{id}")
    public String deleteById(@PathVariable int id){
        System.out.println(id);
        return "根据ID删除用户";
    }

    测试getUSerById方法
    image.png

    5.5 什么是Swagger

    image.png
    image.png
    做完Swagger的配置后，控制器内的方法都会被映射到网页上，更加方便前端调用，也会利于前后端的沟通。

    5.5.1 使用Swagger生成Web API文档

    image.png
    第一步：pom.xml添加依赖

            <!--添加swagger2相关功能-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.9.2</version>
        </dependency>
        <!--添加swagger-ui相关功能-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.9.2</version>
        </dependency>

    第二步：配置Swagger，在config下新建一个配置类Swagger2Config

    @Configuration //告诉Spring容器，这个类是一个配置类
@EnableSwagger2 //启用Swagger2功能
public class Swagger2Config {
   //配置Swagger2相关的bean
    @Bean
    public Docket creatRestApi(){
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                ////com包下所有API都交给Swagger2管理
                .apis(RequestHandlerSelectors.basePackage("com"))
                .paths(PathSelectors.any()).build();
    }
    //此处主要是API文档页面显示信息
    private ApiInfo apiInfo(){
        return new ApiInfoBuilder()
                .title("演示项目API") //标题
                .description("学习Swagger2的演示项目") //描述
                .build();
    }

    启动项目：
    image.png
    发现报错，提示未能配置数据源
    解决：在application.properties中添加添加如下配置，具体原理可参考“Spring Boot中 MVC匹配策略”https://blog.csdn.net/Fornewknowledge/article/details/130548969
    再次启动项目，可正常运行

    spring.mvc.pathmatch.matching-strategy=ant_path_matcher

    5.5.2 使用Swagger2进行接口测试

    image.png
    image.png
    访问“http://localhost:8080/swagger-ui.html#/user-controller”
    image.png
    首页为“http://localhost:8080/swagger-ui.html”
    image.png

    5.5.3 Swagger常用注解

    image.png
    image.png
    例如，在getUserById方法上添加注解“@ApiOperation("获取用户")”

        @ApiOperation("获取用户")
    @GetMapping("/user/{id}")
    public String getUserById(@PathVariable int id){
        System.out.println(id);
        return "根据ID获取用户信息";
    }

    image.png
    可以在Swagger中直接测试接口功能
    image.png

    springbootvue.jsmybatis-plusswaggermockjs
    飞呀
    1 声望4 粉丝
    下一篇 »
    1天搞定SpringBoot+Vue全栈开发——刘老师教编程（课堂笔记2）

    引用和评论

    推荐阅读
    头像
    1天搞定SpringBoot+Vue全栈开发——刘老师教编程（课堂笔记3）

    飞呀阅读 1.2k

    头像
    再见 XShell！一款万能通用的终端工具，用完爱不释手！

    macrozheng赞 2阅读 2.9k

    头像
    长链接生成短链接

    kexb赞 3阅读 915

    头像
    MyBatis-Plus结合Spring Boot实现数据权限

    Pursuer丶赞 3阅读 8.5k

    头像
    更强大、更灵活！ defineModel 重新定义双向绑定

    南玖赞 3阅读 743

    头像
    70k star，取代Postman！这款轻量级API工具，太香了！

    macrozheng赞 2阅读 358

    头像
    TypeScript中的Omit与Pick：何时使用

    倔强青铜三赞 1阅读 1.2k

    0 条评论
    得票最新