完成一个SpringBoot项目——员工管理系统

àì夳堔傛蜴生んèń 2024-03-26 11:59 61阅读 0赞

## SpringBoot项目——员工管理系统 ##

`该系统为一个springboot项目——员工管理系统的代码，前端使用的模板是thymeleaf，数据写在了dao层，没有用数据库，完全可以实现增删改查`

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

### 目录 ###

<table> 
 <thead> 
  <tr> 
   <th>目录</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>一、前端静态资源</td> 
  </tr> 
  <tr> 
   <td>二、项目准备工作</td> 
  </tr> 
  <tr> 
   <td>三、代码操作：1.前端代码操作 2.依赖导入 pom.xml文件 3.编写配置文件 4.页面国际化配置 5.后端代码编写</td> 
  </tr> 
  <tr> 
   <td>四、启动测试</td> 
  </tr> 
 </tbody> 
</table>

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

### 一、前端静态资源提取路径 ###

`这是提供的没有修改过的静态资源`

链接：https://pan.baidu.com/s/1kYIa\_B4XOGXrdFTTTyC\_Rg  
提取码：6bmy

`这是项目完成的资源包`

链接：https://pan.baidu.com/s/1Bt-t6y8RCyMbyzeudyPXtw  
提取码：1n3j

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

### 二、项目准备工作 ###

SpringBoot+idea工具

#### 1.创建项目 ####

**首先idea创建一个springboot项目，file——new——project——next**

![在这里插入图片描述][46a3a3cd676f4ecc91c80d60bba12936.png]

填写自己的内容，我选的java版本是8，项目名称最好见名知意

![在这里插入图片描述][9c1a2b0ec8b04d66beb7b781b85f55f2.png]

这里我没有选，直接next——finish

![在这里插入图片描述][09813db99a4f43c394b85a291d822125.png]

**创建自己需要的一些文件包，如下：**

![在这里插入图片描述][3b6a8bee60d24e2ebc26d6de91fffb50.png]

**`注：准备工作基本完成，下面就是代码的操作了`**

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

### 三、代码操作 ###

#### 1.前端代码操作 ####

这里将相关前端代码文件放到了各自的文件夹中

![在这里插入图片描述][62842db944f54f4da75dbb0fdfacd553.png]

注意：这几个html页面都需要加th=“http://www.thymeleaf.org”，由 thymeleaf 托管

![在这里插入图片描述][f521fc60065f42599c5af9f33a55cc91.png]

**1》index.html 修改内容**

![在这里插入图片描述][c4fa82103a974f8190c914bad631837d.png]

**2》dashboard.html 修改内容**

![在这里插入图片描述][c58d6688641046b480a0889a437caf34.png]  
![在这里插入图片描述][1287dd6584a44725a5b1b1453a7e8937.png]

**3》commons.html 修改内容**

![在这里插入图片描述][bb7d977ba4e2442f84314fa5a61aa454.png]![在这里插入图片描述][34667a4adeac46b489833742d4d4ca99.png]

**4》add.html 修改内容**

![在这里插入图片描述][a57c11fdba4d46a9824463cc3c8eb4e6.png]

**5》list.html 修改内容**

![在这里插入图片描述][907eff09174b4131b85fcebcf6f9e101.png]

**6》update.html 修改内容**

![在这里插入图片描述][1a6274cc08414622bd4e6f3801a64b38.png]  
![在这里插入图片描述][312c28d8449f47a88dcadfac3deda416.png]

**7》404.html 修改内容**

![在这里插入图片描述][cf9fa690ec1043148dc824af008f2c1e.png]

`前端搞完，就该搞后端以及配置了，顺序不分先后`

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

#### 2.依赖导入 pom.xml文件 ####

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
    
        
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.3.2.RELEASE</version>
            <relativePath/> 
        </parent>
        
        <groupId>com.study</groupId>
        
        <artifactId>springboot_management_system</artifactId>
        
        <version>0.0.1-SNAPSHOT</version>
        
        <name>springboot_management_system</name>
        
        <description>Demo project for Spring Boot</description>
    
        <properties>
            
            <java.version>1.8</java.version>
        </properties>
    
        <dependencies>
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-jdbc</artifactId>
            </dependency>
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
                <exclusions>
                    <exclusion>
                        <groupId>org.junit.vintage</groupId>
                        <artifactId>junit-vintage-engine</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>
            <dependency>
                
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <version>1.18.12</version>
            </dependency>
            
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <scope>runtime</scope>
            </dependency>
            
            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-boot-starter</artifactId>
                <version>3.3.2</version>
            </dependency>
            
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>druid</artifactId>
                <version>1.1.21</version>
            </dependency>
            
            <dependency>
                <groupId>log4j</groupId>
                <artifactId>log4j</artifactId>
                <version>1.2.12</version>
            </dependency>
    
        </dependencies>
    
        <build>
    
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>
    
    </project>

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

