前后端分离项目知识汇总(整合课程分类)

简介: 前后端分离项目知识汇总(整合课程分类)

整合课程分类


实现思路


1、图解

树形控件考到前端页面,按需求更改

image.png

2、实现Excel表格数据导入数据库功能

前端找一个上传的组件

后端使用前面学的easyexcel功能来实现

3、树状图显示数据功能

前端找一个树状图组件

后端返回上传的表格数据课程分类集合给前端,传递给组件自动遍历


表格数据导入数据库


这个功能用前面学的easyExcel来实现

1、添加依赖

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>easyexcel</artifactId>
    <version>2.1.6</version>
</dependency>

2、创建excel对应实体类对象

image.png

3、通过代码生成器生成课程表代码

image.png

==4、创建回调监听器==

image.png

image.png

5、自定义接口方法

image.png

==实现类完成读取功能==

image.png

6、控制类完成调用

image.png

7、swagger完成测试

image.png

image.png


树状图显示数据


树状图由element-ui获取

1、树状图前端代码结构说明

image.png

==2、设计思路==

给el-tree返回一个集合对象就可以实现遍历

这个集合对象格式是,{一级分类对象,二级分类对象数组[],一级分类对象,二级分类对象数组[].......}

对应到实体类中就是这个形式

image.png

==3、返回集合对象==

在数据库中查询通过表格上传的数据,返回为集合对象

详细的注释通过图片的形式展现出来了,仔细观察理解即可

image.png

源码也放下来,供大家理解

