商城中_显示属性的数据操作(添加,修改,回显)

在这里插入图片描述
首先需要分析清楚其中数据的来源,就是说该从数据库中哪张表去读写数据
这里会联系到三张表分别是(t_specification 商品属性表),(t_product 商品表),(t_product_ext 商品扩展表)

知识点:

商品扩展表的创建,这里涉及到分表的知识

为什么分表?

当数据量过于庞大,当进行表的查询时会极大影响效率,所有需要进行分表,为了减小数据库的负担,缩短查询时间.

分表的方式有哪些?

分为水平分表和垂直分表
水平分表:
	按照条件(如月份,年份,数量,编号等),分为多张表,这些表中的字段都是相同的,在查询时通过相应的查询条件就
可以提高查询效率.
	如,QQ的登录,假设QQ的用户有100亿,如果只有一张表,每个用户登录的时候数据库都要从这100
亿中查	找,会很慢很慢。如果将这一张表分成100份,每张表有1亿条,就小了很多,比如qq0,qq1,qq1...qq99表
用户登录的时候,可以将用户的id%100,那么会得到0-99的数,查询表的时候,将表名qq跟取模的数连接起来,就
构建了表名。比如123456789用户,取模的89,那么就到qq89表查询,查询的时间将会大大缩短

垂直分表:
	表的存储数据并不大,但是表中字段太多这时候就涉及到垂直分表,检索表的时候需要执行大量的IO,严重降低了性能。
	这时需要把大的字段拆分到另一个表,并且该表与原表是一对一的关系,就是上面的扩展表,

三张表大致联系
在这里插入图片描述
当前显示属性弹出的dialog由(t_specification 商品属性表)读取出来的
在这里插入图片描述前端代码 发送axios请求查询出t_specification中对应的显示属性
vue.js ElementUI

	1.先定义一个变量和数组
	 //准备一个为null的
     viewProducts: null,
     //准备一个数组
     viewProductArray: [],
     
     2.绑定一个点击事件
    @row-click="viewProductClick"
    //点击选择一行之后获取当前行的值,并将当前行的值赋值给定义的变量
    viewProductClick(row, event, column) {
         console.debug(row);
         this.viewProducts = row;
     },
     
     3.//绑定显示属性按钮点击事件
       <el-form-item>
             <el-button type="primary" @click="viewProduct">显示属性</el-button>
      </el-form-item>
     
     4. //发送axios(ajax)请求
      viewProduct() {
                console.debug(this.viewProducts.productType);
                //判断是否有值,没有就提示选择
                if (this.viewProducts) {
                    //开启dialog
                    this.viewProductDialog = true;
                    //地址 传两个值
                    var productTypeId = this.viewProducts.productType;
                    var productId = this.viewProducts.id;
                    var url = "/product/specification/querySqecufication" + "/" + productTypeId + "/" + productId;
                    //axios(ajax)请求
                    this.$http.post(url)
                        //箭头函数 vue
                        .then(res => {
                            //后台传回的是一个数组,我们前台定义一个数组用于接收,用于遍历回显
                            this.viewProductArray = res.data;
                        });
                } else {
                    this.$message({
                        message: '请选择一行编辑!',
                        type: 'warning'
                    });
                }
            },

后台代码查询

  • Controller
 //查询显示属性
    @RequestMapping(value = "/querySqecufication/{productTypeId}/{productId}", method = RequestMethod.POST)
    public List<Specification> querySqecification(@PathVariable("productTypeId")Long productTypeId,@PathVariable("productId")Long productId) {
        System.out.println(productTypeId);
        return specificationService.querySpecification(productTypeId,productId);
    }
  • IService
List<Specification> querySpecification(Long productTypeId,Long productId);
  • Service
//这里由于是测试数据有的表中字段没有值为了不让报错返回一个空数据
        List list = new ArrayList<>();

        //创建扩展库对象
        ProductExt productExt = new ProductExt();
        //查询 判断扩展表中viewProperties是否有数据
        productExt.setProductId(productId);
        //根据对象传入的条件查询出来符合条件的值
        productExt = productExtMapper.selectOne(productExt);
        //获取t_product_ext表中的显示属性字段值
        String viewProperties = productExt.getViewProperties();
        System.out.println(viewProperties);
        //先判断扩展表对象是否为空
        if (productExt != null) {
            System.out.println(StringUtils.isEmpty(viewProperties));
            //t_product_ext表中的显示属性字段值是否有值
            if (!StringUtils.isEmpty(viewProperties)) {
                //判断字符串是否为空 非空取反为true 执行回显操作
                //JSON.parseArray,将查询出的字段转为集合返回
                /**
                 *  这里查询的t_product_ext表中的值,直接进行回显操作
                 */
                return JSON.parseArray(viewProperties, Specification.class);
            } else {
                //没有
                Wrapper wrapper = new EntityWrapper<>();
                //eq
                wrapper.eq("productTypeId", productTypeId);
                //这里2默认为显示属性的设定
                wrapper.eq("Type", 2);
                //返回t_specification表中查询的数值
                return specificationMapper.selectList(wrapper);
            }
        } else {
            return list;
        }
    }

