商城项目09_品牌管理菜单快速显示开关阿里云进行文件上传结合Alibaba管理OSS服务端签名后直传

Posted 2022-09-12 所得皆惊喜

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了商城项目09_品牌管理菜单快速显示开关阿里云进行文件上传结合Alibaba管理OSS服务端签名后直传相关的知识，希望对你有一定的参考价值。

文章目录

①. 品牌管理菜单
②. 快速显示开关
③. 阿里云上传概述
④. 使用代码进行文件上传
⑤. 结合Alibaba来管理oss
⑥. gulimall-third-party微服务
⑦. 服务端签名后直传
⑧. 结合前端实现文件直传

①. 品牌管理菜单

①. 后台:系统管理/菜单管理/新增
②. 将逆向工程product得到的resources\\src\\views\\modules\\product文件拷贝到gulimall/renren-fast-vue/src/views/modules/product目录下’也就是下面的两个文件
brand.vue : 显示的表单
brand-add-or-update.vue:添加和更改功能
③. 但是显示的页面没有新增和删除功能’这是因为权限控制的原因

<el-button v-if="isAuth('product:brand:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<el-button v-if="isAuth('product:brand:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>

④. 查看“isAuth”的定义位置:将方法的返回值返回true,然后再次刷新页面(也可以将v-if注释掉)
⑤. 注释掉检测语法
build/webpack.base.conf.js 中注释掉createLintingRule()函数体’不进行lint语法检查

②. 快速显示开关

①. 实现的效果如下
②. 前台页面(参照elementui进行显示)

<el-table-column
   prop="showStatus"
   header-align="center"
   align="center"
   label="显示状态"
   width="200"
 >
   <template slot-scope="scope">
     <el-switch
       v-model="scope.row.showStatus"
       active-color="#13ce66"
       inactive-color="#ff4949"
       :active-value="1"
       :inactive-value="0"
       @change="updateBrandStatus(scope.row)"
     ></el-switch>
   </template>
</el-table-column>

//更新开关的状态
updateBrandStatus(data) 
  // 传入了改变行的数据
  console.log("最新状态", data);
  let  brandId, showStatus  = data;
  this.$http(
    url: this.$http.adornUrl("/product/brand/update"),
    method: "post",
    data: this.$http.adornData( brandId, showStatus , false)
  ).then(( data ) => 
    this.$message(
      message: "状态更新成功",
      type: "success"
    );
  );
,

③. 后台接口

@RestController
@RequestMapping("product/brand")
public class BrandController 
    /** * 修改 */
    @RequestMapping("/update")
    public R update(@RequestBody BrandEntity brand)
        brandService.updateById(brand);
        return R.ok();

@Data
@TableName("pms_brand")
public class BrandEntity implements Serializable 
	private static final long serialVersionUID = 1L;
	/* 品牌id */
	@TableId
	private Long brandId;
	/*** 品牌名 */
	private String name;
	/*** 品牌logo地址 */
	private String logo;
	/*** 介绍 */
	private String descript;
	/**
	 * 显示状态[0-不显示；1-显示]
	 */
	private Integer showStatus;
	/** * 检索首字母 */
	private String firstLetter;
	/** * 排序 */
	private Integer sort;

④. 在新增或者修改的时候也要将按钮进行修改
brand-add-or-update.vue

<el-form-item label="显示状态" prop="showStatus">
    <el-switch v-model="dataForm.showStatus"
               active-color="#13ce66"
               inactive-color="#ff4949"
               :active-value="1"
               :inactive-value="0"
               >
    </el-switch>
</el-form-item>

③. 阿里云上传概述

①. 阿里云上使使用对象存储方式:
②. 创建Bucket,我们的Bucket名称叫 gulimall-tangzhi
③. 上传文件:上传成功后’取得图片的URL
这种方式是手动上传图片’实际上我们可以在程序中设置自动上传图片到阿里云对象存
④. 我们后续将采用下面的方式进行图片的储存

④. 使用代码进行文件上传

①. 简单文件上传OSS官方文档
②. 添加依赖包,查看官方代码

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

// Endpoint以杭州为例'其它Region请按实际情况填写。
String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
// 云账号AccessKey有所有API访问权限'建议遵循阿里云安全最佳实践'创建并使用RAM子账号进行API访问或日常运维'请登录 https://ram.console.aliyun.com 创建。
String accessKeyId = "<yourAccessKeyId>";
String accessKeySecret = "<yourAccessKeySecret>";

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

// 上传文件流。
InputStream inputStream = new FileInputStream("<yourlocalFile>");
ossClient.putObject("<yourBucketName>", "<yourObjectName>", inputStream);

// 关闭OSSClient。
ossClient.shutdown();

 @Test
    public void upload()throws Exception
        // 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 = "LTAI5t7E9sokgukBNzP45nX1";
        String accessKeySecret = "yKzdbTeQETI4u9okOAPDvSscEa5pVT";

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

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

        // 关闭OSSClient。
        ossClient.shutdown();

③. endpoint指的是什么？
④. accessKeyId和accessKeySecret指的是什么？

步骤
(1). accessKeyId和accessKeySecret需要创建一个RAM账号:

(2). 创建用户完毕后’会得到一个“AccessKey ID”和“AccessKeySecret”'然后复制这两个值到代码的“AccessKey ID”和“AccessKeySecret”。另外还需要添加访问控制权限:

⑤. 我们在项目中使用的是SpringCloud Alibaba来管理oss,后续会进行介绍

⑤. 结合Alibaba来管理oss

①. 使用SpringCloud Alibaba来管理oss
②. 使用方式

Add dependency aliyun-oss-spring-boot-starter in the pom.xml file in your Spring Boot project.
Configure accessKeyId, secretAccessKey and region in application.properties.

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

// application.properties
alibaba.cloud.access-key=your-ak
alibaba.cloud.secret-key=your-sk
alibaba.cloud.oss.endpoint=***

③. 我们在common工程中引入oss的依赖
④. 在product工程中进行测试

# DataSource Config
spring:
  cloud:
    alicloud:
      access-key: LTAI5t7E9sokgukBNzP45nX1
      secret-key: yKzdbTeQETI4u9okOAPDvSscEa5pVT
      oss:
        endpoint: oss-cn-guangzhou.aliyuncs.com

@Resource
OSSClient ossClient;

@Test
public void uploadCloudAlibaba()throws Exception
    // 填写本地文件的完整路径。如果未指定本地路径'则默认从示例程序所属项目对应本地路径中上传文件流。
    InputStream inputStream = new FileInputStream("C:\\\\Users\\\\Administrator\\\\Desktop\\\\car2.jpg");
    // 依次填写Bucket名称(例如examplebucket)和Object完整路径(例如exampledir/exampleobject.txt)。Object完整路径中不能包含Bucket名称。
    ossClient.putObject("gulimall-tangzhi", "car2.jpg", inputStream);

⑤. 但是这样来做还是比较麻烦’如果以后的上传任务都交给gulimall-product来完成’显然耦合度高。最好单独新建一个Module来完成文件上传任务

⑥. gulimall-third-party微服务

①. 环境配置如下
因为在common工程中引入了mybatis-plus,我们这个gulimall-third-party服务将其依赖进行排除掉

<?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.1.8.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.atguigu.gulimall</groupId>
    <artifactId>gulimall-third-party</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>gulimall-third-party</name>
    <description>第三方服务</description>

    <properties>
        <java.version>1.8</java.version>
        <spring-cloud.version>Greenwich.SR3</spring-cloud.version>
    </properties>


    <dependencies>
        <dependency>
            <groupId>com.atguigu.gulimall</groupId>
            <artifactId>gulimall-common</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>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alicloud-oss</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </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>
            <dependency>
                <groupId>com.alibaba.cloud</groupId>
                <artifactId>spring-cloud-alibaba-dependencies</artifactId>
                <version>2.1.0.RELEASE</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>

    <repositories>
        <repository>
            <id>spring-milestones</id>
            <name>Spring Milestones</name>
            <url>https://repo.spring.io/milestone</url>
        </repository>
    </repositories>
</project>

②. bootstrap.properties配置nacos配置中心

spring.application.name=gulimall-third-party
spring.cloud.nacos.config.server-addr=127.0.0.1:8848
spring.cloud.nacos.config.namespace=39e31ec7-194c-4741-b4f2-2b65142c2100
spring.cloud.nacos.config.ext-config[0].data-id=oss.yml
spring.cloud.nacos.config.ext-config[0].group=DEFAULT_GROUP
spring.cloud.nacos.config.ext-config[0].refresh=true

③. application.yaml

spring:
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848
    alicloud:
      access-key: LTAI5t7E9sokgukBNzP45nX1
      secret-key: yKzdbTeQETI4u9okOAPDvSscEa5pVT
      oss:
  以上是关于商城项目09_品牌管理菜单快速显示开关阿里云进行文件上传结合Alibaba管理OSS服务端签名后直传的主要内容，如果未能解决你的问题，请参考以下文章 
 第179天学习打卡（项目 谷粒商城21 删除 批量删除小结 品牌管理 效果优化与快速显示开关）
 第180天学习打卡（项目 谷粒商城22 云存储开通与使用 阿里云对象存储 OOS获取服务端签名）
 阿里云项目nodejs部署
 阿里云项目nodejs部署
 在线教育_Day06_项目整合阿里云OSS和Excel导入分类
 Day06_项目整合阿里云OSS和Excel导入分类