微服务项目之电商--16.fastDFS的java客户端及修改品牌、回显数据、商品分类回显

柔情只为你懂 2021-11-05 16:52 191阅读 0赞

**目录**

一、fastDFS的java客户端

1.引入依赖

2.引入配置类

3.编写FastDFS属性

4.测试

5.改造上传逻辑

6.测试

6.页面测试上传

二.修改品牌

1.点击编辑出现弹窗

2.回显数据

3、商品分类回显

1.后台提供接口

2.前台查询分类并渲染

3.新增窗口数据干扰

4.提交表单时判断是新增还是修改

--------------------

# 一、fastDFS的java客户端 #

余庆先生提供了一个Java客户端，但是作为一个C程序员，写的java代码可想而知。而且已经很久不维护了。

这里推荐一个开源的FastDFS客户端，支持最新的SpringBoot2.0。

配置使用极为简单，支持连接池，支持自动生成缩略图，狂拽酷炫吊炸天啊，有木有。

地址：[tobato/FastDFS\_client][tobato_FastDFS_client]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70][]

## 1.引入依赖 ##

在父工程中，我们已经管理了依赖，版本为：

<fastDFS.client.version>1.26.2</fastDFS.client.version>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 1][]

因此，这里我们直接在子工程中引入坐标即可：

<dependency>
        <groupId>com.github.tobato</groupId>
        <artifactId>fastdfs-client</artifactId>
    </dependency>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 2][]

## 2.引入配置类 ##

@Configuration
    @Import(FdfsClientConfig.class)
    // 解决jmx重复注册bean的问题
    @EnableMBeanExport(registration = RegistrationPolicy.IGNORE_EXISTING)
    public class FastClientImporter {
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 3][]

## 3.编写FastDFS属性 ##

fdfs:
      so-timeout: 1501
      connect-timeout: 601
      thumb-image: # 缩略图
        width: 60
        height: 60
      tracker-list: # tracker地址
        - 192.168.56.101:22122

### 4.测试 ###

@RunWith(SpringRunner.class)
    @SpringBootTest(classes = LyUploadService.class)
    public class FdfsTest {
    
        @Autowired
        private FastFileStorageClient storageClient;
    
        @Autowired
        private ThumbImageConfig thumbImageConfig;
    
        @Test
        public void testUpload() throws FileNotFoundException {
            File file = new File("D:\\test\\baby.png");
            // 上传并且生成缩略图
            StorePath storePath = this.storageClient.uploadFile(
                    new FileInputStream(file), file.length(), "png", null);
            // 带分组的路径
            System.out.println(storePath.getFullPath());
            // 不带分组的路径
            System.out.println(storePath.getPath());
        }
    
        @Test
        public void testUploadAndCreateThumb() throws FileNotFoundException {
            File file = new File("D:\\test\\baby.png");
            // 上传并且生成缩略图
            StorePath storePath = this.storageClient.uploadImageAndCrtThumbImage(
                    new FileInputStream(file), file.length(), "png", null);
            // 带分组的路径
            System.out.println(storePath.getFullPath());
            // 不带分组的路径
            System.out.println(storePath.getPath());
            // 获取缩略图路径
            String path = thumbImageConfig.getThumbImagePath(storePath.getPath());
            System.out.println(path);
        }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 4][]

结果：

group1/M00/00/00/wKg4ZVro5eCAZEMVABfYcN8vzII630.png  
M00/00/00/wKg4ZVro5eCAZEMVABfYcN8vzII630.png  
M00/00/00/wKg4ZVro5eCAZEMVABfYcN8vzII630\_60x60.png

访问第一个路径：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 5][]

访问最后一个路径（缩略图路径），注意加组名：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 6][]

## 5.改造上传逻辑 ##

@Service
    public class UploadService {
    
        private static final Logger logger = LoggerFactory.getLogger(UploadController.class);
    
        // 支持的文件类型
        private static final List<String> suffixes = Arrays.asList("image/png", "image/jpeg");
    
        @Autowired
        FastFileStorageClient storageClient;
    
        public String upload(MultipartFile file) {
            try {
                // 1、图片信息校验
                // 1)校验文件类型
                String type = file.getContentType();
                if (!suffixes.contains(type)) {
                    logger.info("上传失败，文件类型不匹配：{}", type);
                    return null;
                }
                // 2)校验图片内容
                BufferedImage image = ImageIO.read(file.getInputStream());
                if (image == null) {
                    logger.info("上传失败，文件内容不符合要求");
                    return null;
                }
    
                // 2、将图片上传到FastDFS
                // 2.1、获取文件后缀名
                String extension = StringUtils.substringAfterLast(file.getOriginalFilename(), ".");
                // 2.2、上传
                StorePath storePath = this.storageClient.uploadFile(
                        file.getInputStream(), file.getSize(), extension, null);
                // 2.3、返回完整路径
                return "http://image.leyou.com/" + storePath.getFullPath();
            } catch (Exception e) {
                return null;
            }
        }
    }

