uni-app--》基于小程序开发的电商平台项目实战（六）

news2025/7/19 2:14:19

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、

🛺系列专栏：uni-app

🚲座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。

👀引言

        ⚓经过web前端的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了uni-app专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第二站就是uni-app开发，希望看到我文章的朋友能对你有所帮助。

        今天开始使用 vue3 + uni-app 搭建一个电商购物的小程序，因为文章会将项目的每一个地方代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的GitHub上，大家可以自行去进行下载运行，希望本文章对有帮助的朋友们能多多关注本专栏，学习更多前端uni-app知识。然后开篇先简单介绍一下本项目用到的技术栈都有哪几个方面（阅读此次项目实践文章能够学习到的技术）：

uni-app：跨平台的应用开发框架，基于vue.js可以一套代码同时构建运行在多个平台。

pnpm：高性能、轻量级npm替代品，帮助开发人员更加高效地处理应用程序的依赖关系。

vue3：vue.js最新版本的用于构建用户界面的渐进式JavaScript框架。

typescript：JavaScript的超集，提供了静态类型检查，使得代码更加健壮。

pinia：vue3构建的Vuex替代品，具有响应式能力，提供非常简单的 API，进行状态管理。

uni-ui：基于vue.js和uni-app的前端UI组件库，开发人员可以快速地构建跨平台应用程序。

        如果是第一次接触uni-app并且想学习uni-app的朋友，我是不建议直接从此次实战项目开始看起，可以先阅读一下我以前的基础文章：什么是uniapp？如何开发uniapp？按部就班的学习可以让学习变得更轻松更容易上手哦，闲话少说我们直接开始今天的uni-app实战篇。

目录

地址模块静态搭建

新建地址功能实现

修改/删除地址功能实现

SKU模块搭建

购物车模块搭建

地址模块静态搭建

接下来实现地址模块的静态搭建，地址模块需要借助两个页面，一个是地址信息的展示另一个是新建或修改地址信息，地址信息这一块我们也将其放置在分包页面当中进行展示，首先我们要新建两个分包页面，如下：

因为address-form要进行新建页面和修改页面两部分内容，所以这里新建页面不需要设置标题后面根据传参动态设置标题即可。

收获地址的静态结构布局如下，修改地址这一块传递query参数，新建地址不需要传递：

<template>
  <view class="viewport">
    <!-- 地址列表 -->
    <scroll-view class="scroll-view" scroll-y>
      <view v-if="true" class="address">
        <view class="address-list">
          <!-- 收货地址项 -->
          <view class="item">
            <view class="item-content">
              <view class="user">
                小王子
                <text class="contact">13111111111</text>
                <text v-if="true" class="badge">默认</text>
              </view>
              <view class="locate">广东省 广州市 天河区 程序员</view>
              <navigator
                class="edit"
                hover-class="none"
                :url="`/subpackage/address-form/address-form?id=1`"
              >
                修改
              </navigator>
            </view>
          </view>
          <!-- 收货地址项 -->
          <view class="item">
            <view class="item-content">
              <view class="user">
                小公主
                <text class="contact">13222222222</text>
                <text v-if="false" class="badge">默认</text>
              </view>
              <view class="locate">北京市 北京市 顺义区 程序员</view>
              <navigator
                class="edit"
                hover-class="none"
                :url="`/pagesMember/address-form/address-form?id=2`"
              >
                修改
              </navigator>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="blank">暂无收货地址</view>
    </scroll-view>
    <!-- 添加按钮 -->
    <view class="add-btn">
      <navigator hover-class="none" url="/subpackage/address-form/address-form">
        新建地址
      </navigator>
    </view>
  </view>
</template>

新建和修改地址的页面设计如下：

<template>
  <view class="content">
    <form>
      <!-- 表单内容 -->
      <view class="form-item">
        <text class="label">收货人</text>
        <input class="input" placeholder="请填写收货人姓名" value="" />
      </view>
      <view class="form-item">
        <text class="label">手机号码</text>
        <input class="input" placeholder="请填写收货人手机号码" value="" />
      </view>
      <view class="form-item">
        <text class="label">所在地区</text>
        <picker class="picker" mode="region" value="">
          <view v-if="false">广东省 广州市 天河区</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">详细地址</text>
        <input class="input" placeholder="街道、楼牌号等信息" value="" />
      </view>
      <view class="form-item">
        <label class="label">设为默认地址</label>
        <switch class="switch" color="#27ba9b" :checked="true" />
      </view>
    </form>
  </view>
  <!-- 提交按钮 -->
  <button class="button">保存并使用</button>
