(6)品牌新增

一、新增品牌

1. 前端Vue实现功能

  1.1 表单重置

  1.2 表单校验

  1.3 表单提交

2. 后端Java实现功能

  2.1 分析请求四要素:请求方式、请求路径、请求参数、返回值

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

  2.2 知道了请求四个要素,基本可以写出Controller,注意是Post请求

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

  2.3 Controller中调用了Service进行业务层逻辑处理,这里要注意,我们不仅要新增品牌,还要维护品牌和商品分类的中间表。注意这里要用事物,同时成功或者失败

    /**
     * 新增品牌
     *
     * @param brand
     * @param cids
     */
    @Transactional  //事物
    public void saveBrand(Brand brand, List<String> cids) {
        //先新增Brand表
        //insertSelective方法比insert灵活
        brandMapper.insertSelective(brand);

        // 然后新增中间表, 自定义方法,来实现中间表的数据新增
        cids.forEach(cid->{
            this.brandMapper.insertCategoryAndBrand(cid,brand.getId());
        });

    }

  2.4 业务层中调用了持久层,通过持久层把数据存入数据库,通用Mapper只能处理单表,也就是Brand的数据,因此我们手动编写一个方法及sql,实现中间表的新增:

    /**
     * 新增商品分类和品牌中间表数据
     * @param cid 商品分类id
     * @param bid 品牌id
     * @return
     */
    @Insert("insert into tb_category_brand(category_id,brand_id) values(#{cid},#{bid})")
    void insertCategoryAndBrand(@Param("cid")String cid, @Param("bid") Long id);

3. 后端代码编写完成,使用浏览器访问

  

  状态码:400 参数不合法

  分析原因:

    

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

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

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

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

      如:name=jack&age=12

  由此引出了下面QS工具,把JSON对象转换成字符串

二、qs工具

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

这个工具的名字:QS,即Query String,请求参数字符串。什么是请求参数字符串?例如: name=jack&age=21

QS工具可以便捷的实现 JS的Object与QueryString的转换。下面用到两个方法:

  parse(str,opts):把字符串转换成JSON对象

  stringify(object,opts):把JSON对象转换成字符串

1. 通过QS修改Vue的表单提交中Post的参数(已经将QS注入到了Vue的原型对象中,才能使用this.$qs来获取这个工具

 2. 提交后发送请求成功

 3. 从数据库中看下到底有没有成功

 那么中间表呢?

也成功了

三、表单验证

  表单验证前端代码完成

学习中,博客都是自己学习用的笔记,持续更新改正。。。
原文地址:https://www.cnblogs.com/Tunan-Ki/p/11918289.html