学习鸿蒙基础（9）

目录

一、鸿蒙国际化配置

二、鸿蒙常用组件介绍

三、鸿蒙像素单位介绍

 四、鸿蒙布局介绍

1、Row与Column线性布局

2、层叠布局-Stack

3、弹性布局

4、栅格布局

 5、网格布局

一、鸿蒙国际化配置

base目录下为默认的string。en_US对应美国的。zh_CN对应中国的。新增一个string以后。这3个文件夹下必须都有相同的key和value。

二、鸿蒙常用组件介绍
@Entry
@Component
//简单的常用组件集合
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text($r("app.string.PassWord_label"))
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .backgroundColor($r("app.color.Color_Blue"))
        Text("1111111111111111111111111").fontSize(35)
          .width(200).maxLines(1).textOverflow({
            overflow:TextOverflow.Ellipsis
        }).backgroundColor(Color.Yellow)

        Button(){
          Row(){
            LoadingProgress().width(50).height(50).color(Color.White)
            Text("登录").fontColor(Color.White)
          }.width(100)
        }

        TextInput({
          placeholder:"请输入"
        }).fontSize(18).type(InputType.Password)

        Divider()
        TextArea({
          placeholder:"多行文本"
        }).height(100).placeholderColor(Color.Brown)//多行文本
        Row(){
          CheckboxGroup({
            group:"list"
          }).onChange(v=>{
            console.log("11",JSON.stringify(v))
          })
          Row(){
            Checkbox({group:"list",name:"测试"})
            Text("测试")
          }
          Row(){
            Checkbox({group:"list",name:'跑步'})
            Text("跑步")
          }
        }


        Row(){
          Row(){
            Radio({
              group:'11',value:'语文'
            }).onChange(v=>{
             v&& console.log("语文")
            })
            Text("语文")
          }

          Row(){
            Radio({
              group:'11',value:'数学'
            }).onChange(v=>{
              v&& console.log("数学")
            })
            Text("数学")
          }
          Row(){
            Radio({
              group:'11',value:'英语'
            }).onChange(v=>{
              v&& console.log("英语")
            })
            Text("英语")
          }
        }

        // 开关
        Toggle({
          type:ToggleType.Switch,
          isOn:false
        }).colorBlend(Color.Red).borderColor(Color.Blue)
      // 开关
        Toggle({
          type:ToggleType.Checkbox,
          isOn:false
        }).colorBlend(Color.Red).borderColor(Color.Blue)

        // 开关
        Toggle({
          type:ToggleType.Button,
          isOn:true
        }){
          Text("测试")
        }
// ------------------------------------------------------------------------------------------
        // Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
        // Cover：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
        // Auto：自适应显示。
        // Fill：不保持宽高比进行放大缩小，使得图片充满显示边界。
        // ScaleDown：保持宽高比显示，图片缩小或者保持不变。
        // None：保持原有尺寸显示。
// --------------------------------------------------------------------------------------------
//         Image('images/2.jpg')
//           .width(300)
//           .height(300).border({ width:1 }).objectFit(ImageFit.Cover)
        // Image('images/2.jpg').width(300)
        // Image($r("app.media.icon")).width(300).interpolation(ImageInterpolation.High)
        Image($r("app.media.icon"))
          .border({width:1})
          .renderMode(ImageRenderMode.Original)
          .objectFit(ImageFit.None)
          .width(300)
          .interpolation(ImageInterpolation.High)
          .objectRepeat(ImageRepeat.XY)

      }
      .width('100%').height("100%")
    }
    .height('100%')
  }
}
三、鸿蒙像素单位介绍

鸿蒙为开发者提供4种像素单位，框架采用vp为基准数据单位。
px：屏幕物理像素单位。
vp：屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。在实际宽度为1440物理像素的屏幕上，1vp约等于3px。
fp：字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。
lpx：视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度 (通过designWidth配置) 的比值，designWidth默认值为720。当designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。

