2.04 商品服务-4-商品管理

最新推荐文章于 2024-10-01 09:29:45 发布
最新推荐文章于 2024-10-01 09:29:45 发布
阅读量74 收藏
点赞数
分类专栏： mymail项目总结 文章标签： java 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52328832/article/details/131037237
版权
文章展示了电商系统中关于商品管理的部分功能实现，包括会员模块的保存、修改和删除操作，Spu与Sku的关系解释，页面展示商品分类关联的品牌和属性，以及商品（Spu和Sku）的新增和检索功能。前端使用Vue.js组件进行交互设计，后端采用MyBatis进行数据操作。
摘要由CSDN通过智能技术生成
1.整合仓库服务

image-20230529202830026

在mail-member模块的MemberController实现以下功能

  /**
   * 保存
   */
  @RequestMapping("/save")
  //@RequiresPermissions("member:member:save")
  public R save(@RequestBody MemberEntity member){
memberService.save(member);

      return R.ok();
  }

  /**
   * 修改
   */
  @RequestMapping("/update")
  //@RequiresPermissions("member:member:update")
  public R update(@RequestBody MemberEntity member){
memberService.updateById(member);

      return R.ok();
  }

  /**
   * 删除
   */
  @RequestMapping("/delete")
  //@RequiresPermissions("member:member:delete")
  public R delete(@RequestBody Long[] ids){
memberService.removeByIds(Arrays.asList(ids));

      return R.ok();
  }
2. Spu与Sku的关系

举个例子：

spu相当于iPhone

sku相当于iPhone其下的iPhone 14 黑色 256g、iPhone 14 白色 128g、iPhone 13 银色 256g

3. 页面展示image-20230529203705635
3.获取分类关联的品牌

  • 演示

    image-20230529203959880

    选择手机分类，会显示手机分类下的所有品牌

    image-20230529204129429

4.获取分类下的所有属性分组和规格参数

image-20230529204938971

获得手机分类下的所有属性分组和规格参数

image-20230529210917109

5.新增商品

  • 演示

    image-20230529211711273

    image-20230529211952090

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PlLTIOCk-1685884522061)(C:/Users/PEIGEN/AppData/Roaming/Typora/typora-user-images/image-20230529213556041.png)]

    image-20230529213212050

  • 前端实现

    前端代码比较长,省略

  • 后端实现

    在mail-product模块的SpuInfoController中编写save方法，使用mybatis自带的save方法

        /**
     * 保存
     */
    @RequestMapping("/save")
    //@RequiresPermissions("product:skuinfo:save")
    public R save(@RequestBody SkuInfoEntity skuInfo){
		skuInfoService.save(skuInfo);

        return R.ok();
    }
