HarmonyOs编写一个案例实现一个照片选择(阶段进阶 四种需求 逐一完善)

news2025/1/10 13:16:29

 需求1. .实现照片选择 并将选择好的照片展示出来

import { GoodItem } from '../06/modules';

@Entry
@Component
struct PhotoPage {
  @State message: string = '实现一个相册';
  @State List: GoodItem[] = [{

    goods_name: 'dsfjlsjkfsf',
    goods_price: 100,
    goods_img: 'https://img1.baidu.com/it/u=1535232938,2370569369&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
    goods_count: 1,
    id: 1

  },
    {

      goods_name: 'dfhlsdjflkdsjklfs 加速度的佛教山東i附件',
      goods_price: 200,
      goods_img: 'https://img1.baidu.com/it/u=2603934083,3021636721&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
      goods_count: 2,
      id: 2

    },
    {

      goods_name: '收到回复技术大会哦恶化日发方大化工iu而韩国佛热',
      goods_price: 300,
      goods_img: 'https://img0.baidu.com/it/u=4289818793,3552718550&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
      goods_count: 3,
      id: 3

    }
    , {

      goods_name: '的時間佛薩飛機埃里克森放假哦i二fore多氟多化工i額方法過後i額外人',
      goods_price: 400,
      goods_img: 'https://img0.baidu.com/it/u=2080725050,2021436341&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=800',
      goods_count: 4,
      id: 4

    }
    , {

      goods_name: '时间佛ID分机构IE',
      goods_price: 500,
      goods_img: 'https://img1.baidu.com/it/u=4202924242,2178453218&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
      goods_count: 5,
      id: 5

    }
    , {

      goods_name: '司法鉴定哦is叫哦私人',
      goods_price: 600,
      goods_img: 'https://10wallpaper.com/wallpaper/1680x1050/1405/Lavender_mountain_river-Landscape_HD_Wallpaper_1680x1050.jpg',
      goods_count: 6,
      id: 6

    }
  ]
  @State isShowPhotoCom: boolean = false
  @State maxSelectNum: number = 4
  @State showSelectImgs: GoodItem[] = []

  build() {
    Column() {
      Button('选择图片')
        .onClick(() => {
          this.isShowPhotoCom = true
        })
      Grid() {
        ForEach(this.showSelectImgs, (item: GoodItem, index) => {
          GridItem() {
            Image(item.goods_img)
              .aspectRatio(1)
          }

        })
      }
      .columnsTemplate('1fr 1fr')
      .columnsGap(4)
      .rowsGap(4)

      if (this.isShowPhotoCom) {
        photoCom({
          List: this.List,
          isShowPhotoCom: this.isShowPhotoCom,
          maxSelectNum: this.maxSelectNum,
          showSelectImgs: this.showSelectImgs

        })
      }
    }
    .height('100%')
    .width('100%')
  }
}


@Component
struct photoCom {
  @Prop List: GoodItem[] = []
  @Link isShowPhotoCom: boolean
  @State selectList: GoodItem[] = []
  @Prop maxSelectNum: number
  @Link showSelectImgs: GoodItem[]

  // 选择图片逻辑
  selectFn(item: GoodItem) {

    let Index = this.selectList.findIndex(obj => obj.id == item.id)
    console.log(JSON.stringify(Index))
    if (Index > -1) {
      this.selectList.splice(Index, 1)

    } else {
      this.selectList.push(item)
    }
  }

  build() {
    Column() {
      Grid() {
        ForEach(this.List, (item: GoodItem, index) => {
          GridItem() {
            Stack() {
              Image(item.goods_img)
                .aspectRatio(1)


              if (this.selectList.some(obj => obj.id == item.id)) {
                Image($r('app.media.select'))
                  .width(60)
                  .height(60)
                  .fillColor(Color.Red)
              }
            }
            .onClick(() => {
              this.selectFn(item)
            })

          }
        })
      }
      .columnsTemplate('1fr 1fr')
      .layoutWeight(1)

      // Text(`${}/${}`)

      Row() {
        Button('取消').onClick(() => {
          this.isShowPhotoCom = false
        })
        Text(`已选${this.selectList.length}张/最多选择${this.maxSelectNum}张`)

        Button('确认')
          .onClick(() => {
            this.showSelectImgs = this.selectList
            this.isShowPhotoCom = false

          })
      }
      .width('100%')
      .height(60)

      .justifyContent(FlexAlign.SpaceAround)
    }
    .position({ x: 0, y: 0 })
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
    .justifyContent(FlexAlign.SpaceBetween)

  }
}

