【32-业务开发-基础业务-规格参数-保存数据-查询数据-更新操作之数据回显展示-更新操作-前后端项目交互整合与测试-总结收获】

news2024/11/16 19:34:22

一.知识回顾

【0.三高商城系统的专题专栏都帮你整理好了,请点击这里!】
【1-系统架构演进过程】
【2-微服务系统架构需求】
【3-高性能、高并发、高可用的三高商城系统项目介绍】
【4-Linux云服务器上安装Docker】
【5-Docker安装部署MySQL和Redis服务】
【6-Git安装与配置过程、Gitee码云上创建项目、IDEA关联克隆的项目】
【7-创建商城系统的子模块并将修改后的信息使用Git提交到Gitee上】
【8-数据库表结构的创建&后台管理系统的搭建】
【9-前端项目的搭建部署、Node安装、VSCode安装】
【10-Node的安装以及全局环境变量的相关配置&解决启动报错的问题(1.Error: Cannot find module ‘fs/promises)(2.npm安装node-sass报错)】
【11-导入人人generator项目并自动生成相关的文件&商品子模块的调试&公共模块common子模块的抽离与实现&Lombok插件的安装】
【12-商品子模块整合MyBatisPlus技术&其它模块通过generator的自动生成与补充完善】
【13-项目中微服务组件的学习-SpringCloudAlibaba微服务生态体系的学习&SpringCloudAlibaba的依赖管理&项目中SpringBoot和SpringCloud版本的统一】
【14-微服务的注册中心与配置中心Nacos&Windows操作系统上安装Nacos和Linux操作系统上用Docker中安装Nacos&每个子项目模块使用Nacos进行服务注册与发现】
【15-项目中服务的远程调用之OpenFeign&订单模块与商品模块集成使用OpenFeign的案例】
【16-配置中心之Nacos的基本使用&Nacos服务之命令空间、Nacos服务之配置组、Nacos服务之配置拆分】
【17-微服务网关之Spring Cloud Gateway&Spring Cloud Gateway网关服务搭建】
【18-业务开发-基础业务-商品模块-分类管理-前后端管理系统的启动-为分类管理表增加数据-Json插件的下载-返回具有层级目录、父子关系结构的数据】
【19-业务开发-基础业务-商品模块-分类管理-管理系统新建菜单-后端项目renren注册到Nacos注册中心和配置中心去-项目gateway网关模块的搭建-浏览器的同源策略与解决跨域问题实操案例】
【20-业务开发-基础业务-商品模块-分类管理-前端展示后端具有层级关系的目录数据-商品系统三级分类的逻辑删除前后端代码实现】
【21-业务开发-基础业务-商品模块-分类管理-商品系统三级分类的新增类别前后端代码实现-商品系统三级分类的更新类别前后端代码实现-之前错误的Bug修正】
【22-业务开发-基础业务-商品模块-分类管理-商品系统三级分类拖拽页面的功能-前后端代码的逻辑实现-访问测试-拖拽开关的开启和关系-批量更新拖拽数据-批量删除选定数据】
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据显示状态使用前端组件开关按钮展示-以及数据处理以及测试】
【24-业务开发-基础业务-品牌管理-图片管理-阿里云OSS服务开通和使用-阿里云OSS服务API使用-SpringCloudAlibaba OSS服务的使用】
【25-业务开发-基础业务-品牌管理-图片管理-图片上传方式的三种实现方式-第三方公共服务模块集成到项目中-服务端生成签名实战】
【26-业务开发-基础业务-品牌管理-图片管理-上传图片功能实现-基于阿里云OSS服务-解决跨域问题-设置跨域规则-修改ACL权限为公共读】
【27-业务开发-基础业务-品牌管理-图片管理-添加修改品牌信息并显示图片-前端数据校验-后端数据JSR303校验实现-统一异常处理-自定义响应编码规则-分组校验-自定义校验注解-项目Bug解决】
【28-业务开发-基础业务-属性管理-SKU和SPU基本概念-SKU和SPU关联关系-属性实体之间的关联关系-批量菜单创建】
【29-业务开发-基础业务-属性管理-属性组业务逻辑开发-页面布局-三级分类组件功能-属性组表单-父子组件传值-属性组数据展示-属性组数据添加-属性组数据修改-前后端项目整合交互测试】
【30-业务开发-基础业务-品牌管理-分类维护-解决分类维护业务开发中的一个Bug-品牌管理-分页插件-分页功能的逻辑实现-品牌管理-检索条件模糊查询品牌管理-增加更新操作中排序字段检验还是存在问题】
【31-业务开发-基础业务-品牌管理-级联类别信息业务功能实现-品牌管理和商品分类管理俩者业务关联出现数据冗余,导致数据不同步的问题-开启事务-项目测试】

