后台管理系统之品牌管理

1.品牌的新增

昨天我们完成了品牌的查询，接下来就是新增功能。点击新增品牌按钮

1.1.页面实现

1.2.后台实现新增

1.2.1.controller

还是一样，先分析四个内容：

• 请求方式：POST
• 请求路径：/brand
• 请求参数：brand对象，外加商品分类的id数组cids
• 返回值：无，只需要响应状态码

代码：

    /**
     * 新增品牌
     * @param brand
     * @param cids
     */
    @PostMapping
    public ResponseEntity<Void> saveBrand(Brand brand, @RequestParam("cids") List<Long> cids){
   
        this.brandService.saveBrand(brand, cids);
        return ResponseEntity.status(HttpStatus.CREATED).build();
    }

1.2.2.Service

这里要注意，我们不仅要新增品牌，还要维护品牌和商品分类的中间表。

    /**
     * 新增品牌
     *
     * @param brand
     * @param cids
     */
    @Transactional
    public void saveBrand(Brand brand, List<Long> cids) {
   

        // 先新增brand
        this.brandMapper.insertSelective(brand);

        // 在新增中间表
        cids.forEach(cid -> {
   
            this.brandMapper.insertCategoryAndBrand(cid, brand.getId());
        });
    }

这里调用了brandMapper中的一个自定义方法，来实现中间表的数据新增

1.2.3.Mapper

通用Mapper只能处理单表，也就是Brand的数据，因此我们手动编写一个方法及sql，实现中间表的新增：

public interface BrandMapper extends Mapper<Brand> {
   

    /**
     * 新增商品分类和品牌中间表数据
     * @param cid 商品分类id
     * @param bid 品牌id
     * @return     ${修改字符时会引起sql注入}
     */
    @Insert("INSERT INTO tb_category_brand(category_id, brand_id) VALUES (#{cid},#{bid})")
    int insertBrandAndCategory(@Param("cid") Long cid, @Param("bid") Long bid);
}

1.2.4.测试

400：请求参数不合法

1.3.解决400

1.3.1.原因分析

我们填写表单并提交，发现报错了。查看控制台的请求详情：

发现请求的数据格式是JSON格式。

原因分析：

axios处理请求体的原则会根据请求数据的格式来定：

• 如果请求体是对象：会转为json发送

• 如果请求体是String：会作为普通表单请求发送，但需要我们自己保证String的格式是键值对。

  如：name=jack&age=12

1.3.2.QS工具

QS是一个第三方库，我们可以用npm install qs --save来安装。不过我们在项目中已经集成了，大家无需安装：

这个工具的名字：QS，即Query String，请求参数字符串。

什么是请求参数字符串？例如： name=jack&age=21

QS工具可以便捷的实现 JS的Object与QueryString的转换。

在我们的项目中，将QS注入到了Vue的原型对象中，我们可以通过this.$qs来获取这个工具：

我们将this.$qs对象打印到控制台：

created(){
   
    console.log(this.$qs);
}

发现其中有3个方法：

这里我们要使用的方法是stringify，它可以把Object转为QueryString。

测试一下，使用浏览器工具，把qs对象保存为一个临时变量temp1，然后调用stringify方法：

成功将person对象变成了 name=zhangsan&age=30的字符串了

1.3.3.解决问题

修改页面，对参数处理后发送：

1.4.新增完成后关闭窗口

我们发现有一个问题：新增不管成功还是失败，窗口都一致在这里，不会关闭。

这样很不友好，我们希望如果新增失败，窗口保持；但是新增成功，窗口关闭才对。

因此，我们需要在新增的ajax请求完成以后，关闭窗口

但问题在于，控制窗口是否显示的标记在父组件：MyBrand.vue中。子组件如何才能操作父组件的属性？或者告诉父组件该关闭窗口了？

之前我们讲过一个父子组件的通信，有印象吗？

• 第一步：在父组件中定义一个函数，用来关闭窗口，不过之前已经定义过了。父组件在使用子组件时，绑定事件，关联到这个函数：Brand.vue

<!--对话框的内容，表单-->
<v-card-text class="px-5" style="height:400px">
    <brand-form @close="closeWindow" :oldBrand="oldBrand" :isEdit="isEdit"/>
</v-card-text>

• 第二步，子组件通过this.$emit调用父组件的函数：BrandForm.vue

测试一下，保存成功：

我们优化一下，关闭的同时重新加载数据：

closeWindow(){
   
    // 关闭窗口
    this.show = false;
    // 重新加载数据
    this.getDataFromServer();
}

2.实现图片上传

刚才的新增实现中，我们并没有上传图片，接下来我们一起完成图片上传逻辑。

文件的上传并不只是在品牌管理中有需求，以后的其它服务也可能需要，因此我们创建一个独立的微服务，专门处理各种上传。

2.1.搭建项目

2.1.1.创建module

2.1.2.依赖

我们需要EurekaClient和web依赖：

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>leyou</artifactId>
        <groupId>com.leyou.parent</groupId>
        <version>1.0.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.leyou.upload</groupId>
    <artifactId>leyou-upload</artifactId>
    <version>1.0.0-SNAPSHOT</version>

    <dependencies>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
        </dependency>
        <dependency>
            <groupId>