这个案例用到了父子传参@Prop @Link   @State  各种样式交互 有兴趣可敲着玩玩~

我们看下效果

点击按钮

出现这个页面

然后执行选中逻辑

然后点击确认关闭弹窗

 需求2. 点击图片实现预览效果(CustomDilog)

import { GoodItem } from '../06/modules';

@Entry
@Component
struct PhotoPage {
  @State message: string = '实现一个相册';
  @State List: GoodItem[] = [{

    goods_name: 'dsfjlsjkfsf',
    goods_price: 100,
    goods_img: 'https://img1.baidu.com/it/u=1535232938,2370569369&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
    goods_count: 1,
    id: 1

  },
    {

      goods_name: 'dfhlsdjflkdsjklfs 加速度的佛教山東i附件',
      goods_price: 200,
      goods_img: 'https://img1.baidu.com/it/u=2603934083,3021636721&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
      goods_count: 2,
      id: 2

    },
    {

      goods_name: '收到回复技术大会哦恶化日发方大化工iu而韩国佛热',
      goods_price: 300,
      goods_img: 'https://img0.baidu.com/it/u=4289818793,3552718550&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
      goods_count: 3,
      id: 3

    }
    , {

      goods_name: '的時間佛薩飛機埃里克森放假哦i二fore多氟多化工i額方法過後i額外人',
      goods_price: 400,
      goods_img: 'https://img0.baidu.com/it/u=2080725050,2021436341&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=800',
      goods_count: 4,
      id: 4

    }
    , {

      goods_name: '时间佛ID分机构IE',
      goods_price: 500,
      goods_img: 'https://img1.baidu.com/it/u=4202924242,2178453218&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
      goods_count: 5,
      id: 5

    }
    , {

      goods_name: '司法鉴定哦is叫哦私人',
      goods_price: 600,
      goods_img: 'https://10wallpaper.com/wallpaper/1680x1050/1405/Lavender_mountain_river-Landscape_HD_Wallpaper_1680x1050.jpg',
      goods_count: 6,
      id: 6

    }
  ]
  @State isShowPhotoCom: boolean = false
  @State maxSelectNum: number = 4
  @State showSelectImgs: GoodItem[] = []
  @State selectImage: ResourceStr | string = ''
  previw: CustomDialogController = new CustomDialogController({
    builder: PreviewDilog({ url: this.selectImage }),
    customStyle: true


  })

  build() {
    Column() {
      Button('选择图片')
        .onClick(() => {
          this.isShowPhotoCom = true
        })
      Grid() {
        ForEach(this.showSelectImgs, (item: GoodItem, index) => {
          GridItem() {
            Image(item.goods_img)
              .aspectRatio(1)
              .onClick(() => {
                this.selectImage = item.goods_img
                this.previw.open()
              })
          }

        })
      }
      .columnsTemplate('1fr 1fr')
      .columnsGap(4)
      .rowsGap(4)

      if (this.isShowPhotoCom) {
        photoCom({
          List: this.List,
          isShowPhotoCom: this.isShowPhotoCom,
          maxSelectNum: this.maxSelectNum,
          showSelectImgs: this.showSelectImgs

        })
      }
    }
    .height('100%')
    .width('100%')
  }
}


@Component
struct photoCom {
  @Prop List: GoodItem[] = []
  @Link isShowPhotoCom: boolean
  @State selectList: GoodItem[] = []
  @Prop maxSelectNum: number
  @Link showSelectImgs: GoodItem[]

  // 选择图片逻辑
  selectFn(item: GoodItem) {

    let Index = this.selectList.findIndex(obj => obj.id == item.id)
    console.log(JSON.stringify(Index))
    if (Index > -1) {
      this.selectList.splice(Index, 1)

    } else {
      this.selectList.push(item)
    }
  }

