use sunliving_commodity;
CREATE TABLE commodity_attr
(
attr_id BIGINT NOT NULL AUTO_INCREMENT COMMENT '属性 id' ,
attr_name CHAR ( 30 ) COMMENT '属性名' ,
search_type TINYINT COMMENT '是否需要检索[0-不需要，1-需要]' ,
icon VARCHAR ( 255 ) COMMENT '图标' ,
value_select CHAR ( 255 ) COMMENT '可选值列表[用逗号分隔]' ,
attr_type TINYINT COMMENT '属性类型[0-销售属性，1-基本属性]' ,
ENABLE BIGINT COMMENT '启用状态[0 - 禁用，1 - 启用]' ,
category_id BIGINT COMMENT '所属分类' ,
show_desc TINYINT COMMENT '快速展示【是否展示在介绍上；0-否 1-是】' ,
PRIMARY KEY ( attr_id)
) CHARSET = utf8mb4 COMMENT = '商品属性表' ;
SELECT *
FROM ` commodity_attr`
注入容器，实现AttrService，继承ServiceImpl
el-option的属性
v-model="dataForm.attrType"表示绑定的是dataForm.attrType这个属性 <el-form-item label="属性类型[0-销售属性，1-基本属性]" prop="attrType">
<!-- <el-input v-model="dataForm.attrType" placeholder="属性类型[0-销售属性，1-基本属性]"></el-input>-->
<el-select v-model="dataForm.attrType" placeholder="请选择">
<el-option
label="销售属性"
:value="0">
</el-option>
<el-option
label="基本属性"
:value="1">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属分类" prop="categoryId">
<!-- <el-input v-model="dataForm.categoryId" placeholder="所属分类"></el-input>-->
<el-cascader
filterable
placeholder="请选择"
v-model="cascadedCategoryId"
:options="categories"
:props="props"
></el-cascader>
</el-form-item>
categories : [ ] ,
cascadedCategoryId : [ ] ,
props : {
value : 'id' ,
label : 'name' ,
children : 'childrenCategories' ,
expandTrigger : 'hover'
}
getCategories ( ) {
this . $http ( {
url : process. env. COMMODITY_BASEPATH + '/commodity/category/list/tree' ,
method : 'get'
} ) . then ( ( { data} ) => {
console. log ( data. data)
this . categories = data. data;
} )
}
created ( ) {
this . getCategories ( )
}
use sunliving_commodity;
CREATE TABLE commodity_attr_attrgroup_relation
(
id BIGINT NOT NULL AUTO_INCREMENT COMMENT 'id' ,
attr_id BIGINT COMMENT '属性 id' ,
attr_group_id BIGINT COMMENT '属性分组 id' ,
attr_sort INT COMMENT '属性组内排序' ,
PRIMARY KEY ( id)
) CHARSET = utf8mb4 COMMENT = '商品属性和商品属性组的关联表' ;
SELECT *
FROM ` commodity_attr_attrgroup_relation`
<el-form-item label="所属分组">
<el-select ref="groupSelect" v-model="dataForm.attrGroupId" placeholder="请选择">
<el-option
v-for="item in attrGroups"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
watch : {
cascadedCategoryId ( path ) {
this . attrGroups = [ ] ;
this . dataForm. attrGroupId = "" ;
this . dataForm. categoryId = path[ path. length - 1 ] ;
if ( path && path. length == 3 ) {
this . $http ( {
url : process. env. COMMODITY_BASEPATH + '/commodity/attrgroup/list/' + path[ path. length - 1 ] ,
method : "get" ,
params : this . $http. adornParams ( { page : 1 , limit : 10000000 } )
} ) . then ( ( { data} ) => {
console. log ( "data=" , data. page. list)
if ( data && data. code === 0 ) {
this . attrGroups = data. page. list;
} else {
this . $message. error ( data. msg) ;
}
} ) ;
} else if ( path. length == 0 ) {
this . dataForm. categoryId = "" ;
} else {
this . $message. error ( "请选择正确的分类" ) ;
this . dataForm. categoryId = "" ;
}
}
} ,
void saveAttrAndRelation ( AttrEntity attr) ;
@Transactional
@Override
public void saveAttrAndRelation ( AttrEntity attr) {
this . save ( attr) ;
if ( attr. getAttrGroupId ( ) != null && attr. getAttrType ( ) == 1 ) {
AttrAttrgroupRelationEntity relationEntity = new AttrAttrgroupRelationEntity ( ) ;
relationEntity. setAttrId ( attr. getAttrId ( ) ) ;
relationEntity. setAttrGroupId ( attr. getAttrGroupId ( ) ) ;
attrAttrgroupRelationService. save ( relationEntity) ;
}
}
@RequestMapping ( "/save" )
public R save ( @RequestBody AttrEntity attr) {
attrService. saveAttrAndRelation ( attr) ;
return R . ok ( ) ;
}
package com. sun. sunliving. commodity. config ;
import com. baomidou. mybatisplus. extension. plugins. PaginationInterceptor ;
import org. mybatis. spring. annotation. MapperScan ;
import org. springframework. context. annotation. Bean ;
import org. springframework. context. annotation. Configuration ;
import org. springframework. transaction. annotation. EnableTransactionManagement ;
@Configuration
@EnableTransactionManagement
@MapperScan ( "com.sun.sunliving.commodity.dao" )
public class MyBatisConfig {
@Bean
public PaginationInterceptor paginationInterceptor ( ) {
PaginationInterceptor paginationInterceptor = new PaginationInterceptor ( ) ;
paginationInterceptor. setOverflow ( true ) ;
paginationInterceptor. setLimit ( 100 ) ;
return paginationInterceptor;
}
}
PageUtils queryPage ( Map < String , Object > ) ;
@Override
public PageUtils queryPage ( Map < String , Object > ) {
String key = ( String ) params. get ( "key" ) ;
QueryWrapper < AttrEntity > = new QueryWrapper < > ( ) ;
attrEntityQueryWrapper. eq ( "attr_type" , 1 ) ;
if ( StringUtils . isNotBlank ( key) ) {
attrEntityQueryWrapper. and ( wrapper -> {
wrapper. eq ( "attr_id" , key) . or ( ) . like ( "attr_name" , key) ;
} ) ;
}
IPage < AttrEntity > = this . page (
new Query < AttrEntity > ( ) . getPage ( params) ,
attrEntityQueryWrapper
) ;
return new PageUtils ( page) ;
}
@RequestMapping ( "/list" )
public R list ( @RequestParam Map < String , Object > ) {
PageUtils page = attrService. queryPage ( params) ;
return R . ok ( ) . put ( "page" , page) ;
}
PageUtils queryPageOnSale ( Map < String , Object > ) ;
@Override
public PageUtils queryPageOnSale ( Map < String , Object > ) {
String key = ( String ) params. get ( "key" ) ;
QueryWrapper < AttrEntity > = new QueryWrapper < > ( ) ;
attrEntityQueryWrapper. eq ( "attr_type" , 0 ) ;
if ( StringUtils . isNotBlank ( key) ) {
attrEntityQueryWrapper. and ( wrapper -> {
wrapper. eq ( "attr_id" , key) . or ( ) . like ( "attr_name" , key) ;
} ) ;
}
IPage < AttrEntity > = this . page (
new Query < AttrEntity > ( ) . getPage ( params) ,
attrEntityQueryWrapper
) ;
return new PageUtils ( page) ;
}
@RequestMapping ( "/listOnSale" )
public R listOnSale ( @RequestParam Map < String , Object > ) {
PageUtils page = attrService. queryPageOnSale ( params) ;
return R . ok ( ) . put ( "page" , page) ;
}
<el-dialog
:title="!dataForm.attrId ? '新增' : '修改'"
:close-on-click-modal="false"
:visible.sync="visible">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
label-width="80px">
<el-form-item label="属性名" prop="attrName">
<el-input v-model="dataForm.attrName" placeholder="属性名"></el-input>
</el-form-item>
<el-form-item label="图标" prop="icon">
<el-input v-model="dataForm.icon" placeholder="图标"></el-input>
</el-form-item>
<el-form-item label="可选值列表[用逗号分隔]" prop="valueSelect">
<el-input v-model="dataForm.valueSelect" placeholder="可选值列表[用逗号分隔]"></el-input>
</el-form-item>
<el-form-item label="属性类型[0-销售属性，1-基本属性]" prop="attrType">
<!-- <el-input v-model="dataForm.attrType" placeholder="属性类型[0-销售属性，1-基本属性]"></el-input>-->
<el-select v-model="dataForm.attrType" placeholder="请选择">
<el-option
label="销售属性"
:value="0">
</el-option>
<el-option
label="基本属性"
:value="1">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="启用状态[0 - 禁用，1 - 启用]" prop="enable">
<el-input v-model="dataForm.enable" placeholder="启用状态[0 - 禁用，1 - 启用]"></el-input>
</el-form-item>
<el-form-item label="所属分类" prop="categoryId">
<el-cascader
filterable
placeholder="请选择"
v-model="cascadedCategoryId"
:options="categories"
:props="props"
></el-cascader>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span>
</el-dialog>
List < Long > getCascadedCategoryId ( Long categoryId) ;
@Override
public List < Long > getCascadedCategoryId ( Long categoryId) {
ArrayList < Long > = new ArrayList < > ( ) ;
CategoryEntity categoryEntity = categoryDao. selectById ( categoryId) ;
while ( categoryEntity != null ) {
res. add ( categoryEntity. getId ( ) ) ;
categoryId = categoryEntity. getParentId ( ) ;
categoryEntity = categoryDao. selectById ( categoryId) ;
}
Collections . reverse ( res) ;
return res;
}
@RequestMapping ( "/info/{attrId}" )
public R info ( @PathVariable ( "attrId" ) Long attrId) {
AttrEntity attr = attrService. getById ( attrId) ;
List < Long > = attrService. getCascadedCategoryId ( attr. getCategoryId ( ) ) ;
attr. setCascadedCategoryId ( cascadedCategoryId) ;
return R . ok ( ) . put ( "attr" , attr) ;
}
一对一，一对多一般通过外键解决 通过在多方的表中添加一个外键字段指向一方的主键来实现 此时这个外键的值只能从一方的主键中取，在该项目中，使用的是级联菜单，让用户只能选择一方的主键 一对多，多对多一般通过关联表解决 关联表具有两个表的主键，也可以有两个表name或者其他的冗余字段 在该项目的基本属性保存功能，向属性的entity传入了一个属性组的id，使其在保存时同时完成了属性组与基本属性的关联 有两个关联，分类表与属性表的一对多，属性组表与属性表的一对多 分类表与属性表：使用在属性表中添加外键的方式体现关联 属性组表与属性表：使用关联表的方式体现关联 分类表与属性表：在新增时使用级联菜单的形式让用户选择分类表的主键 属性组表与属性表，在新增时实现关联
使用vue的watch监控分类的变化 只要用户选中了所属分类，则取出该分类，根据这个分类的id来找到所有的分组，并以下拉框的形式显示 点击确定，就将这个新增的所属分组的id也保存到entity中（需要新增加字段） 后端首先将基本的属性信息保存到表中，然后根据所属分组的id和销售属性的id，将数据插入到关联表中