只需要把原来保存文件的逻辑去掉，然后上传到FastDFS即可。

## 6.测试 ##

通过RestClient测试：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 7][]

# 6.页面测试上传 #

发现上传成功：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 8][]

不过，当我们访问页面时：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 9][]

这是因为我们图片是上传到虚拟机的，ip为：192.168.56.101

因此，我们需要将image.leyou.com映射到192.168.56.101

修改我们的hosts：

![20190809080603818.png][]

再次上传：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 10][]

修改nginx文件上传限制

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 11][]

# 二.修改品牌 #

修改的难点在于回显。

当我们点击编辑按钮，希望弹出窗口的同时，看到原来的数据：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 12][]

## 1.点击编辑出现弹窗 ##

这个比较简单，修改show属性为true即可实现，我们绑定一个点击事件

<v-btn color="info" @click="editBrand">编辑</v-btn>

然后编写事件，改变show 的状态：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 13][]

如果仅仅是这样，编辑按钮与新增按钮将没有任何区别，关键在于，如何回显呢？

## 2.回显数据 ##

回显数据，就是把当前点击的品牌数据传递到子组件（MyBrandForm）。而父组件给子组件传递数据，通过props属性。

第一步：在编辑时获取当前选中的品牌信息，并且记录到data中

先在data中定义属性，用来接收用来编辑的brand数据：

![20190809081513303.png][]

我们在页面触发编辑事件时，把当前的brand传递给editBrand方法：

<v-btn color="info" @click="editBrand(props.item)">编辑</v-btn>

然后在editBrand中接收数据，赋值给oldBrand：

editBrand(oldBrand){
      // 控制弹窗可见：
      this.show = true;
      // 获取要编辑的brand
      this.oldBrand = oldBrand;
    },

第二步：把获取的brand数据 传递给子组件

<v-card-text class="px-5">
        <my-brand-form @close="closeWindow" :oldBrand="oldBrand"/>
    </v-card-text>

第三步：在子组件中通过props接收要编辑的brand数据，Vue会自动完成回显

接收数据：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 14][]

通过watch函数监控oldBrand的变化，把值copy到本地的brand：

watch: {
        oldBrand: {// 监控oldBrand的变化
            handler(val) {
                if(val){
                    // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
                    this.brand =  Object.deepCopy(val)
                }else{
                    // 为空，初始化brand
                    this.brand = {
                        name: '',
                        letter: '',
                        image: '',
                        categories: [],
                    }
                }
            },
                deep: true
        }
    }

*  Object.deepCopy 自定义的对对象进行深度复制的方法。
 *  需要判断监听到的是否为空，如果为空，应该进行初始化

测试：发现数据回显了，除了商品分类以外：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 15][]

## 3、商品分类回显 ##

为什么商品分类没有回显？

因为品牌中并没有商品分类数据。我们需要在进入编辑页面之前，查询商品分类信息：

### 1.后台提供接口 ###

controller

/**
         * 通过品牌id查询商品分类
         * @param bid
         * @return
         */
    @GetMapping("bid/{bid}")
    public ResponseEntity<List<Category>> queryByBrandId(@PathVariable("bid") Long bid) {
        List<Category> list = this.categoryService.queryByBrandId(bid);
        if (list == null || list.size() < 1) {
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        }
        return ResponseEntity.ok(list);
    }

Service

public List<Category> queryByBrandId(Long bid) {
        return this.categoryMapper.queryByBrandId(bid);
    }

> mapper

因为需要通过中间表进行子查询，所以这里要手写Sql：

/**
         * 根据品牌id查询商品分类
         * @param bid
         * @return
         */
    @Select("SELECT * FROM tb_category WHERE id IN (SELECT category_id FROM tb_category_brand WHERE brand_id = #{bid})")
    List<Category> queryByBrandId(Long bid);

