使用若依二次开发商城系统-4：商品属性

功能3：商品分类
功能2：商品品牌
功能1：搭建若依运行环境

前言

商品属性功能类似若依自带的字典管理，分两步，先设置属性名，再设置对应的属性值。

一.操作步骤

1）数据库表product_property和product_property_value

使用建表语句在数据库中创建表

drop table if exists product_property;
CREATE TABLE IF NOT EXISTS `product_property` (`id` bigint NOT NULL AUTO_INCREMENT COMMENT '属性id',`name` varchar(64) COMMENT '属性名称',`remark` varchar(255) COMMENT '备注',PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='商品属性';drop table if exists product_property_value;
CREATE TABLE IF NOT EXISTS `product_property_value` (`id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',`property_id` bigint COMMENT '属性id',`name` varchar(64) COMMENT '属性值',`remark` varchar(255) COMMENT '备注',PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='商品属性值';

2）代码生成

系统工具
代码生成
导入

3）配置product_property

选中刚才创建的表product_property。点击确定。
在操作列，点击编辑图标

基本信息

实体类名称：对应java代码中的实体类的类名。
作者：对应java代码中的注释

字段信息

插入列：控制新增页面的显示项。
显示类型列：控制生成的组件类型。文本框，下拉框，单选框，复选框，图片上传等。
编辑列：控制修改页面的显示项。前期一般配置成跟插入列一致。
列表列：控制页面表格的显示列。
查询列：控制页面查询条件项。勾选的字段会被生成页面查询条件。
必填列：控制新增和修改页面中的对应字段是否必填。
具体配置需要参考项目的页面原型。

生成信息

生成包路径：生成的java代码，会放在对应的包路径下。
生成功能名：在页面上显示菜单名称
上级菜单：选中之前新建的一级目录，商品中心。

在操作列，点击生成代码图标。
浏览器会下载一个zip压缩包。

4）配置product_property_value

选中刚才创建的表product_property_value。点击确定。
在操作列，点击编辑图标

基本信息

实体类名称：对应java代码中的实体类的类名。
作者：对应java代码中的注释

字段信息

插入列：控制新增页面的显示项。
显示类型列：控制生成的组件类型。文本框，下拉框，单选框，复选框，图片上传等。
编辑列：控制修改页面的显示项。前期一般配置成跟插入列一致。
列表列：控制页面表格的显示列。
查询列：控制页面查询条件项。勾选的字段会被生成页面查询条件。
必填列：控制新增和修改页面中的对应字段是否必填。
具体配置需要参考项目的页面原型。

生成信息

生成包路径：生成的java代码，会放在对应的包路径下。
生成功能名：在页面上显示菜单名称
上级菜单：选中之前新建的一级目录，商品中心。

在操作列，点击生成代码图标。
浏览器会下载一个zip压缩包。

5）代码附件-商品属性页面

将product_property表的java代码和vue代码放在对应的位置，sql语句也在数据库中执行。
商品属性页面的单表增删改查。

6）商品属性值页面

将商品属性页面中的属性名称列设置为可点击，打开属性值设置页面。

      <el-table-column label="属性名称" align="center"><template #default="scope"><router-link :to="'/mall/property-data/index/' + scope.row.id" class="link-type"><span>{{ scope.row.name }}</span></router-link></template></el-table-column>

修改src\router\index.js，新增动态路由

  {path: '/mall/property-data',component: Layout,hidden: true,permissions: ['mall:property:list'],children: [{path: 'index/:propertyId(\\d+)',component: () => import('@/views/mall/property/data'),name: 'PropertyData',meta: { title: '商品属性值', activeMenu: '/mall/property' }}]}

新建文件src\views\mall\property\data.vue。将product_property_value表生成的vue代码复制到文件内。


生成的java代码复制到对应路径

新增查询条件，实现商品属性值页面只显示点击的对应属性下的值。
mapper/mall/ProductPropertyValueMapper.xml

    <select id="selectProductPropertyValueList" parameterType="ProductPropertyValue" resultMap="ProductPropertyValueResult"><include refid="selectProductPropertyValueVo"/><where><if test="name != null  and name != ''"> and name like concat('%', #{name}, '%')</if><if test="propertyId != null">and property_id = #{propertyId}</if></where></select>

修改文件src\views\mall\property\data.vue。保存属性ID，每次查询时都要带上。实现属性值页面只展示指定属性ID下的。

const proId = ref("");/** 查询商品属性值列表 */
function getList() {loading.value = true;queryParams.value.propertyId = proId.valuelistProperty_value(queryParams.value).then((response) => {property_valueList.value = response.rows;total.value = response.total;loading.value = false;});
}function getListById(propertyId) {proId.value = propertyIdgetList()
}getListById(route.params && route.params.propertyId);

二.功能验证

运行项目，浏览器访问http://localhost/mall/property

点击属性名称列的颜色，打开商品属性值页面。只显示出颜色属性下的属性值。

点击尺码，只显示出尺码下的值。