谷粒商城学习笔记（4.品牌管理）

Kiritoasu

已于 2023-06-09 12:28:58 修改

阅读量343

点赞数

分类专栏：谷粒商城学习笔记文章标签：学习笔记 java 前端

于 2023-06-07 15:37:54 首次发布

本文链接：https://blog.csdn.net/Kiritoasu/article/details/131062069

版权

谷粒商城学习笔记专栏收录该内容

17 篇文章 3 订阅

订阅专栏

一、逆向开发

1、前端页面生成

用代码生成器直接对pms表生成的代码中，也生成了前端页面的功能，其中包含了增删改查方法。
在这里插入图片描述

放到product目录下

菜单生成功能生成品牌菜单

2、修改权限

注释当前代码，并返回true，使所有都附带权限
在这里插入图片描述

3、测试页面

自己能在此页面测试是否能正确增删改查
在这里插入图片描述

二、显示功能优化

用按钮开关代替显示状态的展示，完成分页插件的导入，完善分页功能

1、前端

active-value/inactive-value：开关打开关闭默认返回布尔类型，我们可以设置和数据库数据类型相

同返回1 0
在这里插入图片描述

在这里插入图片描述
switch开关的change事件

update方法：

2、后端分页模块导入

创建mybtis分页控制类
在这里插入图片描述

新版mybatis-plus导入官网的这个模块（3.4以上）
在这里插入图片描述
低版本

3、测试

在这里插入图片描述

三、文件上传

1、阿里云对象储存OSS

对象存储服务（Object Storage Service，OSS）是一种海量、安全、低成本、高可靠的云存储
服务，适合存放任意类型的文件。容量和处理能力弹性扩展，多种存储类型供选择，全面优
化存储成本。
在这里插入图片描述

在这里插入图片描述

1 基本配置

阿里云界面开启服务
在这里插入图片描述
创建bucket

创建用户

创建自己的用户名称，勾选openApi

记录自己的
AccessKey ID
和密码
给用户添加权限

2 环境配置

尽量统一版本，要用github开源的新版本的配置不然容易出很多问题，无法解决

点击文档工具可以找到新文档
在这里插入图片描述
配置类导入依赖

product模块下的 yml文件导入oss配置

刚记录的用户账号密码

一级刚创建的bucket外网接口
在这里插入图片描述

3 测试类测试

在这里插入图片描述
文档中复制文件上传方法，因为已经在配置文件中定义，所以直接注入ossClient

运行成功，查看oss管理控制台

在这里插入图片描述

2、OSS服务端整合

1.maven依赖

创建第三方模块thirdparty
在这里插入图片描述
导入common工具包，排除mybatis

导入oss依赖

在这里插入图片描述

2.配置yml

在这里插入图片描述
nacos配置中心

创建属于thirdparty的命名空间，以及yaml文件
在这里插入图片描述

3. controller类

复制文档中的ossweb直传，服务器核心代码

        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessId = "yourAccessKeyId";
        String accessKey = "yourAccessKeySecret";
        // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 填写Bucket名称，例如examplebucket。
        String bucket = "examplebucket";
        // 填写Host地址，格式为https://bucketname.endpoint。
        String host = "https://examplebucket.oss-cn-hangzhou.aliyuncs.com";
        // 设置上传回调URL，即回调服务器地址，用于处理应用服务器与OSS之间的通信。OSS会在文件上传完成后，把文件上传信息通过此回调URL发送给应用服务器。
        String callbackUrl = "https://192.168.0.0:8888";
        // 设置上传到OSS文件的前缀，可置空此项。置空后，文件将上传至Bucket的根目录下。
        String dir = "exampledir/";
        
        // 创建ossClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessId, accessKey);
        try {
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

            String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = ossClient.calculatePostSignature(postPolicy);

            Map<String, String> respMap = new LinkedHashMap<String, String>();
            respMap.put("accessId", accessId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));
            // respMap.put("expire", formatISO8601Date(expiration));

            JSONObject jasonCallback = new JSONObject();
            jasonCallback.put("callbackUrl", callbackUrl);
            jasonCallback.put("callbackBody",
                    "filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}");
            jasonCallback.put("callbackBodyType", "application/x-www-form-urlencoded");
            String base64CallbackBody = BinaryUtil.toBase64String(jasonCallback.toString().getBytes());
            respMap.put("callback", base64CallbackBody);

            JSONObject ja1 = JSONObject.fromObject(respMap);
            // System.out.println(ja1.toString());
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Methods", "GET, POST");
            response(request, response, ja1.toString());

        } catch (Exception e) {
            // Assert.fail(e.getMessage());
            System.out.println(e.getMessage());
        }

修改部分
在这里插入图片描述

4.路由配置

gateway模块中配置有关thirdparty模块的路由转发
在这里插入图片描述

3、前端整合

1.文件上传页面

