day06项目【整合阿里云OSS和Excel导入分类】

1 整合阿里云OSS

01-阿里云存储OSS

一、对象存储OSS

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

1、开通“对象存储OSS”服务

（1）申请阿里云账号

（2）实名认证

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

（4）进入管理控制台

2、创建Bucket

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

3、上传默认头像

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

---

02-后端集成OSS

一、新建云存储微服务

1、在service模块下创建子模块service-oss

2、配置pom.xml

service-oss上级模块service已经引入service的公共依赖，所以service-oss模块只需引入阿里云oss相关依赖即可，

service父模块已经引入了service-base模块，所以Swagger相关默认已经引入

       

       

            com.aliyun.oss

            aliyun-sdk-oss

       

       

       

            joda-time

            joda-time

       

   

3、配置application.properties

#服务端口

server.port=8002

#服务名

spring.application.name=service-oss

#环境设置：dev、test、prod

spring.profiles.active=dev

#阿里云OSS

#不同的服务器，地址不同

aliyun.oss.file.endpoint=your endpoint

aliyun.oss.file.keyid=your accessKeyId

aliyun.oss.file.keysecret=your accessKeySecret

#bucket可以在控制台创建，也可以使用java代码创建

aliyun.oss.file.bucketname=guli-file

4、logback-spring.xml

5、创建启动类

创建OssApplication.java

package com.atguigu.oss;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

import org.springframework.context.annotation.ComponentScan;

@SpringBootApplication

@ComponentScan(basePackages = {"com.atguigu"})

public class OssApplication {

    public static void main(String[] args) {

        SpringApplication.run(OssApplication.class,args);

    }

}

6、启动项目

报错：

spring boot 会默认加载org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration这个类，

而DataSourceAutoConfiguration类使用了@Configuration注解向spring注入了dataSource bean，又因为项目（oss模块）中并没有关于dataSource相关的配置信息，所以当spring创建dataSource bean时因缺少相关的信息就会报错。

@SpringBootApplication(exclude=DataSourceAutoConfiguration.class)

即可成功：

二、实现文件上传

1、从配置文件读取常量

创建常量读取工具类：ConstantPropertiesUtil.java

使用@Value读取application.properties里的配置内容

用spring的 InitializingBean 的 afterPropertiesSet 来初始化配置信息，这个方法将在所有的属性被初始化后调用。

//当项目已启动，spring接口，spring加载之后，执行接口一个方法

@Component

public class ConstantPropertiesUtil implements InitializingBean {

    //读取配置文件内容

    @Value("${aliyun.oss.file.endpoint}")

    private String endpoint;

    @Value("${aliyun.oss.file.keyid}")

    private String keyId;

    @Value("${aliyun.oss.file.keysecret}")

    private String keySecret;

    @Value("${aliyun.oss.file.bucketname}")

    private String bucketName;

    //定义公开静态常量

    public static String END_POINT;

    public static String ACCESS_KEY_ID;

    public static String ACCESS_KEY_SECRET;

    public static String BUCKET_NAME;

    @Override

    public void afterPropertiesSet()throws Exception {

        END_POINT =endpoint;

        ACCESS_KEY_ID =keyId;

        ACCESS_KEY_SECRET =keySecret;

        BUCKET_NAME =bucketName;

    }

}

2、文件上传

创建Service接口：uploadFileAvatar.java

public interface OssService {

    String uploadFileAvatar(MultipartFile file);

}

实现：OssServiceImpl.java

参考SDK中的：Java->上传文件->简单上传->流式上传->上传文件流

@Service

public class OssServiceImpl implements OssService {

    //上传头像到oss

    @Override

