小程序-购物车-基于SKU电商规格组件实现

SKU 概念： 存货单位（ Stock Keeping Unit ）， 库存 管理的最小可用单元，通常称为“单品”。
SKU 常见于电商领域，对于前端工程师而言，更多关注 SKU 算法 ，基于后端的 SKU 数据 渲染页面 并 实现交互 。

SKU 模块 - 下载 SKU 插件

DCloud 插件市场  是 uni-app 官方插件生态集中地，有数千款插件

使用SKU插件：

组件安装到自己的项目

注意事项：项目进行 git 提交时会校验文件，可添加 /* eslint-disable */  禁用检查

<script>
/* eslint-disable */
// 省略组件源代码
</script>

打开购物车弹框，渲染商品信息   goods.vue

<!-- SKU 弹窗组件 -->

  <vk-data-goods-sku-popup v-model="isShowSku" :localdata="localdata" />

// 是否显示 SKU 组件

const isShowSku = ref(false)

// 商品信息

const localdata = ref({} as SkuPopupLocaldata)

//  渲染商品信息

// 获取商品详情信息

const goods = ref<GoodsResult>()

const getGoodsByIdData = async () => {

  const res = await getGoodsByIdAPI(query.id)

  goods.value = res.result

  // SKU 组件所需格式

  localdata.value = {

    _id: res.result.id,

    name: res.result.name,

    goods_thumb: res.result.mainPictures[0],

    spec_list: res.result.specs.map((v) => {

      return {

        name: v.name,

        list: v.values,

      }

    }),

    sku_list: res.result.skus.map((v) => {

      return {

        _id: v.id,

        goods_id: res.result.id,

        goods_name: res.result.name,

        image: v.picture,

        price: v.price * 100, // 注意：需要乘以 100

        stock: v.inventory,

        sku_name_arr: v.specs.map((vv) => vv.valueName),

      }

    }),

  }

}

打开sku 弹窗       渲染商品

打开SKU弹窗  =》 设置按钮模式    =》 微调组件样式

<!-- SKU 弹窗组件 -->

  <vk-data-goods-sku-popup

    v-model="isShowSku"

    :localdata="localdata"

    :mode="mode"

    add-cart-background-color="#ffa868"

    buy-now-background-color="#27ba98"

    :active-style="{

      color: '#27ba9b',

      borderColor: '#27ba9b',

      backgroundCColor: '#e9f8f5',

    }"

  />

// mode  设置按钮模式

// add-cart-background-color   设置即入购物车按钮背景色

// buy-now-background-color   设置立即购买按钮背景色

// :active-style  选择商品规格时的激活样式

// 按钮模式       枚举

enum SkuMode {

  Both = 1, // 购物车和立即购买都显示

  Cart = 2, // 只显示购物车

  Buy = 3, // 只显示立即购买

}

const mode = ref<SkuMode>(SkuMode.Both)

// 打开sku 弹窗 修改按钮模式

const openSkuPopup = (val: SkuMode) => {

  // 显示sku组件

  isShowSku.value = true

  // 修改按钮模式

  mode.value = val

}

<view class="item arrow" @tap="openSkuPopup(SkuMode.Both)">

          <text class="label">选择</text>

          <text class="text ellipsis"> 请选择商品规格 </text>

</view>

<view class="buttons">

      <view class="addcart" @tap="openSkuPopup(SkuMode.Cart)"> 加入购物车 </view>

      <view class="buynow" @tap="openSkuPopup(SkuMode.Buy)"> 立即购买 </view>

</view>

加入购物车事件        加入购物车在商品详情页面       goods.vue

<!-- SKU 弹窗组件 -->

  <vk-data-goods-sku-popup

    v-model="isShowSku"

    :localdata="localdata"

    :mode="mode"

    add-cart-background-color="#ffa868"

    buy-now-background-color="#27ba9b"

    ref="skuPopupRef"

    :actived-style="{

      color: '#27BA9B',

      borderColor: '#27BA9B',

      backgroundColor: '#E9F8F5',

    }"

    @add-cart="onAddCart"

  />

// 加入购物车事件