</template>

根据query传递过来的参数动态设置修改和新建页面的显示：

// 获取query数据
const query = defineProps<{
  id?: string
}>()
// 动态设置标题
uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新建地址' })

最终呈现的效果如下：

新建地址功能实现

接下来开始实现新建地址的功能，首先我们编写相应的接口函数用来收集表单数据进行新建地址，根据后端返回给我们的数据编写相应的ts类型，然后在前端接口中进行类型的限制：

根据需要的参数，在新建地址页面设置响应式ref数据用来获取相应的表单数据，如下：

// 表单数据
const form = ref({
  receiver: '', // 收货人
  contact: '', // 联系方式
  fullLocation: '', // 省市区(前端展示)
  provinceCode: '', // 省份编码(后端参数)
  cityCode: '', // 城市编码(后端参数)
  countyCode: '', // 区/县编码(后端参数)
  address: '', // 详细地址
  isDefault: 0, // 默认地址，1为是，0为否
})

正常的输入框直接使用 v-model 进行数据的双向绑定即可：

关于获取所在地区的数据在上文讲解个人信息模块的时候已经讲解过了，这里也简单提一下，通过change函数监听用户选择的数据，将文字进行前端页面展示，数字进行后端参数传递：

// 收集所在地区的事件处理函数
const onRegionChange: UniHelper.RegionPickerOnChange = (ev) => {
  // 省市区前端展示需要
  form.value.fullLocation = ev.detail.value.join(' ')
  // 省市区后端参数需要
  const [provinceCode, cityCode, countyCode] = ev.detail.code!
  // 将获取到的参数进行一个合并
  Object.assign(form.value, { provinceCode, cityCode, countyCode })
}

设置默认地址的switch按钮也是采用change函数进行监听，根据boolean类型返回数字1或0：

// 收集是否默认收获地址
const onSwitchChange: UniHelper.SwitchOnChange = (ev) => {
  form.value.isDefault = ev.detail.value ? 1 : 0
}

接下来给按钮设置点击函数用于表单数据的提交，然后进行页面的跳转：

// 提交表单
const onSubmit = async () => {
  // 新建地址请求
  await postMemberAddressAPI(form.value)
  // 成功提示
  uni.showToast({ icon: 'success', title: '添加成功' })
  // 返回上一页
  setTimeout(() => {
    uni.navigateBack()
  }, 400)
}

进行页面跳转之后接下来就需要进行地址页面数据的渲染了，老生常谈的事先编写相应接口函数：

编写完相应的接口函数之后，接下来我们需要调用该函数然后通过onShow页面展示的时候调用：

<script setup lang="ts">
import { ref } from 'vue'
import { getMemberAddressAPI } from '@/api/address'
import type { AddressItem } from '@/types/address'
import { onShow } from '@dcloudio/uni-app'

// 获取收获地址列表数据
const addressList = ref<AddressItem[]>([])
const getMemberAddressData = async () => {
  const res = await getMemberAddressAPI()
  addressList.value = res.result
}
// 初始化调用(页面显示调用)
onShow(() => {
  getMemberAddressData()
})
</script>

通过v-for遍历数据，然后通过查找语法进行页面的展示：

最终呈现的结果如下：

修改/删除地址功能实现

接下来实现修改地址的功能，这里我们也先编写相应的接口函数，修改地址需要传入相应的id值：

/**
 * 获取收获地址详情接口
 * @param id 地址id(路径参数)
 */
export const getMemberAddressByIdAPI = (id: string) => {
  return http<AddressItem>({
    method: 'GET',
    url: `/member/address/${id}`,
  })
}

在修改地址页面中调用接口函数获取地址的详情数据，并将数据合并到表单当中：

// 获取收获地址详情数据
const getMemberAddressByIdData = async () => {
  if (query.id) {
    const res = await getMemberAddressByIdAPI(query.id)
    // 把数据合并到表单中
    Object.assign(form.value, res.result)
  }
}
// 初始化调用(页面加载)
onLoad(() => {
  getMemberAddressByIdData()
})

