第四篇商城系统-品牌管理实现(代码片段)

波波烤鸭 波波烤鸭     2022-10-23     691

关键词:

业务开发-基础业务-品牌管理

  本篇文章详细介绍了品牌管理的功能实现。

品牌管理

1. 品牌管理基本操作

首先完成品牌的基本的操作。就是通过renren-fast-generator项目不光能生成表结构对应的后端模块代码,一会帮我们生成Vue模板代码。

然后我们在前端服务中创建对应的菜单,然后拷贝进我们生成的相关的文件。

拷贝Brand.vue相关的文件到如下目录中

拷贝进来后,我们再去访问品牌页面就可以访问了

添加和删除按钮没有出来是因为权限的问题,我们可以屏蔽。

一种方式是去掉上面框出的isAuth方法,第二种就是修改isAuth中的逻辑,直接返回true。

启动vue服务的时候给出了语句检查的警告,直接注销掉

然后就可以通过生成的Vue页面完成brand的简单的CRUD操作。

2. 显示状态控制

在显示品牌信息的表单中我们可以将品牌的显示状态通过开关按钮来显示,同时在新增和更新的数据中也这么处理

然后将Switch开关放入对应的Table和Form表单中

页面显示OK后我们就需要通过开关操作来更新后台这条记录的状态

updateBrandStatus(data)
        // 更新当前记录的显示状态
        this.$http(
        url: this.$http.adornUrl("/product/brand/update"),
        method: "post",
        data: this.$http.adornData("brandId":data.brandId,"showStatus":data.showStatus, false),
      ).then(( data ) => 
          this.$message(
            message: "状态更新成功",
            type: "success",
          );
      );
    

更新下Switch开关的默认值

3. 图片管理

文件存储的几种方式

单体架构可以直接把图片存储在服务器中

但是在分布式环境下面直接存储在WEB服务器中的方式就不可取了,这时我们需要搭建独立的文件存储服务器。

3.1 开通阿里云服务

针对本系统中的相关的文件,图片,文本等统一的交给云服务器管理。阿里云服务地址:https://www.aliyun.com/activity/daily/award?utm_content=se_1010784590

阿里云OSS简介

阿里云对象存储服务(Object Storage Service,简称OSS),是阿里云对外提供的海量、安全、低成本、高可靠的云存储服务。您可以通过本文档提供的简单的REST接口,在任何时间、任何地点、任何互联网设备上进行上传和下载数据。基于OSS,您可以搭建出各种多媒体分享网站、网盘、个人和企业数据备份等基于大规模数据的服务。

选择对象存储OSS

第一次打开没有开通,开通即可

然后进入了OOS对象存储的主页面

查看相关的文档:https://help.aliyun.com/document_detail/31947.html

相关术语介绍

创建Bucket

创建好的效果

在阿里云中直接操作文件上传

上传成功,我们拿到地址即可访问:

3.2 阿里云API使用

最终我们是需要通过服务代码将图片上传到阿里云OSS服务中,接下来看下代码API如何使用。Java操作的API文档地址:https://help.aliyun.com/document_detail/32008.html?spm=5176.208357.1107607.21.3476390f9Pqw6K

添加相关的依赖

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.10.2</version>
</dependency>

创建子账户

设置对应的权限

通过官方的案例代码测试上传操作

    @Test
    public void testUploadFile() throws FileNotFoundException 
        // yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1(杭州)为例,Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
        String endpoint = "oss-cn-guangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
        String accessKeyId = "**********";
        String accessKeySecret = "************";

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // 填写本地文件的完整路径。如果未指定本地路径,则默认从示例程序所属项目对应本地路径中上传文件流。
        InputStream inputStream = new FileInputStream("C:\\\\Users\\\\dpb\\\\Downloads\\\\1111.jpg");
        // 依次填写Bucket名称(例如examplebucket)和Object完整路径(例如exampledir/exampleobject.txt)。Object完整路径中不能包含Bucket名称。
        ossClient.putObject("mashibing-mall", "1111.jpg", inputStream);

        // 关闭OSSClient。
        ossClient.shutdown();
        System.out.println("长传图片成功...");
    

执行成功

3.3 AlibabaOSS服务

直接通过阿里云提供的API操作相对的复杂一些,这时我们可以通过SpringCloudAlibaba OSS服务来简化开发,添加对应的依赖

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