#### 3.编写配置文件 ####

`这里编写了.properties 和 .yml 文件，两者都可用`

application.properties

#thymeleaf配置
    spring.thymeleaf.cache=false
    
    #国际化配置
    spring.messages.basename=i18n.login
    
    #数据源配置，连接数据库
    spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    spring.datasource.username=root
    spring.datasource.password=123456
    spring.datasource.url=jdbc:mysql://127.0.0.1:3306/student?useUnicode=true\
      &characterEncoding=UTF-8\
      &useSSL=true\
      &serverTimezone=UTC
      
    #数据源类型
    spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
    
    #访问页面相关配置
    server.servlet.context-path=/yun
    server.port=8002
    
    #mybatis配置，扫描路径
    mybatis.type-aliases-package=com.study.pojo
    mybatis.mapper-locations=classpath:mybatis/mapper/*.xml

application.yml

#thymeleaf配置
    spring:
      thymeleaf:
        cache: false
    #国际化配置
      messages:
        basename: i18n.login
    
    #数据源配置，连接数据库
      datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        username: root
        password: root1234
        url: jdbc:mysql://127.0.0.1:3306/student?useUnicode=true&characterEncoding=UTF-8&useSSL=true&serverTimezone=UTC
        type: com.alibaba.druid.pool.DruidDataSource
    
    #访问页面配置
    server:
      servlet:
        context-path: /yun
      port: 8002
    
    #mybatis配置，扫描路径
    mybatis:
      type-aliases-package: com.study.pojo
      mapper-locations: classpath:mybatis/mapper/*.xml

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

#### 4.页面国际化配置 ####

`这里介绍下如何配置国际化`

![在这里插入图片描述][8f4d9f76b9ac48c7b72bb17058584517.png]  
1.保证idea中的编码语言为UTF-8

![在这里插入图片描述][7b16a1ca883d4ba58b1b1f164f6aa8b7.png]

1.  在 i18n 下建三个文件，右键新增

![在这里插入图片描述][a83f3cb05f6949c295ac66b0a94a48f2.png]

如下图所示

![在这里插入图片描述][2fb4942c09ea4280b92cc4fe53d551e5.png]

3.填写页面的内容

![在这里插入图片描述][01094aa2b92344288be4fa063d8a3121.png]

login.tip=Please sign in
    login.password=password
    login.remember=remember me
    login.btn=login
    login.username=username

4.登陆页面配置国际化页面的内容\*\*

![在这里插入图片描述][925b3b1712934aa889b90a71c767955e.png]

5.在application.properties配置文件中加配置信息，另外还加了项目路径server.servlet.context-path

![在这里插入图片描述][19b102a730584472a5164f4902885ce4.png]  
![在这里插入图片描述][1572501bb2fb4dc491f67227fc769b41.png]  
6.页面中英文切换

![在这里插入图片描述][ab88d0d4c36742bcba0553d40729012a.png]

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

#### 5.后端代码编写 ####

1.  config 包下的代码

LoginHandlerInterceptor 登录拦截器类

/**
     * @Author liuyun
     * @Date 2023/2/21 18:37
     * @Version 1.0
     * 登录拦截器
     */
    
    public class LoginHandlerInterceptor implements HandlerInterceptor {
        
        @Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        
            //登录成功之后，应该有用户的session
            Object loginuser = request.getSession().getAttribute("loginUser");
    
            if (loginuser == null) {
        
                //没有登录，而是直接进入的首页，肯定是不让进的
                request.setAttribute("msg", "没有权限，请先登录");
                request.getRequestDispatcher("/index.html").forward(request, response);
                return false;
            } else {
        
                return true;
            }
    
        }
    }

