zoukankan      html  css  js  c++  java
  • 019 品牌的新增

    1.前端页面实现

    (1)链接逻辑

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

    Brand.vue页面有一个提交按钮:

    点击触发addBrand方法:

    把数据模型之的show置为true,而页面中有一个弹窗与show绑定:

    弹窗中有一个表单子组件,并且是一个局部子组件,有页面可以找到该组件:

    (2)表单提交

    在submit方法中添加表单提交的逻辑:

    submit() {
        console.log(this.$qs);
        // 表单校验
        if (this.$refs.myBrandForm.validate()) {
            // 定义一个请求参数对象,通过解构表达式来获取brand中的属性{categories letter name image}
            const {categories, letter, ...params} = this.brand; // params:{name, image, cids, letter}
            // 数据库中只要保存分类的id即可,因此我们对categories的值进行处理,只保留id,并转为字符串
            params.cids = categories.map(c => c.id).join(",");
            // 将字母都处理为大写
            params.letter = letter.toUpperCase();
            // 将数据提交到后台
            // this.$http.post('/item/brand', this.$qs.stringify(params))
            this.$http({
                method: this.isEdit ? 'put' : 'post',
                url: '/item/brand',
                data: params
            }).then(() => {
                // 关闭窗口
                this.$emit("close");
                this.$message.success("保存成功!");
            })
                .catch(() => {
                this.$message.error("保存失败!");
            });
        }
    }
    1. 通过this.$refs.myBrandForm选中表单,然后调用表单的validate方法,进行表单校验。返回boolean值,true代表校验通过

    2. 通过解构表达式来获取brand中的值,categories需要处理,单独获取。其它的存入params对象中

    3. 品牌和商品分类的中间表只保存两者的id,而brand.categories中保存的是对象数组,里面有id和name属性,因此这里通过数组的map功能转为id数组,然后通过join方法拼接为字符串

    4. 发起请求

    5. 弹窗提示成功还是失败,这里用到的是我们的自定义组件功能message组件:

               

        这个插件把$message对象绑定到了Vue的原型上,因此我们可以通过this.$message来直接调用。

        包含以下常用方法:

    • info、error、success、warning等,弹出一个带有提示信息的窗口,色调与为普通(灰)、错误(红色)、成功(绿色)和警告(黄色)。使用方法:this.$message.info("msg")

    • confirm:确认框。用法:this.$message.confirm("确认框的提示信息"),返回一个Promise。

    2.后台代码实现

    (1)controller

    在BrandController类中添加如下方法

     

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

     

    (2)service

    在BrandServiceImpl实现类中添加如下方法

    /**
         * 新增品牌
         * @param brand
         * @param cids
         */
        @Override
        @Transactional
        public void saveBrand(Brand brand, List<Long> cids) {
            // 先新增brand
            this.brandMapper.insertSelective(brand);
    
            // 再新增中间表
            cids.forEach(cid -> {
                this.brandMapper.insertCategoryAndBrand(cid, brand.getId());
            });
        }

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

    package lucky.leyou.item.mapper;
    
    import lucky.leyou.item.domain.Brand;
    import org.apache.ibatis.annotations.Insert;
    import org.apache.ibatis.annotations.Param;
    import tk.mybatis.mapper.common.Mapper;
    
    public interface BrandMapper extends Mapper<Brand> {
        /**
         * 新增商品分类和品牌中间表数据
         * @param cid 商品分类id
         * @param id 品牌id
         * @return
         */
        @Insert("INSERT INTO tb_category_brand(category_id, brand_id) VALUES (#{cid},#{bid})")
        void insertCategoryAndBrand(@Param("cid") Long cid, @Param("bid") Long id);
    }

    (4)测试

    重启如下红框所圈服务

    出现如下错误

    400:请求参数不合法

    3.解决400

    (1)原因分析

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

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

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

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

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

      如:name=jack&age=12

    (2)qs工具

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

     

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

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

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

    (3)解决方案

    修改页面,对参数处理后发送:

    然后再次发起请求,发现请求成功:

    数据库中可见

     

  • 相关阅读:
    Gartner APM 魔力象限技术解读——全量存储? No! 按需存储?YES!
    微信不再提供小程序打开App?借助H5为App引流的方式你必须知道!
    来电科技:基于 Flink + Hologres 的实时数仓演进之路
    进击的云原生,为开发者提供更多可能性
    分久必合的Lindorm传奇
    雷锋网独家解读:阿里云原生应用的布局与策略
    「技术人生」第4篇:技术、业务、组织的一般规律及应对策略
    云上安全保护伞--SLS威胁情报集成实战
    Linux date命令实现日期查询与UTC时戳转换
    VScode调试运行cmake加入环境变量
  • 原文地址:https://www.cnblogs.com/luckyplj/p/11523388.html
Copyright © 2011-2022 走看看