完成商品SPU管理页面
文章目录
- 1.引入前端界面
- 1.将前端界面放到commodity下
- 2.创建菜单
- 3.进入前端项目,使用npm添加依赖
- 1.根目录下输入
- 2.报错 chromedriver@2.27.2的问题
- 3.点击链接下载压缩包,然后使用下面的命令安装
- 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 缓存**
- 2.**删除 `node_modules` 文件夹**
- 3.**删除 `package-lock.json` 文件**
- 4.**运行 `npm install`**
- 2.SPU信息分页查询
- 1.前端 spuinfo.vue
- 1.修改一下分页信息,然后查看页面,发现基本分页已经完成
- 2.点击分类发现品牌没有显示出来
- 3.查看请求,发现是404,中间少了一个/,加上就好了
- 2.分析前端请求
- 1.点击查询,调用searchSpuInfo方法
- 2.这个方法会向后端发送dataForm的数据
- 3.全局搜索一下dataForm,可以看到有四个信息
- 4.打印一下会传递什么信息
- 5.分析得出传入后端的搜索条件
- 2.后端 sunliving-commodity模块
- 1.SpuInfoService.java 新增方法根据条件查询分页列表
- 2.SpuInfoServiceImpl.java 实现方法
- 3.SpuInfoController.java 调用方法
- 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 新增上架和下架的方法
- 2.SpuInfoServiceImpl.java 实现方法
- 3.SpuInfoController.java 编写接口
- 3.前后端联调
- 1.上架
- 2.下架
1.引入前端界面
1.将前端界面放到commodity下

2.创建菜单

3.进入前端项目,使用npm添加依赖
1.根目录下输入
npm install --save pubsub-js
2.报错 chromedriver@2.27.2的问题

