前后端分离项目知识汇总(阿里云Oss,EasyExcel,视频点播,SpringCloud,Redis,Nuxt)-2

本文涉及的产品
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
对象存储 OSS,20GB 3个月
云数据库 Tair(兼容Redis),内存型 2GB
简介: 前后端分离项目知识汇总(阿里云Oss,EasyExcel,视频点播,SpringCloud,Redis,Nuxt)

前后端分离项目知识汇总(阿里云Oss,EasyExcel,视频点播,SpringCloud,Redis,Nuxt)-1

https://developer.aliyun.com/article/1425266


EasyExcel

简介

alibaba/easyexcel: 快速、简洁、解决大文件内存溢出的java处理Excel工具 (github.com)


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


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


3.EasyExcel采用一行一行的解析模式,并将一行的解析结果以观察者的模式通知处理


(AnalysisEventListener)


写入测试


引入依赖

com.alibaba easyexcel 2.1.1

读取测试

1、创建实体类和excel对应


2、创建回调监听器

3、直接读


整合课程分类

实现思路

1、图解

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


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


前端找一个上传的组件


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


3、树状图显示数据功能


前端找一个树状图组件


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


表格数据导入数据库

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

1、添加依赖

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

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

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

4、创建回调监听器

5、自定义接口方法

实现类完成读取功能

6、控制类完成调用


7、swagger完成测试

树状图显示数据

树状图由element-ui获取

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

2、设计思路

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

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

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


3、返回集合对象

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

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

@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、控制类调用接口返回集合

5、Swagger测试

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

1、定义路由、跳转页面


2、定义API

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

3、添加上传组件

element-ui找


组件参数说明

template部分

数据部分

4、测试

树形数据与懒加载


整合课程发布

实现思路

1、图解

2、获取步骤条

3、代码思路

写三个vue组件,每个组件根据需要自定义内容


课程基本信息

实现效果

后端编码

提前生成课程相关表

通过代码生成器生成一键生成


1、创建vo封装每个步骤提交的数据

课程描述类id和课程类id是一样的,所以我们提前设置好

2、service

定义添加课程方法

3、controller

调用添加课程方法


前端编码

1、添加路由,做页面跳转

隐藏路由的目的是用来跳转步骤条

2、定义API


3、编写Vue页面

引入步骤条和表单

显示所有讲师列表

:label表示的是下拉列表的名字的名字

:value是此表单提交时名字对应的teacherid也会被提交


二级联动

这是重点!!!

bug提示:

其中this.courseInfo.subjectId要在每次一级分类的时候进行清空

整合文本编辑器


封面上传

数据回显

课程大纲

实现效果


后端编码

写后端接口处理数据

分别是章节相关的,小节相关的


查询所有章节和小节方法

再次理解


前端编码

添加,修改之前我们使用的是跳到一个具体的页面

这次我们使用弹框,在弹框内进行操作

这里我们使用element-ui中的Dialog

前端定义API


增加章节

编码思路:

  1. 点击添加,出现弹框
  2. 填写内容,提交表单
  3. 刷新页面,展示数据


修改章节

  1. 点击修改,出现弹框
  2. 回显数据,修改提交
  3. 刷新页面,展示数据

章节删除

获取id,按id删除


小节增加删除修改

同上,不在一一截取

课程最终发布

实现效果
后端编码

后端主要是做数据回显了,如下:

  1. 根据id查询课程发布信息
  2. 根据id发布课程


1、根据id查询课程发布信息

方式一:业务层组装多个表多次的查询结果

方式二:数据访问层进行关联查询

我们使用第二种方式实现

定义VO


dao

业务层


2、根据id发布课程

@PostMapping("publishCourse/{id}")
public R publishCourse(@PathVariable String id) {
    EduCourse eduCourse = new EduCourse();
    eduCourse.setId(id);
    eduCourse.setStatus("Normal");//设置课程发布状态
    courseService.updateById(eduCourse);
    return R.ok();
}
前端编码

1、定义API

2、写页面


3、显示课程发布的信息

和前面显示讲师类似,不详细说明


