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

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

整合课程分类


实现思路

1、图解


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


4655b3139891f51ef1f3f7a12c3d3686_0691e4ec9119906bb2830fd34ef90703.png


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


前端找一个上传的组件


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


3、树状图显示数据功能


前端找一个树状图组件


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


表格数据导入数据库

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


1、添加依赖


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

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


8692da063d4283dbe74865f7a154caab_707b194d8cdfe8801a9e5f55e6516d72.png


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


4a9b37865ac1d9ec98b9521f26dac8f8_d57e24ef2b79d99ab68fbac501a99b8e.png


4、创建回调监听器


26130a9750d411c3fbc2f84e5a68f107_4ee2ee954670f6bf6f0ee704b428f891.png

9c87fff700a241a9d45c3e6ca93a020a_f99262218c5b7ed7a6c9dfbd2f86ae0f.png


5、自定义接口方法


cc42c0c85185a994eb2774c2f1fe5376_3950d95fba1955701715b6e7daa357fb.png


实现类完成读取功能


1851f5c72fa9524672e34cca859a2666_dbba6f07b49348870474826c6ddf15a8.png


6、控制类完成调用


fd57ebd481f9b9457f56c9b419e68335_6af538ad316d13f662413e5ad2b1f81d.png


7、swagger完成测试


51332dce1020ba336887840e034a50c8_4bb969f97f984485deeb704d90db9c5f.png


7a4958d09419b5af52a4a837933c716e_a4446c6c5f726c72ecd0388ed5a26733.png


树状图显示数据

树状图由element-ui获取


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


7c20c22448de7902de404250a2ed31bf_e7983dfdfe7d0198c683100f2ce3af37.png


2、设计思路


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


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


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


7555371afdbdb8015b58db3be2fb7836_14c21a5d4e5c2b96427c332e46fa06a6.png


3、返回集合对象


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


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


9a57c05bb9122cd8268d662960682d85_117a77acd743343eb3e1d8cdda480213.png


5、Swagger测试


a0b30c6c5717be9a85f6293e2d38011d_12feaf3c7d5ee2821ba84890ca68f4ba.png


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


1、定义路由、跳转页面


6329e08c8712527293f6aceeb65f2433_8840f9cabb2cb247dfc2905aa5b7fcf5.png


2、定义API


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


a027c0776246bcfff5c3d359b1c318a7_36d305ef1e6a861c4dd33009d81ff90d.png


3、添加上传组件


element-ui找


21b9dd3f2e2fcbe4f6143d61ddd6164a_776482f667d4fdaf564b932507d05220.png


组件参数说明


template部分

c4fec38758f01c17df6d281c9691bc34_6203980ead7c5546a985f89e5be70187.png

9b098528a843f212bdfee855e89b4ea4_3262d1e4f43075413bf014c2a250c478.png


数据部分


45c861ea63fd3c2fed89dfe40118f307_9549c19d81b756c9202ac899ff1d9f59.png


4、测试


2f9915d83a6a331a9c95b6f842d45eb1_558a9c9f3f134c9c7145a84e62dc948d.png


2dcb38e9e3664c77e0cd372e9fa14e27_04b272e7937cf396ce2f88af83c3628b.png


树形数据与懒加载

0786a526dbf0738c78705445e438f90c_1eb2256748fa634608403e3934422e17.png


整合课程发布


实现思路

1、图解


ce4ff2e661ada385dd6c441d9a20f8dc_5ce02a7861822075cf38168f22ac728f.png


2、获取步骤条


48b13a13f8c54eb364e3d89c3cba0010_657725e0fb10ef60cef5ee5fc7c1b09a.png


3、代码思路


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


课程基本信息

实现效果

bf0df4f0f7de1837c04747d11a214c44_4b983eb5e4c7e57be2723ba94ac130b4.png


后端编码

提前生成课程相关表


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


935ea3b535b4f9cea6898ce9e54c5298_92dc5e225fbff3f8805c8906f784b903.png


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


9fc57b9afce51728e03a76dfdf4dba36_ca9a21f928f64720849b228c1cc0ff27.png


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


856d113b057c8ef15a96b39489ac8f50_94bc8f4fba2cc528f5e409e47aa39e20.png


2、service


定义添加课程方法


67050b9f22fb5bbb872fda707ae8564d_9c0a07d73bf12d1e89af3de6b1de8e8a.png


3、controller


调用添加课程方法