例如：
1.1vp =在160dpi中的1px，vp保证了不同分辨率下 视觉效果的等价性，比如一个图标，在不同分辨率下都是视觉效果是等价。
   应用场景:适合绝大多数场景。
2.1fp=在160dpi中的1px 乘以系统的缩放比例。
   应用场景:用来设定字体大小，且需要支持系统字体大小调整时使用。
3.designWidth =1440， 1lpx= 1px
  应用场景:对于UI图，部分需要高度还原的场景使用。

desingnWidth在这个文件夹里设置。

 四、鸿蒙布局介绍
1、Row与Column线性布局

线性布局是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上(水平方向和垂直方向)依次排列。线性布局的排列方向由所选容器组件决定
Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。

 布局容器:具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
布局子元素:布局容器内部的元素。
主轴:线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向。
交叉轴: 垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向。
间距:布局子元素的间距。

@Entry
@Component
struct PageDpi {
  @State message: string = 'Hello World'

  build() {
    // Row() {
    //   Text("rr").width(100).height(100).backgroundColor(Color.Red)
    //   Text("ff").width(100).height(100).backgroundColor(Color.Blue)
    //   Text("aa").width(100).height(100).backgroundColor(Color.Yellow)
    // }
    // // 主轴的方向————>水平
    // .justifyContent(FlexAlign.SpaceEvenly)
    // // 交叉轴的方向————>垂直
    // .alignItems(VerticalAlign.Top)
    // .height('100%').backgroundColor(Color.Pink).width("100%")

    // Column() {
    //   Text("rr").width(100).height(100).backgroundColor(Color.Red)
    //   Text("ff").width(100).height(100).backgroundColor(Color.Blue)
    //   Text("aa").width(100).height(100).backgroundColor(Color.Yellow)
    // }
    // // 主轴的方向————>垂直
    // .justifyContent(FlexAlign.SpaceEvenly)
    // // 交叉轴的方向————>水平
    // .alignItems(HorizontalAlign.Start)
    // .height('100%').backgroundColor(Color.Pink).width("100%")

    Row() {
      Column() {
        Row(){
          Button("退出")
          Blank()//撑满空白的组件
          Text("主页")
          Blank()
          Button("确定")
        }.width("100%").backgroundColor(Color.Gray)

        Row({space:50}) {
          Text("rr").layoutWeight(1).height(100).backgroundColor(Color.Red)
          Text("ff").layoutWeight(1).height(100).backgroundColor(Color.Blue)
          Text("aa").layoutWeight(1).height(100).backgroundColor(Color.Orange)
        }.justifyContent(FlexAlign.Start)

        Row({space:10}){
          Text("username")
          TextInput().layoutWeight(100).backgroundColor(Color.Orange)
        }.margin(10)
      }.width("100%").height("100%").justifyContent(FlexAlign.Start)
    }.height("100%")

  }
}
2、层叠布局-Stack

层叠布局(StackLayout)用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素(子组件)依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

@Entry
@Component
struct PageStack1 {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Stack() {
          Text("龙")
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .width(300)
            .height(300)
            .backgroundColor(Color.Orange)
          Text("兔")
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .width(100)
            .height(100)
            .backgroundColor(Color.Red)
        //.alignContent(Alignment.TopStart)设置显示的位置
        }.alignContent(Alignment.TopStart).height(350).backgroundColor(Color.Gray).width(350)
        
