第二次课-讲师功能-对象存储-easyExcel

前端拦截器

注意这个请求拦截器和响应拦截器，尤其是响应拦截器

后端数据校验

依赖

 <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
        </dependency>

实体类加注解

@Data
public class TeacherVo {

    @ApiModelProperty("讲师名字")
    @NotBlank(message = "讲师姓名不能为空")
    private String name;
    /**
     * 讲师简介
     */
    @ApiModelProperty("讲师简介")
    @NotBlank(message = "讲师简介不能为空")
    private String intro;
    /**
     * 讲师资历,一句话说明讲师
     */
    @ApiModelProperty("讲师资历,一句话说明讲师")
    @NotBlank(message = "讲师资历不能为空")
    private String career;
    /**
     * 头衔 1高级讲师 2首席讲师
     */
    @ApiModelProperty("头衔1高级讲师 2首席讲师")
    @NotNull(message = "讲师头衔不能为空")
    private Integer level;
    /**
     * 讲师头像
     */
    @ApiModelProperty("讲师头像")
    @NotBlank(message = "讲师头像不能为空")
    private String avatar;
    /**
     * 排序
     */
    @ApiModelProperty("排序")
    @NotNull(message = "排序不能为空")
    private Integer sort;

}

controller部分

 @PostMapping
    @ApiOperation(value = "讲师保存接口")
    public ResultDto save(@RequestBody @Validated TeacherVo teacherVo){

异常处理

 //后端数据校验的异常
@ExceptionHandler(MethodArgumentNotValidException.class)
@ResponseBody //为了返回数据
public ResultDto error(MethodArgumentNotValidException e) {
    StringBuffer errorMsg = new StringBuffer();
    BindingResult bindingResult = e.getBindingResult();
    if(bindingResult.hasErrors()){
        List<FieldError> fieldErrors = bindingResult.getFieldErrors();
        for(FieldError fieldError : fieldErrors){
            errorMsg.append(fieldError.getDefaultMessage()+",");
        }
    }
    //去掉最后一个逗号
    String substring = errorMsg.substring(0, errorMsg.lastIndexOf(","));
    return ResultDto.error("系统异常:"+substring);
}

分页带条件查询

 @Override
    public Page<EduTeacher> getPage(Integer pageNum, SearchTeacherVo searchTeacherVo) {

        Page<EduTeacher> page= new Page<>(pageNum, SysConstant.servicePageSize);
        QueryWrapper<EduTeacher> queryWrapper= new QueryWrapper();
        queryWrapper.orderByDesc("edu_modified");

        if (!ObjectUtils.isEmpty(searchTeacherVo.getName())) {
            queryWrapper.like("name",searchTeacherVo.getName());
        }
        if (!ObjectUtils.isEmpty(searchTeacherVo.getLevel())) {
            queryWrapper.eq("level",searchTeacherVo.getLevel());
        }
        if (!ObjectUtils.isEmpty(searchTeacherVo.getStartDate())) {
            queryWrapper.ge("edu_create",searchTeacherVo.getStartDate());
        }
        if (!ObjectUtils.isEmpty(searchTeacherVo.getEndDate())) {
            queryWrapper.le("edu_create",searchTeacherVo.getEndDate());
        }
        Page<EduTeacher> iPage = baseMapper.selectPage(page, queryWrapper);
        return iPage;
    }

eslint关闭

先把eslint关闭，代码规范校验关闭一下，不然控制台总是打印一堆的警告（本身我们是后端工程师，写的前端代码有点不规范的地方就不必较真了）

找到webpack.base.conf.js文件，并且将下满这行代码注释掉。

...(config.dev.useEslint ? [createLintingRule()] : []),

对象存储

为了解决海量数据存储与弹性扩容，项目中我们采用云存储的解决方案- 阿里云OSS。

阿里云开通oss服务

（1）申请阿里云账号

（2）实名认证

（3）开通“对象存储OSS”服务

（4）进入管理控制台

创建Bucket

选择：标准存储、公共读、不开通

上传默认头像

创建文件夹avatar，上传默认的用户头像

拿到AccessKey ID 和 AccessKey Secret

AccessKey ID 和 AccessKey Secret 是您访问阿里云 API 的密钥

LTAI5t8zQiNWxjYkosUxT7kH
h0IwkOTdaoiYJbaipl3J7Yne3TX6Zf

快速入门

• 依赖

<dependency>
  <groupId>com.aliyun.oss</groupId>
  <artifactId>aliyun-sdk-oss</artifactId>
  <version>3.15.1</version>
</dependency>

import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.OSSException;
import com.aliyun.oss.model.PutObjectRequest;
import java.io.File;

public class Demo {

    public static void main(String[] args) throws Exception {
        // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
        String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = "yourAccessKeyId";
        String accessKeySecret = "yourAccessKeySecret";
        // 填写Bucket名称，例如examplebucket。
        String bucketName = "examplebucket";
        // 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。
        String objectName = "exampledir/exampleobject.txt";
        // 填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。
        // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
        String filePath= "D:\\localpath\\examplefile.txt";

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        try {
            // 创建PutObjectRequest对象。            
            PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, objectName, new File(filePath));
            // 如果需要上传时设置存储类型和访问权限，请参考以下示例代码。
            // ObjectMetadata metadata = new ObjectMetadata();
            // metadata.setHeader(OSSHeaders.OSS_STORAGE_CLASS, StorageClass.Standard.toString());
            // metadata.setObjectAcl(CannedAccessControlList.Private);
            // putObjectRequest.setMetadata(metadata);

            // 上传文件。
            ossClient.putObject(putObjectRequest);
        } catch (OSSException oe) {
            System.out.println("Caught an OSSException, which means your request made it to OSS, "
                    + "but was rejected with an error response for some reason.");
            System.out.println("Error Message:" + oe.getErrorMessage());
            System.out.println("Error Code:" + oe.getErrorCode());
            System.out.println("Request ID:" + oe.getRequestId());
            System.out.println("Host ID:" + oe.getHostId());
        } catch (ClientException ce) {
            System.out.println("Caught an ClientException, which means the client encountered "
                    + "a serious internal problem while trying to communicate with OSS, "
                    + "such as not being able to access the network.");
            System.out.println("Error Message:" + ce.getMessage());
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }
}            

注意：endpoint怎么写

• 上传成功后拿到文件的成功路径

 String url = "https://"+bucketName+"."+endpoint+"/"+fileName;

剩下就是改造成controller

上传头像组件

从vue-element-admin中复制

主要的步骤如下：

复制头像上传组件

从vue-element-admin复制组件：

vue-element-admin/src/components/ImageCropper

vue-element-admin/src/components/PanThumb

前端参考实现

src/views/components-demo/avatarUpload.vue

前端添加文件上传组件

<!-- 讲师头像 -->
<el-form-item label="讲师头像">
    <!-- 头衔缩略图 -->
    <pan-thumb :image="teacher.avatar"/>
    <!-- 文件上传按钮 -->
    <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
    </el-button>
    <!--
v-show：是否显示上传组件
:key：类似于id，如果一个页面多个图片上传控件，可以做区分
:url：后台上传的url地址
@close：关闭上传组件
@crop-upload-success：上传成功后的回调 -->
    <image-cropper
                   v-show="imagecropperShow"
                   :width="300"
                   :height="300"
                   :key="imagecropperKey"
                   :url="BASE_API+'/admin/oss/file/upload'"
                   field="file"
                   @close="close"
                   @crop-upload-success="cropSuccess"/>
</el-form-item>
引入组件模块
 
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

设置默认头像

config/dev.env.js中添加阿里云oss bucket地址

OSS_PATH: '"https://jf3q.oss-cn-beijing.aliyuncs.com"'

组件中初始化头像默认地址

const defaultForm = {
  ......,
  avatar: process.env.OSS_PATH + '/avatar/default.jpg'
}

js脚本实现上传和图片回显

export default {
  components: { ImageCropper, PanThumb },
  data() {
    return {
      //其它数据模型
      ......,
        
      BASE_API: process.env.BASE_API, // 接口API地址
      imagecropperShow: false, // 是否显示上传组件
      imagecropperKey: 0 // 上传组件id
    }
  },
    
  ......,
    
  methods: {
    //其他函数
    ......,
    // 上传成功后的回调函数
    cropSuccess(data) {
      console.log(data)
      this.imagecropperShow = false
      this.teacher.avatar = data.url
      // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    },
    // 关闭上传组件
    close() {
      this.imagecropperShow = false
      // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    }
  }
}

easyExcel

直接看官网自学

https://easyexcel.opensource.alibaba.com/