直接从谷粒商城的资源中，导入前端文件上传页面（upload）

在这里插入图片描述
复制到前端components目录下，并创建upload文件夹

修改单文件，多文件上传的地址为自己阿里云的链接地址

2.弹出框页面

导入单文件上传页面
在这里插入图片描述
修改品牌地址下的组件

在这里插入图片描述

3 测试

在这里插入图片描述

四、JSR303数据校验

就是判断输入的数据是否合理

1、前端校验

在弹出页面下dataRule表示新增修改规则

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator
在这里插入图片描述

在这里插入图片描述
修改这里排序，以及检索的自定义规则：用validator

前端测试

2、后端校验

在这里插入图片描述

1.common工具类

导入依赖
在这里插入图片描述

2.entity实体类

以brand品牌为例子：添加校验规则
在这里插入图片描述

3.controller类

开启校验注解
在这里插入图片描述

4.postman测试

在这里插入图片描述

五、统一异常处理

1、创建统一异常包

在这里插入图片描述

2、common工具类

创建异常枚举
在这里插入图片描述

package com.atguigu.common.exception;

/**
 * ***
 * * 错误码和错误信息定义类
 * * 1. 错误码定义规则为 5 为数字
 * * 2. 前两位表示业务场景，最后三位表示错误码。例如：100001。10:通用 001:系统未知
 * 异常
 * * 3. 维护错误码后需要维护错误描述，将他们定义为枚举形式
 * * 错误码列表：
 * * 10: 通用
 * * 001：参数格式校验
 * * 11: 商品
 * * 12: 订单
 * * 13: 购物车
 * * 14: 物流
 * *
 * *
 **/
public enum BizCodeEnume {
    UNKNOW_EXCEPTION(10000,"系统位置异常"),
    VAILD_EXCEPTION(10001,"参数格式校验失败");

    private int code;
    private String msg;
    BizCodeEnume(int code,String msg){
        this.code = code;
        this.msg = msg;
    }

    public int getCode(){
        return code;
    }

    public String getMsg() {
        return msg;
    }
}

3、postman测试

在这里插入图片描述

六、关联级联

绑定品牌与商品之间的相互联系，比如华为品牌可以有各个商品（手机，数码等）
在这里插入图片描述

在这里插入图片描述
建立数据表，用于关联brand 与 categpory之间的关系

在这里插入图片描述

1、brand 和 category关联部分的展示与保存功能

点击关联分类，会调用product/categorybrandrelation/catelog/list展示数据库已经存在的数据信息
在这里插入图片描述

1 controller类

新增catelog/list：根据传入的brandid（品牌id）查询数据库关联

运用querywrapper直接实现查询功能
在这里插入图片描述

修改save方法保存新增数据：saveDetail

在这里插入图片描述

2 service类

在这里插入图片描述

3 Impl实现类

根据传入的数据，从品牌和商品表中查出名字保存到关联表
在这里插入图片描述

2、category级联修改

顾名思义，如果商品信息在商品管理中发生修改，我们这个的商品级联也要统一发生修改（这里其实就一个商品名称，其实意思就是商品名称修改，这里的商品名称也要里面随之变化）

1 controller

修改category的update方法（自定义修改函数updateCascade）
在这里插入图片描述

2 service

在这里插入图片描述

3 Impl实现类

首先this.update修改它本身表数据

然后调用注入的级联service，调用里面的更新商品方法（只需要商品id，名字）
在这里插入图片描述

4 级联中实现同步修改

编写上面所述，同时修改商品的方法

这里用编写sql语句的方法实现该功能
在这里插入图片描述
dao中实现方法

mapper中编写方法对应的sql

3、brand的级联修改

同样，如果品牌信息在商品管理中发生修改，我们这个的品牌级联也要统一发生修改（如上category都相同，其中Impl实现方法我们可以不用mapper编写sql实现）

1 controller

在这里插入图片描述

2 service

在这里插入图片描述

3 Impl实现类

在这里插入图片描述

4 级联中实现同步修改

直接用UpdateWrapper匹配与brand-id相同的值，直接修改其name值，这样肯定比编写sql方便

在这里插入图片描述

4、测试

我们修改品牌名
在这里插入图片描述
可以看到级联表品牌名也得到了修改

修改商品名

在这里插入图片描述

七、主要问题

1、引入阿里云存储OSS报错：Error creating bean with name ‘ossClient‘ defined in

这里导入是旧版依赖

        <dependency>
           <groupId>com.alibaba.cloud</groupId>
          <artifactId>spring-cloud-starter-alicloud-oss</artifactId>
            <version>2.2.0.RELEASE</version>
       </dependency>

我的解决方案最后还是看github开源的新文档，导入新版的依赖

            <groupId>com.alibaba.cloud</groupId>
            <artifactId>aliyun-oss-spring-boot-starter</artifactId>
            <version>1.0.0</version>