【鸿蒙开发基础学习】组件导航 (Navigation)

组件导航 (Navigation)

Navigation 是路由容器组件,一般作为首页的根容器,包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。Navigation 组件适用于模块内和跨模块的路由切换,一次开发,多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验,并提供多种标题栏样式来呈现更好的标题和内容联动效果。在不同尺寸的设备上,Navigation 组件能够自适应显示大小,自动切换分栏展示效果。

Navigation 组件主要包含导航页(NavBar)和子页(NavDestination)。导航页由标题栏(Titlebar,包含菜单栏 menu)、内容区(Navigation 子组件)和工具栏(Toolbar)组成,其中导航页可以通过 hideNavBar 属性进行隐藏,导航页不存在页面栈中,导航页和子页,以及子页之间可以通过路由操作进行切换。

设置页面显示模式

Navigation 组件通过 mode 属性设置页面的显示模式。

自适应模式
Navigation 组件默认为自适应模式,此时 mode 属性为 NavigationMode.Auto。自适应模式下,当页面宽度大于等于一定阈值

Navigation() { ... 
} 
.mode(NavigationMode.Auto) 

单页面模式
单页面布局示意图
将 mode 属性设置为 NavigationMode.Stack,Navigation 组件即可设置为单页面显示模式。

Navigation() { ... 
} 
.mode(NavigationMode.Stack) 


分栏模式
分栏布局示意图
将 mode 属性设置为 NavigationMode.Split,Navigation 组件即可设置为分栏显示模式。

@Entry 
@Component 
struct NavigationExample { @State TooTmp: ToolbarItem = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}@Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()private arr: number[] = [1, 2, 3]; @Builder PageMap(name: string) { if (name === "NavDestinationTitle1") { pageOneTmp() } else if (name === "NavDestinationTitle2") {pageTwoTmp() } else if (name === "NavDestinationTitle3") {pageThreeTmp() } } build() { Column() { Navigation(this.pageInfos) { TextInput({ placeholder: 'earch...' }) .width("90%") .height(40) .backgroundColor('#FFFFFF') List({ space: 12 }) { ForEach(this.arr, (item:string) => { ListItem() { Text("NavRouter" + item) .width("100%") .height(72) .backgroundColor('#FFFFFF') .borderRadius(24) .fontSize(16) .fontWeight(500) .textAlign(TextAlign.Center) .onClick(()=>{ this.pageInfos.pushPath({ name: "NavDestinationTitle" + item})}) } }, (item:string):string => item) } .width("90%") .margin({ top: 12 }) } .title("主标题") .mode(NavigationMode.Split) .navDestination(this.PageMap) .menus([ {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},{value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},{value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},{value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},{value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}]) .toolbarConfiguration([this.TooTmp, this.TooTmp, this.TooTmp])} .height('100%') .width('100%') .backgroundColor('#F1F3F5') } 
} // PageOne.typescript 
@Component 
export struct pageOneTmp { @Consume('pageInfos') pageInfos: NavPathStack;build() { NavDestination() { Column() { Text("NavDestinationContent1") }.width('100%').height('100%') }.title("NavDestinationTitle1") .onBackPressed(() => { const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))return true }) } 
} // PageTwo.typescript 
@Component 
export struct pageTwoTmp { @Consume('pageInfos') pageInfos: NavPathStack;build() { NavDestination() { Column() { Text("NavDestinationContent2") }.width('100%').height('100%') }.title("NavDestinationTitle2") .onBackPressed(() => { const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))return true }) } 
} // PageThree.typescript 
@Component 
export struct pageThreeTmp { @Consume('pageInfos') pageInfos: NavPathStack;build() { NavDestination() { Column() { Text("NavDestinationContent3") }.width('100%').height('100%') }.title("NavDestinationTitle3") .onBackPressed(() => { const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))return true }) } 
} 

设置标题栏模式

标题栏在界面顶部,用于呈现界面名称和操作入口,Navigation 组件通过 titleMode 属性设置标题栏模式。

Mini 模式
普通型标题栏,用于一级页面不需要突出标题的场景。
Mini 模式标题栏