Ending…


前后端分离项目知识汇总(阿里云Oss,EasyExcel,视频点播,SpringCloud,Redis,Nuxt)-3

https://developer.aliyun.com/article/1425280?spm=a2c6h.13148508.setting.24.51724f0eKyy4D1

相关文章
|
6月前
|
存储 Java Maven
大事件后端项目31--------文件上传_阿里云OSS_入门程序
大事件后端项目31--------文件上传_阿里云OSS_入门程序
|
6月前
|
存储 运维 Java
大事件后端项目30------文件上传_阿里云OSS_准备工作
大事件后端项目30------文件上传_阿里云OSS_准备工作
|
6月前
|
存储 缓存 DataWorks
DataWorks操作报错合集之配置项目连通oss数据源 , 报The request signature we calculated does not match the signature you provided.如何解决
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
6月前
|
机器学习/深度学习 人工智能 分布式计算
人工智能平台PAI操作报错合集之在ODPS的xxx_dev项目空间调用easyrec训练,需要访问yyy项目空间的OSS,出现报错,是什么导致的
阿里云人工智能平台PAI (Platform for Artificial Intelligence) 是阿里云推出的一套全面、易用的机器学习和深度学习平台,旨在帮助企业、开发者和数据科学家快速构建、训练、部署和管理人工智能模型。在使用阿里云人工智能平台PAI进行操作时,可能会遇到各种类型的错误。以下列举了一些常见的报错情况及其可能的原因和解决方法。
|
6月前
|
对象存储
大事件后端项目32--------文件上传_阿里云OSS_程序集成
大事件后端项目32--------文件上传_阿里云OSS_程序集成
|
7月前
|
NoSQL Java 微服务
前后端分离项目知识汇总(阿里云Oss,EasyExcel,视频点播,SpringCloud,Redis,Nuxt)-3
前后端分离项目知识汇总(阿里云Oss,EasyExcel,视频点播,SpringCloud,Redis,Nuxt)
211 1
|
3月前
|
SpringCloudAlibaba API 开发者
新版-SpringCloud+SpringCloud Alibaba
新版-SpringCloud+SpringCloud Alibaba
|
4月前
|
资源调度 Java 调度
Spring Cloud Alibaba 集成分布式定时任务调度功能
定时任务在企业应用中至关重要,常用于异步数据处理、自动化运维等场景。在单体应用中,利用Java的`java.util.Timer`或Spring的`@Scheduled`即可轻松实现。然而,进入微服务架构后,任务可能因多节点并发执行而重复。Spring Cloud Alibaba为此发布了Scheduling模块,提供轻量级、高可用的分布式定时任务解决方案,支持防重复执行、分片运行等功能,并可通过`spring-cloud-starter-alibaba-schedulerx`快速集成。用户可选择基于阿里云SchedulerX托管服务或采用本地开源方案(如ShedLock)
134 1
|
2月前
|
JSON SpringCloudAlibaba Java
Springcloud Alibaba + jdk17+nacos 项目实践
本文基于 `Springcloud Alibaba + JDK17 + Nacos2.x` 介绍了一个微服务项目的搭建过程,包括项目依赖、配置文件、开发实践中的新特性(如文本块、NPE增强、模式匹配)以及常见的问题和解决方案。通过本文,读者可以了解如何高效地搭建和开发微服务项目,并解决一些常见的开发难题。项目代码已上传至 Gitee,欢迎交流学习。
162 1
Springcloud Alibaba + jdk17+nacos 项目实践
|
2月前
|
Dubbo Java 应用服务中间件
Dubbo学习圣经:从入门到精通 Dubbo3.0 + SpringCloud Alibaba 微服务基础框架
尼恩团队的15大技术圣经,旨在帮助开发者系统化、体系化地掌握核心技术,提升技术实力,从而在面试和工作中脱颖而出。本文介绍了如何使用Dubbo3.0与Spring Cloud Gateway进行整合,解决传统Dubbo架构缺乏HTTP入口的问题,实现高性能的微服务网关。

热门文章

最新文章