商城中_显示属性的数据操作(添加,修改,回显)
首先需要分析清楚其中数据的来源,就是说该从数据库中哪张表去读写数据
这里会联系到三张表分别是(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("保存失败");
}
}
智能推荐
学习乐优商城中遇到的坑
本人暑假期间学习了乐优商城这个项目,历时二十天,遇到了许多的麻烦,应该会有挺多人遇到。所以想记录一下,让大家跳坑。 首先,我建议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。(注意,输出结果中请不要返回参数中的节点引用,否则判题程序会直接返回空) 代码分析 这个递归的代码有问题,但不知道为什么牛客网的系统还可以通过。问...