  build() {
    Column() {
      Grid() {
        ForEach(this.List, (item: GoodItem, index) => {
          GridItem() {
            Stack() {
              Image(item.goods_img)
                .aspectRatio(1)


              if (this.selectList.some(obj => obj.id == item.id)) {
                Image($r('app.media.select'))
                  .width(60)
                  .height(60)
                  .fillColor(Color.Red)
              }
            }
            .onClick(() => {
              this.selectFn(item)
            })

          }
        })
      }
      .columnsTemplate('1fr 1fr')
      .layoutWeight(1)

      // Text(`${}/${}`)

      Row() {
        Button('取消').onClick(() => {
          this.isShowPhotoCom = false
        })
        Text(`已选${this.selectList.length}张/最多选择${this.maxSelectNum}张`)

        Button('确认')
          .onClick(() => {
            this.showSelectImgs = this.selectList
            this.isShowPhotoCom = false

          })
      }
      .width('100%')
      .height(60)

      .justifyContent(FlexAlign.SpaceAround)
    }
    .position({ x: 0, y: 0 })
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
    .justifyContent(FlexAlign.SpaceBetween)

  }
}


@CustomDialog
struct PreviewDilog {
  controller: CustomDialogController = new CustomDialogController({ builder: CustomDialogController })
  url: ResourceStr | string = ''

  build() {
    Column() {
      Image(this.url)
        .width('100%')

    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Black)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.controller.close()
    })

  }
}

圈下重点代码部分

子组件的

 父组件的

需求3.HarmonyOs半模态bindsheet编写一个案例实现一个照片选择

import { GoodItem } from '../06/modules';
 
@Entry
@Component
struct PhotoCasePage {
  @State message: string = '实现一个相册';
  @State List: GoodItem[] = [{
 
    goods_name: 'dsfjlsjkfsf',
    goods_price: 100,
    goods_img: 'https://img1.baidu.com/it/u=1535232938,2370569369&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
    goods_count: 1,
    id: 1
 
  },
    {
 
      goods_name: 'dfhlsdjflkdsjklfs 加速度的佛教山東i附件',
      goods_price: 200,
      goods_img: 'https://img1.baidu.com/it/u=2603934083,3021636721&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
      goods_count: 2,
      id: 2
 
    },
    {
 
      goods_name: '收到回复技术大会哦恶化日发方大化工iu而韩国佛热',
      goods_price: 300,
      goods_img: 'https://img0.baidu.com/it/u=4289818793,3552718550&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
      goods_count: 3,
      id: 3
 
    }
    , {
 
      goods_name: '的時間佛薩飛機埃里克森放假哦i二fore多氟多化工i額方法過後i額外人',
      goods_price: 400,
      goods_img: 'https://img0.baidu.com/it/u=2080725050,2021436341&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=800',
      goods_count: 4,
      id: 4
 
    }
    , {
 
      goods_name: '时间佛ID分机构IE',
      goods_price: 500,
      goods_img: 'https://img1.baidu.com/it/u=4202924242,2178453218&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
      goods_count: 5,
      id: 5
 
    }
    , {
 
      goods_name: '司法鉴定哦is叫哦私人',
      goods_price: 600,
      goods_img: 'https://10wallpaper.com/wallpaper/1680x1050/1405/Lavender_mountain_river-Landscape_HD_Wallpaper_1680x1050.jpg',
      goods_count: 6,
      id: 6
 
    }
  ]
  @State isShowPhotoCom: boolean = false
  @State maxSelectNum: number = 4
  @State showSelectImgs: GoodItem[] = []
  @State selectImage: ResourceStr | string = ''
  previw: CustomDialogController = new CustomDialogController({
    builder: PreviewDilog({ url: this.selectImage }),
    customStyle: true
 
 
  })
 
  @Builder
  sheetBuilder() {
    Column() {
      photoCom({
        List: this.List,
        isShowPhotoCom: this.isShowPhotoCom,
        maxSelectNum: this.maxSelectNum,
        showSelectImgs: this.showSelectImgs
 
      })
 
    }
  }
 
