谷粒商城-day06-OSS的引入

最新推荐文章于 2024-07-25 11:49:39 发布

周周写不完的代码

最新推荐文章于 2024-07-25 11:49:39 发布

阅读量304

点赞数

分类专栏：谷粒商城

本文链接：https://blog.csdn.net/qq_39007838/article/details/114550308

版权

谷粒商城专栏收录该内容

15 篇文章 6 订阅

订阅专栏

使用逆向的前后端代码

这里的图片地址用的是 oss url

新建一个菜单

这里使用逆向生成的模块文件，展示基本的列表和 crud

复制到我们的 modules/product 目录下面

重启项目

这是展示的效果，可以看到没有删除和新增按钮，这里需要权限判断才会显示

这里让它默认返回 true

可以看到我们的新增和批量删除都有了

测试一下

这里的细节还需要自己完善

效果优化和快速显示开关

关掉 eslint

更改显示状态的页面控件

自定义列模板

参考 elementui上面的资料，可以看出是基于插槽机制去实现的

<el-table-column
  prop="showStatus"
  header-align="center"
  align="center"
  label="显示状态"
>
  <template slot-scope="scope">
    <el-switch
      v-model="scope.row.showStatus"
      active-color="#13ce66"
      inactive-color="#ff4949"
    >
    </el-switch>
  </template>
</el-table-column>

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

对话框

增加对话框输入左侧的距离

 <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="140px">

label-width="140px"

<el-switch
  v-model="scope.row.showStatus"
  active-color="#13ce66"
  inactive-color="#ff4949"
  @change="updateBrandStatus"
>
</el-switch>

updateBrandStatus(status) {
  console.log('最新状态：'  + status);
}

测试接口

这里还需要自定义配置 switch 激活的值

:active-value="1"

:inactive-value="0"

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

updateBrandStatus(data) {
      console.log("最新信息：" + data.showStatus);
      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({
          type: "success",
          message: "状态更新成功"
        });
      });
    }

OSS

新建一个bucket

参考这个

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

地域节点

分配 oss 访问权限

@Test
    public void testUpload() throws FileNotFoundException {
        // Endpoint以杭州为例，其它Region请按实际情况填写。
        String endpoint = "oss-cn-beijing.aliyuncs.com";
        // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
        String accessKeyId = "xxxxxxxxxxxxxx";
        String accessKeySecret = "xxxxxxxxxxxxxxxx";

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

        // 上传文件到指定的存储空间（bucketName）并将其保存为指定的文件名称（objectName）。
        FileInputStream fileInputStream = new FileInputStream("C:\\Users\\15292\\Desktop\\zz.jpg");

        ossClient.putObject("gulimall-hello-zz", "zz.jpg", fileInputStream);

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

        System.out.println("上传成功");
    }

demo 测试

使用 starter 的方式

在 common 里面引入

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

spring:
    alicloud:
      access-key: LTAIxxxxxxxxx
      secret-key: HFTxxxxxxxxxxxxxxx
      oss:
        endpoint: oss-cn-beijing.aliyuncs.com

直接注入 OssClient

服务端签名

<?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.9.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.zhouzhou.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>2020.0.1</spring-cloud.version>
    </properties>
    <dependencies>
        <!--ali oss-->
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alicloud-oss</artifactId>
        </dependency>
        <dependency>
            <groupId>com.zhouzhou.gulimall</groupId>
            <artifactId>gulimall-common</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </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>


    </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>

</project>

spring.application.name=gulimall-third-party
spring.cloud.nacos.config.server-addr=127.0.0.1:8848
spring.cloud.nacos.config.namespace=91736e2d-24ef-4a02-8d05-715377a82824

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

以上是配置中心

<dependency>
            <groupId>com.zhouzhou.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>

spring:
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848

  application:
    name: gulimall-third-party

server:
  port: 30000

注册中心

然后加上注解

package com.zhouzhou.gulimall.thirdparty;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.client.discovery.EnableDiscoveryClient;


@EnableDiscoveryClient
@SpringBootApplication
public class GulimallThirdPartyApplication {

    public static void main(String[] args) {
        SpringApplication.run(GulimallThirdPartyApplication.class, args);
    }

}

启动

这里遇到了三个坑。第一个是 pom 里面指定 springcloud 版本的时候的问题

第二个是，这里的配置需要新建在对应的名称空间下面

第三个是，yml文件的格式

在我们抽离出来的第三方服务模块中再次测试

package com.zhouzhou.gulimall.thirdparty.controller;


import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClient;
import com.aliyun.oss.common.utils.BinaryUtil;
import com.aliyun.oss.model.MatchMode;
import com.aliyun.oss.model.PolicyConditions;
import com.zhouzhou.common.utils.R;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.Map;

@RestController
public class OssController {

    @Autowired
    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 R policy() {
        // https://gulimall-hello-zz.oss-cn-beijing.aliyuncs.com/zz.jpg
        String bucket = "gulimall-hello-zz";
        String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint

        String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        String dir = format + "/"; // 用户上传文件时指定的前缀。


        Map<String, String> respMap = null;
        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);

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

        return R.ok().put("data",respMap);
    }

}

spring:
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848
    alicloud:
      access-key: xxx
      secret-key: xxx
      oss:
        endpoint: oss-cn-beijing.aliyuncs.com
        bucket: gulimall-hello-zz


  application:
    name: gulimall-third-party

server:
  port: 30000

- id: third_party_route
  uri: lb://gulimall-third-party
  predicates:
    - Path=/api/thirdparty/**
  filters:
    - RewritePath=/api/thirdparty/(?<segment>.*),/$\{segment}

网关的配置 http://localhost:88/api/thirdparty/oss/policy

前后端联调

把 upload 文件夹放到 components 文件夹下面

单文件和多文件都需要修改这个属性

import singleUpload from "@/components/upload/singleUpload"

export default {
  components: { singleUpload },

先引入组件

<el-form-item label="品牌logo地址" prop="logo">
  <single-upload v-model="dataForm.logo"></single-upload>
</el-form-item>

配置跨域

测试

去掉斜杠

周周写不完的代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录