[前端学java08-SpringBoot实战总结1-7] 阶段

2021-10-14  本文已影响0人  woow_wu7

导航

[react] Hooks

[封装01-设计模式] 设计原则 和 工厂模式(简单抽象方法) 适配器模式 装饰器模式
[封装02-设计模式] 命令模式 享元模式 组合模式 代理模式

[React 从零实践01-后台] 代码分割
[React 从零实践02-后台] 权限控制
[React 从零实践03-后台] 自定义hooks
[React 从零实践04-后台] docker-compose 部署react+egg+nginx+mysql
[React 从零实践05-后台] Gitlab-CI使用Docker自动化部署

[源码-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实战] 静态资源 + 拦截器 + 前后端文件上传
[前端学java05-SpringBoot实战] 常用注解 + redis实现统计功能
[前端学java06-SpringBoot实战] 注入 + Swagger2 3.0 + 单元测试JUnit5
[前端学java07-SpringBoot实战] IOC扫描器 + 事务 + Jackson
[前端学java08-SpringBoot实战总结1-7] 阶段性总结

(一) 前置知识

(1) 一些单词

fragment 片段
drawer 抽屉

library 资源库
premium 昂贵的 溢价 // navicat permium 支持多种数据库

rainbow 彩虹
bracket 括号
rainbow bracket 彩虹括号

wired 连线
auto wired 自动连接 // @Autowired
conditional 条件的 // @Conditional

override 复写
preference 偏好
distinct 清晰的 不同的

exception 异常

(2) mac版idea快捷键

1. 全局查找
command + shift + r

2. 调出actions
command + 3

3. 设置
command + ,

4. 文件间的跳转
command + e

5. 信息提示
command + 1

6. 跳转到别的类
control + 鼠标左键

7. 复制文件的引用路径
鼠标右键 - copy path - copy reference

8. 左右移动代码块
- 左移动 shift + tab
- 右移动 tab

9. 查找文件
- ctrl + h

(3) 一些常用的服务器应用端口号

mysql ----------------------- 3306
nginx ----------------------- 80

(4) idea中出现端口被占用

lsof -i tcp:7890 
kill PID

// 7890表示被占用的端口号

(二) 常用注解

(1) lombok中常用注解

image.png

(1.1) lombok 的添加和使用

<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.20</version>
    <scope>provided</scope>
</dependency>

(1.2) @Data

(1.3) @Value

(1.4) @Builder

@Data
@Builder
public class FirstBean {
    private String name;
    private Integer age;
    private String sex;
}

-----------------------

FirstBean firstBean = FirstBean.builder()
                .name(name)
                .age(age)
                .sex(sex)
                .build();
image.png image.png

(1.5) @Slf4j

log.info("传入的参数变量{}", name);
// {} 就是占位符，表示后面的变量name

(1.6) @NoArgsConstructor @AllArgsConstructor @RequiredArgsConstructor

(2) mybatis中常用注解

image.png

(3) controller 中常用注解

(3.1) @RestController 和 @Controller + @ResponseBody

// @RestController = @Controller + @ResponseBody

@Controller --------------------------------- 1
@Slf4j
public class FirstController {
    @RequestMapping(value = "/music/{name}", method = {RequestMethod.GET})
    @ResponseBody --------------------------- 2
    public String getMusic(
            @PathVariable("name") String name,
            @RequestParam("age") Integer age,
            @RequestParam("sex") String sex
    ) {
        System.out.println(name);
        log.info("传入的参数变量2{}", name);
        FirstBean firstBean = FirstBean.builder()
                .name(name)
                .age(age)
                .sex(sex)
                .build();
        System.out.println(firstBean);
        return "good246";
    }
}

(3.2) @GetMapping @PostMapping @PutMapping @DeleteMapping

@GetMapping("/music/{name}")
相当于
@RequestMapping(value="/music/{name}", method = {RequestMethod.GET})

(3.3) @RequestParam 和 @PathVariable ------ get delete 请求

(3.4) @RequestBody 和 @RequestHeader ------ post put 请求

    @PostMapping("/music")
    public MusicBean addMusic(
            @RequestBody MusicBean musicBean,
            @RequestHeader("Content-Type") String contentType
    ) {
        log.info("musicBean:{}", musicBean);
        log.info("Content-Type:{}", contentType);
        return musicBean;
    }

(3-5) @RequestPart

(4) 容器相关的注解

(4.1) @Configuration + @Bean 向容器中添加组件

/**
 * 1. @Configuration 标注的类就是 配置类
 * 2。配置类里，使用 @Bean 标注在方法上给容器注册组件，注册的组件默认也是单实例的
 * 3. 注意：@Configuration标注的类，该类本身也是一个组件，即 UserConfig 也是一个组件，即 ( 配置类本身也是一个组件 )
 *
 * 4. proxyBeanMethods 代理bean的方法，默认值是true
 *    Full(proxyBeanMethods = true) 单例，可以用于 ( 组件依赖 )
 *    Lite(proxyBeanMethods = false)
 */
// 告诉 SpringBoot 这是一个 ( 配置类 )，等用于以前的配置文件
// @Configuration 配置类
@Configuration(proxyBeanMethods = true)
public class UserConfig {
    // @Bean
    // @Bean 给容器中添加组件
    // 1. 以方法名作为组件的id => user1
    // 2. 返回类型就是组件类型 => UserBean
    // 3. 返回的值就是组件在容器中的实例 => new UserBean()
    // @Bean("userX") 的参数可以自定义id
    @Bean("userX")
    public UserBean user01() {
        return new UserBean("woow_wu7", 20);
    }
}

(4.2) @Autowired 和 @Resource 和 new

(4.3) @Import 和 @Bean

(三) 热更新