MyLocaleResolver 国际化类（满足登陆页面中英文切换显示）

/**
     * 国际化
     */
    
    public class MyLocaleResolver implements LocaleResolver {
        
        //解析请求z
        @Override
        public Locale resolveLocale(HttpServletRequest request) {
        
            //获取请求中的语言参数
            String lan = request.getParameter("l");
            Locale locale = Locale.getDefault(); //如果没有就使用默认的
    
            //如果请求的链接携带了国际化的参数
            if (!StringUtils.isEmpty(lan)) {
        
                String[] split = lan.split("_");
                //国家，地区
                locale = new Locale(split[0], split[1]);
            }
            return locale;
        }
    
        @Override
        public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {
        
    
        }
    }

MyMvcConfig 配置类

@Configuration
    public class MyMvcConfig implements WebMvcConfigurer {
        
        @Override
        public void addViewControllers(ViewControllerRegistry registry) {
        
            registry.addViewController("/").setViewName("index");
            registry.addViewController("/index.html").setViewName("index");
            registry.addViewController("/main.html").setViewName("dashboard");
        }
    
        //自定义的国际化组件就生效了
        @Bean
        public LocaleResolver localeResolver() {
        
            return new MyLocaleResolver();
        }
    
    	//拦截器注册类登记
        @Override
        public void addInterceptors(InterceptorRegistry registry) {
        
            registry.addInterceptor(new LoginHandlerInterceptor())
                    .addPathPatterns("/**").excludePathPatterns("/index.html", "/", "/user/login", "/asserts/**");
        }
    }

1.  控制层 controller 包下的代码

LoginController 登录类

/**
     * @Author liuyun
     * @Date 2023/2/21 18:06
     * @Version 1.0
     * 登录注销
     */
    
    @Controller
    @Slf4j
    public class LoginController {
        
    
        @RequestMapping("/user/login")
        public String login(
                @RequestParam("username") String username,
                @RequestParam("password") String password,
                Model model,
                HttpSession session
        ) {
        
            //具体的业务
            if (!StringUtils.isEmpty(username) && "123456".equals(password)) {
        
                session.setAttribute("loginUser", username);
                return "redirect:/main.html";
            } else {
        
                //告诉用户你登录失败了
                model.addAttribute("msg", "用户名或者密码错误");
                return "index";
            }
        }
    
        @RequestMapping("/user/loginout")
        public String loginout(HttpSession session) {
        
            session.invalidate();
            return "redirect:/index.html";
        }
    
    }

EmployeeController 员工列表

/**
     * @Author liuyun
     * @Date 2023/2/22 16:33
     * @Version 1.0
     * 员工列表操作
     */
    
    @Controller
    public class EmployeeController {
        
    
        @Autowired
        DepartmentMapper departmentMapper;
    
        @Autowired
        EmployeeMapper employeeMapper;
        
        @RequestMapping("/emps")
        public String list(Model model){
        
            //查出员工的所有信息
            Collection<Employee> result = employeeMapper.getAll();
            model.addAttribute("emps", result);
            return "emp/list";
        }
    
        @GetMapping("/emp")
        public String toAdd(Model model) {
        
            //查出部门的所有信息
            Collection<Department> departments = departmentMapper.getDepartment();
            model.addAttribute("departments", departments);
            return "emp/add";
        }
    
        @PostMapping("/emp")
        public String add(Employee employee) {
        
            System.out.println(employee);
            //员工添加的操作
            employeeMapper.save(employee);
            return "redirect:/emps";
        }
    
        //去员工的修改页面
        @GetMapping("/upemp/{id}")
        public String toupdataEmp(@PathVariable("id") Integer id, Model model) {
        
            //通过id查询员工数据
            Employee employee = employeeMapper.getEmployeeById(id);
            model.addAttribute("emp", employee);
            //查询所有部门信息
            Collection<Department> departments = departmentMapper.getDepartment();
            model.addAttribute("departments", departments);
    
            return "emp/update";
        }
    
        @PostMapping("/updateEmp")
        public String updataEmp(Employee employee) {
        
            employeeMapper.save(employee);
            return "redirect:/emps";
        }
    
        //删除员工
        @GetMapping("/deleteEmp/{id}")
        public String deleteEmp(@PathVariable("id") int id) {
        
            employeeMapper.delete(id);
            return "redirect:/emps";
        }
    
    }