fa71e2d6203fc9b719510f390888dbba_d739bf3d6b3bc12f5b378af06065df0d.png


前端编码

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


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


226d62934147b08c5731baab2da218bf_f8d2e8cef061f54dea6344c5d462184a.png


2、定义API


c1eb57f3b4034e71059e211b78212793_698e9da539ec15180960b32f683b4d40.png


3、编写Vue页面


引入步骤条和表单


1f6176a3f90f227a451c4d41cd92caaa_180c8e591ec715a86b5312b35aba80ca.png


显示所有讲师列表


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


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


b5ef62d73c9599c93cd6a5fba0b76950_cba61767b655920fb6b207c325c6f023.png


6e8f58119824a074909274608b7d12e5_753e603c5a4067486aeade5e734e1898.png


二级联动


这是重点!!!


f882be93a7b13843fa5853185742cd1e_fb4e0d2f9f01689bb1e0d3772a448172.png


bug提示:


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


整合文本编辑器


feac6feb63167fd6fade5bcb71ec31d5_0e6bad132ca9d5a92a67ceeec6ba53ad.png


封面上传


3e43b11340999736230e6d9f4c9c6723_acc9b2f312c8897d0815b7ef9cf1361e.png


数据回显

45cc5d3f5a7ac3bd5a440cdc5df60565_37459445c102797696f233b7cbc79b92.png


06d8223a730869066ebb55dadc98ae44_e0f1c4c2becb008225e4f4a8b126a07c.png


课程大纲

实现效果

2f4fa0a4a0b4d36014898be7479a0543_21be3027b8b580316d7ddea25f79fd08.png


后端编码

写后端接口处理数据


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


3ded8401637f617494fb752608c1268d_a7eb1a65b0f627d87a60a8822c6ee678.png


3ea7375966d26c03bb7a5905e47c0e5d_4394ff2ccf2a1825f8b757d2abdbc195.png


查询所有章节和小节方法


再次理解


d72be77f4fcc364ee506d27ba03c9035_002ee8cfa411b2467ae7941a42286284.png


前端编码

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


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


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


f6419c29c92a1f8cde41a0b0f0a7b93b_3c033127ffb1f2bfa46aabf2fb4b3c9b.png


前端定义API


bdd2a1c66f805c43ac1cff2022e7bd56_02ba4880ccf236ddff189effccc6aaca.png


增加章节


编码思路:


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

2ff19ff7c247156a1b479072597efc59_b44f24831c33906a96b03c9862cf32c8.png


修改章节


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

733ab79900236d3a4574c7fdd64b225a_ab8e70aba66a9ed1338d389d917f8f8f.png


章节删除


获取id,按id删除


b0544a6c7d507d5693c4f90e4f2d12ea_b200f4fe6542df2810941980cf05bcba.png


小节增加删除修改


同上,不在一一截取

9949d33cf9ad21e5df4eaf7f8bf2df52_649cb54d47bf3f42a664ffd437c80157.png

1b9a13273b37e5b2cb525947d682a14b_202854820896cd99bdb7c7c628ddd916.png


课程最终发布


实现效果

https://ucc.alicdn.com/images/user-upload-01/img_convert/1225ccbec1084854a47aad16b32ae07c.png


后端编码

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


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


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


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


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


我们使用第二种方式实现


定义VO


04beca85cc58afe72ba20a877fb906a5_def75d3070aaa1f9e3d54f678903b82a.png


dao


6a4bc420582e593f00a356cc64a46eda_8a826a6fe8757288e6b17f2367195c1f.png


a1051d1dca1c4faf4db9e34da421a5a2_f26c06cf10a25759430c89d50ada44e9.png


业务层


ce832a676f309a3d8f79847e07439390_3961abfbe12a3399ee94db088be21bc6.png


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


e8aeb624398b2f3ae228265571a31f85_e308630689d9e87ef878048f53e7f720.png


2、写页面


3edde32206a7b15923c281fd7fb195de_28b857719d0bb75a0cfc69437b9bb512.png


59292a9d3755f37ff4160a4b1495e6a5_850773e5ed865dd23a2c9c624c6798e3.png


d2a2e1861ecc412fcb17901109f8db7f_852979aeb249a6610cdc1ac77bcdecba.png


3、显示课程发布的信息


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


2827bc2bec5e975fa308833fc012e65f_4c3a91bfe66ee923dc9c72a6eec15d3a.png


Ending…