在属性文件中配置对应的AccessKey,SecurtKey和Endpoint

然后我们在业务代码中就可以直接从容器中获取OSSClient对象

3.4 图片上传的方式

第一种方式:表单提交同步将表单数据和图片都提交到后端服务器中,然后在后端服务器中将图片再上传到阿里云服务中。

但是这种方式的缺点是要做两次上传操作,还有就是将图片和正常的表单信息一起提交影响正常业务的效率。

第二种方式就是在客户端直接将图片上传到阿里云服务器中,返回访问的url地址,然后将url访问地址传递到后端服务进而保存在数据库中。

这种方式的缺点是在客户端需要获取AccessKey和SecuretKey,这样将相关的核心数据暴露在前端不安全。

第三种方式就是客户端向服务器获取阿里云的防伪签名,然后直接将图片通过防伪签名上传到阿里云服务器中。这样既提高了效率又保证了安全。

3.5 第三方公共服务

清楚了文件上传的方式后,客户端需要从服务器中获取服务防伪签名信息,同时我们后面还有很多其他的第三方服务,比如发送短信等,这时我们可以专门创建一个第三方的服务来处理这些请求。

修改pom文件中的SpringBoot的版本和SpringCloud的版本使其和其他模块的版本保持一致,然后同步注册中心和配置中心的操作。引入阿里云OSS服务的相关API,并测试即可

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.12</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.msb.mall</groupId>
    <artifactId>mall-third-party</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>mall-third-party</name>
    <description>第三方服务</description>
    <properties>
        <java.version>1.8</java.version>
        <spring-cloud.version>2020.0.1</spring-cloud.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>com.msb.mall</groupId>
            <artifactId>mall-commons</artifactId>
            <version>0.0.1-SNAPSHOT</version>
            <exclusions>
                <exclusion>
                    <groupId>com.baomidou</groupId>
                    <artifactId>mybatis-plus-boot-starter</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-openfeign</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alicloud-oss</artifactId>
            <version>2.1.0.RELEASE</version>
        </dependency>
    </dependencies>
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>$spring-cloud.version</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

属性文件:application.yml

# 数据库的连接新
spring:
  cloud:
    nacos:
      discovery:
        server-addr: 192.168.56.100:8848
    alicloud:
      access-key: ******
      secret-key: *********
      oss:
        endpoint: ********
    application:
      name: mall-third
server:
  port: 8090

bootstrap.property

spring.application.name=mall-third
spring.cloud.nacos.config.server-addr=192.168.56.100:8848


注意在启动类中别忘了放开注册中心

测试图片上传的代码直接拷贝即可

3.6 服务端生成签名

生成签名地址:https://help.aliyun.com/document_detail/31926.htm?spm=a2c4g.11186623.0.0.2688566aJheBNk#concept-en4-sjy-5db

直接通过案例代码改造即可:https://help.aliyun.com/document_detail/91868.htm?spm=a2c4g.11186623.0.0.49c1344eaX3VCA#concept-ahk-rfz-2fb

@RestController
public class OSSController 

    @Autowired
    private OSS ossClient;

    @Value("$spring.cloud.alicloud.oss.endpoint")
    private String endpoint;
    @Value("$spring.cloud.alicloud.oss.bucket")
    private String bucket;
    @Value("$spring.cloud.alicloud.access-key")
    private String accessId;

    @RequestMapping("/oss/policy")
    public Map<String, String> getOssPolicy()

        String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
        // callbackUrl为上传回调服务器的URL,请将下面的IP和Port配置为您自己的真实信息。
        String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        String dir = format+"/"; // 用户上传文件时指定的前缀。

        // 创建OSSClient实例。
        //OSS ossClient = new OSSClientBuilder().build(endpoint, accessId, accessKey);
        Map<String, String> respMap = null;
        try 
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);
            // PostObject请求最大可支持的文件大小为5 GB,即CONTENT_LENGTH_RANGE为5*1024*1024*1024。
            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);

            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));


         catch (Exception e) 
            // Assert.fail(e.getMessage());
            System.out.println(e.getMessage());
         finally 
            ossClient.shutdown();
        
        return respMap;
    


相关的属性配置

# 数据库的连接新
spring:
  cloud:
    nacos:
      discovery:
        server-addr: 192.168.56.100:8848
    alicloud:
      access-key: ******
      secret-key: ******
      oss:
        endpoint: oss-cn-guangzhou.aliyuncs.com
        bucket: mashibing-mall
    application:
      name: mall-third