6. spu检索功能

  • 演示

    image-20230530164330364

    image-20230530164718761

  • 前端代码

    <template>
  <div class="mod-config">
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
    >
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="id" header-align="center" align="center" label="id"></el-table-column>
      <el-table-column prop="spuName" header-align="center" align="center" label="名称"></el-table-column>
      <el-table-column prop="spuDescription" header-align="center" align="center" label="描述"></el-table-column>
      <el-table-column prop="catalogId" header-align="center" align="center" label="分类"></el-table-column>
      <el-table-column prop="brandId" header-align="center" align="center" label="品牌"></el-table-column>
      <el-table-column prop="weight" header-align="center" align="center" label="重量"></el-table-column>
      <el-table-column prop="publishStatus" header-align="center" align="center" label="上架状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.publishStatus == 0">新建</el-tag>
          <el-tag v-if="scope.row.publishStatus == 1">已上架</el-tag>
          <el-tag v-if="scope.row.publishStatus == 2">已下架</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" header-align="center" align="center" label="创建时间"></el-table-column>
      <el-table-column prop="updateTime" header-align="center" align="center" label="修改时间"></el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.publishStatus == 0"
            type="text"
            size="small"
            @click="productUp(scope.row.id)"
          >上架</el-button>
          <el-button type="text" size="small" @click="attrUpdateShow(scope.row)">规格</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataSub: null,
      dataForm: {},
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    };
  },
  props: {
    catId: {
      type: Number,
      default: 0
    }
  },
  components: {},
  activated() {
    this.getDataList();
  },
  methods: {
    productUp(id) {
      this.$http({
        url: this.$http.adornUrl("/product/spuinfo/" + id + "/up"),
        method: "post"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.getDataList();
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    attrUpdateShow(row) {
      console.log(row);
      this.$router.push({
        path: "/product-attrupdate",
        query: { spuId: row.id, catalogId: row.catalogId }
      });
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      let param = {};
      Object.assign(param, this.dataForm, {
        page: this.pageIndex,
        limit: this.pageSize
      });
      this.$http({
        url: this.$http.adornUrl("/product/spuinfo/list"),
        method: "get",
        params: this.$http.adornParams(param)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {}
  },
  mounted() {
    this.dataSub = PubSub.subscribe("dataForm", (msg, val) => {
      console.log("~~~~~", val);
      this.dataForm = val;
      this.getDataList();
    });
  },
  beforeDestroy() {
    PubSub.unsubscribe(this.dataSub);
  }
};
</script>

  • 后端代码

    在SpuInfoController中编写info方法，调用mybatis自带的getById方法

        /**
     * 信息
     */
    @RequestMapping("/info/{id}")
    //@RequiresPermissions("product:spuinfo:info")
    public R info(@PathVariable("id") Long id){
		SpuInfoEntity spuInfo = spuInfoService.getById(id);

        return R.ok().put("spuInfo", spuInfo);
    }
7. sku检索功能

  • 演示

    image-20230530165310591

    image-20230530165347570

  • 前端代码

    <template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form :inline="true" :model="dataForm">
        <el-form-item label="分类">
          <category-cascader :catelogPath.sync="catelogPath"></category-cascader>
        </el-form-item>
        <el-form-item label="品牌">
          <brand-select style="width:160px"></brand-select>
        </el-form-item>
        <el-form-item label="价格">
          <el-input-number style="width:160px" v-model="dataForm.price.min" :min="0"></el-input-number>-
          <el-input-number style="width:160px" v-model="dataForm.price.max" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="检索">
          <el-input style="width:160px" v-model="dataForm.key" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchSkuInfo">查询</el-button>
        </el-form-item>
      </el-form>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
      @expand-change="getSkuDetails"
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          商品标题：{{scope.row.skuTitle}}
          <br />
          商品副标题：{{scope.row.skuSubtitle}}
          <br />
          商品描述：{{scope.row.skuDesc}}
          <br />
          分类ID：{{scope.row.catalogId}}
          <br />
          SpuID：{{scope.row.spuId}}
          <br />
          品牌ID：{{scope.row.brandId}}
          <br />
        </template>
      </el-table-column>
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="skuId" header-align="center" align="center" label="skuId"></el-table-column>
      <el-table-column prop="skuName" header-align="center" align="center" label="名称"></el-table-column>
      <el-table-column prop="skuDefaultImg" header-align="center" align="center" label="默认图片">
        <template slot-scope="scope">
          <img :src="scope.row.skuDefaultImg" style="width:80px;height:80px;" />
        </template>
      </el-table-column>
      <el-table-column prop="price" header-align="center" align="center" label="价格"></el-table-column>
      <el-table-column prop="saleCount" header-align="center" align="center" label="销量"></el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="previewHandle(scope.row.skuId)">预览</el-button>
          <el-button type="text" size="small" @click="commentHandle(scope.row.skuId)">评论</el-button>
          <el-dropdown
            @command="handleCommand(scope.row,$event)"
            size="small"
            split-button
            type="text"
          >
            更多
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="uploadImages">上传图片</el-dropdown-item>
              <el-dropdown-item command="seckillSettings">参与秒杀</el-dropdown-item>
              <el-dropdown-item command="reductionSettings">满减设置</el-dropdown-item>
              <el-dropdown-item command="discountSettings">折扣设置</el-dropdown-item>
              <el-dropdown-item command="memberPriceSettings">会员价格</el-dropdown-item>
              <el-dropdown-item command="stockSettings">库存管理</el-dropdown-item>
              <el-dropdown-item command="couponSettings">优惠劵</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
import CategoryCascader from "../common/category-cascader";
import BrandSelect from "../common/brand-select";
export default {
  data() {
    return {
      catPathSub: null,
      brandIdSub: null,
      dataForm: {
        key: "",
        brandId: 0,
        catelogId: 0,
        price: {
          min: 0,
          max: 0
        }
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      catelogPath: []
    };
  },
  components: {
    CategoryCascader,
    BrandSelect
  },
  activated() {
    this.getDataList();
  },
  methods: {
    getSkuDetails(row, expand) {
      //sku详情查询
      console.log("展开某行...", row, expand);
    },
    //处理更多指令
    handleCommand(row, command) {
      console.log("~~~~~", row, command);
      if ("stockSettings" == command) {
        this.$router.push({ path: "/ware-sku", query: { skuId: row.skuId } });
      }
    },
    searchSkuInfo() {
      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/product/skuinfo/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key,
          catelogId: this.dataForm.catelogId,
          brandId: this.dataForm.brandId,
          min: this.dataForm.price.min,
          max: this.dataForm.price.max
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    }
  },
  mounted() {
    this.catPathSub = PubSub.subscribe("catPath", (msg, val) => {
      this.dataForm.catelogId = val[val.length - 1];
    });
    this.brandIdSub = PubSub.subscribe("brandId", (msg, val) => {
      this.dataForm.brandId = val;
    });
  },
  beforeDestroy() {
    PubSub.unsubscribe(this.catPathSub);
    PubSub.unsubscribe(this.brandIdSub);
  } //生命周期 - 销毁之前
};
</script>

  • 后端代码

    在SkuInfoController中编写list方法

        /**
     * 列表
     */
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params){
        PageUtils page = skuInfoService.queryPageByCondition(params);

        return R.ok().put("page", page);
    }

    在SkuInfoServiceImpl中具体实现

        @Override
    public PageUtils queryPageByCondition(Map<String, Object> params) {
        QueryWrapper<SkuInfoEntity> queryWrapper = new QueryWrapper<>();

        String key = (String) params.get("key");
        if (!StringUtils.isEmpty(key) && !"0".equalsIgnoreCase(key)) {
            queryWrapper.and((wrapper) -> {
                wrapper.eq("sku_id",key).or().like("sku_name",key);
            });
        }

        String catelogId = (String) params.get("catelogId");
        if (!StringUtils.isEmpty(catelogId) && !"0".equalsIgnoreCase(catelogId)) {
            queryWrapper.eq("catalog_id",catelogId);
        }

        String brandId = (String) params.get("brandId");
        if (!StringUtils.isEmpty(brandId) && !"0".equalsIgnoreCase(brandId)) {
            queryWrapper.eq("brand_id",brandId);
        }

        String min = (String) params.get("min");
        if (!StringUtils.isEmpty(min)) {
            queryWrapper.ge("price",min);
        }

        String max = (String) params.get("max");

        if (!StringUtils.isEmpty(max)) {
            try {
                BigDecimal bigDecimal = new BigDecimal(max);
                if (bigDecimal.compareTo(BigDecimal.ZERO) == 1) {
                    queryWrapper.le("price",max);
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

        // key:
        // catelogId: 225
        // brandId: 9
        // min: 0
        // max: 0

        IPage<SkuInfoEntity> page = this.page(
                new Query<SkuInfoEntity>().getPage(params),
                queryWrapper
        );
        return new PageUtils(page);
    }
总结

该篇主要实现了商品添加和检索功能。

PEIGENN
关注
专栏目录
2.04-技术分析1
08-08
MySQL是关系型数据库管理系统，用于存储和管理数据；PHP是一种服务器端脚本语言，用于生成动态网页内容。 在基础设施层面，计划采用亚马逊的云服务平台AWS（Amazon Web Services）。AWS提供了广泛的服务，如EC2...
2018年私募基金年度报告：冬去春会来_华宝证券-34页.pdf
07-22
然而，2018年中国私募证券基金在金融监管趋严的环境下规模缩水，备案私募证券投资基金数量减少，管理规模下降2.04%至2.239万亿元人民币。 中国私募基金的业绩在2018年面临挑战，尤其是权益类策略，如股票多头、股票...
Vue中this.$router.push（参数） 实现页面跳转
热门推荐
吴冬雪的博客
05-22 13万+
由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。很多情况下，我们在执行点击按钮跳转页面之前还会执行一系列方法，这时可以使用。页面通过path/name和query传递参数，该实例中row为某行表格数据。及通过路由配置的name属性访问。来修改 url，完成跳转。
2.04 商品服务-2-品牌管理
weixin_52328832的博客
06-04 139
该篇文章主要写了关于使用阿里云OSS进行文件上传以及数据校验,另外还有品牌的新增和删除。
2.04 商品服务-5-仓库管理
weixin_52328832的博客
06-04 88
该篇写了仓储管理，但是思绪比较混乱，暂且编写成这样，后续再改。
RocketMQ-02
qq_40298175的博客
03-06 343
黑马rocketmq毕竟
从前慢-Mysql高级及实战
unique_perfect的博客
12-14 3445
1. kubernetes 概述 1.1 kubernetes 基本介绍 kubernetes，简称 K8s，是用 8 代替 8 个字符“ubernete”而成的缩写。是一个开源 的，用于管理云平台中多个主机上的容器化的应用，Kubernetes 的目标是让部署容器化的 应用简单并且高效（powerful）,Kubernetes 提供了应用部署，规划，更新，维护的一种 机制。 传统的应用部署方式是通过插件或脚本来安装应用。这样做的缺点是应用的运行、配 置、管理、所有生存周期将与当前操作系统绑定，这样做并不利
Oracle 10g 在window 下的安装概述 --最后一篇
吴壮壮
01-08 574
 Oracle 10g 在window 下的安装概述 1.数据库概述 Oracle 应用服务器 10g 是集成的、基于标准的软件平台，Oracle Application Server 10g是继 Oracle9iApplication Server (Oracle9iAS) Release 2.0 version 9.0.2和 version9.0.3 之后的
《2016-2017年全球竞争力报告》述评
wzebinbin的博客
09-29 6861
《2016-2017年全球竞争力报告》述评 发布时间：2017-04-06 大中小 http://www.sipo.gov.cn/zlssbgs/zlyj/201704/t20170406_1309284.html 　　【编者按】　2016年9月28日，世界经济论坛发布了《2016-2017年全球竞争力报告》。报告显示，瑞士连续八年位居榜首，成为全球最具竞争力的国家，新加坡和美国分列
[学习笔记]PowerBI数据分析与可视化-B站数据大白
zhangyifeng_1995的博客
03-28 4535
[学习笔记]PowerBI数据分析与可视化-B站数据大白
1015-1021
10-30 2697
Normal 0 7.8 pt 0 2 false false false MicrosoftInternetExplorer4 <!-- /* Font
叮叮当当电子商务网站产品 v2.04 免费版
07-31
·商品热点排行管理、销售排行管理 ·会员信息管理、会员积分管理、网上余款管理、在线发邮件 ·会员评价、会员访问次数、时间、地点信息查看和管理 ·会员搜索、订单搜索、收藏商品管理和搜索 ...
基于Hive和Hadoop的哔哩哔哩网站分析系统
图南的博客
09-27 735
本项目是一个基于大数据技术的哔哩哔哩平台分析系统，旨在为用户提供全面的哔哩哔哩视频数据和深入的用户行为分析。系统采用 Hadoop 平台进行大规模数据存储和处理，利用 MapReduce 进行数据分析和处理，通过 Sqoop 实现数据的导入导出，以 Spark 为核心进行高效的数据处理。整个系统结合了大数据处理技术，为用户提供精准的内容推荐和深入的用户兴趣分析，帮助平台更好地了解视频趋势和用户需求。
「Java开发指南」如何用MyEclipse为iPhone搭建Spring应用程序？
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-30 667
本教程将介绍如何用MyEclipse为iPhone搭建Spring应用程序，欢迎下载最新版IDE体验！
spring-boot 整合 mybatis
m0_72168501的博客
09-29 483
spring boot 整合 mybatis
Java内存布局
最新发布
阿呆的专栏
10-01 764
64位 JVM 不启用指针压缩时：Object Header 大小是16字节。64位 JVM 启用指针压缩时（默认）：Object Header 大小是12字节。32位 JVM：Object Header 大小是8字节。JVM在默认情况下启用指针压缩，但如果堆内存超过32GB，就会禁用指针压缩。32GB是压缩指针的最大寻址范围。超过32GB的堆内存中，压缩指针带来的性能提升并不显著，而且需要解压指针反而可能增加开销。
C#基础：掌握控制流语句，构建灵活的程序逻辑
学习和分享
09-28 313
在C#中，控制流语句是用来控制程序执行流程的重要部分。它们允许你根据条件执行不同的代码块，或者重复执行某些代码块直到满足特定条件。
进程管理工具：非daemon进程管理工具supervisor
happy_king_zi的博客
09-29 1099
supervisor是一个 Client/Server模式的系统，允许用户在类unix操作系统上监视和控制多个进程，或者可以说是多个程序。supervisor与launchd，daemontools，runit等程序有着相同的功能，与其中某些程序不同的是，它并不作为“id 为 1的进程”而替代init。相反，它用于控制应用程序，像启动其它程序一样，通俗理解就是，把Supervisor服务管理的进程程序，它们作为supervisor的子进程来运行，而supervisor是父进程。
modbus调试精灵v2.04-加强版
07-29
Modbus调试精灵v2.04-加强版是一款用于Modbus通信协议调试的工具软件。Modbus是一种主从式的通信协议，常用于工业自动化领域的设备之间的数据通信。调试工具对于工程师而言是非常重要的，可以帮助他们快速定位和解决...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值