Navigation() { ... 
} 
.titleMode(NavigationTitleMode.Mini) 

Full 模式
强调型标题栏,用于一级页面需要突出标题的场景。
Full 模式标题栏

Navigation() { ... 
} 
.titleMode(NavigationTitleMode.Full) 

设置菜单栏

菜单栏位于 Navigation 组件的右上角,开发者可以通过 menus 属性进行设置。menus 支持 Array和 CustomBuilder 两种参数类型。使用 Array类型时,竖屏最多支持显示 3 个图标,横屏最多支持显示 5 个图标,多余的图标会被放入自动生成的更多图标。

设置了 3 个图标的菜单栏

let TooTmp: NavigationMenuItem = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
Navigation() { ... 
} 
.menus([TooTmp, TooTmp, TooTmp]) 

图片也可以引用 resources 中的资源。

let TooTmp: NavigationMenuItem = {'value': "", 'icon': "resources/base/media/ic_public_highlights.svg", 'action': ()=> {}}
Navigation() { ... 
} 
.menus([TooTmp, TooTmp, TooTmp]) 

设置了 4 个图标的菜单栏

let TooTmp: NavigationMenuItem = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
Navigation() { ... 
} 
.menus([TooTmp, TooTmp, TooTmp, TooTmp]) 

设置工具栏

工具栏位于 Navigation 组件的底部,开发者可以通过 toolbarConfiguration 属性进行设置。
工具栏

let TooTmp: ToolbarItem = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
let TooBar: ToolbarItem[] = [TooTmp,TooTmp,TooTmp]
Navigation() { ... 
} 
.toolbarConfiguration(TooBar) 

路由操作

Navigation 路由相关的操作都是基于页面栈 NavPathStack 提供的方法进行,每个 Navigation 都需要创建并传入一个 NavPathStack 对象,用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。

从 API version 12 开始,页面栈允许被继承。开发者可以在派生类中自定义属性和方法,也可以重写父类的方法。派生类对象可以替代基类 NavPathStack 对象使用。具体示例代码参见:页面栈继承示例代码。

@Entry 
@Component 
struct Index { // 创建一个页面栈对象并传入 Navigation pageStack: NavPathStack = new NavPathStack()build() { Navigation(this.pageStack) { } .title('Main') } 
} 

页面跳转
NavPathStack 通过 Push 相关的接口去实现页面跳转的功能,主要分为以下三类:

  • 普通跳转,通过页面的 name 去跳转,并可以携带 param。
    this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })
    this.pageStack.pushPathByName("PageOne", "PageOne Param")
    
  • 带返回回调的跳转,跳转时添加 onPop 回调,能在页面出栈时获取返回信息,并进行处理。
    this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
    console.log('Pop page name is: ' popInfo.info.name + ', result: ' JSON.stringify(popInfo.result))
    }); 
    
  • 带错误码的跳转,跳转结束会触发异步回调,返回错误码信息。
    this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
    

.catch((error: BusinessError) => {
console.error(Push destination failed, error code = ${error.code}, error.message = ${error.message}.);
}).then(() => {
console.error(‘Push destination succeed.’);
});


