【商城项目12】品牌管理和阿里OSS

【商城项目12】品牌管理和阿里OSS

1.生成前端代码vue

人人generator生成的商品管理的逆向工程代码：

生成代码里：renren_2.zip\main\resources\src\views\modules\mailproducts

有brand.vue和brand-add-or-update.vue两个文件，把他复制到vscode里modules/products

在快速开发平台新建菜单，品牌管理，url填写/products/brand

然后就可以查看了：

把权限设为true：

ctrl shift f全局查找，搜索isAuth

找到那个export的文件

注释之前的return，改为return true

重启前端，可以看到新增和删除按钮

并且功能已经写好。可以新增和批量删除。

2.优化显示状态为开关按钮

在显示状态el-table-column添加template里面添加el-switch

给他设定开启时为1，不开启为0，还有开启和关闭的颜色，还有v-model绑定的属性

发生变化时调用函数：

updateBrandStatus(data) {
      console.log("最新信息", data);
      let { brandId, showStatus } = data;
      //发送请求修改状态
      this.$http({
        url: this.$http.adornUrl("/mailproducts/brand/update"),
        method: "post",
        data: this.$http.adornData({ brandId, showStatus }, false)
      }).then(({ data }) => {
        this.$message({
          type: "success",
          message: "状态更新成功"
        });
      });
    },

后端不用改，直接用/mailproducts/brand/update。

3.开通阿里oss

登录控制台-左上角选择oss-开通服务-创建bucket-低频-公开读。

右上角通过sdk管理文件-选择java sdk-在帮助文档中心打开：

大致步骤如下：

加入依赖：

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

新建test：

@Test
public void testup() throws FileNotFoundException {
    // Endpoint以杭州为例，其它Region请按实际情况填写。
    String endpoint = "xxxxxxxxxxxxxxxx";
// 云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用RAM子账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建。
    String accessKeyId = "xxxxxxxxxxxxx";
    String accessKeySecret = "xxxxxxxxxxxxxxx";

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

// 上传文件流。
    InputStream inputStream = new FileInputStream("xxxxxxxxxx");
    ossClient.putObject("xxxxxx", "xxxxxxxx", inputStream);

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

1.进入oss控制台–bucket列表，点击创建的bucket–可以查看到endpoint，填入。

2.阿里云控制台—右上角–accesskey–开始使用子用户accesskey–RAM访问控制立刻开通–右上角-accesskey–开始使用子用户accesskey–新建用户–填入登录名称–选中编程访问–手机验证码–自动生成accesskey id和secret-选中此行–添加权限–选择oss控制full权限。填入。

3.填入绝对路径（注意双斜杠）–bucket名称----文件名称，填入。

4.test运行一下。

4.配置oss

common添加依赖

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

products添加yam配置：

   alicloud:
      access-key: xxxxxxxxxx
      secret-key: xxxxxxxxxxx
      oss:
        endpoint: xxxxxxxxxxxxxxxx

test加入注解：

    @Autowired
    OSSClient ossClient;

直接上传即可：

/ 上传文件流。
    InputStream inputStream = new FileInputStream("E:\\P压缩图片\\万能素材\\ca2m.png");
    ossClient.putObject("ufomail", "ca2m.png", inputStream);

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

上传成功。