硅谷甄选(9)SKU模块

SKU模块

8.1 SKU静态

<template><el-card><el-table border style="margin: 10px 0px"><el-table-column type="index" label="序号" width="80px"></el-table-column><el-table-columnlabel="名称"width="80px"show-overflow-tooltip></el-table-column><el-table-columnlabel="描述"width="300px"show-overflow-tooltip></el-table-column><el-table-column label="图片" width="300px"></el-table-column><el-table-column label="重量" width="300px"></el-table-column><el-table-column label="价格" width="300px"></el-table-column><el-table-columnlabel="操作"width="300px"fixed="right"></el-table-column></el-table><el-paginationv-model:current-page="pageNo"v-model:page-size="pageSize":page-sizes="[10, 20, 30, 40]":background="true"layout="prev, pager, next, jumper, ->,sizes,total ":total="400"/></el-card>
</template>

8.2 获取展示数据

8.2.1 API&&TYPE

API:

//SKU模块接口管理
import request from '@/utils/request'
import type { SkuResponseData} from './type'
//枚举地址
enum API {//获取已有的商品的数据-SKUSKU_URL = '/admin/product/list/',
}
//获取商品SKU的接口
export const reqSkuList = (page: number, limit: number) => {return request.get<any, SkuResponseData>(API.SKU_URL + `${page}/${limit}`)
}

type:

export interface ResponseData {code: numbermessage: stringok: boolean
}
//定义SKU对象的ts类型
export interface Attr {id?: numberattrId: number | string //平台属性的IDvalueId: number | string //属性值的ID
}
export interface saleArr {id?: numbersaleAttrId: number | string //属性IDsaleAttrValueId: number | string //属性值的ID
}
export interface SkuData {category3Id?: string | number //三级分类的IDspuId?: string | number //已有的SPU的IDtmId?: string | number //SPU品牌的IDskuName?: string //sku名字price?: string | number //sku价格weight?: string | number //sku重量skuDesc?: string //sku的描述skuAttrValueList?: Attr[]skuSaleAttrValueList?: saleArr[]skuDefaultImg?: string //sku图片地址isSale?: number //控制商品的上架与下架id?: number
}//获取SKU接口返回的数据ts类型
export interface SkuResponseData extends ResponseData {data: {records: SkuData[]total: numbersize: numbercurrent: numberorders: []optimizeCountSql: booleanhitCount: booleancountId: nullmaxLimit: nullsearchCount: booleanpages: number}
}
8.2.2 组件获取数据
import { ref, onMounted } from 'vue'
//引入请求
import { reqSkuList } from '@/api/product/sku'
//引入ts类型
import type {SkuResponseData,SkuData,SkuInfoData,
} from '@/api/product/sku/type'
//分页器当前页码
let pageNo = ref<number>(1)
//每一页展示几条数据
let pageSize = ref<number>(10)
let total = ref<number>(0)
let skuArr = ref<SkuData[]>([])
//组件挂载完毕
onMounted(() => {getHasSku()
})
const getHasSku = async (pager = 1) => {//当前分页器的页码pageNo.value = pagerlet result: SkuResponseData = await reqSkuList(pageNo.value, pageSize.value)if (result.code == 200) {total.value = result.data.totalskuArr.value = result.data.records}
}
8.2.3 展示数据(el-table)
<el-table border style="margin: 10px 0px" :data="skuArr"><el-table-column type="index" label="序号" width="80px"></el-table-column><el-table-columnprop="skuName"label="名称"width="80px"show-overflow-tooltip></el-table-column><el-table-columnprop="skuDesc"label="描述"width="300px"show-overflow-tooltip></el-table-column><el-table-column label="图片" width="300px"><template #="{ row, $index }"><img:src="row.skuDefaultImg"alt=""style="width: 100px; height: 100px"/></template></el-table-column><el-table-columnlabel="重量"width="300px"prop="weight"></el-table-column><el-table-columnlabel="价格"width="300px"prop="price"></el-table-column><el-table-column label="操作" width="300px" fixed="right"><el-button type="primary" size="small" icon="Top"></el-button><el-button type="primary" size="small" icon="Edit"></el-button><el-button type="primary" size="small" icon="InfoFilled"></el-button><el-button type="primary" size="small" icon="Delete"></el-button></el-table-column></el-table>
8.2.4 分页器