  build() {
    Column() {
      Button('选择图片')
        .onClick(() => {
          this.isShowPhotoCom = true
        })
      Grid() {
        ForEach(this.showSelectImgs, (item: GoodItem, index) => {
          GridItem() {
            Image(item.goods_img)
              .aspectRatio(1)
              .onClick(() => {
                this.selectImage = item.goods_img
                this.previw.open()
              })
          }
 
        })
      }
      .columnsTemplate('1fr 1fr')
      .columnsGap(4)
      .rowsGap(4)
 
    }
    .height('100%')
    .width('100%')
    .bindSheet(this.isShowPhotoCom, this.sheetBuilder, {
      showClose: false
    })
  }
}
 
// 选择图片组件
@Component
struct photoCom {
  @Prop List: GoodItem[] = []
  @Link isShowPhotoCom: boolean
  @State selectList: GoodItem[] = []
  @Prop maxSelectNum: number
  @Link showSelectImgs: GoodItem[]
 
  // 选择图片逻辑
  selectFn(item: GoodItem) {
 
    let Index = this.selectList.findIndex(obj => obj.id == item.id)
    console.log(JSON.stringify(Index))
    if (Index > -1) {
      this.selectList.splice(Index, 1)
 
    } else {
      this.selectList.push(item)
    }
  }
 
  build() {
    Column() {
      Grid() {
        ForEach(this.List, (item: GoodItem, index) => {
          GridItem() {
            Stack() {
              Image(item.goods_img)
                .aspectRatio(1)
 
 
              if (this.selectList.some(obj => obj.id == item.id)) {
                Image($r('app.media.select'))
                  .width(60)
                  .height(60)
                  .fillColor(Color.Red)
              }
            }
            .onClick(() => {
              this.selectFn(item)
            })
 
          }
        })
      }
      .columnsTemplate('1fr 1fr')
      .layoutWeight(1)
 
      // Text(`${}/${}`)
 
      Row() {
        Button('取消').onClick(() => {
          this.isShowPhotoCom = false
        })
        Text(`已选${this.selectList.length}张/最多选择${this.maxSelectNum}张`)
 
        Button('确认')
          .onClick(() => {
            this.showSelectImgs = this.selectList
            this.isShowPhotoCom = false
 
          })
      }
      .width('100%')
      .height(60)
 
      .justifyContent(FlexAlign.SpaceAround)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
    .justifyContent(FlexAlign.SpaceBetween)
 
  }
}
 
// 查看图片的组件
@CustomDialog
struct PreviewDilog {
  controller: CustomDialogController = new CustomDialogController({ builder: CustomDialogController })
  url: ResourceStr | string = ''
 
  build() {
    Column() {
      Image(this.url)
        .width('100%')
 
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Black)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.controller.close()
    })
 
  }
}

与上一篇的不同之处就在于 这篇代码使用了半模态弹层  就是点击选择图片之后  弹窗是从底部弹起的 类似于ios那种效果

重点代码截图

需求4. HarmonyOs半模态bindsheet编写一个案例实现一个照片选择并可swiper滑动 并实现点那张展开就是哪张

import { GoodItem } from '../06/modules';
 
@Entry
@Component
struct PhotoCasePage {
  @State message: string = '实现一个半模态相册';
  @State List: GoodItem[] = [{
 
    goods_name: 'dsfjlsjkfsf',
    goods_price: 100,
    goods_img: 'https://img1.baidu.com/it/u=1535232938,2370569369&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
    goods_count: 1,
    id: 1
 
  },
    {
 
      goods_name: 'dfhlsdjflkdsjklfs 加速度的佛教山東i附件',
      goods_price: 200,
      goods_img: 'https://img1.baidu.com/it/u=2603934083,3021636721&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
      goods_count: 2,
      id: 2
 
    },
    {
 
      goods_name: '收到回复技术大会哦恶化日发方大化工iu而韩国佛热',
      goods_price: 300,
      goods_img: 'https://img0.baidu.com/it/u=4289818793,3552718550&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
      goods_count: 3,
      id: 3
 
    }
    , {
 
      goods_name: '的時間佛薩飛機埃里克森放假哦i二fore多氟多化工i額方法過後i額外人',
      goods_price: 400,
      goods_img: 'https://img0.baidu.com/it/u=2080725050,2021436341&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=800',
      goods_count: 4,
      id: 4
 
    }
    , {
 
      goods_name: '时间佛ID分机构IE',
      goods_price: 500,
      goods_img: 'https://img1.baidu.com/it/u=4202924242,2178453218&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
      goods_count: 5,
      id: 5
 
    }
    , {
 
      goods_name: '司法鉴定哦is叫哦私人',
      goods_price: 600,
      goods_img: 'https://10wallpaper.com/wallpaper/1680x1050/1405/Lavender_mountain_river-Landscape_HD_Wallpaper_1680x1050.jpg',
      goods_count: 6,
      id: 6
 
    }
  ]
  @State isShowPhotoCom: boolean = false
  @State maxSelectNum: number = 4
  @State showSelectImgs: GoodItem[] = []
  @State selectImage: ResourceStr | string = ''
  @State setlectIndex: number = 0
  previw: CustomDialogController = new CustomDialogController({
    builder: PreviewDilog({ url: this.showSelectImgs, setlectIndex: this.setlectIndex, }),
    customStyle: true
 
 
  })
 
