6-谷粒学苑

最新推荐文章于 2024-06-09 20:17:27 发布

不会打代码的程序猿

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量272

点赞数

分类专栏：项目文章标签： vue.js springboot 前后端分离项目 easyExcel

本文链接：https://blog.csdn.net/qq_44918461/article/details/124565281

版权

项目专栏收录该内容

8 篇文章 1 订阅

订阅专栏

课程管理

课程分类管理
表如何存储二级分类
一级分类 parentId 0
二级分类 parentId 1

id	title	parentId
1	前端	0（一级分类）
11	vue	1 (对应前端的id，二级分类)
100	组件	11 (对应vue的id，三级分类)

EasyExcel介绍

阿里巴巴开源Excel处理框架，简单、节省内存（一行一行读取）
本质是对poi的封装

EasyExcel进行写的操作

（1）引入easyExcel的依赖version-2.1.1 --edu中
注意：需要引入poi的依赖 version-3.17 注意版本对应

<dependencies>
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>easyexcel</artifactId>
        <version>2.1.1</version>
    </dependency>
</dependencies>

    <dependency>
        <groupId>org.apache.poi</groupId>
        <artifactId>poi</artifactId>
        <version>3.17</version>
    </dependency>

    <dependency>
        <groupId>org.apache.poi</groupId>
        <artifactId>poi-ooxml</artifactId>
        <version>3.17</version>
    </dependency>

（2）创建实体类对应Excel中的数据
设置Excel表头名称注解 @ExcelProperty(“XXXX”)

@Data
public class ExcelData {
    //设置excel表头名称,index设置列对应的属性
    @ExcelProperty(value = "学生编号",index = 0)
    private Integer sno;
    @ExcelProperty(value = "学生姓名",index = 1)
    private String sname;
}

（3）实现Excel的写操作
//设置写入文件夹地址和Excel文件名称
String filename = “F：\write.xlsx”；
//调用easyExcel里的方法实现写操作
Excel.write(文件路径名称，实体类的class).sheet(“XXX”).doWrite(List集合)
list集合是写入的数据

public static void main(String[] args) throws Exception {
        //实现excel写的操作
        // 设置写入文件夹地址和excel文件名
        String fileName = "D:\\java.xlsx";
        // 这里 需要指定写用哪个class去写，然后写到第一个sheet，名字为模板 然后文件流会自动关闭
        //write方法两个参数 ，第一个参数文件路径名称，第二个参数实体类class
        EasyExcel.write(fileName, ExcelData.class).sheet("第一个sheet").doWrite(data());
    }

    //循环设置要添加的数据，最终封装到list集合中
    private static List<ExcelData> data() {
        List<ExcelData> list = new ArrayList<ExcelData>();
        for (int i = 0; i < 10; i++) {
            ExcelData data = new ExcelData();
            data.setSno(i);
            data.setSname("lucy"+i);
            list.add(data);
        }
        return list;
    }

EasyExcel进行读的操作

（1）创建和Excel对应实体类，标记对应列关系index

@Data
public class ExcelData {

    //设置excel表头名称,index设置列对应的属性
    @ExcelProperty(value = "学生编号",index = 0)
    private Integer sno;
    @ExcelProperty(value = "学生姓名",index = 1)
    private String sname;
}

（2）创建监听进行Excel文件读取，监听类继承AnalysisEventListener<泛型>
一行一行读取Excel内容invoke（）
读取表头的方法invkeHeadMap()
读取完成之后的事情doAfterAllAnalysed()

package com.atguigu.excel;

import com.alibaba.excel.context.AnalysisContext;
import com.alibaba.excel.event.AnalysisEventListener;
import com.alibaba.excel.exception.ExcelDataConvertException;
import com.sun.scenario.effect.impl.sw.sse.SSEBlend_SRC_OUTPeer;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
 
//创建读取excel监听器
public class ExcelListener extends AnalysisEventListener<ExcelData> {
 
    //创建list集合封装最终的数据
    List<ExcelData> list = new ArrayList<ExcelData>();
    private final ArrayList<ExcelData> ExcelData = new ArrayList<ExcelData>();

    //一行一行去读取excle内容
    @Override
    public void invoke(ExcelData user, AnalysisContext analysisContext) {
       System.out.println("***"+user);
        list.add(user);
    }
 