server:
  port: 8090

访问即可:

客户端获取服务签名的时候肯定是走的网关路由,所以我们还需要在网关中添加Third服务的路由:

然后通过网关调用获取服务签名

3.7 品牌图片上传

第一个我们需要借助ElementUI中提供的el-upload组件来实现上传操作,我们预先准备了相关的上传代码

然后将这三个文件拷贝到项目目录中

然后在添加修改品牌的窗口中添加上传的组件

在操作中,我们发下获取的数据是从response.data中获取的,但是我们在服务端返回的是Map数据,没有data封装,这时我们需要调整后端Thrid服务接口的返回信息通过R对象来返回

最后OSS上传还会出现跨域问题,参考官方文档配置即可

出现跨域问题的解决方案

然后在OSS服务端也可以看到我们上传成功的文件

单独的文件上传我们就搞定了!

4. 添加品牌信息

图片上传处理完成后我们就可以实现品牌数据的添加和修改操作

提交后的数据在table中显示的是logo的图片地址,我们需要将其显示出来

5. 前端校验

我们在前端提交的表单数据,我们也是需要对提交的数据做相关的校验的

Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可

校验的页面效果

前端数据校验就搞定了。后端校验也是不可避免的

6. 后端服务校验

6.1 JSR-303介绍

  JSR是Java Specification Requests的缩写,意思是Java 规范提案。是指向JCP(Java Community Process)提出新增一个标准化技术规范的正式请求。任何人都可以提交JSR,以向Java平台增添新的API和服务。JSR已成为Java界的一个重要标准。

  JSR-303 是JAVA EE 6 中的一项子规范,叫做Bean Validation,Hibernate Validator 是 Bean Validation 的参考实现 . Hibernate Validator 提供了 JSR 303 规范中所有内置 constraint 的实现,除此之外还有一些附加的 constraint。
  Hibernate Validator 是 Bean Validation 的参考实现 . Hibernate Validator 提供了 JSR 303 规范中所有内置 constraint 的实现,除此之外还有一些附加的 constraint。

Hibernate 中填充一部分

6.2 后端校验实现

1.需要在commons服务中添加对应的依赖

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
            <version>2.4.12</version>
        </dependency>

2.在需要校验的Bean的字段头部添加对应的注解

3.通过@Valid注解来开启JSR303的校验

4.测试,通过postman提交空的数据

当我们提交一个非空的数据是可以通过的