  @Builder
  sheetBuilder() {
    Column() {
 
 
      photoCom({
        List: this.List,
        isShowPhotoCom: this.isShowPhotoCom,
        maxSelectNum: this.maxSelectNum,
        showSelectImgs: this.showSelectImgs
 
      })
 
 
    }
  }
 
  build() {
    Column() {
      Button('选择图片')
        .onClick(() => {
          this.isShowPhotoCom = true
        })
      Grid() {
        ForEach(this.showSelectImgs, (item: GoodItem, index: number) => {
          GridItem() {
            Image(item.goods_img)
              .aspectRatio(1)
              .onClick(() => {
                this.setlectIndex = index
                this.previw.open()
              })
          }
 
        })
      }
      .columnsTemplate('1fr 1fr')
      .columnsGap(4)
      .rowsGap(4)
 
    }
    .height('100%')
    .width('100%')
    .bindSheet($$this.isShowPhotoCom, this.sheetBuilder, {
      showClose: false
    })
  }
}
 
// 选择图片组件
@Component
struct photoCom {
  @Prop List: GoodItem[] = []
  @Link isShowPhotoCom: boolean
  @State selectList: GoodItem[] = []
  @Prop maxSelectNum: number
  @Link showSelectImgs: GoodItem[]
 
  // 选择图片逻辑
  selectFn(item: GoodItem) {
 
    let Index = this.selectList.findIndex(obj => obj.id == item.id)
    console.log(JSON.stringify(Index))
    if (Index > -1) {
      this.selectList.splice(Index, 1)
 
    } else {
      this.selectList.push(item)
    }
  }
 
  build() {
    Column() {
      Grid() {
        ForEach(this.List, (item: GoodItem, index) => {
          GridItem() {
            Stack() {
              Image(item.goods_img)
                .aspectRatio(1)
 
 
              if (this.selectList.some(obj => obj.id == item.id)) {
                Image($r('app.media.select'))
                  .width(60)
                  .height(60)
                  .fillColor(Color.Red)
              }
            }
            .onClick(() => {
              this.selectFn(item)
            })
 
          }
        })
      }
      .columnsTemplate('1fr 1fr')
      .layoutWeight(1)
 
      // Text(`${}/${}`)
 
      Row() {
        Button('取消').onClick(() => {
          this.isShowPhotoCom = false
        })
        Text(`已选${this.selectList.length}张/最多选择${this.maxSelectNum}张`)
 
        Button('确认')
          .onClick(() => {
            this.showSelectImgs = this.selectList
            this.isShowPhotoCom = false
 
          })
      }
      .width('100%')
      .height(60)
 
      .justifyContent(FlexAlign.SpaceAround)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
    .justifyContent(FlexAlign.SpaceBetween)
 
  }
}
 
// 查看图片的组件
@CustomDialog
struct PreviewDilog {
  controller: CustomDialogController = new CustomDialogController({ builder: CustomDialogController })
  url: GoodItem[] = []
  @Link setlectIndex: number
 
