1. 员工管理

1️⃣1.1 条件分页查询

条件分页查询

需求

image-20221215175639974

通过员工管理的页面原型我们可以看到:

1. 员工列表页面的查询，不仅仅需要考虑分页，还需要考虑查询条件。

我们看到页面原型及需求中描述，搜索栏的搜索条件有三个，分别是：

• 姓名：模糊匹配
• 性别：精确匹配
• 入职日期：范围匹配

对应的数据库sql语句

select * 
from emp
where 
  name like concat('%','张','%')   -- 条件1：根据姓名模糊匹配
  and gender = 1                   -- 条件2：根据性别精确匹配
  and entrydate = between '2000-01-01' and '2010-01-01'  -- 条件3：根据入职日期范围匹配
order by update_time desc;

上述的三个条件，都是可以传递，也可以不传递的，也就是动态的。 我们需要使用前面学习的Mybatis中的动态SQL

接口信息

• 请求路径：/emps
• 请求方式：GET
• 请求参数：

参数名称	是否必须	示例	备注
name	否	张	姓名
gender	否	1	性别 , 1 男 , 2 女
begin	否	2010-01-01	范围匹配的开始时间(入职日期)
end	否	2020-01-01	范围匹配的结束时间(入职日期)
page	是	1	分页查询的页码，如果未指定，默认为1
pageSize	是	10	分页查询的每页记录数，如果未指定，默认为10

/emps?name=张&gender=1&begin=2007-09-01&end=2022-09-01&page=1&pageSize=10

返回值：

{
  "code": 1,
  "msg": "success",
  "data": {
    "total": 2,
    "rows": [
       {
        "id": 1,
        "username": "jinyong",
        "password": "123456",
        "name": "金庸",
        "gender": 1,
        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2022-09-02-00-27-53B.jpg",
        "job": 2,
        "salary": 8000,
        "entryDate": "2015-01-01",
        "deptId": 2,
        "deptName": "教研部",
        "createTime": "2022-09-01T23:06:30",
        "updateTime": "2022-09-02T00:29:04"
      },
      {
        "id": 2,
        "username": "zhangwuji",
        "password": "123456",
        "name": "张无忌",
        "gender": 1,
        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2022-09-02-00-27-53B.jpg",
        "job": 2,
        "salary": 6000,
        "entryDate": "2015-01-01",
        "deptId": 2,
        "deptName": "教研部",
        "createTime": "2022-09-01T23:06:30",
        "updateTime": "2022-09-02T00:29:04"
      }
    ]
  }
}

代码开发： 👇👇

编码流程图

准备工作

1. 前端给后端传递参数：当前页、每页条数、条件参数、日期
2. 后台返回给前端的数据：总条目数，当前页的数据集合需要封装成一个对象

点击插件详细步骤图解

PageBean类放到pojo包中

@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageBean {

    private Long total;//总记录数
    private List rows;//数据列表

}

员工实体类和员工经历的实体类放到pojo包中

@Data
public class Emp {
    private Integer id; //ID,主键
    private String username; //用户名
    private String password; //密码
    private String name; //姓名
    private Integer gender; //性别, 1:男, 2:女
    private String phone; //手机号
    private Integer job; //职位, 1:班主任,2:讲师,3:学工主管,4:教研主管,5:咨询师
    private Integer salary; //薪资
    private String image; //头像
    private LocalDate entryDate; //入职日期
    private Integer deptId; //关联的部门ID
    private LocalDateTime createTime; //创建时间
    private LocalDateTime updateTime; //修改时间

    //封装部门名称数
    private String deptName; //部门名称
    //封装员工工作经历
    private List<EmpExpr> exprList; //工作经历列表
}

/**
 * 工作经历
 */
@Data
public class EmpExpr {
    private Integer id; //ID
    private Integer empId; //员工ID
    private LocalDate begin; //开始时间
    private LocalDate end; //结束时间
    private String company; //公司名称
    private String job; //职位
}

