【 uniapp - 黑马优购 | 购物车页面(1)】如何创建购物车编译模式、 商品列表区域实现

news2024/7/4 4:59:31

在这里插入图片描述

在这里插入图片描述

个人名片：

🐼作者简介：一名大二在校生，讨厌编程🎋
🐻‍❄️个人主页🥇：小新爱学习.
🐼个人WeChat：hmmwx53
🕊️系列专栏：🖼️

  • 零基础学Java——小白入门必备
  • 重识C语言——复习回顾
  • 计算机网络体系———深度详讲
  • 微信小程序开发——实战开发
  • 基于黑马优选的小程序开发实战教程

🐓每日一句：🍭努力的意义是给所爱之人一个美好的未来！

文章目录

  • 🌴9. 购物车页面
    • 🌳9.0 创建购物车页面的编译模式
    • 🌳9.1 商品列表区域
      • 🌲9.1.1 渲染购物车商品列表的标题区域
      • 🌲9.1.2 渲染商品列表区域的基本结构
      • 🌲9.1.3 为 my-goods 组件封装 radio 勾选状态
      • 🌲9.1.4 为 my-goods 组件封装 radio-change 事件
      • 🌲9.1.5 修改购物车中商品的勾选状态
      • 🌲9.1.6 为 my-goods 组件封装 NumberBox
      • 🌲9.1.7 为 my-goods 组件封装 num-change 事件
      • 🌲9.1.8 解决 NumberBox 数据不合法的问题
      • 🌲9.1.9 完善 NumberBox 的 inputValue 侦听器
      • 🌲9.1.10 修改购物车中商品的数量
      • 🌲9.1.11 渲染滑动删除的 UI 效果
      • 🌲9.1.12 实现滑动删除的功能
  • ==由于本节代码块过长，所以分节发出，欢迎关注，期待后续~==

🌴9. 购物车页面

🌳9.0 创建购物车页面的编译模式

  1. 打开微信开发者工具，点击工具栏上的“编译模式”下拉菜单，选择“添加编译模式”：
    在这里插入图片描述

  2. 勾选“启动页面的路径”之后，点击“确定”按钮，新增购物车页面的编译模式：
    在这里插入图片描述

🌳9.1 商品列表区域

🌲9.1.1 渲染购物车商品列表的标题区域

  1. 定义如下的 UI 结构：
<!-- 购物车商品列表的标题区域 -->
<view class="cart-title">
  <!-- 左侧的图标 -->
  <uni-icons type="shop" size="18"></uni-icons>
  <!-- 描述文本 -->
  <text class="cart-title-text">购物车</text>
</view>
  1. 美化样式：
.cart-title {
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-left: 5px;
  border-bottom: 1px solid #efefef;
  .cart-title-text {
    margin-left: 10px;
  }
}

🌲9.1.2 渲染商品列表区域的基本结构

  1. 通过 mapState 辅助函数，将 Store 中的 cart 数组映射到当前页面中使用：
import badgeMix from '@/mixins/tabbar-badge.js'
// 按需导入 mapState 这个辅助函数
import { mapState } from 'vuex'

export default {
  mixins: [badgeMix],
  computed: {
    // 将 m_cart 模块中的 cart 数组映射到当前页面中使用
    ...mapState('m_cart', ['cart']),
  },
  data() {
    return {}
  },
}
  1. 在 UI 结构中，通过 v-for 指令循环渲染自定义的 my-goods 组件：
<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
  <my-goods :goods="goods"></my-goods>
</block>

🌲9.1.3 为 my-goods 组件封装 radio 勾选状态

  1. 打开 my-goods.vue 组件的源代码，为商品的左侧图片区域添加 radio 组件：
<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
  <radio checked color="#C00000"></radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>
  1. 给类名为 goods-item-left 的 view 组件添加样式，实现 radio 组件和 image 组件的左右布局：
