Springboot3 + MyBatis-Plus + MySql + Uniapp 实现商品规格选择sku（附带自设计数据库，最新保姆级教程）

本文链接：https://blog.youkuaiyun.com/weixin_56050344/article/details/142415183

Springboot3 + MyBatis-Plus + MySql + Uniapp 实现商品规格选择sku（附带自设计数据库，最新保姆级教程）

1、效果展示
2、数据库设计
3、后端代码
4、前端代码

1、效果展示

在这里插入图片描述

2、数据库设计

2.1 商品表

/*
 Navicat Premium Data Transfer

 Source Server         : Test1
 Source Server Type    : MySQL
 Source Server Version : 80200
 Source Host           : localhost:3306
 Source Schema         : yunshangshequ

 Target Server Type    : MySQL
 Target Server Version : 80200
 File Encoding         : 65001

 Date: 21/09/2024 12:59:26
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for shop
-- ----------------------------
DROP TABLE IF EXISTS `shop`;
CREATE TABLE `shop`  (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '商品ID',
  `business_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '标签/自营？',
  `title` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '商品简介',
  `sale_number` int NULL DEFAULT NULL COMMENT '已售数量',
  `old_price` decimal(10, 2) NULL DEFAULT NULL COMMENT '旧价格',
  `new_price` decimal(10, 2) NULL DEFAULT NULL COMMENT '现售价',
  `in_price` decimal(10, 2) NULL DEFAULT NULL COMMENT '进货价',
  `inventory_num` int NULL DEFAULT NULL COMMENT '库存',
  `main_image` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '商品主图',
  `shop_type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '商品分类',
  `shop_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '店铺名称',
  `create_time` datetime NULL DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime NULL DEFAULT NULL COMMENT '更新时间',
  `is_deleted` tinyint NULL DEFAULT NULL COMMENT '逻辑删除',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of shop
-- ----------------------------
INSERT INTO `shop` VALUES (1, '自营', '新货【三只松鼠_量贩碧根果500g】特大健康坚果零食奶油味长寿果', 138, 39.90, 29.90, 19.90, 200, 'https://gw.alicdn.com/imgextra/i3/2218288872763/O1CN01rN6Cn91WHVIflhWLg_!!2218288872763.jpg', '1', '三只松鼠旗舰店', NULL, NULL, 0);
INSERT INTO `shop` VALUES (2, '', '新货【三只松鼠_量贩碧根果1500g】特大健康坚果零食奶油味长寿果', 28, 59.90, 49.90, 39.90, 2000, 'https://gw.alicdn.com/imgextra/i3/2218288872763/O1CN01rN6Cn91WHVIflhWLg_!!2218288872763.jpg', '2', '三只耗子', NULL, NULL, 0);

SET FOREIGN_KEY_CHECKS = 1;

2.2 商品价格和规格中间表

/*
 Navicat Premium Data Transfer

 Source Server         : Test1
 Source Server Type    : MySQL
 Source Server Version : 80200
 Source Host           : localhost:3306
 Source Schema         : yunshangshequ

 Target Server Type    : MySQL
 Target Server Version : 80200
 File Encoding         : 65001

 Date: 21/09/2024 12:59:16
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for shop_specs
-- ----------------------------
DROP TABLE IF EXISTS `shop_specs`;
CREATE TABLE `shop_specs`  (
  `id` int NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `goods_id` int NULL DEFAULT NULL COMMENT '规格对应的商品id',
  `price` decimal(10, 2) NULL DEFAULT NULL COMMENT '对应规格的价格',
  `sku1` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '对应的规格',
  `sku2` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '对应的规格',
  `sku3` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '对应的规格',
  `sku4` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '对应的规格',
  `create_time` datetime NULL DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime NULL DEFAULT NULL COMMENT '更新时间',
  `is_deleted` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '逻辑删除',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of shop_specs
-- ----------------------------
INSERT INTO `shop_specs` VALUES (1, 1, 39.90, '1', '2', NULL, NULL, NULL, NULL, '0');
INSERT INTO `shop_specs` VALUES (2, 1, 29.90, '1', '4', NULL, NULL, NULL, NULL, '0');
INSERT INTO `shop_specs` VALUES (3, 1, 59.90, '3', '2', NULL, NULL, NULL, NULL, '0');
INSERT INTO `shop_specs` VALUES (4, 1, 49.00, '3', '4', NULL, NULL, NULL, NULL, '0');

SET FOREIGN_KEY_CHECKS = 1;

2.3 商品规格表

/*
 Navicat Premium Data Transfer

 Source Server         : Test1
 Source Server Type    : MySQL
 Source Server Version : 80200
 Source Host           : localhost:3306
 Source Schema         : yunshangshequ

 Target Server Type    : MySQL
 Target Server Version : 80200
 File Encoding         : 65001

 Date: 21/09/2024 12:59:04
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for shop_sku
-- ----------------------------
DROP TABLE IF EXISTS `shop_sku`;
CREATE TABLE `shop_sku`  (
  `id` int NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `attr` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '属性名',
  `attr_value` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '属性值',
  `create_time` datetime NULL DEFAULT NULL,
  `update_time` datetime NULL DEFAULT NULL,
  `is_deleted` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of shop_sku
-- ----------------------------
INSERT INTO `shop_sku` VALUES (1, '重量', '1kg', NULL, NULL, '0');
INSERT INTO `shop_sku` VALUES (2, '大小', '大果', NULL, NULL, '0');
INSERT INTO `shop_sku` VALUES (3, '重量', '2kg', NULL, NULL, '0');
INSERT INTO `shop_sku` VALUES (4, '大小', '中果', NULL, NULL, '0');

SET FOREIGN_KEY_CHECKS = 1;

3、后端代码

3.1 model

BaseEntity 所有表字段的基本组成字段

package com.zhong.model.entity;


import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.fasterxml.jackson.annotation.JsonIgnore;
import io.swagger.v3.oas.annotations.media.Schema;
import lombok.Data;

import java.io.Serializable;
import java.util.Date;

@Data
public class BaseEntity implements Serializable {
   

    @Schema(description = "主键")
    @TableId(value = "id", type = IdType.AUTO)
    private Long id;

    @Schema(description = "创建时间")
    @TableField(value = "create_time", fill = FieldFill.INSERT)
    @JsonIgnore
    private Date createTime;

    @Schema(description = "更新时间")
    @TableField(value = "update_time", fill = FieldFill.UPDATE)
    @JsonIgnore
    private Date updateTime;

    @Schema(description = "逻辑删除")
    @TableField("is_deleted")
    @JsonIgnore
    private Byte isDeleted;

}

shop 表

package com.zhong.model.entity.shop;

import java.io.Serializable;
import java.math.BigDecimal;

import com.zhong.model.entity.BaseEntity;
import lombok.Data;

/**
 * 
 * @TableName shop 商品信息
 */
@Data
public class Shop extends BaseEntity {
   

    /**
     * 标签/自营？
     */
    private String businessName;

    /**
     * 商品简介
     */
    private String title;

    /**
     * 已售数量
     */
    private Integer saleNumber;

    /**
     * 旧价格
     */
    private BigDecimal oldPrice;

    /**
     * 现售价
     */
    private BigDecimal newPrice;

    /**
     * 进货价
     */