微服务项目第17天：品牌新增业务的实现

今天是刘小爱自学Java的第147天。

感谢你的观看，谢谢你。

学习计划安排如下：

• 写完查询业务，继续写品牌新增业务。
• 查询业务我们从前端到后台完整地写了一遍。
• 新增业务就不用自己使用vue写前端页面了，直接用模板，主要专注于后台Java代码的编写。

一、新增品牌页面

虽说有现成已经写好的前端模板，但是也要自己看得明白，不然干了啥都不清楚。

点击新增品牌按钮，会弹出一个对话框，其vue是如何编写的呢，我们看下代码：

因为vue文件代码太长，我不可能全部截下来，截其中关键的部分，做一个流程梳理：

①新增品牌按钮

给该按钮设定了一个点击事件，点击事件一旦触发会调用addBrand方法。

②addBrand方法

看名字就知道是新增品牌业务，其具体干了啥呢？它将show设置成了true。

这个show又是啥呢？

③弹出的对话框

show默认值是false，是用来隐藏/显示对话框的，③其实也就对应着弹出的对话框。

我们再次深入会发现，closeWindow方法对应的也就是对话框右上角的关闭按钮，它就是将show设置成false了，所以能关闭对话框。

值得注意的是：

前端代码也可以和后台Java代码一样，使用Ctrl+左键快速跳转到方法/属性/组件。

④自定义组件brand-form

Ctrl+左键点击该标签会跳转到新文件，这也就是我们自定义的组件brand-form。

2BrandForm.vue文件

这是一个自定义的vue组件，其有一个name属性，值为brand-form。

在其它页面中可以使用import引入该组件再使用，页面受限就不截图说明了。

总之标签名和name属性要保持一致。

①前端校验

看到required就可以想到是前端数据校验，要求该数据不能为空。

②图片上传业务

这个对应了另一个独立的业务，其请求路径即为url，要在服务器中接受该请求处理，该业务我们后续会说明。

③submit方法

提交按钮对应的submit方法：

确定四件事情：

• 请求路径：如上图所示。
• 请求方式：例子中是Post请求。
• 请求参数：此处是上图4个参数。
• 返回值：返回值为空。

确定这4点就可以编写后台代码了。

二、后台代码编写

Java三层代码编写，品牌新增依旧是属于商品微服务lxa-item中的品牌相关。

1Controller层

@RequestMapping设定请求路径。

@PostMapping接受Post请求。

请求参数本来一共有4个：

• 其中有3个是属于Brand实体类的属性，所以用Brand对象代替。
• cids是商品分类id。

返回值为空，所以rest风格中用ResponseEntity<Void>来表示。

响应的状态码是201“Created”即对应的枚举CREATED。

2Service层

①新增品牌

因为我们昨天就编写过Brand实体类，并利用通用mapper将其和数据表对应起来了。

所以新增时直接使用通用mapper的insertSelective()方法即可新增品牌。

②新增cid和bid

新增数据到中间表tb_category_brand。

因为我们没有创建和其相关的Java实体类，所以没法直接使用通用mapper。

但是好在Mybatis支持注解，所以我们创建insertCategoryBrand方法使用注解说明新增sql语句。

一个品牌id对应多个分类id，比如说小米这个品牌，既可以是手机，也可以是电饭煲等。

所以将分类id也就是上述的cids遍历，新增bid和其对应的cid到数据表中。

3Mapper层

使用注解@Insert编写新增sql语句，同理还有查询、修改和删除语句都可以。

当然也可以使用xml配置sql语句，只不过语句比较简单，所以直接使用注解即可。

三、新增品牌测试

代码编写完毕，做一个测试

我们在新增品牌页面中填写数据，点击提交按钮，向服务器发送请求。

服务器接收请求后会分别向数据库中的两张表新增对应的数据。

最后

行有不得反求诸己，我是@刘小爱

一个白天上班晚上学习的95后沪漂，不为其它，只为学会自律做好自己，也愿我的每日打卡能给你带来勇气，欢迎点赞关注和评论。