.goods-item-left {
  margin-right: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .goods-pic {
    width: 100px;
    height: 100px;
    display: block;
  }
}
  1. 封装名称为 showRadio 的 props 属性，来控制当前组件中是否显示 radio 组件：
export default {
  // 定义 props 属性，用来接收外界传递到当前组件的数据
  props: {
    // 商品的信息对象
    goods: {
      type: Object,
      default: {},
    },
    // 是否展示图片左侧的 radio
    showRadio: {
      type: Boolean,
      // 如果外界没有指定 show-radio 属性的值，则默认不展示 radio 组件
      default: false,
    },
  },
}
  1. 使用 v-if 指令控制 radio 组件的按需展示：
<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
  <!-- 使用 v-if 指令控制 radio 组件的显示与隐藏 -->
  <radio checked color="#C00000" v-if="showRadio"></radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>
  1. 在 cart.vue 页面中的商品列表区域，指定 :show-radio="true" 属性，从而显示 radio 组件：
<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
  <my-goods :goods="goods" :show-radio="true"></my-goods>
</block>
  1. 修改 my-goods.vue 组件，动态为 radio 绑定选中状态：
<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
  <!-- 存储在购物车中的商品，包含 goods_state 属性，表示商品的勾选状态 -->
  <radio :checked="goods.goods_state" color="#C00000" v-if="showRadio"></radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>

🌲9.1.4 为 my-goods 组件封装 radio-change 事件

  1. 当用户点击 radio 组件，希望修改当前商品的勾选状态，此时用户可以为 my-goods 组件绑定 @radio-change 事件，从而获取当前商品的 goods_id 和 goods_state：
<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
  <!-- 在 radioChangeHandler 事件处理函数中，通过事件对象 e，得到商品的 goods_id 和 goods_state -->
  <my-goods :goods="goods" :show-radio="true" @radio-change="radioChangeHandler"></my-goods>
</block>
  1. 定义 radioChangeHandler 事件处理函数如下：
methods: {
  // 商品的勾选状态发生了变化
  radioChangeHandler(e) {
    console.log(e) // 输出得到的数据 -> {goods_id: 395, goods_state: false}
  }
}
  1. 在 my-goods.vue 组件中，为 radio 组件绑定 @click 事件处理函数如下：
<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
  <radio :checked="goods.goods_state" color="#C00000" v-if="showRadio" @click="radioClickHandler"></radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>
  1. 在 my-goods.vue 组件的 methods 节点中，定义 radioClickHandler 事件处理函数：
methods: {
  // radio 组件的点击事件处理函数
  radioClickHandler() {
    // 通过 this.$emit() 触发外界通过 @ 绑定的 radio-change 事件，
    // 同时把商品的 Id 和 勾选状态 作为参数传递给 radio-change 事件处理函数
    this.$emit('radio-change', {
      // 商品的 Id
      goods_id: this.goods.goods_id,
      // 商品最新的勾选状态
      goods_state: !this.goods.goods_state
    })
  }
}

🌲9.1.5 修改购物车中商品的勾选状态

  1. 在 store/cart.js 模块中，声明如下的 mutations 方法，用来修改对应商品的勾选状态：
// 更新购物车中商品的勾选状态
updateGoodsState(state, goods) {
  // 根据 goods_id 查询购物车中对应商品的信息对象
  const findResult = state.cart.find(x => x.goods_id === goods.goods_id)

  // 有对应的商品信息对象
  if (findResult) {
    // 更新对应商品的勾选状态
    findResult.goods_state = goods.goods_state
    // 持久化存储到本地
    this.commit('m_cart/saveToStorage')
  }
}
  1. 在 cart.vue 页面中，导入 mapMutations 这个辅助函数，从而将需要的 mutations 方法映射到当前页面中使用：
import badgeMix from '@/mixins/tabbar-badge.js'
import { mapState, mapMutations } from 'vuex'

