首先需要分析清楚其中数据的来源,就是说该从数据库中哪张表去读写数据
这里会联系到三张表分别是(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