  build() {
    Column() {
      Swiper() {
        ForEach(this.url, (item: GoodItem) => {
 
          Image(item.goods_img)
            .width('100%')
 
        })
      }.loop(true)
      .index($$this.setlectIndex)
 
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Black)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.controller.close()
    })
 
  }
}

重点代码部分

注:传值发生了改变  在之前传值是传一张  然后再半模态显示出来  现在是传选中的那个数组  然后记录下点击的那个index   里边用swiper组件就可以了

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

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

相关文章

Springboot3 配置sql打印到控制台

一、pom.xml <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-log4j2</artifactId><version>3.1.2</version></dependency> 二、application.yml com.lingyang.system # log4j2配…

《密码编码学与网络安全原理与实践》第十一章、第十二章、第十三章 数据完整性算法

数据完整性算法 概念消息加密实现认证对称加密提供认证公钥加密提供认证 Hash函数要求满足特点哈希函数安全性要求密码分析基于分组密码链接的Hash函数生日攻击&#xff1a; MD5SHA-256算法步骤SHA-3散列函数实现消息认证散列函数实现消息认证方法一散列函数实现消息认证方法二…

HttpClient在ASP.NET Core中的最佳实践:实现高效的HTTP请求

引言 在现代Web开发中&#xff0c;HTTP请求的高效性和可靠性对于应用的整体性能至关重要。ASP.NET Core提供了HttpClient类&#xff0c;它是一个强大且灵活的工具&#xff0c;可以用来发送HTTP请求并处理响应。然而&#xff0c;如何在ASP.NET Core中实现高效的HTTP请求&#x…

Java基础篇/IO流的介绍和了解

一、java的IO是基于流&#xff08;stream&#xff09;概念的&#xff0c;什么是流: 在Java中&#xff0c;流&#xff08;Stream&#xff09;是一种抽象的数据传输方式&#xff0c;它代表了数据的序列。流可以用于表示来自各种源的数据输入&#xff0c;以及向各种目的地发送数据…

商品信息采集技巧大公开:五种高效采集方法分享

摘要&#xff1a; 面对日益激烈的电商竞争&#xff0c;高效采集淘宝商品信息成为商家致胜的关键。本文将揭秘2024年最实用的五种淘宝商品信息采集技巧&#xff0c;助您在大数据时代抢占先机&#xff0c;提升市场竞争力。 一、为何淘宝商品信息采集如此重要&#xff1f; 在电…

新闻稿件管理系统

TOC springboot109新闻稿件管理系统 系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理新…

社区团购独立源码最新版,包含小程序前端、管理后台、数据库

介绍&#xff1a; 社区拼团&#xff0c;社区电商等形式的新型社交电商平台源码。独创双模式&#xff1a;以团长为中心&#xff0c;以小区为中心&#xff0c;首款支持社区团购加社群团购模式的团购小程序&#xff0c;线上线下双模式&#xff0c;后台自由配置配送方式。 更新说…

五分钟学会辨别葡萄酒的优劣

不论是买什么商品&#xff0c;人们都十分关心品质。比如&#xff0c;要买葡萄酒&#xff0c;你首先要确认的就是这款酒好不好。那么&#xff0c;如何才能做到快速识别葡萄酒的好坏呢&#xff1f; 一、观察外观 首先&#xff0c;观察干红葡萄酒的外观是初步判断其品质的第一步。…

IP基础(通俗易懂版)

IP 位于 TCP/IP 参考模型的第三层&#xff0c;也就是⽹络层。 ⽹络层的主要作⽤是&#xff1a;实现主机与主机之间的通信&#xff0c;也叫点对点通信。 1 、网络层&#xff08; IP) 与数据链路层 (MAC) 有什么关系呢&#xff1f; MAC 的作用&#xff1a; 实现【直连】的两个…

【乐吾乐大屏可视化组态编辑器】条件修改属性

条件修改属性 在线使用&#xff1a;https://v.le5le.com/ 如图所示&#xff0c;右边文本图元数值一直在发生变化&#xff0c;当数值大于等于600、或者小于等于200的时候&#xff0c;左侧正方形图元背景颜色变成红色&#xff0c;产生告警效果&#xff1b;当数值在200到600之间…

海康相机二次开发学习笔记1-环境配置