        Stack() {
          Text("兔")
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .width(100)
            .height(100)
            .backgroundColor(Color.Red).zIndex(2)//zIndex优先级
          Text("龙")
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .width(300)
            .height(300)
            .backgroundColor(Color.Orange)
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

层叠布局举例，回到顶部功能：

@Entry
@Component
struct PageStack2 {
  @State message: string = 'Hello World'
  @State list: string[] = ["子（鼠）", "丑（牛）", "寅（虎）", "卯（兔）"
    , "辰（龙）", "巳（蛇）", "午（马）", "未（羊）", "申（猴）", "酉（鸡）", "戌（狗）", "亥（猪）"]
  @State isShow: boolean = false

  scrolly:Scroller=new Scroller();

  build() {
    Row() {
      Column() {
        Stack() {
          List({scroller:this.scrolly}) {
            ForEach(this.list, item => {
              ListItem() {
                Text(item).fontSize(25)
              }.width("100%").height(200)
            })
          }.onScrollIndex((start, end) => {
            if(end>4){
              this.isShow=true
            }else{
              this.isShow=false
            }
          })

          if (this.isShow) {
            Text("回顶部")
              .backgroundColor(Color.Orange)
              .borderRadius(10)
              .width(100)
              .height(50)
              .fontSize(27)
              .textAlign(TextAlign.Center)
              .margin(18).onClick(()=>{
              this.scrolly.scrollToIndex(0)
            })
          }
        }.alignContent(Alignment.BottomEnd)
      }
      .width('100%')
    }
    .height('100%')
  }
}
3、弹性布局

弹性布局Flex 提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。弹性布局在开发场景中用例特别多，比如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等等。

@Entry
@Component
struct PageFlex {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {

        // Flex({
        //   direction:FlexDirection.Row,//方向
        //   justifyContent:FlexAlign.Center,//主轴
        //   // alignItems:ItemAlign.Baseline
        //   alignItems:ItemAlign.Center,
        // }){
        //   Text("111").width(100).height(100).backgroundColor(Color.Black).
        //   alignSelf(ItemAlign.Start)
        //   Text("222").width(100).height(200).backgroundColor(Color.Red)
        //   Text("333").width(100).height(100).backgroundColor(Color.Orange)
        //     .alignSelf(ItemAlign.End)
        // }.width(400).height(400).backgroundColor(Color.Gray)

      //   Flex({
      //     direction: FlexDirection.Row, //方向
      //     justifyContent: FlexAlign.Start, //主轴
      //     // alignItems:ItemAlign.Baseline
      //     alignItems: ItemAlign.Center,
      //     wrap: FlexWrap.Wrap
      //   }) {
      //     Text("111").width("50%").height(100).backgroundColor(Color.Black)
      //     Text("222").width("50%").height(100).backgroundColor(Color.Red)
      //     Text("333").width("50%").height(100).backgroundColor(Color.Orange)
      //   }.width(400).height(400).backgroundColor(Color.Gray)
      // }

      Flex({
        direction: FlexDirection.Row, //方向
        justifyContent: FlexAlign.Start, //主轴
        // alignItems:ItemAlign.Baseline
        alignItems: ItemAlign.Center
      }) {
        Text("111").width(100).height(100).backgroundColor(Color.Black)
          .flexGrow(1)//相当于权重
        Text("222").width(100).height(100).backgroundColor(Color.Red)
          .flexGrow(1)
        Text("333").width(100).height(100).backgroundColor(Color.Orange)
          .flexGrow(1)
      }.width(400).height(400).backgroundColor(Color.Gray)
    }

    .width('100%')
  }

  .height('100%')
}
}
4、栅格布局

栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。主要优势包括:
1.提供可循的规律: 栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。
2.统一的定位标注:栅格布局可以为系统提供一种统一的定位标注，保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度，提高工作效率。
3.灵活的间距调整方法:栅格布局可以提供一种灵活的间距调整方法满足特殊场景布局调整的需求。通过调整列与列之间和行与行之间的间距，可以控制整个页面的排版效果。
4.自动换行和自适应:栅格布局可以完成一对多布局的自动换行和自适应。当页面元素的数量超出了一行或一列的容量时，他们会自动换到下一行或下一列，并且在不同的设备上自适应排版，使得页简布局更加灵活和适应性强。
5.在GridRow栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，还可以启用xl，xxl两个断点，支持六种不同尺寸 (xs,sm,md,lg,xl,xxl)设备的布局设置。

断点名称                  设备描述
  xs:                      最小宽度类型设备
 sm:                     小宽度类型设备
md:                     中等宽度类型设备
  lg:                      大宽度类型设备
  xl:                       特大宽度类型设备