3. 分页功能的实现，用到了MyBatisPlus的分页插件，需要添加配置文件

将配置文件，放到config报下

@Configuration
@MapperScan("cn.yangeit.mapper")//扫描mapper接口
public class MybatisPlusConfig {

    /**
     * 添加分页插件
     */
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); // 如果配置多个插件, 切记分页最后添加
        // 如果有多数据源可以不配具体类型, 否则都建议配上具体的 DbType
        return interceptor;
    }
}

4. 在cn.yangeit.mapper包下，创建EmpMapper接口

@Mapper
public interface EmpMapper extends BaseMapper<Emp>{
 
}

5. 在resources文件加下创建mapper接口的同名文件夹，以及EmpMapper接口的同名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="cn.yangeit.mapper.EmpMapper">
<!-- 此处写sql语句 -->

</mapper>

6. EmpController控制层，接受参数，调用业务层，返回数据
   

7. 功能测试

功能开发完成后，重启项目工程，打开apifox，发起GET请求：

image-20221215182344380

控制台SQL语句：

image

8. 前后端联调 🚀

打开浏览器，测试后端功能接口：

image

注意

为什么员工列表中的部门名字没有，怎么解决？

作业

1. 🚩 观察日志，分析分页查询的SQL语句，并写出对应的MyBatisPlus的分页查询语句,已经每条什么意思？
2. 在前端输入不同的查询条件，观察sql是否不一样？
3. 参考笔记，完成员工列表的分页查询功能

2️⃣1.2 删除员工 实战 🔫

新的功能：删除员工

需求

image-20221215183657413

当勾选列表前面的复选框，然后点击 批量删除 按钮，就可以将这一批次的员工信息删除掉了。
也可以只勾选一个复选框，仅删除一个员工信息。

删除请求详情

删除多个员工包含只删除一个员工

接口信息需要查看接口文档

接口文档

功能开发 👇 👇

核心代码编写

EmpController

  //批量删除
@DeleteMapping
public AjaxResult delete( @RequestParam List<Integer> ids){
    log.info("批量删除：{}", ids);
    empManager.deleteBatchIds(ids);
    return AjaxResult.success();
}

测试

控制台SQL语句：

image

image

作业

🚩 完成分页查询和员工删除的代码，并且完成查询原型和接口文档，完成部门修改功能实现

3️⃣ 1.3 文件上传

文件上传

文件上传

1。文件上传的概念

文件上传，是指将本地图片、视频、音频等文件上传到服务器，供其他用户浏览或下载的过程。

文件上传在项目中应用非常广泛，我们经常发微博、发微信朋友圈都用到了文件上传功能。

image-20221216203904713

在我们的案例中，在新增员工的时候，要上传员工的头像，此时就会涉及到文件上传的功能。在进行文件上传时，我们点击加号或者是点击图片，就可以选择手机或者是电脑本地的图片文件了。当我们选择了某一个图片文件之后，这个文件就会上传到服务器，从而完成文件上传的操作。

想要完成文件上传这个功能需要涉及到两个部分： 👇

1. 前端程序
2. 服务端程序

2.接口文档

接口文档

image

3. 阿里云OSS介绍

将前端传过来的文件，传到阿里云oss上。

点击查看使用阿里云OSS的原因👈

阿里云是阿里巴巴集团旗下全球领先的云计算公司，也是国内最大的云服务提供商 。

image-20221229093412464

阿里云对象存储OSS（Object Storage Service），是一款海量、安全、低成本、高可靠的云存储服务。使用OSS，您可以通过网络随时存储和调用包括文本、图片、音频和视频等在内的各种文件。

4. 开始编码

图片上传流程

0. 创建UpLoadController，接受前端情况

@Slf4j
@RestController
public class UploadController {

    @Autowired
    private AliOSSUtils aliOSSUtils;