const onAddCart = (e: SkuPopupEvent) => {

  console.log(e)

}

控制台打印数据

封装购物车接口：cart.ts

1、加入购物车接口封装

import { http } from "@/utils/http"

/**

 * 加入购物车

 * @param data 请求体参数

 * @returns

 */

export const postMemberCartAPI = (data: { skuId: string; count: number}) => {

  return http({

    method: 'POST',

    url: '/member/cart',

    data,

  })

}

完善商品详情页面的加入购物车功能

// 加入购物车事件

const onAddCart = async (e: SkuPopupEvent) => {

  console.log(e)

  await postMemberCartAPI({ skuId: e._id, count: e.buy_num })

  uni.showToast({ icon: 'success', title: '已加入购物车' })

  // 关闭弹窗

  isShowSku.value = false

}

完整的商品详情页面代码：goods.vue

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'
import { getGoodsByIdAPI } from '@/services/goods'
import { postMemberCartAPI } from '@/services/cart'
import type { GoodsResult } from '@/types/goods'
import AddressPanel from './components/AddressPanel.vue'
import ServicePanel from './components/ServicePanel.vue'
import PageSkeleton from './components/PageSkeleton.vue'
import type {SkuPopupEvent,SkuPopupInstanceType,SkuPopupLocaldata,
} from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup'// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()// 接收页面参数
const query = defineProps<{id: string
}>()// 获取商品详情信息
const goods = ref<GoodsResult>()
const getGoodsByIdData = async () => {const res = await getGoodsByIdAPI(query.id)goods.value = res.result// SKU 组件所需格式localdata.value = {_id: res.result.id,name: res.result.name,goods_thumb: res.result.mainPictures[0],spec_list: res.result.specs.map((v) => {return {name: v.name,list: v.values,}}),sku_list: res.result.skus.map((v) => {return {_id: v.id,goods_id: res.result.id,goods_name: res.result.name,image: v.picture,price: v.price * 100, // 注意：需要乘以 100stock: v.inventory,sku_name_arr: v.specs.map((vv) => vv.valueName),}}),}
}// 是否数据加载完成
const isFinish = ref(false)// 页面加载
onLoad(async () => {await getGoodsByIdData()isFinish.value = true
})// 轮播图变化时
const currentIndex = ref(0)
const onChange: UniHelper.SwiperOnChange = (e) => {currentIndex.value = e.detail!.current
}// 点击图片时
const onTapImage = (url: string) => {// 大图预览uni.previewImage({current: url, // 当前显示图片的链接urls: goods.value!.mainPictures, // 需要预览的图片链接列表  数组})
}
// uni-ui  弹出层组件 ref
const popup = ref<{open: (type?: UniHelper.UniPopupType) => voidclose: (type?: UniHelper.UniPopupType) => void
}>()// 弹出层渲染
const popupName = ref<'address' | 'service'>()
const openPopup = (name: typeof popupName.value) => {// 修改弹出层名称popupName.value = namepopup.value?.open()
}// 是否显示 SKU 组件
const isShowSku = ref(false)
// 商品信息
const localdata = ref({} as SkuPopupLocaldata)
// 按钮模式
enum SkuMode {Both = 1, // 购物车和立即购买都显示Cart = 2, // 只显示购物车Buy = 3, // 只显示立即购买
}
const mode = ref<SkuMode>(SkuMode.Both)
// 打开sku 弹窗 修改按钮模式
const openSkuPopup = (val: SkuMode) => {// 显示sku组件isShowSku.value = true// 修改按钮模式mode.value = val
}
// SKU组件实例
const skuPopupRef = ref<SkuPopupInstanceType>()// 计算被选中的值
const selectArrText = computed(() => {return skuPopupRef.value?.selectArr?.join(' ').trim() || '请选择商品规格'
})
// 加入购物车事件
const onAddCart = async (e: SkuPopupEvent) => {console.log(e)await postMemberCartAPI({ skuId: e._id, count: e.buy_num })uni.showToast({ icon: 'success', title: '已加入购物车' })// 关闭弹窗isShowSku.value = false
}
</script><template><!-- SKU 弹窗组件 --><vk-data-goods-sku-popupv-model="isShowSku":localdata="localdata":mode="mode"add-cart-background-color="#ffa868"buy-now-background-color="#27ba9b"ref="skuPopupRef":actived-style="{color: '#27BA9B',borderColor: '#27BA9B',backgroundColor: '#E9F8F5',}"@add-cart="onAddCart"/><scroll-view scroll-y class="viewport" v-if="isFinish"><!-- 基本信息 --><view class="goods"><!-- 商品主图 --><view class="preview"><swiper circular @change="onChange"><swiper-item v-for="item in goods?.mainPictures" :key="item"><image @tap="onTapImage(item)" mode="aspectFill" :src="item" /></swiper-item></swiper><view class="indicator"><text class="current">{{ currentIndex + 1 }}</text><text class="split">/</text><text class="total">{{ goods?.mainPictures.length }}</text></view></view><!-- 商品简介 --><view class="meta"><view class="price"><text class="symbol">¥</text><text class="number">{{ goods?.price }}</text></view><view class="name ellipsis">{{ goods?.name }} </view><view class="desc"> {{ goods?.desc }} </view></view><!-- 操作面板 --><view class="action"><view class="item arrow" @tap="openSkuPopup(SkuMode.Both)"><text class="label">选择</text><text class="text ellipsis"> {{ selectArrText }} </text></view><view class="item arrow" @tap="openPopup('address')"><text class="label">送至</text><text class="text ellipsis"> 请选择收获地址 </text></view><view class="item arrow" @tap="openPopup('service')"><text class="label">服务</text><text class="text ellipsis"> 无忧退 快速退款 免费包邮 </text></view></view></view><!-- 商品详情 --><view class="detail panel"><view class="title"><text>详情</text></view><view class="content"><view class="properties"><!-- 属性详情 --><view class="item" v-for="item in goods?.details.properties" :key="item.name"><text class="label">{{ item.name }}</text><text class="value">{{ item.value }}</text></view></view><!-- 图片详情 --><imagev-for="item in goods?.details.pictures":key="item"mode="widthFix":src="item"></image></view></view><!-- 同类推荐 --><view class="similar panel"><view class="title"><text>同类推荐</text></view><view class="content"><navigatorv-for="item in goods?.similarProducts":key="item"class="goods"hover-class="none":url="`/pages/goods/goods?id=${item.id}`"><image class="image" mode="aspectFill" :src="item.picture"></image><view class="name ellipsis">{{ item.name }}</view><view class="price"><text class="symbol">¥</text><text class="number">{{ item.price }}</text></view></navigator></view></view></scroll-view><PageSkeleton v-else /><!-- 用户操作 --><view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"><view class="icons"><button class="icons-button"><text class="icon-heart"></text>收藏</button><button class="icons-button" open-type="contact"><text class="icon-handset"></text>客服</button><navigator class="icons-button" url="/pages/cart/cart" open-type="switchTab"><text class="icon-cart"></text>购物车</navigator></view><view class="buttons"><view class="addcart" @tap="openSkuPopup(SkuMode.Cart)"> 加入购物车 </view><view class="buynow" @tap="openSkuPopup(SkuMode.Buy)"> 立即购买 </view></view></view><!-- uni-ui 弹出层 --><uni-popup ref="popup" type="bottom"><AddressPanel v-if="popupName === 'address'" @close="popup?.close()" /><ServicePanel v-if="popupName === 'service'" @close="popup?.close()" /></uni-popup>
</template>