    //读取excel表头信息
    @Override
    public void invokeHeadMap(Map<Integer, String> headMap, AnalysisContext context) {
        System.out.println("表头信息："+headMap);
    }
 
    //读取完成后执行
    @Override
    public void doAfterAllAnalysed(AnalysisContext analysisContext) {
    }
}

（3）最终方法的调用
EasyExcel.read(filename，实体类.class，监听器).sheet.doRead()

public static void main(String[] args) {
        String fileName = "D:\\java.xlsx";
        // 这里 需要指定读用哪个class去读，然后读取第一个sheet 文件流会自动关闭
        EasyExcel.read(fileName, ExcelData.class, new ExcelListener()).sheet().doRead();
    }

添加课程分类功能

（1）引入easyExcel依赖
（2）使用代码生成器，生成课程分类的代码
（3）创建实体类和Excel进行对应

@Data
public class SubjectData {

    //一级分类
    @ExcelProperty(index = 0)
    private String oneSubjectName;

    //二级分类
    @ExcelProperty(index = 1)
    private String twoSubjectName;
}

（4）监听器
注意：不能把监听器交给spring管理

package com.atguigu.eduservice.listener;

import com.alibaba.excel.context.AnalysisContext;
import com.alibaba.excel.event.AnalysisEventListener;
import com.atguigu.eduservice.entity.EduSubject;
import com.atguigu.eduservice.entity.excel.SubjectData;
import com.atguigu.eduservice.service.EduSubjectService;
import com.atguigu.servicebase.exceptionhandler.GuliException;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;

/**
 * @author XueYanhong
 * @description
 * @date 2022/5/2 9:25
 */
//没有交给spring管理，不能注入东西
public class SubjectExcelListener extends AnalysisEventListener<SubjectData> {

    //因为SubjectExcelListener不能交给spring管理，需要自己new，不能注入其他对象
    //不能实现数据库操作，解决：new 监听器的时候就手动注入,自己写有参构造
    public EduSubjectService subjectService;
    public SubjectExcelListener() {
    }
    public SubjectExcelListener(EduSubjectService subjectService) {
        this.subjectService = subjectService;
    }


    //读取Excel文件内容,一行一行读取
    @Override
    public void invoke(SubjectData subjectData, AnalysisContext analysisContext) {
        if (subjectData == null) { //文件数据为空,没有内容
            throw new GuliException(2001,"文件数据为空");
        }

        //一行一行读取,每次读取都有两个值,第一个值是一级分类,第二个值是二级分类
        //判断一级是否重复
        EduSubject existOneSubject = this.existOneSubject(subjectService, subjectData.getOneSubjectName());
        if (existOneSubject == null) {//没有相同一级分类，进行添加
            existOneSubject = new EduSubject();
            existOneSubject.setParentId("0");
            existOneSubject.setTitle(subjectData.getOneSubjectName());//一级分类名称
            subjectService.save(existOneSubject);
        }
        //获取一级分类的id值
        String pid = existOneSubject.getId();
        //判断二级分类
        //判断二级分类是否重复
        EduSubject existTwoSubject = this.existTwoSubject(subjectService, subjectData.getTwoSubjectName(), pid);
        if (existTwoSubject == null) {
            existTwoSubject = new EduSubject();
            existTwoSubject.setParentId(pid);
            existTwoSubject.setTitle(subjectData.getTwoSubjectName());//二级分类名称
            subjectService.save(existTwoSubject);
        }

    }

    //判断一级分类不能重复添加
    private EduSubject existOneSubject(EduSubjectService subjectService,String name) {
        QueryWrapper<EduSubject> wrapper = new QueryWrapper<>();
        wrapper.eq("title",name);
        wrapper.eq("parent_id","0");
        EduSubject oneSubject = subjectService.getOne(wrapper);
        return oneSubject;
    }
    //判断二级分类不能重复添加
    private EduSubject existTwoSubject(EduSubjectService subjectService,String name,String pid) {
        QueryWrapper<EduSubject> wrapper = new QueryWrapper<>();
        wrapper.eq("title",name);
        wrapper.eq("parent_id",pid);
        EduSubject twoSubject = subjectService.getOne(wrapper);
        return twoSubject;
    }

    @Override
    public void doAfterAllAnalysed(AnalysisContext analysisContext) {

    }
}