相关实践学习
基于Redis实现在线游戏积分排行榜
本场景将介绍如何基于Redis数据库实现在线游戏中的游戏玩家积分排行榜功能。
云数据库 Redis 版使用教程
云数据库Redis版是兼容Redis协议标准的、提供持久化的内存数据库服务,基于高可靠双机热备架构及可无缝扩展的集群架构,满足高读写性能场景及容量需弹性变配的业务需求。 产品详情:https://www.aliyun.com/product/kvstore &nbsp; &nbsp; ------------------------------------------------------------------------- 阿里云数据库体验:数据库上云实战 开发者云会免费提供一台带自建MySQL的源数据库&nbsp;ECS 实例和一台目标数据库&nbsp;RDS实例。跟着指引,您可以一步步实现将ECS自建数据库迁移到目标数据库RDS。 点击下方链接,领取免费ECS&amp;RDS资源,30分钟完成数据库上云实战!https://developer.aliyun.com/adc/scenario/51eefbd1894e42f6bb9acacadd3f9121?spm=a2c6h.13788135.J_3257954370.9.4ba85f24utseFl
相关文章
|
11天前
|
NoSQL Java API
springboot项目Redis统计在线用户
通过本文的介绍,您可以在Spring Boot项目中使用Redis实现在线用户统计。通过合理配置Redis和实现用户登录、注销及统计逻辑,您可以高效地管理在线用户。希望本文的详细解释和代码示例能帮助您在实际项目中成功应用这一技术。
22 3
|
4月前
|
机器学习/深度学习 人工智能 专有云
人工智能平台PAI使用问题之怎么将DLC的数据写入到另一个阿里云主账号的OSS中
阿里云人工智能平台PAI是一个功能强大、易于使用的AI开发平台,旨在降低AI开发门槛,加速创新,助力企业和开发者高效构建、部署和管理人工智能应用。其中包含了一系列相互协同的产品与服务,共同构成一个完整的人工智能开发与应用生态系统。以下是对PAI产品使用合集的概述,涵盖数据处理、模型开发、训练加速、模型部署及管理等多个环节。
|
21天前
|
分布式计算 Java 开发工具
阿里云MaxCompute-XGBoost on Spark 极限梯度提升算法的分布式训练与模型持久化oss的实现与代码浅析
本文介绍了XGBoost在MaxCompute+OSS架构下模型持久化遇到的问题及其解决方案。首先简要介绍了XGBoost的特点和应用场景,随后详细描述了客户在将XGBoost on Spark任务从HDFS迁移到OSS时遇到的异常情况。通过分析异常堆栈和源代码,发现使用的`nativeBooster.saveModel`方法不支持OSS路径,而使用`write.overwrite().save`方法则能成功保存模型。最后提供了完整的Scala代码示例、Maven配置和提交命令,帮助用户顺利迁移模型存储路径。
|
1月前
|
监控 NoSQL Redis
开发者如何使用阿里云Redis
【10月更文挑战第2天】开发者如何使用阿里云Redis
244 0
|
1月前
|
存储 NoSQL Java
Spring Boot项目中使用Redis实现接口幂等性的方案
通过上述方法,可以有效地在Spring Boot项目中利用Redis实现接口幂等性,既保证了接口操作的安全性,又提高了系统的可靠性。
39 0
|
2月前
|
NoSQL 安全 容灾
阿里云DTS踩坑经验分享系列|Redis迁移、同步
阿里云数据传输服务DTS在帮助用户迁移Redis数据、同步数据时,在某些复杂场景下会出现报错,或者源库与目标库数据不一致的问题,给用户带来困扰。本文介绍了DTS Redis到Redis迁移、同步过程中的典型问题,以帮助用户更好地使用DTS。
201 2
|
3月前
|
存储 机器学习/深度学习 弹性计算
阿里云EMR数据湖文件系统问题之OSS-HDFS全托管服务的问题如何解决
阿里云EMR数据湖文件系统问题之OSS-HDFS全托管服务的问题如何解决
|
4月前
|
消息中间件 分布式计算 DataWorks
DataWorks产品使用合集之如何使用Python和阿里云SDK读取OSS中的文件
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
|
4月前
|
存储 运维 安全
阿里云OSS的优势
【7月更文挑战第19天】阿里云OSS的优势
194 2
|
4月前
|
存储 API 开发工具
阿里云OSS
【7月更文挑战第19天】阿里云OSS
189 1
下一篇
无影云桌面