• 谷粒商城笔记+踩坑（4）——商品服务-品牌管理

    导航：

    谷粒商城笔记+踩坑汇总篇

     Java笔记汇总：

    【Java笔记+踩坑汇总】Java基础+JavaWeb+SSM+SpringBoot+SpringCloud+瑞吉外卖/谷粒商城/学成在线+设计模式+面试题汇总+性能调优/架构设计+源码解析-CSDN博客

    目录

    7、商品服务-品牌管理

    7.1、添加“品牌管理”到人人后台管理系统

    7.1.1、在人人后台管理系统中新增“品牌管理”菜单

    7.1.2、人人生成的前端vue文件复制到前端工程

    7.1.3、修改权限

    7.1.4、测试增删改查基础功能

    7.2、新增时显示状态开关（仅前端）

    7.3、文件上传功能，阿里云云存储

    7.3.1、分布式系统上传文件

    7.3.2、开通阿里云OSS对象存储服务，创建新的Bucket

    7.3.3、子账户创建和授权，获取Endpoint、AccessKey ID、AccessKey Secret

    7.3.4、测试普通上传方式（不建议）

    7.3.5、建立第三方服务模块，实现服务端签名后直传

    7.3.6、测试上传文件功能

    7.3.7、实现服务端签名后直传文件，新建OssController 

    7.3.8、配置网关路由

    7.3.9、启动网关、测试获取oss签名请求

    7.3.10、前端联调，实现文件上传功能

    7.3.11、在阿里云配置跨域规则

    7.3.12、启动测试 

    7.4、效果优化-显示图片（仅前端）

    7.5、前端表单校验

    7.6、JSR303数字校验

    7.6.1、基本校验实现，@Valid

    7.6.2、统一封装错误状态码

    7.6.3、商品模块统一封装异常处理类，品牌参数校验异常

    7.6.4、分组校验，增改校验分开，@Validated

    7.6.5、编写自定义校验，必须提交指定数值

    7.6.6、使用自定义校验，showStatus只能是0或1

    7.6.8、最终校验的实体类和controller代码

    7.6.9、postman测试校验

    7、商品服务-品牌管理

    7.1、添加“品牌管理”到人人后台管理系统

    7.1.1、在人人后台管理系统中新增“品牌管理”菜单

    菜单管理->新增菜单

    image-20210927135437474

    7.1.2、人人生成的前端vue文件复制到前端工程

    前端代码路径\product\main\resources\src\views\modules\product

    image-20210927135553792

    7.1.3、修改权限

    没有新增删除按钮： 修改权限，Ctrl+Shift+F查找isAuth后，

    在src/utils/index.js修改isAuth，注释并全部返回为true

    image-20210927135728379

    image-20210927135749448

    7.1.4、测试增删改查基础功能

    运行项目， 可以发现增删改查都是成功的. 

    注意：现在没有添加表单校验，新增时表单有非法输入会失败，例如状态设为汉字。 

    http://localhost:8001/#/product-brand

    7.2、新增时显示状态开关（仅前端）

    1、在列表中添加自定义列：中间加标签。可以通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

    2、修改开关状态，发送修改请求

    3、数据库中showStatus是01，开关默认值是true/false。 所以在开关中设置:active-value="1" 、:inactive-value="0"属性，与数据库同步

    代码+注释：

    2.       <el-table-column
    3.         prop="showStatus"
    4.         header-align="center"
    5.         align="center"
    6.         label="显示状态"
    7.       >
    8.         <template slot-scope="scope">
    9.           <el-switch
    10.             v-model="scope.row.showStatus"
    11.             active-color="#13ce66"
    12.             inactive-color="#ff4949"
    13.             :active-value="1" 
    14.             :inactive-value="0"
    15.             @change="updateBrandStatus(scope.row)" 
    16.           >
    17.           el-switch>
    18.         template>
    19.       el-table-column>
    20.  
    22.       <el-form-item label="显示状态" prop="showStatus">
    23.         <el-switch
    24.           v-model="dataForm.showStatus"
    25.           active-color="#13ce66"
    26.           inactive-color="#ff4949"
    27.           :active-value="1"
    28.           :inactive-value="0"
    29.         >
    30.         el-switch>
    31.       el-form-item>
    1. //brand.vue中新增方法，用来修改状态
    2. updateBrandStatus(data) {
    3.       let { brandId, showStatus } = data;
    4.       this.$http({
    5.         url: this.$http.adornUrl("/product/brand/update"),
    6.         method: "post",
    7.         data: this.$http.adornData({ brandId, showStatus }, false),
    8.       }).then(({ data }) => {
    9.         this.$message({
    10.           message: "状态修改成功",
    11.           type: "success",
    12.         });
    13.       });
    14.     },

    7.3、文件上传功能，阿里云云存储

    7.3.1、分布式系统上传文件

    单体应用上传：上传文件到服务器，想获取文件时再向服务器发请求获取文件。

    分布式系统上传： 因为有多台服务器，为防止负载均衡导致获取文件时没找到对应的服务器，所以使用专门的存读文件服务器，或者云存储。

    和传统的单体应用不同，这里我们选择将数据上传到分布式文件服务器上。

    这里我们选择将图片放置到阿里云上，使用对象存储。

    帮助文档：

    • https://github.com/alibaba/aliyun-spring-boot/blob/master/aliyun-spring-boot-samples/aliyun-oss-spring-boot-sample/README-zh.md
    • https://help.aliyun.com/document_detail/32009.html?spm=a2c4g.11186623.6.768.549d59aaWuZMGJ

    上传策略：服务端签名后直传

    image-20210927154406800

    7.3.2、开通阿里云OSS对象存储服务，创建新的Bucket

    尽管开通即可，oss是按量计费，开发阶段不会超过一块钱。 

    注册、登录、实名认证、开通oss对象存储:

    对象存储OSS_云存储服务_企业数据管理_存储-阿里云

    点击立即开通 

    点击“管理控制台” ：

    oss基本概念：基本概念-Object-对象-存储-对象存储 OSS-阿里云

    存储空间（Bucket）

    存储空间是用户用于存储对象（Object）的容器，所有的对象都必须隶属于某个存储空间。存储空间具有各种配置属性，包括地域、访问权限、存储类型等。用户可以根据实际需求，创建不同类型的存储空间来存储不同的数据。

    建议一个项目创建一个存储空间。 

    对象（Object）

    对象是OSS存储数据的基本单元，也被称为OSS的文件。和传统的文件系统不同，对象没有文件目录层级结构的关系。对象由元信息（Object Meta），用户数据（Data）和文件名（Key）组成，并且由存储空间内部唯一的Key来标识。对象元信息是一组键值对，表示了对象的一些属性，比如最后修改时间、大小等信息，同时用户也可以在元信息中存储一些自定义的信息。

    创建bucket： 

    image-20210927154050990

    手动上传任意文件测试：

    点击文件详情、 复制url就能直接下载文件：

    7.3.3、子账户创建和授权，获取Endpoint、AccessKey ID、AccessKey Secret

    创建子账户

    image-20210927154807136

    点击创建用户

    image-20210927154842396

    新建成功后得到AccessKey ID、AccessKey Secret

    对子账户分配权限，管理OSS对象存储服务

    给oss完全权限： 

    Endpoint。 （gulimall-xmh -> 概览 -> Endpoint（地域节点）)

    image-20210927155403292

    7.3.4、测试普通上传方式（不建议）

    经过服务器不建议 

    安装-gt-lt-Java-对象存储 OSS-阿里云

    product模块导入依赖

    1. <dependency>
    2.     <groupId>com.aliyun.ossgroupId>
    3.     <artifactId>aliyun-sdk-ossartifactId>
    4.     <version>3.15.0version>
    5. dependency>

    上传文件流，将下面代码中String都改成自己的信息：

    1.     @Test
    2.     public void testOss(){
    3.         String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
    4.         // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
    5.         String accessKeyId = "yourAccessKeyId";
    6.         String accessKeySecret = "yourAccessKeySecret";
    7.         // 填写Bucket存储空间名称，例如gulimall-hello。
    8.         String bucketName = "examplebucket";
    9.         // 填写存储对象Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。
    10.         String objectName = "exampledir/exampleobject.txt";
    11.         // 填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。
    12.         // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
    13.         String filePath= "D:\\localpath\\examplefile.txt";
    14.  
    15.         // 创建OSSClient实例。
    16.         OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
    17.  
    18.         try {
    19.             InputStream inputStream = new FileInputStream(filePath);
    20.             // 创建PutObject请求。
    21.             ossClient.putObject(bucketName, objectName, inputStream);
    22.         } catch (OSSException oe) {
    23.             System.out.println("Caught an OSSException, which means your request made it to OSS, "
    24.                     + "but was rejected with an error response for some reason.");
    25.             System.out.println("Error Message:" + oe.getErrorMessage());
    26.             System.out.println("Error Code:" + oe.getErrorCode());
    27.             System.out.println("Request ID:" + oe.getRequestId());
    28.             System.out.println("Host ID:" + oe.getHostId());
    29.         } catch (ClientException ce) {
    30.             System.out.println("Caught an ClientException, which means the client encountered "
    31.                     + "a serious internal problem while trying to communicate with OSS, "
    32.                     + "such as not being able to access the network.");
    33.             System.out.println("Error Message:" + ce.getMessage());
    34.         } finally {
    35.             if (ossClient != null) {
    36.                 ossClient.shutdown();
    37.             }
    38.         }
    39.     }

    运行，上传成功：

    复制文件url在浏览器也是可以打开的。 

    7.3.5、建立第三方服务模块，实现服务端签名后直传

    删除前面测试时引入的依赖和测试类，以后导入starter依赖。 

    官方演示示例 ：

    aliyun-spring-boot/aliyun-spring-boot-samples/aliyun-oss-spring-boot-sample at master · alibaba/aliyun-spring-boot · GitHub

    • 新建springboot模块,gulimall-third-party

    • 第三方模块引入common、oss依赖和alibaba管理依赖
    1.     <properties>
    2.         <java.version>11java.version>
    3.         <spring-cloud.version>2021.0.4spring-cloud.version>
    4.     properties>
    5.     <dependencies>
    6.         <dependency>
    7.             <groupId>org.springframework.bootgroupId>
    8.             <artifactId>spring-boot-starter-webartifactId>
    9.         dependency>
    10.         <dependency>
    11.             <groupId>org.springframework.cloudgroupId>
    12.             <artifactId>spring-cloud-starter-openfeignartifactId>
    13.         dependency>
    14.  
    15.         <dependency>
    16.             <groupId>org.springframework.bootgroupId>
    17.             <artifactId>spring-boot-starter-testartifactId>
    18.             <scope>testscope>
    19.         dependency>
    20. 		<dependency>
    21. 			<groupId>com.vince.gulimallgroupId>
    22. 			<artifactId>gulimall-commonartifactId>
    23. 			<version>0.0.1-SNAPSHOTversion>
    24. 		dependency>
    25.         <dependency>
    26.             <groupId>com.alibaba.cloudgroupId>
    27.             <artifactId>spring-cloud-starter-alicloud-ossartifactId>
    28.             <version>2.2.0.RELEASEversion>
    29.         dependency>
    30.  
    31.     dependencies>
    32.     <dependencyManagement>
    33.         <dependencies>
    34.             <dependency>
    35.                 <groupId>org.springframework.cloudgroupId>
    36.                 <artifactId>spring-cloud-dependenciesartifactId>
    37.                 <version>${spring-cloud.version}version>
    38.                 <type>pomtype>
    39.                 <scope>importscope>
    40.             dependency>
    41.             <dependency>
    42.                 <groupId>com.alibaba.cloudgroupId>
    43.                 <artifactId>spring-cloud-alibaba-dependenciesartifactId>
    44.                 <version>2021.0.1.0version>
    45.                 <type>pomtype>
    46.                 <scope>importscope>
    47.             dependency>
    48.         dependencies>
    49.     dependencyManagement>

    • nacos新建命名空间third-party

    • 命名空间中新建配置文件oss.yml

     

    1. spring:
    2.   cloud:
    3.     alicloud:
    4.       oss:
    5.         endpoint: xxx
    6.         bucket: xxx
    7.       access-key: xxx
    8.       secret-key: xxx
    • 项目新建bootstrap.yml
    1. spring:
    2.   application:
    3.     name: gulimall-third-party
    4.   cloud:
    5.     nacos:
    6.       config:
    7.         server-addr: 127.0.0.1:8848
    8.         file-extension: yaml
    9.         namespace: de0e12ff-8fc4-45a0-bdee-5b5618f4054f
    10.         extension-configs:
    11.           - data-id: oss.yml
    12.             group: DEFAULT_GROUP
    13.             refresh: true

    坑点：报错没有配置endpoint：

    在SpringBoot 2.4.x的版本之后，对于bootstrap.properties/bootstrap.yaml配置文件(我们合起来成为Bootstrap配置文件)的支持，需要导入如下的依赖

    这里在common中导入：

    1.         <dependency>
    2.             <groupId>org.springframework.cloudgroupId>
    3.             <artifactId>spring-cloud-starter-bootstrapartifactId>
    4.             <version>3.1.4version>
    5.         dependency>

    • 项目新建application.yml
    1. spring:
    2.   cloud:
    3.     nacos:
    4.       discovery:
    5.         server-addr: 127.0.0.1:8848
    6.   application:
    7.     name: gulimall-third-party
    8. server:
    9.   port: 30000
    • 主启动类注解@EnableDiscoveryClient开启nacos注册
    1. @SpringBootApplication
    2. @EnableDiscoveryClient
    3. public class GulimallThirdPartyApplication {
    4.     public static void main(String[] args) {
    5.         SpringApplication.run(GulimallThirdPartyApplication.class, args);
    6.     }
    7. }

    7.3.6、测试上传文件功能

    在第三方模块的pom里排除mybatisplus依赖：

    1. 		<dependency>
    2. 			<groupId>com.vince.gulimallgroupId>
    3. 			<artifactId>gulimall-commonartifactId>
    4. 			<version>0.0.1-SNAPSHOTversion>
    5.             <exclusions>
    6.                 <exclusion>
    7.                     <groupId>com.baomidougroupId>
    8.                     <artifactId>mybatis-plus-boot-starterartifactId>
    9.                 exclusion>
    10.             exclusions>
    11. 		dependency>

    编写测试类：

    注意修改bucket 

    1. @SpringBootTest
    2. class GulimallThirdPartyApplicationTest {
    3.  
    4.     @Autowired
    5.     OSSClient ossClient;
    6.  
    7.     @Test
    8.     public void testUpload() throws FileNotFoundException {
    9.  
    10.         //上传文件流。
    11.         InputStream inputStream = new FileInputStream("E:\\SystemDefault\\桌面\\1.jpg");
    12.         ossClient.putObject("改成自己bucketName例如gulimall-xmh", "hahaha1.jpg", inputStream);
    13.  
    14.         // 关闭OSSClient。
    15.         ossClient.shutdown();
    16.         System.out.println("上传成功.");
    17.     }
    18.  
    19. }

    7.3.7、实现服务端签名后直传文件，新建OssController 

    在第三方模块controller.OssController 

    代码来源：简单上传-上传-文件-OSS-对象存储 OSS-阿里云 

    这里主要是从yml里注入oss需要的关键属性，删去了跨域相关的代码，因为跨域我们之前在网关模块的配置类里已经统一配置了跨域规则。

    1. @RestController
    2. public class OssController {
    3.  
    4.     @Autowired
    5.     OSS ossClient;  //注意不是OssClient
    6.  
    7.     //从nacos配置的yml里注入阿里云云存储的关键属性
    8.     @Value("${spring.cloud.alicloud.oss.endpoint}")
    9.     String endpoint;
    10.  
    11.     @Value("${spring.cloud.alicloud.oss.bucket}")
    12.     String bucket;
    13.  
    14.     @Value("${spring.cloud.alicloud.access-key}")
    15.     String accessId;
    16.     @Value("${spring.cloud.alicloud.secret-key}")
    17.     String accessKey;
    18.  
    19.     @RequestMapping("/oss/policy")
    20.     public R policy(){
    21.  
    22.         String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
    23.  
    24.         // 用户上传文件时指定的前缀
    25.         String dir = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
    26.  
    27.         Map respMap=null;
    28.         try {
    29.             long expireTime = 30;
    30.             long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
    31.             Date expiration = new Date(expireEndTime);
    32.             PolicyConditions policyConds = new PolicyConditions();
    33.             policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
    34.             policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);
    35.  
    36.             String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
    37.             byte[] binaryData = postPolicy.getBytes("utf-8");
    38.             String encodedPolicy = BinaryUtil.toBase64String(binaryData);
    39.             String postSignature = ossClient.calculatePostSignature(postPolicy);
    40.  
    41.             respMap= new LinkedHashMap();
    42.             respMap.put("accessid", accessId);
    43.             respMap.put("policy", encodedPolicy);
    44.             respMap.put("signature", postSignature);
    45.             respMap.put("dir", dir);
    46.             respMap.put("host", host);
    47.             respMap.put("expire", String.valueOf(expireEndTime / 1000));
    48.  
    49.         } catch (Exception e) {
    50.             // Assert.fail(e.getMessage());
    51.             System.out.println(e.getMessage());
    52.         } finally {
    53.             ossClient.shutdown();
    54.         }
    55.         return R.ok().put("data",respMap);
    56.     }
    57.  
    58. }

    文件真正访问地址：https://bucket名.endpoint名/文件名

    例如：

    启动访问获取签名：

    7.3.8、配置网关路由

    1. #        oss等第三方模块路由
    2.         - id: third_party_route
    3.           uri: lb://gulimall-third-party
    4.           predicates:
    5.             - Path=/api/thirdparty/**
    6.           filters:
    7. #            http://localhost:88/api/thirdparty/oss/policy--->http://localhost:30000/oss/policy
    8.             - RewritePath=/api/thirdparty/(?.*),/$\{segment}

    注意：位置要放到/api的上面

     

    7.3.9、启动网关、测试获取oss签名请求

    访问http://localhost:88/api/thirdparty/oss/policy测试

    7.3.10、前端联调，实现文件上传功能

    • 将资料里的upload文件夹cv在/renren-fast-vue/src/components中
    • 修改multiUpload.vue和singeUplad.vue组件中el-upload中的action属性，替换成自己的Bucket域名

    image-20210927155622860

    • 修改\src\views\modules\productbrand-add-or-update.vue，把单个文件上传组件应用到brand-add-or-update.vue
    1. //在