接下来我们需要对表单的提交按钮再进行处理，首先我们先编写相应的修改地址的API：

/**
 * 获取收获地址详情接口
 * @param id 地址id(路径参数)
 * @param data 表单数据(请求体参数)
 */
export const puttMemberAddressByIdAPI = (id: string, data: AddressParams) => {
  return http<AddressItem>({
    method: 'PUT',
    url: `/member/address/${id}`,
    data,
  })
}

编写完接口函数之后，我们就可以根据当前页面是否有query参数来判断是修改还是新增：

最终呈现的结果如下：

接下来对修改地址页面进行表单的校验规则，如下我们定义相应的规则：

// 定义校验规则
const rules: UniHelper.UniFormsRules = {
  receiver: { rules: [{ required: true, errorMessage: '请输入收货人姓名' }] },
  contact: {
    rules: [
      { required: true, errorMessage: '请输入联系方式' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
    ],
  },
  fullLocation: { rules: [{ required: true, errorMessage: '请选择所在地区' }] },
  address: { rules: [{ required: true, errorMessage: '请选择详细地址' }] },
}

接下来借助uniapp中的uni-form进行相应的表单校验：

拿到相应的表单实例之后，调用表单校验函数进行验证，通过trycatch进行报错提示：

// 存储表单组件实例
const formRef = ref<UniHelper.UniFormsInstance>()
// 提交表单
const onSubmit = async () => {
  try {
    await formRef.value?.validate?.()
    if (query.id) {
      // 修改地址的API
      await puttMemberAddressByIdAPI(query.id, form.value)
    } else {
      // 新建地址请求
      await postMemberAddressAPI(form.value)
    }
    // 成功提示
    uni.showToast({ icon: 'success', title: query.id ? '修改成功' : '添加成功' })
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 400)
  } catch (error) {
    uni.showToast({ icon: 'error', title: '请填写完整信息' })
  }
}

如果什么数据都没有填入就进行表单提交的话，呈现的效果如下图所示：

接下来实现删除地址功能的实现，这里我们借助uniapp给我们提供的uni-swipe-action组件进行删除业务的实现，首先我们先编写相应的删除功能的接口函数：

/**
 * 删除收获地址
 * @param id 地址id(路径参数)
 */
export const deleteMemberAddressByIdAPI = (id: string) => {
  return http<AddressItem>({
    method: 'DELETE',
    url: `/member/address/${id}`,
  })
}

接下来将我们要进行删除业务的功能换上相应的组件，在组件中存放要删除按钮的插槽：

通过点击函数设置删除按钮的回调：

// 删除收获地址
const onDeleteAddress = (id: string) => {
  // 二次确认
  uni.showModal({
    content: '确认删除？',
    success: async (res) => {
      if (res.confirm) {
        // 根据id删除收获地址
        await deleteMemberAddressByIdAPI(id)
        // 重新获取数据列表
        getMemberAddressData()
      }
    },
  })
}

最终呈现的结果如下：

SKU模块搭建

SKU模块展示了购买某种商品时给我们呈现的选择样式的相关界面，uniapp插件市场也为其提供了相应的插件进行使用：插件市场选择 ，这里我们选择了vue3项目，找下载量最高的插件进行下载

进行该插件进行相应的下载：

下载完插件根据作者给我们的使用提示进行插件的部署：

配置好文件之后，记下来我们在商品详情组件引入该组件：

通过 v-model 进行双向数据绑定来显示SKU页面的显示与隐藏，当打开SKU页面的时候根据传入数据的不同来切换不同的按钮状态，mode属性就是改变其按钮模式的：

// 是否显示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组件的ref实例获取组件实例之后，通过selectArr属性数据替代原本的文字数据：

// SKU组件的实例
const skuPopupRef = ref<SkuPopupInstance>()
// 计算被选中的值
const selectArrText = computed(() => {
  return skuPopupRef.value?.selectArr?.join(' ').trim() || '请选择商品规格'
})

然后在选择按钮文字处通过插值语法动态设置其对应的文字内容：

这里我们也可以通过 actived-style 属性设置其颜色、边框和背景等相关颜色，使其更适配当前主题