export default {
  mixins: [badgeMix],
  computed: {
    ...mapState('m_cart', ['cart']),
  },
  data() {
    return {}
  },
  methods: {
    ...mapMutations('m_cart', ['updateGoodsState']),
    // 商品的勾选状态发生了变化
    radioChangeHandler(e) {
      this.updateGoodsState(e)
    },
  },
}

🌲9.1.6 为 my-goods 组件封装 NumberBox

注意：NumberBox 组件是 uni-ui 提供的

  1. 修改 my-goods.vue 组件的源代码，在类名为 goods-info-box 的 view 组件内部渲染 NumberBox 组件的基本结构：
<view class="goods-info-box">
  <!-- 商品价格 -->
  <view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
  <!-- 商品数量 -->
  <uni-number-box :min="1"></uni-number-box>
</view>
  1. 美化页面的结构：
.goods-item-right {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;

  .goods-name {
    font-size: 13px;
  }

  .goods-info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .goods-price {
    font-size: 16px;
    color: #c00000;
  }
}
  1. 在 my-goods.vue 组件中，动态为 NumberBox 组件绑定商品的数量值：
<view class="goods-info-box">
  <!-- 商品价格 -->
  <view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
  <!-- 商品数量 -->
  <uni-number-box :min="1" :value="goods.goods_count"></uni-number-box>
</view>
  1. 在 my-goods.vue 组件中，封装名称为 showNum 的 props 属性，来控制当前组件中是否显示 NumberBox 组件：
export default {
  // 定义 props 属性，用来接收外界传递到当前组件的数据
  props: {
    // 商品的信息对象
    goods: {
      type: Object,
      defaul: {},
    },
    // 是否展示图片左侧的 radio
    showRadio: {
      type: Boolean,
      // 如果外界没有指定 show-radio 属性的值，则默认不展示 radio 组件
      default: false,
    },
    // 是否展示价格右侧的 NumberBox 组件
    showNum: {
      type: Boolean,
      default: false,
    },
  },
}
  1. 在 my-goods.vue 组件中，使用 v-if 指令控制 NumberBox 组件的按需展示：
<view class="goods-info-box">
  <!-- 商品价格 -->
  <view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
  <!-- 商品数量 -->
  <uni-number-box :min="1" :value="goods.goods_count" @change="numChangeHandler" v-if="showNum"></uni-number-box>
</view>
  1. 在 cart.vue 页面中的商品列表区域，指定 :show-num="true" 属性，从而显示 NumberBox 组件：
<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
  <my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler"></my-goods>
</block>

🌲9.1.7 为 my-goods 组件封装 num-change 事件

  1. 当用户修改了 NumberBox 的值以后，希望将最新的商品数量更新到购物车中，此时用户可以为 my-goods 组件绑定 @num-change 事件，从而获取当前商品的 goods_id 和 goods_count：
<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
  <my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler" @num-change="numberChangeHandler"></my-goods>
</block>
  1. 定义 numberChangeHandler 事件处理函数如下：
// 商品的数量发生了变化
numberChangeHandler(e) {
  console.log(e)
}
  1. 在 my-goods.vue 组件中，为 uni-number-box 组件绑定 @change 事件处理函数如下：
<view class="goods-info-box">
  <!-- 商品价格 -->
  <view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
  <!-- 商品数量 -->
  <uni-number-box :min="1" :value="goods.goods_count" @change="numChangeHandler"></uni-number-box>
</view>
  1. 在 my-goods.vue 组件的 methods 节点中，定义 numChangeHandler 事件处理函数：
methods: {
  // NumberBox 组件的 change 事件处理函数
  numChangeHandler(val) {
    // 通过 this.$emit() 触发外界通过 @ 绑定的 num-change 事件
    this.$emit('num-change', {
      // 商品的 Id
      goods_id: this.goods.goods_id,
      // 商品的最新数量
      goods_count: +val
    })
  }
}

🌲9.1.8 解决 NumberBox 数据不合法的问题

