前后端分离项目知识汇总(阿里云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
相关文章
|
3月前
|
Cloud Native Java 对象存储
面向未来的架构设计:Spring Cloud和Netflix OSS在云原生环境下的发展趋势
展望未来,随着5G、边缘计算等新技术的兴起,微服务架构的设计理念将会更加深入人心,Spring Cloud和Netflix OSS也将继续引领技术潮流,为企业带来更为高效、灵活且强大的解决方案。无论是对于初创公司还是大型企业而言,掌握这些前沿技术都将是在激烈市场竞争中脱颖而出的关键所在。
68 0
|
3月前
|
Java 对象存储 开发者
解析Spring Cloud与Netflix OSS:微服务架构中的左右手如何协同作战
Spring Cloud与Netflix OSS不仅是现代微服务架构中不可或缺的一部分,它们还通过不断的技术创新和社区贡献推动了整个行业的发展。无论是对于初创企业还是大型组织来说,掌握并合理运用这两套工具,都能极大地提升软件系统的灵活性、可扩展性以及整体性能。随着云计算和容器化技术的进一步普及,Spring Cloud与Netflix OSS将继续引领微服务技术的发展潮流。
64 0
|
2月前
|
JSON SpringCloudAlibaba Java
Springcloud Alibaba + jdk17+nacos 项目实践
本文基于 `Springcloud Alibaba + JDK17 + Nacos2.x` 介绍了一个微服务项目的搭建过程,包括项目依赖、配置文件、开发实践中的新特性(如文本块、NPE增强、模式匹配)以及常见的问题和解决方案。通过本文,读者可以了解如何高效地搭建和开发微服务项目,并解决一些常见的开发难题。项目代码已上传至 Gitee,欢迎交流学习。
162 1
Springcloud Alibaba + jdk17+nacos 项目实践
|
29天前
|
NoSQL Java Redis
springCloud中将redis共用到common模块
通过将Redis配置和操作服务提取到Common模块,可以在Spring Cloud微服务架构中实现高效的代码复用和统一管理。这种设计不仅简化了各个服务的配置和依赖管理,还提高了代码的可维护性和可读性。希望本文对你在Spring Cloud项目中集成和使用Redis有所帮助。
44 0
|
1月前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
37 0
|
3月前
|
存储 NoSQL Redis
SpringCloud基础7——Redis分布式缓存,RDB,AOF持久化+主从+哨兵+分片集群
Redis持久化、RDB和AOF方案、Redis主从集群、哨兵、分片集群、散列插槽、自动手动故障转移
SpringCloud基础7——Redis分布式缓存,RDB,AOF持久化+主从+哨兵+分片集群
|
2月前
|
Cloud Native Java 对象存储
面向未来的架构设计:Spring Cloud和Netflix OSS在云原生环境下的发展趋势
面向未来的架构设计:Spring Cloud和Netflix OSS在云原生环境下的发展趋势
51 1
|
2月前
|
监控 Java 对象存储
监控与追踪:如何利用Spring Cloud Sleuth和Netflix OSS工具进行微服务调试
监控与追踪:如何利用Spring Cloud Sleuth和Netflix OSS工具进行微服务调试
46 1
|
3月前
|
Java 开发工具 对象存储
简化配置管理:Spring Cloud Config与Netflix OSS中的动态配置解决方案
简化配置管理:Spring Cloud Config与Netflix OSS中的动态配置解决方案
52 2
|
3月前
|
消息中间件 Java 对象存储
数据一致性挑战:Spring Cloud与Netflix OSS下的分布式事务管理
数据一致性挑战:Spring Cloud与Netflix OSS下的分布式事务管理
58 2