//分页器下拉菜单发生变化触发
const handler = () => {getHasSku()
}

注意:在这里切换页码和切换每页数据条数的回调不同是因为:它们都能对函数注入数据,切换页码注入的是点击的页码数,因此我们可以直接使用getHasSku作为他的回调。切换每页数据条数注入的是切换的页码条数,我们希望切换后跳转到第一页,因此使用handler,间接调用getHasSku。

8.3 上架下架按钮

8.3.1 API&&TYPE
//上架
SALE_URL = '/admin/product/onSale/',
//下架的接口
CANCELSALE_URL = '/admin/product/cancelSale/',//已有商品上架的请求
export const reqSaleSku = (skuId: number) => {return request.get<any, any>(API.SALE_URL + skuId)
}
//下架的请求
export const reqCancelSale = (skuId: number) => {return request.get<any, any>(API.CANCELSALE_URL + skuId)
}

type都是any

8.3.2 按钮切换

根据数据切换

8.3.2 上架下架回调

流程:发请求->更新页面

//商品的上架与下架的操作
const updateSale = async (row: SkuData) => {//如果当前商品的isSale==1,说明当前商品是上架的额状态->更新为下架//否则else情况与上面情况相反if (row.isSale == 1) {//下架操作await reqCancelSale(row.id as number)//提示信息ElMessage({ type: 'success', message: '下架成功' })//发请求获取当前更新完毕的全部已有的SKUgetHasSku(pageNo.value)} else {//下架操作await reqSaleSku(row.id as number)//提示信息ElMessage({ type: 'success', message: '上架成功' })//发请求获取当前更新完毕的全部已有的SKUgetHasSku(pageNo.value)}
}

8.4 更新按钮

更新按钮这里没有业务。个人觉得是因为SKU的编写在SPU已经做完了。防止业务逻辑混乱

//更新已有的SKU
const updateSku = () => {ElMessage({ type: 'success', message: '程序员在努力的更新中....' })
}

8.5 商品详情静态搭建

8.5.1 Drawer 抽屉

描述:呼出一个临时的侧边栏, 可以从多个方向呼出

//控制抽屉显示与隐藏的字段
let drawer = ref<boolean>(false)//查看商品详情按钮的回调
const findSku = async (row: SkuData) => {//抽屉展示出来drawer.value = true
}
8.5.2 Layout 布局

通过基础的 24 分栏,迅速简便地创建布局。

效果图:

8.5.3 轮播图 carousel

注意:把对应的style也复制过来

8.6 商品详情展示业务

8.6.1 API&&TYPE

API

//获取商品详情的接口SKUINFO_URL = '/admin/product/getSkuInfo/',
//获取商品详情的接口
export const reqSkuInfo = (skuId: number) => {return request.get<any, SkuInfoData>(API.SKUINFO_URL + skuId)
}

type

//获取SKU商品详情接口的ts类型
export interface SkuInfoData extends ResponseData {data: SkuData
}
8.6.2 发请求&&存储数据
let skuInfo = ref<any>({})
//查看商品详情按钮的回调
const findSku = async (row: SkuData) => {//抽屉展示出来drawer.value = true//获取已有商品详情数据let result: SkuInfoData = await reqSkuInfo(row.id as number)//存储已有的SKUskuInfo.value = result.data
}
8.6.3 展示数据(销售属性为例)

8.7 删除模块

注:忘记写了,后面才想起来。简短写一下思路

API->绑定点击事件->发请求

比较简单。

8.8 小结

这模块的思路其实都比较简单。无外乎API(type),组件内发请求拿数据、将数据放到模板中。再加上一个对仓库的处理。

这部分真正的难点也是最值得学习的点在于

1:type的书写

2:对数据结构的理解(可以将请求回来的数据放到正确的位置上)

3:element-plus组件的使用。

其实现在看来这部分模块做的事情就是我们前端人的一些缩影。思路不难,难在琐碎的工作中要处理的各种各样的东西。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/461584.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flutter Color 大调整,需适配迁移,颜色不再是 0-255,而是 0-1.0,支持更大色域