问题说明：当用户在 NumberBox 中输入字母等非法字符之后，会导致 NumberBox 数据紊乱的问题

  1. 打开项目根目录中 components/uni-number-box/uni-number-box.vue 组件，修改 methods 节点中的 _onBlur 函数如下：
_onBlur(event) {
  // 官方的代码没有进行数值转换，用户输入的 value 值可能是非法字符：
  // let value = event.detail.value;

  // 将用户输入的内容转化为整数
  let value = parseInt(event.detail.value);

  if (!value) {
    // 如果转化之后的结果为 NaN，则给定默认值为 1
    this.inputValue = 1;
    return;
  }

  // 省略其它代码...
}
  1. 修改完毕之后，用户输入小数会被转化为整数，用户输入非法字符会被替换为默认值 1

🌲9.1.9 完善 NumberBox 的 inputValue 侦听器

问题说明：在用户每次输入内容之后，都会触发 inputValue 侦听器，从而调用 this.$emit("change", newVal) 方法。这种做法可能会把不合法的内容传递出去！

  1. 打开项目根目录中 components/uni-number-box/uni-number-box.vue 组件，修改 watch 节点中的 inputValue 侦听器如下：
inputValue(newVal, oldVal) {
  // 官方提供的 if 判断条件，在用户每次输入内容时，都会调用 this.$emit("change", newVal)
  // if (+newVal !== +oldVal) {

  // 新旧内容不同 && 新值内容合法 && 新值中不包含小数点
  if (+newVal !== +oldVal && Number(newVal) && String(newVal).indexOf('.') === -1) {
    this.$emit("change", newVal);
  }
}
  1. 修改完毕之后，NumberBox 组件只会把合法的、且不包含小数点的新值传递出去

🌲9.1.10 修改购物车中商品的数量

  1. 在 store/cart.js 模块中，声明如下的 mutations 方法，用来修改对应商品的数量：
// 更新购物车中商品的数量
updateGoodsCount(state, goods) {
  // 根据 goods_id 查询购物车中对应商品的信息对象
  const findResult = state.cart.find(x => x.goods_id === goods.goods_id)

  if(findResult) {
    // 更新对应商品的数量
    findResult.goods_count = goods.goods_count
    // 持久化存储到本地
    this.commit('m_cart/saveToStorage')
  }
}
  1. 在 cart.vue 页面中，通过 mapMutations 这个辅助函数，将需要的 mutations 方法映射到当前页面中使用：
import badgeMix from '@/mixins/tabbar-badge.js'
import { mapState, mapMutations } from 'vuex'

export default {
  mixins: [badgeMix],
  computed: {
    ...mapState('m_cart', ['cart']),
  },
  data() {
    return {}
  },
  methods: {
    ...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount']),
    // 商品的勾选状态发生了变化
    radioChangeHandler(e) {
      this.updateGoodsState(e)
    },
    // 商品的数量发生了变化
    numberChangeHandler(e) {
      this.updateGoodsCount(e)
    },
  },
}

🌲9.1.11 渲染滑动删除的 UI 效果

滑动删除需要用到 uni-ui 的 uni-swipe-action 组件和 uni-swipe-action-item。详细的官方文档请参考SwipeAction 滑动操作。

  1. 改造 cart.vue 页面的 UI 结构，将商品列表区域的结构修改如下（可以使用 uSwipeAction 代码块快速生成基本的 UI 结构）：
<!-- 商品列表区域 -->
<!-- uni-swipe-action 是最外层包裹性质的容器 -->
<uni-swipe-action>
  <block v-for="(goods, i) in cart" :key="i">
    <!-- uni-swipe-action-item 可以为其子节点提供滑动操作的效果。需要通过 options 属性来指定操作按钮的配置信息 -->
    <uni-swipe-action-item :options="options" @click="swipeActionClickHandler(goods)">
      <my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler" @num-change="numberChangeHandler"></my-goods>
    </uni-swipe-action-item>
  </block>