最终呈现的效果如下：

接下来实现加入购物车功能的实现，在SKU组件中调用@add-cart设置其加入购物车的回调：

// 加入购物车的事件处理函数
const onAddCart = async (ev: SkuPopupEvent) => {
  await postMemberCartAPI({ skuId: ev._id, count: ev.buy_num })
  uni.showToast({ icon: 'none', title: '添加成功' })
  isShowSku.value = false
}

购物车模块搭建

还是老生常谈的东西，关于购物车界面有两种情况的展示，一种是用户未登录状态另一种是用户已登录状态，这里需要我们先通过判断仓库中是否有用户信息来进行v-if和v-else展示，具体如下：

接下来开始编写接口函数来获取购物车中的数据：

/**
 * 获取购物车列表
 */
export const getMemberCartAPI = () => {
  return http<CartItem[]>({
    method: 'GET',
    url: '/member/cart',
  })
}

在购物车组件中调用该接口函数获取相应的购物车数据，将获取到的数据存储到ref数据当中：

// 获取购物车数据
const getMemberCartData = async () => {
  const res = await getMemberCartAPI()
  cartList.value = res.result
}
// 初始化调用(页面显示)
onShow(() => {
  if (memberStore.profile) {
    getMemberCartData()
  }
})

下面就是通过插值语法将获取到的数据进行一个展示了，如下：

最终呈现的效果如下：

删除商品也很简单，调用相应的接口函数，如下：

/**
 * 删除/清空购物车单品
 * @param data 请求头参数 ids SKUID 的集合
 */
export const deleteMemberCartAPI = (data: { ids: string[] }) => {
  return http({
    method: 'DELETE',
    url: '/member/cart',
    data,
  })
}

然后给删除按钮设置点击事件，如此就可以进行商品的删除了，如下：

// 点击删除按钮
const onDeleteCart = (skuid: string) => {
  // 二次确认
  uni.showModal({
    content: '是否删除',
    success: async (res) => {
      if (res.confirm) {
        // 后端删除
        await deleteMemberCartAPI({ ids: [skuid] })
        // 重新获取列表
        getMemberCartData()
      }
    },
  })
}

接下来开始设置数据点击框和商品选择框的数据的交互，首先我们先编写相应的接口函数：

/**
 * 修改购物车单品
 * @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,
  })
}
/**
 * 购物车全选/取消全选
 * @param data selected 是否选中
 */
export const putMemberCartSelectedAPI = (data: { selected: boolean }) => {
  return http({
    method: 'PUT',
    url: '/member/cart/selected',
    data,
  })
}

通过调用相关接口函数以及设置计算属性来得到改变选择框的状态：

// 修改商品数量
const onChageCount = (ev: InputNumberBoxEvent) => {
  putMemberCartBySkuIdAPI(ev.index, { count: ev.value })
}
// 修改选中状态-单品修改
const onChangeSelected = (item: CartItem) => {
  // 前端数据更新-是否选中取反
  item.selected = !item.selected
  // 后端数据更新
  putMemberCartBySkuIdAPI(item.skuId, { selected: item.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 })
}

最终呈现的效果如下：

本项目地址管理页面、购物车页面的一些基本功能的搭建就讲解到这，下一篇文章将继续讲解项目其他页面操作，关注博主学习更多前端uni-app知识，您的支持就是博主创作的最大动力！ 

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

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

相关文章

Tang Capital宣布收购纳斯达克上市公司Rain Oncology100%股权

Tang Capital宣布收购纳斯达克上市公司Rain Oncology100%股权

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;纳斯达克上市公司Rain Oncology(Rain)宣布近期已收到Tang Capital Partners旗下的子公司Concentra Biosciences以每股1.25美元的现金收购要约。 这家临床阶段微型市值癌症治疗药物开发商的股价在消…
阅读更多...
【打印机故障】打印时一直显示任务“排队中”无法打印或取消

【打印机故障】打印时一直显示任务“排队中”无法打印或取消

解决办法 一、关闭打印服务 如果打印任务无法取消或者删除&#xff0c;可以先暂停打印机的“服务&#xff0c;关闭”后台处理程序。具体方法如下&#xff1a; 1.在开始菜单搜索框中输入 services.msc或者中文输入“服务”&#xff0c;然后按下 enter 键。 2.从服务列表中选择打…
阅读更多...
【Qt控件之QDialogButtonBox】概述及使用