购物车列表页面：cart.vue

获取登录的用户信息  -->  条件渲染(是否登录)  -->  初始化调用  -->  列表渲染

 

封装购物车列表类型数据：cart.d.ts

/** 购物车类型 */

export type CartItem = {

  /** 商品 ID */

  id: string

  /** SKU ID */

  skuId: string

  /** 商品名称 */

  name: string

  /** 图片 */

  picture: string

  /** 数量 */

  count: number

  /** 加入时价格 */

  price: number

  /** 当前的价格 */

  nowPrice: number

  /** 库存 */

  stock: number

  /** 是否选中 */

  selected: boolean

  /** 属性文字 */

  attrsText: string

  /** 是否为有效商品 */

  isEffective: boolean

}

封装购物车列表接口：cart.ts

import type { CartItem } from '@/types/cart';

import { http } from '@/utils/http'

/**

 * 获取购物车列表数据

 * @returns

 */

export const getMemberCartAPI = () => {

  return http<CartItem[]>({

    method: 'GET',

    url: '/member/cart',

  })

}

初始化调用：cart.vue

// 获取购物车列表数据

const cartList = ref<CartItem>([])

const getMemberCartData = async () => {

  const res = await getMemberCartAPI()

  cartList.value = res.result

}

// onShow：页面显示就触发     页面初始化调用  因为加入购物车不是在这个页面的，所以用onShow调用更合适

