目录

一、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

fastgpt java接口_fastDFS的java客户端

1.引入依赖

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

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

 

fastgpt java接口_fastDFS的java客户端_02

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

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

 

fastgpt java接口_fastDFS的java客户端_03

2.引入配置类

 

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

fastgpt java接口_fastDFS的java客户端_04

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

fastgpt java接口_数据_05

结果：

group1/M00/00/00/wKg4ZVro5eCAZEMVABfYcN8vzII630.png
M00/00/00/wKg4ZVro5eCAZEMVABfYcN8vzII630.png
M00/00/00/wKg4ZVro5eCAZEMVABfYcN8vzII630_60x60.png

访问第一个路径：

fastgpt java接口_数据_06

 

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

fastgpt java接口_上传_07

 

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测试：

fastgpt java接口_数据_08

6.页面测试上传

 发现上传成功：

fastgpt java接口_fastDFS的java客户端_09

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

fastgpt java接口_上传_10

 

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

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

修改我们的hosts：

fastgpt java接口_fastDFS的java客户端_11

 

再次上传：

fastgpt java接口_上传_12

 

修改nginx文件上传限制

 

fastgpt java接口_上传_13

二.修改品牌

 

修改的难点在于回显。

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

fastgpt java接口_上传_14

1.点击编辑出现弹窗

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

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

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

fastgpt java接口_fastDFS的java客户端_15

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

2.回显数据

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

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

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

fastgpt java接口_数据_16

 

 我们在页面触发编辑事件时，把当前的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会自动完成回显

接收数据：

 

fastgpt java接口_fastDFS的java客户端_17

通过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 自定义的对对象进行深度复制的方法。
  • 需要判断监听到的是否为空，如果为空，应该进行初始化

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

fastgpt java接口_fastgpt java接口_18

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

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

fastgpt java接口_上传_19

3.新增窗口数据干扰

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

原因：

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

 

解决：

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

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

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

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

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

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

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

fastgpt java接口_fastgpt java接口_20

 

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

fastgpt java接口_fastgpt java接口_21

 

第三步：传递给子组件

fastgpt java接口_上传_22

 

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

fastgpt java接口_fastgpt java接口_23

标题的动态化：

 

fastgpt java接口_fastDFS的java客户端_24

表单提交动态：

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("保存失败！");
});