3.数据层 mapper 包下的代码

`这里没有连接数据库，直接在dao层制造的数据`

DepartmentMapper 部门类

/**
     * @Author liuyun
     * @Date 2023/2/21 12:19
     * @Version 1.0
     * 部门mapper
     */
    
    @Repository
    public class DepartmentMapper {
        
        //模拟数据库的数据
    
        private static Map<Integer, Department> departments = null;
    
        static {
        
            //创建一个部门表
            departments = new HashMap<Integer, Department>();
            departments.put(101, new Department(101, "教学部"));
            departments.put(102, new Department(102, "市场部"));
            departments.put(103, new Department(103, "教研部"));
            departments.put(104, new Department(104, "运营部"));
            departments.put(105, new Department(105, "后勤部"));
        }
    
        //获得所有部门信息
        public Collection<Department> getDepartment() {
        
            return departments.values();
        }
    
        //通过ID的到部门
        public Department getDepartmentById(Integer id) {
        
            return departments.get(id);
        }
    }

EmployeeMapper员工类

/**
     * @Author liuyun
     * @Date 2023/2/21 12:34
     * @Version 1.0
     * 员工Mapper
     */
    
    @Repository
    //员工Dao
    public class EmployeeMapper {
        
        //模拟数据中的信息
        private static Map<Integer, Employee> employees = null;
        //员工有所属的部门
        @Autowired
        private DepartmentMapper departmentMapper;
    
        static {
        
            //创建一个员工表
            employees = new HashMap<Integer, Employee>();
    
            employees.put(1001,new Employee(1001,"小a","123456@qq.com",1,new Department(101,"教学部")));
            employees.put(1002,new Employee(1002,"小s","123789@qq.com",0,new Department(102,"市场部")));
            employees.put(1003,new Employee(1003,"小f","123456@qq.com",0,new Department(103,"教研部")));
            employees.put(1004,new Employee(1004,"小t","123456@qq.com",0,new Department(104,"运营部")));
            employees.put(1005,new Employee(1005,"小y","123456@qq.com",1,new Department(105,"后勤部")));
            employees.put(1006,new Employee(1006,"小e","123456@qq.com",0,new Department(102,"市场部")));
            employees.put(1007,new Employee(1007,"小w","123456@qq.com",1,new Department(103,"教研部")));
            employees.put(1008,new Employee(1008,"小q","123456@qq.com",1,new Department(104,"运营部")));
            employees.put(1009,new Employee(1009,"小j","123456@qq.com",1,new Department(105,"后勤部")));
            employees.put(1010,new Employee(1010,"小m","123456@qq.com",0,new Department(101,"教学部")));
        }
    
        //主键自增加
        private static Integer initId = 1006;
    
        //增加一个员工
        public Integer save(Employee employee) {
        
            try {
        
                if (employee.getId() == null) {
        
                    employee.setId(initId++);
                }
                employee.setDepartment(departmentMapper.getDepartmentById(employee.getDepartment().getId()));
    
                employees.put(employee.getId(), employee);
                if(employee!=null){
        
                    return 1;
                }else {
        
                    return 0;
                }
            }catch (Exception e){
        
                e.printStackTrace();
                return null;
            }
        }
    
        //查询全部的员工信息
        public Collection<Employee> getAll() {
        
            return employees.values();
        }
    
        //通过ID查询员工
        public Employee getEmployeeById(Integer id) {
        
            return employees.get(id);
        }
    
        //通过ID删除员工
        public Integer delete(Integer id) {
        
            Employee result = employees.remove(id);
            if (result!=null){
        
                return 1;
            }else{
        
                return 0;
            }
        }
    }

4.实体类 pojo 包下的代码

Department 部门表

/**
     * @Author liuyun
     * @Date 2023/2/21 12:05
     * @Version 1.0
     * 部门表
     */
    
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    //部门表
    public class Department {
        
        private Integer id;
        private String departmentName;
    
    }

Employee 员工表

/**
     * @Author liuyun
     * @Date 2023/2/21 12:08
     * @Version 1.0
     * 员工表
     */
    
    @Data
    @NoArgsConstructor
    //员工表
    public class Employee {
        
        private Integer id;
        private String lastName;
        private String email;
        private Integer gender;
        private Department department;
        private Date birth;
    
        public Employee(int id, String lastName, String email, Integer gender, Department department) {
        
            this.id = id;
            this.lastName = lastName;
            this.email = email;
            this.gender = gender;
            this.department = department;
            this.birth = new Date();
        }
    }