onShow(() => {

  // 判断用户是否已经登录了

  if (memberStore.profile) {

    getMemberCartData()

  }

})

删除购物车列表中的商品：封装API、按钮绑定事件、弹窗二次确认、调用API、重新获取列表

封装购物车删除API 接口:

/**

 * 删除/清空购物车单品

 * @param data 请求体参数 ids SKUID 集合

 */

export const deleteMemberCartAPI = (data: { ids: string[] }) => {

  return http({

    method: 'DELETE',

    url: '/member/cart',

    data,

  })

}

点击删除按钮 - 删除购物车商品   cart.vue

// 点击删除按钮 - 删除购物车

const onDeleteCart = (skuId: string) => {

  // 弹窗二次确认

  uni.showModal({

    content: '是否确定删除?',

    success: async (res) => {

      if (res.confirm) {

        await deleteMemberCartAPI({ ids: [skuId] })

        // 更新购物车列表

        getMemberCartData()

      }

    },

  })

}

删除成功

修改商品数量：步进器组件

<view class="count"><!-- <text class="text">-</text><input class="input" type="number" :value="item.count.toString()" /><text class="text">+</text> --><vk-data-input-number-boxv-model="item.count":min="1":max="item.stock":index="item.skuId"@change="onChangeCount"/></view>

封装修改API

/**

 * 修改购物车单品

 * @param skuId SKUID

 * @param data selected 选中状态 count 商品数量

 */

export const putMemberCartBySkuIdAPI = ( skuId: string, data: { selected?: boolean; count?: number }) => {

  return http({

    method: 'PUT',

    url: `/member/cart/${skuId}`,

    data,

  })

}

修改方法：

// 修改商品数量

const onChangeCount = (e) => {

  console.log(e)

  putMemberCartBySkuIdAPI(e.index, { count: e.value })

}

修改商品的选中状态，即单选和全选功能实现

            <!-- 选中状态 --><text@tap="onChangeSelected(item)"class="checkbox":class="{ checked: item.selected }"></text>

封装全选 / 取消全选API

/**

 * 购物车全选/取消全选

 * @param data selected 是否选中

 */

export const putMemberCartSelectedAPI = (data: { selected: boolean }) => {

  return http({

    method: 'PUT',

    url: '/member/cart/selected',

    data,

  })

}

// 修改选中状态  - 单选修改

const onChangeSelected = (good: CartItem) => {

  console.log(good)

// 前端数据更新  - 是否选中 取反

  good.selected = !good.selected

  // 后端数据更新    与修改数量接口是同一条接口  传递的参数不同

  putMemberCartBySkuIdAPI(good.skuId, { selected: good.selected })

}

// 计算全选状态

const isSelectedAll = computed(() => {

  return cartList.value.length && cartList.value.every((v) => v.selected)

})

// 修改选中状态-全选修改

const onChangeSelectedAll = () => {

  // 全选状态取法

  const _isSelectedAll = !isSelectedAll.value

  // 前端数据更新

  cartList.value.forEach((item) => {

    item.selected = _isSelectedAll

  })

  // 后端更新

  putMemberCartSelectedAPI({ selected: _isSelectedAll })

}

购物车页面 - 底部结算信息