5.校验不合法的提示信息,在Controller中通过 BindingResult对象来获取校验的结果信息,然后解析出来后封装为R对象响应

    @RequestMapping("/save")
    //@RequiresPermissions("product:brand:save")
    public R save(@Valid @RequestBody BrandEntity brand, BindingResult result)
        if(result.查看详情  

第十四篇商城系统-异步处理利器-completablefuture(代码片段)

异步处理一、线程的实现方式1.线程的实现方式1.1继承ThreadclassThreadDemo01extendsThread@Overridepublicvoidrun()System.out.println("当前线程:"+Thread.currentThread().getName());1.2实现Runnable接口classThreadDemo02impl 查看详情

docker第四篇docker仓库管理(代码片段)

一、仓库概述仓库(Repository):仓库是集中存放镜像文件的场所,仓库分为公共仓库和私有仓库。注册服务器(Registry)和仓库区别:注册服务器上往往存放着多个仓库,每个仓库中又包含了多个镜像,每个镜像有不同的标签(tag... 查看详情

第四篇:文件处理(代码片段)

一、文件操作介绍计算机系统分为:计算机硬件,曹祖系统,应用程序三部分。我们用Python或其他语言编写的应用程序若想要把数据永久保存下来,必须要保存于硬盘中,这就涉及到应用程序要操作硬件,众所周知,应用程序是... 查看详情

advancedlocomotionsystemv第四篇c++实现角色跑步旋转和原地旋转(代码片段)

效果展示查看所有文章AdvancedLocomotionSystemV项目地址Gitee项目实现思维导图这个地方主要就是在于动画的播放和人物的旋转值进行的匹配。通过控制动画播放的速率来控制动画播放的时间,然后角色模块收到曲线值的通知进行... 查看详情

第四篇:路由网关(zuul)(代码片段)

一 Zuul简介Zuul的主要功能是路由转发和过滤器。路由功能是微服务的一部分,比如/user/**转发到到user服务,/api/**转发到到api服务。zuul默认和Ribbon结合实现了负载均衡的功能。二 Zuul的路由功能创建一个Module叫zuul &nbs... 查看详情

数据结构初阶第四篇——双链表(实现+图解)(代码片段)

这篇博客,我要给大家分享双链表的知识,上一篇博客,我给大家分享了有关单链表的知识,单链表相比双链表而言结构比较简单,但事实上,双链表的实现比单链表要方便很多,下面我就来给大家聊... 查看详情

第四篇camunda系列-processengine核心对象(代码片段)

一、ProcessEngine  ProcessEngine是Camunda流程引擎的核心。我们在流程中的很多具体的处理比如流程部署、流程部署、流程审批等操作都是通过XXXService来处理的。而相关的XXXService都是通过ProcessEngine来管理的。所以对于ProcessEngine的... 查看详情

第四篇camunda系列-processengine核心对象(代码片段)

一、ProcessEngine  ProcessEngine是Camunda流程引擎的核心。我们在流程中的很多具体的处理比如流程部署、流程部署、流程审批等操作都是通过XXXService来处理的。而相关的XXXService都是通过ProcessEngine来管理的。所以对于ProcessEngine的... 查看详情

第四篇camunda系列-processengine核心对象(代码片段)

一、ProcessEngine  ProcessEngine是Camunda流程引擎的核心。我们在流程中的很多具体的处理比如流程部署、流程部署、流程审批等操作都是通过XXXService来处理的。而相关的XXXService都是通过ProcessEngine来管理的。所以对于ProcessEngine的... 查看详情

tomcat第四篇——生命周期(代码片段)

LifecycleTomcat中进行生命周期管理的接口是Lifecycle,Tomcat中的组件基本都继承了该接口。下面来看看该接口中生命周期方法的定义:Lifecycle定义了四种生命周期状态:init、start、stop、destroy,并且提供了四个方法ÿ... 查看详情

第三篇商城系统-基础业务-实现类别管理(代码片段)

商城系统-基础业务-分类管理  在上一篇的基础上继续介绍。启动renren-fast如果出现如下错误-Djps.track.ap.dependencies=false添加相关配置即可分类管理1.后端分类接口JDK8特性:https://blog.csdn.net/qq_38526573/category_11113126.html在后端... 查看详情

基于ssm实现水果蔬菜商城管理系统(代码片段)

...,完成了一个主要用于销售用果和蔬菜等产品的在线商城销售管理系统。系统的前端用户 查看详情

第四篇集合与容器(代码片段)

packagecom.zzp.demo.myCollection;/****用于HashMap*@authorjava**/publicclassNode2 inthash; Objectkey; Objectvalue; Node2next;  packagecom.zzp.demo.myCollection;/****自定义HashMap*@authorjava**/public 查看详情

abp异常处理第四篇(代码片段)

异常ABP异常分类 ABP的异常基类源代码ABPException的源代码如下///<summary>///BaseexceptiontypeforthosearethrownbyAbpsystemforAbpspecificexceptions.///</summary>[Serializable]publicclassAbpException:Exceptio 查看详情

第四篇io流技术(代码片段)

packagecom.zzp.demo01;importjava.io.File;importjava.io.FileInputStream;importjava.io.FileNotFoundException;importjava.io.IOException;importjava.io.InputStream;/****第一个程序理解操作步骤*1、创建源*2、选择流*3、操作*4、释放资源* 查看详情

linux从青铜到王者第二十四篇:linux网络基础第四篇之websocket协议(代码片段)

系列文章目录文章目录系列文章目录前言一、WebSocket简介二、WebSocket产生背景三、WebSocket实现原理四、WebSocket协议举例五、WebSocket使用1.WebSocket介绍2.WebSocketAPI3.WebSocket事件1.open2.Message3.Error4.Close4.WebSocket方法1.send()2.close()5.WebSocket... 查看详情

docker系列-第四篇docker镜像(代码片段)

1.镜像是什么镜像是一种轻量级、可执行的独立软件包,用来打包软件运行环境和基于运行环境开发的软件,它包含运行某个软件所需的所有内容,包括代码、运行时、库、环境变量和配置文件。1.1UnionFS(联合文件系统)UnionFS... 查看详情