</uni-swipe-action>
  1. 在 data 节点中声明 options 数组，用来定义操作按钮的配置信息：
data() {
  return {
    options: [{
      text: '删除', // 显示的文本内容
      style: {
        backgroundColor: '#C00000' // 按钮的背景颜色
      }
    }]
  }
}
  1. 在 methods 中声明 uni-swipe-action-item 组件的 @click 事件处理函数：
// 点击了滑动操作按钮
swipeActionClickHandler(goods) {
  console.log(goods)
}
  1. 美化 my-goods.vue 组件的样式：
.goods-item {
  // 让 goods-item 项占满整个屏幕的宽度
  width: 750rpx;
  // 设置盒模型为 border-box
  box-sizing: border-box;
  display: flex;
  padding: 10px 5px;
  border-bottom: 1px solid #f0f0f0;
}

🌲9.1.12 实现滑动删除的功能

  1. 在 store/cart.js 模块的 mutations 节点中声明如下的方法，从而根据商品的 Id 从购物车中移除对应的商品：
// 根据 Id 从购物车中删除对应的商品信息
removeGoodsById(state, goods_id) {
  // 调用数组的 filter 方法进行过滤
  state.cart = state.cart.filter(x => x.goods_id !== goods_id)
  // 持久化存储到本地
  this.commit('m_cart/saveToStorage')
}
  1. 在 cart.vue 页面中，使用 mapMutations 辅助函数，把需要的方法映射到当前页面中使用：
methods: {
  ...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById']),
  // 商品的勾选状态发生了变化
  radioChangeHandler(e) {
    this.updateGoodsState(e)
  },
  // 商品的数量发生了变化
  numberChangeHandler(e) {
    this.updateGoodsCount(e)
  },
  // 点击了滑动操作按钮
  swipeActionClickHandler(goods) {
    this.removeGoodsById(goods.goods_id)
  }
}

在这里插入图片描述

由于本节代码块过长，所以分节发出，欢迎关注，期待后续~

在这里插入图片描述

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

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

相关文章

LeetCode[692]前K个高频单词

LeetCode[692]前K个高频单词

难度&#xff1a;中等题目&#xff1a;给定一个单词列表 words和一个整数 k&#xff0c;返回前 k个出现次数最多的单词。返回的答案应该按单词出现频率由高到低排序。如果不同的单词有相同出现频率&#xff0c; 按字典顺序 排序。示例 1&#xff1a;输入: words ["i"…
阅读更多...
【异常】记一次因scripts编写错误导致无法正常build的问题

【异常】记一次因scripts编写错误导致无法正常build的问题

一、npm 与 scripts之间的关系 Node 开发离不开 npm&#xff0c;而脚本功能是 npm 最强大、最常用的功能之一。 npm 允许在package.json文件里面&#xff0c;使用scripts字段定义脚本命令。 比如以下&#xff1a; "scripts": {"dev": "vue-cli-se…
阅读更多...
【C++】引用详解

【C++】引用详解

作者&#xff1a;阿润菜菜 专栏&#xff1a;C &#x1f3c3;&#x1f3c3;&#x1f3c3;&#x1f3c3;&#x1f3c3;&#x1f3c3; 本文目录 概念及用法 特性 使用场景 1.做参数 2. 做返回值 从函数栈帧角度理解引用 传值、传引用效率比较 引用和指针的区别 概念及用法 引…
阅读更多...
洛谷 P1194 买礼物 （图论 最小生成树）

洛谷 P1194 买礼物 （图论 最小生成树）

鸽了好几天了今天写个洛谷的题解 题目描述 又到了一年一度的明明生日了&#xff0c;明明想要买 BB 样东西&#xff0c;巧的是&#xff0c;这 BB 样东西价格都是 AA 元。 但是&#xff0c;商店老板说最近有促销活动&#xff0c;也就是&#xff1a; 如果你买了第 II 样东西&#…
阅读更多...
Python OpenCV 数字验证码 字母验证码 图片验证码 自动识别方案 第三方库 识别成功率较高 通用解决方案