xxl:                       超大宽度类型设备

 breakpoints: [value: ['320vp'，'520vp'，'840vp'，"1080vp',   '2000vp']}

@Entry
@Component
struct PageGrid {
  @State message: string = 'Hello World'
  @State bgColors: Color[] = [Color.Gray, Color.Red, Color.Orange, Color.Black, Color.Blue, Color.Pink, Color.Brown, Color.Yellow]

  build() {
    Row() {
      // 默认12栅格
      // GridRow({
      //   breakpoints: { value: ["200vp", "300vp", "400vp", "500vp", "600vp"] },
      // }) {
      //   ForEach(this.bgColors, (item, index) => {
      //     GridCol({
      //       span: { xs:12, sm:6, md:4, lg:3, xl:2 }//一个孩子占几份
      //     }) {
      //       Row() {
      //             Text((index+1)+"").width("100%").height("50")
      //       }
      //     }.backgroundColor(item)
      //   })
      // }.width("100%")

      // 这个方法常用
      GridRow({
        direction:GridRowDirection.RowReverse,//反向排列
        gutter:10,
        columns: { xs:1, sm:2, md:4, lg:6, xxl:8 },
        breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] },
      }) {
        ForEach(this.bgColors, (item, index) => {
          GridCol() {
            Row() {
              Text(`${index+1}`).width("100%").height(50)
            }
          }.backgroundColor(item)
        })
      }.width("100%")

    }
    .height('100%')


  }
}
 5、网格布局

网格布局是由“行”和“列"“分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。
通过设置行列数量与尺寸占比可以确定网格布局的整体排列方式。Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。rowsTemplate和columnsTemplate属性值是一个由多个空格和数字+fr"间隔拼接的字符串，r的个数即网格布后的行或列数，fr前面的数值大小，用于计算该行或列在网格布局宽度上的占比，最终决定该行或列的宽度。

 

 Grid() {}
.rowsTemplate('lfr 1fr 1fr')
.columnsTemplate('lfr 2fr lfr')

@Entry
@Component
struct PageGrid1 {
  @State message: string = 'Hello World'

  @Styles
  style(){
    .backgroundColor(Color.Red)
    .width("33.33333%")
    // .height("50%")
  }

  build() {
    Row() {
      // Column() {
      //   Grid(){
      //     GridItem(){
      //       Text("111")
      //     }.style().columnStart(0).columnEnd(1)
      //     GridItem(){
      //       Text("222")
      //     }.style()
      //     GridItem(){
      //       Text("333")
      //     }.style().columnStart(2).columnEnd(3)
      //     GridItem(){
      //       Text("444")
      //     }.style()
      //     GridItem(){
      //       Text("555")
      //     }.style()
      //     GridItem(){
      //       Text("666")
      //     }.style()
      //   }.width('100%').height(200).columnsTemplate("1fr 1fr 1fr")
      //   .rowsTemplate("1fr 1fr").columnsGap(10).rowsGap(10)
      // }
      // .width('100%')
      //
      Column() {
        Grid() {
          GridItem() {
            Text("111")
          }.style()

          GridItem() {
            Text("222")
          }.style()

          GridItem() {
            Text("333")
          }.style()

          GridItem() {
            Text("444")
          }.style()

          GridItem() {
            Text("555")
          }.style()

          GridItem() {
            Text("666")
          }.style()
          GridItem() {
            Text("777")
          }.style()

          GridItem() {
            Text("888")
          }.style()

          GridItem() {
            Text("999")
          }.style()
        }
        .width('100%')
        .height(200)
        // .columnsTemplate("1fr 1fr 1fr")
        .rowsTemplate("1fr 1fr")
        .columnsGap(10)
        .rowsGap(10)
      }
      .width('100%')
    }
    .height('100%')
  }
}

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

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

相关文章

【c++】类和对象（五）赋值运算符重载

【c++】类和对象（五）赋值运算符重载

🔥个人主页：Quitecoder 🔥专栏：c笔记仓 朋友们大家好，本篇文章带大家认识赋值运算符重载，const成员，取地址及const取地址操作符重载等内容 目录 1.赋值运算符重载1.1运算符重载1.1.1特性&#…
阅读更多...
【Python基础教程】3 . 算法的时间复杂度