【Qt控件之QDialogButtonBox】概述及使用

概述 QDialogButtonBox类是一个小部件&#xff0c;它以适合当前小部件样式的布局呈现按钮。 对话框和消息框通常以符合该台界面指南的布局呈现按钮。不同的平台会有不同的对话框布局。QDialogButtonBox允许发人员向其添加按钮&#xff0c;并将自使用用户的桌面环境所适合的布局…
阅读更多...
发现了一个牛逼的网站 可以免费使用chatGPT（看到最后）

发现了一个牛逼的网站 可以免费使用chatGPT（看到最后）

最近，打工人们集体陷入了一场焦虑。“一觉醒来，我感觉自己快要失业了……”“身为文字工作者，我该如何自保饭碗？”“人工智能到底会不会完全取代人类的工作？” ChatGPT最近都听说了吧？据说，改论文、敲代码、写文案……只有你想不到的，没有人家办不成的！ 它是什么？ …
阅读更多...
一篇文章带你搞定所有二叉树题型的递归思维（思路超详细）

一篇文章带你搞定所有二叉树题型的递归思维（思路超详细）

文章目录 &#x1f380;前言&#xff1a;&#x1f3c5;先在开头总结一下&#xff0c;二叉树解题的思维模式分两类&#xff1a;&#x1f387;先解释一下“前序位置”&#xff0c;“后序位置”的意思&#x1f3e8;举一个简单的例子&#xff1a; &#x1fa80;下面通过两道例题&am…
阅读更多...
HTTP 协议的基本格式（部分）

HTTP 协议的基本格式（部分）

要想了解HTTP&#xff0c;得先知道什么是HTTP&#xff0c;那么HTTP是什么呢&#xff1f;HTTP (全称为 "超文本传输协议") 是一种应用非常广泛的 应用层协议。那什么是超文本呢&#xff1f;那就是除了文本&#xff0c;还有图片&#xff0c;声音&#xff0c;视频等。 …
阅读更多...
Linux系统编程_进程：C程序空间分配、fork、wait、exec、system、popen

Linux系统编程_进程：C程序空间分配、fork、wait、exec、system、popen

1. 进程相关概念&#xff08;414.1&#xff09; 问1. 什么是程序&#xff0c;什么是进程&#xff0c;有什么区别&#xff1f; 程序是静态的概念&#xff0c;gcc xxx.c –o pro&#xff0c;磁盘中生成pro文件&#xff0c;叫做程序进程是程序的一次运行活动&#xff0c;通俗点即…
阅读更多...
LoongArch单机Ceph Bcache加速4K随机写性能测试

LoongArch单机Ceph Bcache加速4K随机写性能测试

LoongArch单机Ceph Bcache加速4K随机写性能测试 两块HDD做OSD [rootceph01 ~]# fio -direct1 -iodepth128 -thread -rwrandwrite -ioenginelibaio -bs4k -size100G -numjobs1 -runtime600 -group_reporting -namemytest -filename/dev/rbd0 mytest: (g0): rwrandwrite, bs(R)…
阅读更多...
System.exit()方法参数

System.exit()方法参数

说明文档&#xff1a;System (Java Platform SE 8 ) 终止当前正在运行的Java虚拟机。该参数用作状态代码&#xff1b;按照惯例&#xff0c;非零状态码表示异常终止。 此方法调用类Runtime中的exit方法。此方法从不正常返回。 调用System.exit&#xff08;n&#xff09;实际上等…
阅读更多...
这应该是关于回归模型最全的总结了（附原理+代码）

这应该是关于回归模型最全的总结了（附原理+代码）

本文将继续修炼回归模型算法&#xff0c;并总结了一些常用的除线性回归模型之外的模型&#xff0c;其中包括一些单模型及集成学习器。 保序回归、多项式回归、多输出回归、多输出K近邻回归、决策树回归、多输出决策树回归、AdaBoost回归、梯度提升决策树回归、人工神经网络、随…
阅读更多...
个人博客系统的总结

个人博客系统的总结