<!-- 底部结算 -->

      <view class="toolbar">

        <text class="all" @tap="onChangeSelectedAll" :class="{ checked: isSelectedAll }">全选</text>

        <text class="text">合计:</text>

        <text class="amount">{{ selectedCartListMoney }}</text>

        <view class="button-grounp">

          <view

            @tap="gotoPayment"

            class="button payment-button"

            :class="{ disabled: selectedCartListCount === 0 }"

          >

            去结算({{ selectedCartListCount }})

          </view>

        </view>

      </view>

逻辑实现：

// 计算选中的商品列表

const selectedCartList = computed(() => {

  return cartList.value.filter((v) => v.selected)

})

// 计算选中商品的总件数

const selectedCartListCount = computed(() => {

  return selectedCartList.value.reduce((sum, item) => sum + item.count, 0)

})

// 计算选中商品的总金额

const selectedCartListMoney = computed(() => {

  return selectedCartList.value

    .reduce((sum, item) => sum + item.count * item.nowPrice, 0)

    .toFixed(2)

})

// 去结算按钮

const gotoPayment = () => {

  // 判断用户是否选择了商品    即商品数量不能为 0

  if (selectedCartListCount.value === 0) {

    return uni.showToast({ icon: 'none', title: '请选择商品' })

  }

  // 跳转到计算页面

  uni.showToast({ title: '此功能还未写' })

}

完整的购物车列表页面组件代码：cart.vue

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'
import {deleteMemberCartAPI,getMemberCartAPI,putMemberCartBySkuIdAPI,putMemberCartSelectedAPI,
} from '@/services/cart'
import { useMemberStore } from '@/stores/index'
import type { CartItem } from '@/types/cart'
import type { InputNumberBoxEvent } from '@/components/vk-data-input-number-box/vk-data-input-number-box'// 获取会员 Store
const memberStore = useMemberStore()// 获取购物车列表数据
const cartList = ref<CartItem>([])
const getMemberCartData = async () => {const res = await getMemberCartAPI()cartList.value = res.result
}// onShow：页面显示就触发      页面初始化调用  因为加入购物车不是在这个页面的，所以用onShow调用更合适
onShow(() => {// 判断用户是否已经登录了if (memberStore.profile) {getMemberCartData()}
})// 点击删除按钮 - 删除购物车
const onDeleteCart = (skuId: string) => {// 弹窗二次确认uni.showModal({content: '是否确定删除?',success: async (res) => {if (res.confirm) {await deleteMemberCartAPI({ ids: [skuId] })// 更新购物车列表getMemberCartData()}},})
}// 修改商品数量
const onChangeCount = (e: InputNumberBoxEvent) => {console.log(e)putMemberCartBySkuIdAPI(e.index, { count: e.value })
}// 修改选中状态 - 单品修改
const onChangeSelected = (good: CartItem) => {console.log(good)// 前端数据更新  - 是否选中 取反good.selected = !good.selected// 后端数据更新putMemberCartBySkuIdAPI(good.skuId, { selected: good.selected })
}// 计算全选状态
const isSelectedAll = computed(() => {return cartList.value.length && cartList.value.every((v) => v.selected)
})// 修改选中状态-全选修改
const onChangeSelectedAll = () => {// 全选状态取法const _isSelectedAll = !isSelectedAll.value// 前端数据更新cartList.value.forEach((item) => {item.selected = _isSelectedAll})// 后端更新putMemberCartSelectedAPI({ selected: _isSelectedAll })
}// 计算选中的商品列表
const selectedCartList = computed(() => {return cartList.value.filter((v) => v.selected)
})// 计算选中商品的总件数
const selectedCartListCount = computed(() => {return selectedCartList.value.reduce((sum, item) => sum + item.count, 0)
})// 计算选中商品的总金额
const selectedCartListMoney = computed(() => {return selectedCartList.value.reduce((sum, item) => sum + item.count * item.nowPrice, 0).toFixed(2)
})// 去结算按钮
const gotoPayment = () => {// 判断用户是否选择了商品    即商品数量不能为 0if (selectedCartListCount.value === 0) {return uni.showToast({ icon: 'none', title: '请选择商品' })}// 跳转到计算页面uni.showToast({ title: '此功能还未写' })
}
</script><template><scroll-view scroll-y class="scroll-view"><!-- 已登录: 显示购物车 --><template v-if="memberStore.profile.token"><!-- 购物车列表 --><view class="cart-list" v-if="cartList.length"><!-- 优惠提示 --><view class="tips"><text class="label">满减</text><text class="desc">满1件, 即可享受9折优惠</text></view><!-- 滑动操作分区 --><uni-swipe-action><!-- 滑动操作项 --><uni-swipe-action-item v-for="item in cartList" :key="item.skuId" class="cart-swipe"><!-- 商品信息 --><view class="goods"><!-- 选中状态 --><text@tap="onChangeSelected(item)"class="checkbox":class="{ checked: item.selected }"></text><navigator:url="`/pages/goods/goods?id=${item.id}`"hover-class="none"class="navigator"><image mode="aspectFill" class="picture" :src="item.picture"></image><view class="meta"><view class="name ellipsis">{{ item.name }}</view><view class="attrsText ellipsis">{{ item.attrsText }}</view><view class="price">{{ item.nowPrice }}</view></view></navigator><!-- 商品数量 --><view class="count"><!-- <text class="text">-</text><input class="input" type="number" :value="item.count.toString()" /><text class="text">+</text> --><vk-data-input-number-boxv-model="item.count":min="1":max="item.stock":index="item.skuId"@change="onChangeCount"/></view></view><!-- 右侧删除按钮 --><template #right><view class="cart-swipe-right"><button @tap="onDeleteCart(item.skuId)" class="button delete-button">删除</button></view></template></uni-swipe-action-item></uni-swipe-action></view><!-- 购物车空状态 --><view class="cart-blank" v-else><image src="/static/images/blank_cart.png" class="image" /><text class="text">购物车还是空的，快来挑选好货吧</text><navigator open-type="switchTab" url="/pages/index/index" hover-class="none"><button class="button">去首页看看</button></navigator></view><!-- 吸底工具栏 --><view class="toolbar"><text class="all" @tap="onChangeSelectedAll" :class="{ checked: isSelectedAll }">全选</text><text class="text">合计:</text><text class="amount">{{ selectedCartListMoney }}</text><view class="button-grounp"><view@tap="gotoPayment"class="button payment-button":class="{ disabled: selectedCartListCount === 0 }">去结算({{ selectedCartListCount }})</view></view></view></template><!-- 未登录: 提示登录 --><view class="login-blank" v-else><text class="text">登录后可查看购物车中的商品</text><navigator url="/pages/login/login" hover-class="none"><button class="button">去登录</button></navigator></view><!-- 猜你喜欢 --><Guess ref="guessRef"></XtxGuess><!-- 底部占位空盒子 --><view class="toolbar-height"></view></scroll-view>
</template>

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

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