【Python基础教程】3 . 算法的时间复杂度

🎈个人主页：豌豆射手^ 🎉欢迎 👍点赞✍评论⭐收藏 🤗收录专栏：python基础教程 🤝希望本文对您有所裨益，如有不足之处，欢迎在评论区提出指正，让我们共同学习、…
阅读更多...
首个基于SSM-Transformer混合架构，开源商业大模型Jamba

首个基于SSM-Transformer混合架构，开源商业大模型Jamba

3月29日，知名AI研究实验室AI21在官网开源了，首个基于SSM-Transformer混合架构的商业大模型——Jamba。 目前，ChatGPT、Stable Difusion 、Lyria等产品使用的皆是Transformer架构，虽然在捕捉序列内长距离依赖关系、泛化能力、特征…
阅读更多...
基于SpringBoot的农产品直卖平台

基于SpringBoot的农产品直卖平台

采用技术 基于SpringBoot的农产品直卖平台的设计与实现~ 开发语言：Java 数据库：MySQL 技术：SpringBootMyBatis 工具：IDEA/Ecilpse、Navicat、Maven 页面展示效果 用户功能 农产品信息 确认下单 农产品订单 购物车 商家功…
阅读更多...
vue 组件基础

vue 组件基础

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构： 这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每…
阅读更多...
在遭受攻击时如何有效监测服务器流量峰值——实战指南

在遭受攻击时如何有效监测服务器流量峰值——实战指南

引言 在网络安全领域，分布式拒绝服务攻击（DDoS）是一种常见的针对服务器及网络资源的恶意行为，它通过短时间内发送大量无效请求，导致服务器不堪重负而无法正常服务合法用户。当服务器遭受攻击时，快速识别并…
阅读更多...
【重磅消息】HANA Cloud QRC1/2024发布了

【重磅消息】HANA Cloud QRC1/2024发布了

SAP重棒消息，HANA Cloud于3月25日正式发布2024第一个版本QRC1 。有时候，我爱把它跟PostgreSQL的小版本进行类比。因为PG基本上也是一个季度，发布一个版本，但那个是小版本。看起来有些类似。如果以年份开头，HANA Cloud也…
阅读更多...
ARP协议定义及工作原理

ARP协议定义及工作原理

ARP的定义 地址解析协议(Address Resolution Protocol，ARP)：ARP协议可以将IPv4地址(一种逻辑地址)转换为各种网络所需的硬件地址(一种物理地址)。换句话说，所谓的地址解析的目标就是发现逻辑地址与物理地址的映射关系。 ARP仅用于IPv4协议&a…
阅读更多...
원클릭으로 주류 전자상거래 플랫폼 상품 상세 데이터 수집 및 접속 시연 예제 (한국어판)

원클릭으로 주류 전자상거래 플랫폼 상품 상세 데이터 수집 및 접속 시연 예제 (한국어판)

클릭 한 번으로 전자상거래 플랫폼 데이터를 캡처하는 것은 일반적으로 웹 페이지에서 정보를 자동으로 추출 할 수있는 네트워크 파충류 기술과 관련됩니다.그러나 모든 형태의 데이터 수집은 해당 웹 사이트의 사용 약관 및 개인 정보 보호 정책 및 현지 법률 및 규정을 준수…
阅读更多...
手撕算法-跳跃游戏

手撕算法-跳跃游戏