**页面返回**
NavPathStack 通过 Pop 相关接口去实现页面返回功能。
- 返回到上一页 
```typescript
this.pageStack.pop() 
  • 返回到上一个 PageOne 页面
    this.pageStack.popToName("PageOne") 
    
  • 返回到索引为 1 的页面
    this.pageStack.popToIndex(1) 
    
  • 返回到根首页(清除栈中所有页面)
    this.pageStack.clear() 
    

页面替换
NavPathStack 通过 Replace 相关接口去实现页面替换功能。

  • 将栈顶页面替换为 PageOne
    this.pageStack.replacePath({ name: "PageOne", param: "PageOne Param" })
    this.pageStack.replacePathByName("PageOne", "PageOne Param")
    

页面删除
NavPathStack 通过 Remove 相关接口去实现删除页面栈中特定页面的功能。

  • 删除栈中 name 为 PageOne 的所有页面
    this.pageStack.removeByName("PageOne") 
    
  • 删除指定索引的页面
    this.pageStack.removeByIndexes([1,3,5]) 
    

参数获取
NavPathStack 通过 Get 相关接口去获取页面的一些参数。

  • 获取栈中所有页面 name 集合
    this.pageStack.getAllPathName() 
    
  • 获取索引为 1 的页面参数
    this.pageStack.getParamByIndex(1) 
    
  • 获取 PageOne 页面的参数
    this.pageStack.getParamByName("PageOne") 
    
  • 获取 PageOne 页面的索引集合
    this.pageStack.getIndexByName("PageOne") 
    

路由拦截
NavPathStack 提供了 setInterception 方法,用于设置 Navigation 页面跳转拦截回调。该方法需要传入一个 NavigationInterception 对象,该对象包含三个回调函数:

名称描述
willShow页面跳转前回调,允许操作栈,在当前跳转生效。
didShow页面跳转后回调,在该回调中操作栈会在下一次跳转生效。
modeChangeNavigation 单双栏显示状态发生变更时触发该回调。

说明:无论是哪个回调,在进入回调时页面栈都已经发生了变化。

开发者可以在 willShow 回调中通过修改路由栈来实现路由拦截重定向的能力。

this.pageStack.setInterception({ willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar",operation: NavigationOperation, animated: boolean) => {if (typeof to === "string") { console.log("target page is navigation home page.");return; } // 将跳转到 PageTwo 的路由重定向到 PageOne let target: NavDestinationContext = to as NavDestinationContext;if (target.pathInfo.name === 'PageTwo') { target.pathStack.pop(); target.pathStack.pushPathByName('PageOne', null);} } 
}) 

子页面

NavDestination 是 Navigation 子页面的根容器,用于承载子页面的一些特殊属性以及生命周期等。NavDestination 可以设置独立的标题栏和菜单栏等属性,使用方法与 Navigation 相同。NavDestination 也可以通过 mode 属性设置不同的显示类型,用于满足不同页面的诉求。

页面显示类型

标准类型
NavDestination 组件默认为标准类型,此时 mode 属性为 NavDestinationMode.STANDARD。标准类型的 NavDestination 的生命周期跟随其在 NavPathStack 页面栈中的位置变化而改变。

弹窗类型
NavDestination 设置 mode 为 NavDestinationMode.DIALOG 弹窗类型,此时整个 NavDestination 默认透明显示。弹窗类型的 NavDestination 显示和消失时不会影响下层标准类型的 NavDestination 的显示和生命周期,两者可以同时显示。

// Dialog NavDestination 
@Entry 
@Component struct Index { @Provide('NavPathStack') pageStack: NavPathStack = new NavPathStack()@Builder PagesMap(name: string) { if (name == 'DialogPage') { DialogPage() } } build() { Navigation(this.pageStack) { Button('Push DialogPage') .margin(20) .width('80%') .onClick(() => { this.pageStack.pushPathByName('DialogPage', '');}) } .mode(NavigationMode.Stack) .title('Main') .navDestination(this.PagesMap) } } @Component export struct DialogPage { @Consume('NavPathStack') pageStack: NavPathStack;build() { NavDestination() { Stack({ alignContent: Alignment.Center }) {Column() { Text("Dialog NavDestination") .fontSize(20) .margin({ bottom: 100 }) Button("Close").onClick(() => { this.pageStack.pop() }).width('30%') } .justifyContent(FlexAlign.Center) .backgroundColor(Color.White) .borderRadius(10) .height('30%') .width('80%') }.height("100%").width('100%') } .backgroundColor('rgba(0,0,0,0.5)') .hideTitleBar(true) .mode(NavDestinationMode.DIALOG) } } 

页面生命周期

Navigation 作为路由容器,其生命周期承载在 NavDestination 组件上,以组件事件的形式开放。

其生命周期大致可分为三类,自定义组件生命周期、通用组件生命周期和自有生命周期(其中 aboutToAppear 和 aboutToDisappear 是自定义组件的生命周期。如果 NavDestination 外层包含自定义组件时则存在;OnAppear 和 OnDisappear 是组件的通用生命周期,剩下的六个生命周期为 NavDestination 独有)。

生命周期时序如下图所示:

  • aboutToAppear:在创建自定义组件后,执行其 build()函数之前执行(NavDestination 创建之前),允许在该方法中改变状态变量,更改将在后续执行 build()函数中生效。
  • onWillAppear:NavDestination 创建后
  • onWillAppear:NavDestination 创建后,挂载到组件树之前执行,在该方法中更改状态变量会在当前帧显示生效。
  • onAppear:通用生命周期事件,NavDestination 组件挂载到组件树时执行。
  • onWillShow:NavDestination 组件布局显示之前执行,此时页面不可见(应用切换到前台不会触发)。
  • onShown:NavDestination 组件布局显示之后执行,此时页面已完成布局。
  • onWillHide:NavDestination 组件触发隐藏之前执行(应用切换到后台不会触发)。
  • onHidden:NavDestination 组件触发隐藏后执行(非栈顶页面 push 进栈,栈顶页面 pop 出栈或应用切换到后台)。
  • onWillDisappear:NavDestination 组件即将销毁之前执行,如果有转场动画,会在动画前触发(栈顶页面 pop 出栈)。
  • onDisappear:通用生命周期事件,NavDestination 组件从组件树上卸载销毁时执行。
  • aboutToDisappear:自定义组件析构销毁之前执行,不允许在该方法中改变状态变量。

页面监听和查询

为了方便组件跟页面解耦,在 NavDestination 子页面内部的自定义组件可以通过全局方法监听或查询到页面的一些状态信息。

页面信息查询
自定义组件提供 queryNavDestinationInfo 方法,可以在 NavDestination 内部查询到当前所属页面的信息,返回值为 NavDestinationInfo,若查询不到则返回 undefined。

import { uiObserver } from '@kit.ArkUI'; // NavDestination 内的自定义组件 
@Component 
struct MyComponent { navDesInfo: uiObserver.NavDestinationInfo | undefinedaboutToAppear(): void { this.navDesInfo = this.queryNavDestinationInfo();} build() { Column() { Text("所属页面 Name: " + this.navDesInfo?.name)}.width('100%').height('100%') } 
} 

页面状态监听
通过 @ohos.arkui.observer 提供的注册接口可以注册 NavDestination 生命周期变化的监听,使用方式如下:

uiObserver.on('navDestinationUpdate', (info) => {console.info('NavDestination state update', JSON.stringify(info));
}); 

也可以注册页面切换的状态回调,能在页面发生路由切换的时候拿到对应的页面信息 NavDestinationSwitchInfo,并且提供了 UIAbilityContext 和 UIContext 不同范围的监听:

// 在 UIAbility 中使用 
import { UIContext, uiObserver } from '@kit.ArkUI';// callBackFunc 是开发者定义的监听回调函数 
function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) {}
uiObserver.on('navDestinationSwitch', this.context, callBackFunc);// 可以通过窗口的 getUIContext()方法获取对应的 UIContent
uiContext: UIContext | null = null; 
uiObserver.on('navDestinationSwitch', this.uiContext, callBackFunc);

页面转场

Navigation 默认提供了页面切换的转场动画,通过页面栈操作时,会触发不同的转场效果(Dialog 类型的页面默认无转场动画),Navigation 也提供了关闭系统转场、自定义转场以及共享元素转场的能力。

关闭转场

全局关闭
Navigation 通过 NavPathStack 中提供的 disableAnimation 方法可以在当前 Navigation 中关闭或打开所有转场动画。

pageStack: NavPathStack = new NavPathStack()aboutToAppear(): void { this.pageStack.disableAnimation(true) 
} 

单次关闭
NavPathStack 中提供的 Push、Pop、Replace 等接口中可以设置 animated 参数,默认为 true 表示有转场动画,需要单次关闭转场动画可以置为 false,不影响下次转场动画。

pageStack: NavPathStack = new NavPathStack()this.pageStack.pushPath({ name: "PageOne" }, false)
this.pageStack.pop(false) 

自定义转场
Navigation 通过 customNavContentTransition 事件提供自定义转场动画的能力,通过如下三步可以定义一个自定义的转场动画。

  1. 构建一个自定义转场动画工具类 CustomNavigationUtils,通过一个 Map 管理各个页面自定义动画对象 CustomTransition,页面在创建的时候将自己的自定义转场动画对象注册进去,销毁的时候解注册;
  2. 实现一个转场协议对象 NavigationAnimatedTransition,其中 timeout 属性表示转场结束的超时时间,默认为 1000ms,tansition 属性为自定义的转场动画方法,开发者要在这里实现自己的转场动画逻辑,系统会在转场开始时调用该方法,onTransitionEnd 为转场结束时的回调。
  3. 调用 customNavContentTransition 方法,返回实现的转场协议对象,如果返回 undefined,则使用系统默认转场。

具体示例代码可以参考 Navigation 自定义转场示例。

共享元素转场
NavDestination 之间切换时可以通过 geometryTransition 实现共享元素转场。配置了共享元素转场的页面同时需要关闭系统默认的转场动画。

为需要实现共享元素转场的组件添加 geometryTransition 属性,id 参数必须在两个 NavDestination 之间保持一致。

// 起始页配置共享元素 id 
NavDestination() { 
Column() { ... Image($r('app.media.startIcon')) .geometryTransition('sharedId') .width(100) .height(100) 
} 
} 
.title('FromPage') // 目的页配置共享元素 id 
NavDestination() { 
Column() { ... Image($r('app.media.startIcon')) .geometryTransition('sharedId') .width(200) .height(200) 
} 
} 
.title('ToPage') 

将页面路由的操作,放到 animateTo 动画闭包中,配置对应的动画参数以及关闭系统默认的转场。

NavDestination() { 
Column() { Button('跳转目的页') .width('80%') .height(40) .margin(20) .onClick(() => { animateTo({ duration: 1000 }, () => { this.pageStack.pushPath({ name: 'ToPage' }, false)}) }) 
} 
} 
.title('FromPage') 

跨包动态路由

通过静态 import 页面再进行路由跳转的方式会造成不同模块之间的依赖耦合,以及首页加载时间长等问题。

动态路由设计的目的就是为了解决多个模块(HAR/HSP)之间可以复用相同的业务,各个业务模块之间解耦和路由功能扩展整合。

动态路由的优势:

  • 路由定义除了跳转的 URL 以外,可以丰富的配置扩展信息,如横竖屏默认模式,是否需要鉴权等等,做路由跳转时统一处理。
  • 给每个路由页面设置一个名字,按照名称进行跳转而不是文件路径。
  • 页面的加载可以使用动态 Import(按需加载),防止首个页面加载大量代码导致卡顿。

动态路由提供系统路由表和自定义路由表两种方式。

系统路由表
从 API version 12 开始,Navigation 支持使用系统路由表的方式进行动态路由。各业务模块(HSP/HAR)中需要独立配置 router_map.json 文件,在触发路由跳转时,应用只需要通过 NavPathStack 提供的路由方法,传入需要路由的页面配置名称,此时系统会自动完成路由模块的动态加载、页面组件构建,并完成路由跳转,从而实现了开发层面的模块解耦。其主要步骤如下:

  1. 在跳转目标模块的配置文件 module.json5 添加路由表配置:
{ "module" : { "routerMap": "$profile:route_map" } 
} 
  1. 添加完路由配置文件地址后,需要在工程 resources/base/profile 中创建 route_map.json 文件。添加如下配置信息:
{ "routerMap": [ { "name": "PageOne", "pageSourceFile": "src/main/typescript/pages/PageOne.typescript","buildFunction": "PageOneBuilder", "data": { "description" : "this is PageOne" } } ] 
} 

配置说明如下:

配置项说明
name跳转页面名称。
pageSourceFile跳转目标页在包内的路径,相对 src 目录的相对路径。
buildFunction跳转目标页的入口函数名称,必须以 @Builder 修饰。
data应用自定义字段。可以通过配置项读取接口 getConfigInRouteMap 获取。
  1. 在跳转目标页面中,需要配置入口 Builder 函数,函数名称需要和 router_map.json 配置文件中的 buildFunction 保持一致,否则在编译时会报错。
// 跳转页面入口函数 
@Builder 
export function PageOneBuilder() { PageOne() 
} @Component 
struct PageOne { pathStack: NavPathStack = new NavPathStack()build() { NavDestination() { } .title('PageOne') .onReady((context: NavDestinationContext) => {this.pathStack = context.pathStack }) } 
} 
  1. 通过 pushPathByName 等路由接口进行页面跳转。(注意:此时 Navigation 中可以不用配置 navDestination 属性)
@Entry 
@Component 
struct Index { pageStack : NavPathStack = new NavPathStack();build() { Navigation(this.pageStack){ }.onAppear(() => { this.pageStack.pushPathByName("PageOne", null, false);}) .hideNavBar(true) } 
} 

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

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

相关文章

[CSCCTF 2019 Qual]FlaskLight (jinja2模版注入)

两种方法: 1.工具法 进来看见flask到处飘,估计就是ssti ctrlU打开发现两行注释提示GET方式传递参数search 这种有参数的我先直接丢fengjing扫了一下,结果还真搞出来,这工具还是挺牛的,就是没参数的时候搞不了 fengj…

牛客周赛 Round 55 解题报告 | 珂学家

前言 题解 补题这场比赛,好像还是难。 A. 小红的字符串 签到题 枚举最终的字符,求最小的修改 这个方法更有通用性 s input()from math import inf import stringans inf for c in string.ascii_letters:ans min(ans, sum([1 for z in s if z ! c…

【Datawhale X 魔搭 】AI夏令营第四期大模型方向,Task1:智能编程助手(持续更新)

在一个数据驱动的世界里,人工智能的未来应由每一个愿意学习和探索的人共同塑造和掌握。希望这里是你实现AI梦想的起点。 大模型小白入门:https://linklearner.com/activity/14/11/25 大模型开发工程师能力测试:https://linklearner.com/activ…

【前端可视化】 大屏可视化项目二 scale适配方案 g6流程图 更复杂的图表

项目介绍 第二个大屏可视化,整个项目利用scale进行按比例适配。 图表更加复杂,涉及到图表的叠加,mark,地图,g6流程图的能等 始终保持比例适配(本项目方案),始终满屏适配(项目一). echarts绘制较为复杂图表&#xff0…

mysql导入jdbc

每次创建项目都要导入jar包 版本对应 mysql是5xxjdbc也用5xx 下载jdbc.jar包 maven仓库搜索mysql:maven官网 导入jar包 创建lib目录,复制jar包,粘贴到lib当中 导入成功

Android Basis - 密钥和ID认证

书读百遍其义自现,知识点多复习,看到的越多,理解的也越是深刻。也许此时我看到的点是点,十天半个月之后回头看时可能就是新的点或者线了,写博客也是,越写越深刻。 遇到KeyAttestation在gms中的错误 在cts…

Nest.js 实战 (八):基于 JWT 的路由身份认证鉴权

身份验证 身份认证是大多数应用程序的重要组成部分,有很多不同的方法和策略来处理身份认证。 当前比较流程的是JWT 认证,也叫令牌认证,今天我们探讨一下在 Nest.js 中如何实现。 认证流程 客户端将首先使用用户名和密码进行身份认证认证成…

Sql与Rce注入相关漏洞复现

目录 sqli-labs注入第38,48关 第38关(单引号闭合) ​编辑 第48关 (GET请求-基于错误-盲注-数字型-order by 排序 ​编辑 贷齐乐系统多处Sql注入漏洞 环境搭建 将贷齐乐源码放入phpstudy中的www目录下 在phpstudy上创建网站&#xff1…

ESP8266与阿里云物联网平台连接

前言 最近折腾项目,需要用到ESP8266模块对接阿里云物联网平台,网上感觉十分完善的教程少了一点点,比较折腾我哈哈哈,所以打算自己写一篇。 材料准备 1、ESP8266 WiFi模块 数据线 网上随便买一个就好,十块钱左右一个…

C# winform 三层架构增删改查,(删除篇)

一.留言 C# wnform 三层架构增删改查,本篇是增删改查是删除篇,也就增删改查外加一个登录更新完,后续考虑出一个增删改查就是不用三层架构,在uI里面 直接写完,并且放一个帮助类,基本十分钟可以写完一套增删…

数据保存--总结

目录 Excel Excel--openpyxl mysql Excel Excel--openpyxl ... mysql

快速幂、矩阵快速幂

乘法快速幂: P1226 【模板】快速幂 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.OutputStreamWriter; import java.io.PrintWriter; import ja…

【C#】一个项目移动了位置,或者换到其他电脑上,编译报错 Files 的值“IGEF,解决方法

文章目录 1 问题分析2 本文解决方法 一个项目可以正常运行编译的项目,所有路径均为相对路径。 移动了位置,或者换到其他电脑上,编译报错 Files 的值“IGEF, 1 问题分析 这个错误信息表明在处理文件时,Files 的值出…

(限时免费)震惊!流落人间的haproxy宝典被找到了!一切玄妙尽在此处!

目录 haproxy七层代理详解一、负载均衡1.1 什么是负载均衡1.2 为什么使用负载均衡1.3 负载均衡类型1.3.1 硬件负载1.3.2 四层负载1.3.3 七层负载1.3.4 四层与七层的区别 二、haproxy介绍2.1 haproxy简介2.2 haproxy特性 三、haproxy详细部署3.1 实验所用的环境3.2 软件安装3.3 …

C语言 | Leetcode C语言题解之第330题按要求补齐数组

题目&#xff1a; 题解&#xff1a; int minPatches(int* nums, int numsSize, int n) {int patches 0;long long x 1;int index 0;while (x < n) {if (index < numsSize && nums[index] < x) {x nums[index];index;} else {x << 1;patches;}}retu…

【HarmonyOS NEXT星河版开发学习】小型测试案例06-小红书卡片

个人主页→VON 收录专栏→鸿蒙开发小型案例总结​​​​​ 基础语法部分会发布于github 和 gitee上面&#xff08;暂未发布&#xff09; 前言 在鸿蒙&#xff08;HarmonyOS&#xff09;开发中&#xff0c;自适应伸缩是指应用程序能够根据不同设备的屏幕尺寸、分辨率和形态&…

气象大数据案例项目(求各气象站的平均气温)

气象大数据案例项目&#xff08;求各气象站的平均气温&#xff09; 一、项目需求二、数据格式三、项目开发3.1 在windows 进行开发3.2 运行结果3.3 对项目打包 一、项目需求 现在有一份来自美国国家海洋和大气管理局的数据集&#xff0c;里面包含近30年每个气象站、每小时的天…

WSL2 最新最全帮助小白一步步详细安装教程

文章目录 一、前言1.1、什么是 WSL &#xff1f;1.2、WSL2 相比传统虚拟机的优势1.3、微软官方 二、安装步骤*2.1、启用 WSL 功能2.2、重启电脑2.3、dos命令自动安装 (一行命令搞定&#xff0c;非常方便)2.3.1、通过 cmd 打开 dos 命令行 或者 WIN键 R&#xff1a;2.3.2、输入…

探案录 | 在线打补丁,运维更轻松

清晨&#xff0c;曙光温柔地洒落在福尔摩斯K那标志性的书房内&#xff0c;福尔摩斯K坐在他那张熟悉的扶手椅上&#xff0c;眼神锐利如鹰&#xff0c;正沉浸在思考的海洋中。门突然被推开&#xff0c;华生K带着一丝急切步入室内。 “福尔摩斯K&#xff0c;这次案件非同小可&…

如何在线观看汤姆克鲁斯、比莉艾利什、红辣椒乐队、HER等明星的奥运闭幕式

2024 年巴黎奥运会将以一系列众星云集的表演者为结尾&#xff0c;他们将帮助将奥运会移交给洛杉矶——以下是在线直播盛大决赛的时间和地点。 经过两周多令人惊叹的田径运动、激烈的比赛和表情包活动后&#xff0c;2024 年巴黎奥运会即将落下帷幕。 奥运会闭幕式将于 8 月 12 …