在之前的 3.10 里&#xff0c; Flutter 的 Impeller 在 iOS 上支持了 P3 广色域图像渲染&#xff0c;但是当时也仅仅是当具有广色域图像或渐变时&#xff0c;Impeller 才会在 iOS 上显示 P3 的广色域的颜色&#xff0c;而如果你使用的是 Color API&#xff0c;会发现使用的还是…

动态威胁场景下赋能企业安全,F5推出BIG-IP Next Web应用防火墙

许多企业正面临由混合和多云环境运营复杂性所引发的危机&#xff0c;它们普遍耗巨资于物理和虚拟设备的持续维护、修补和升级上&#xff0c;而针对不同云环境下的应用部署则需要特有的技能来管理众多繁杂的工具和服务。为助力企业应对上述挑战&#xff0c;F5公司发布了BIG-IP N…

如何用Python同时抓取多个网页:深入ThreadPoolExecutor

背景介绍 在信息化时代&#xff0c;数据的实时性和获取速度是其核心价值所在。对于体育赛事爱好者、数据分析师和投注行业而言&#xff0c;能否快速、稳定地抓取到实时比赛信息显得尤为重要。特别是在五大足球联赛中&#xff0c;能够在比赛进行时获得比分、控球率等实时数据&a…

(转载)Tools for Learning LLVM TableGen

前提 最近在学习有关llvm的东西&#xff0c;其中TableGen占了一部分&#xff0c;所以想特意学习下TableGen相关的语法。这里找到了LLVM官网的一篇介绍TableGen的博客&#xff0c;学习并使用机器翻译为中文。在文章的最后也添加了一些学习TableGen的资源。 原文地址&#xff1…

LARGE SCALE GAN TRAINING FORHIGH FIDELITY NATURAL IMAGE SYNTHESIS

ABSTRACT 尽管最近在生成图像建模方面取得了进展&#xff0c;但成功地从复杂的数据集(如ImageNet)生成高分辨率、多样化的样本仍然是一个难以实现的目标。为此&#xff0c;我们在迄今为止尝试的最大规模上训练生成对抗网络&#xff0c;并研究这种规模特有的不稳定性。我们发现…

组队学习专用——task05

目录 一、基本原理 1. 决策树的基本思想 2. 决策树划分过程中可能遇到的特殊情况 (1) 单一类别终止&#xff1a; (2) 属性用尽&#xff1a; (3) 样本空缺&#xff1a; 3. 决策树的结构 二、信息量、信息熵 1. 信息量 2. 信息熵 三、决策树 1. ID3 决策树&#xff08…

Linux RAID 技术详解:原理、配置、管理及故障处理

本文档深入探讨 Linux 软件 RAID 技术&#xff0c;涵盖 RAID 原理、各种 RAID 级别、mdadm 命令详解、配置步骤、管理方法以及高级故障处理和性能调优策略。 一、 RAID 原理与架构 RAID (Redundant Arrays of Independent Disks&#xff0c;独立磁盘冗余阵列) 技术并非单一技…

「C/C++」C/C++标准库 之 <cstring> 字符串操作库

✨博客主页何曾参静谧的博客📌文章专栏「C/C++」C/C++程序设计📚全部专栏「VS」Visual Studio「C/C++」C/C++程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid函数说明目…

单细胞数据分析(一):10X数据生成seurat数据对象

文章目录 介绍加载R包数据链接导入数据过滤细胞:移除双重细胞合并所有seurat数据对象输出结果系统信息介绍 在单细胞基因组学研究中,Seurat是一个流行的R包,用于单细胞基因表达数据的分析和探索。以下是如何从10X基因注释数据生成Seurat数据对象,并对该数据进行过滤的步骤…

day13:FTP服务

一&#xff0c;FTP概述 概述 FTP&#xff08;File Transfer Protocol&#xff0c;文件传输协议&#xff09;是用于在计算机之间传输文件的协议。它工作在网络的应用层&#xff0c;通过 TCP 协议进行数据传输&#xff0c;默认端口号为 21&#xff08;命令端口&#xff0c;另外…

