• (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. 从数据库中看下到底有没有成功

     那么中间表呢?

    也成功了

    三、表单验证

      表单验证前端代码完成

    学习中,博客都是自己学习用的笔记,持续更新改正。。。
  • 相关阅读:
    未在本地计算机上注册“Microsoft.Jet.OleDb.4.0”提供程序
    GridView选中行变色
    GridView 添加/删除行
    Session、Cookie、Application、ViewState和Cache 这四者的区别
    后台动态给textbox的字体颜色赋值
    JS来判断文本框内容改变事件
    gridview JS控件赋值后如何取值
    c#如何把8位字符串转换成日期格式
    从今天起,热爱生活
    杂得得杂
  • 原文地址:https://www.cnblogs.com/Tunan-Ki/p/11918289.html
Copyright © 2020-2023  润新知