tlias智能学习辅助系统-学习笔记Part04

YangeIT大约 10 分钟

tlias智能学习辅助系统-学习笔记Part04

今日目标

员工管理
- aliyunOss文件上传 ✏️
- 新增员工 ✏️
修改部门 🔫
修改员工 🔫

1. 文件上传

文件上传

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

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

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

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

前端程序
服务端程序

前端程序主要提供给用户一个上传文件的交互端

在resources文件夹下的static文件夹，创建一个upload.html文件，将下列代码复制粘贴。

点击查看步骤图解open in new window 👈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传文件</title>
</head>
<body>
    <!--action表示路径  method表示请求方式 enctype表示编码类型  file表示文件  -->
    <form action="/upload" method="post" enctype="multipart/form-data">
        姓名: <input type="text" name="username"><br>
        年龄: <input type="text" name="age"><br>
        头像: <input type="file" name="image"><br>
        <input type="submit" value="提交">
    </form>

</body>
</html>

前端传输文件，需要满足3个条件必须满足

1. 表单必须有file域，用于选择要上传的文件
1. 表单提交方式必须为POST
1. 表单的编码类型enctype必须要设置为：multipart/form-data

普通默认的编码格式是不适合传输大型的二进制数据的，所以在文件上传时，表单的编码格式必须设置为multipart/form-data

服务端程序主要接收前端传过来的文件，存在本地或者云服务器

后端程序接受前端上传文件注意事项：

1. 首先在服务端定义这么一个controller，用来进行文件上传，然后在controller当中定义一个方法来处理/upload 请求。
1. 在定义的方法中接收提交过来的数据方法中的形参名和请求参数的名字保持一致不一致，使用@RequestParam注解修正）
- 用户名：String name
- 年龄： Integer age
- 文件： MultipartFile image
Spring中提供了一个API：MultipartFile，使用这个API就可以来接收到上传的文件

UploadController代码：

@Slf4j
@RestController
public class UploadController {

    @PostMapping("/upload")
    public Result upload( String username, Integer age, MultipartFile image)  {
        log.info("文件上传：{},{},{}",username,age,image.getOriginalFilename());
        return Result.success();
    }

}

阿里云OSS上传代码操作

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

点击查看使用阿里云OSS的原因open in new window👈

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

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

点击查看阿里云文档，开通阿里云OSS服务

导入阿里云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>

在utils工具类包中，导入AliOSSUtils工具类,在工具类中填写秘钥等信息点击查看详细图解open in new window


/**
 * 阿里云 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的路径返回
    }

}

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

aliyun:
  endpoint: https://oss-cn-hangzhou.aliyuncs.com
  accessKeyId: 见微信群
  accessKeySecret: 见微信群
  bucketName: java79oss

根据接口文档信息，修改UploadController代码： 👈 👈

@Slf4j
@RestController
public class UploadController {

    @Autowired
    private AliOSSUtils aliOSSUtils;

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

}

apifox软件测试结果：

课堂作业

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

2. 员工管理-新增员工

新增员工

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

点击查看项目原型效果open in new window

点我查看接口信息 👈

基本信息

请求路径：/emps
请求方式：POST
接口描述：该接口用于添加员工的信息

请求参数参数格式：application/json 参数说明：

名称	类型	是否必须	备注
username	string	必须	用户名
name	string	必须	姓名
gender	number	必须	性别, 说明: 1 男, 2 女
image	string	非必须	图像
deptId	number	非必须	部门id
entrydate	string	非必须	入职日期
job	number	非必须	职位, 说明: 1 班主任,2 讲师, 3 学工主管, 4 教研主管, 5 咨询师

请求数据样例：

{
  "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2022-09-03-07-37-38222.jpg",
  "username": "linpingzhi",
  "name": "林平之",
  "gender": 1,
  "job": 1,
  "entrydate": "2022-09-18",
  "deptId": 1
}

响应数据参数格式：application/json 参数说明：
参数名类型是否必须备注
code number 必须响应码，1 代表成功，0 代表失败
msg string 非必须提示信息
data object 非必须返回的数据
响应数据样例：

参数名	类型	是否必须	备注
code	number	必须	响应码，1 代表成功，0 代表失败
msg	string	非必须	提示信息
data	object	非必须	返回的数据

{
    "code":1,
    "msg":"success",
    "data":null
}

功能开发 👇 👇

EmpController

@Slf4j
@RestController
@RequestMapping("/emps")
public class EmpController {

    @Autowired
    private EmpService empService;

    //新增
    @PostMapping
    public Result save(@RequestBody Emp emp){
        //记录日志
        log.info("新增员工, emp:{}",emp);
        //调用业务层新增功能
        empService.save(emp);
        //响应
        return Result.success();
    }

    //省略...
}

EmpService

public interface EmpService {

    /**
     * 保存员工信息
     * @param emp
     */
    void save(Emp emp);
    
    //省略...
}