<!-- spring-boot-devtools 热更新 -->
<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-devtools -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-devtools</artifactId>
  <optional>true</optional>
  <scope>true</scope>
</dependency>
image.png
image.png
image.png

(四) 连接数据库实现crud

(4-1) 安装mysql数据库到服务器，并通过 navicat premium 连接数据库

(4-2) 添加必须的maven依赖


<!-- mysql依赖 -->
<!-- mysql, 版本需要和你安装的mysql版本保持一致 -->
<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.24</version>
</dependency>


<!-- jdbc依赖 -->
<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-jdbc -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-jdbc</artifactId>
    <version>2.4.5</version>
</dependency>


<!-- mybatis依赖 -->
<!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter -->
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.1.3</version>
</dependency>

(4-3) 在 application.properties 中配置数据源组件配置项

application.properties
-------

# 定义数据源组件
# 已弃用 spring.datasource.driver-class-name=com.mysql.jdbc.Driver
# 注意 spring.datasource.url="jdbc:mysql://localhost:3306/数据库名称?时区信息"
# 注意 上面的时区信息不能少，不然会报错
# 分别是 ( 数据库url ) ( 数据库驱动 ) ( 用户名 ) ( 密码 )
spring.datasource.url=jdbc:mysql://localhost:3306/7-community-java?serverTimezone=GMT%2B8&useSSL=false
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=root

(4-4) 注解方式 - 利用mybatis注解的方式操作数据库

(4-5) xml方式 - 利用mybatis的xml方式操作数据库 ( 重点 )

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo.mapper.MusicMapper">
    <!-- namespace 就是 mapper 文件夹中对应的 Mapper 文件  -->

    <!-- public abstract List<MusicBean> getMusic(); -->
    <!-- id 是方法名 -->
    <!-- resultType 是方法的返回值类型，通过 copy path => copy reference 可以快速生成 -->
    <select id="getAllMusic" resultType="com.example.demo.bean.MusicBean">
        select * from music
    </select>

    <select id="getMusic" resultType="com.example.demo.bean.MusicBean">
        SELECT * FROM music
        WHERE
            name=#{name}
    </select>

    <insert id="addMusic" parameterType="com.example.demo.bean.MusicBean">
        insert into music
        (name, singer)
        values
        (#{name}, #{singer})
    </insert>

    <delete id="deleteMusic" parameterType="Integer">
        delete from music
        where
        id=#{id}
    </delete>

    <update id="updateMusic" parameterType="Map">
        update music
        set name=#{musicBean.name}, singer=#{musicBean.singer}
        where id=#{id}
    </update>

</mapper>

mapper


 public List<MusicBean> getAllMusic();

 public MusicBean getMusic(Integer id, String name);

 public Integer addMusic(MusicBean musicBean);

 Integer deleteMusic(Integer id);

 Integer updateMusic(Integer id, MusicBean musicBean);
image.png

(五) 拦截器 HandlerInterceptor

(5-1) 拦截器实现的具体过程

image.png

(六) 静态资源

package com.example.demo.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class TestStaticResources {

    // 静态资源

    // 1
    // - resources/static
    // - resources/public
    // - resources/MATA-INF/resources
    // - resources/resources
    // - 以上四个文件夹中的文件就属于静态资源，通过访问 `跟路径/静态资源名称` 即可

    // 2
    // 原理：静态映射 /**
    // 请求进来，先去 ( controller ) 中看能不能处理，如果不能处理再交给 ( 静态资源处理器去处理静态资源 )

    // 3
    // 问题：如果controller中有一个接口/mm.jpg，而我们的静态资源文件夹中同样有一个静态资源叫mm.jpg，会发生什么？
    // 答案：会优先处理controller中的类，而不会去访问静态资源

    // 4
    // 静态资源前缀
    // 静态资源设置前缀：spring.mvc.static-path-pattern=/resources/**
    // 访问静态资源：当前项目 + 前缀 + 静态资源
    // 例子：http://localhost:7777/resources/66.jpg

    // 5
    // 指定自定义的静态资源目录 ( 默认静态文件夹路径 )
    // spring.web.resources.static-locations=[classpath:/7resources/]
    @GetMapping("/mm.jpg")
    public String getStaticResources() {
        return "string, is not static resource mm.jpg";
    }
}
image.png

(七) 文件上传

(7.1) 添加 spring-boot-start-thymeleaf maven依赖

<!-- spring-boot-starter-thymeleaf -->
<!-- 主要用于显示resources/templates中的html -->
<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

(7.2) 在 resources/templates/ 文件夹中新建 fileUpload.html 

<!DOCTYPE html>
<!--注意：xmls:th 的值-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div>测试页面</div>
<!-- th:action="@{/upload}" 提交的controller对应的path -->
<!-- enctype="multipart/form-data" -->
<form th:action="@{/upload}" method="post" enctype="multipart/form-data">
    <div>
        <span>单头像上传</span>
        <input type="file" name="single">
    </div>
    <div>
        <span>多头像上传</span>
        <!-- multiple表示开启多个上传 -->
        <input type="file" name="multiple" multiple>
    </div>
    <button type="submit">上传</button>
</form>
</body>
</html>

(7.3) 新建controller

@Controller
@Slf4j
public class FileUploadController {

    @GetMapping("/fileUpload")
    public String handleFile() {
        return "fileUpload";
    }

    @PostMapping("/upload")
    public String upload(
            @RequestPart("single") MultipartFile single
    ) throws IOException {
        if (!single.isEmpty()) {
            String originalFilename = single.getOriginalFilename(); // 获取原始文件名
            log.info("{}", originalFilename);
        }
        return "fileUpload";
    }
}
image.png
上一篇 下一篇

猜你喜欢

热点阅读