从0开始的STM32学习之旅:使用中断完成等待型任务(理论部分)

目录 中断 NVIC 中断优先级 先说说一般我们聊到的中断优先级 STM32中的NVIC中断优先级表示 API CubeMx配置说明 很好&#xff0c;我们在之前的学习中已经完成了简单的GPIO输入输出驱动的控制&#xff0c;我们的下一步就是仔细了解一下中断这个事情。 中断 中断这个事情…

使用Python进行数据分析入门

文章目录 Python环境搭建安装Anaconda验证安装 必备库介绍NumPyPandasMatplotlibSciPy 数据导入与清洗导入数据清洗数据 数据探索与分析描述性统计相关性分析 数据可视化绘制直方图 高级主题机器学习深度学习 总结 随着大数据时代的到来&#xff0c;数据分析变得越来越重要。Py…

RabbitMQ + JMeter组合,优化你的中间件处理方式!

RabbitMQ是实现了高级消息队列协议&#xff08;AMQP&#xff09;的开源消息中间件&#xff0c;它是基于Erlang语言编写的&#xff0c;并发能力强&#xff0c;性能好&#xff0c;是目前主流的消息队列中间件之一。 RabbitMQ的安装可参照官网&#xff08; https://www.rabbitmq.c…

python 爬虫 入门 五、抓取图片、视频

目录 一、图片、音频 二、下载视频&#xff1a; 一、图片、音频 抓取图片的手法在上一篇python 爬虫 入门 四、线程&#xff0c;进程&#xff0c;协程-CSDN博客里面其实有&#xff0c;就是文章中的图片部分&#xff0c;在那一篇文章&#xff0c;初始代码的28&#xff0c;29行…

Vulnhub靶机——DC-1

#环境 本次环境是利用VMware15搭建 靶机DC-1( https://download.vulnhub.com/dc/DC-1.zip) --192.168.200.131 Kali2021.1--192.168.200 将以上两个操作系统启动&#xff0c;并设置网卡为NAT模式 #信息收集 使用arp-scan对网段进行扫描&#xff0c;探测存活主机 使用nmap…

吴恩达深度学习笔记(10)12.

多任务学习 什么时候多任务学习有意义&#xff1a; 能从共享低级特征中获益&#xff1b;每个任务拥有的数据相当相似&#xff1b;训练一个足够大的神经网络用于所有任务。 目标定位&#xff1a; 分类定位&#xff08;单个对象&#xff09;与检测不同&#xff08;多个对象&…

Android 音量调节流程分析

音量调节流程分析 按下音量键 音量键被按下后&#xff0c;按键事件会一路派发给Acitivity&#xff0c;如果无人拦截并处理&#xff0c;承载当前Activity的显示PhoneWindow类的onKeyDown()以及onKeyUp()函数将会被处理&#xff0c;从而开始通过音量键调整音量的处理流程&#x…

LLMs在股票投资组合崩溃中的时间关系推理

1. 引言 想象一下&#xff0c;你是一位投资经理&#xff0c;管理着一个多元化的股票投资组合。突然&#xff0c;一场前所未有的全球性事件发生了&#xff0c;比如2007年的金融危机或2020年的新冠疫情&#xff0c;这可能会对你的投资组合造成重大影响。传统的投资组合崩溃检测方…

o1驾驶无人机后空翻,OpenAI开发者日惊掉下巴!2分钟爆改代码写App

【导读】OpenAI伦敦开发者日上&#xff0c;首次曝出了o1五大核心能力&#xff0c;还有图像理解。o1两分钟构建应用驾驶无人机、电话订餐、讲解太阳系&#xff0c;现场演示让所有开发者沸腾。 完整版o1的解禁&#xff0c;离我们不远了&#xff01; 就在刚刚举办的OpenAI伦敦开…

利用AWS服务轻松迁移数据上云

在数字化转型的浪潮中&#xff0c;越来越多的企业意识到将数据迁移至云端的重要性。云服务不仅能够提供更高的灵活性和可扩展性&#xff0c;还能显著降低IT成本。AWS&#xff08;Amazon Web Services&#xff09;作为全球领先的云服务提供商&#xff0c;为企业提供了一系列高效…