硅谷甄选(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-column
        label="名称"
        width="80px"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="描述"
        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-column
        label="操作"
        width="300px"
        fixed="right"
      ></el-table-column>
    </el-table>
    <el-pagination
      v-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 {
  //获取已有的商品的数据-SKU
  SKU_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: number
  message: string
  ok: boolean
}
//定义SKU对象的ts类型
export interface Attr {
  id?: number
  attrId: number | string //平台属性的ID
  valueId: number | string //属性值的ID
}
export interface saleArr {
  id?: number
  saleAttrId: number | string //属性ID
  saleAttrValueId: number | string //属性值的ID
}
export interface SkuData {
  category3Id?: string | number //三级分类的ID
  spuId?: string | number //已有的SPU的ID
  tmId?: string | number //SPU品牌的ID
  skuName?: 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: number
    size: number
    current: number
    orders: []
    optimizeCountSql: boolean
    hitCount: boolean
    countId: null
    maxLimit: null
    searchCount: boolean
    pages: 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 = pager
  let result: SkuResponseData = await reqSkuList(pageNo.value, pageSize.value)
  if (result.code == 200) {
    total.value = result.data.total
    skuArr.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-column
        prop="skuName"
        label="名称"
        width="80px"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="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-column
        label="重量"
        width="300px"
        prop="weight"
      ></el-table-column>
      <el-table-column
        label="价格"
        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: '下架成功' })
    //发请求获取当前更新完毕的全部已有的SKU
    getHasSku(pageNo.value)
  } else {
    //下架操作
    await reqSaleSku(row.id as number)
    //提示信息
    ElMessage({ type: 'success', message: '上架成功' })
    //发请求获取当前更新完毕的全部已有的SKU
    getHasSku(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)
  //存储已有的SKU
  skuInfo.value = result.data
}
8.6.3 展示数据(销售属性为例)

8.7 删除模块

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

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

比较简单。

8.8 小结

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

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

1:type的书写

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

3:element-plus组件的使用。

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu 异常 断电 日志 查看

sudo less /var/log/syslog 搜 Linux version

解决rabbitmq-plugins enable rabbitmq_delayed_message_exchange :plugins_not_found

问题&#xff1a;我是在docker-compose环境部署的 services:rabbitmq:image: rabbitmq:4.0-managementrestart: alwayscontainer_name: rabbitmqports:- 5672:5672- 15672:15672environment:RABBITMQ_DEFAULT_USER: rabbitRABBITMQ_DEFAULT_PASS: 123456volumes:- ./rabbitmq/…

HCIA(DHCP服务)

第三节 开启DHCP服务 创建地址池 调用全局服务 [R1]dhcp enable 开启DHCP服务 [R1]ip pool AA 创建地址池 [R1-ip-pool-AA]network 192.168.1.0 mask 24 写入网段 [R1-ip-pool-AA]gateway-list 192.168.1.1 写入网关 [R1-ip-pool-AA]dns-list 8.8.8.8 114.1…

GB/T 28046.2-2019 道路车辆 电气及电子设备的环境条件和试验 第2部分:电气负荷(6)

写在前面 本系列文章主要讲解道路车辆电气及电子设备的环境条件和试验GB/T 28046标准的相关知识&#xff0c;希望能帮助更多的同学认识和了解GB/T 28046标准。 若有相关问题&#xff0c;欢迎评论沟通&#xff0c;共同进步。(*^▽^*) 第2部分&#xff1a;电气负荷 附录C C.5…

ES8388 —— 带耳机放大器的低功耗立体声音频编解码器(3)

接前一篇文章&#xff1a;ES8388 —— 带耳机放大器的低功耗立体声音频编解码器&#xff08;2&#xff09; 二、详细描述 4. 时钟模式和采样频率 根据输入的串行音频数据采样频率&#xff0c;ES8388可以在两种速度模式下工作&#xff1a;单速或双速。表1列出了这两种模式下的…

ChatGPT 高级语音模式已登陆 Windows 和 Mac 平台,对话更自然

OpenAI ChatGPT 高级语音模式已登陆 Windows 和 Mac 平台&#xff0c;对话更自然&#xff0c;拟态更逼真 OpenAI 于10月31日正式宣布&#xff0c;ChatGPT 的高级语音模式&#xff08;Advanced Voice Mode&#xff0c;简称 AVM&#xff09;现已登陆 Windows 和 Mac 平台。基于最…

鸿道Intewell操作系统架构介绍之Intewell-Hyper I 虚拟化构型

鸿道Intewell-Hyper I 虚拟化构型是鸿道Intewell-V虚拟化架构下的构型体系&#xff01;鸿道Intewell-V是科东软件自主研发的实时虚拟化操作系统&#xff0c;包括鸿道Intewell-Hyper I 和鸿道Intewell-Hyper II。鸿道Intewell-V可以实现多个操作系统在同一物理硬件上并行运行&am…

Redis高级篇之bigKey理论介绍以及优化

文章目录 0 前言1.MoreKey案例2.BigKey案例2.1多大算BigKey2.1.1 string和二级结构2.2 Bigkey危害、产生与发现2.2.1 bigkey的危害2.2.2 如何产生2.2.3 如何发现 2.2.4 大key如何删除3.BigKey生产调优3.1 redis.conf配置文件 LAZY FREEING相关说明 结语 0 前言 bigKey是面试经常…