3.点击链接下载压缩包,然后使用下面的命令安装
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 缓存
npm cache clean --force
2.删除 node_modules 文件夹
rm -rf node_modules
3.删除 package-lock.json 文件
rm package-lock.json
4.运行 npm install
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 新增方法根据条件查询分页列表
/*** 根据条件查询分页列表* @param params* @return*/PageUtils queryPageByCondition(Map<String, Object> params);
2.SpuInfoServiceImpl.java 实现方法
@Overridepublic 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);}// 加入品牌 idString brandId = (String) params.get("brandId");if (!StringUtils.isEmpty(brandId) && !"0".equalsIgnoreCase(brandId)) {wrapper.eq("brand_id", brandId);}// 加入分类 idString 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 调用方法
/*** 列表*/@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 新增上架和下架的方法
/*** 商品上架* @param spuId*/void productUp(Long spuId);/*** 商品下架* @param spuId*/void productDown(Long spuId);
2.SpuInfoServiceImpl.java 实现方法
@Overridepublic void productUp(Long spuId) {// 根据id修改publish_status为1SpuInfoEntity spuInfoEntity = new SpuInfoEntity();spuInfoEntity.setId(spuId);spuInfoEntity.setPublishStatus(1);// ,更新update_timespuInfoEntity.setUpdateTime(new Date());this.updateById(spuInfoEntity);}@Overridepublic void productDown(Long spuId) {// 根据id修改publish_status为2SpuInfoEntity spuInfoEntity = new SpuInfoEntity();spuInfoEntity.setId(spuId);spuInfoEntity.setPublishStatus(2);spuInfoEntity.setUpdateTime(new Date());this.updateById(spuInfoEntity);}
3.SpuInfoController.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.下架

相关文章:
完成商品SPU管理页面
文章目录 1.引入前端界面1.将前端界面放到commodity下2.创建菜单3.进入前端项目,使用npm添加依赖1.根目录下输入2.报错 chromedriver2.27.2的问题3.点击链接下载压缩包,然后使用下面的命令安装4.再次安装 pubsub-js 成功5.在main.js中引入这个组件 4.修改…...
Ansible实战YAML语言完成apache的部署,配置,启动全过程
🏡作者主页:点击! 🏝️Ansible专栏:点击! ⏰️创作时间:2024年5月24日15点59分 目录 💯趣站推荐💯 🎊前言 ✨️YAML语言回顾 🎆1.编写YAML文…...
深入探索微软Edge:新一代浏览器的演进与创新
在数字时代的浪潮中,浏览器已不再只是简单的网页访问工具,而是成为了连接信息、服务与用户之间的重要桥梁。微软Edge作为微软公司推出的一款全新的浏览器,不仅承载着微软在互联网领域的最新愿景,还融合了多项前沿技术,…...
k8s使用Volcano调度gpu
k8s部署 https://www.yangxingzhen.com/9817.html cri-dockerd安装 https://zhuanlan.zhihu.com/p/632861515 安装nvidia-container-runtime https://docs.nvidia.com/datacenter/cloud-native/container-toolkit/latest/install-guide.html 安装k8s-device-plugin https://…...
x的平方根-力扣
本题想到使用二分法不断逼近一个区间,直到最后趋近于x,从而求得解。注意的点,一开始使用 if(mid * mid < x) 进行判断时,会出现越界,原因是输入一个很大的数是,超过int表示的范围,继而修改为…...
hot100 -- 回溯(上)
目录 🍞科普 🌼全排列 AC DFS 🚩子集 AC DFS 🎂电话号码的字母组合 AC DFS 🌼组合总和 AC DFS 🍞科普 忘记 dfs 的,先看看这个👇 DFS(深度优先搜索…...
5.24数据库作业
考虑如下关系模式R(A,B.C.D,E,F)上的函数依赖集F: {A→BCD,BC→DE,B→D,D→A} 1、计算B的闭包。 2、(使用Armstrong公理)证明AF是超码。 3、计算上述函数依赖集F的正则覆盖;给出你的推导的步骤并解释。 4、基于正则覆盖࿰…...
go-zero 实战(5)
引入Prometheus 用 Prometheus 监控应用 1. 用 docker 启动 Prometheus 编辑配置位置,我将 prometheus.yaml 和 targets.json 文件放在了 /opt/prometheus/conf目录下 prometheus.yaml global:scrape_interval: 15s # 抓取间隔evaluation_interval: 15s # 评估…...
Python异常处理:打造你的代码防弹衣!
Hi,我是阿佑,上文咱们讲到——揭秘Python的魔法:装饰器的超能力大揭秘 ♂️✨,阿佑将带领大家通过精准捕获异常、使用with语句和上下文管理器、以及异常链等高级技巧来增强代码的健壮性。就像为代码穿上防弹衣,保护它…...
Linux——进程与线程
进程与线程 前言一、Linux线程概念线程的优点线程的缺点线程异常线程用途 二、Linux进程VS线程进程和线程 三、Linux线程控制创建线程线程ID及进程地址空间布局线程终止线程等待分离线程 四、习题巩固请简述什么是LWP请简述LWP与pthread_create创建的线程之间的关系简述轻量级进…...
ping 探测网段哪些地址被用
#!/bin/bash# 遍历192.168.3.1到192.168.3.254 for i in {1..254} doip"192.168.3.$i"# 对每个IP地址进行三次ping操作if ping -c 3 -W 1 $ip > /dev/null 2>&1thenecho "$ip: yes"fi done$ sh test.sh 192.168.3.1: yes 192.168.3.95: yes 192.…...
OSPF问题
.ospf 选路 域内 --- 1类,2类LSA 域间 --- 3类LSA 域外 --- 5类,7类LSA --- 根据开销值的计算规则不同,还分为类型1和类型2 ospf 防环机制 区域内防环:在同一OSPF区域内,所有路由器通过交换链路状态通告ÿ…...
asgasgas
asdgasdgsa...
Go语言实现人脸检测(Go的OpenCV绑定库)
文章目录 OpenCVGithub官网安装环境变量 Go的OpenCV绑定库Github文档安装搜索视频设备ID显示视频检测人脸 OpenCV Github https://github.com/opencv/opencv/ 官网 https://opencv.org/ 安装 brew install opencv brew upgrade opencv安装目录 cd /usr/local/opt/opencv…...
springboot中线程池的使用
一、概念 线程池就是将多个线程对象放入一个池子里面,例如一个池塘,线程池就是这个池塘,池塘里面的鱼就是线程池中的多个线程对象。1. 每一个线程,在一段时间内只能执行一个任务。2. 线程池中的各个线程是可以重复使用的。 二、创…...
ubuntu20.04 开机自动挂载外加硬盘
文章目录 一、问题描述二、操作1. 查找新添盘符2. 格式化硬盘文件系统3. 挂载硬盘4. 开机自动挂载5. 取消挂载6. 查看挂载的硬盘信息 一、问题描述 因电脑使用一段时间后自身硬盘不足,需外加硬盘使得电脑自动识别加载。 二、操作 1. 查找新添盘符 sudo blkid自己…...
5.18 TCP机械臂模拟
#include <netinet/tcp.h>//包含TCP选项的头文件 #include <arpa/inet.h> #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <linux/input.h>//读取输入事件 #include <sys/types.h> #include <sys/stat.h&…...
linux---线程控制
线程和进程 以前我们要同时跑多个程序,可以通过fork()多个子进程,然后通过系统函数进行程序的替换,但是创建进程代价大,不仅要拷贝一份父进程的地址空间,页表,文件表述符表等。但是线程不需要因为是进程的…...
低代码开发:拖拽式可视化构建工业物联网系统
什么是低代码? 低代码(Low Code)是一种可视化的软件开发方法,通过最少的手动编码可以更快地交付应用程序。低代码平台的图形用户界面和拖放功能可自动执行开发过程的各个方面,从而消除对传统计算机编程方法的依赖。 什么是低代码平台&#…...
【撸源码】【ThreadPoolExecutor】线程池的工作原理深度解析——上篇
1. 前言 线程池这块,作为高频面试题,并且实际使用场景巨多,所以出了这篇文章,一块来研究一下线程池的实现原理,运行机制,从底层深挖,不再局限于面试题。 2. 线程池概览 2.1. 构造器 线程池总…...
RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数,对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...
css实现圆环展示百分比,根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)
概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中,可以通过监听键盘的显示和隐藏事件,动态调整弹窗的位置。关键点在于获取键盘高度,并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