    public String uploadFileAvatar(MultipartFile file) {

        // Endpoint以杭州为例，其它Region请按实际情况填写。

        String endpoint =ConstantPropertiesUtil.END_POINT;

        String accessKeyId =ConstantPropertiesUtil.ACCESS_KEY_ID;

        String accessKeySecret =ConstantPropertiesUtil.ACCESS_KEY_SECRET;

        String bucketName =ConstantPropertiesUtil.BUCKET_NAME;

        try {

            // 创建OSSClient实例。

            OSS ossClient =new OSSClientBuilder().build(endpoint,accessKeyId,accessKeySecret);

            // 上传文件流。

            InputStream inputStream = file.getInputStream();

            //获取文件名称

            String fileName = file.getOriginalFilename();

            //调用oss方法实现上传

            //第一个参数 Bucket名称

            //第二个参数 上传到oss文件路径和文件名称 如/aa/bb/1.jpg

            //第三个参数 上传文件输入流

            ossClient.putObject(bucketName,fileName,inputStream);

            // 关闭OSSClient。

            ossClient.shutdown();

           //把上传之后文件的路径返回

            //需要把上传到阿里云oss路径手动拼接出来

            //https://guli-file-1010.oss-cn-beijing.aliyuncs.com/11.jpg

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

            return url;

        }catch (IOException e) {

            e.printStackTrace();

            return null;

        }

    }

}

3、控制层

创建controller：FileUploadController.java

@Api(description="阿里云文件管理")

@RestController

@RequestMapping("/eduoss/fileoss")

@CrossOrigin

public class OssController {

    @Autowired

    private OssService ossService;

    //上传头像的方法

    @ApiOperation(value ="文件上传")

    @PostMapping

    public R uploadOssFile(@ApiParam(name ="file", value ="文件", required =true)

                                                         @RequestParam("file")MultipartFile file){

        //获取上传文件

        //返回上传到oss的路径

        String url =ossService.uploadFileAvatar(file);

        return R.ok().data("url",url);

    }

}

4、重启oss服务

5、Swagger中测试文件上传

解决上传文件覆盖问题：

//1 在文件名称里面添加随机唯一的值

String uuid =UUID.randomUUID().toString().replaceAll("-","");

//如qwadsfadeasd01.jpg

fileName =uuid+fileName;

//2 把文件按照日期进行分类

//2020/11/12/01.jpg

//获取当前日期

String datePath =new DateTime().toString("yyyy/MM/dd");

//拼接

//如2020/11/12/qwadsfadeasd01.jpg

fileName =datePath +"/" + fileName;

测试：

6、配置nginx反向代理

配置nginx实现请求转发的功能：

验证：

---

03-前端整合上传组件

一、前端整合图片上传组件

1、复制头像上传组件

从vue-element-admin复制组件：

vue-element-admin/src/components/ImageCropper

vue-element-admin/src/components/PanThumb

2、前端参考实现

src/views/components-demo/avatarUpload.vue

3、前端添加文件上传组件

src/views/edu/teacher/save.vue

template：

引入组件模块：

import ImageCropper from '@/components/ImageCropper'

import PanThumb from '@/components/PanThumb'

4、设置默认头像（也可不设置）

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

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

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

const defaultForm = {

  ......,

  avatar: process.env.OSS_PATH + '/avatar/default.jpg'

}

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

