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

news2025/4/25 5:27:46

功能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.value
    listProperty_value(queryParams.value).then((response) => {
        property_valueList.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
}

function getListById(propertyId) {
    proId.value = propertyId
    getList()
}

getListById(route.params && route.params.propertyId);