商城解析(关于编写新增商品表单,实现接收用户写入的品牌名,商品分类,图片等,并且传入到数据库)

在这里插入图片描述
首先看到这个页面,可以看到我们点击了品牌管理,新增品牌后,就会弹出一个这样的窗口,我们所看到的这些都是前端做的窗口,但是我们该如何在后端编写对应的业务逻辑呢?首先我们要知道这里对应的是哪个地址,在前端程序的哪一个页面,然后我们需要找到那一个页面,去看看它对应的参数是什么,然后我们需要去把这些参数拿过来,获取这些参数并且赋值。

那我们应该如何在前端程序中找到这个组件呢?

首先我们点击了品牌管理,可以看到他网址里面有相对应的地址,我们可以记住这个地址,然后在前端里面找到这个地址对应的路由。

在这里插入图片描述
根据这个路由找到程序并且找到“”新增品牌“”。

在这里插入图片描述
可以看到他的页面就在这个页面,然后他有一个点击事件为addBrand,然后我们就要去方法模块里面去找他的对应方法。

在这里插入图片描述
在这里插入图片描述
可以看到他三个方法都在这里,第一个是修改标记的意思,也就是说你点击“”新增品牌“”后,它是显示新增还是显示修改,如果你把修改标记关掉,那就不是修改了,就会变成新增。

第二个是弹窗可不可见,这里指的是点击新增品牌后弹窗出现,所以赋予了true,但一般情况下为关闭。

第三个就是旧数据为空。因为新增品牌了,就要抛弃旧数据,所以旧数据就变为空了。

在这里插入图片描述
可以看看这里,他导入了自定义组件。这个是一个表达内容来的,也就是我们刚刚打开的新增品牌表。我们是怎么看出来的呢?可以看注释,如果没有住宿的情况下,我们要寻找自定义组件,也就是brand-form。

在这里插入图片描述
要使用这个自定义组件,必须要把它导进来。

但是我们应该要怎么去找他的对应路径呢?
在这里插入图片描述
他导入自定义组件的后面往往都会有路由,然而上图这个路由表示的是他这个表单编写的页面,我们可以顺着这个路由找到他编写的页面。
在这里插入图片描述
我们先回来看看浏览器这里,点击商品分类,他这里还有很多类目,你点击了一级类目之后,它会弹出二级类目,你可以看到他们的地址都是一样的,变化的只有pid。那么这些功能是用哪些组件实现的?
在这里插入图片描述
这个就是实现,一级类目二级类目的方法,第一个是地址,也就是说你的主见,如果访问了这个地址的话,就会展开一级类目或者二级类目,multiple是允许单选还是多选?true就是多选,false就是单选,required的意思是是否必须要填,如果是必须要填的话,你这个输入框就不能为空。
v-model就是数据模型,上图已经绑定给brand.categories,Table就是表格

然后我们需要知道的是,我们需要返回一个什么样的业务逻辑?首先我们要知道,我们要返回一个结果集,但是在这里我们点击提交之后,它主要运行的就是在数据库里面添加对应的数据,然后返回到商品这个列表里面去,然后在浏览器上进行显示。

在这里插入图片描述
这就是我们点击提交后的信息,可以看到信息都录进去了,他主要操作的也是这几个数据模型。

在这里插入图片描述
我们可以看看他的提交方法是怎么写的,他在前端写好了。myBrandForm表示的是当前我们这个表单,前面的refs表示的是所有表单,连起来的意思就是,把当前的表单添加到所有的表单里面去,后面那个validate表示的是校验,只需要校验成功后,前端就会把接收到的数据传给后端,然后有后端传给数据库就可以了。

在这里插入图片描述
可以观察一下这个解构表达式,他是通过这个结构表达式来获取brand的属性,

在这里插入图片描述
这是这个对象里面含有的信息。

在这里插入图片描述
因此这个括号里面有categories,letter,name,image

categories是商品类目,也就是你点击一级类目二级类目时就会用到它。

然后我们需要把categories解构,我们先看看它对应的表,这个是商品类目表,他对应的有三个表,一个是品牌表,一个是商品分类表,一个是品牌对应的商品分类表。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这个表的思路就是先把商品品牌建成一个表,然后再把商品分类建成一个表,最后弄一个总表,把两者连接起来,一个品牌对应多个商品分类,所以我们才需要把商品分类结构出来,只需要获取品牌id就可以了。