@Service
public class EduSubjectServiceImpl extends ServiceImpl<EduSubjectMapper, EduSubject> implements EduSubjectService {
    //添加课程分类
    @Override
    public void saveSubject(MultipartFile file, EduSubjectService subjectService) {
        try {
            //文件输入流
            InputStream in = file.getInputStream();
            //调用方法进行读取
            EasyExcel.read(in, SubjectData.class, new SubjectExcelListener(subjectService)).sheet().doRead();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    @Override
    public List<OneSubject> getAllOneTwoSubject() {
        //查询所有一级分类 parentid=0
        QueryWrapper<EduSubject> wrapperOne = new QueryWrapper<>();
        wrapperOne.eq("parent_id", "0");
        List<EduSubject> oneSubjectList = baseMapper.selectList(wrapperOne);
//        this.list()也可以通过这种方式调用查询。
        //查询所有二级分类 parentid!=0
        QueryWrapper<EduSubject> wrapperTwo = new QueryWrapper<>();
        wrapperOne.ne("parent_id", "0");
        List<EduSubject> twoSubjectList = baseMapper.selectList(wrapperTwo);
        //创建list集合,用于存放最终封装的数据
        List<OneSubject> finalSubjectList = new ArrayList<>();
        //封装一级分类
        //查询出来所有的一级分类list集合遍历,得到每一级分类对象,获得每个一级分类对象值
        //封装到要求的list集合里面
        for (int i = 0; i < oneSubjectList.size(); i++) {
            EduSubject eduSubject = oneSubjectList.get(i);
            OneSubject oneSubject = new OneSubject();
//            oneSubject.setId(eduSubject.getId());
//            oneSubject.setTitle(eduSubject.getTitle());
            //把eduSubject值复制到对应的oneSubject对象里面,两个对象里面的属性相同对应的的自动赋值
            BeanUtils.copyProperties(eduSubject, oneSubject);
            //在一级分类循环遍历查询所有的二级分类
            //创建list集合封装每个一级分类的二级分类
            List<TwoSubject> twoFinalSubjectList = new ArrayList<>();
            //遍历二级分类list集合
            for (int j = 0; j < twoSubjectList.size(); j++) {
                EduSubject tSubject = twoSubjectList.get(j);
                //如果二级分类的parentid和一级分类的id一样,就把它加入到一级分类
                if (tSubject.getParentId().equals(eduSubject.getId())) {
                    TwoSubject twoSubject = new TwoSubject();
                    BeanUtils.copyProperties(tSubject, twoSubject);
                    twoFinalSubjectList.add(twoSubject);
                }
            }
            //把一级下面所有的二级分类放到一级分类里面
            oneSubject.setChildren(twoFinalSubjectList);
            finalSubjectList.add(oneSubject);
        }
        return finalSubjectList;
    }
}

4、控制类调用接口返回集合

image.png

5、Swagger测试

image.png

==加黑的小标题就是前后端整合的过程==

1、定义路由、跳转页面

image.png

2、定义API

==定义的API就是后端写好的接口==

image.png

3、添加上传组件

element-ui找

image.png

组件参数说明

template部分

image.png

image.png

数据部分

image.png

4、测试

image.png

image.png


树形数据与懒加载


image.png



相关文章
|
5月前
|
SQL 监控 关系型数据库
一键开启百倍加速!RDS DuckDB 黑科技让SQL查询速度最高提升200倍
RDS MySQL DuckDB分析实例结合事务处理与实时分析能力,显著提升SQL查询性能,最高可达200倍,兼容MySQL语法,无需额外学习成本。
|
9月前
|
Ubuntu Linux Windows
IP地址查看方法
本指南介绍了在不同操作系统中查看设备IP地址的方法。在Windows系统中,可通过命令提示符(输入`ipconfig`)或设置界面查找IPv4地址;Linux系统中,使用终端命令`ifconfig`或`ip addr show`获取网络接口的IP;Mac系统则可在“系统偏好设置”中的“网络”查看,或通过终端执行相同命令获取。这些方法简单易行,适用于各种常见场景。
3963 11
|
人工智能
2025年人工智能与可持续发展国际学术会议 2025 International Conference on Artificial Intelligence and Sustainable Development (ICAISD 2025)
2025年人工智能与可持续发展国际学术会议 2025 International Conference on Artificial Intelligence and Sustainable Development (ICAISD 2025)
770 7
|
12月前
|
机器学习/深度学习 存储 编解码
RT-DETR改进策略【Neck】| ArXiv 2023,基于U - Net v2中的的高效特征融合模块:SDI(Semantics and Detail Infusion)
RT-DETR改进策略【Neck】| ArXiv 2023,基于U - Net v2中的的高效特征融合模块:SDI(Semantics and Detail Infusion)
401 16
RT-DETR改进策略【Neck】| ArXiv 2023,基于U - Net v2中的的高效特征融合模块:SDI(Semantics and Detail Infusion)
|
存储 前端开发 Java
【JavaEE进阶】 图书管理系统开发日记——柒
【JavaEE进阶】 图书管理系统开发日记——柒
|
12月前
|
存储 监控 数据可视化
点晴PMS集装箱港口码头让码头作业更加高效
近几年,随着各地城市经济社会发展以及内河港口基础设施的不断完善,码头业务呈现快速发展之势。越来越多的港口码头为了能提高码头作业的效率,都纷纷引入港口码头管理系统。
152 8
|
数据采集 算法 物联网
【算法精讲系列】阿里云百炼SFT微调实践分享
本内容为您提供了百炼平台SFT微调的实践案例,帮助您方便并快速借助模型微调定制化您自己的专属模型。
3899 14
|
关系型数据库 MySQL 数据库
【MySQL】:超详细MySQL完整安装和配置教程
【MySQL】:超详细MySQL完整安装和配置教程
43934 5
|
运维 安全 网络安全
网络安全规划实践
网络安全规划实践
530 0
|
Java Unix Linux
Fastqc用腻了,来试下这个R包吧
平时拿到数据后首先要进行质控环节,其中FastaQC软件的使用最为广泛,它可以为每一个样品生成一个html报告和一个‘zip’ 文件,zip解压之后生成fastqc_data.txt和summary.txt的文件,里面包含了测序样品的质量信息,但是如果有几十个甚至上百个数据时候,我们总不可能一一的打开每个html文件查看,因此Multiqc软件成为了解决这一问题的首选方案,可以基于结果zip文件进行多样品的整合分析,信息生成在一张报告上。然而哪里有问题,哪里就有R包,对于R语言爱好者,这里再提供一种可替代的方法--fastqcr包,好处就是不管有没有linux环境时候,都可以快速对数据进行质检
571 0