添加课程分类 ----前端

（1）添加课程分类管理路由

 {
    path: '/subject',
    component: Layout,
    redirect: '/subject/list',
    name: '课程分类管理',
    meta: { title: '课程分类管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'list',
        name: '课程分类列表',
        component: () => import('@/views/edu/subject/list'),
        meta: { title: '课程分类列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '添加课程分类',
        component: () => import('@/views/edu/subject/save'),
        meta: { title: '添加课程分类', icon: 'tree' }
      }
    ]
  },

（2）创建课程分类页面，修改路由对应的页面路径
（3）添加课程分类页面实现效果
添加上传组件实现
// ref 组件唯一标识 auto-upload 自动上传
// disabled 按钮是否可以点,不可点第二次
// limit 目前可以上传的文件数量
// accept=“application/vnd.ms-excel” ms-excel目前只能上传微软excel文件

表单提交，固定写法

submitUpload() {
      this.importBtnDisabled = true;
      this.loading = true;
      // 原生 js: document.getElementById("upload").submit()
      this.$refs.upload.submit();
    },

完整代码

<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="信息描述">
        <el-tag type="info" style="margin-right: 8px">excel模版说明</el-tag>
        <el-tag>
          <i class="el-icon-download" />
          <a :href="'/static/01.xlsx'">点击下载模版</a>
        </el-tag>
      </el-form-item>


      <el-form-item label="选择Excel">
        <el-upload
          ref="upload"
          :auto-upload="false"
          :on-success="fileUploadSuccess"
          :on-error="fileUploadError"
          :disabled="importBtnDisabled"
          :limit="1"
          :action="BASE_API + '/eduservice/subject/addSubject'"
          name="file"
          accept="application/vnd.ms-excel"
        >
          <el-button
            slot="trigger"
            size="small"
            type="primary"
          >选取文件</el-button>
          <el-button
            :loading="loading"
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="submitUpload"
          >上传到服务器</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'Save',
  data() {
    return {
      BASE_API: process.env.VUE_APP_BASE_API, // 接口API地址
      // OSS_PATH: process.env.OSS_PATH, // 阿里云OSS地址
      // fileUploadBtnText: '上传到服务器', // 按钮文字
      importBtnDisabled: false, // 按钮是否禁用,
      loading: false
    }
  },
  created() {
  },
  methods: {
    // 点击按钮上传文件到接口里面
    submitUpload() {
      this.importBtnDisabled = true
      this.loading = true
      // js: document.getElementById("upload").submit()
      this.$refs.upload.submit()
    },
    // 上传成功
    fileUploadSuccess() {
      // 提示信息
      this.loading = false
      this.$message({
        type: 'success',
        message: '添加课程分类成功!'
      })
      // 跳转课程分类列表
      // 路由跳转
      this.$router.push({ path: '/subject/list' })
    },
    // 上传失败
    fileUploadError() {
      // 提示信息
      this.loading = false
      this.$message({
        type: 'error',
        message: '添加课程分类失败!'
      })
    }
  }
}
</script>
<style scoped>
</style>

课程分类列表（树形）

后端

1.参考tree模块，整合前端
创建一个接口，根据分类要求的格式返回数据

[
	{
        id: 1,
        label: '一级分类名称1',
        children: [{
          id: 2,
          label: '二级分类1-1'
        }, {
          id: 3,
          label: '二级分类1-2'
        }]
      },{
        id: 2,
        label: '一级分类名称2',
        children: [{
          id: 4,
          label: '二级分类2-1'
        }, {
          id: 5,
          label: '二级分类2-2'
        }]
      }
 ]

2.返回这种数据格式
（1）针对返回数据创建对应的实体类
创建两个实体类，一级和二级分类
一级分类实体类

package com.atguigu.eduservice.entity.subject;

import lombok.Data;

@Data
public class OneSubject {
    private String id;
    private String title;
}

二级分类实体类

package com.atguigu.eduservice.entity.subject;

import lombok.Data;

@Data
public class TwoSubject {
    
    private String id;
    private String title;
}

（2）在两个实体类之间表示关系（一个一级分类有多个二级分类）

@Data
public class OneSubject {
    private String id;
    private String title;
    //一个一级分类中有多个二级分类
    private List<TwoSubject> children = new ArrayList<>();
}