还有letter那里,如果用户输入小写字母的话,我们需要把它弄成大写字母,所以我们也是需要把它解构出来,然后写一个方法。

在这里插入图片描述
然而名称跟图片都不需要改,所以我们只需要把它放在params里面就可以了,所以…params代表的是,把剩余的东西放在params里面而不是参数。

在这里插入图片描述
这里我们要看到,第一条红色线的部分,表示的就是他把每一个接收到了数据转化为我们的语言,并且转换为字符串,第二条红线部分,表示的是把首字母转换为大写,然而这些都会被写进param,然后最后以data方式提交到后台。

这里需要注意的是cids在数据库当中并没有这样的属性名,而且我们上面也没有写到这样的属性名,但是为什么可以用这个方法呢?如果你在控制台写入这个属性名,它也会自动生成一个CID的属性名,你如果给他赋值一个参数,他也会同样有这个属性名和参数生成。

在最后一个红色框那里,那个方法当中我们知道了请求方式为post,还有请求路径,这些都是提交到后台的方式跟路径。

然后我们可以去编写controller方法,首先我们可以看到在上面我们已经看到请求路径是什么,是/item/brand

然而/item已经在网关里面被解析,并且分发给微服务item-service,微服务item-service又有对应的controller编写了路径“brand”,所以我们只需要在这个controller下面写方法就可以,因为它的请求方式是post方法,所以我们需要些postmapping方法,而且这个postmapping注解,是不需要加任何路径的

在这里插入图片描述
我们只要是跟前端合作,就少不了ResponseEntity,这个就是帮我们从前端接收参数的,为什么这里的泛型为Void?泛型里面的返回值为void,表示的就是这个发型里面没有泛型,以前需要这个泛型里面的数据的原因是因为需要返回数据结果集,现在是void了,就是没有泛型的意思,但是一样有返回值,返回值可以是状态码,就是我们这次只是需要把数据库的信息传进去就可以了,这个操作由service来进行,我们controller只需要调用service的方法去实现,然后返回一个成功的状态码就可以了,同时也要做出判断,如果写进数据库不成功,将会返回一个不成功的状态码。因为这次的操作只是把前端传入的信息输入到数据库里面,然后结果集我们已经写了,我们不需要重复再写什么结果集了,我们需要做的就是把前端传过来的数据传给数据库,进行增加操作就可以了,有对应的结果集方法,会将这些数据重新返回到前端显示。

那下面我们应该继续编写什么?首先我们的目的就是要接收前端传过来的数据,并且传到数据库里面,所以我们需要去接收前端的数据类型比如id名字图片等等,所以我们需要去封装这些。

在这里插入图片描述
我们获取这些数据类型方法,我上面也有说过,就是你点击提交之后,看看哪里报错,里面会有对应的数据来告诉你哪里错了。

在这里插入图片描述

在这里插入图片描述
这里先不说这个方法对不对,等一下再来验证。我们需要搞清楚了是这个service该怎么写,Service需要完成的任务就是把前端的参数传进数据库,那我们应该怎么传呢?回头看看这个前端页面,用户选择他就是选择一级类目二级类目这样选,然而这些内幕都是固定的,也就是手机,电器等等类别都是固定好的,也就是说你不需要去新增他,也不需要去修改它,他都是固定好的,还记得我上面放了三个数据库图片吗?一个是品牌,一个是商品分类,最后一个就是品牌对应的商品分类,我们需要写入的数据有什么呢?数据库只有这三个表,我们要从这三个表里面去想。商品分类我们是不需要新增的了,因为这个是选择就可以了,我们需要新增的就是品牌,所以我们需要去接收品牌信息,然后把它传进品牌数据表里面,除此之外,我们还需要把品牌传进品牌和商品分类对应的表,那我们应该怎么做呢?

我们的思路就是,先编写Brand数据表,再去编写Brand和Categories共同数据表。

编写数据表我们需要用到mapper方法,而且是使用mapper的插入方法,因为我们是插入数据。

在这里插入图片描述

然而两种插入方法,我们应该选择哪一个?首先看看第二个,第二个插入方法是指如果你输入的值缺少了一个或者两个,那么他输入的结果将会是空,就比如说,Brand里面封装的方法有id,name,图片等等,假如你有一个没传入,他就全部为空,所以这样不太好,因为用户也不是全部传入的,所以我们需要用第一个方法,第一个方法你少传一个也不会影响。

那么我该如何去判断他是否新增成功了?首先你会不会想到是Boolean方法。