Python OpenCV 数字验证码 字母验证码 图片验证码 自动识别方案 第三方库 识别成功率较高 通用解决方案

前言 在学习的前期可使用现有封装好的轮子试试效果，实际调试能否满足需求。使用已经造好的轮子的好处就是能快速解决当下的问题。若能就继续使用，若不能就接入下一步的深度学习模型训练，其实再验证码识别业务场景大多是情况下用于自动化测试仅针对公司内某一单一的业务线，而…
阅读更多...
既然有MySQL了，为什么还要有MongoDB？

既然有MySQL了，为什么还要有MongoDB？

目录一、基本概念走起二、MongoDB的主要特征三、MongoDB优缺点&#xff0c;扬长避短1、优点2、缺点四、何时选择MongoDB&#xff1f;为啥要用它&#xff1f;1、MongoDB事务2、多引擎支持各种强大的索引需求3、具体的应用场景4、以下是几个实际的应用案例&#xff1a;5、选择Mon…
阅读更多...
gcc后续——链接时的静态库和动态库

gcc后续——链接时的静态库和动态库

本篇文章是链接阶段静动态库的理解&#xff0c;点击查看gcc四个阶段 文章目录1 . 库检测linux所用库查找库的位置2. 动静态库的感性理解1. 动态库的理解2. 静态库的理解3. 静动态库整体理解1. 静态库和静态链接2. 动态库和动态链接3. 静动态库对比1.查询当前linux所用库2. 查看…
阅读更多...
【洛谷】P1966 [NOIP2013 提高组] 火柴排队

【洛谷】P1966 [NOIP2013 提高组] 火柴排队

其实这题本身并不难&#xff0c;考的知识点就是归并排序和逆序对&#xff1b;那么难点在哪呢&#xff1f;就在如何发现这题是个逆序对&#xff1a;至少读到这里我们可以知道&#xff0c;虽然火柴高度是唯一的&#xff0c;但我们不可能直接开一个 max long int 大小的数组&#…
阅读更多...
数据库分片

数据库分片

文章目录一、为什么要分片二、什么是数据分片1、垂直分片2、水平分片三、常用分片策略1、Range2、Hash四、相关中间件1、Sharding-Sphere2、Sharding-jdbc一、为什么要分片 从性能方面来说&#xff0c;由于关系型数据库大多采用B树类型的索引&#xff0c;在数据量超过阈(yu)值…
阅读更多...
【python】re解析和re模块

【python】re解析和re模块

目录 正则 RE概念 常见的元字符 量词 贪婪&惰性 修饰符 re模块 findall finditer search match 预加载正则式 内容提取 正则 RE概念 常见的元字符 量词 贪婪&惰性 贪婪匹配.* 惰性匹配.*? 修饰符 修饰符描述re.I使匹配对大小写不敏感re.L做本地化识别&…
阅读更多...
接口测试框架实战 | 流程封装与基于加密接口的测试用例设计

接口测试框架实战 | 流程封装与基于加密接口的测试用例设计

接口测试仅仅掌握 Requests 或者其他一些功能强大的库的用法&#xff0c;是远远不够的&#xff0c;还需要具备能根据公司的业务流程以及需求去定制化一个接口自动化测试框架的能力。所以&#xff0c;接下来&#xff0c;我们主要介绍下接口测试用例分析以及通用的流程封装是如何…
阅读更多...
GO语言基础-06-匿名函数和闭包

GO语言基础-06-匿名函数和闭包

文章目录1. 匿名函数概念语法示例2. 闭包概念语法语法示例1. 匿名函数 概念 如其名&#xff0c;匿名函数不声明函数名。因此要调用匿名函数只能定义一个变量等于该匿名函数。 语法 func(参数 参数类型)(返回值 返回值类型){函数体 }示例 代码 package mainimport "fm…
阅读更多...
Jenkins操作文档

