完成商品SPU管理页面

S-X-S2024-05-25 12:48

文章目录

1.引入前端界面

1.将前端界面放到commodity下
2.创建菜单
3.进入前端项目，使用npm添加依赖
1.根目录下输入
sh 复制代码 
npm install --save pubsub-js
2.报错 chromedriver@2.27.2的问题
3.点击链接下载压缩包，然后使用下面的命令安装
sh 复制代码 
npm install chromedriver --chromedriver_filepath=压缩包路径\chromedriver_win32.zip
4.再次安装 pubsub-js 成功
5.在main.js中引入这个组件
4.修改两个vue文件的路径为环境变量 + 资源路径的形式
1.spu.vue
2.spuinfo.vue
5.启动vue项目
1.报错，依赖有问题
2.执行 npm i 即可，如果还有问题，有针对的解决
3.此时可以访问SPU管理页面
6.遇到依赖问题，进行彻底清理的做法（根目录下执行命令）
1.清除 npm 缓存
sh 复制代码 
npm cache clean --force
2.删除 node_modules 文件夹
sh 复制代码 
rm -rf node_modules
3.删除 package-lock.json 文件
sh 复制代码 
rm package-lock.json
4.运行 npm install
sh 复制代码 
npm install

2.SPU信息分页查询

1.前端 spuinfo.vue
1.修改一下分页信息，然后查看页面，发现基本分页已经完成
2.点击分类发现品牌没有显示出来
3.查看请求，发现是404，中间少了一个/，加上就好了
2.分析前端请求
1.点击查询，调用searchSpuInfo方法
2.这个方法会向后端发送dataForm的数据
3.全局搜索一下dataForm，可以看到有四个信息
4.打印一下会传递什么信息
5.分析得出传入后端的搜索条件
  • 品牌id
  • 分类id
  • 检索的key：要求检索时根据id精准查询或者根据名称模糊查询
  • 上架状态：0：新建，1：上架，2：下架
2.后端 sunliving-commodity模块
1.SpuInfoService.java 新增方法根据条件查询分页列表
java 复制代码 
    /**
     * 根据条件查询分页列表
     * @param params
     * @return
     */
    PageUtils queryPageByCondition(Map<String, Object> params);
2.SpuInfoServiceImpl.java 实现方法
java 复制代码 
    @Override
    public PageUtils queryPageByCondition(Map<String, Object> params) {
        QueryWrapper<SpuInfoEntity> wrapper = new QueryWrapper<>();
        // 按检索条件-spu 名字
        String key = (String) params.get("key");
        if (!StringUtils.isEmpty(key)) {
            wrapper.and((w) -> { // 注意这里的 and 会把后面两个条件括起来
                w.eq("id", key).or().like("spu_name", key);
            });
        }
        // 加入状态
        String status = (String) params.get("status");
        if (!StringUtils.isEmpty(status)) {
            wrapper.eq("publish_status", status);
        }
        // 加入品牌 id
        String brandId = (String) params.get("brandId");
        if (!StringUtils.isEmpty(brandId) && !"0".equalsIgnoreCase(brandId)) {
            wrapper.eq("brand_id", brandId);
        }
        // 加入分类 id
        String catelogId = (String) params.get("catelogId");
        if (!StringUtils.isEmpty(catelogId) && !"0".equalsIgnoreCase(catelogId)) {
            wrapper.eq("catalog_id", catelogId);
        }
        // 分页查询
        IPage<SpuInfoEntity> page = this.page(
                new Query<SpuInfoEntity>().getPage(params), wrapper
        );
        return new PageUtils(page);
    }
3.SpuInfoController.java 调用方法
java 复制代码 
    /**
     * 列表
     */
    @RequestMapping("/list")
    // @RequiresPermissions("commodity:spuinfo:list")
    public R list(@RequestParam Map<String, Object> params) {
        PageUtils page = spuInfoService.queryPageByCondition(params);

        return R.ok().put("page", page);
    }
3.前后端联调
1.查询性价比手机的分类
2.查询二手手机分类
3.性价比手机的小米品牌
4.新建状态
5.id为2或者名称为2的模糊查询

3.SPU上架和下架

1.前端 spuinfo.vue
1.使用插槽机制获取当前行的publishStatus，根据这个值来决定上架还是下架
2.上架函数 productUp
3.下架函数 productDown
2.后端 sunliving-commodity模块
1. SpuInfoService.java 新增上架和下架的方法
java 复制代码 
    /**
     * 商品上架
     * @param spuId
     */
    void productUp(Long spuId);

    /**
     * 商品下架
     * @param spuId
     */
    void productDown(Long spuId);
2.SpuInfoServiceImpl.java 实现方法
java 复制代码 
    @Override
    public void productUp(Long spuId) {
        // 根据id修改publish_status为1
        SpuInfoEntity spuInfoEntity = new SpuInfoEntity();
        spuInfoEntity.setId(spuId);
        spuInfoEntity.setPublishStatus(1);
        // ，更新update_time
        spuInfoEntity.setUpdateTime(new Date());
        this.updateById(spuInfoEntity);
    }

    @Override
    public void productDown(Long spuId) {
        // 根据id修改publish_status为2
        SpuInfoEntity spuInfoEntity = new SpuInfoEntity();
        spuInfoEntity.setId(spuId);
        spuInfoEntity.setPublishStatus(2);
        spuInfoEntity.setUpdateTime(new Date());
        this.updateById(spuInfoEntity);
    }
3.SpuInfoController.java 编写接口
java 复制代码 
    /**
     * 商品上架
     * @param spuId
     * @return
     */
    @RequestMapping("{id}/up")
    public R productUp(@PathVariable("id") Long spuId) {
        spuInfoService.productUp(spuId);
        return R.ok();
    }

    /**
     * 商品下架
     * @param spuId
     * @return
     */
    @RequestMapping("{id}/down")
    public R productDown(@PathVariable("id") Long spuId) {
        spuInfoService.productDown(spuId);
        return R.ok();
    }
3.前后端联调
1.上架
2.下架
相关推荐
极光代码工作室12 小时前
基于SpringBoot的课程预约系统
java·springboot·web开发·后端开发
Leighteen12 小时前
`try-finally` 里的 `return`：为什么 `finally` 会悄悄改掉返回值、吞掉异常
java·开发语言
名字还没想好☜13 小时前
Go 的 time.After 在 select 循环里内存泄漏:定时器堆积原理与 timer.Reset 正确姿势
java·数据库·golang·go·goroutine
圆山猫13 小时前
[Virtualization]（三）：RISC-V H-extension 与 Guest 执行模式
android·java·risc-v
caishenzhibiao13 小时前
期货先行者主图 同花顺期货通指标
java·c语言·c#
史呆芬14 小时前
分布式事务实战：微服务跨服务数据一致性解决方案
java·后端·spring cloud
IT界的老黄牛14 小时前
限流命中后该怎么办：直接丢、阻塞等待、延迟重投三种姿势的取舍
java·rocketmq·redisson·令牌桶·削峰·分布式限流
daad77715 小时前
记录matlab状态机demo
java·网络·matlab
牡丹雅忻115 小时前
AES 加密模式演进：从 ECB、CBC 到 GCM 的 C# 深度实践
java·开发语言·c#
学者猫头鹰15 小时前
Java 8 核心新特性
java
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02GitHub 镜像站点03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）042026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片05微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新06AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路072026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？08AI科技热点日报 | 2026年07月01日09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费102026 年 AI 大模型 & AI 编程工具实战全总结