【35-业务开发-基础业务-商品服务-新增商品-会员模块服务-mall-member-会员模块数据维护-规格参数维护-前端项目Bug解决-PubSub依赖缺失】

该博客详细记录了一款三高商城系统从架构演进到业务开发的全过程,包括微服务、Docker、数据库安装、前端项目搭建、商品服务、会员模块、规格参数维护等。同时,解决了前端项目中PubSub依赖缺失的问题,确保了商品新增功能的正常运行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一.知识回顾

【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-业务开发-基础业务-品牌管理-级联类别信息业务功能实现-品牌管理和商品分类管理俩者业务关联出现数据冗余,导致数据不同步的问题-开启事务-项目测试】
【32-业务开发-基础业务-规格参数-保存数据-查询数据-更新操作之数据回显展示-更新操作-前后端项目交互整合与测试-总结收获】
【33-业务开发-基础业务-规格参数-销售属性-多表之间的关联增删改查操作-前后端项目交互整合与测试-Cannot read property ‘publish‘ of undefined】
【34-业务开发-基础业务-属性组和基本属性-属性组和基本属性建立关联-属性组和基本属性解除关联-未关联属性查询-确认新增】

二.商品服务-新增商品

2.1 品牌关联前端代码实现逻辑

将提前写好的这四个关于商品处理的前端代码文件拷贝到项目中,当然,这里面有一些细节需要微调。
在这里插入图片描述

2.2 品牌关联后端代码实现逻辑

CategoryBrandRelationController控制器中来处理前端发送来的请求
在这里插入图片描述
CategoryBrandRelationService定义接口方法
在这里插入图片描述
具体CategoryBrandRelationServiceImpl逻辑实现类中的处理逻辑

@Override
    public List<CategoryBrandRelationEntity> categroyBrandRelation(Long catId) {
        // 找到所有的品牌信息
        List<CategoryBrandRelationEntity> list = relationDao
                .selectList(new QueryWrapper<CategoryBrandRelationEntity>()
                        .eq("catelog_id", catId));
        return list;
    }

2.3 启动项目,访问测试

根据对应的类别Id编号查询出所有的品牌数据展示在对应的下拉菜单中,测试成功。
在这里插入图片描述

三.商品服务mall-product需要使用mall-member模块中的业务逻辑-会员模块服务-mall-member

3.1 前端错误请求分析

在这里插入图片描述

3.2 后端解决逻辑

  1. 先进入mall-gateway模块中配置访问mall-member的路由信息,一定要记得重新启动一下mall-gateway
    在这里插入图片描述

  2. 启动mall-member模块,到Nacos注册中心中查看是否成功注册
    在这里插入图片描述

  3. 上述步骤都搞定了,那么接下来我们就来访问测试一下,看刚才的请求还出现404的问题吗?
    在这里插入图片描述

四.会员模块数据维护

4.1 前端页面的添加

将会员模块需要的页面拷贝到前端开发环境中,并检查是否有需要修改更正的地方。
在这里插入图片描述

4.2 后端逻辑的实现

MemberLevelController控制器实现的逻辑,业务层还有持久层都是我们通过mybatisplus生成的代码,此处不做展示。
在这里插入图片描述

4.3 访问测试

在这里插入图片描述

在这里插入图片描述

五.规格参数维护

因为我们添加商品的过程中是一个更加人性化的交互式过程,并不是直接给你一个大表单,将所有的数据传送过去,而是分了几个交互式的步骤,让使用者体验更佳。好的,到目前为止我们已经完成了第一步,我们看一下第一步完成的效果:
第一步完成:在这里插入图片描述
此时来到了第二个步骤:
在这里插入图片描述
接下来我们就需要完成第二个步骤---->

5.1 前端逻辑的接口

前端发送请求的接口
在这里插入图片描述

5.2 后端逻辑的实现

前端需要我们的对应的属性信息,我们需要封装一个AttrGroupWithAttrsVo对象
在这里插入图片描述

AttrGroupController控制器处理前端发送过来的请求
在这里插入图片描述
AttrGroupService定义的接口方法
在这里插入图片描述
AttrGroupServiceImpl具体的实现类中,先根据三级分类的编号查询出对应的所有的属性组,然后根据属性组查询到对应的属性信息

/**
    @Override
    public List<AttrGroupWithAttrsVo> getAttrgroupWithAttrsByCatelogId(Long catelogId) {
        // 1.根据三级分类的编号查询出对应的所有的属性组
        List<AttrGroupEntity> attrGroups = this.list(new QueryWrapper<AttrGroupEntity>().eq("catelog_id", catelogId));
        List<AttrGroupWithAttrsVo> list = attrGroups.stream().map((group) -> {
            AttrGroupWithAttrsVo vo = new AttrGroupWithAttrsVo();
            BeanUtils.copyProperties(group,vo);
            // 根据属性组找到所有的属性信息
            List<AttrEntity> attrEntities = attrService.getRelationAttr(group.getAttrGroupId());
            vo.setAttrs(attrEntities);
            return vo;
        }).collect(Collectors.toList());
        return list;
    }

5.3 启动项目,访问测试

没有修改之前的页面展示
在这里插入图片描述

修改之后的的访问测试
在这里插入图片描述

六.数据维护

就是根据我们之前做好的功能,在相关的功能模块下对数据的增加操作,这个简单,此处就不做具体的展示了。
数据格式可以参考现在一些主流的商城网站。

七.前端项目Bug解决-PubSub依赖缺失,提示错误 PubSub is not defined

打开新增商品页面的时候会出现的错误提示:

image.png

原因是缺少:PubSub相关依赖

解决办法:

  • 使用npm添加依赖:npm install --save pubsub-js(失败的话使用此命令:cnpm install --save pubsub-js)

  • 在src下的main.js中引用:
    import PubSub from ‘pubsub-js’
    Vue.prototype.PubSub = PubSubimage.png

  • 在.eslintrc.js中添加一下配置

    image.png

好了,关于【35-业务开发-基础业务-商品服务-新增商品-会员模块服务-mall-member-会员模块数据维护-规格参数维护-前端项目Bug解决-PubSub依赖缺失】就先学习到这,更多的内容持续创作学习中,敬请期待。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

硕风和炜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值