云计算平台上的DevOps实践

文章目录 什么是DevOps云计算平台上的DevOps优势自动化部署弹性伸缩地理分布 实施DevOps的关键组件版本控制系统持续集成/持续交付工具配置管理工具监控和日志管理 实践案例使用AWS CodePipeline进行持续集成/持续交付利用AWS Auto Scaling实现弹性使用AWS CloudFormation进行基…

【小白学机器学习29】 概率统计与图形 ( hist, bar, pie , box ,scatter ,line)

目录 1 频度/次数 1.1 频度统计表&#xff1a;频度分布表 1.2 频数分布图直方图 histogram / hist 1.3 对比&#xff0c;柱状图 bar graph /column chart 2 饼图 pie chart 2.1饼图特点 3 南丁格尔玫瑰图 4 茎叶图 stem-and-leaf display 5 箱型图 box plot 6 …

Zookeeper分布式锁实现

1、zk分布式锁的实现原理 Zookeeper 就是使用临时顺序节点特性实现分布式锁的&#xff0c;官网。 获取锁过程 &#xff08;创建临时节点&#xff0c;检查序号最小&#xff09;释放锁 &#xff08;删除临时节点&#xff0c;监听通知&#xff09; 1_获取锁过程 1、当第一个客…

Kafka社区KIP-500中文译文(去除ZooKeeper)

原文链接&#xff1a;KIP-500: Replace ZooKeeper with a Self-Managed Metadata Quorum - Apache Kafka - Apache Software Foundation 译者&#xff1a;关于Kafka3.x版本最大的一个变化即是解除了对ZooKeeper的依赖&#xff0c;而本文的作者是大神Colin&#xff0c;他高屋建瓴…

clickhouse运维篇(二):多机器手动部署ck集群

熟悉流程并且有真正部署需求可以看一下我的另一篇简化部署的文章&#xff0c;因为多节点配置还是比较麻烦的先要jdk、zookeeper&#xff0c;再ck&#xff0c;还有各种配置文件登录不同机器上手动改配置文件还挺容易出错的。 clickhouse运维篇&#xff08;三&#xff09;&#x…

我的电视 左侧列表内置版 | 非常高清,频道丰富的电视直播应用

我的电视是一款专注于电视直播的应用程序&#xff0c;提供丰富且全面的电视频道&#xff0c;包括央视及各大卫视。无论您是想看新闻、体育、电影还是综艺节目&#xff0c;都可以在这里找到。应用支持高清画质播放&#xff0c;确保流畅无卡顿的观看体验。简洁的界面设计和智能推…

Android开发教程viewpager2点击指示标也能切换

Android开发教程viewpager2点击指示标也能切换 viewpager2的使用范例&#xff0c;关键是点击指示标也能切换 一、思路&#xff1a; 用viewpager2加两个imageview 二、效果图&#xff1a; 三、关键代码&#xff1a; public class MainActivity extends AppCompatActivity {…

荣耀独立四周年:以己之名,终至海阔天空

“多少次&#xff0c;迎着冷眼与嘲笑&#xff0c;从没有放弃过&#xff0c;心中的理想……” 10月30日晚&#xff0c;原Beyond成员黄贯中充满激情的《海阔天空》歌声&#xff0c;在荣耀Magic7系列AI旗舰新品发布会上空飘扬。 如歌词所唱&#xff0c;荣耀独立四年以来&#xf…

pytest高版本兼容test_data[“log“] = _handle_ansi(“\n“.join(logs))错误

一、问题现象&#xff1a; 执行seleniumpytest结束时报: INTERNALERROR> File "D:\workspace\pytestframe\.venv\Lib\site-packages\pytest_html\report_data.py", line 141, in add_test INTERNALERROR> test_data["log"] _handle_ansi(&q…

OpenCV 学习笔记

OpenCV 环境安装 pip install opencv-python -i https://pypi.tuna.tsinghua.edu.cn/simple 显示窗口 cv2.namedWindow 是 OpenCV 库中的一个函数&#xff0c;用于创建一个命名窗口&#xff0c;以便在该窗口中显示图像或进行其他图形操作。这个函数在处理图像和视频时非常…

JavaEE初阶---网络原理/UDP服务器客户端程序

文章目录 1.网络初识2.网络编程2.1TCP/UDP区别介绍2.2UDP的socket api使用2.3UDP协议里面的服务器客户端程序 1.网络初识 网络和计算机类似&#xff1a;都是属于军用》民用&#xff1b; 网络诞生于美苏争霸时期&#xff0c;当时就感觉核战争一触即发&#xff0c;形式非常严峻…

【skywalking】监控 Spring Cloud Gateway 数据

使用Spring Cloud 开发&#xff0c;用Skywalking 监控服务&#xff0c;但是Skywalking 默认是不支持 Spring Cloud Gateway 网关服务的&#xff0c;需要手动将 Gateway 的插件添加到 Skywalking 启动依赖 jar 中。 skywalking相关版本信息 jdk&#xff1a;17skywalking&#x…