EmpServiceImpl

@Slf4j
@Service
public class EmpServiceImpl implements EmpService {
    @Autowired
    private EmpMapper empMapper;

    @Override
    public void save(Emp emp) {
        //补全数据
        emp.setCreateTime(LocalDateTime.now());
        emp.setUpdateTime(LocalDateTime.now());

        //思考：密码是否要设置？

        //调用添加方法
        empMapper.insert(emp);
    }

    //省略...
}

EmpMapper

@Mapper
public interface EmpMapper {
    //新增员工
    @Insert("自己写")
    void insert(Emp emp);

    //省略...
}

功能测试

代码开发完成后，重启服务器，打开Postman发送 POST 请求，请求路径：http://localhost:8080/empsopen in new window

前后端联调 :rocket

功能测试通过后，我们再进行通过打开浏览器，测试后端功能接口：

课堂作业

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

3. 部门修改讲解+实战

点我跳转

4. 员工管理-修改员工实战

修改员工

修改员工信息

修改员工需要操作的接口：

根据ID查询员工信息
保存修改的员工信息

点击我查看原型图open in new window

点我查看接口信息

修改员工实操之根据id获取员工信息

点我查看接口信息

EmpController

@Slf4j
@RestController
@RequestMapping("/emps")
public class EmpController {

    @Autowired
    private EmpService empService;

    //根据id查询
    @GetMapping("/{id}")
    public Result getById(@PathVariable Integer id){
        Emp emp = empService.getById(id);
        return Result.success(emp);
    }
    
    //省略...
}

EmpService

public interface EmpService {

    /**
     * 根据ID查询员工
     * @param id
     * @return
     */
    public Emp getById(Integer id);
    
    //省略...
}

EmpServiceImpl

@Slf4j
@Service
public class EmpServiceImpl implements EmpService {
    @Autowired
    private EmpMapper empMapper;

    @Override
    public Emp getById(Integer id) {
        return empMapper.findById(id);
    }
    
    //省略...
}

EmpMapper

@Mapper
public interface EmpMapper {

    //根据ID查询员工信息
    public Emp findById(Integer id);

    
    //省略...
}

修改员工实操之根据id修改员工

当用户修改完数据之后，点击保存按钮，就需要将数据提交到服务端，然后服务端需要将修改后的数据更新到数据库中。

点我查看接口信息

EmpController

EmpService

public interface EmpService {
    /**
     * 更新员工
     * @param emp
     */
    public void update(Emp emp);
   
    //省略...
}

EmpServiceImpl

@Slf4j
@Service
public class EmpServiceImpl implements EmpService {
    @Autowired
    private EmpMapper empMapper;

    @Override
    public void update(Emp emp) {
        emp.setUpdateTime(LocalDateTime.now()); //更新修改时间为当前时间
        
        empMapper.update(emp);
    }
    
    //省略...
}

EmpMapper.java

@Mapper
public interface EmpMapper {
    //修改员工信息
    public void update(Emp emp);
    
    //省略...
}

EmpMapper.xml

点击查看EmpMapper的图解步骤open in new window

<?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.itheima.mapper.EmpMapper">

    <!--更新员工信息-->
    <update id="update">
        update emp
        <set>
           <!-- todo 此处填写代码 -->
        </set>
        where id = #{id}
    </update>

    <!-- 省略... -->
   
</mapper>

apifox测试

前后端联调测试

tlias智能学习辅助系统-学习笔记Part04

# tlias智能学习辅助系统-学习笔记Part04

# 1. 文件上传

# 2. 员工管理-新增员工

# 功能测试

# 前后端联调 :rocket

# 3. 部门修改 讲解+实战

# 4. 员工管理-修改员工 实战

# apifox测试

# 前后端联调测试

tlias智能学习辅助系统-学习笔记Part04

1. 文件上传

2. 员工管理-新增员工

功能测试

前后端联调 :rocket

3. 部门修改讲解+实战

4. 员工管理-修改员工实战

apifox测试

前后端联调测试