### 2.前台查询分类并渲染 ###

我们在编辑页面打开之前，先把数据查询完毕：

editBrand(oldBrand){
        // 根据品牌信息查询商品分类
        this.$http.get("/item/category/bid/" + oldBrand.id)
            .then(({data}) => {
            // 控制弹窗可见：
            this.show = true;
            // 获取要编辑的brand
            this.oldBrand = oldBrand
            // 回显商品分类
            this.oldBrand.categories = data;
        })
    }

再次测试：数据成功回显了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 16][]

### 3.新增窗口数据干扰 ###

但是，此时却产生了新问题：新增窗口竟然也有数据？

原因：

如果之前打开过编辑，那么在父组件中记录的oldBrand会保留。下次再打开窗口，如果是编辑窗口到没问题，但是新增的话，就会再次显示上次打开的品牌信息了。

解决：

新增窗口打开前，把数据置空。

addBrand() \{  
    // 控制弹窗可见：  
    this.show = true;  
    // 把oldBrand变为null  
    this.oldBrand = null;  
\}

### 4.提交表单时判断是新增还是修改 ###

新增和修改是同一个页面，我们该如何判断？

父组件中点击按钮弹出新增或修改的窗口，因此父组件非常清楚接下来是新增还是修改。

因此，最简单的方案就是，在父组件中定义变量，记录新增或修改状态，当弹出页面时，把这个状态也传递给子组件。

第一步：在父组件中记录状态：

![20190809082036229.png][]

第二步：在新增和修改前，更改状态：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 17][]

第三步：传递给子组件

![20190809082112350.png][]

第四步，子组件接收标记：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 18][]

标题的动态化：

![20190809082142892.png][]

表单提交动态：

axios除了除了get和post外，还有一个通用的请求方式：

// 将数据提交到后台
    // this.$http.post('/item/brand', this.$qs.stringify(params))
    this.$http({
        method: this.isEdit ? 'put' : 'post', // 动态判断是POST还是PUT
        url: '/item/brand',
        data: this.$qs.stringify(this.brand)
    }).then(() => {
        // 关闭窗口
        this.$emit("close");
        this.$message.success("保存成功！");
    })
        .catch(() => {
        this.$message.error("保存失败！");
    });

[tobato_FastDFS_client]: https://github.com/tobato/FastDFS_Client
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70]: /images/20211104/3b8b3533961c4f849e813ee73ce5f21a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 1]: /images/20211104/5c39282d5c4f43a4885ef5c12cc778fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 2]: /images/20211104/328caddb223e4491b4907a953c48002c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 3]: /images/20211104/d47bf897a1734a12b735bb5ee2509872.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 4]: /images/20211104/2299b23cc79e465fa618fc752bffdb33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 5]: /images/20211104/06682bab02e343f5a602c3a036991607.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 6]: /images/20211104/0a1b38e1e04a4225a2af54e26d00f9fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 7]: /images/20211104/8e5671e389574c418ce92c695df264e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 8]: /images/20211104/def4589f889a4ce49902b91f84f3f25a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 9]: /images/20211104/5c579ce7853245cda89a8b0beff66003.png
[20190809080603818.png]: /images/20211104/528a85ca828b444e9f6d6e8fe353a547.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 10]: /images/20211104/d44cf365ea04418f99ad24bb02618e39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 11]: /images/20211104/c8bd21292670449d918dbd6ecc2f4276.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 12]: /images/20211104/315a3f3a362b4019b3cc6a59fe13178f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 13]: /images/20211104/acf713ea66eb428f93e68fd3b04f0759.png
[20190809081513303.png]: /images/20211104/307f7941a5df46ff8e35ce20daa8ab71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 14]: /images/20211104/4b5ebef27d404f428dd7c082446baeb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 15]: /images/20211104/09ac1db120e447989b02215a2df77d8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 16]: /images/20211104/96f5bced3e9a44a595475942d9f63dad.png
[20190809082036229.png]: /images/20211104/941344339d3c44f8890544bc4cc385a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 17]: /images/20211104/154b8110cddd4387aac7211ae12e7ac0.png
[20190809082112350.png]: /images/20211104/56b8dd8f60b54bef9639d16897d589cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 18]: /images/20211104/4805c9935642498c9823777442377258.png
[20190809082142892.png]: /images/20211104/ce5472508c6a4254a71a31c76a10905d.png