二.规格参数-保存数据

2.1 规格参数前端页面开发

将我们提前开发完成的前端代码文件复制到文件目录中

找到文件所在的位置拷贝到前端开发目录结构中
在这里插入图片描述

前端开发目录中显示
在这里插入图片描述

启动前端项目,预览一下整体展示效果
在这里插入图片描述

2.2 规格参数后端逻辑开发

后端进行保存数据的时候,前端会传入一个attrGroupId的字段,而我们的后端是没有,可以使用我们之前的方法,新建立一个,也可以采用我们我们的这种方法:

mall-product模块下新建立一个vo包,包下创建一个AttrVO类,用来封装前端属性参数开发逻辑中请求参数
在这里插入图片描述

后端AttrController控制器中的保存逻辑需要进行调整,此时需要使用我们封装的AttrVO实体类
在这里插入图片描述

AttrService逻辑层的接口实现逻辑
在这里插入图片描述

AttrServiceImpl逻辑实现层的具体实现逻辑-----》事务注解

在这里插入图片描述

2.3 启动项目,访问测试看效果

2.3.1 页面展示效果

在这里插入图片描述

2.3.2 数据库数据更新成功

pms_attr_group事先存储的属性组表
在这里插入图片描述

pms_attr实体表信息更新成功
在这里插入图片描述

pms_attr_attrgroup_relation关联表中信息同步更新成功
在这里插入图片描述

三.规格参数-查询数据

3.1 查询数据前端实现逻辑

修改common/category.vue下子组件给父组件传递的值
在这里插入图片描述
将baseattr.vue中父组件的被触发的事件改为show事件
在这里插入图片描述
与其触发绑定的方法如下所示:
在这里插入图片描述
打开前端的项目,点击手机,成功获取到了接下来要进行查询的分类Id,前端搞定,接下里就是后端的逻辑处理。
在这里插入图片描述

3.2 查询数据后端实现逻辑

定义前后端交互的响应实体类
在这里插入图片描述

AttrController控制器中根据属性的类别和catelogId分类的id查询数据
在这里插入图片描述

AttrService逻辑层定义的接口方法
在这里插入图片描述

AttrServiceImpl具体逻辑实现层需要注入的属性对象
在这里插入图片描述

具体逻辑实现方法

@Override
    public PageUtils queryBasePage(Map<String, Object> params, Long catelogId, String attrType) {
        QueryWrapper<AttrEntity> wrapper = new QueryWrapper<>();
        wrapper.eq("attr_type","base".equalsIgnoreCase(attrType)?1:0);
        // 1.根据类别编号查询
        if(catelogId != 0 ){
            wrapper.eq("catelog_id",catelogId);
        }
        // 2.根据key 模糊查询
        String key = (String) params.get("key");
        if(!StringUtils.isEmpty(key)){
            wrapper.and((w)->{
                w.eq("attr_id",key).or().like("attr_name",key);
            });
        }
        // 3.分页查询
        IPage<AttrEntity> page = this.page(
                new Query<AttrEntity>().getPage(params),
                wrapper
        );
        PageUtils pageUtils = new PageUtils(page);
        // 4. 关联的我们需要查询出类别名称和属性组的名称
        List<AttrEntity> records = page.getRecords();
        List<AttrResponseVo> list = records.stream().map((attrEntity) -> {
            AttrResponseVo responseVo = new AttrResponseVo();
            BeanUtils.copyProperties(attrEntity, responseVo);
            // 查询每一条结果对应的 类别名称和属性组的名称
            CategoryEntity categoryEntity = categoryService.getById(attrEntity.getCatelogId());
            if (categoryEntity != null) {
                responseVo.setCatelogName(categoryEntity.getName());
            }
            if("base".equalsIgnoreCase(attrType)){
                // 设置属性组的名称
                AttrAttrgroupRelationEntity entity = new AttrAttrgroupRelationEntity();
                entity.setAttrId(attrEntity.getAttrId());
                // 去关联表中找到对应的属性组ID
                //attrAttrgroupRelationService.query(new QueryWrapper<AttrAttrgroupRelationEntity>().eq("attr_id",attrEntity.getAttrId()));
                AttrAttrgroupRelationEntity attrAttrgroupRelationEntity = attrAttrgroupRelationDao
                        .selectOne(new QueryWrapper<AttrAttrgroupRelationEntity>().eq("attr_id", attrEntity.getAttrId()));
                if (attrAttrgroupRelationEntity != null && attrAttrgroupRelationEntity.getAttrGroupId() != null) {
                    // 获取到属性组的ID,然后根据属性组的ID我们来查询属性组的名称
                    AttrGroupEntity attrGroupEntity = attrGroupService.getById(attrAttrgroupRelationEntity.getAttrGroupId());
                    responseVo.setGroupName(attrGroupEntity.getAttrGroupName());
                }
            }
            return responseVo;
        }).collect(Collectors.toList());
        pageUtils.setList(list);
        return pageUtils;
    }