因为最近可以用一段时间海康加密狗,Visionpro二次开发暂时停更一段时间,开始记录一下海康相机二次开发的学习笔记. 环境配置 1. 创建项目 打开Visual Studio,新建.NetFramework项目,选择WindowsForms,点击下一步,选择项目名称,点击下一步,点击确定打开项目属性,点击生成选项…

系统编程-认识Linux及常用指令

1 认识Linux及常用指令 主要学习函数 一、认识linux Linux 是由 UNIX 发展而来的&#xff0c;UNIX 是由程序员设计&#xff0c;它的主要服务对象也是程序员。Linux 继承了 UNIX 的设计目标。 1、linux系统的主要特性 多用户多任务开源 免费 大家都可以用庞大的社区群支持多…

Linux os下制作deb包

在 linux os下制作 .deb 包涉及以下几个主要步骤。假设已经有一个应用程序或软件项目&#xff0c;并且希望将它打包为一个 .deb 包。 1. 准备源代码和构建环境 首先&#xff0c;需要准备好应用程序的源代码&#xff0c;并确保它可以在开发环境中成功编译和运行。 2. 创建目录…

Istio学习整理

一、Service Mesh Service Mesh 的中文译为 “服务网格” &#xff0c;是一个用于处理服务和服务之间通信的基础设施层&#xff0c;它负责为构建复杂的云原生应用传递可靠的网络请求&#xff0c;并为服务通信实现了微服务所需的基本组件功能&#xff0c;例如服务发现、负载均衡…

【嵌入式】指针与整数的桥梁、跨平台编程的黄金钥匙:揭开 uintptr_t 和 intptr_t 的神秘面纱

目录 一、intptr_t 和 uintptr_t 详解二、适用场景三、示例四、写在最后 一、intptr_t 和 uintptr_t 详解 intptr_t 和 uintptr_t&#xff0c;这两个数据类型是ISO C99定义的。主要用于处理指针和整数之间的转换。它们在需要将指针转换为整数进行操作&#xff0c;或者将整数转…

spring boot入门案例

一、案例需求 请求Controller中的方法&#xff0c;并将返回值响应到页面 二、代码实现 1.依赖管理——pom.xml文件 &#xff08;1&#xff09;引入 &#xff08;2&#xff09;引入依赖集合 &#xff08;3&#xff09;引入插件&#xff1a;为了方便运行&#xff0c;将project…

[Meachines] [Medium] Haircut Curl命令注入+TRP00F自动化权限提升+Screen4.5.0权限提升

信息收集 IP AddressOpening Ports10.10.10.24TCP:22,80 $ nmap -p- 10.10.10.24 --min-rate 1000 -sC -sV ORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 7.2p2 Ubuntu 4ubuntu2.2 (Ubuntu Linux; protocol 2.0) | ssh-hostkey: | 2048 e9:75:c1:e4:b3:63…

驱动开发系列10 - Linux Graphics 图形栈介绍

目录 一:Linux 图形栈总体结构 1. 整体图形栈: 2. 现代3D图形栈: 二:Xorg 介绍 Xorg 概述: Xorg的发展历史: Xorg绘制原理: Xorg的缺点: 三:Wayland 介绍 一:Linux 图形栈总体结构 1. 整体图形栈: 应用程序->桌面环境->GUI框架->Display Client->Displ…

探索边缘计算与云计算之间的区别

IT管理员不需要在边缘和云之间进行选择&#xff0c;但需要了解每种技术的优缺点&#xff0c;以便最好地将它们融入到企业运营中。 许多组织使用云作为其整体IT平台的一部分。资源管理的灵活性和更高的整体利用率的承诺可以等同于节省成本。 此外&#xff0c;对许多人而言&…

聚焦巴黎奥运会 | AI技术如何成为赛场上的智能明星?

备受关注的2024年巴黎奥运会已圆满落幕&#xff01; 本届巴黎奥运会不仅是全球瞩目的体育盛事&#xff0c;更是展示中国科技创新实力的重要舞台。从精彩的赛事转播到精密的比赛设备&#xff0c;再到先进的场馆建设&#xff0c;中国的"黑科技"正伴随着中国运动员的矫健…