编写完成，启动测试

![在这里插入图片描述][d27ac869202845f68024b00f82243e81.png]  
员工列表页面

![在这里插入图片描述][2d2679062a4c4e45b53bc5b8a54edd7d.png]

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

参考：[文章][Link 1] ， [狂神说][Link 2]

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

**希望可以帮助到您**

### `~感谢您的光临~` ###

[46a3a3cd676f4ecc91c80d60bba12936.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/36068218f2ff465fa8db6cc07d654275.png
[9c1a2b0ec8b04d66beb7b781b85f55f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/dc59d85bb16d485e9d8d8549a5df8195.png
[09813db99a4f43c394b85a291d822125.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2546e9d6d23a47c591239121059f7fc4.png
[3b6a8bee60d24e2ebc26d6de91fffb50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3ab6f33635cf492fa3c4992409ac7298.png
[62842db944f54f4da75dbb0fdfacd553.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/bb521f3a03954061be3203bea1ccc90a.png
[f521fc60065f42599c5af9f33a55cc91.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/bd0cb63d6f30487eb3686b1dc0ca50d2.png
[c4fa82103a974f8190c914bad631837d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6eb72ed2b6314d628968ee98e6239c3b.png
[c58d6688641046b480a0889a437caf34.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ce78775d5ff847758a6d01708c9c147a.png
[1287dd6584a44725a5b1b1453a7e8937.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/fd2872e4a108494a9de4d18cfb2dfd1f.png
[bb7d977ba4e2442f84314fa5a61aa454.png]: https://img-blog.csdnimg.cn/bb7d977ba4e2442f84314fa5a61aa454.png
[34667a4adeac46b489833742d4d4ca99.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b1cf3db465d944258740cb7a5263895a.png
[a57c11fdba4d46a9824463cc3c8eb4e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/65bc0fe6e33d4039a15582aeed2be68d.png
[907eff09174b4131b85fcebcf6f9e101.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b2ac70ee119b4ee5a2f02412c6f44669.png
[1a6274cc08414622bd4e6f3801a64b38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0e34460ce78a4f19bfcb4c528b249bf0.png
[312c28d8449f47a88dcadfac3deda416.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ed5fffb908714c888d3573ef34372bdb.png
[cf9fa690ec1043148dc824af008f2c1e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e73fb839f05b4337a9a905d8086ec2c3.png
[8f4d9f76b9ac48c7b72bb17058584517.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a7558e2ea91c4db79f7cb479d60b5a9d.png
[7b16a1ca883d4ba58b1b1f164f6aa8b7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f8f4ab1a4ad14b6b889971392f4484d4.png
[a83f3cb05f6949c295ac66b0a94a48f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a7a10a76ec2e4345b4b6c73691dcb354.png
[2fb4942c09ea4280b92cc4fe53d551e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9d3aef3dbce644d6a8a096739014522a.png
[01094aa2b92344288be4fa063d8a3121.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/952ef0a4b7fb4341805a0b3b02b3bcf2.png
[925b3b1712934aa889b90a71c767955e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4d64db7e6c8342318b4560c8a055bb8c.png
[19b102a730584472a5164f4902885ce4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/746fec999726441fa7b293cb965c09f8.png
[1572501bb2fb4dc491f67227fc769b41.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/df1834f3a334403d89bb14f036480547.png
[ab88d0d4c36742bcba0553d40729012a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f904eda060fb466d944b344a86f27611.png
[d27ac869202845f68024b00f82243e81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2935966cc6544b6389a39110c2c382be.png
[2d2679062a4c4e45b53bc5b8a54edd7d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/65452fd368134777b1e3d1beb2dce5d9.png
[Link 1]: https://blog.csdn.net/javaeEEse/article/details/117924315?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-117924315-blog-122596103.pc_relevant_default&spm=1001.2101.3001.4242.1&utm_relevant_index=3
[Link 2]: https://www.bilibili.com/video/BV1PE411i7CV?p=20&vd_source=cf148dda4776088947bf34ef89d1a0dd