3.3 访问测试效果

3.3.1 没有进行后端逻辑开发之前的效果

在这里插入图片描述

3.3.2 进行后端逻辑开发之后的效果

在这里插入图片描述

四.规格参数-更新操作-数据回显展示

4.1 更新操作-数据回显展示前端实现逻辑

导入的这俩个文件已经实现,无需改动,因为代码内容较多,此处不做相关笔记展示。
在这里插入图片描述

4.2 更新操作-数据回显展示后端实现逻辑

定义前后端交互的响应实体类
在这里插入图片描述

AttrController控制器中根据属性的id查询相关信息之后会写数据战展示在这里插入图片描述AttrService逻辑层定义的接口方法
在这里插入图片描述

AttrServiceImpl具体逻辑实现层需要注入的属性对象
在这里插入图片描述

具体逻辑实现方法

public AttrResponseVo getAttrInfo(Long attrId) {
        // 声明返回的对象
        AttrResponseVo responseVo = new AttrResponseVo();
        // 1.根据ID查询规格参数的基本信息
        AttrEntity attrEntity = this.getById(attrId);
        BeanUtils.copyProperties(attrEntity,responseVo);
        // 2.查询关联的属性组信息 中间表
        if(attrEntity.getAttrType() == ProductConstant.AttrEnum.ATTR_TYPE_BASE.getCode()){
            AttrAttrgroupRelationEntity relationEntity = attrAttrgroupRelationDao.selectOne(new QueryWrapper<AttrAttrgroupRelationEntity>().eq("attr_id", attrId));
            if(relationEntity != null){
                AttrGroupEntity attrGroupEntity = attrGroupService.getById(relationEntity.getAttrGroupId());
                responseVo.setAttrGroupId(attrGroupEntity.getAttrGroupId());
                if(attrGroupEntity != null){
                    responseVo.setGroupName(attrGroupEntity.getAttrGroupName());
                }
            }
        }

        // 3.查询关联的类别信息
        Long catelogId = attrEntity.getCatelogId();
        Long[] catelogPath = categoryService.findCatelogPath(catelogId);
        responseVo.setCatelogPath(catelogPath);

        CategoryEntity categoryEntity = categoryService.getById(catelogId);
        if(categoryEntity!=null){
            responseVo.setCatelogName(categoryEntity.getName());
        }
        return responseVo;
    }

4.3 重启项目,测试访问

联合数据回显成功,搞定
在这里插入图片描述

五.规格参数-更新操作

5.1 更新操作前端实现逻辑

导入的这俩个文件已经实现,无需改动,因为代码内容较多,此处不做相关笔记展示。
在这里插入图片描述

5.2 更新操作后端实现逻辑

AttrController控制器中修改信息方法在这里插入图片描述
AttrService逻辑层定义的接口方法

在这里插入图片描述

AttrServiceImpl具体逻辑实现层需要注入的属性对象
在这里插入图片描述

具体逻辑实现方法----》@Transactional设置事务操作

@Transactional
    @Override
    public void updateBaseAttr(AttrVO attr) {
        AttrEntity entity = new AttrEntity();
        BeanUtils.copyProperties(attr,entity);
        // 1.更新基本数据
        this.updateById(entity);
        if(entity.getAttrType() == ProductConstant.AttrEnum.ATTR_TYPE_BASE.getCode()){
            // 2.修改分组关联的关系
            AttrAttrgroupRelationEntity relationEntity = new AttrAttrgroupRelationEntity();
            relationEntity.setAttrId(entity.getAttrId());
            relationEntity.setAttrGroupId(attr.getAttrGroupId());
            // 判断是否存在对应的数据
            Integer count = attrAttrgroupRelationDao.selectCount(new QueryWrapper<AttrAttrgroupRelationEntity>().eq("attr_id",attr.getAttrId()));
            if(count > 0){
                // 说明有记录,直接更新
                attrAttrgroupRelationDao.update(relationEntity,new UpdateWrapper<AttrAttrgroupRelationEntity>().eq("attr_id",attr.getAttrId()));
            }else{
                // 说明没有记录,直接插入
                attrAttrgroupRelationDao.insert(relationEntity);
            }
        }
    }