export default {

    components: { ImageCropper, PanThumb },

    data(){

        return {

            teacher:{

.........

            },

            //上传弹框组件是否显示

            imagecropperShow:false,

            imagecropperKey:0,//上传组件key值

            BASE_API: process.env.BASE_API, // 接口API地址

            saveBtnDisabled: false // 保存按钮是否禁用,

        }

    },

   ......,

    methods: {

        //其他函数

        ......,

        close(){//关闭上传弹框方法

            this.imagecropperShow = false;

            // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果

            this.imagecropperKey = this.imagecropperKey + 1

        },

        cropSuccess(data){//上传成功方法

            this.imagecropperShow = false;

            //上传之后接口返回图片地址

            this.teacher.avatar = data.url

            // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果

            this.imagecropperKey = this.imagecropperKey + 1

        },

二、测试文件上传

前后端联调

---

2 EasyExcel导入课程分类

01-EasyExcel读写Excel的基本使用

一、Excel导入导出的应用场景

1、数据导入：减轻录入工作量

2、数据导出：统计信息归档

3、数据传输：异构系统之间数据传输

二、EasyExcel简介

1、EasyExcel特点

    Java领域解析、生成Excel比较有名的框架有Apache poi、jxl等。但他们都存在一个严重的问题就是非常的耗内存。如果你的系统并发量不大的话可能还行，但是一旦并发上来后一定会OOM或者JVM频繁的full gc。

    EasyExcel是阿里巴巴开源的一个excel处理框架，以使用简单、节省内存著称。EasyExcel能大大减少占用内存的主要原因是在解析Excel时没有将文件数据一次性全部加载到内存中，而是从磁盘上一行行读取数据，逐个解析。

    EasyExcel采用一行一行的解析模式，并将一行的解析结果以观察者的模式通知处理（AnalysisEventListener）。

---

02-Excel写

一、创建项目，实现EasyExcel对Excel写操作

1、创建一个普通的maven项目

项目名：excel-easydemo

2、pom中引入xml相关依赖

       

            com.alibaba

            easyexcel

            2.1.1

       

   

3、创建实体类

设置表头和添加的数据字段

@Data

public class DemoData {

    //设置excel表头名称

    @ExcelProperty("学生编号")

    private Integer sno;

    @ExcelProperty("学生姓名")

    private String sname;

}

4 、实现写操作

TestEasyExcel.java

（1）创建方法循环设置要添加到Excel的数据

//循环设置要添加的数据，最终封装到list集合中

private static List getData(){

        List list = new ArrayList<>();

        for (int i=0;i<10;i++){

            DemoData data = new DemoData();

            data.setSno(i);

            data.setSname("lucy"+i);

            list.add(data);

        }

        return list;

    }

（2）实现最终的添加操作（写法一）

public static void main(String[] args) {

        //实现excel写的操作

        //1 设置写入文件夹地址和excel文件名称

        String filename = "F:\\write.xlsx";

        //2 调用easyexcel里面的方法实现写操作

        //write方法两个参数：第一个参数文件路径名称，第二个参数实体类class

        EasyExcel.write(filename,DemoData.class).sheet("学生列表").doWrite(getData());

    }

（3）实现最终的添加操作（写法二）

public static void main(String[] args) throws Exception {

        // 写法2，方法二需要手动关闭流

        //实现excel写的操作

        //1 设置写入文件夹地址和excel文件名称

        String filename = "F:\\write.xlsx";

        ExcelWriter excelWriter=EasyExcel.write(fileName,DemoData.class).build();

        WriteSheet writeSheet=EasyExcel.writerSheet("写入方法二").build();

        excelWriter.write(data(),writeSheet);

        /// 千万别忘记finish 会帮忙关闭流

        excelWriter.finish();

    }

---

03-Excel读

一、实现EasyExcel对Excel读操作

1、创建实体类

@Data

public class DemoData {

    //设置excel表头名称

    @ExcelProperty(value = "学生编号",index = 0)

    private Integer sno;

    @ExcelProperty(value = "学生姓名",index = 1)

    private String sname;

}

2、创建读取操作的监听器

public class ExcelListener extends AnalysisEventListener {

    //一行一行读取excel内容

    @Override

    public void invoke(DemoData demoData, AnalysisContext analysisContext) {

        System.out.println("******"+demoData);

    }

    //读取表头内容

    @Override

    public void invokeHeadMap(Map headMap, AnalysisContext context) {

        System.out.println("表头："+headMap);

    }

    //读取完成之后

    @Override

    public void doAfterAllAnalysed(AnalysisContext analysisContext) {

    }

}

3、调用实现最终的读取

public class TestEasyExcel {

    public static void main(String[] args) {

        //实现excel读操作

        // 写法1：

        String filename = "F:\\write.xlsx";

        // 这里 需要指定读用哪个class去读，然后读取第一个sheet 文件流会自动关闭

        EasyExcel.read(filename,DemoData.class,new ExcelListener()).sheet().doRead();

        // 写法2：

        InputStream in = new BufferedInputStream(new FileInputStream("F:\\01.xlsx"));

        ExcelReader excelReader = EasyExcel.read(in, DemoData.class, new ExcelListener()).build();

        ReadSheet readSheet = EasyExcel.readSheet(0).build();

        excelReader.read(readSheet);

        // 这里千万别忘记关闭，读的时候会创建临时文件，到时磁盘会崩的

        excelReader.finish();

    }

---

04-前端页面的实现

一、Excel模板（本案例中使用静态模板）

1、编辑Excel模板

2、将文件上传至阿里云OSS

二、配置路由

1、添加路由

{

    path: '/subject',

    component: Layout,

    redirect: '/subject/table',

    name: '课程分类管理',

    meta: { title: '课程分类管理', icon: 'example' },

    children: [

      {

        path: 'table',

        name: '课程分类列表',

        component: () => import('@/views/edu/subject/list'),

        meta: { title: '课程分类列表', icon: 'table' }

      },

      {

        path: 'tree',

        name: '添加课程分类',

        component: () => import('@/views/edu/subject/save'),

        meta: { title: '添加课程分类', icon: 'tree' }

      }

    ]

  },

2、添加vue组件

三、表单组件save.vue

1、js定义数据

二、后端实现

1、创建vo

//一级分类

@Data

public class OneSubject {

    private String id;

    private String title;

    //一个一级分类含有多个二级分类

    private Listchildren =new ArrayList<>();

}

//二级分类

@Data

public class TwoSubject {

    private String id;

    private String title;

}

2、创建controller

    //课程分类列表（树形）
    @ApiOperation(value = "嵌套数据列表")

    @GetMapping("getAllSubject")

    public R getAllSubject(){

        //list集合泛型是一级分类

        List list = subjectService.getAllOneTwoSubject();

        return R.ok().data("list",list);

    }

3、创建service

接口

    //课程分类列表（树形）

    List getAllOneTwoSubject();

实现Final

    @Override

    public List getAllOneTwoSubject() {

        //1 获取一级分类 parent_id=0

        QueryWrapper wrapperOne = new QueryWrapper<>();

        wrapperOne.eq("parent_id","0");

        List<EduSubject> oneSubjectList = baseMapper.selectList(wrapperOne);

        //2 获取二级分类

        QueryWrapper wrapperTwo = new QueryWrapper<>();

        wrapperTwo.ne("parent_id","0");

        List twoSubjectList = baseMapper.selectList(wrapperTwo);

        //创建list集合用于存储最终封装数据

        List<OneSubject> finalSubjectList = new ArrayList<>();

        //3 封装一级分类

        //查询出来的所有一级分类list集合遍历，得到每一个分类对象，获取每一个一级分类对象值

        //封装到要求的list集合里面 List finalSubjectList

        for (int i = 0; i < oneSubjectList.size(); i++) {

            //得到oneSubjectList每个eduSubject对象

            EduSubject eduSubject = oneSubjectList.get(i);

            //把eduSubject里面获取出来的值，放到oneSubject对象里面

            OneSubject oneSubject = new OneSubject();

//            oneSubject.setId(eduSubject.getId());

//            oneSubject.setTitle(eduSubject.getTitle());

            BeanUtils.copyProperties(eduSubject,oneSubject);

            //多个oneSubject放到finalSubjectList里面

            finalSubjectList.add(oneSubject);

            //4 封装二级分类

            //在一级分类循环遍历查询所有二级分类

            //创建list集合封装每一个一级分类的二级分类

            List twoFinalSubjectList = new ArrayList<>();

            for (int m = 0; m < twoSubjectList.size(); m++) {

                //获取每个二级分类

                EduSubject tSubject = twoSubjectList.get(m);

                //判断二级分类parentid和一级分类id是否一样

                if (tSubject.getParentId().equals(eduSubject.getId())){

                    //把tSubject值复制到twoSubject里面，放到twoFinalSubjectList里面

                    TwoSubject twoSubject = new TwoSubject();

                    BeanUtils.copyProperties(tSubject,twoSubject);

                    twoFinalSubjectList.add(twoSubject);

                }

            }

            //把一级下面所有的二级分类放到一级分类里面

            oneSubject.setChildren(twoFinalSubjectList);

        }

        return finalSubjectList;

    }