相关文章

（二）vForm 动态表单设计器之下拉、选择

（二）vForm 动态表单设计器之下拉、选择

系列文章目录 &#xff08;一&#xff09;vForm 动态表单设计器之使用 目录 系列文章目录 前言 一、后端需提供接口 二、组件配置 总结 前言 动态表单下拉、选择等组件&#xff0c;大概率要使用数据库中的数据&#xff0c;那么vForm如何拿到数据库中的数据呢&#xff1f;跟随…
阅读更多...
动物合并消除休闲游戏源码 Animal Merge 益智游戏

动物合并消除休闲游戏源码 Animal Merge 益智游戏

一款动物合并消除休闲游戏源码&#xff0c;Animal Merge是一款引人入胜的益智游戏&#xff0c;玩家的任务是合并方块&#xff0c;创造出可爱的动物&#xff0c;这些动物的体型会逐渐变大。游戏玩法包括将方块放到网格上&#xff0c;并战略性地将它们合并以形成更大的动物形状。…
阅读更多...
【408精华知识】主存相关解题套路大揭秘！

【408精华知识】主存相关解题套路大揭秘！

讲完了Cache&#xff0c;再来讲讲主存是怎么考察的&#xff0c;我始终认为&#xff0c;一图胜千言&#xff0c;所以对于很多部件&#xff0c;我都是通过画图进行形象的记忆&#xff0c;那么接下来我们对主存也画个图&#xff0c;然后再来详细解读其考察套路~ 文章目录 零、主存…
阅读更多...
python-pytorch 下批量seq2seq+Bahdanau Attention实现问答1.0.000