5.3 重启项目,测试访问

修改数据前的页面
在这里插入图片描述
修改数据后的页面
在这里插入图片描述

六.总结

6.1 总结1:当业务模块中涉及多表关联查询业务逻辑的时候,通常有三种解决方案:

  1. 第一个方案就是先在我们的实体类中加上相关的属性,并设置@TableField(exist = false)注解,然后在我们对应Mapper层、dao层自定义接口方法,然后再我们对应xml文件中先通过表字段的映射(一对多,多对多),然后再通过SQL语句的查询来实现。
  2. 第二个方案就是通过自定义前后端交互数据响应的VO、DO、DTO、PO对象来封装我们需要使用的属性信息,然后再我们的逻辑层中注入多个关联表中业务逻辑service对象或者持久层dao对象,通过各个对象之间各自的查询操作将我们需要的对象分装后返回。
  3. 第三个方案也就是直接在我们之前就定义好的entity实体对象中新增加我们需要的属性信息,但是需要我们加上@TableField(exist = false)注解,因为这个新增加的字段和我们数据库底层的字段是不对应的,然后再我们的逻辑层中注入多个关联表中业务逻辑service对象或者持久层dao对象,通过各个对象之间各自的查询操作将结果返回。

6.2 总结2:请求注解

  1. @PathVariable:获取请求路径中传递的参数
  2. @RequestBody:是一个与后端对应的包装实体类
  3. @RequestParam:获取请求的参数,如果是多个参数的话就组成一个map来接受
    @RequestParam Map<String, Object> params,如果是单个参数的话,可以默认不写该注解,如果要写,那么需要我们设置其value,这个值就是与我们请求的参数对应的,默认的Boolean值是true,就是必须对应,否则就会报错,如果为false,也不会报错。
    在这里插入图片描述

好了,关于【32-业务开发-基础业务-规格参数-保存数据-查询数据-更新操作之数据回显展示-更新操作-前后端项目交互整合与测试-总结收获】就先学习到这里,后续内容持续创作中。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/30419.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1532_AURIX_TriCore内核架构_中断

全部学习汇总&#xff1a; GreyZhang/g_tricore_architecture: some learning note about tricore architecture. (github.com) 中断一直是我想了解关注的一个功能模块&#xff0c;因为感觉不同的芯片上这部分的设计差异比较大。而这部分也跟我们嵌入式软件的设计模式直接相关。…

使用HikariCP连接池常用配置讲解及注意事项

使用HikariCP连接池常用配置讲解及注意事项常遇到的几种错误Possibly consider using a shorter maxLifetime valueConnection is not available, request timed out after xxxxxmsNo operations allowed after connection closed常见配置及注释说明&#xff0c;可以使用并根据…

每日刷题2——指针概念

更新不易&#xff0c;麻烦多多点赞&#xff0c;欢迎你的提问&#xff0c;感谢你的转发&#xff0c; 最后的最后&#xff0c;关注我&#xff0c;关注我&#xff0c;关注我&#xff0c;你会看到更多有趣的博客哦&#xff01;&#xff01;&#xff01; 喵喵喵&#xff0c;你对我…

Twins: Revisiting the Design of Spatial Attention in Vision Transformers

Twins: Revisiting the Design of Spatial Attention in Vision Transformers一、引言二、Twins-PCPVT三、Twins-SVT四、实验五、消融实验文章链接: https://arxiv.org/abs/2104.13840代码链接: https://github.com/Meituan-AutoML/Twins一、引言 在本文中&#xff0c;重新审…

基于Matlab计算经典CFAR阈值

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …

基于开源 PolarDB-X 打造中正智能身份认证业务数据基座

一、公司及业务介绍 中正智能是全球领先的生物识别和身份认证公司之一。我们曾负责公安部指纹算法国家标准的起草、编写&#xff0c;具备从算法、终端、平台、设计、生产、交付全域自研的能力&#xff0c;拥有多项自主知识产权的产品&#xff0c;并积极与高校合作开展基础研发。…

【Rust 指南】并发编程|无畏并发的原因

文章目录前言1、线程1.1、通过 spawn 创建新线程1.2、join 方法2、move 强制所有权迁移3、使用消息传递跨线程传递数据3.1、Send 方法3.2 、Sync 方法前言 安全高效的处理并发是 Rust 诞生的目的之一&#xff0c;主要解决的是服务器高负载承受能力。 并发&#xff08;concurren…

石家庄正定县恢复种植 国稻种芯·中国水稻节:河北绘就画卷