    @PostMapping("/upload")
    public AjaxResult upload(MultipartFile file) throws IOException {
        log.info("上传源文件文件名字：{}",file.getOriginalFilename());
       

       
        return AjaxResult.success();
    }

}

1. 导入阿里云oss 所需依赖后，点击右上角的刷新

<!--阿里云OSS-->
<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.15.1</version>
</dependency>
<dependency>
    <groupId>javax.xml.bind</groupId>
    <artifactId>jaxb-api</artifactId>
    <version>2.3.1</version>
</dependency>
<dependency>
    <groupId>javax.activation</groupId>
    <artifactId>activation</artifactId>
    <version>1.1.1</version>
</dependency>
<!-- no more than 2.3.3-->
<dependency>
    <groupId>org.glassfish.jaxb</groupId>
    <artifactId>jaxb-runtime</artifactId>
    <version>2.3.3</version>
</dependency>

2. 在utils工具类包中，导入AliOSSUtils工具类,在工具类中填写秘钥等信息

image

/**
 * 阿里云 OSS 工具类
 */
@Component
public class AliOSSUtils {
//   区域
    @Value("${aliyun.endpoint}")
    private String endpoint;
//    访问id
    @Value("${aliyun.accessKeyId}")
    private String accessKeyId;
//    秘钥
    @Value("${aliyun.accessKeySecret}")
    private String accessKeySecret;
//    桶的名称
    @Value("${aliyun.bucketName}")
    private String bucketName;

    /**
     * 实现上传图片到OSS
     */
    public String upload(MultipartFile file) throws IOException {
        // 获取上传的文件的输入流
        InputStream inputStream = file.getInputStream();

        // 避免文件覆盖
        String originalFilename = file.getOriginalFilename();
        String fileName = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));

        //上传文件到 OSS
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        ossClient.putObject(bucketName, fileName, inputStream);

        //文件访问路径
        String url = endpoint.split("//")[0] + "//" + bucketName + "." + endpoint.split("//")[1] + "/" + fileName;
        // 关闭ossClient
        ossClient.shutdown();
        return url;// 把上传到oss的路径返回
    }

}

3. 将下列阿里云的配置信息，粘贴到application.yml中

#顶格写 
aliyun:
  endpoint: 见微信群
  accessKeyId: 见微信群
  accessKeySecret: 见微信群
  bucketName: 见微信群

4. 根据接口文档，编写UploadController，编写上传接口，调用阿里云OSS工具类，将上传上来的文件存入阿里云 👇
   

接口文档

@Slf4j
@RestController
public class UploadController {

    @Autowired
    private AliOSSUtils aliOSSUtils;

    @PostMapping("/upload")
    public AjaxResult upload(MultipartFile file) throws IOException {
        log.info("上传源文件文件名字：{}",file.getOriginalFilename());
        //调用阿里云OSS工具类，将上传上来的文件存入阿里云
        String url = aliOSSUtils.upload(file);
        //将图片上传完成后的url返回，用于浏览器回显展示
        return AjaxResult.success(url);
    }

}

5. 打开前端页面，点击新增员工按钮，上传一张图片，观察是否回显。如果回显，则说明上传成功。

image

课堂作业

🚩 可以自行开通阿里云oss，也可以暂时使用笔记提供的阿里云账号信息，完成图片上传功能。

4️⃣ 1.4 员工管理-新增员工

新增员工

需求

image-20221216162622582

在新增用户时，我们需要保存用户的基本信息，并且还需要上传的员工的图片，目前我们先完成第一步操作，保存用户的基本信息。

查看原型文档和即可文档

如接口文档信息👇

接口文档

image

功能开发 👇 👇

新增员工的具体的流程

第一步

EmpController

image

image

从日志可知，需要设置密码和创建时间和修改时间，id会自增的

编写后，测试效果图

注意

新增员工的工作经历怎么办？

课堂作业

1. 🚩 独自完成新增员工的逻辑，并进行ApiFox测试，最后在进行前后联调