python-pytorch 下批量seq2seq+Bahdanau Attention实现问答1.0.000

python-pytorch 下批量seq2seq+Bahdanau Attention实现简单问答1.0.000 前言原理看图数据准备分词、index2word、word2index、vocab_size输入模型的数据构造注意力模型decoder的编写关于损失函数和优化器在预测时完整代码参考前言 前面实现了 luong的dot 、general、concat注意…
阅读更多...
【话题】我眼神的IT行业现状与未来趋势

【话题】我眼神的IT行业现状与未来趋势

目录 一、挑战 教学资源的重新分配 教师角色的转变 学生学习方式的改变 教育评价体系的挑战 二、机遇 个性化学习 跨学科学习 国际合作与交流 创新教育模式 三、如何培养下一代IT专业人才 更新教育理念 加强基础设施建设 整合课程资源 加强实践教学 培养跨学科…
阅读更多...
【Linux】TCP协议【中】{确认应答机制/超时重传机制/连接管理机制}

【Linux】TCP协议【中】{确认应答机制/超时重传机制/连接管理机制}

文章目录 1.确认应答机制2.超时重传机制&#xff1a;超时不一定是真超时了3.连接管理机制 1.确认应答机制 TCP协议中的确认应答机制是确保数据可靠传输的关键部分。以下是该机制的主要步骤和特点的详细解释&#xff1a; 数据分段与发送&#xff1a; 发送方将要发送的数据分成一…
阅读更多...
vue深度选择器（:deep​）

vue深度选择器（:deep​）

处于 scoped 样式中的选择器如果想要做更“深度”的选择&#xff0c;也即&#xff1a;影响到子组件&#xff0c;可以使用 :deep() 这个伪类&#xff1a; <style lang"scss" scoped> .evaluation-situation-details :deep .cl-icon-arrow-right {display: none…
阅读更多...
【Python 对接QQ的接口（二）】简单用接口查询【等级/昵称/头像/Q龄/当天在线时长/下一个等级升级需多少天】

【Python 对接QQ的接口（二）】简单用接口查询【等级/昵称/头像/Q龄/当天在线时长/下一个等级升级需多少天】

文章日期&#xff1a;2024.05.25 使用工具&#xff1a;Python 类型&#xff1a;QQ接口 文章全程已做去敏处理&#xff01;&#xff01;&#xff01; 【需要做的可联系我】 AES解密处理&#xff08;直接解密即可&#xff09;&#xff08;crypto-js.js 标准算法&#xff09;&…
阅读更多...
JS根据所选ID数组在源数据中取出对象

JS根据所选ID数组在源数据中取出对象

let selectIds [1, 3] // 选中id数组let allData [{ id: 1, name: 123 },{ id: 2, name: 234 },{ id: 3, name: 345 },{ id: 4, name: 456 },] // 源数据let newList [] // 最终数据selectIds.map((i) > {allData.filter((item) > {item.id i && newList.pus…
阅读更多...
aws sqs基础概念和队列参数解析

aws sqs基础概念和队列参数解析

分布式队列的组成部分 生产者&#xff0c;向队列发送消息的组件消费者&#xff0c;接受队列消息队列&#xff0c;多个sqs服务器存储冗余存储消息 sqs自动删除超过最大留存时间的消息&#xff08;默认4天&#xff09;&#xff0c;可以通过SetQueueAttributes调整为&#xff08…
阅读更多...
【408真题】2009-13

【408真题】2009-13

“接”是针对题目进行必要的分析&#xff0c;比较简略&#xff1b; “化”是对题目中所涉及到的知识点进行详细解释&#xff1b; “发”是对此题型的解题套路总结&#xff0c;并结合历年真题或者典型例题进行运用。 涉及到的知识全部来源于王道各科教材&#xff08;2025版&…
阅读更多...
VBA即用型代码手册：删除Excel中空白行Delete Blank Rows in Excel