石家庄正定县恢复种植 国稻种芯中国水稻节&#xff1a;河北绘就画卷 新华社记者 杨世尧 摄 河北日报 通讯员张 晓峰 摄影报道 新闻中国采编网 中国新闻采编网 谋定研究中国智库网 中国农民丰收节国际贸易促进会 国稻种芯中国水稻节 中国三农智库网-功能性农业农业大健康大会…

MongoDB备份与恢复

MongoDB备份与恢复 文章目录MongoDB备份与恢复1.备份恢复工具2.备份工具区别3.mongoexport导出工具命令4.导出MongoDB的表4.1.创建备份的目录4.2.登录数据库4.3.查询表和表中数据4.4.导出数据为json格式4.5.导出数据为csv格式5.mongoimport导入工具5.1.恢复json格式数据5.2.登录…

Python基础-3-列表

一&#xff1a;简述 列表是由一系列按特定顺序排列的元素组成&#xff0c;可以创建包含字母表中所有字母&#xff0c;数字或家庭成员姓名的列表&#xff1b;也可以将任何东西加入列表&#xff0c;其中的元素之间可以没有任何关系。列表中通常包含了多个元素&#xff0c;因此给…

HTTPS中间人攻击实验

HTTPS中间人攻击实验 一.实验基础 1、HTTPS概述 HTTPS (全称: Hyper Text Transfer Protocol over SecureSocketLayer)&#xff0c; 是以安全为目标的HTTP通道&#xff0c;在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。 默认端口&#xff1a;443 SSLspli…

【无人机】基于拓展卡尔曼滤波时序四旋翼无人机状态跟踪附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …

SpringBoot+Vue项目实现疫情期间社区出入管理系统

文末获取源码 开发语言&#xff1a;Java 使用框架&#xff1a;spring boot 前端技术&#xff1a;JavaScript、Vue.js 、css3 开发工具&#xff1a;IDEA/MyEclipse/Eclipse、Visual Studio Code 数据库&#xff1a;MySQL 5.7/8.0 数据库管理工具&#xff1a;phpstudy/Navicat JD…

web前端期末大作业——基于Bootstrap响应式汽车经销商4S店官网21页

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

【prometheus上报和使用】

prometheus上报和使用prometheus环境搭建进行上报CountrateirateincreaseGaugehistogram分位线summaryprometheus Prometheus是由SoundCloud开发的开源监控系统&#xff0c;由GO语言编写而成&#xff0c;采用Pull的方式来获取监控信息&#xff0c;并且提供了多维度的数据模型和…

Linux-sed

sed sed是一种几乎包括所有UNIX平台&#xff08;包括Linux&#xff09;的轻量级流编辑器。sed主要用来将数据进行选取、替换、删除、新增的命令 sed [选项] ‘[动作]’ 文件名 选项&#xff1a; -n&#xff1a;一般sed命令会把所有数据都输出到屏幕&#xff0c;如果加入此选项…

vue.js毕业设计,基于vue.js前后端分离订座预约系统设计与实现(H5移动项目)

功能介绍 【后台功能】 广告管理&#xff1a;设置小程序首页轮播图广告和链接 留言列表&#xff1a;所有用户留言信息列表&#xff0c;支持删除 会员列表&#xff1a;查看所有注册会员信息&#xff0c;支持删除 录入资讯&#xff1a;录入资讯标题、内容等信息 管理资讯&#x…

HTTP Only下的XSS攻击

今天继续给大家介绍渗透测试相关知识&#xff0c;本文主要内容是HTTP Only下的XSS攻击。 免责声明&#xff1a; 本文所介绍的内容仅做学习交流使用&#xff0c;严禁利用文中技术进行非法行为&#xff0c;否则造成一切严重后果自负&#xff01; 再次强调&#xff1a;严禁对未授权…

程序猿成长之路之密码学篇-密码学简介

在阅读本文前需要了解的术语&#xff1a; 授权人/非授权人&#xff1a;授权人指获取了查看数据权限的用户&#xff0c;非授权人则是指未获取到权限的用户。明文/密文&#xff1a;明文指没有加密的数据内容&#xff0c;密文是指加密后的数据内容CIA(密码学中不是美国中情局的意思…

npm 如何更新项目最新依赖包

NPM 是什么&#xff1f; Node 软件包管理器(NPM)提供了各种功能来帮助你安装和维护项目的依赖关系。 由于错误修复、新功能和其他更新&#xff0c;依赖关系可能会随着时间的推移而变得过时。你的项目依赖越多&#xff0c;就越难跟上这些更新。 老旧的软件包会对安全构成威胁&am…