事实上也是用这个方法去判断的。我们可以建立一个flag。

在这里插入图片描述

在这个方法执行成功后就给它赋值等于1,然后再用boolean去判断它,如果Boolean结果为true,我们就可以去编写中间表的方法。那我们应该怎么样去编写中间表呢?首先我们要知道中间表数据就是品牌对应商品类目,我们如果新增一个品牌,就要新增好几个商品类目,所以这种对应关系需要想想怎么样去做。

在这里插入图片描述

可以看看这里,首先我们在这上面写的事务的注释,这个注释有什么作用呢?他的作用就是如果你这个事物发生错误的话,还能进行回滚,也就是说返回上一步的操作,所以添加了这个事物之后,你不需要去做任何判断结果是否为空,直接执行就可以。

再看看我们下面用了遍历方法,Cids.是商品的类别对应的id,我们采取这遍历方法的目的,就是为了把每一个品牌都加上它对应的商品类别,因为一个品牌对应很多个商品类别,所以采取这种遍历的方法,能够精准的把对应的商品的类别打在一个品牌上,当然你反过来遍历也是可以的。

这里需要说明一下遍历方法中的cid,这个cid是你自己取的名字,但是写在这个位置默认是代表了是cids的每一个元素,并不是说去掉s就是代表他的子元素。

因为我们这种添加两个数据进数据库的insert方法并没有,在这种没有这种方法的情况下,我们可以自己写一个这样的方法,上面用红线画出来的地方就是自己写的方法,然后我们可以在mapper里面去实现它。

在这里插入图片描述
这就是我们写好的member方法,首先你可以看到他是没有public的,那是因为他是一个接口类,而且继承了方法,再看看我们打了个注解insert,这里是用来输入数据库的,里面的信息有数据表,属性名,还有我们的参数。然后方法里面也有我们的参数。

这个方法是怎么工作的呢?首先我们从外面接收到参数,在方法名Param那里接收参数,然后他把接收到了参数再传给注解,然后注解再传给数据库,就完成了一个向数据库传输的过程。

在这里插入图片描述
然后我们看到这里的controller,有些人会觉得我们这里只是写了一个状态码是创建成功的状态码,但是万一我们没有插入到数据库里面怎么办?难道还要返回给别人创建成功的状态码吗?可能你们忘记了我们在service里面写的方法,加了一个事务注解。如果事务执行不成功,是会回滚的。所以大家不用担心这个问题。

在这里插入图片描述
然而在点击运行过后,却出现了这个错误,400这个错误代表着参数不合法。

你需要想一想,参数不合法是什么问题呢?通常出现这个错误的原因就是因为你在前端获取的参数跟你在后端编写的方法的参数不一致。但是我们的参数,name,letter,picture都是在Brand里面了,而且cids也单独封装了,既然这样,又会有什么问题呢?
(下图不一定要参考,因为真正的解决方法在最下面)
在这里插入图片描述
首先我们这里还要加上RequestBody注解,因为浏览器发出的是一个Jason对象,凡是只要是接收Jason对象,你就需要加上RequestBody。,其次,你不能在controller里面的方法里面用两个参数去接收浏览器的一个参数。

所以你只能用一个参数去接收他的一个商品信息参数,而且浏览器的参数是一个Jason对象,也就是一个整体对象,你不可以在后端用两个参数来接收,只能用一个参数去接收。

但是我们该如何实现这个过程呢?难道我们要重新new一个pojo对象,但是如果每当有这样的问题,你就去New一个pojo对象,这会让代码的量很大,而且如果你只在Brand这个pojo类里面加上cids并且封装这个方法,那以后有很多这样的情况,我们也要一个个去封装他吗?

其实我们还有一种方法:既然浏览器传过来的是一个Jason对象,这种对象又是一个整体类,导致我们只能传一个参数进后端,如果我们让浏览器传的不是一个Jason对象,而是分开的字段,那我们不就可以去接收他了吗?所以我们可以选择在前端页面去更改它的数据类型。

在这里插入图片描述
原来他是这样的。

在这里插入图片描述
我们可以用这个方法把它修改成一个个字段。

在这里插入图片描述
这是修改前浏览器响应的数据。可以看见这是一个Jason对象。

在这里插入图片描述
这是修改后,而且保存成功了。

这里需要注意的是,如果你浏览器发出的不是Jason对象,而是被你像这种方法把Jason对象分成字符段。分几个方法分别传入,那么你就不需要在后端方法里面写Requestbody注解。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值