VBA即用型代码手册：删除Excel中空白行Delete Blank Rows in Excel

我给VBA下的定义&#xff1a;VBA是个人小型自动化处理的有效工具。可以大大提高自己的劳动效率&#xff0c;而且可以提高数据的准确性。我这里专注VBA,将我多年的经验汇集在VBA系列九套教程中。 作为我的学员要利用我的积木编程思想&#xff0c;积木编程最重要的是积木如何搭建…
阅读更多...
IDEA中好用的插件

IDEA中好用的插件

IDEA中好用的插件 CodeGeeXMybatis Smart Code Help ProAlibaba Java Coding Guidelines​(XenoAmess TPM)​通义灵码常用操作 TranslationStatistic CodeGeeX 官网地址&#xff1a;https://codegeex.cn/ 使用手册&#xff1a;https://zhipu-ai.feishu.cn/wiki/CuvxwUDDqiErQU…
阅读更多...
Android 自定义图片进度条

Android 自定义图片进度条

用系统的Progressbar&#xff0c;设置图片drawable作为进度条会出现图片长度不好控制&#xff0c;容易被截断&#xff0c;或者变形的问题。而我有个需求&#xff0c;使用图片背景&#xff0c;和图片进度&#xff0c;而且在进度条头部有个闪光点效果。 如下图&#xff1a; 找了…
阅读更多...
Kafka（十三）监控与告警

Kafka（十三）监控与告警

目录 Kafka监控与告警1 解决方案1.2 基础知识JMX监控指标代理查看KafkaJMX远程端口 1.3 真实案例Kafka Exporter:PromethusPromethus Alert ManagerGrafana 1.3 实际操作部署监控和告警系统1.2.1 部署Kafka Exporter1.2.2 部署Prometheus1.2.3 部署AlertManger1.2.4 添加告警规…
阅读更多...
大疆上云API本地部署与飞机上云

大疆上云API本地部署与飞机上云

文章目录 前言一、安装基础环境1. EMQX 安装(版本4.4.0)2. MySql 安装(版本8.0.26)3. Redis 安装 二、部署后端&#xff08;JDK必须11及以上&#xff09;三、部署前端四、成为大疆开发者五、飞机注册上云六、绑定飞机七、无人机状态查看八、直播流查看 前言 大疆上云API官方文…
阅读更多...
HarmonyOS鸿蒙应用开发——ArkTS的“内置组件 + 样式 + 循环和条件渲染”

HarmonyOS鸿蒙应用开发——ArkTS的“内置组件 + 样式 + 循环和条件渲染”

一、内置组件是咩&#xff1f; 学过前端的都知道&#xff0c;一个组件就是由多个组件组成的&#xff0c;一个组件也可以是多个小组件组成的&#xff0c;组件就是一些什么导航栏、底部、按钮......啥的&#xff0c;但是组件分为【自定义组件】跟【内置组件】 【自定义组件】就…
阅读更多...
【狂神说Java】Redis笔记以及拓展

【狂神说Java】Redis笔记以及拓展

一、Redis 入门 Redis为什么单线程还这么快&#xff1f; 误区1&#xff1a;高性能的服务器一定是多线程的&#xff1f; 误区2&#xff1a;多线程&#xff08;CPU上下文会切换&#xff01;&#xff09;一定比单线程效率高&#xff01; 核心&#xff1a;Redis是将所有的数据放在内…
阅读更多...
用于时间序列概率预测的蒙特卡洛模拟

用于时间序列概率预测的蒙特卡洛模拟

大家好&#xff0c;蒙特卡洛模拟是一种广泛应用于各个领域的计算技术&#xff0c;它通过从概率分布中随机抽取大量样本&#xff0c;并对结果进行统计分析&#xff0c;从而模拟复杂系统的行为。这种技术具有很强的适用性&#xff0c;在金融建模、工程设计、物理模拟、运筹优化以…
阅读更多...
【C语言】C语言-设备管理系统（源码+数据文件）【独一无二】

【C语言】C语言-设备管理系统（源码+数据文件）【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023