在这里插入图片描述
提交操作
在这里插入图片描述前台代码

<div slot="footer" class="dialog-footer">
     <el-button @click.native="viewProductDialog = false">取消</el-button>
     //注册点击事件
      <el-button type="primary" @click.native="viewSubmit" :loading="editLoading">提交</el-button>
  </div>

前台提交代码

viewSubmit() {
                var productId = this.viewProducts.id;
                var url = "/product/productExt/saveViewPro"+"/"+productId;
                //传productId 和 数组
                var params = {"viewProperties": this.viewProductArray};
                this.$http.post(url, params)
                    .then(res => {
                        let { message, success, object } = res.data;
                        //判断res的success: 后台返回json对象
                        if (success) {
                            this.$message({
                                message: message,
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: message,
                                type: 'error'
                            });
                        }
                        //关闭dialog
                        this.viewProductDialog = false;
                    });
            },

后台代码修改

因为在商品新建时就会给t_product_ext这个表中的productid初始化值所有在进行内容添加时理应都是
执行的修改
在这里插入图片描述

	@RequestMapping(value = "/saveViewPro/{productId}", method = RequestMethod.POST)
    //var params = {"viewProperties": this.viewProductArray}; key:value可以使用map接收
    public ResultAjax saveViewPro(@PathVariable("productId")Long productId,@RequestBody Map<String, Object> map) {
        try {
            System.out.println("xxxxxxxxxxxxxxxxxxxxxxxx"+productId);
            List<Specification> list = (List<Specification>) map.get("viewProperties");
            //将集合转换为json字符串
            String jsonString = JSON.toJSONString(list);
            //import com.baomidou.mybatisplus.mapper.EntityWrapper;
            Wrapper extWrapper = new EntityWrapper<>();
            //添加如where的条件
            extWrapper.eq("productId", productId);
            //查询出productExt对象
            ProductExt productExt = (ProductExt) productExtService.selectOne(extWrapper);
            //将转换的String字符中存入对象中
            productExt.setViewProperties(jsonString);
            //调用修改方法
            productExtService.update(productExt, extWrapper);
            return ResultAjax.Me().setMessage("保存成功");
        } catch (Exception e) {
            e.printStackTrace();
            return ResultAjax.Me().setSuccess(false).setMessage("保存失败");
        }
    }
版权声明:本文为wj6060原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/wj6060/article/details/90274474

智能推荐

学习乐优商城中遇到的坑

本人暑假期间学习了乐优商城这个项目,历时二十天,遇到了许多的麻烦,应该会有挺多人遇到。所以想记录一下,让大家跳坑。 首先,我建议jar包的版本,都选择和老师的一样,不然会出现一些莫名奇妙的报错。 在本项目进行到在liunx装软件的时候,如果装不上或者本机连接不上,可以选择装在本机,或者换成和老师版本一样的虚拟机,虚拟机上记得装对应的jdk https://blog.csdn.net/u010590...

审计某开源商城中的漏洞大礼包

首先这个CMS并不怎么出名,拿来当审计样板却很合适。给我的感觉是适合初级水平升中级之间的过程,有算是对上一篇审计文章的后续文了。 审计的版本为: 20180206 发布的免费版 2.0 。另外图很多,建议 PC 端体验更佳! 分析环境及入口 图中的 URL 会出现两个,这是因为部分在公司审计的,部分是周末在家审计的。 官网首页上有文档,里面注明了这套 CMS 所使用环境: ThinkPHP5.0 ...

Java高级之反射

“在反射之下,一段Java程序也变得无所遁形。探索框架的精髓——反射”   什么是反射 Java的反射(reflection)机制是指在程序的运行状态中,可以构造任意一个类的对象,可以了解任意一个对象所属的类,可以了解任意一个类的成员变量和方法,可以调用任意一个对象的属性和方法。这种动态获取程序信息以及动态调用对象的功能称为Java语言的反...

快速生成Plugman中的"lib-file"、"source-file"的xml内容

目录结果: 工具类: 结果:...

Vue.js入门学习--列表渲染--v-for遍历数组生成元素(四)

完整案列demo: 一、遍历数组 (1)DOM (2)数据模板 v-for指令相当于C#中的foreach,Java中的加强for,格式:item in items,items为数组或者集合,item为遍历数组或集合时取出的单个对象,当然,vue也支持取出对象所在的位置index,也就是(item,index) in items,注意参数的顺序不要搞错了! (3)显示 二、遍历对象(map),以键...

猜你喜欢

堆排序

堆排序 什么是堆? 堆是具有以下性质的完全二叉树: 每个结点的值都大于或等于其左右孩子结点的值,称为大顶堆 或者每个结点的值都小于或等于其左右孩子结点的值,称为小顶堆。 如下图所示: 那么话又说回来了,什么是完全二叉树呢? 要想知道什么是完全二叉树,首先得知道什么满二叉树。 满二叉树:高度为h,并且由 2^h-1个结点的二叉树,被称为满二叉树,其实不难看出,满二叉树的结点的度要么为0(叶子结点),...