个人博客系统 1、项目背景&#xff1a; 个人博客系统的兴起和发展是与信息技术和互联网的迅猛发展密切相关的。随着互联网的普及和数字化时代的到来&#xff0c;越来越多的人开始使用互联网平台来表达自己的观点、分享知识和展示个人创作。个人博客系统作为一种在线的个人信息…
阅读更多...
C# CodeFormer Inpainting 人脸填充

C# CodeFormer Inpainting 人脸填充

效果 项目 代码 using Microsoft.ML.OnnxRuntime; using Microsoft.ML.OnnxRuntime.Tensors; using OpenCvSharp; using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging; using System.Windows.Forms;namespace CodeFormer_D…
阅读更多...
Qt系列-QSplitter使用笔记

Qt系列-QSplitter使用笔记

Qt拆分窗口可以使用QSplitter&#xff0c;也可以使用比较容易使用布局控件来完成&#xff0c;如果有需要对界面进行切割&#xff0c;可以使用QSplitter进行简易的控件拼接。 注意&#xff1a;QSplitter 继承自QFrame&#xff0c;而QFrame又继承自QWidget&#xff0c;这点很重要…
阅读更多...
数据结构----算法--五大基本算法

数据结构----算法--五大基本算法

数据结构----算法–五大基本算法 一.贪心算法 1.什么是贪心算法 在有多个选择的时候不考虑长远的情况&#xff0c;只考虑眼前的这一步&#xff0c;在眼前这一步选择当前的最好的方案 二.分治法 1.分治的概念 分治法&#xff1a;分而治之 将一个问题拆解成若干个解决方式…
阅读更多...
代码随想录第44天 | ● 1143.最长公共子序列 ● 1035.不相交的线 ● 53. 最大子序和 动态规划

代码随想录第44天 | ● 1143.最长公共子序列 ● 1035.不相交的线 ● 53. 最大子序和 动态规划

1143.最长公共子序列 //*** param {string} text1* param {string} text2* return {number}*/ var longestCommonSubsequence function(text1,text2) {let dp new Array(text2.length1)dp.fill(0)for(let i 1; i < text1.length; i) {// 这里pre相当于 dp[i - 1][j - 1]…
阅读更多...
这些 channel 用法你都用起来了吗？

这些 channel 用法你都用起来了吗？

channel 是什么&#xff1f; channel 是GO语言中一种特殊的类型&#xff0c;是连接并发goroutine的管道 channel 通道是可以让一个 goroutine 协程发送特定值到另一个 goroutine 协程的通信机制。 关于 channel 的原理&#xff0c;channel通道需要注意的地方&#xff0c;之前…
阅读更多...
Kotlin中布尔类型、字符类型、字符串类型和数组类型

Kotlin中布尔类型、字符类型、字符串类型和数组类型

在Kotlin中&#xff0c;布尔类型、字符类型、字符串类型和数组类型是常用的数据类型之一。下面我将对它们进行详细描述并提供示例代码。 布尔类型&#xff08;Boolean&#xff09;&#xff1a; 布尔类型表示逻辑值&#xff0c;只有两个可能的取值&#xff1a;true和false。在K…
阅读更多...
我的创作纪念日———C/C++之动态内存管理

我的创作纪念日———C/C++之动态内存管理

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 C语言刷题 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂。 目录 1.前言 2.为什么要有动态内存分配…
阅读更多...
浅谈工业企业能源管理软件的应用

浅谈工业企业能源管理软件的应用

安科瑞 崔丽洁 摘要&#xff1a;在工业企业中&#xff0c;能源是企业正常工作的根本保障&#xff0c;同时也是工业企业成本的主要构成部分。工业企业在相应的工作和使用的能源包括水、电、气等。在过去&#xff0c;企业对能源消耗的关注度比较低&#xff0c;更多的强调安全与保…
阅读更多...
二分查找算法(Python)

二分查找算法(Python)

目录 1、概念 2、思路 3、实现算法 1、概念 二分查找又称折半查找&#xff0c;它是一种效率较高的查找方法 原理&#xff1a;首先&#xff0c;假设表中元素是按升序排列&#xff0c;将表中间位置记录的关键字与查找关键字比较&#xff0c;如果两者相等&#xff0c;则查找成…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023