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

本文涉及的产品
对象存储 OSS,20GB 3个月
云数据库 Redis 版,社区版 2GB
推荐场景:
搭建游戏排行榜
对象存储 OSS,恶意文件检测 1000次 1年
简介: 前后端分离项目知识汇总(阿里云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
相关文章
|
1月前
|
Java API 开发工具
如何用阿里云 oss 下载文件
阿里云对象存储服务(OSS)提供了多种方式下载文件,以下讲解下各种方式的下载方法
967 1
|
1月前
|
存储 安全 对象存储
手把手教你搭建阿里云图床(PicGo+Typora+阿里云OSS),新手小白一看就会
本文详细介绍了怎样帮助新手小白从注册,购买阿里云OSS,到一步一步配置OSS做为图床,和PicGo、Typora软件连接,配置好关联之后,在使用Typora写文章时,如果需要插入图片,只需要将图片复制粘贴到Typora的编辑区域,就会自动通过PicGo上传到指定图床,自动复制外网能访问的URL并展示,简直不要太方便,极大的解决了编辑文章时复制处理图片链接的痛点。
193 2
手把手教你搭建阿里云图床(PicGo+Typora+阿里云OSS),新手小白一看就会
|
2月前
|
对象存储
minio临时凭证直传切换到阿里云oss
minio临时凭证直传切换到阿里云oss
181 1
|
1月前
|
弹性计算 前端开发 小程序
微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
当前的通用文件上传方式是通过前端上传到服务器,再由服务器转存至对象存储。这种方式在处理小文件时效率尚可,但大文件上传因受限于服务器带宽,速度较慢。例如,一个100MB的文件在5Mbps带宽的阿里云ECS上上传至服务器需160秒。为解决此问题,可以采用后端签名的方式,使微信小程序直接上传文件到阿里云OSS,绕过服务器中转。具体操作包括在JAVA后端引入相关依赖,生成签名,并在微信小程序前端使用这个签名进行文件上传,注意设置正确的请求头和formData参数。这样能提高大文件上传的速度。
|
4天前
|
网络协议 对象存储
阿里云oss配置自有域名
阿里云oss配置自有域名
12 1
|
5天前
|
存储 开发工具 对象存储
Javaweb之SpringBootWeb案例之阿里云OSS服务入门的详细解析
Javaweb之SpringBootWeb案例之阿里云OSS服务入门的详细解析
11 0
|
12天前
|
存储 Java API
阿里云oss简介和使用流程
本文档介绍了如何准备阿里云OSS(对象存储服务)并开始使用它。首先,需要注册阿里云账号并进行实名认证,然后购买OSS资源包。在阿里云控制台中,可以创建和管理OSS存储空间(称为“Bucket”)。接着,文章简要介绍了阿里云OSS,它是一个基于云端的对象存储服务,提供高可靠性、高性能、低成本和易于使用的特性。 在阿里云OSS控制台,用户可以进行文件的上传和下载操作。通过API,开发者可以使用各种编程语言(如Java)来创建、删除Bucket以及上传、下载和删除文件。例如,Java代码示例展示了如何创建Bucket、上传文件、删除文件以及下载文件到本地的操作。
|
19天前
|
开发工具 对象存储
阿里云OSS文件上传
阿里云OSS文件上传
61 0
|
19天前
|
存储 缓存 Java
阿里云OSS实战从入门到大神
说起阿里云OSS,那作用和功能都是非常强大的,它可以存放图片,音频,视频等资源文件,这些资源文件,你不必存放到服务器的硬盘里,这样既可以节省服务器硬盘空间,又可以降低服务器的读写压力,非常适合大并发的架构。
56 0
|
1月前
|
存储 对象存储 容器
阿里云OSS对象存储基础入门
阿里云OSS对象存储基础入门
92 0

热门文章

最新文章