一些必须知道的JAVA基础知识

作为一名Android开发人员,面试的时候也会经常被问到一些java基础方面的。这就前段时间面试中遇到的一些java方面的,可能不全,只是我面试中遇到的。 写这篇博客只是为了自己在以后的面试中(虽然现在上班了)不要在被同样的问题难到,以后还会持续更新。 1. ArrayList 和 LinkedList: 1.两者是是集合,不同的是内部的数据结构和实现原理有所不同。ArrayList内部是数组结构...

tp5.1框架学习之请求学习

获取请求参数 第一种方式:门面方式获取数据   方式二:依赖注入方式获取 方式三:辅助函数input获取(推荐  理由 比较简单,不用引入)   参数绑定 上面是参数绑定?   依赖注入概念的理解 依赖注入是一种软件设计思想,在传统软件中,上层代码依赖于下层代码,当下层代码有所改动时,上层代码也要相应进行改动,因此维护成本较高。 而依赖注入原则的思想是,上层...

深度学习库 caffe使用 源码分析 依赖库分析 caffe glog gflags openBlas prototxt yolo_darknet 转 caffe

深度学习库 caffe使用 源码分析 依赖库分析 caffe glog gflags openBlas 本文github链接 yolo_darknet 转 caffe caffe 安装 Caffe代码解析 caffe网络模型结构在线可视化 CAFFE使用 源码分析等 caffe 模型配置文件 prototxt 详解 caffe.proto 系统变量层类型参数配置文件 caffe_简介_使用.md ...

【Python学习-二叉树-链表】【剑指offer】之复杂链表的复制

【Python学习-二叉树-链表】【剑指offer】之复杂链表的复制 复杂链表的复制 代码分析 复杂链表的复制 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head。(注意,输出结果中请不要返回参数中的节点引用,否则判题程序会直接返回空) 代码分析 这个递归的代码有问题,但不知道为什么牛客网的系统还可以通过。问...

玻璃钢生产厂家镇江玻璃钢设备外壳厂家揭阳玻璃钢外壳哪家好菏泽玻璃钢花坛价格安顺玻璃钢花钵制造十堰玻璃钢装饰多少钱大庆商业美陈哪家好运城玻璃钢餐桌椅定做泰州玻璃钢机械外壳定制汉中玻璃钢公司庆阳玻璃钢花箱定制铜陵玻璃钢休闲椅南京商场美陈加工临沧不锈钢雕塑厂家徐州玻璃钢花瓶多少钱通辽玻璃钢制作无锡玻璃钢沙发哪家好巴中商业美陈公司延安玻璃钢厂家通化玻璃钢树池坐凳定做周口玻璃钢前台价格鄂州玻璃钢造型厂家直销河南玻璃钢花池价格泸州玻璃钢天花吊顶多少钱咸宁玻璃钢动物雕塑定做广东玻璃钢座椅厂滁州商场美陈价格玻璃钢装饰制造白山玻璃钢花盆批发廊坊玻璃钢垃圾桶公司吉安玻璃钢餐桌椅厂香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声单亲妈妈陷入热恋 14岁儿子报警汪小菲曝离婚始末遭遇山火的松茸之乡雅江山火三名扑火人员牺牲系谣言何赛飞追着代拍打萧美琴窜访捷克 外交部回应卫健委通报少年有偿捐血浆16次猝死手机成瘾是影响睡眠质量重要因素高校汽车撞人致3死16伤 司机系学生315晚会后胖东来又人满为患了小米汽车超级工厂正式揭幕中国拥有亿元资产的家庭达13.3万户周杰伦一审败诉网易男孩8年未见母亲被告知被遗忘许家印被限制高消费饲养员用铁锨驱打大熊猫被辞退男子被猫抓伤后确诊“猫抓病”特朗普无法缴纳4.54亿美元罚金倪萍分享减重40斤方法联合利华开始重组张家界的山上“长”满了韩国人?张立群任西安交通大学校长杨倩无缘巴黎奥运“重生之我在北大当嫡校长”黑马情侣提车了专访95后高颜值猪保姆考生莫言也上北大硕士复试名单了网友洛杉矶偶遇贾玲专家建议不必谈骨泥色变沉迷短剧的人就像掉进了杀猪盘奥巴马现身唐宁街 黑色着装引猜测七年后宇文玥被薅头发捞上岸事业单位女子向同事水杯投不明物质凯特王妃现身!外出购物视频曝光河南驻马店通报西平中学跳楼事件王树国卸任西安交大校长 师生送别恒大被罚41.75亿到底怎么缴男子被流浪猫绊倒 投喂者赔24万房客欠租失踪 房东直发愁西双版纳热带植物园回应蜉蝣大爆发钱人豪晒法院裁定实锤抄袭外国人感慨凌晨的中国很安全胖东来员工每周单休无小长假白宫:哈马斯三号人物被杀测试车高速逃费 小米:已补缴老人退休金被冒领16年 金额超20万

玻璃钢生产厂家 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化