Jenkins操作文档

前言 jenkins概述 持续集成是一种实践&#xff0c;而jenkins可以帮助团队去尽量好的去完成这种实践 jenkins是⼀个开源软件项⽬&#xff0c;是基于Java开发的⼀种持续集成⼯具&#xff0c;⽤于监控持续重复的⼯作&#xff0c;旨在提供⼀个开放易⽤的软件平台&#xff0c;使软…
阅读更多...
“锂”想护航|深耕重点工段，用AI为锂电池安全生产加倍提速！

“锂”想护航|深耕重点工段，用AI为锂电池安全生产加倍提速！

行业发展DEVELOPMENT -受益于新能源汽车市场的爆发增长、“双碳”政策影响下的储能市场扩大等影响&#xff0c;中国锂电行业现已进入高度产业化、规模化发展时期。锂电池生产工艺较长&#xff0c;生产设备庞杂&#xff0c;专用性强&#xff0c;而当前已迈入国际化竞争的锂电行业…
阅读更多...
【Vue】032-尚硅谷-尚品汇-mockjs模拟数据---20230111

【Vue】032-尚硅谷-尚品汇-mockjs模拟数据---20230111

032-尚硅谷-尚品汇-mockjs模拟数据 官网链接 第一步:安装依赖包mockjs 安装mockjs npm install --save mockjs第二步:在src文件夹下创建一个文件夹mock。 第三步:准备模拟的数据。&#xff01; mock/banner.json [{"id": "1","imgUrl": &q…
阅读更多...
哪种蓝牙耳机音质好？2023公认音质最好的蓝牙耳机推荐

哪种蓝牙耳机音质好？2023公认音质最好的蓝牙耳机推荐

现如今&#xff0c;蓝牙耳机的使用频率越来越高&#xff0c;其在音质上的表现也越来越好。那么&#xff0c;在众多的蓝牙耳机当中&#xff0c;哪种蓝牙耳机音质好&#xff1f;下面&#xff0c;我来给大家推荐几款公认音质最好的蓝牙耳机&#xff0c;一起来看看吧。 一、南卡小…
阅读更多...
(十七)Java的时间与日期(1)

(十七)Java的时间与日期(1)

目录 前言: ①Date类 ②SimpleDateFormat类 ③Calendar 前言: 时间和日期. 在系统开发中&#xff0c;日期与时间作为重要的业务因素&#xff0c;起到十分关键的作用&#xff0c;例如同一个时间节点下的数据生成&#xff0c;基于时间范围的各种数据统计和分析&#xff0c;集群节…
阅读更多...
深入浅出变长结构体

深入浅出变长结构体

1、 问题的引出 项目中用到数据包的处理&#xff0c;但包的大小是不固定的&#xff0c;其长度由包头的2字节决定。比如如下的包头&#xff1a;88 0f 0a ob cd ef 23 00 。长度由头2个字节880f决定&#xff0c;考虑字节序&#xff0c;转为0f88&#xff0c;转为10进制3976个字节的…
阅读更多...
汽车零部件行业追溯系统的应用

汽车零部件行业追溯系统的应用

汽车行业正处于一个蓬勃发展的阶段&#xff0c;随着客户需求的不断变化&#xff0c;生产厂商推出新款商品的速度也越来越快&#xff0c;新项目和变更的不断出现&#xff0c;就可能导致在交付的产品质量方面遇到各种各样的问题。如果这些质量问题得不到及时有效地追溯和控制&…
阅读更多...
知识点滴 - PLC培训笔记

知识点滴 - PLC培训笔记

如上图所示&#xff0c;这个设备就是PLC的应用场景&#xff0c;对外控制很多接口电路&#xff0c;交流直流&#xff0c;不同大小电流、电压的电路。在工业上使用很多。 而开发PLC程序时&#xff0c;是在相应的集成开发环境中&#xff0c;画出如下的梯形图&#xff1a; 什么是PL…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023