controller层

    //课程分类列表(树形)
    @GetMapping("getAllSubject")
    public R getAllSubject() {
        //list集合中的泛型是一级分类
        List<OneSubject> list = subjectService.getAllSubject();
        return R.ok().data("list",list);
    }

（3）编写具体封装代码serviceImpl
service

    //课程分类列表(树形)
    List<OneSubject> getAllSubject();

serviceImpl

    //课程分类列表(树形)
    @Override
    public List<OneSubject> getAllSubject() {

        //1查询出所有的一级分类 parent_id = 0
        QueryWrapper<EduSubject> oneWrapper = new QueryWrapper<>();
        oneWrapper.eq("parent_id","0");
        //List<EduSubject> oneSubject = this.list(oneWrapper);
        //继承了servceImpl里面注入了baseMapper,可以通过baseMapper去查询数据库,也可以自身用this查
        List<EduSubject> oneSubjectList = baseMapper.selectList(oneWrapper);
        //2查询出所有的二级分类 parent_id != 0
        QueryWrapper<EduSubject> twoWrapper = new QueryWrapper<>();
        twoWrapper.ne("parent_id","0");
        List<EduSubject> twoSubjectList = baseMapper.selectList(twoWrapper);
        //创建list集合用于存储最终数据
        List<OneSubject> finalSubjectList = new ArrayList<>();
        //3封装一级分类
        //遍历查询一级分类，获取每一个一级对象的值，封装到要求的list集合
        //在一级分类中遍历循环二级分类
        for (int i = 0; i < oneSubjectList.size(); i++) { //遍历oneSubjectList集合
            //得到oneSubjectList中的每一个对象
            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);
            //创建list集合封装每一个一级分类的二级分类
            List<TwoSubject> twoFinalSubjectList = new ArrayList<>();
            //4封装二级分类
            //遍历查询二级分类，获取每一个二级对象的值，封装到一级分类的list集合
            for (EduSubject tSubject: twoSubjectList) {

                //把tSubject的值复制到twoSubject对象里面，然后放入twoFinalList里面
                //判断这个二级分类属于哪个一级分类,如果在这个一级分类,就加入进去
                if (tSubject.getParentId().equals(oneSubject.getId())){
                    TwoSubject twoSubject = new TwoSubject();
                    BeanUtils.copyProperties(tSubject,twoSubject);
                    twoFinalSubjectList.add(twoSubject);
                }
            }
            //把一级下面所有二级分类放到一级分类里面
            oneSubject.setChildren(twoFinalSubjectList);
        }
        return finalSubjectList;
    }

前端

1.路由router/index.js

  {
    path: '/subject',
    component: Layout,
    redirect: '/subject/list',
    name: '课程分类管理',
    meta: { title: '课程分类管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'list',
        name: '课程分类列表',
        component: () => import('@/views/edu/subject/list'),
        meta: { title: '课程分类列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '添加课程分类',
        component: () => import('@/views/edu/subject/save'),
        meta: { title: '添加课程分类', icon: 'tree' }
      }
    ]
  },

2.创建api/edu/subject

import request from '@/utils/request'

export default {
  // 课程分类列表
  getSubjectList() {
    return request({
      url: `/eduservice/subject/getAllSubject`,
      method: 'get'
    })
  }
}

2.views/subject/list.vue
注意：label要改成title，和后端保持一致label: 'title' // 数据分类名称的名字，其他地方也改成title

<template>
  <div class="app-container">
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />

    <el-tree
      ref="tree2"
      :data="data2"
      :props="defaultProps"
      :filter-node-method="filterNode"
      class="filter-tree"
      default-expand-all
    />

  </div>
</template>

<script>
import subject from '@/api/edu/subject'
export default {

  data() {
    return {
      filterText: '',
      data2: [], // 返回所有分类数据
      defaultProps: {
        children: 'children',
        label: 'title' // 数据分类名称的名字
      }
    }
  },
  created() {
    this.getAllSubjectList()
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },

  methods: {
    // 课程分类列表
    getAllSubjectList() {
      subject.getSubjectList()
        .then(response => {
          this.data2 = response.data.list
        })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.title.indexOf(value) !== -1
    }
  }
}
</script>

优化前端过滤功能

不区分大小写
增加toLowerCase() 变成小写比较

filterNode(value, data) {
      if (!value) return true
      return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
    }