描述 分析 如果某一个作为 起跳点 的格子可以跳跃的距离是 3，那么表示后面 3 个格子都可以作为 起跳点可以对每一个能作为 起跳点 的格子都尝试跳一次，把 能跳到最远的距离 不断更新如果可以一直跳到最后，就成功了 代码 class Solution {…
阅读更多...
图论- 最小生成树

图论- 最小生成树

一、最小生成树-prim算法 1.1 最小生成树概念 一幅图可以有很多不同的生成树，比如下面这幅图，红色的边就组成了两棵不同的生成树： 对于加权图，每条边都有权重（用最小生成树算法的现实场景中，图的边权重…
阅读更多...
【测试篇】测试眼里的 BUG

【测试篇】测试眼里的 BUG

文章目录 如何描述一个bug如何定义 bug 的级别BUG 的生命周期跟开发起争执怎么办（高频面试题） 如何描述一个bug 一个合格的bug描述应该包含以下几个部分： 发现问题的版本问题出现的环境错误重现的步骤预期行为的描述错误行为的描述其他&…
阅读更多...
Python-基础部署

Python-基础部署

机器没法直接读懂我们写的代码，需要解释解释器作为中间的翻译，把代码转换成字节码在执行 安装python解释器 Download Python | Python.org 安装代码编辑器 pycharm Thank you for downloading PyCharm! 创建一个项目，每个项目里的文件夹…
阅读更多...
全套医院手术麻醉系统源码 人工智能麻醉系统源码 医疗管理系统源码

全套医院手术麻醉系统源码 人工智能麻醉系统源码 医疗管理系统源码

全套医院手术麻醉系统源码 人工智能麻醉系统源码 医疗管理系统源码 手术麻醉临床信息系统有着完善的临床业务功能，能够涵盖整个围术期的工作，能够采集、汇总、存储、处理、展现所有的临床诊疗资料。通过该系统的实施，能够规范麻醉科的工作流…
阅读更多...
【Node.JS】koa

【Node.JS】koa

文章目录 概述koa和express对比koa下载安装使用1.创建koa项目文件目录2. 创建koa服务3. 添加路由 koa-router4. 数据库服务 mongodb5. 添加请求参数json处理 koa-bodyparser6. 用户接口举例7.引入koa一些常用插件8.用户登录验证 koa-jwt9.webpack生产打包 来源 概述 Koa 是一个…
阅读更多...
宝塔面板 -- 打包前端项目并部署提升访问速度

宝塔面板 -- 打包前端项目并部署提升访问速度

文章目录 前言一、打包前端项目二、添加PHP项目三、部署打包文件四、开通防火墙五、运行网站总结 前言 在前面写到的文章使用宝塔面板部署前端项目中，并没有将前端项目打包而是直接部署，导致网站访问速度非常慢，加载甚至要十几秒。因此&…
阅读更多...
Image-Adaptive YOLO for Object Detection in Adverse Weather Conditions(IA-YOLO)

Image-Adaptive YOLO for Object Detection in Adverse Weather Conditions(IA-YOLO)

1、总体概述 基于深度学习的目标检测在常规条件的数据集可以获得不错的结果，但是在环境、场景、天气、照度、雾霾等自然条件的综合干扰下，深度学习模型的适应程度变低，检测结果也随之下降，因此研究在复杂气象条件下的目标检测方法…
阅读更多...
shell的工作原理

shell的工作原理

本文旨在讲解shell的工作原理，希望读完本文，能使读者对shell的工作原理有一定的认识，废话不多说，开唠！ 在讲解shell的工作原理之前，我要首先给大家讲一下什么是操作系统，以Linux操作系统为例&am…
阅读更多...
第N6周：使用Word2vec实现文本分类

第N6周：使用Word2vec实现文本分类

import torch import torch.nn as nn import torchvision from torchvision import transforms,datasets import os,PIL,pathlib,warnings #忽略警告信息 warnings.filterwarnings("ignore") # win10系统 device torch.device("cuda"if torch.cuda.is_ava…
阅读更多...
[flink 实时流基础]源算子和转换算子

[flink 实时流基础]源算子和转换算子

文章目录 1. 源算子 Source1. 从集合读2. 从文件读取3. 从 socket 读取4. 从 kafka 读取5. 从数据生成器读取数据 2. 转换算子基本转换算子（map/ filter/ flatMap） 1. 源算子 Source Flink可以从各种来源获取数据，然后构建DataStream进行转换…
阅读更多...
最新文章

Copyright @ 2022~2023